html5

html5

เนื้อหานี้ มุ่งหวังเพื่อให้เข้าใจ HTML5 มากขึ้น ซึ่งโดยหลัก จะเป็นการอ้างอิงเนื้อหาจาก wikipedia นะครับ มิได้นั่งเทียนเขียนขึ้นมาเองแต่อย่างใด

HTML5

HTML5 ตอนนี้ ยังมีสถานะอยู่ระหว่างการพัฒนาอยู่ โดยเป็นภาษาในรุ่นถัดไป ของภาษา HTML ซึ่งที่มีการใช้งานในตอนนี้ก็คือ HTML 4.01 และ XHTML 1.0, 1.1 ซึ่ง HTML5 เป็นภาษาหลัก ที่ใช้ในการแสดงเนื้อหา หน้าตาในระบบ World Wide Web
มาตรฐานภาษาใหม่นี้ มีหลายอย่างที่ถูกเพิ่มเข้ามา เช่น ตัวเล่น vdo หรือ drag and drop ซึ่งลูกเล่นเหล่านี้ เมื่อก่อนจะขึ้นอยู่กับ plug in ที่ทำงานร่วมกับ browser ที่เราใช้เปิดเว็บเท่านั้น เช่น Adobe flash, Microsoft Silverlight

โดยการคาดการณ์ของ บ.ก. HTML5 คาดว่า น่าจะเอามาเริ่มใช้ได้ประมาณปี 2012 และจะเข้ามาเป็น มาตรฐานของ W3C (ช่วง W3C Recommendation) ได้ประมาณ2022 หรือช้ากว่านั้น โดยตอนนี้ หลายๆ browser ก็เริ่มพัฒนาตัวเอง เพื่อให้รองรับการใช้งานของ มาตรฐาน HTML5 แล้ว โดยน่าเชื่อว่า หลายอย่าง จะไม่มีการเปลี่ยนแปลง เมื่อถูกเริ่มเอามาใช้ในช่วงปี 2012 (ซึ่งเรียกว่า W3C Candidate Recommendation stage)

กระบวนการพัฒนาของภาษา HTML5

HTML5 ถูกพัฒนาโดย Web Hypertext Application Technology Working Group (WHATWG) ซึ่งเริ่มกำหนดมาตรฐานของภาษา มาตั้งแต่ มิถุนายน  2547 โดยในตอนนั้นใช้ชื่อว่า Web Application 1.0 จนเมื่อ มีนาคม 2553 ได้มาถึงขั้นตอนการร่าง ข้อกำหนดมาตรฐานของ HTML5 โดยมี  Ian Hickson จาก Google, Inc. เป็น บ.ก.

การร่างข้อกำหนดของ HTML5 มีมาตั้งแต่ปี 2550 โดยได้เผยแพร่ตัวร่าง ฉบับแรกเมื่อ มกราคม 2551 ซึ่งก็ได้มีการปรับปรุงมาเรื่อย และน่าเชื่อว่าจะใช้เวลาอีกหลายปี กว่าจะมีการเอา HTML5 มาใช้จริงได้

โดยกำหนดเวลาแล้ว มีการคาดการณ์ว่า จะเข้าช่วง W3C Recommendation ได้ประมาณปลายปี 2553 แต่ตัวร่างฉบับแรก ก็ช้ากว่าคาดการณ์ไปแล้ว 8 เดือน อีกทั้ง ตามคาดไว้คือ Candidate Recommendation น่าจะเริ่มได้ช่วง 2551 ก็กลายเป็น เริ่มเมื่อตอน ตุลาคม 2552

โดยมีการคาดหมายว่า จะเข้าช่วง W3C Candidate Recommendation ในช่วงปี 2012 (เริ่มเอามาใช้งาน) และจะเข้าสู่ W3C Recommendation (ช่วงประกาศเป็นมาตรฐานสากล) ในช่วงปี 2022 หรือช้ากว่านั้น แต่ในตอนนี้ ก็มีหลายส่วน ที่มีความเสถียร และถูกเอามาใช้งานจริงแล้วเช่นกัน

บางส่วนของ HTML5 นั้น เสถียรแล้ว และสามารถเอาไปใช้งานได้จริงแล้ว เช่น <canvas>

รูปแบบโค้ด HTML5

