100%{-moz-transform:rotate(15deg)} } @-ms-keyframes leftArm { 0%{-ms-transform:rotate(-5deg)}

100%{-ms-transform:rotate(15deg)} } #mascot_arm_left{ background: -webkit-radial-gradient(5% 15%, circle cover, #d7f680, #a4ca39 90%) ; background: -moz-radial-gradient(5% 15%, circle cover, #d7f680, #a4ca39 90%) ; background: -ms-radial-gradient(5% 15%, circle cover, #d7f680, #a4ca39 90%) ; } #mascot_arm_right{ background: -webkit-radial-gradient(5% 85%, circle cover, #d7f680, #a4ca39 70%) ; background: -moz-radial-gradient(5% 15%, circle cover, #d7f680, #a4ca39 90%) ; background: -ms-radial-gradient(5% 15%, circle cover, #d7f680, #a4ca39 90%) ; } #mascot_leg_left{ background: -webkit-radial-gradient(5% 95%, circle cover, #d7f680, #a4ca39 70%) ; background: -moz-radial-gradient(5% 15%, circle cover, #d7f680, #a4ca39 90%) ; background: -ms-radial-gradient(5% 15%, circle cover, #d7f680, #a4ca39 90%) ; } #mascot_leg_right{ background: -webkit-radial-gradient(10% 90%, circle cover, #d7f680, #a4ca39 80%) ; background: -moz-radial-gradient(5% 15%, circle cover, #d7f680, #a4ca39 90%) ; background: -ms-radial-gradient(5% 15%, circle cover, #d7f680, #a4ca39 90%) ; } #css3content{ width:100%; word-break: break-word ; word-wrap: break-word ; } #css3content td{ padding: 20px ; } #css3content input[type="text"]{ border-radius:8px; -moz-border-radius:8px; -webkit-border-radius:8px; } #css3content input[type="button"]{ border-radius:8px; -moz-border-radius:8px; -webkit-border-radius:8px; height:35px; width:60px; border:none; cursor:pointer; } #css3content input[type="button"]:hover{ background:#EEE; } #css3content b{ color:#F58300; font-size:18px; } .subTitle{ color:#F58300; font-size:16px; } .recommended{ color:#AAA; font-size:10px; } #border1{ width:80px; height:80px; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; } #border2{ width:180px; height:20px; border-top-left-radius:10px; border-top-right-radius:10px; -moz-border-top-left-radius:10px; -moz-border-top-right-radius:10px; -webkit-border-top-left-radius:10px; -webkit-border-top-right-radius:10px; border: 1px solid #F58300 ; color:#FFF; } #border3{ text-align:center; width:180px; border-bottom-left-radius:10px; border-bottom-right-radius:10px; -moz-border-bottom-left-radius:10px; -moz-border-bottom-right-radius:10px; -webkit-border-bottom-left-radius:10px; -webkit-border-bottom-right-radius:10px; border: 1px solid #F58300 ; } #border4{ width:80px; height:80px; border-radius:40px; -moz-border-radius:40px; -webkit-border-radius:40px; } .shadow{ box-shadow: 1px 1px 7px #333; -webkit-box-shadow: 1px 1px 7px #333; -moz-box-shadow: 1px 1px 7px #333; } .text_neon{ text-shadow: 1px 1px 5px #FFF; } .gradient1{ background: #FFA200; background: -webkit-gradient(linear,left top,right bottom, from(#F58300), color-stop(0.5, #FFF), to(#FFA200)); background: -webkit-linear-gradient(left top, #F58300, #FFF, #FFA200); background: -moz-linear-gradient(left top, #F58300, #FFF, #FFA200); background: -ms-linear-gradient(left top, #F58300, #FFF, #FFA200); background: -o-linear-gradient(left top, #F58300, #FFF, #FFA200); } .gradient2{ background: #FFA200; background: -webkit-gradient(linear,left top,right top, from(#FFF0B5), color-stop(0.5, #FFCE0C), to(#FFA200)); background: -webkit-linear-gradient(left, #FFF0B5, #FFCE0C, #FFA200); background: -moz-linear-gradient(left, #FFF0B5, #FFCE0C, #FFA200); background: -ms-linear-gradient(left, #FFF0B5, #FFCE0C, #FFA200); background: -o-linear-gradient(left, #FFF0B5, #FFCE0C, #FFA200); } .gradient3{ background: #FFA200; background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFF0B5), color-stop(0.5, #FFCE0C), to(#FFA200)); background: -webkit-linear-gradient(top, #FFF0B5, #FFCE0C, #FFA200); background: -moz-linear-gradient(top, #FFF0B5, #FFCE0C, #FFA200); background: -ms-linear-gradient(top, #FFF0B5, #FFCE0C, #FFA200); background: -o-linear-gradient(top, #FFF0B5, #FFCE0C, #FFA200); } .gradient4{ background: #F58300; background: -webkit-radial-gradient(50% 50%, circle cover, #FFF, #F58300 70%) ; background: -moz-radial-gradient(50% 50%, circle cover, #FFF, #F58300 70%) ; background: -ms-radial-gradient(50% 50%, circle cover, #FFF, #F58300 70%) ; background: -o-radial-gradient(50% 50%, circle cover, #FFF, #F58300 70%) ; } .transitionable{ transition: all 2s linear; -webkit-transition: all 2s linear; -moz-transition: all 2s linear; -ms-transition: all 2s linear; -o-transition: all 2s linear; } #anima{ position:relative; -webkit-animation: animate 5s linear infinite; -moz-animation: animate 5s linear infinite; -ms-animation: animate 5s linear infinite; } @-webkit-keyframes animate { 0%{height:25px;width:100px;top:0px;left:0px;background:red;} 25%{height:100px;width:25px;top:0px;left:0px;background:blue;} 50%{height:25px;width:100px;top:75px;left:0px;background:green;} 75%{height:100px;width:25px;top:0px;left:75px;background:yellow;} 100%{height:25px;width:100px;top:0px;left:0px;background:red;} } @-moz-keyframes animate { 0%{height:25px;width:100px;top:0px;left:0px;background:red;} 25%{height:100px;width:25px;top:0px;left:0px;background:blue;} 50%{height:25px;width:100px;top:75px;left:0px;background:green;} 75%{height:100px;width:25px;top:0px;left:75px;background:yellow;} 100%{height:25px;width:100px;top:0px;left:0px;background:red;}

} @-ms-keyframes animate { 0%{height:25px;width:100px;top:0px;left:0px;background:red;} 25%{height:100px;width:25px;top:0px;left:0px;background:blue;} 50%{height:25px;width:100px;top:75px;left:0px;background:green;} 75%{height:100px;width:25px;top:0px;left:75px;background:yellow;} 100%{height:25px;width:100px;top:0px;left:0px;background:red;}

}

