ก่อนอื่น อะไรคือ HTML5 มันก็ คือ มาตราฐานของ ภาษา html version ใหม่ ที่มีคุณสมบัติเพิ่มขึ้นมามากมาย แต่ อีเจ้า HTML5 มันยังติดปัญหาอยู่ที่ว่า ยังมี browser ที่ support น้อยมาก และ แต่ละตัวก็ยัง support ไม่เต็ม 100% แต่ ยังไงแล้วมันก็เป็นอนาคตที่กำลังมาแน่นอน เพราะฉะนั้นเรียนรู้ไว้จะดีมาก
คราวนี้ถ้าเรามาพูดถึง HTML ก็คงจะนึก ถึง tag หน้าตาแบบนี้เต็มไปหมด <html> ก็ไม่ผิดครับเพราะ เจ้า html5 ก็มี tag ใหม่ๆมากมายที่เพิ่มขึ้นมาไม่ว่าจะเป็น video audio หรือ canvas อันทรงพลัง แถม tag บางอย่าง ก็ถูกตัดออกจากมาตรฐานใหม่นี้ด้วย
ถึงจะมีหลายๆ tag ที่น่าสนใจ แต่สิ่งที่ผมเตะตาอย่างแรกที่ได้จับ html5 มันกลับไม่ใช่ tag นานาชนิด แต่เป็น “JSAPIs(java script Application programming interface)” เพราะเจ้าตัว api ที่มากับ html5 มันเสริม ประสิทธิภาพที่จะทำให้ เว็บไซต์กลายเป็น application ได้ค่อนข้างสมบูรณ์ ที่ผมสนใจอาจจะเป็นเนื่องจากว่า ผมอยากเขียน mobile app แต่ โง่ oop และ java มาก พอ html5 ทำอะไรหลายๆอย่างได้ ก็ยิ่งอยากจะหันมาทำมันมากขึ้น แต่ผมก็ยังหายสงสัยไม่ได้ว่าทำไม jsapis บางตัวเหมือน google gear มากๆ แถมคนเสนอ ยังเป็นคนของ google ผมสงสัยว่า google จะกลายเป็นคนกำนดมาตราฐานเว็บใช่มั้ย
เอาเถอะ มาดูกันกีกว่าว่า jsapis ที่น่าสนใจมีอะไรกันบ้างงงง
Finding elements by class : ตอนอ่านงงมากครับ ว่ามันเพิ่งมีหรอ เพราะปกติไม่ได้ใช้ๆแต่ jquery แต่ก็ดีครับไม่งั้นก็ต้องมาคอย getElementById กันอย่างเดียว คราวนี้เราก็จะได้ใช้
getElementsByClassName บ้างแล้ว แต่ก็ยังสงสัย มันเพิ่งมีจริงๆใช่มั้ย
Web Storage : อันนี้ผมชอบมาครับ เพราะ เจ้า Web Storage มันทำหน้าที่เหมือน memcache บน เครื่อง client ถ้าในอนาคตเรา design ระบบดีๆ เราจะลดการใช้ทรัพยากรบน server ไปได้พอสมควร วิธีการใช้ก็ง่ายมากครับ window.localStorage['value'] = area.value; จบ
มีใครสงสัยเหมือนผมมั้ยว่ามันต่างกับ cookie ยังไง แต่ที่เห็นอันนึง ก็คือ มันไม่ต้อง define วันหมดอายุ แถม ยังใช้ง่ายกว่า cookie บน js
Web SQL Database : สำหรับตัวนี้ก็ถือว่าเป็นตัวเด่นสำหรับ HTML5 อีกตัว ถ้าให้อธิบายง่ายๆมันก็คือ sqllite ที่ทำงานบน browser คำสั่งทุกอย่างใช้ SQL ได้ทันที แต่เสียดายที่มัน Limit data size ไว้ 5 MB
Application Cache API : ตัวนี้ขอ present ใครไม่ชอบไม่รู้แต่ผมชอบมากๆๆๆๆๆๆๆๆๆ เพราะมันคือ การ cache ไฟล์ที่เรากำหนดให้ เปิดดูตอน offline ได้ วิธีการแสนจะง่าย ใส่ <html manifest=”cache-manifest”> ลงไป บนหัว แล้ว ก็ไปกำหนดใน cache-manifest ว่าให้ cache ไฟล์ไหนบ้าง คราวนี้ คุณก็สามารถ ที่จะ ดู url นั้น ตอนไม่ได้ ต่ออินเตอร์เน็ตได้ทันที
อันนี้เป็นวิธีการเขียน ไฟล์ manifest ครับ http://www.webreference.com/authoring/languages/html/HTML5-Application-Caching/
Web Sockets : อันนี้บอกตามตรงเลยว่า ยังไม่ค่อยรู้เรื่องเท่าไหร่ แต่จากที่ฟัง @dominixz อธิบายให้ฟังก็ได้ใจความว่า มันคล้ายๆ กับการเปิด socket ใน PHP แต่ มันเปิดใน HTML เอ่อ…….. ก็ยังงงอยู่ดี แต่ อันนี้ก็น่าสน
Notifications : อันนี้ เหมือนจะไม่มีประโยชน์แต่คิดว่าได้ใช้ มันคือ Notifications api ที่สามารถสร้าง box Notifications ขึ้นมาโดยไม่สนใจว่า คนดูจะดูเว็บหน้าไหนอยู่ มันก็จะโผล่ขึ้นมาได้ ตัวอย่างก็เช่น คุณเปิดเว็บ อีเมลเพื่อเช็ค เมล แล้วคุณดันสลับหน้าจอไปดูเว็บอ่านข่าว พอมี อีเมลเข้ามาแจ้งเตือน api ตัวนี้ก็จะไป แทรกตัวสร้างกล่องเตือนอีเมลขึ้นมาบนหน้าเว็บข่าวคุณทันที
น่าตากล่อง สาระแน ที่เรียกแบบนี้เพราะไม่ว่าคุณไปหน้าไหนมันก็โผล่มาได้ แถมปิดเว็บนั้นไปแล้ว มันก็ยังอยู่ถ้าคุณไม่กดปิดมัน
Drag and drop : ปัจจุบันจะเขียน drag and drop กันที ต้องงัดวิชา javascript ออกมาใช้กันสุดๆ แต่ตอนนี้ไม่ต้องแล้ว เพราะ HTML5 สามารถสร้าง drag and drop ได้ด้วย javascript สองบรรทัด แถม drag แล้ว ยังสามารถ ดึงข้อมูลออกมาได้หมด ไม่ว่าจะเป็น ชื่อ ขนาด Url ได้หมด
น่าตา กล่อง drag and drop จากเว็บ http://apirocks.com
Geolocation : เป็นตัวที่หน้าหวือหวามากๆครับ เพราะ มันสามารถหาตำแหน่งของคุณได้ผ่าน browser ทันที แต่ตอนที่ผมเห็นไม่ได้ตกใจอะไรมากเพราะ ทำงาน LBS มาหลายชิ้น ใช้จาก google gear จนชิน แถม ไอ้เจ้าตัวนี้ ยังแม่นสู้ google gear ที่มีอยู่ไม่ค่อยได้ อาจจะต้องรออีกพักน่าจะแม่นกว่านี้ ส่วนวิธีการ detect ที่ api ประเภทนี้ใช้ก็ไม่พ้น ค่า cellsite, gps หรือ wifi location ที่เคยถูกจำไว้ ณ สถานที่นั้น แต่ยังไง gear ก็ยังแม่นกว่านะ(แอบเชียร์)
และหมดกันไปแล้ว กับ jsapis ที่มาพร้อมกับ HTML5 แต่อาจจะต้องรออีกนิดให้ browser พัฒนาเสร็จกันหมด developer ก็คงหันมาใช้กันมากขึ้น อย่างที่บอกไป HTML5 ไม่ได้มี แต่ tag หรือ jsapis ไม่แน่ ผมอาจจะได้เห็น บทความเรื่อง HTML 5 ไม่ได้มีดี แค่ JSAPIs จาก บล็อกใครซักคนก็ได้ ตอนนี้ในเทืองนอกให้ความสนใจมากๆกับ HTML5 ผมหวังว่าเร็วๆนี้ คนไทยคงหันมาสนใจมันอย่างจริงจังบ้าง ถ้าใครสนใจ HTML5 ผมมีเว็บดีๆอ่านง่ายๆแนะนำครับ http://apirocks.com/html5/html5.html#slide1 อ่อ อย่าลืม ใช้ chrome5.0+, ff3.6.4+, IE9.0, Opeara10.5.2 เปิดดูเท่านั้นนะครับ
ว้าววว ขอบคุณสำหรับบทความดีดีครับ
ขอบคุนสำหรับข้อมูลดีดีนะคะ