ACN Articles Zone

รูปภาพของชูเกียรติ ไชยทวีวิวัฒน์กุล
เริ่มต้นกับ HTML5
โดย ชูเกียรติ ไชยทวีวิวัฒน์กุล - ศุกร์, 1 มีนาคม 2013, 09:12AM
 

เริ่มต้นกับ HTML5

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

HTML5 คืออะไร

          ถ้าจะพูดไล่ถึงประวัติของ HTML แล้วคงจะยาวมาก ผมขออนุญาตตัดมาที่ HTML5 เลยก็แล้วกันครับ HTML5 ก็คือภาษาที่ถูกพัฒนาขึ้นเพื่อใช้เป็นภาษามาร์กอัพ สำหรับการเขียน Website รุ่นล่าสุด ที่ได้ถูกพัฒนาขึ้นมาโดย WHATWG (The Web Hypertext Application Technology Working Group)โดยได้มีการปรับเพิ่ม Feature หลายๆอย่างเข้ามาเพื่อให้ผู้พัฒนาสามารถใช้งานได้ง่ายมากยิ่งขึ้น

HTML5 Feature

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

  • Semantic Markup : การเพิ่ม Element ที่ อ่านง่ายมากขึ้น และช่วยให้ เราทำ SEO ได้มีประสิทธิภาพมากยิ่งขึ้น
  • Form Enhancements : เพิ่มความสามารถของ Form ต่างๆ ไม่ว่าจะเป็น Input type, Attribute หรือ แม้แต่ Element
  • Audio / Video: รองรับการอ่านไฟล์เสียง และ วีดีโอ โดยไม่จำเป็นต้องใช้ Embed Code ของ Third Party
  • Canvas : ใช้ในการวาดรูป โดยจำเป็นต้องใช้ Javascriptช่วย
  • ContentEditable : สามารถแก้ไข Content ได้โดยตรงผ่านทางหน้าเว็บ
  • Drag and Drop : ลากวางObject ได้ เพื่อเพิ่มการ ตอบสนองระหว่างระบบกับผู้ใช้
  • Persistent Data Storage : มีการจัดการที่ดีขึ้น โดยเก็บข้อมูลลงบนเครื่องของผู้ใช้

สิ่งที่เปลี่ยนไปใน HTML5

          นอกจาก Featuresใหม่ๆที่ ถูกเพิ่มเข้ามาในHTML5 แล้วยังมีการเปลี่ยนแปลงการเขียนแบบเดิมให้ผู้พัฒนาสามารถพัฒนาได้ สะดวกมากยิ่งขึ้น อาทิเช่น

  • Doctypeที่สั้นขึ้น ใน HTML5 ต้องการ Doctypeสั้นๆเพียงแค่ แทน Doctypeที่แสนจะยาวเหยียดใน เวอร์ชั่นเดิมๆ
  • การกำหนดค่าภาษาทำได้ง่ายขึ้น ตอนนี้คุณไม่จำเป็นต้องใช้ xmlnsหรือ xml:langใน <html> อีกแล้วครับ จะเหลือแค่ <html lang=”en”>
  • การกำหนดชุดอักษร (Charset) ที่สะดวกขึ้น จากเดิมที่เราเคยเขียน <meta <สุดแสนจะยาวเหยียดจนจำกันไม่ได้ ในตอนนี้ HTML5 จะทำให้คุณเขียนเหลือเพียงแค่ <meta> charset=”utf-8″ / < เท่านั้น>
  • ไม่ต้องมี '/' ปิด สำหรับ Tag เดี่ยว จากนี้จะไม่ต้องมีตัวปิดสำหรับ Tag เดี่ยวจำพวก <img><br><input>แล้ว
  • Tagบางอย่างจะไม่ถูกรองรับแล้ว ซึ่งจะมี Tagดังนี้ <acronym>, <applet>, <basefont>, <big>, <center>, <dir>, <font>, <frame>, <frameset>, <noframes>, <s>, <strike>, <tt>, <u> and <xmp>

เตรียม Environment

          หลังจากที่เราได้รู้จัก HTML5 มาคร่าวๆกันแล้วนะครับ ทีนี้เราลองมาเริ่มพัฒนากันดูบ้างดีกว่า ก่อนอื่นสำหรับการพัฒนา HTML5 นั้น มีความจำเป็นที่ Browser ที่ใช้ต้องมีการ Support ในระดับหนึ่ง จึงจะสามารถใช้งาน Tag หรือ Element ใหม่ๆได้ ซึ่ง Browser ที่ สนับสนุนนก็มีอยู่หลายตัวมากมายครับ แต่ในตอนนี้ผมขอยก ตัวอย่างการใช้งานกับInternet Explorer 9 ที่เป็นตัวใหม่ล่าสุดซึ่งเป็นสิ่งที่ท้าทายสำหรับนักพัฒนาเว็บเป็นอย่างมาก สำหรับInternet Explorer 9 หรือIE9 ในตอนนี้ก็มีการปล่อยตัวPlatform Preview ออกมาแล้วนะครับ เราสามารถ download ไปลองใช้งานได้ที่นี้เลยครับ Microsoft Internet Explorer9 Test Drive

          ซึ่งIE9 ไม่เพียงแต่จะสามารถรองรับ HTML5 และ CSS3 ได้อย่างเต็มรูปแบบแล้ว แต่ยังสามารถประมวลผลJavascriptได้ดี และเร็วมากยิ่งขึ้นกว่าเดิมอีกด้วย เป็นการแก้ไขจุดอ่อน ที่ Browser ตระกูล IE รัน Javascriptได้ช้าและดีไม่เท่า Browser ตัวอื่นๆไม่เพียงเท่านั้น IE9 ยังสามารถดึงเอา GPU มาช่วยในการแสดงผล กราฟฟิคแบบ 2D ผ่าน API Direct 2D ซึ่งจะช่วยให้การแสดงผล กราฟฟิคแบบ 2D เป็นไปได้รวดเร็วมากยิ่งขึ้น โดย API Direct 2Dในปัจจุบันก็จะมีอยู่ใน Windows Vista SP2 ขึ้นไป และ Windows 7

          สำหรับ IE9 Platform Preview เมื่อเราลงไปแล้วก็จะมี ไอคอน แยกออกมาอีกไอคอนหนึ่ง ไม่ได้มีผลกับ IE ตัวเดิมแต่เพียงอย่างใด ซึ่งหลังจากที่ลงแล้ว คุณก็พร้อมที่จะพัฒนา HTML5 ได้แล้วครับผม!!!

Ref: http://www.w3avenue.com/2010/05/07/html5-unleashed-tips-tricks-and-techniques/
Ref: http://www.whatwg.org/specs/web-apps/current-work/multipage/
Ref: http://ie.microsoft.com/testdrive/