อะไร ที่ไหน อย่างไร และทำไมต้อง CSS3

	Pin It
image : “A new Hope” by DanOhh Design

คุณเคยพบกับปัญหาเหล่านี้หรือไม่? อยากได้หน้าเว็บสวย ๆ แต่ก็ดันทำยาก+โหลดช้าเพราะว่ามีแต่รูปภาพเต็มไปหมด หรือหน้าเว็บมี animation สวยงามแต่เปิดทีไรเครื่องก็ทำงานหนักจนอืดและร้อนไปตาม ๆ กัน (แถมบางทีเน็ตก็ไม่ค่อยจะเอื้ออำนวยอีกต่างหาก) ทุกคนคงเคยผ่านประสบการณ์อันเลวร้ายเหล่านี้มาแล้วไม่มากก็น้อย ฉะนั้นจากนี้จะขอนำเสนอหนึ่งในเส้นทางแห่งความหวัง ประสบการณ์ที่หลายคนอาจไม่เคยได้สัมผัสมาก่อน ประสบการณ์แห่ง CSS3


แต่ก่อนอื่นเรามาทำความเข้าใจเกี่ยวกับหน้าเว็บกันสักเล็กน้อยนะครับ ปกติแล้วหน้าเว็บไซต์จะเกิดจากการนำสิ่งที่เรียกว่า element ซึ่งก็เป็นพวกกล่องข้อความ ปุ่ม ลิ้งค์ ตาราง ตัวหนังสือ เลเยอร์ต่าง ๆ (ที่บางครั้งก็มองไม่เห็น) ฯลฯ มาประกอบรวมกัน และใส่ style หรือรูปร่างหน้าตาลงไปให้แต่ละ element อย่างเช่นความกว้าง ความสูง สี เส้นขอบ เป็นต้น เพื่อจัดวางองค์ประกอบและสร้างความสวยงามให้หน้าเว็บ โดย style ที่พูดถึงนี้ก็คือ CSS หรือ Cascading Style Sheet นั่นเองครับ สิ่งที่จะแสดงให้เห็นต่อไปนี้แม้ไม่ใช่ style ทั้งหมดที่เพิ่มขึ้นมาใหม่ CSS3 ก็ตาม แต่ก็นับว่าเป็นทีเด็ดของมันเลยก็ว่าได้ครับ

**เนื่องจาก CSS3 เป็นของใหม่ browser ที่ใช้ก็อาจต้องใหม่ตามเช่นกัน ผมจะระบุ browser ที่สามารถใช้งานได้อย่างแน่นอนไว้ในตัวอย่างของ style แต่ละอันนะครับ


border-radius

---

IE 9, Firefox 4, Chrome, Safari 5, Opera 10.5

Cascading Style Sheet 3

สังเกตตรงมุมจะเห็นว่ามันดูมน ๆ นะครับ สมัยก่อนถ้าอยากได้กรอบมน ๆ แบบยืดหดได้นี่เลือดตาแทบจะกระเด็นกันเลยทีเดียว เพราะต้องสร้างรูปขึ้นมาแล้วตัดเอามุมกับขอบมาประกอบกันเอง แต่ใน CSS3 นี่อยากให้มนขนาดไหนก็ไม่ยากแล้วล่ะครับ (จะเอาให้มนจนกลมเลยก็ได้นะเออ)


box-shadow & text-shadow

---

box : IE 9, Firefox 4, Chrome 6, Safari 4, Opera 10.5 & text : IE10, Firefox 3.5, Chrome, Safari 1, Opera 9

Cascading Style Sheet 3

TEXT SHADOW

อันนี้เป็นเรื่องของเงานี่เอง ว่ากันตามหลักศิลปะก็คือ เงาจะแสดงให้เห็นถึงสิ่งที่เรียกว่ามิติ ซึ่งมันก็จะทำให้หน้าเว็บไม่ได้เป็นเพียงกระดาษเรียบ ๆ อีกต่อไปครับ


gradient

---

IE10, Firefox3.6, Chrome 10, Safari 5.1, Opera 11.10

Cascading Style Sheet 3

**Opera ยังไม่สนับสนุนการไล่สีแบบวงกลมครับ

gradient ที่พูดถึงนี่คือการไล่สีครับ ไล่สีจากสีหนึ่งไปเป็นอีกสีหนึ่งหรือต่อไปอีกหลาย ๆ สี จากบนลงล่าง ซ้ายไปขวา ทแยง หรือเป็นวงกลมก็ยังได้ ทำให้หน้าเว็บมีสีสันน่าสนใจใช้ได้เลยทีเดียว


transition

---

IE10, Firefox 4, Chrome, Safari 3.2, Opera 10.5

transition มีไว้เพื่อทำให้การเปลี่ยนแปลง style ใด ๆ ของ element ดูสมจริงและนุ่มนวลครับ คงสงสัยว่าเปลี่ยนแปลงอะไร สมจริงแบบไหน และนุ่มนวลยังไงใช่ไหมครับ ตัวอย่างต่อไปนี้จะแสดงให้เห็นถึงการเปลี่ยน style โดยไม่มี transition ครับ

ลองกดปุ่มด้านล่างนี้ดูครับ

เป็นไงครับ เปลี่ยนกันดื้อ ๆ เลยใช่ไหมครับ คราวนี้ลองใส่ transition ให้มันซะหน่อย

ลองกดปุ่มด้านล่างนี้ดูครับ

ดูสมจริง และนุ่มนวล ขึ้นมาทันทีเลยใช่ไหมล่ะครับ (tip: ลองกดปุ่มอื่นตอนที่รูปยังเปลี่ยนไม่เสร็จดูครับ)


