Tags:
HTML5

บทความชุดนี้จะแนะนำข้อมูลเบื้องต้น (ย้ำว่า "เบื้องต้น") ของเทคโนโลยีใหม่ที่ทุกคนจับตาอย่าง 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

HTML5 Semantic

เทคโนโลยีกลุ่ม 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
  • email
  • 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

HTML5 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

HTML5 Device Access

เทคโนโลยีหมวดที่สามจะเน้นความเชื่อมโยงกับฟีเจอร์ของฮาร์ดแวร์ (โดยเฉพาะฮาร์ดแวร์แบบพกพา) เช่น

  • Geolocation API เพื่อขอข้อมูลเชิงพิกัดของอุปกรณ์
  • เข้าถึงไมโครโฟนและกล้องถ่ายภาพของอุปกรณ์
  • เข้าถึงข้อมูลภายในตัวอุปกรณ์ เช่น สมุดที่อยู่ หรือข้อมูลการเอียงเครื่อง (tilt orientation)

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

ในการใช้งานจริงๆ เราคงใช้ผ่านเฟรมเวิร์คจาวาสคริปต์ที่เตรียมเรื่องพวกนี้ไว้ให้แล้วมากกว่า เช่น jQuery Mobile, Sencha Touch หรือ SproutCore เป็นต้น

4. Connectivity

HTML5 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

HTML5 Multimedia

เรื่องนี้เราพูดกันมาเยอะมาก และเริ่มใช้งานจริงกันแล้ว คงไม่ต้องลงลึกในบทความตอนนี้

อธิบายแบบสั้นๆ คือเดิมที่ HTML4 ขึ้นไปไม่สามารถแสดงผลเสียง-วิดีโอได้โดยตรง ต้องใช้วิธีฝัง <object> แล้วติดตั้งปลั๊กอินเพื่อช่วยเล่นมัลติมีเดีย ซึ่งทำงานได้ตามนั้นแต่ก็มีปัญหายิบย่อยมากมายตามมาเช่นกัน

แต่พอเป็น HTML5 ได้กำหนดให้ HTML ต้องเล่นไฟล์เสียงและวิดีโอได้ในตัว จึงเป็นที่มาของแท็กใหม่ <audio> และ <video> ที่หลายคนคงลองใช้กันแล้ว ดังนั้นต่อไปเสียงและวิดีโอจะกลืนเป็นเนื้อเดียวกับเว็บเพจโดยตรง เราสามารถปรับเปลี่ยนการแสดงผลของมันได้เฉกเช่นเดียวกับส่วนอื่นๆ ของเว็บเพจ เช่น ย้ายตำแหน่ง ซ้อนฉากหลัง หาอย่างอื่นมาบัง ฯลฯ

อย่างไรก็ตาม เรื่องมัลติมีเดียของ HTML5 กลับมีปัญหาประการใหม่เพิ่มเข้ามา นั่นคือ "สงคราม codec" ระหว่างเบราว์เซอร์สองค่ายใหญ่ ดังที่เราเห็นจากข่าว WebM+Ogg (สนับสนุนโดย Chrome/Firefox/Opera) vs H.264 (สนับสนุนโดย IE/Safari) นั่นเอง

(ดูข่าวหมวด codec ประกอบ)

6. 3D, Graphics & Effects

HTML5 - 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

HTML5 - 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

HTML5 - 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 for Web Developers สเปก HTML5 แบบอ่านง่าย เหมาะสำหรับนักพัฒนาเว็บ ตัดส่วนที่ไม่สำคัญในสเปกของ W3C ออกไป
  • W3Schools HTML5 Tutorial เป็น online reference/tutorial แบบสั้นๆ ตามสไตล์ของ W3Schools
  • เอกสารของ InfoWorld เป็น PDF ที่เขียนโดยนิตยสาร InfoWorld ต้องสมัครสมาชิกก่อนจึงจะโหลดได้ (โหลดฟรี) ข้อมูลละเอียดและเนื้อหาอัพเดต
  • Dive Into HTML5 หนังสือแจกฟรีของ Mark Pilgrim (แนะนำโดยคุณ j03w)

