By: mk 
on 20 February 2012 - 15:59
Tags:
Topics:
บทความชุดนี้จะแนะนำข้อมูลเบื้องต้น (ย้ำว่า "เบื้องต้น") ของเทคโนโลยีใหม่ที่ทุกคนจับตาอย่าง HTML5 เพื่อเตรียมความพร้อมและปูพื้นฐานของ HTML5 ให้กับนักพัฒนาเว็บในประเทศไทย
ภาคแรกของบทความนี้จะกล่าวถึงข้อมูลของ HTML5 ในภาพรวม ว่ามันคืออะไร มันทำอะไรได้บ้าง ก่อนจะเข้าสู่รายละเอียดของเทคโนโลยีบางตัวที่สำคัญในภาคต่อๆ ไป
อะไรคือ HTML5
ผู้อ่าน Blognone คงได้ยินชื่อ HTML5 กันมาเยอะ แต่ว่าแท้จริงแล้วมันคืออะไรกันแน่?
ความหมายทั่วไปของคำว่า HTML5 มีสองนัยยะที่เหลื่อมซ้อนกันอยู่ครับ
ความหมายในมุมแคบ มันคือ สเปกของภาษา HTML รุ่นที่ 5 ซึ่งต่อจาก HTML4 ที่เราใช้กันทุกวันนี้ โดยปัจจุบันสเปกยังร่างไม่เสร็จ (ดูได้จากเอกสารของ W3C) เนื้อหาจะครอบคลุมลักษณะ ฟีเจอร์ และ syntax ของ HTML เท่านั้น
ความหมายในมุมที่กว้างขึ้น มันคือ ชุดของเทคโนโลยีเว็บสมัยใหม่ อันประกอบไปด้วย
- ภาษา HTML5 ตามข้อแรก
- CSS3
- API อีกชุดหนึ่งที่อยู่นอกสเปก HTML5 แต่ออกแบบมาให้ใช้งานร่วมกัน เช่น Geolocation, IndexedDB, File API ที่กำลังเป็นร่างมาตรฐานของ W3C แยกมาอีกชุดหนึ่ง
- เทคโนโลยีประกอบอื่นๆ ที่เป็นมาตรฐานของ W3C อยู่แล้ว และนำมาใช้ร่วมกับ HTML (ซึ่งจะเป็น HTML4 หรือ HTML5 ก็ได้) เช่น SVG หรือ MathML
HTML5 ในที่นี้เราจะหมายถึงความหมายอย่างที่สอง ก็คือเทคโนโลยีเว็บรุ่นใหม่แบบรวมๆ นะครับ
ทำไมต้องมี HTML5
จะว่าไปแล้ว เทคโนโลยีใน HTML5 แทบไม่มีอะไรใหม่ในโลกไอทีเลย เพราะเกือบทุกอย่างที่ HTML5 ทำได้ อยู่ในกระบวนการพัฒนาโปรแกรมแบบ native มาช้านานแล้ว เช่น การทำงานแบบออฟไลน์ หรือ การวาดกราฟิก
เพียงแต่ HTML5 นำเทคโนโลยีที่เคยอยู่ในโลก native ย้ายเข้ามาสู่โลกของเว็บ ทำให้มันมีข้อดีของทั้งสองโลก คือ ฟีเจอร์อันรุ่มรวยและประสิทธิภาพในการทำงานจากโลก native มาผสานกับความคล่องตัว เข้าถึงได้จากทุกที่ของเว็บ
เดิมที ภาษาตระกูล HTML/SGML เป็นภาษาที่ออกแบบมาเพื่อ "อธิบาย" หรือ "นิยาม" การแสดงผลข้อมูล เช่น ตัวหนา ตัวเอียง หัวเรื่อง ลิงก์ ซึ่งการใช้งานก็คือเอาไว้ทำเอกสารที่เชื่อมโยงกัน (ตัวอย่างคือ Help ของวินโดวส์)
พอมีอินเทอร์เน็ต HTML ก็ทำหน้าที่สร้าง "โบรชัวร์อิเล็กทรอนิกส์" ที่สามารถดูได้จากระยะไกล ถึงแม้ตอนแรกจะมีแต่ข้อความ แต่ระยะต่อๆ มาเทคโนโลยีเว็บก็พัฒนามากขึ้น สามารถใส่ภาพ เสียง วิดีโอ (ผ่านปลั๊กอิน) มีแนวคิดเชิงโปรแกรมอย่างจาวาสคริปต์เข้ามา (จริงๆ มี VBScript ด้วยแต่ดังสู้ไม่ได้) ในยุคของ HTML3
พอเป็นยุคของ HTML4 เราเริ่มเห็นเว็บแบบที่ตอบโต้ได้ มีความเป็นอินเตอร์แอคทีฟมากขึ้น ซึ่งเกิดจากเทคโนโลยีอย่าง AJAX, XMLHttpRequest ทำให้เว็บมีความใกล้เคียงกับ "แอพ" แบบดั้งเดิมมากขึ้น อย่างไรก็ตาม มันยังสู้แอพแบบ native ไม่ได้ เพราะยังขาดฟีเจอร์สำคัญๆ อีกหลายอย่าง เช่น การทำงานออฟไลน์ กราฟิกสามมิติ ฯลฯ นั่นเอง
สุดท้ายแล้ว HTML5 จะช่วยให้เรานำเทคโนโลยีจากโลกของเว็บ มาสร้างแอพที่มีลักษณะใกล้เคียงกับแอพแบบ native (ไม่ว่าจะบนพีซีหรือมือถือได้) ตัวอย่างที่ชัดเจนที่สุดในตอนนี้คือ PhoneGap ซึ่งเป็นเครื่องมือพัฒนาแอพมือถือด้วย HTML5
HTML5 มีความสามารถอะไรบ้าง
เกริ่นกันมานานก็เริ่มเข้าเรื่องกันสักทีนะครับ ส่วนประกอบของ HTML5 มีหลายอย่างมาก เราอาจไม่จำเป็นต้องใช้ทุกฟีเจอร์
ส่วนการอธิบายส่วนประกอบของ HTML5 ก็ขึ้นกับว่าเราจะจัดหมวดหมู่มันอย่างไร มีหลายตำราให้เลือก ในบทความนี้ผมขอเลือกตาม W3C ที่อุตส่าห์ออกแบบโลโก้-ไอคอนของ HTML5 เพื่อแสดงสัญลักษณ์ของเทคโนโลยีเว็บแขนงต่างๆ เพื่อให้เข้าใจง่ายและแยกหมวดหมู่ตามกัน
W3C แบ่งเทคโนโลยีในชุด HTML5 ออกเป็น 8 หมวด พร้อมไอคอนประกอบทุกหมวด ขอใช้ชื่อตามนั้น และเรียงลำดับกันไปเช่นเดียวกับเว็บ W3C HTML5 Logo
1. Semantics
เทคโนโลยีกลุ่ม Semantics คือตัว syntax ของภาษา HTML5 ที่แน่นอนว่าเปลี่ยนไปจาก HTML4 ซึ่งมีแท็กใหม่ๆ และคุณสมบัติ (atrribute) ใหม่ๆ เพิ่มขึ้นอีกพอสมควร
โดยโครงสร้างของภาษาแล้ว HTML5 ยังเหมือนกับ HTML ที่เราคุ้นเคย แต่เพิ่มแท็กใหม่ ตัดแท็กเก่า และเปลี่ยนวิธีใช้แท็กเก่าบางตัวออกไป รายละเอียดอ่านได้จาก HTML5 differences from HTML4 ของ W3C
ยกมาเป็นตัวอย่างพอให้เห็นภาพ
แท็กใหม่
แท็กกลุ่มนี้จะช่วยบ่งบอกความหมายของวัตถุในเว็บเพจได้ดีขึ้น เช่น จากเดิมเราใช้ <div id="header"> ก็เปลี่ยนมาเป็น <header> ทำให้เบราว์เซอร์สามารถรับทราบความหมายของวัตถุแต่ละชิ้นได้ดีขึ้น
ตัวอย่าง
- section - บ่งบอกเซคชันของเนื้อหา
- article - กำหนดขอบเขตของตัวเนื้อบทความ
- aside - กำหนดขอบเขตของเนื้อหาเสริม (ล้อมกรอบ)
- header - กำหนดขอบเขตของส่วนเริ่มต้นหรือส่วนหัวของเว็บไซต์ (อย่าสับสนกับ <head>)
- footer - กำหนดขอบเขตของส่วนท้ายของเว็บไซต์ พวกข้อความกำหนดสิทธิ์ต่างๆ
- nav - บอกว่ามันเป็นส่วนนำทางของเว็บไซต์
- figure - บอกว่าเป็นภาพหรือวิดีโอประกอบเนื้อหา (ข้างในสามารถซ้อนแท็ก img หรือ video พร้อมคำอธิบายได้อีกชั้น)
นอกจากนี้ส่วนของฟิลด์ยังมี attribute ใหม่อีกกลุ่มสำหรับ input type ที่เจาะจงกว่าเดิม เช่น จากเดิมเราใช้ <input type="text" id="email"> ก็เปลี่ยนเป็น <input type="email"> แทน
- tel - เบอร์โทร
- search - ช่องค้นหา
- url
- datetime
- date
- time
- color
แท็กที่ถูกตัดออก
ส่วนใหญ่เป็นแท็กเก่าที่ทำหน้าที่กำหนดฟอร์แมตการแสดงผล ซึ่งย้ายไปใช้ CSS แทนหมดแล้ว นอกจากนี้ยังเอาแท็กที่เกี่ยวกับเฟรมทั้งหมดออกไป เพราะล้าสมัยแล้ว และแท็กที่ไม่ค่อยมีคนใช้อย่าง acronym (ใช้ abbr แทน) หรือ applet (ใช้ object แทน)
- big
- center
- font
- strike
- frame
- frameset
- noframes
- acronym
- object
แท็กที่ถูกเปลี่ยนวิธีใช้
แท็กเก่าแต่เปลี่ยนความหมาย-วิธีใช้งาน
- i - ไม่ได้หมายถึงการทำตัวเอียง (เพราะอยู่ใน CSS) แต่หมายถึงโทนเสียงของตัวข้อความที่เปลี่ยนแปลง
- small - หมายถึงข้อความหรือคอมเมนต์ประกอบเนื้อหาหลัก ที่ควรจะแสดงด้วยตัวเล็กกว่าปกติ
- strong - หมายถึงข้อความสำคัญ ไม่ใช่การเน้นด้วยตัวเข้ม
- u - เป็นการบ่งชี้ว่าข้อความจุดนี้มีการแสดงผลแบบพิเศษ เช่น จงใจเขียนให้ผิดเพื่อเป็นตัวอย่าง หรือ ชื่อในภาษาจีน เป็นต้น
นอกจากแท็กหลักที่เปลี่ยนแปลงแล้ว เทคโนโลยีในหมวดนี้ยังรวมไปถึงเทคโนโลยีเว็บหลายๆ ชนิดที่มีอยู่แล้วในปัจจุบัน เช่น RDFa, Microdata, Microformats ที่ช่วยกำหนดความหมายให้กับเนื้อหา เพื่อนำไปประมวลผลต่อได้ง่ายขึ้นครับ
จะเห็นว่าในภาพรวมแล้ว HTML5 หมวด semantics จะช่วยให้ตัวโครงสร้างของเว็บเพจมีความหมาย (ในเชิงของ semantic web) มากขึ้น
รายละเอียดเพิ่มเติมอ่านได้จาก HTML5 Semantics - Smashing Magazine
2. Offline & Storage
เทคโนโลยีในหมวดนี้ก็ตรงตามชื่อหมวด นั่นคือช่วยให้เว็บสามารถทำงานแบบออฟไลน์ได้ และเก็บข้อมูลไว้ใช้งานบนเครื่องของผู้ชมเว็บได้
ผมเคยเขียนเนื้อหาในหมวดนี้ไปแล้วครั้งหนึ่งในบทความ รู้จักกับวิธีการเก็บข้อมูล Local Storage ของ HTML5 ก็ขอเอามารียูสเพราะเนื้อหาเหมือนกันทุกประการ
Web Storage
เทคโนโลยีแรกคือ Web Storage ซึ่งเป็นการเก็บข้อมูลแบบง่ายๆ ในรูป key-value (ภาษาโปรแกรมบางภาษาเรียก dictionary) ซึ่งแยกย่อยได้อีก 2 อย่าง คือ
- Session storage เก็บข้อมูลเฉพาะเซสชันการท่องเว็บนั้นๆ ปิดแท็บเมื่อไรข้อมูลก็หายไป ใช้ออบเจคต์ชนิด sessionStorage อันนี้ไม่ซับซ้อน
- Local storage เก็บข้อมูลระยะยาว (persistence) โดยใช้ออบเจคต์ชื่อ localStorage ซึ่งจะซับซ้อนขึ้น เพราะเราสามารถเปิดเว็บเพจเดียวกันใน 2 แท็บหรือมากกว่า ซึ่งมันจะแชร์ข้อมูลก้อนเดียวกัน
ฟีเจอร์ Web Storage จะคล้ายกับ Google Gears เมื่อ 3-4 ปีก่อนหน้านี้ เพียงแต่ Web Storage รวมมากับ HTML5 เลย ไม่ต้องลงปลั๊กอินเพิ่มเองแบบ Gears
ฐานข้อมูล
การเก็บข้อมูลง่ายๆ แบบ key-value อาจไม่เพียงพอต่อความต้องการของนักพัฒนา HTML5 จึงเพิ่มวิธีการเก็บข้อมูลที่ซับซ้อนขึ้นมา ซึ่งก็คือฐานข้อมูลแบบที่เราคุ้นเคยนั่นเอง
ปัญหาของฐานข้อมูลใน HTML5 ก็คือมาตรฐานที่แยกเป็นสองทาง
- Web SQL Database มันคือการนำ SQL มายัดใส่เบราว์เซอร์ (ส่วนมากนิยม SQLite) ตอนนี้ใช้ได้แค่เบราว์เซอร์ตระกูล WebKit และ Opera แนวทางนี้มีข้อเสียตรงความซับซ้อนของ SQL และเริ่มหมดความนิยมแล้ว (ทั้งที่มาตรฐานยังไม่เสร็จ)
- IndexedDB แนวทางใหม่ที่สร้างขึ้นในภายหลัง ไม่ใช้ SQL แต่เก็บข้อมูลแบบ key-value เหมือนกับ Web Storage เพียงแต่เพิ่มการทำดัชนี (index) ช่วยให้หาข้อมูลได้รวดเร็วขึ้น และเพิ่มเรื่อง transactions เพื่อความปลอดภัยของข้อมูลมาด้วย
Blognone เคยลงเรื่อง Web SQL vs IndexedDB ไปครั้งหนึ่งแล้ว ย้อนอ่านรายละเอียดได้ในตอนเก่าครับ
File API
เราพูดถึงการเก็บข้อมูลแบบง่ายๆ และการเก็บลงฐานข้อมูลไปแล้ว ลำดับถัดไปคือการจัดการกับ "ไฟล์" นั่นเอง HTML5 มี API มาให้เราสองตัวคือ FileReader กับ FileWriter หน้าที่ก็ตามชื่อครับ
ปัญหาของ FileReader ที่จะต้องสนใจคือความแตกต่างระหว่างไฟล์ที่อยู่ในเครื่อง กับไฟล์ที่อยู่บนเว็บ ซึ่งกำลังพัฒนากันอยู่
ส่วน FileWriter มีข้อกังวลเรื่องความปลอดภัย เพราะต่อจากนี้ไปเว็บเพจจะสามารถเขียนไฟล์ในเครื่องเราได้ มาตรการแก้ไขจุดอ่อนนี้ก็ต้องพัฒนากันต่อไป
(ข่าวเก่า W3C เปิดตัว File API, มาตรฐานกลางในการเข้าอ่านไฟล์ในเครื่องลูกข่าย)
แคชสำหรับเวลาออฟไลน์ (App Cache)
เมื่อเว็บแอพพลิเคชันไม่ได้ต่อเน็ต ก็ต้องมีวิธีจัดการกับข้อมูลที่เกิดขึ้นระหว่างนั้น ซึ่งเป็นหน้าที่ของ AppCaching API ที่บอกว่าเว็บแอพพลิเคชันจะถูกเก็บไว้บนเครื่องนานแค่ไหน ทำให้เว็บแอพมีลักษณะคล้ายๆ กับแอพที่ติดตั้งแบบปกติมากขึ้น
3. Device Access
เทคโนโลยีหมวดที่สามจะเน้นความเชื่อมโยงกับฟีเจอร์ของฮาร์ดแวร์ (โดยเฉพาะฮาร์ดแวร์แบบพกพา) เช่น
- Geolocation API เพื่อขอข้อมูลเชิงพิกัดของอุปกรณ์
- เข้าถึงไมโครโฟนและกล้องถ่ายภาพของอุปกรณ์
- เข้าถึงข้อมูลภายในตัวอุปกรณ์ เช่น สมุดที่อยู่ หรือข้อมูลการเอียงเครื่อง (tilt orientation)
ฟีเจอร์ในกลุ่มนี้จะไม่ได้อยู่ในรูปของแท็ก HTML โดยตรง แต่จะเป็น API ที่ฝั่งเบราว์เซอร์ต้องเตรียมไว้ให้ แล้วเว็บเพจค่อยเรียกใช้ผ่านจาวาสคริปต์อีกทีหนึ่ง
ในการใช้งานจริงๆ เราคงใช้ผ่านเฟรมเวิร์คจาวาสคริปต์ที่เตรียมเรื่องพวกนี้ไว้ให้แล้วมากกว่า เช่น jQuery Mobile, Sencha Touch หรือ SproutCore เป็นต้น
4. Connectivity
เทคโนโลยีกลุ่มที่สี่เน้นการเชื่อมต่อกับเครือข่ายที่ดีขึ้น มี 2 อย่างที่สำคัญ
WebSockets
WebSockets เป็น API ที่ออกมาเพื่อต่อยอดแนวทางของ AJAX ในอดีต อธิบายง่ายๆ มันคือการ push ข้อมูลจากเซิร์ฟเวอร์มายังไคลเอนต์ (แบบเดียวกับ push mail ที่เรารู้จักกัน)
ในแง่เทคนิค การส่งข้อมูลแบบ HTTP แบบดั้งเดิมจะเปิดการเชื่อมต่อกับเซิร์ฟเวอร์เพื่อส่งข้อมูล แล้วตัดการเชื่อมต่อเมื่อใช้เสร็จ ดังนั้นการขอข้อมูลจากเซิร์ฟเวอร์เป็นระยะจึงทำได้ยาก เพราะต้องดึงข้อมูลจากเซิร์ฟเวอร์ (polling) เป็นระยะ ซึ่งเปลืองโหลดของเซิร์ฟเวอร์ไม่น้อย โดยเฉพาะกรณีที่ต้องเปิดการเชื่อมต่อ HTTP ค้างเอาไว้ (Long polling หรือ COMET)
WebSockets เกิดมาเพื่อแก้ปัญหานี้ โดยสร้างการเชื่อมต่อแบบ (เกือบ) ถาวรระหว่างเซิร์ฟเวอร์กับไคลเอนต์ เพื่อให้สองฝั่งส่งข้อมูลกันได้ตลอด ทั้งหมดรันอยู่บนโพรโตคอล TCP อีกชั้นหนึ่ง และไม่ได้วิ่งบนโพรโตคอล HTTP เพื่อประหยัดโหลดของ HTTP ครับ
ในการใช้งานเราจะเรียก WebSockets ด้วย
ws://
หรือถ้าต้องการการเชื่อมต่อแบบปลอดภัย
wss://
ข้อดีคือเบากว่า HTTP แต่ข้อเสียคือทั้งสองฝั่ง (โดยเฉพาะเซิร์ฟเวอร์) ต้องรองรับ WebSockets ด้วย จึงอาจจะใช้ไม่ได้ในทุกกรณี
ปัจจุบัน WebSockets เป็นมาตรฐานที่รับรองโดย IETF และกำลังผ่านกระบวนการเข้าเป็นมาตรฐานของ W3C
ข้อมูลเพิ่มเติม: Wikipedia, W3C, สอนการใช้งานที่ HTML5 Rocks
Server-sent Events (SSE)
WebSockets เป็นการส่งข้อมูลแบบสองทาง แต่ถ้าเราต้องการส่งข้อมูลทางเดียวจากเซิร์ฟเวอร์มายังไคลเอนต์ (เช่น notification ของ Facebook/Twitter) เราสามารถใช้เทคโนโลยีอีกตัวชื่อ Server-sent Events (SSE) แทนได้
SSE ถูกออกแบบมาเพื่อแก้ปัญหา polling ของ AJAX เช่นเดียวกับ WebSockets หลักการทำงานของ SSE คือเซิร์ฟเวอร์สามารถส่งข้อมูลไปยังไคลเอนต์ได้โดยตรง โดยที่ไคลเอนต์ไม่ต้องร้องขอ (GET Request) ก่อน
ความต่างของ SSE กับ WebSockets นอกจากจะเป็นเรื่องการส่งข้อมูลแบบทางเดียว/สองทางแล้ว ยังต่างกันที่ตัวโพรโตคอล เพราะ SSE จะรันอยู่บน HTTP ตามปกติ ทำให้สามารถใช้กับเซิร์ฟเวอร์ในปัจจุบันได้ทันที
ในการใช้งานจริง เราอาจเลือกได้ระหว่าง
- การส่งข้อมูลด้วย WebSockets ทั้งสองทาง (บน WebSockets)
- การรับข้อมูลจากเซิร์ฟเวอร์ด้วย SSE แล้วส่งกลับด้วย XMLHttpRequest (บน HTTP)
ข้อมูลเพิ่มเติม: Wikipedia, W3C, สอนการใช้งานที่ HTML5 Rocks
5. Multimedia
เรื่องนี้เราพูดกันมาเยอะมาก และเริ่มใช้งานจริงกันแล้ว คงไม่ต้องลงลึกในบทความตอนนี้
อธิบายแบบสั้นๆ คือเดิมที่ HTML4 ขึ้นไปไม่สามารถแสดงผลเสียง-วิดีโอได้โดยตรง ต้องใช้วิธีฝัง <object> แล้วติดตั้งปลั๊กอินเพื่อช่วยเล่นมัลติมีเดีย ซึ่งทำงานได้ตามนั้นแต่ก็มีปัญหายิบย่อยมากมายตามมาเช่นกัน
แต่พอเป็น HTML5 ได้กำหนดให้ HTML ต้องเล่นไฟล์เสียงและวิดีโอได้ในตัว จึงเป็นที่มาของแท็กใหม่ <audio> และ <video> ที่หลายคนคงลองใช้กันแล้ว ดังนั้นต่อไปเสียงและวิดีโอจะกลืนเป็นเนื้อเดียวกับเว็บเพจโดยตรง เราสามารถปรับเปลี่ยนการแสดงผลของมันได้เฉกเช่นเดียวกับส่วนอื่นๆ ของเว็บเพจ เช่น ย้ายตำแหน่ง ซ้อนฉากหลัง หาอย่างอื่นมาบัง ฯลฯ
อย่างไรก็ตาม เรื่องมัลติมีเดียของ HTML5 กลับมีปัญหาประการใหม่เพิ่มเข้ามา นั่นคือ "สงคราม codec" ระหว่างเบราว์เซอร์สองค่ายใหญ่ ดังที่เราเห็นจากข่าว WebM+Ogg (สนับสนุนโดย Chrome/Firefox/Opera) vs H.264 (สนับสนุนโดย IE/Safari) นั่นเอง
(ดูข่าวหมวด codec ประกอบ)
6. 3D, Graphics & Effects
หมวดที่หกเกี่ยวกับเรื่องกราฟิก แบ่งเป็น 4 ประการย่อยๆ
SVG (Scalable Vector Graphics)
เป็นภาษาตระกูล XML ที่ออกแบบมาสำหรับการวาดกราฟิกแบบเวกเตอร์ (พอเทียบเคียงได้กับ SWF ของ Adobe หรือ XAML ของไมโครซอฟท์) เทคโนโลยีนี้มีมานานพอสมควรแล้ว คงไม่ต้องลงรายละเอียดนะครับ
Canvas
แท็ก <canvas> ถือเป็นของใหม่ที่สำคัญใน HTML5 เพราะมันช่วยเปลี่ยนลูกเล่นการแสดงผลของเว็บเพจไปอีกมาก
เดิมที HTML เป็นการวาดออบเจคต์ (เช่น ข้อความ รูป กล่องข้อความ ฯลฯ) ขึ้นมาเป็นหน้าจอ และสามารถตกแต่งออบเจคต์แต่ละตัวได้ในระดับหนึ่งผ่าน CSS (เช่น ใส่สีพื้น วาดเส้นขอบ ทำมุมโค้ง) แต่ในภาพรวม HTML ยังไม่สามารถแสดงกราฟิกแบบราสเตอร์ (raster) ได้ด้วยตัวมันเอง ต้องทำภาพมาแปะอีกทอดหนึ่ง
แท็ก canvas ที่ถูกเพิ่มเข้ามาช่วยให้เราสามารถ "วาดภาพ" ลงบนเว็บเพจได้โดยตรง (กำหนด canvas ในเพจ แต่สั่งวาดด้วยจาวาสคริปต์นะครับ) โดยขอบเขตของภาพที่วาดก็จะอยู่ในออบเจคต์ชื่อ canvas นั่นเอง
สิ่งที่เราสามารถใส่ลงไปในกรอบ canvas ได้แก่
- รูปทรงพื้นฐาน สี่เหลี่ยม วงกลม เส้นตรง เส้นโค้ง พาธ (รูปทรงมีไม่เยอะเท่ากับ SVG)
- ไฟล์รูปภาพ จะซ้อนกันกี่ชั้นก็ได้ตามสะดวก
- แอนิเมชัน กำหนดให้วัตถุต่างๆ เคลื่อนไหว
- แปลงสภาพวัตถุ (transformation) จะกำหนดให้หมุน เอียง บิดเบี้ยว ได้เหมือนกัน
- ประกอบ-ซ้อนภาพวัตถุ (composition) เช่น นำสี่เหลี่ยมกับสามเหลี่ยมมา intersect เพื่อสร้างวัตถุแบบใหม่
ความต่างที่สำคัญของ SVG กับ canvas คือ
- SVG ได้ผลลัพธ์เป็นเวกเตอร์ ส่วน canvas ได้ผลลัพธ์เป็นราสเตอร์ (ภายในกรอบวัตถุ canvas)
- SVG สั่งวาดด้วยแท็กแบบ markup (ซับเซ็ตของ XML) ส่วน canvas สั่งวาดด้วยจาวาสคริปต์
รายละเอียดดูได้จาก Wikipedia, Canvas tutorial - Mozilla Developer Network, W3Schools HTML5 Canvas
WebGL
โดยทั่วไปแล้ว การวาดภาพ-แสดงผลใน canvas เรามักใช้กับภาพ 2 มิติเป็นหลัก แต่ถ้าต้องการวาดภาพ 3 มิติ เราจะใช้ส่วนขยายของ canvas ที่เรียกว่า WebGL (Web-based Graphics Library)
WebGL เป็นไลบรารีกราฟิกที่พัฒนาอยู่บน OpenGL ES 2.0 ซึ่งเป็นไลบรารีกราฟิก 3 มิติมาตรฐานของวงการไอที แต่ดัดแปลงให้เรนเดอร์ภาพออกมาบนออบเจคต์ canvas ภายในเบราว์เซอร์ และสั่งงานได้ผ่านจาวาสคริปต์ ตอนเรนเดอร์ก็ทำผ่าน GPU ตามปกติ (ดูข่าวเก่าหมวด WebGL ประกอบ)
ขั้นตอนการวาดภาพ 3 มิติบน WebGL แทบไม่ต่างอะไรกับ canvas ปกติ เพราะเราต้องกำหนดบริเวณที่เป็น canvas ในเว็บเพจขึ้นมาก่อน เพียงแต่ตอนวาดในจาวาสคริปต์ เราจะสร้างออบเจคต์ชนิด WebGL ขึ้นมาแทน canvas ปกติ
ส่วนหลักการวาดวัตถุ 3 มิติคงไม่ต่างอะไรกับ OpenGL ครับ ใครเคยเขียนโปรแกรมกับ OpenGL คงใช้ WebGL ได้แทบจะทันที
สถานะตอนนี้ของ WebGL คือเบราว์เซอร์ทุกค่ายสนับสนุนแล้ว ยังเหลือฝั่งไมโครซอฟท์ที่ยังไม่ยอมสนับสนุน (เหตุผลหนึ่งเพราะอยู่บน OpenGL ไม่ใช่ DirectX)
ข้อมูลเพิ่มเติม Getting started with WebGL - Mozilla Developer Network
CSS3 3D
CSS3 นั้นต่างไปจาก CSS2 มาก เพราะมันไม่ใช่มาตรฐานเดี่ยวๆ แต่ประกอบด้วยมาตรฐานย่อยๆ จำนวน "หลายสิบ" ชนิด ซึ่งหนึ่งในนั้นคือ CSS3 3D Transforms ที่สามารถแปลงสภาพวัตถุบนเว็บเพจในแบบต่างๆ เช่น ขยายขนาด หมุนเอียงตามแกน xyz
ดูตัวอย่างได้ที่ WebKit (ต้องใช้ WebKit เข้าด้วยนะครับ) หรือ The Web Rocks (Gecko/WebKit)
7. Performance & Integration
หมวดที่เจ็ดเป็นการปรับปรุงประสิทธิภาพการทำงานของเว็บแอพ แบ่งออกเป็น 2 ส่วนใหญ่ๆ
Web Worker
อธิบายง่ายๆ Web Worker คือจาวาสคริปต์ที่ทำงานแบบมัลติเธร็ด เพื่อให้สคริปต์สามารถทำงานเบื้องหลังได้หลายๆ งานพร้อมกัน
การใช้งานเราสามารถสั่งได้ที่ตัวโค้ดจาวาสคริปต์โดยตรง โดยสร้างตัวแปรชนิด worker ขึ้นมาบอกเบราว์เซอร์ว่า โค้ดจาวาสคริปต์ส่วนนี้ ขอให้ทำงานแบบ Web Worker เพื่อประสิทธิภาพที่ดีขึ้น
รายละเอียดอ่านเพิ่มที่ Wikipedia, W3C, Mozilla, HTML5 Rocks
XMLHttpRequest Level 2
ผมถือว่าผู้อ่าน Blognone คงรู้จัก XMLHttpRequest (XHR) ที่เป็นเทคโนโลยีพื้นฐานของ AJAX กันพอสมควรแล้ว อธิบายสั้นๆ สำหรับคนไม่รู้ XHR เป็นวิธีการโหลดข้อมูลเฉพาะบางส่วนของเว็บเพจ (ไม่ใช่ทั้งหน้า) ช่วยให้เราสามารถปรับปรุงข้อมูลบางส่วนของเพจได้ โดยไม่ต้องโหลดใหม่ทั้งหน้า ผลคือเว็บเพจที่อินเตอร์แอคทีฟมากขึ้นนั่นเอง
XMLHttpRequest Level 2 เป็นความพยายามของ W3C ที่จะพัฒนา XMLHttpRequest รุ่นแรกให้มีประสิทธิภาพ-ความสามารถมากขึ้น แบ่งได้ง่ายๆ 3 อย่าง ได้แก่
- การแยกแยะเหตุการณ์ (event) แต่ละชนิดออกจากกัน ช่วยให้โปรแกรมเมอร์ติดตามและควบคุมการส่งข้อมูลได้ง่ายขึ้น
- รองรับการอัพโหลดไฟล์จากฝั่งไคลเอนต์ (เดิมที่ไม่รองรับการส่งไฟล์) ซึ่งจะใช้ควบคู่กับ File API ในหัวข้อก่อน
- ส่งข้อมูลแบบข้ามหลายโดเมน ซึ่งรุ่นก่อนเรียกได้เฉพาะโดเมนเดียวกัน
รายละเอียดอ่านได้จาก AJAX 2: What is coming with XMLHttpRequest Level 2? - JS Classes blog
8. CSS3
CSS3 มีความสามารถเพิ่มขึ้นจาก CSS2 ในปัจจุบันมาก เพิ่มฟีเจอร์ของแวดวงสิ่งพิมพ์ที่เกี่ยวข้องกับการจัดหน้า การควบคุมการไหลของข้อความ และฟอนต์เข้ามาอีกมาก แต่ก็ยังมีเรื่องอื่นๆ เช่น 3D, เสียงพูด, แอนิเมชัน ฯลฯ (ดูข่าวเก่าเรื่อง CSS3 Regions ประกอบ)
เทคโนโลยีอีกตัวที่เกี่ยวข้องกันคือ Web Open Font Format (WOFF) ที่ช่วยให้เราฝังฟอนต์เข้ามาในเว็บเพจได้ด้วย
รายการของชุดเทคโนโลยีใน CSS3 ทั้งหมดดูได้จาก CSS3.info
สถานะการรองรับ HTML5 ของเบราว์เซอร์ต่างๆ
เทคโนโลยีทั้ง 8 หมวดเป็นตัวแทนของเทคโนโลยีเว็บรุ่นใหม่ อย่างไรก็ตาม เทคโนโลยีเยอะขนาดนี้ซับซ้อนมาก และต้องใช้เวลาอีกนานกว่าจะทำเสร็จ อย่างไรก็ตาม เบราว์เซอร์ในปัจจุบันก็เริ่มรองรับมาตรฐาน "ฉบับร่าง" ในบางประเด็นแล้ว และเว็บดังๆ บางแห่งก็เริ่มใช้ฟีเจอร์ HTML5 กับงานจริงแล้วเช่นกัน
เพื่อให้ติดตามได้ง่ายว่าเบราว์เซอร์ตัวไหนรองรับฟีเจอร์อะไรบ้าง ก็มีเว็บไซต์หลายแห่งทำตาราง-แผนภาพเปรียบเทียบให้ดูง่ายๆ เช่น
- Wikipedia ข้อมูลละเอียดพร้อมลิงก์อ้างอิง
- Can I Use ทำตารางเปรียบเทียบว่าคุณสมบัติใดใช้ได้บนเบราว์เซอร์ยี่ห้อไหน รุ่นไหนได้บ้าง
- FindmebyIP.com ทำตารางเปรียบเทียบแบบดูง่ายๆ ภายในเว็บเพจหน้าเดียว
- HTML5Test.com ทดสอบกับเบราว์เซอร์ที่เราใช้อยู่ในขณะนั้น และได้ผลลัพธ์ออกมาเป็นคะแนนรวม
- HTML5 Readiness ทำเป็นแผนภาพ infographic แบบครึ่งวงกลม แยกตามมาตรฐานแต่ละส่วน (ใช้ข้อมูลจาก Can I Use อีกทีหนึ่ง)
ข้อมูลเพิ่มเติม
คัดมาเฉพาะอันที่เจ๋งๆ นะครับ ตามไปอ่านกันต่อได้
เว็บไซต์ของผู้ผลิตเบราว์เซอร์
- HTML5 Rocks ของกูเกิล มีทั้งเอกสาร tutorial และโค้ดสำหรับทดสอบ-สาธิตการทำงาน
- หน้าแนะนำ HTML5 ของ Mozilla Developer Network รวมข้อมูลเชิงเทคนิคไว้ครบถ้วน
- HTML5 Labs เว็บไซต์สำหรับนักพัฒนา HTML5 ของไมโครซอฟท์
- HTML5 Please แนะนำโดยคุณ @pittaya
เดโม
- พรีเซนเตชันของ HTML5 Rocks เป็นเอกสารนำเสนอเกี่ยวกับ HTML5 ที่สร้างด้วย HTML5
- Safari Demos เป็นหน้ารวมเดโม HTML5 ของแอปเปิล
- IE 10 Test Drive หน้ารวมเดโม HTML5 ของ IE 10
เอกสารอื่นๆ
- HTML5 for Web Developers สเปก HTML5 แบบอ่านง่าย เหมาะสำหรับนักพัฒนาเว็บ ตัดส่วนที่ไม่สำคัญในสเปกของ W3C ออกไป
- W3Schools HTML5 Tutorial เป็น online reference/tutorial แบบสั้นๆ ตามสไตล์ของ W3Schools
- เอกสารของ InfoWorld เป็น PDF ที่เขียนโดยนิตยสาร InfoWorld ต้องสมัครสมาชิกก่อนจึงจะโหลดได้ (โหลดฟรี) ข้อมูลละเอียดและเนื้อหาอัพเดต
- Dive Into HTML5 หนังสือแจกฟรีของ Mark Pilgrim (แนะนำโดยคุณ j03w)
Get latest news from Blognone
Follow @twitterapi
Hiring! บริษัทที่น่าสนใจ
Blognone Jobs Premium
Cloudnone
- NVIDIA จะไปหยุดที่ตรงไหน ทำไมครองโลกดาต้าเซ็นเตอร์ | Cloudnone EP.22
- ถึงคลาวด์เคราะห์: ทำอย่างไรเมื่อบริการคลาวด์ที่ใช้ถูกยกเลิก | Cloudnone EP. 21
- รู้จักอาชีพ Site Reliability Engineer สำคัญยังไง? | Cloudnone EP. 20
- อธิบาย CrowdStrike ทางเทคนิค ทำไมถึงทำพีซีจอฟ้าเป็นล้านๆ เครื่อง | Cloudnone EP.19
- Kubernetes [Part 2] ยี่ห้อไหนดี งานไหนต้องใช้ แล้วเลือกยังไง? | Cloudnone EP.18
Comments
เยี่ยมเลยครับ
แต่ติดนิดนึง ตรง "คือ ฟีเจอร์อันรุ่มรวยและประสิทธิภาพ" คำว่า รุ่มรวย หมายความว่าอะไรหรอครับหรือว่าเขียนผิด
Texion Business Solutions
รุ่มรวย ก็คือ ร่ำรวย น่ะครับ
เป็นภาษาเก่าหน่อยแต่ใช้ได้ ไม่ได้เขียนผิดครับ
อ่อขอบคุณครับ
Texion Business Solutions
เดาว่าเป็น rich features ครับ
Cache หรือเปล่าครับ?
ครับ แก้ตามนั้น
อ่านแล้วนึกถึงคำว่า rich
พออ่านคำนี้รีบเลื่อนขึ้นไปดูเลยว่าใครเขียนข่าว สำนวนแปลกดี
May the Force Close be with you. || @nuttyi
เยี่ยมครับ
แนะนำ http://html5please.com ครับ สามารถค้นได้ว่าความสามารถไหนใช้ได้กับ browser ไหนบ้าง แล้วก็แนะนำ polyfill ที่ควรใช้ด้วย
pittaya.com
เพิ่มเติมให้ในบทความแล้วครับ
อ่านเข้าใจง่ายดีครับ ขอบคุณครับ จะคอยติดตามตอนต่อไปนะครับ
ขอบคุณครับ
ทำให้เห็นภาพได้ชัดขึ้นครับ
ตั้งใจจะเริ่มศึกษามาตั้งนานแล้วครับ แต่ก็ไม่ได้เริ่มซักที
เยี่ยมเลย ขอบคุณครับ
もういい
ใครใช้ Canvas คล่องๆ นี่สามารถสร้างเว็บแบบว่าเกินจิตนาการได้เลยนะนี่
เคยอ่านผ่านๆ ว่ามีคนสร้าง editor คล้ายๆ Flash สำหรับ 2D Animation บน Canvas อะครับ แต่หาลิงค์ไม่เจอแล้ว...
เจอแต่ impact.js
The Cake is a Lie
ผมเข้าใจว่าไม่มีแท็ก email นะครับ
คิดว่าน่าจะเป็น
{syntaxhighlighter html}
{/syntaxhighlighter}
มากกว่าครับ
จริงด้วย แก้ตามนั้นครับ
ขอบคุณครับ เป็นประโยชน์มากจะคอยติดตามต่อไปครับ
ขอบคุณมากครับ แจ่มมากมาย
Dive Into HTML5 อีกเว็บที่ผมว่าน่าสนใจดีครับ
The Cake is a Lie
อ่านสนุกดีครับ ผมชอบมาก
ขอ Ctrl + d ไว้นะ ขอบคุณมากครับ
ขอบคุณครับสำหรับบทความ
บทความเป็นประโยชน์มากครับ (ยุทธภพสายนี้ ช่างกว้างใหญ่ไพศาลยิ่งนัก) ^^
เยี่ยมครับ (^__^)b
ไอคอน CSS3 เหมือน PS3 แฮะ :-)
ติดใจ "หมวดที่ห้าเกี่ยวกับเรื่องกราฟิก แบ่งเป็น 4 ประการย่อยๆ" ตกลง ห้า หรือ หก ครับ
ขอบคุณมากครับ เพิ่งอ่านได้หมวดเดียวเอง เนื้อหาที่มาแน่นมากเเลย กำลังต้องการศึกษาพอดีเลยครับ
ขอบคุณครับ อธิบายเรื่องยาวๆ ได้ละเอียดดีและอ่านง่ายด้วย
เจ๋งเลย ขอบคุณมากครับ อ่านสนุกมาก ...
ว่าแต่สงครามเรื่องการถอดระหัสเนี่ย รู้เลยว่าตัวเองเชียร์ฝั่งไหน 555+ (Chrome/Firefox/Opera)
..: เรื่อยไป
เรื่อง codec นี่ยืดเยื้อและจะกลายเป็นปัญหาขั้นเทพแน่นอนครับ เดี๋ยวจะเขียนถึงในตอนต่อๆ ไป
Good Job (^_^)b
Destination host unreachable!!!
^^)b เยี่ยมครับ รอติดตามตอนต่อไป
ขอบคุณครับ เขียนครอบคลุมได้ทุกเรื่องเลย บางเรื่องก็พึ่งรู้อย่างหัวข้อที่ 4 ที่เขียนถึง WebSockets
เขียนได้เยี่ยมมากเลยครับ จะรออ่านตอนต่อไปครับ :-)
เมพ !!
แฟนพันธุ์แท้สตีฟจ็อบส์ | MacThai.com
ขอบคุณสำหรับบทความดีๆ จะรออ่านตอนต่อไปครับ ^ ^
สวดยอดครับ เก็บได้ครบ
เป็นบทความที่มีประโยชน์ มากครับ ขอบคุณครับ
อ่านได้หมวดนึง และ ผมก็เลือนมาสุด เหอๆ เยอะเกิน สมองรับไม่ไหว 55+
ผมว่าตอนนี้ HTML5 ยังห่างไกลความเป็นไปได้ที่จะสู้ FLASH อยู่นะครับ แต่อีกหน่อยก็ไม่แน่แหะ
น่าสนใจมากครับ