animation

---

IE10, Firefox 5, Chrome, Safari 5

อันนี้คงไม่ต้องอธิบายอะไรกันให้มากความ มันก็คือภาพเคลื่อนไหวนั่นแหละครับ แต่ไม่ได้เป็น flash media หรือวิดีโอนะครับ เกิดจากการประมวลผลโดย browser ล้วน ๆ

---

คราวนี้ลองเอามาประกอบรวม ๆ กัน + ใส่ความคิดสร้างสรรค์เข้าไปสักหน่อยก็จะได้เป็นรูปข้างล่างนี้ครับ

(ลองเอาเมาส์ไปชี้ที่ส่วนตัวดูครับ)

---

เป็นอย่างไรบ้างครับ CSS3 สามารถทำให้หน้าเว็บสวยได้ด้วยตัวมันเอง ไม่ต้องพึ่งไฟล์ภาพนิ่งหรือภาพเคลื่อนไหวจากที่อื่นเลยแม้แต่น้อย ทำให้หน้าเว็บโหลดเร็วขึ้นมากเลยทีเดียว ยิ่งเดี๋ยวนี้เทคโนโลยีสมาร์ทโฟนกำลังมาแรงด้วยนะครับ ลองคิดดูว่าจะดีแค่ไหนถ้าเว็บไซต์กินทรัพยากรของเครื่องน้อยแถมยังแสดงภาพเคลื่อนไหวในมือถือที่ไม่รองรับ flash media ได้อีกต่างหาก ถึงแม้จะไม่อลังการเท่า flash ก็ตามที แต่ถ้าพูดถึงประสิทธิภาพและการใช้งานแล้วก็นับว่าดีไม่น้อยเลย งานนี้ก็ได้แฮปปี้กันทั้งคนทำเว็บและก็คนเข้าเว็บล่ะครับ


แหล่งอ้างอิงข้อมูลครับ ใครอยากศึกษาเพิ่มเติมก็ตามนี้เลย

- w3schools – css3

- css3 please

- css-trick (gradient)

- html5rock slideshow

โดยแทนที่ fix-z-index ด้วยชื่อส่วนของหน้าเว็บที่มีปัญหา แค่นี้ทุกส่วนก็จะถูกแสดงผลออกมาถูกต้องอย่างที่เรากำหนดเอาไว้

วันนี้เรามาทำความรู้จักเจ้าโปรแกรม WhatsApp กัน ว่ามันคืออะไรมีประโยชน์อย่างไร

WhatsApp คือ mobile application ที่สามารถส่งข้อความข้าม platform ได้ ไม่ว่าจะเป็น iPhone, BlackBerry, Android และ Nokia แต่ไม่เฉพาะ ข้อความเท่านั้น ยังสามารถส่ง รูปภาพ วีดีโอ และ audio media ต่าง ๆ ได้ด้วย

แล้วมันดียังไง??

ชั้นใช้ BlackBerry อยู่แล้วก็สามารถส่งข้อความหาเพื่อนได้นี่

ชั้นใช้ android อยู่แล้วก็ใช้ Gtalk คุยกับเพื่อนสิ

ชั้นมี iPhone อยู่แล้ว ชั้นใช้ msn หรือ Gtalk คุยกับเพื่อน สบาย ๆ

แก้ปัญหา เรื่อง การใช้ โทรศัพท์ คนละ platform

ถ้าลงเจ้าโปรแกรม WhatsApp ปัญหาต่าง ๆ เรื่อง platform ก็จะหมดไป ทุกคนสามารถ ส่งข้อความหากันได้ไม่ว่าจะใช้ โทรศัพท์คนละ platform

นอกจากนี้ยังสามารถส่งข้อความเป็นแบบกลุ่มได้ด้วยนะ เพียงแต่เราสร้าง group ขึ้นมา แล้วเลือก เพื่อนที่อยู่ใน contact list (บัญชีรายชื่อในโทรศัพท์) ของเรา ก็จะเสมือนว่าเราสร้างห้องส่วนตัวขึ้นมาคุยกันกับเพื่อนเลยทีเดียว

แล้วใช้ยังไงต้องสมัครสมาชิกอีกหรือเปล่ามีหลาย account แล้วนะ

โปรแกรมนี้ ไม่จำเป็นต้องสมัครสมาชิก และยังเหมาะสำหรับผู้ที่ไม่เคยมี account ใด ๆ หรือผู้ที่ปกติไม่เคยใช้หรือไม่เคยสมัครโปรแกรมจำพวก Instant messaging เช่น MSN Messenger หรือ Google talk เป็นต้น เพียงแค่ ลงโปรแกรม จะสามารถเห็นรายชื่อเพื่อนที่เรามี contact list อยู่ในโทรศัพท์ ถ้าเพื่อนเองก็ลง โปรแกรม WhatsApp ไว้เหมือนกันละก็คุยกันได้เลย

ไม่แน่นะบางทีคุณอาจจะได้คุยกับเพื่อนที่ไม่ได้ติดต่อกันมันนานแล้วก็ได้

แล้วต้องซื้อ promotion อะไรเพิ่มเติมสำหรับ WhatsApp หรือเปล่า

โปรแกรมนี้ ต้องใช้ internet นะ ถ้ามี package การใช้ internet อยู่แล้วละก็ ใช้ได้เลย

ถ้าเราไม่ได้เปิดใช้ internet แล้วมีคนส่งข้อความมา เราจะได้รับข้อความหรือไม่

เราจะได้รับสัญญาณเตือนว่ามีข้อความเข้ามาเมื่อเราเปิดใช้ internet เพราะฉะนั้น คุณสามารถทิ้งข้อความไว้หาเพื่อนคุณได้เลย

สรุปก็คือ มันจะคล้ายกับเราใช้ บริการ SMS แต่จะสะดวกกว่า และประหยัดกว่านั่นเอง

ที่มาและ อ่านรายละเอียดเพิ่มเติมได้ที่ http://www.whatsapp.com/

1. Second Level Cache (L2 Cache) – ใช้เก็บ Entity โดยใช้ id เป็นคีย์หลักในการตรวจสอบข้อมูล
2. Query Cache – ใช้เก็บผลที่ได้จาก Query โดยจะใช้ SQL Statement เป็นคีย์หลัก