Comments

By: figgaro
ContributorAndroid
figgaro's blog
on 20/02/12 16:29 #385867 toggle
figgaro's picture

เยี่ยมเลยครับ

แต่ติดนิดนึง ตรง "คือ ฟีเจอร์อันรุ่มรวยและประสิทธิภาพ" คำว่า รุ่มรวย หมายความว่าอะไรหรอครับหรือว่าเขียนผิด


ชุมชนเครื่องเล่น Nintendo 3DS

By: shinosuke
iPhoneAndroidUbuntuWindows
shinosuke's blog
on 20/02/12 17:04 #385880 Reply to:385867 toggle
shinosuke's picture

รุ่มรวย ก็คือ ร่ำรวย น่ะครับ
เป็นภาษาเก่าหน่อยแต่ใช้ได้ ไม่ได้เขียนผิดครับ

By: figgaro
ContributorAndroid
figgaro's blog
on 20/02/12 17:17 #385882 Reply to:385880 toggle
figgaro's picture

อ่อขอบคุณครับ


ชุมชนเครื่องเล่น Nintendo 3DS

By: Balll
iPhoneRed Hat
Balll's blog
on 20/02/12 23:59 #385990 Reply to:385882 toggle
Balll's picture

เดาว่าเป็น rich features ครับ

By: hisoft
ContributorWindows PhoneWindows
hisoft's blog
on 20/02/12 17:22 #385884 Reply to:385867 toggle
hisoft's picture
  • (App Cahce)

Cache หรือเปล่าครับ?


The Phantom Thief

By: mk
FounderAndroidRed HatWindows
mk's blog
on 20/02/12 17:48 #385898 Reply to:385884 toggle
mk's picture

ครับ แก้ตามนั้น

By: iStyle
ContributoriPhoneAndroidSymbian
iStyle's blog
on 20/02/12 22:24 #385962 Reply to:385867 toggle
iStyle's picture

อ่านแล้วนึกถึงคำว่า rich

พออ่านคำนี้รีบเลื่อนขึ้นไปดูเลยว่าใครเขียนข่าว สำนวนแปลกดี


May the Force Close be with you. || @nuttyi

By: tekkasit
ContributorAndroidWindowsIn Love
tekkasit's blog
on 20/02/12 16:35 #385868 toggle
tekkasit's picture

เยี่ยมครับ

By: pittaya
WriterAndroidUbuntuIn Love
pittaya's blog
on 20/02/12 16:56 #385874 toggle
pittaya's picture

แนะนำ http://html5please.com ครับ สามารถค้นได้ว่าความสามารถไหนใช้ได้กับ browser ไหนบ้าง แล้วก็แนะนำ polyfill ที่ควรใช้ด้วย


pittaya.com

By: mk
FounderAndroidRed HatWindows
mk's blog
on 20/02/12 17:48 #385897 Reply to:385874 toggle
mk's picture

เพิ่มเติมให้ในบทความแล้วครับ

By: thep497
Windows PhoneAndroidWindows
thep497's blog
on 20/02/12 16:56 #385875 toggle
thep497's picture

อ่านเข้าใจง่ายดีครับ ขอบคุณครับ จะคอยติดตามตอนต่อไปนะครับ

By: narasak
iPhoneAndroidUbuntu
narasak's blog
on 20/02/12 17:05 #385881 toggle
narasak's picture

ขอบคุณครับ
ทำให้เห็นภาพได้ชัดขึ้นครับ

By: iPomz
ContributorAndroidWindows
iPomz's blog
on 20/02/12 17:26 #385887 toggle
iPomz's picture

ตั้งใจจะเริ่มศึกษามาตั้งนานแล้วครับ แต่ก็ไม่ได้เริ่มซักที


G+, B

By: 077023
ContributoriPhoneAndroidBlackberry
077023's blog
on 20/02/12 17:32 #385891 toggle
077023's picture

เยี่ยมเลย ขอบคุณครับ