HTML5 ได้เพิ่ม element และ attribute ใหม่เข้ามา ซึ่งจะมีการใช้งานได้บ่อยใน modern website (เว็บที่ใช้เทคโนโลยีใหม่ๆ เพื่อให้มีลูกเล่น หรือการแสดงผลที่หลากหลายเพิ่มขึ้น)  และหลายส่วนก็เป็นการเพิ่มความชัดเจนของตัวโค้ด(ที่ส่งผลต่อเนื้อหา)มากขึ้น (semantic) โดยมีความชัดเจนมากกว่าที่เราเคยใช้กัน เช่น แบบ block (<div>) หรือแบบ inline (<span>) ตัวอย่างเช่น <nav> (ลิสต์รายการเมนูของเว็บ) หรือ <footer>(ข้อความที่แสดงเนื้อหา ในส่วนด้านล่างของหน้าเว็บ) หรือหลาย element ก็เพิ่มความสามารถในการแสดงผล เช่น element ของ multimedia <audio> และ <video> แต่ก็มีบางส่วนที่ถูกเอาออกจากมาตรฐานเดิมคือ 4.01 เช่นพวกที่จัดการการแสดงผลโดยตรงเช่น <font> และ <center> นั่นเป็นเพราะว่าจะเป็นการซ้ำซ้อนกับการแสดงผลโดยใช้ Cascading Style Sheets หรือ CSS นั่นเอง นอกเหนือจากนี้ยังมีการเน้นในส่วนที่จัดการ DOM อีกด้วย (เช่น JavaScript)

ในมาตรฐาน HTML5 นั้นจะไม่ทำงานบนมาตรฐาน SGML อีกต่อไป แต่ว่าก็มีการออกแบบให้สามารถทำงานร่วมกับ HTML รุ่นเก่าได้เหมือนกัน โดยมาพร้อมกับการประกาศแบบใหม่ คือ SGML document type declaration, <!DOCTYPE html>

APIs ชุดใหม่

ในHTML5 ได้มีการอนุญาตให้เขียน API เพื่อเข้าจัดการ DOM ได้หลายส่วนเพิ่มขึ้น ตัวอย่างเช่น

  • The canvas element for immediate mode 2D drawing. See Canvas 2D API Specification 1.0 specification / เป็นชุดคำสั่งเพื่อช่วยในการวาดรูป หรือ สร้างวัตถุเพื่อการแสดงผล ในรูปแบบ 2 มิติ
  • Timed media playback / ตัวควบคุม timeline ของเพลง หรือ vdo
  • Offline storage database (offline web applications). See Web Storage / เป็นการเก็บข้อมูลเนื้อหา ลงเครื่อง และเรียกขึ้นมาใช้งานใหม่ได้
  • Document editing / การแก้ไขเนื้อหาเว็บ
  • Drag-and-drop / การลากและวางของวัตถุ
  • Cross-document messaging. See HTML5 Web Messaging / การแลกเปลี่ยนข้อมูลกันข้ามหน้าเว็บ (คงเหมือน AJAX)
  • Browser history management / ระบบจัดการเว็บย้อนหลัง(น่าจะได้อานิสงค์มาจาก offline storage database)
  • MIME type and protocol handler registration. / ทำความรู้จักชนิดของไฟล์ใหม่ๆ ได้มากขึ้น
  • Microdata. See HTML Microdata  / การจัดการแสดงผลของข้อมูลขนาดเล็ก เช่นพวก JSON

 

ความต่าง ระหว่าง HTML 4.01 และ XHTML 1.x

มีความแตกต่างกันในหลายส่วนเช่น


  • การแปล syntag ใหม่ ที่ไม่อ้างอิง SGML ทำให้มีความยืดหยุ่นเพิ่มขึ้น (เข้าใจว่าน่าจะมากกว่า XHTML)
  • รองรับการใช้ SVG หรือ MathML ในแบบ Inline ในเอกสารชนิด text/html
  • มี element ใหม่ article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, mark, meter, nav, output, progress, rp, rt, ruby, section, source, summary, time, video
  • form input แบบใหม่ dates และ times, email, url, search, color
  • attributes ใหม่  ping (on a and area), charset (on meta), async (on script)
  • ค่า attributes ที่ประกาศไว้ (เพื่อให้ถูกเอาไปใช้ในทุกหน้า): id, tabindex, hidden, data-* (custom data attributes)
  • Forms รองรับการ PUT และ DELETE เพิ่มขึ้นแทนที่จะใช้แค่ GET และ POST
  • ถอด elements เก่าๆออก ไม่เอามาใช้อีกต่อไป: acronym, applet, basefont, big, center, dir, font, frame, frameset, isindex, noframes, s, strike, tt, u

 

ตัวอย่างการเรียก VDO มาแปะ หน้าเว็บใน HTML5

<video src="movie.webm" controls>
Your browser does not support the video tag.
</video>

เท่านี้เราก็ไม่ต้องวิ่งหา plugin ตามที่เราเคยใช้กันอีกต่อไป งานเราก็สบายขึ้นเยอะครับ

อย่างที่บอกนะครับ ว่ารอไปก่อน....

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


Create: Modify : 2010-06-26 00:38:34 Read : 6260 URL :