โดย Second Level Cache (หรือ L2 Cache) นั้นยังแบ่งประเภทของข้อมูลเป็นอีก 3 ประเภทคือ

1. READ_ONLY – ข้อมูลที่ไม่มีการเปลี่ยนแปลง
2. NONSTRICT_READ_WRITE – ข้อมูลที่การเปลี่ยนแปลงไม่บ่อยมาก
3. READ_WRITE – ข้อมูลที่มีการเปลี่ยนแปลงตลอดเวลา

จะเห็นได้ว่านอกจากข้อมูลที่ไม่ค่อยมีการเปลี่ยนแปลงแล้ว เราก็สามารถใช้ Cache กับข้อมูลที่มีการเปลี่ยนแปลงบ่อยได้ด้วย แต่เนื่องจากเมื่อข้อมูลมีการเปลี่ยนแปลงแล้วจะต้องมีการปรับปรุงข้อมูลที่อยู่ใน Cache ด้วย ทำให้มีการทำงานเพิ่มมากขึ้น ฉะนั้นข้อมูลที่มีอัตราส่วนการเขียนมากกว่าการอ่าน หรือข้อมูลประเภท Transaction จึงไม่เหมาะสมที่จะใช้การ Cache

ส่วน Query Cache นั้นจะเก็บผลลัพธ์ที่ได้จาก SQL Statement เอาไว้ เมื่อมีการเรียกเรียกใช้ SQL Statement เดิมก็จะนำผลลัพธ์ที่เก็บไว้มาใช้งาน จึงเหมาะกับ Query ที่ตรงไปตรงมาหรือมีเงื่อนไขไม่มากนัก เช่น ข้อมูลประเทศ หรือหมวดหมู่สินค้า ซึ่งมีโอกาสที่จะถูกเรียกซ้ำบ่อย สำหรับ Query ประเภทที่เงื่อนไขเยอะ เช่น การค้นหาแบบละเอียด อาจจะไม่เหมาะที่จะใช้ Cache เท่าไหร เพราะมีโอกาสถูกเรียกใช้ซ้ำน้อย ทำให้เปลืองพื้นที่ในหน่วยความจำ

ข้อมูลเพิ่มเติม – ehcache.org

jQuery เป็นหนึ่งใน Javascript Library ที่ใช้กันแพร่หลายและได้รับความนิยมมากที่สุดตัวหนึ่งในปัจจุบัน แต่เนื่องจากการพัฒนาเว็บไซต์นั้นอาจมีการใช้ Javascript Library มากกว่าตัวเดียว หรือต้องพัฒนาต่อยอดจากระบบเก่าที่ใช้ jQuery คนละเวอร์ชั่นกับปัจจุบัน ทำให้อาจเกิดปัญหาความเข้ากันไม่ได้ระหว่าง jQuery และ Library ตัวอื่นขึ้นได้

สาเหตุ

ปัญหาส่วนใหญ่เกิดขึ้นจากการที่ Javascript Library ส่วนใหญ่จะใช้เครื่องหมาย $ (Dollar sign) เป็นตัวย่อในการเรียกใช้ฟังก์ชั่นทำงาน ทำให้ถ้ามีการประกาศใช้ Library ที่ใช้เครื่องหมาย $ พร้อมกันมากกว่าหนึ่งตัว จะทำให้เกิดการสับสนขึ้นได้ว่าตกลงแล้วเราจะเรียกใช้ตัวไหนกันแน่?

วิธีแก้ไข

ในกรณีแบบนี้ jQuery ได้เตรียมทางออกเอาไว้ให้แล้วด้วยฟังก์ชั่นที่ชื่อ jQuery.noConflict() ซึ่งเมื่อถูกเรียกใช้งานแล้ว jQuery จะยกเลิกการใช้งานเครื่องหมาย $ ของตัวเองทั้งหมดเพื่อให้ Library ตัวอื่นใช้งานเครื่องหมาย $ ได้แทน โดยเราจะยังสามารถใช้งาน jQuery ได้เหมือนเดิมผ่านตัวแปร jQuery

แต่ถ้าเรายังต้องการใช้งาน jQuery ด้วยการเรียกชื่อแบบสั้นอยู่ (jQuery ใช้เครื่องหมาย $ เพื่อลดรูปการเรียกชื่อตัวแปรให้สั้นลง) หรือใช้งาน jQuery พร้อมกันมากกว่าหนึ่งเวอร์ชั่น เราสามารถสร้างตัวแปรใหม่ขึ้นได้จากการเรียกใช้ฟังก์ชั่น jQuery.noConflict() เช่น

จะทำให้เราเรียกใช้งาน jQuery ด้วยตัวแปร $j ได้ แทนที่จะต้องเรียกใช้ตัวแปร jQuery ซึ่งมีความยาวของตัวอักษรมากกว่า

Pin It

Smart Phone ในปัจจุบันได้เป็นทุกอย่างในชีวิตเราไปแล้ว ทั้งนัดหมาย รูปภาพ และแหล่งบันเทิงส่วนตัว การโจรกรรม หรือการที่เราลืมวางไว้เกิดขึ้นบ่อยในชีวิตประจำวันของคนส่วนใหญ่ ที่เร่งรีบ และมีการแข่งขันสูง โปรแกรมช่วยป้องกันและตามหาโทรศัพท์เราคืน มีมากมายในตลาดปัจจุบัน แต่วันนี้จะแนะนำโปรแกรมชื่อ Prey.

Prey เป็นโปรแกรม ช่วยป้องกัน และติดตามการโจรกรรมโทรศัพท์ของท่าน (Anti-theft, tracking service)
และนอกจากจะใช้กับอุปกรณ์ smart phone แล้วยังสามารถไว้ติดตามอุปกรณ์คอมพิวเตอร์ทั้ง OS Windows, Mac และ Linux

โปรแกรมนี้ให้บริการฟรีเพียง 4 อุปกรณ์ต่อสมาชิก เท่านั้น การทำงานของมันก็ง่ายมากเพียงลงโปรแกรม Agent ไว้ในอุปกรณ์ของเรา และสามารถจัดการชุดคำสั่งต่างๆได้บนเว็บไซต์