もういい

( My blog 077023.com )

By: rattananen
AndroidWindows
rattananen's blog
on 20/02/12 17:45 #385896 toggle
rattananen's picture

ใครใช้ Canvas คล่องๆ นี่สามารถสร้างเว็บแบบว่าเกินจิตนาการได้เลยนะนี่


no system is safe.

By: j03w
ContributoriPhoneAndroid
j03w's blog
on 20/02/12 20:02 #385921 Reply to:385896 toggle
j03w's picture

เคยอ่านผ่านๆ ว่ามีคนสร้าง editor คล้ายๆ Flash สำหรับ 2D Animation บน Canvas อะครับ แต่หาลิงค์ไม่เจอแล้ว...

เจอแต่ impact.js


The Cake is a Lie

By: iamping
Android
iamping's blog
on 20/02/12 18:34 #385905 toggle
iamping's picture

ผมเข้าใจว่าไม่มีแท็ก email นะครับ
คิดว่าน่าจะเป็น

<input type=email id=email> 

มากกว่าครับ

By: mk
FounderAndroidRed HatWindows
mk's blog
on 20/02/12 20:23 #385927 Reply to:385905 toggle
mk's picture

จริงด้วย แก้ตามนั้นครับ

By: Connextion
Android
Connextion's blog
on 20/02/12 18:37 #385907 toggle
Connextion's picture

ขอบคุณครับ เป็นประโยชน์มากจะคอยติดตามต่อไปครับ


Simplest is Best

By: j03w
ContributoriPhoneAndroid
j03w's blog
on 20/02/12 19:54 #385919 toggle
j03w's picture

ขอบคุณมากครับ แจ่มมากมาย
Dive Into HTML5 อีกเว็บที่ผมว่าน่าสนใจดีครับ


The Cake is a Lie

By: mekpro
ContributorAndroidUbuntu
mekpro's blog
on 20/02/12 21:04 #385935 Reply to:385919 toggle
mekpro's picture

อ่านสนุกดีครับ ผมชอบมาก

By: rungskpsu
AndroidWindowsIn Love
rungskpsu's blog
on 21/02/12 2:20 #386006 Reply to:385919 toggle
rungskpsu's picture

ขอ Ctrl + d ไว้นะ ขอบคุณมากครับ


Because I love U

By: OHM
WriteriPhoneAndroidWindows
OHM's blog
on 20/02/12 20:23 #385928 toggle
OHM's picture

ขอบคุณครับสำหรับบทความ

By: Worwae07
Windows PhoneWindows
Worwae07's blog
on 20/02/12 21:26 #385943 toggle
Worwae07's picture

บทความเป็นประโยชน์มากครับ (ยุทธภพสายนี้ ช่างกว้างใหญ่ไพศาลยิ่งนัก) ^^

By: deeplite
Android
deeplite's blog
on 20/02/12 22:47 #385969 toggle
deeplite's picture

เยี่ยมครับ (^__^)b


If you need Drama,Follow Me...

By: mr_tawan
ContributoriPhoneAndroidWindows
mr_tawan's blog
on 20/02/12 22:55 #385973 toggle
mr_tawan's picture

ไอคอน CSS3 เหมือน PS3 แฮะ :-)


By: dekdar
dekdar's blog
on 20/02/12 23:39 #385986 toggle
dekdar's picture

ติดใจ "หมวดที่ห้าเกี่ยวกับเรื่องกราฟิก แบ่งเป็น 4 ประการย่อยๆ" ตกลง ห้า หรือ หก ครับ


dekdar

By: rungskpsu
AndroidWindowsIn Love
rungskpsu's blog
on 21/02/12 2:18 #386005 toggle
rungskpsu's picture

ขอบคุณมากครับ เพิ่งอ่านได้หมวดเดียวเอง เนื้อหาที่มาแน่นมากเเลย กำลังต้องการศึกษาพอดีเลยครับ


Because I love U

By: v_rachai
iPhoneWindows PhoneAndroidBlackberry
v_rachai's blog
on 21/02/12 8:20 #386015 toggle
v_rachai's picture

