ความรู้เบื้องต้นสำหรับภาษา HTML5

ความรู้เบอื้ งต้นสาหรับภาษา HTML5

อะไรคอื HTML5ผ้อู า่ น Blognone คงได้ยินช่ือ HTML5 กนั มาเยอะ แตว่ า่ แท้จริงแล้วมนั คอื อะไรกนั แน่?ความหมายทว่ั ไปของคาวา่ HTML5 มีสองนยั ยะที่เหลอื่ มซ้อนกนั อย่คู รับความหมายในมมุ แคบ มนั คอื สเปกของภาษา HTML รุ่นท่ี 5 ซงึ่ ตอ่ จาก HTML4 ท่ีเราใช้กนั ทกุ วนั นี ้โดยปัจจบุ นั สเปกยงั ร่างไม่เสร็จ (ดไู ด้จากเอกสารของ W3C) เนือ้ หาจะครอบคลมุ ลกั ษณะ ฟี เจอร์ และ syntax ของ HTML เท่านนั้ความหมายในมมุ ท่ีกว้างขนึ ้ มนั คือ ชุดของเทคโนโลยีเวบ็ สมัยใหม่ อนั ประกอบไปด้วยภาษา HTML5 ตามข้อแรกCSS3API อีกชดุ หนง่ึ ท่ีอย่นู อกสเปก HTML5 แตอ่ อกแบบมาให้ใช้งานร่วมกนั เชน่ Geolocation, IndexedDB, File API ท่ีกาลงั เป็นร่างมาตรฐานของ W3C แยกมาอีกชดุ หนง่ึเทคโนโลยีประกอบอ่นื ๆ ที่เป็นมาตรฐานของ W3C อยแู่ ล้ว และนามาใช้ร่วมกบั HTML (ซง่ึ จะเป็น HTML4 หรือ HTML5 กไ็ ด้) เชน่ SVG หรือ MathMLHTML5 ในที่นีเ้ราจะหมายถงึ ความหมายอยา่ งที่สอง ก็คอื เทคโนโลยีเวบ็ รุ่นใหมแ่ บบรวมๆ นะครับ

ทาไมต้องมี 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> ทาให้เบราว์เซอร์สามารถรับทราบความหมายของวตั ถแุ ตล่ ะชิน้ ได้ดีขนึ ้

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

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 ด้วย

5. MULTIMEDIA• เรื่องนีเ้ราพดู กนั มาเยอะมาก และเริ่มใช้งานจริงกนั แล้ว คงไมต่ ้องลงลกึ ในบทความตอนนี ้• อธิบายแบบสนั้ ๆ คอื เดิมที่ HTML4 ขนึ ้ ไปไมส่ ามารถแสดงผลเสยี ง-วดิ ีโอได้โดยตรง ต้องใช้วิธีฝัง <object> แล้วตดิ ตงั้ ปลก๊ั อนิ เพ่ือชว่ ยเล่นมลั ตมิ ีเดยี ซง่ึ ทางานได้ตามนนั้ แตก่ ็มปี ัญหายิบย่อยมากมายตามมาเช่นกนั• แตพ่ อเป็น HTML5 ได้กาหนดให้ HTML ต้องเล่นไฟล์เสียงและวิดีโอได้ในตวั จงึ เป็นทม่ี าของแทก็ ใหม่ <audio> และ <video> ทห่ี ลายคนคงลองใช้กนั แล้ว ดงั นนั้ ตอ่ ไปเสยี งและวดิ ีโอจะกลนื เป็นเนือ้ เดยี วกบั เวบ็ เพจโดยตรง เราสามารถ ปรับเปลีย่ นการแสดงผลของมนั ได้เฉกเช่นเดียวกบั สว่ นอ่นื ๆ ของเวบ็ เพจ เชน่ ย้ายตาแหนง่ ซ้อนฉากหลงั หาอย่างอน่ื มาบงั ฯลฯ• อยา่ งไรกต็ าม เรื่องมลั ติมเี ดยี ของ HTML5 กลบั มีปัญหาประการใหมเ่ พิ่มเข้ามา นน่ั คือ \"สงคราม codec\" ระหวา่ ง เบราว์เซอร์สองคา่ ยใหญ่ ดงั ท่เี ราเหน็ จากขา่ ว WebM+Ogg (สนบั สนนุ โดย Chrome/Firefox/Opera) vs H.264 (สนบั สนนุ โดย IE/Safari) นน่ั เอง

6. 3D, GRAPHICS & EFFECTS• หมวดท่หี กเก่ยี วกับเร่ืองกราฟิ ก แบ่งเป็ น 4 ประการย่อยๆ• SVG (Scalable Vector Graphics)• Canvas• WebGL• CSS3 3D

7. PERFORMANCE & INTEGRATION• หมวดท่ีเจ็ดเป็นการปรับปรุงประสทิ ธิภาพการทางานของเว็บแอพ แบง่ ออกเป็น 2 สว่ นใหญ่ๆ• Web Worker อธิบายง่ายๆ Web Worker คือจาวาสคริปต์ทที่ างานแบบมลั ติเธร็ด เพื่อให้สคริปต์สามารถทางานเบือ้ งหลงั ได้หลายๆ งานพร้ อมกนั• XMLHttpRequest Level 2 ผมถือวา่ ผ้อู า่ น Blognone คงรู้จกั XMLHttpRequest (XHR) ทีเ่ ป็นเทคโนโลยีพืน้ ฐานของ AJAX กนั พอสมควรแล้ว อธิบายสนั้ ๆ สาหรับคนไมร่ ู้ XHR เป็นวิธีการโหลดข้อมลู เฉพาะบางสว่ นของเว็บเพจ (ไมใ่ ชท่ งั้ หน้า) ช่วยให้เราสามารถปรับปรุงข้อมลู บางสว่ นของเพจได้ โดยไมต่ ้องโหลดใหมท่ งั้ หน้า ผลคือเว็บเพจทอี่ นิ เตอร์แอคทีฟมากขนึ ้ นน่ั เอง

8. CSS3• CSS3 มีความสามารถเพิ่มขนึ ้ จาก CSS2 ในปัจจบุ นั มาก เพ่ิมฟีเจอร์ของแวดวงส่ิงพิมพ์ที่เก่ียวข้องกบั การจดั หน้า การควบคมุ การไหลของข้อความ และฟอนต์เข้ามาอีกมาก แตก่ ็ยงั มีเร่ืองอื่นๆ เช่น 3D, เสยี งพดู , แอนิเมชนั ฯลฯ (ดู ข่าวเก่าเร่ือง CSS3 Regions ประกอบ)