1. ส่ง SMS ไปเพื่อ activate การทำงาน
2. สั่งให้โปรแกรม ถ่ายรูปแล้วส่งกลับมาให้เรา อาจจะได้หน้าคนร้ายก็ได้
3. สั่งปิดล็อกเครื่อง
4. สั่งให้บอกตำแหน่งของเครื่อง

ฯลฯ

จะอย่างไรก็ตาม การใช้งานซอฟท์แวร์ก็เป็นเพียงการล้อมคอกอยู่ดี ต้องมีสติและระมัดระวังของใช้ด้วยตัวท่านเองจึงจะแก้ที่ต้นเหตุ

Ref: preyproject.com

อยากได้ระบบ Office Automation เหมือนบริษัทชั้นนำ

Pin It

คุณกำลังใช้ หรือ อยากใช้ หรือเคยเห็น องค์กรขนาดใหญ่ใช้ Software เหล่านี้หรือไม่?

• Microsoft Office, Word, Excel, Powerpoint, Visio
• Microsoft Exchange, Outlook
• Lotusnote

คุณสามารถใช้ประโยชน์ในลักษณะเดียวกันและ ประหยัดได้โดยอ่านต่อไปครับ
ผู้ประกอบการ ที่เริ่มสนใจการนำ Software มาช่วยงานด้านเอกสารพื้นฐานของบริษัท ต่างเริ่มหันมาใช้ Google Apps กัน (ความเดิมตอนที่แล้ว) แล้วเจ้าGoogle Apps มันดีเยี่ยมอย่างไรเรามาดูกัน ก่อนอื่นเรามาทำความเข้าใจ Product แต่ละตัวกันก่อนครับ

1. Google Docs

คือ Program ด้านเอกสารต่างๆที่เราสามารถมาทดแทนการใช้ Word, Excel, Powerpoint และ Visio

(Program ด้านการสร้าง Diagram ภาพ) ผู้ประกอบการ ครับ ใช่ครับ ต่อไปนี้คุณจะมี

สิ่งเหล่านี้ใช้เหมือนกับบริษัทรายใหญ่ๆใช้กันแล้วครับ ถูกต้องตามกฏหมายไม่ต้องคอยกลัว

ใครจะมาตรวจอีกต่อไป ลองอ่านดูกันต่อไปครับ

Pin It

คุณสมบัติของ Google Docs มีดังต่อไปนี้:

อยู่ บน Cloud (จะกล่าวถึงในครั้งต่อไป) เป็นProgram ที่ใช้บน Internet ไม่ต้องมีการลง Software ในเครื่อง หรือคอยตาม Update, ไม่ต้องมีการดูแลรักษา Upgrade เครื่อง Server เมื่อมี พนักงานเพิ่มขึ้น สามารถใช้ได้ทั้งบน PC, Mac, Linux, หรืออุปกรณ์ต่างๆ ที่สามารถเป็น Website ใน Internet สมัยใหม่ทั่วๆไปได้ Online collaboration คุณสามารถ แชร์เอกสารและ ช่วยกันแก้ไขเอกสารไปพร้อมกันในเวลาเดียวกันได้ มีความปลอดภัยค่อนข้างสูง โดยคุณสามารถกำหนดสิทธิ์การเข้าถึงเอกสารต่างๆได้ สามารถ ดู Revision History ได้ ย้อนหลังไปดูการปรับปรุงครั้งล่าสุดได้ มีพื้นที่เก็บเอกสารได้ถึง 1 Gb หรือ อาจจะประมาณ เอกสาร 1000 ฉบับ ต่อผู้ใช้(ฉบับละประมาณ 1 mb.) **(Standard Edition) สามารถค้นหาเอกสารได้อย่างมีประสิทธิภาพโดย มี Google search engine เป็นตัวทำงานให้เราอยู่เบื้องหลัง

Pin It

Pin It

Google Docs ประกอบไปด้วย Program ต่างๆ ต่อไปนี้:

1. Document คือ เอกสารประเภท Word เหมาะกับงานเอกสารทั่วไป ทำได้ทั้งพิมพ์ แทรก

ภาพ แทรก ลิงค์ ฯลฯ

2. Presentation คือ เอกสารประเภท การนำเสนอ Slide คล้ายกับ Powerpoint

3. Spreadsheet คือ เอกสารประเภท ตาราง และ การคำนวณ ต่างๆ คล้ายกับ Excel

4. Form คือ เอกสารที่สามารถสร้างแบบสอบถามเบื้องต้นได้

5. Drawing คือ เอกสารประเภท ภาพ Diagram คล้ายกับ Visio

2. Gmail

คือ Email ที่ให้ความจุมากถึง 7.5 Gb / User ** (Standard Edition)

มา ลองดูว่า Email ฉบับใหญ่ๆ ฉบับละ 1 Mb ใน Gmail เราจะเก็บ Email ได้ถึง 7,500

ฉบับ ต่อผู้ใช้เลยทีเดียว หากคุณมีการรับส่ง Email วันละ 10 ฉบับ คุณสามารถเก็บ Email

โดยไม่ต้องลบเลยไปเป็นเวลาประมาณ 2 ปีถึงจะเต็มพื้นที่ก็เป็นได้

คุณสมบัติของ Gmail มีดังต่อไปนี้:

1. มีความจุเยอะมาก และมีแนวโน้มที่ทาง Google จะเพิ่มความจุขึ้น เราสามารถเก็บ Email

เราได้โดยไม่ต้องลบหรือ หาที่จัดเก็บ

2. สามารถ Sync กับ Program Email หลัก ที่คุณใช้อยุ่ในปัจจุบัน หรือ กับ โทรศัพท์เคลื่อนที่ ต่างๆ

ได้ง่ายดาย

3. สามารถ เก็บ Contact ลูกค้า หรือ เพื่อน คุณไว้ Sync กับ โทรศัพ์เคลื่อนที่ใช้ OS ตระกูล Android

โดยไม่ต้องกลัวว่าเมื่อคุณเปลี่ยนเครื่องแล้ว Contact จะหาย

4. สามารถค้นหาEmailได้อย่างมีประสิทธิภาพโดย มี Google search engine

เป็นตัวทำงานให้เราอยู่เบื้องหลัง