ขอบคุณครับ อธิบายเรื่องยาวๆ ได้ละเอียดดีและอ่านง่ายด้วย

By: btoy
AndroidWindows
btoy's blog
on 21/02/12 9:17 #386034 toggle
btoy's picture

เจ๋งเลย ขอบคุณมากครับ อ่านสนุกมาก ...

ว่าแต่สงครามเรื่องการถอดระหัสเนี่ย รู้เลยว่าตัวเองเชียร์ฝั่งไหน 555+ (Chrome/Firefox/Opera)


..: เรื่อยไป

By: mk
FounderAndroidRed HatWindows
mk's blog
on 21/02/12 10:41 #386069 Reply to:386034 toggle
mk's picture

เรื่อง codec นี่ยืดเยื้อและจะกลายเป็นปัญหาขั้นเทพแน่นอนครับ เดี๋ยวจะเขียนถึงในตอนต่อๆ ไป

By: Meow-Meow
ContributoriPhoneWindows PhoneAndroid
Meow-Meow's blog
on 21/02/12 9:44 #386050 toggle
Meow-Meow's picture

Good Job (^_^)b


I have your six!!!

By: jobboonline
AndroidWindows
jobboonline's blog
on 21/02/12 10:04 #386059 toggle
jobboonline's picture

^^)b เยี่ยมครับ รอติดตามตอนต่อไป


แค่ไม่ทุกข์ ก็เรียกว่า "สุข" แล้ว :)

By: zipper
ContributorAndroid
zipper's blog
on 21/02/12 10:12 #386060 toggle
zipper's picture

ขอบคุณครับ เขียนครอบคลุมได้ทุกเรื่องเลย บางเรื่องก็พึ่งรู้อย่างหัวข้อที่ 4 ที่เขียนถึง WebSockets

By: shyyonk
ContributoriPhoneAndroid
shyyonk's blog
on 21/02/12 11:56 #386096 toggle
shyyonk's picture

เขียนได้เยี่ยมมากเลยครับ จะรออ่านตอนต่อไปครับ :-)

By: nonstatic
iPhoneWindows PhoneAndroidBlackberry
nonstatic's blog
on 21/02/12 19:45 #386250 toggle
nonstatic's picture

ขอบคุณสำหรับบทความดีๆ จะรออ่านตอนต่อไปครับ ^ ^

By: l2aelba
iPhoneAndroid
l2aelba's blog
on 22/02/12 5:42 #386421 toggle
l2aelba's picture

สวดยอดครับ เก็บได้ครบ


★★★ l2aelba ★★★

By: atjr
AndroidRed HatUbuntu
atjr's blog
on 26/02/12 22:58 #388117 toggle
atjr's picture

เป็นบทความที่มีประโยชน์ มากครับ ขอบคุณครับ


When the solution is simple, God is answering. ~ Albert Einstein

By: skuma
iPhoneWindows PhoneAndroidBlackberry
skuma's blog
on 06/03/12 13:11 #391554 toggle
skuma's picture

อ่านได้หมวดนึง และ ผมก็เลือนมาสุด เหอๆ เยอะเกิน สมองรับไม่ไหว 55+


ก็แค่คนคนนึง ที่อยากจะมีใครสักคน ^^

I Love AndroiD

By: giggog
giggog's blog
on 04/06/12 5:14 #427843 toggle
giggog's picture

ผมว่าตอนนี้ HTML5 ยังห่างไกลความเป็นไปได้ที่จะสู้ FLASH อยู่นะครับ แต่อีกหน่อยก็ไม่แน่แหะ


พวกเรา แก๊งแฮรี่บีนนนนนนนนนนนนนน รับออกแบบเว็บไซต์ และ SEO คร้าบบบบบบบ ;) ฮ่าๆๆๆ

By: tonhady
Red HatUbuntu
tonhady's blog
on 07/01/13 11:27 #525987 toggle
tonhady's picture

น่าสนใจมากครับ


MyBlog.