5. มีระบบป้องกัน Spam ที่มีประสิทธิภาพค่อนข้างสูงมาก

6. มีการ เชื่อมต่อ (Integration) กับ Gtalk, Google Docs, Google Calendar ทำให้ทำงานร่วมกันได้ดี

7. สามารถใช้ Gmail เป็นชื่อ Domain ของ องค์กร ของคุณได้อีกด้วย ie: JohnDoe@xp-link.com

3. Google Talk

การ สื่อสารแบบ Chat ที่เป็นที่นิยมการมาก และสามารถเก็บ ข้อความที่ Chat ไว้ได้ด้วย รวมถึงสามารถ

ส่งข้อความด่วนเข้าระบบโทรศัพท์เคลื่อนที่ ที่รองรับ Google Talk อีกด้วย

Google Chat สามารถ ใช้เป็น VoIP คือคุยกันเหมือน โทรศัพท์ หรือ เป็นภาพวีดีโอได้ ผ่านระบบเครือข่าย

Internet ซึ่งเหมาะสำหรับ องค์กรที่มี หลายสาขา และตั้งอยู่ห่างไกล Google Talk จะทำให้

ประหยัดค่าใช้จ่ายทางการโทรศัพท์ ได้เป็นอย่างมาก

คุณสมบัติของ Google Talk มีดังต่อไปนี้:

1. Messaging ส่งข้อความ คุยระหว่างกันได้ และเก็บหลักฐานได้

2. Voice Chat คุยกันผ่าน Internet

3. Video Chat คุยกันเป็น Video Conference

4. Group Chat ส่งข้อความ คุยกัน เป็นประชุม หลายคนได้

4. Google Calendar

ปฎิ ทินนัดหมาย เป็นส่วนสำคัญมากสำหรับการทำธุรกิจในองค์กร แทบจะทุกองค์กร การที่เรามี

ปฎิทินที่สามารถจะ Collaboration ได้ แชร์กัน และทุกคนใช้ปฎิทินหลัก เป็นศุนย์กลาง

ทำให้ความคลาดเคลื่อน ต่อการทำธุรกิจเกิดขึ้นน้อยลง

คุณสมบัติของ Google Calendarมีดังต่อไปนี้:

Pin It

จัดการตาราง นัดหมาย ส่งข้อความนัด ได้ สามารถเชื่อมต่อ Integrate กับระบบ Email หรือ>Program ที่รองรับได้เช่น Program บนโทรศัพท์เคลื่อนที่ สามารถสร้างและ แชร์ปฏิทิน ขององค์กรหลักและสร้างปฏิทินย่อยเพื่อแชร์ให้กับทีมงานได้อีกด้วย สามารถเปิด ปฏิทินให้เป็นสาธารณะ หรือให้ลูกค้าได้เห็นเช่นกัน

5. Google Site

Web Site สำหรับแสดงข้อมูลข่าวสาร ภายในองค์กร หรือ ศูนย์รวมเอกสารต่างๆ ที่สามารถให้ทั้ง ภายในหรือ

ภายนอกได้ ใช้งานร่วมกัน

6. Google Video

คุณ สามารถสร้างสถานีทีวี ภายในองค์กรได้ โดยสร้าง วีดีโอ File และ นำไปใช้ในการ Training หรือ

นำไปใช้แนะนำ ลูกค้า โดยที่สามารถควบคุม ความเป็นส่วนตัวได้ Google Video มีให้ใช้เฉพาะ สมาชิก

Premier Edition เท่านั้น

Pin It

7. Google Apps Market

สุดท้าย เฉพาะตอนนี้ Google Apps มีช่องทางที่จะให้ ผู้ประกอบการ สามารถเข้าไปหาซื้อ Software

ที่อาจจะมีประโยชน์และนำมาใช้ในองค์กร ร่วมกับ Google Apps ได้ด้วย อาจจะเป็น ระบบ บัญชี บุคคล

การเข้างาน ฯลฯ โดยข้อดีต่างๆนั้นก็คือมันเป็น App ที่อยู่บน Cloud และ Google จัดการเรื่อง

ความปลอดภัยทางข้อมูล และรับประกันเครื่องไม่ล่มถึง 99.99%

จาก ทั้งหมดที่กล่าวมา ผู้ประกอบการหลายท่าน คงเริ่มมีวิสัยทัศ เห็นช่องทางการนำไปใช้ประโยชน์
และนำไปประยุกค์ กับหน่วยงาน และ องค์กรของท่าน

อย่างไร ก็ตาม Google Apps ก็เป็นเพียงแค่อีกหนึ่ง ทางเลือก และ เครื่องมือ

ผู้ประกอบการก็ควรที่จะวิเคราะห์ ขั้นตอน และ กิจกรรมต่างๆ ในหน่วยงานของท่าน และปรับปรุง ขั้นตอน

หรือกิจกรรม พื้นฐานให้เหมาะสมเสียก่อน แล้วจึงนำเครื่องมือมาช่วย ลดขั้นตอน หรือกิจกรรมเหล่านั้น

จึงจะส่งผลดีต่อ องค์กรของท่าน

ทางเลือกในการลดต้นทุนทางด้านงานเอกสาร

โดนตรวจสอบ software ลิขสิทธิ์ พนักงานทำ File เอกสารหาย อยากนั่งทำงานเอกสารที่ใดก็ได้ พนักงานพลาด การนัดหมาย หรือนัดไม่ตรงกัน ต้องคอยลงโปรแกรมใหม่อยู่เป็นประจำ ส่ง file เอกสารไปให้ผู้ที่เกี่ยวข้องในองค์กรแล้วเปิดไม่ได้ อ่านเอกสารคนละฉบับข้อความไม่ตรงกัน ต้องคอยส่งเอกสารที่ปรับปรุงให้ผู้ที่เกี่ยวข้องเดิมซ้ำ หลายหน

Pin It

ปัญหาเหล่านี้สร้างความรำคาญและ เป็นอุปสรรค์ในองค์กรของคุณอยู่ใช่หรือไม่?

บริษัท ห้างร้าน และโรงงานไทย ส่วนใหญ่ต้องยอมรับว่า ได้นำระบบ Software และ นำ Computer/IT มาใช้งาน กันอย่างแพร่หลายกันมากในปัจจุบัน ทั้งทางด้าน งานขาย การผลิต และ การจัดการด้านต่างๆ และยังคงมีส่วนใหญ่ที่ยังใช้ Software ผิดลิขสิทธิ์ หรืออาจจะใช้ถูกลิขสิทธิ์ แต่ก็มีขีดจำกัด ไปด้วยงบประมาณทำให้ไม่สามารถขยาย หรือใช้ได้อย่างเต็มประสิทธิภาพ

งาน สำคัญต่างๆในองค์กร โดยเฉพาะงานด้านเอกสาร ต้องยอมรับว่า Microsoft Office เช่น Word, Excel, Powerpoint ได้ถูกใช้กันอย่างแพร่หลาย และกลายเป็นสิ่งพื้นฐานที่ถูกเรียกใช้เมื่อทำงานด้านเอกสาร ถูกฝึกให้ใช้กัน ตั้งแต่ในมหาวิทยาลัย และ สถาบันการศึกษาต่างๆ
แต่ การนำมาใช้ได้อย่างมีประสิทธิภาพสูงสุดในระดับองค์กรยังถูกน้ำมาใช้กันน้อย มาก อาจจะต้องมีการ วางระบบและลง Software ที่ Server เพื่อให้สามารถทำ Collaboration หรือ การใช้งานร่วมกัน/แชร์ เอกสาร พร้อมกันได้

Pin It

ข้อจำกัดต่างๆที่เกิดจากการใช้ Software ข้างต้น เช่น

1. ต้องคอย Install ตาม Upgrade Software
2. ต้องคอยหาคนดูแล Server
3. ต้องคอย สำรองไฟ Server
4. ต้องคอย Upgrade Server
5. ราคาค่า License ลิขสิทธิ์ ที่สูง
6. ต้องคอยปวดหัวว่า ต้องซื้อ Software ตัวไหนบ้างมาใช้
7. เมื่อซื้อผิดแล้วก็กองไว้ตรงนั้น ต้องไปซื้อมาใหม่อีก
8. เมื่อซื้อมาใช้แล้วหลายปี พอจะขยาย Software ตัวเดิมไม่มีขาย มีแต่ Version ใหม่ ทำให้ต้องเปลี่ยนของที่มีอยู่ทั้งหมด ตามด้วย
9. ต้องจ้างพนักงาน IT ที่ติดตั้งดูแลเป็น ตามข้อต่างๆข้างต้น

ทำให้คุณไม่สามารถใช้ Software ข้างต้นได้ หรือ ขยายได้

ผู้ประกอบการ SME ทั้งหลายล้วนมีความต้องการคล้ายกันกับองค์กรขนาดใหญ่ แต่อาจจะถูกปิดกั้นด้วยข้อจำกัด หรือ อาจขาดความองค์ความรู้เหล่านี้ และทางเลือกของท่านคือ อะไร?

Pin It

Google Apps,

Google บริษัทรายใหญ่ ที่เรารู้จักกันดีในชื่อ Google ที่เราใช้ในการ ค้นหาบน Web/Internet และยังให้บริการ Gmail ที่เป็นบริการ Email ฟรี อีก/ด้วย

Google ได้เพิ่มบริการต่างๆ ออกมาสู่ตลาดอยู่อย่างต่อเนื่อง และ Google Apps ก็เป็นส่วนหนึ่งของ บริการของ Google ที่มาตอบสนอง หน่วยงาน หรือ องค์กรต่างๆ ได้อย่างดีเยี่ยม

ดีเยี่ยมอย่างไรเรามาดูกันว่า Google Apps มีอะไรมาให้เราใช้กันบ้าง

Google Apps ประกอบไปด้วยหลาย Editions:

1. Premier ($50 / ปี / คน)
2. Standard (Free, ไม่เกิน 50 คน)
3. Education (Free ทำได้เหมือน Premier)
4. Government (เหมือน Premier)
5. Non-profit (Free ไม่เกิน 3,000 คน เหมือน Education)

Google Apps มีเครื่องมีอมาให้ดังนี้:

1. Google Docs (Document, Presentation, Spreadsheet, Form, Draw)
2. Gmail
3. Gtalk
4. Google Calendar
5. Google Site
6. Google Video ** (Premier Edition)
7. Google Apps Market

ผู้ประกอบการ จะสามารถประหยัดค่าใช้จ่ายต่างๆที่กล่าวมาอย่างมาก และเลิกปวดหัว กับการดูแล Server และต้องไล่ตาม Update Software

เพิ่มประสิทธิผลการทำงานได้มากยิ่งขึ้น ความซับซ้นการเก็บ Fileจะลดลงและหมดไป แชร์เอกสาร และ สามารถช่วยกันอ่านและ แก้ไขเอกสารสำเนาเดียวกันได้ แบบที่ Software ระดับสูงทำได้กัน

รวมทั้งความสามารถในการเตือนนัดหมาย และมีปฏิทินกลางอันเดียวกันขององค์กร

เพียงเท่าที่กล่าวมาข้างต้นนี้ อาจจะทำให้หลายๆคนเริ่มเห็นทางเลือกแล้วว่า องค์กรเราก็สามารถนำเทคโนโลยีมาใช้ เพิ่ม Productivity ในการทำงานได้โดยลดต้นทุนไปได้มากจากการ หันมาใช้ Google Apps.

Google Map 

คือ Applicationแผนที่onlineที่ GoogleเปิดAPIให้เราเรียกงานผ่านWebโดยไม่ต้องเสียค่า

ใช้จ่ายแต่อยางใดโดยgoogleได้เปิดช่องทางให้ท่านสามารถเรียกใช้งาน Google Mapsผ่าน

API ให้ไปปรากฏบนหน้าwebsiteของท่านได้และมีวิธีการทำที่ไม่ซับซ้อนมากจนเกินไป
 

ความรู้ที่เพื่อนควรมีก่อนการทำGoogle Map

         1 FlashScript หรือ JAVAScript

         2 Form HTMLและCSS

วิธีทำGoogle Mapนั้นมีขั้นตอนดังต่อไปนี้

        1  ต้องทำการสมัครAPI keyก่อนโดยการใส่ชื่อ websiteของ ท่าน และgoogleจะทำการ

Generate APIKey ให้ และใช้Key นี้เพื่อใช้ในตรวจสอบก่อนการการเรียกใช้งาน Google Map

<link ที่ใช้สมัคร API key>http://code.google.com/apis/maps/

        2  เราได้ใส่ชื่อแล้วเราจะได้ APIที่มีหน้าตาแบบนี้
Your key is:ABQIAAAAZldylSKaT1dVGBqo83Q24RStgBFla87IauNVcdIb-lDNqlsAbxR

Uu6uROJCOT9dSBfzZWpAnEtJ0Hg
This key is good for all URLs consisting of this registered domain (and directory if applicable)

:http://192.168.1.53/What2Eat/

        3  หลังจากได้key มแล้วให้เราทำการbookmarkหน้านั้น เอาไวเพื่อง่ายต่อการจดจำหรือแล้วแต่เทคนิคที่

จำของแต่ละคน
        4  เราใช้คำสั่งนั้นในการตรวจสอบและเรียกใช้งานgoogle maps ไปใส่ในหน้าที่เราต้องการแสดงGoogle Map
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAA

AA1XbMiDxx_BTCY2_FkPh06RRaGTYH6UMl8mADNa0YKuWNNa8VNxQEerTAUcfkyrr6OwBovxn7TDAH5Q">
</script>
        5  หลังจากนั้นเราจะเขียนส่วนประกอบของGoogle Mapที่เราตองการผ่าน Func. initialize()
        6  เราจะสั่งให้bodyทำการLoad Func. initialize()เพื่อShow Google Map
        7  เราใช้<div id="map_canvas" style="width: 500px; height: 300px"></div>เพื่อกำหนดขนาดของ

Google Mapได้ที่style="width: 500px; height: 300px"
**ข้อแนะนำในการสมัครAPI-key ควรใช้ชื่อURLหรือMap URL เพื่อความสะดวกเวลาทำการย้ายServerและไม่ควรใช้ IP AddressในการสมัครAPI Key
 

ตัวอย่างการเขียนGoogle Maps

<!–
 copyright (c) 2009 Google inc.

 You are free to copy and use this sample.
 License can be found here: http://code.google.com/apis/ajaxsearch/faq/#license
–>
 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

	<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">

	 <head>

	   <meta http-equiv="content-type" content="text/html; charset=utf-8"/>

	   <title>Google Maps API Sample</title>

	   <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAA1XbMiDxx_BTCY2_Fk
            Ph06RRaGTYH6UMl8mADNa0YKuWNNa8VNxQEerTAUcfkyrr6OwBovxn7TDAH5Q"></script>

	   <script type="text/javascript">

	   function initialize() {

	     if (GBrowserIsCompatible()) {

	       var map = new GMap2(document.getElementById("map_canvas"));

	       map.setCenter(new GLatLng(37.4419, -122.1419), 13);

	     }

	   }

	   </script>

	 </head>

	 <body onload="initialize()" onunload="GUnload()" style="font-family: Arial;border: 0 none;">

	   <div id="map_canvas" style="width: 500px; height: 300px"></div>

	 </body>

	</html>

ส่วนเพิ่มเติม

map.setCenter(new GLatLng(37.4419, -122.1419), 13);
37.4419, -122.141เป็นการกำหนดค่าเริ่มต้นให้กับแผนที่และ 13คือการกำหนดว่าเราจะมองแผนที่ละเอียดแค่ไหน
เราสามารถเพิ่มเติมเครื่องมือและลูกเล่นให้กับGoogle Mapได้โดย
เรียกคำสั้งต่อจากการsetตำแหน่ง
map.addControl(new GSmallMapControl());คือการเพิ่มเครื่องมือปรับระดับความละเอียดของGoogle Map
map.addControl(new GMapTypeControl());คือการเพิ่มเครื่องมือเรียกชนิดmapต่างๆของGoogle Map
 

สรุป

    ในการสมัครใช้งานGoogle Map นั้นทำได้ง่ายมากและไม่เสียค่าใช้จ่ายแต่อย่างใด Google Map จึงเป็นอีกทางเลือกหนึ่งในการเพิ่ม

Function การใช้งานให้กับWeb Site ซึ่งวิธ๊ที่ผมได้นำเสนอไป นั้นเป็นเพียงการเรียกใช้งานGoogle Map เบื้องต้นเท่านั้น หากท่าผู้อ่านต้อง

การใช้งานในส่วนอื่นก็สามารถศึกษาเพิ่มเติมได้ที่Reference สุดท้ายผมหวังว่าบทความนี้จะเป็นประโยชน์แก่ผู้ที่ต้องการศึกษาวิธีการใช้งาน

Google Map
 

ข้อมูลเพิ่มเติมสามารถหาอ่านได้ที่

http://code.google.com/apis/maps/documentation/
 

ตัวอย่างการเขียนCode

http://code.google.com/apis/ajax/playground/?exp=maps#map_control_simple
 

Reference

http://code.google.com/apis/ajax/playground/?exp=maps#map_control_simple
http://code.google.com/apis/maps/documentation/

• 1. Inserting test data using SQL script by manually.
• 2. Import and Export data automatically by other applications.

DBUnit is a tool which provides for Data Access Objects Testing.

Process of DBUnit

    DBUnit export set of data in the one database to flat file (XML) before running the test. Then the tests are run, it import these test data from XML file to another database and deletes the test data when the tests are finish.

Spring Framework and DBUnit

    Spring framework provides ?AbstractTransactionalDataSourceSpringContextTests? class for DBUnit. This class has ?onSetUpInTransaction? and ?onTearDownInTransaction? methods which can be overridden to use to insert and delete test data. Spring-managed beans defined in the integration tests are injected into the integration tests. Junit 4 and TestNG provide a more sophisticated lifecycle.

Advantages of DBUnit

    1. Simple and easy to implement.
    2. Test data of each tests is independent because it insert the test data when the tests is run and delete when tests is finished
    3. Support Spring framework, objects is injected automatically.
    4. XML file, that is created to store data, as a template and developer can modify its.


Reference : http://www.theserverside.com/tt/articles/article.tss?l=ManageTestDataSpringandDBunit