HTML5 (Hypertext Markup Language 5) ขอขอบคุณ : อ.จุฑาวุฒิ จันทรมาลี หลักสูตรวิทยาการคอมพิวเตอร์ มหาวิทยาลัยราชภัฏสวนดุสิต

เราจะเรียนรู้อะไรกันเกี่ยวกับ HTML5 รู้จักกับ Web Applications / Web Apps HTML5 คืออะไร มีอะไรใหม่ใน HTML5 แนวโน้มการใช้งานและกำรสนับสนุนมาตรฐาน HTML5 การทดสอบการรองรับ HTML5 ด้วยตัวคุณเอง HTML5 กับอุปกรณ์ Mobile

Web Applications / Web Apps โปรแกรมที่ทำงานบนฝั่งเซิร์ฟเวอร์ เรียกว่า Web Server (Server Side) เข้าไปใช้งานโปรแกรมโดยโปรแกรม Web Browser เช่น Internet Explorer, Firefox, Chrome, Safari เรียกว่า Client Side ฝั่ง Client ไม่ต้องติดตั้งโปรแกรมเพิ่มเติม สามารถเข้าใช้งานได้ ทันทีโดยพิมพ์ URL ของโปรแกรมนั้นๆ เช่น http://www.facebook.com ข้อมูลทุกอย่างจะเก็บอยู่ที่ Server Side เป็นหลัก (Remote Storage) เวลาใช้ต้องต่ออินเทอร์เน็ต (ส่วนใหญ่) พัฒนาโดยใช้ HTML/CSS/JavaScript แต่ต้องมีภาษา Script เข้าช่วยเช่น PHP และ ASP (หรืออื่นๆ)

Native Application ต้อง Load โปรแกรมมาติดตั้งที่เครื่อง Smart Phone ผ่าน Apps Store / Google Play / MarketPlace / Ovi ทำงานได้เร็ว และเขียนโปรแกรมที่ซับซ้อนได้

การพัฒนา Web Applications

HTML5 คืออะไร HTML คืออะไร ย่อมาจาก “HyperText Markup Language” ภาษาคอมพิวเตอร์ที่ใช้สั่งให้แสดง “ข้อมูลหรือเนื้อหา” (Content) บนหน้าเว็บเพจ ทุกหน้าเว็บเพจบนอินเทอร์เน็ตจะต้องมีภาษา HTML อยู่

HTML5 คืออะไร ภาษา HTML เวอร์ชั่นใหม่ล่าสุด แต่ยังไม่เป็น Final Version มีคุณสมบัติเพิ่มขึ้นจาก HTML เดิม ทำให้เขียน HTML ง่ายขึ้น สนับสนุนการแสดงผลบนอุปกรณ์ต่ำงๆ ได้เช่น PC, Mac, iPhone, iPad, Android Phone หรือ Tablet เป็นต้น เพิ่มลูกเล่นในการทำงาน เช่น ทำงานกับระบบแผนที่, สร้าง ภาพกราฟิกโดยไม่ต้องมี Flash ฯลฯ เน้นการใช้งานร่วมกับ CSS (Cascading Style Sheets) และ JavaScript ทำงานกับภาษาที่ใช้พัฒนา Web Application เช่น PHP หรือ ASP ได้อย่างมีประสิทธิภาพเพิ่มขึ้น

หน่วยงานที่กำหนดมาตรฐาน HTML5 มี 2 หน่วยงานหลักคือ WHATWG (Web Hypertext Application Technology Working Group) และ W3C (World Wide Web Consortium) WHATWG เริ่มกำหนดมาตรฐานมาตั้งแต่ปี 2004 ในปี 2007 W3C เริ่มใช้มาตรฐาน HTML5 ที่ WHATWG กำหนดไว้ก่อนแล้ว 2 องค์กรทำงานร่วมกัน แต่มาตรฐานไม่เหมือนกันทั้งหมด W3C ต้องการมาตรฐาน HTML5 ที่เป็นเอกสารที่กำหนดสำเร็จไป เลย (แต่ก็ยังไม่เสร็จ) WHATWG ต้องการให้มาตรฐาน HTML5 มีการเปลี่ยนแปลงอย่าง เสมอตามสถานการณ์ และความต้องการทางเทคโนโลยี

มาตรฐาน HTML5 จะจบลงที่ใด คำตอบ คือ “ยังไม่รู้” แต่อุปกรณ์ และ Browser ต่างๆ ก็เริ่มสนับสนุนกันไปแล้ว แม้ว่ามาตรฐาน HTML5 ยังไม่ลงตัว ก็ตาม ผู้พัฒนาสามารถเริ่มศึกษาและพัฒนาได้ เพราะมีการรองรับ เพิ่มขึ้น

ข้อดีของ HTML5 รองรับอุปกรณ์หลากหลายทั้ง Desktop PC, Mac และ Mobile เช่น Smart Phone, Tablet แสดงภาพ เสียง หรือกราฟิกอนิเมชั่นต่ำงๆ โดยไม่ต้องติดตั้ง ซอฟท์แวร์เพิ่มเติม สามารถพัฒนาโปรแกรมได้เหมือนกับโปรแกรมที่ใช้งานทั่วไป ไม่ใช่เพียงแค่สร้างหน้าเว็บเพจแสดงข้อมูลอย่างเดียว เขียนโปรแกรมง่ายยิ่งขึ้น โดยเฉพาะบน Mobile ไม่ต้องพัฒนา ในลักษณะ Native Apps และไม่ต้องนำโปรแกรมขึ้น App Store หรือ Google Play เขียนโปรแกรมได้อย่างมีประสิทธิภาพ เพราะรองรับการติดต่อ เพื่อเรียกใช้งานคุณสมบัติต่ำงๆ ของอุปกรณ์โดยเฉพาะ Mobile ได้ เช่นเรียกใช้งานระบบ GPS (แผนที่)

CSS3 คืออะไร หาก HTML ใช้ในการแสดง “ข้อมูลหรือเนื้อหา” บนหน้าเว็บ เพจ CSS คือตัวที่กำหนด “รูปแบบและลูกเล่น” ในการแสดง “เนื้อหา” HTML แสดง “เนื้อหา” CSS ทำให้ “เนื้อหา” สวย และมีลูกเล่นมากขึ้น CSS กำหนดความสวยงาม เช่น ขนาด (ตัวอักษร), สี, การจัด วาง, ขอบ (Border) และอื่นๆ อีกมากมาย

CSS3 คืออะไร CSS3 คือเวอร์ชั่นใหม่ล่ำสุดของ CSS เป็นคู่หูของ HTML5 เรียกใช้โดยคำสั่งง่ายๆ <link rel="stylesheet" type="text/css" href="mystyle.css" /> หรือสามารถเขียนแทรกเข้าไปใน HTML ได้เลย แต่ใน HTML5 เน้นให้สร้างไฟล์ CSS ต่างหาก

การทำงานของ HTML5

การทำงานของ HTML5 กับ Css3

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

Java Script คืออะไร JavaScript เป็นภาษาที่ทำงานร่วมกับ HTML ลูกเล่นต่างๆ ของ HTML5 จะสามารถเรียกใช้ได้อย่างมี ประสิทธิภาพด้วย JavaScript HTML5 = เนื้อหา (นิ่งๆ) + CSS3 = รูปแบบ (สวยๆ) JavaScript = สั่งให้ประมวลผล (สร้างความ Dynamic ให้กับ เนื้อหา) เรียกใช้โดยคำสั่งง่ายๆ คือ <script language="javascript" type="text/javascript“ src="../scripts/example.js"></script> สามารถเขียนแทรกเข้าไปใน HTML ได้เลย แต่ใน HTML5 เน้นให้สร้างไฟล์ JS ต่างหาก

ข้อดีของ JavaScript เขียนโปรแกรมที่มีความซับซ้อน เช่น – สร้าง และเรียกดูฐานข้อมูล เช่น ระบบการสมัครเป็นสมาชิก และประวัติการเรียน เป็นต้น – ติดต่อเรียกข้อมูลจากเครื่องแม่ข่าย เช่น เรียกระบบการเรียน ผ่านอุปกรณ์ Mobile ก็อาจจะ เรียกข้อมูลบทเรียนใหม่ๆ – เชื่อมโยงระบบแผนที่ของอุปกรณ์ Mobile เพื่อเรียกดูตำแหน่ง – จัดเก็บข้อมูลที่อุปกรณ์ Mobile แบบ Local ทำให้ไม่ต้องเข้า อินเทอร์เน็ตทุกครั้งที่ใช้งาน – เขียนควบคุมการทำงำนของปุ่ม เช่น ปุ่มบังคับการเคลื่อนไหว ของตัวละครในเกม เป็นต้น

การทำงานของ HTML5/CSS3 และ JavaScript

ข้อจำกัดของ HTML5 แต่ละคุณสมบัติยังมิได้มีกำรสนับสนุนจากทุก Browser และ อุปกรณ์ Mobile ยังไม่ประกาศเป็นมาตรฐานที่กำหนดเสร็จสิ้นแล้ว การใช้ในรูปแบบ Offline (ไม่ได้ต่ออินเทอร์เน็ต) จะต้องมีการ เขียนโปรแกรมเพิ่มเติม

HTML5 เขียนอย่างไร

HTML5 แสดงผลได้บนทุกอุปกรณ์ Desktop Browser (PC/Mac) –Internet Explorer, Safari, Firefox, Chrome, Opera เป็นต้น Smart Phone –iPhone (iOS), Android Phone, BB เป็นต้น Tablet –iPad (iOS), Android Tablet, RIM Playbook เป็นต้น อื่นๆ เช่น อุปกรณ์เล่นเกม (Game Console), โทรทัศน์รุ่น ใหม่ (Smart TV)

HTML5 แสดงผลได้บนทุกอุปกรณ์.... แต่ แต่ยังไม่ 100% บนทุกอุปกรณ์ HTML5 คือชุดคำสั่งในการแสดงผลบนหน้าจออุปกรณ์ต่างๆ ซึ่ง อุปกรณ์ต่างๆ ที่กล่าวถึง ไม่ว่าจะเป็นบน PC, Mac, Smart Phone หรือ Tablet ล้วนแล้วแต่ยังไม่สนับสนุนทุกชุดคำสั่งของ HTML5 (สนับสนุนเป็นบางคำสั่ง) การพัฒนาจะต้องดูด้วยว่าชุดคำสั่งใดให้การสนับสนุนแล้วโดย อุปกรณ์ หรือ Browser ส่วนใหญ่ และชุดคำสั่งใดยังให้การ สนับสนุนน้อยอยู่

มีอะไรใหม่ใน HTML5 Canvas: ไดนามิกกราฟิกบนหน้าเว็บเพจ Geolocation: บอกตำแหน่งผู้ใช้งาน Form: สร้างแบบฟอร์มออนไลน์ง่ายยิ่งขึ้น Local Storage: เก็บข้อมูล หรือฐานข้อมูล (WebSQL) ได้ที่ คอมพิวเตอร์ของผู้ใช้งาน Media Player: เล่นวีดีโอและเสียงได้อย่างง่ายดาย Semantics: สร้างความหมายให้ข้อมูล

มีอะไรใหม่ใน HTML5 Canvas: ไดนามิกกราฟิกบนหน้าเว็บเพจ Geolocation: บอกตำแหน่งผู้ใช้งาน Form: สร้างแบบฟอร์มออนไลน์ง่ายยิ่งขึ้น Local Storage: เก็บข้อมูล หรือฐานข้อมูล (WebSQL) ได้ที่ คอมพิวเตอร์ของผู้ใช้งาน Media Player: เล่นวีดีโอและเสียงได้อย่างง่ายดาย Semantics: สร้างความหมายให้ข้อมูล

คุณสมบัติอย่างเป็นทางการของ HTML5 โดย W3C Class: 3D, Graphics & Effects SVG, Canvas, WebGL, CSS3 3D ช่วย ให้ผู้ใช้สามารถสร้างหน้า เว็บเพจบนหน้าเครื่อง Desktop หรือ Mobile ได้อย่างหน้าสนใจ

ตัวอย่างการใช้งาน SVG

Canvas: ไดนามิกกราฟิกบนหน้าเว็บเพจ Canvas ช่วยให้นักพัฒนาสามารถสร้างภาพกราฟิก และอนิ เมชั่นในรูปแบบต่างๆ ได้โดยไม่ต้องใช้ Flash ทำให้ผู้ใช้งาน ไม่จำเป็นต้องติดตั้งโปรแกรม Flash Player สามารถสร้างให้กราฟิกในรูปแบบที่มีการตอบโต้ (Interaction) เช่นปุ่มบังคับต่างๆ โดยใช้ JavaScript เข้าช่วย อุปกรณ์ iOS Device ของ Apple คือ iPhone และ iPad ไม่ รองรับ Flash แต่รองรับ HTML5

ตัวอย่างการใช้งาน Canvas

ตัวอย่างการใช้งาน Drag & Drop

ตัวอย่างการใช้ WEBGL

ตัวอย่างการใช้งาน CSS3 3D

คุณสมบัติอย่างเป็นทางการของ HTML5 โดย W3C Class: Connectivity เสริมประสิทธิภาพ และความเร็วด้านการเชื่อมต่อ (Web Sockets and Server-Sent Events) กับเครื่องแม่ข่ายผ่านอินเทอร์เน็ต ทำ ให้สามารถสร้างโปรแกรมประเภท ออนไลน์เกม ระบบการเรียนรู้ผ่าน อินเทอร์เน็ต (E-Learning) ระบบการ สื่อสารแบบออนไลน์ (Chat) การ เรียกดูข้อมูลแบบ Real-Time

ตัวอย่างการใช้งาน WebSockets เป็นการเขียนโปรแกรมที่ Chat ระหว่างกัน

คุณสมบัติอย่างเป็นทางการของ HTML5 โดย W3C Class: Device Access ช่วยให้การ เขียนโปรแกรมเพื่อเข้าถึงคุณสมบัติ ต่างๆ ของอุปกรณ์ Mobile เช่น แผนที่ (Geolocation) กล้องถ่ายรูป ไมโครโฟน หรือข้อมูลเช่น รายชื่อ (Contact) ทำได้ง่ายและรวดเร็วยิ่งขึ้น

ตัวอย่างการใช้งานกับแผนที่

ตัวอย่างการทำงานกับกล้อง

คุณสมบัติอย่างเป็นทางการของ HTML5 โดย W3C Class: Multimedia เรียกไฟล์วีดีโอ หรือเสียงให้แสดงด้วยการเขียน โปรแกรมเพียงไม่กี่บรรทัด

Multimedia: เล่นวีดีโอและเสียงได้อย่างง่าย เป็นคุณสมบัติที่เด่น และจับต้องได้มากที่สุด อุปกรณ์ iPhone/iPad ไม่สามารถเล่น Flash ได้ แต่อาศัยการ เล่นไฟล์เสียงและวีดีโอ ตลอดจนภาพอนิเมชั่นต่างๆ ด้วย HTML5

ฟอร์แมทที่สนับสนุนด้านเสียงของ HTML5

ตัวอย่าง Code HTML5 ในการใส่เสียงที่หน้าเว็บ

ตัวอย่างการเล่นไฟล์เสียง

ฟอร์แมทที่สนับสนุนด้านวิดีโอของ HTML5

ตัวอย่าง Code HTML5 ในการใส่วิดีโอที่หน้าเว็บ

ตัวอย่างการแสดงวิดีโอ

คุณสมบัติอย่างเป็นทางการของ HTML5 โดย W3C Class: Offline & Storage HTML5 ทำให้นักพัฒนาสามารถ เก็บข้อมูลการใช้งานโปรแกรม หรือ ฐานข้อมูลที่จำเป็นไว้ที่อุปกรณ์ได้ ทำให้เวลาใช้งานไม่จำเป็นที่จะต้อง ต่ออินเทอร์เน็ตเสมอไป เทคโนโลยีที่ สำคัญได้แก่ HTML5 App Cache, Local Storage, Indexed DB และ File API

ตัวอย่างการใช้งาน Local Storage

รู้จักกับ IndexedDB

ตัวอย่างการใช้งานฐานข้อมูลด้วย HTML5

แนวโน้มกำรสนับสนุน Offline Web Apps

คุณสมบัติอย่างเป็นทางการของ HTML5 โดย W3C Class: Performance & Integration ช่วยในการสร้าง Web Applications ที่ เรียกข้อมูลจากเครื่องแม่ข่ายด้วย เทคโนโลยี เช่น Web Worker และ XMLHttpRequest (การเชื่อมโยงข้อมูล ระหว่าง Web Browser และ Web Server) ทำให้สามารถเรียกข้อมูลได้ รวดเร็ว และทำงานในลักษณะ Background ได้

Web Worker คืออะไร Web Worker ช่วยให้ชุดคำสั่ง JavaScript ทำงานในรูปแบบ Background Mode ทำให้ผู้ใช้งานสามารถใช้งานฟังก์ชั่นงานอื่นๆ บนหน้าเว็บเพจได้ โดยไม่ต้องรอให้ JavaScript ทำงานเสร็จ ก่อน โดย Web Worker จะสั่งให้ JavaScript ทำงานโดยไม่ กระทบกับงานอื่นๆ

คุณสมบัติอย่างเป็นทางการของ HTML5 โดย W3C Class: Semantics กำหนดความหมายให้แก่ตัวแปรต่ำงๆ ในโปรแกรม HTML ที่เขียนได้ ทำให้ สามารถกำหนดตัวแปรที่มีความหมายได้ นอกเหนือจากเพียงแค่คำสั่งทั่วไป เช่น <body> แต่ไม่รู้ว่าใน <body> มี อะไรบ้าง เทคโนโลยีที่เกี่ยวข้องเช่น RDFa, microdata และ microformats

ตัวอย่างการใช้งานแนวคิดเรื่อง Semantics

ตัวอย่างการใช้งานแนวคิดเรื่อง Semantics

ตัวอย่างการใช้งานแนวคิดเรื่อง Semantics

ตัวอย่างการใช้งานแนวคิดเรื่อง Semantics

คุณสมบัติอย่างเป็นทางการของ HTML5 โดย W3C Class: CSS3 CSS3 เมื่อใช้งานร่วมกับ HTML5 จะ ช่วยกำหนด “รูปแบบ” ในการนำเสนอ ข้อมูลได้อย่างยืดหยุ่น หลากหลาย ทำ ให้มีการนำเสนอมีสีสรร ทั้งในรูปแบบ 2 มิติและ 3 มิติ

Form: สร้างแบบฟอร์มออนไลน์ง่ายยิ่งขึ้น สร้างแบบฟอร์มออนไลน์บนหน้าเว็บเพจได้ง่ายยิ่งขึ้น ใน HTML เวอร์ชั่นก่อนหน้ำ (4.01) จะต้องเขียน JavaScript ค่อนข้างมากในการจัดการเกี่ยวกับฟอร์ม แต่ใน HTML5 การ เขียนโปรแกรมจะน้อยลง

คำสั่งที่เกี่ยวกับ Form ที่เพิ่มขึ้นมาใน HTML5

ตัวอย่างหน้าจอเครื่อง Smart Phone ในการแสดงรูปแบบ Input ของ Form

ตัวอย่างหน้าจอเครื่อง Smart Phone ในการแสดงรูปแบบ Input ของ Form

ตัวอย่างหน้าจอเครื่อง Smart Phone ในการแสดงรูปแบบ Input ของ Form

Flash และ HTML5 Flash ยังเป็นรูปแบบที่มีการใช้งานอย่างกว้างขวางบนโลก อินเทอร์เน็ต HTML5 กำลังได้รับความนิยมมากขึ้น ส่วนหนึ่งมาจากการที่ อุปกรณ์ iOS ของ Apple คือ iPhone และ iPad นั้นไม่รองรับ Flash Google เองก็นำ HTML5 มาใช้งานมากยิ่งขึ้น ในอนาคต Flash จะยังคงอยู่เนื่องจากครองตลาดมานาน อย่างไรก็ดี เมื่อมีเครื่องมือในการพัฒนาใหม่ๆ สำหรับสร้าง HTML5 ออกมามากขึ้น นักพัฒนาส่วนหนึ่งก็จะหันไปใช้ HTML5 มากขึ้นด้วย อย่างไรก็ดี การสนับสนุนทั้งสองรูปแบบก็ยังคงมีต่อไป เพราะ Flash เองก็ยังมีข้อดีอีกมากที่ใน HTML5 ยังไม่มี

ตัวอย่างการพัฒนาโค้ดด้วย HTML5 http://www.chromeexperiments.c om/

แนวโน้มการใช้งานและการสนับสนุนมาตรฐาน HTML5

แนวโน้มการสนับสนุนของ Desktop Browser

แนวโน้มการสนับสนุนของ smart phone

แนวโน้มการสนับสนุนของ tablet

การทดสอบการรองรับ HTML5 ด้วยตัวคุณเอง เข้าไปยัง Browser ของอุปกรณ์ ที่คุณต้องการทดสอบ จากนั้นพิมพ์ URL ไปที่ http://www.html5test.com เว็บไซต์จะแสดงผลการทดสอบว่า อุปกรณ์และ Browser ที่คุณใช้ อยู่รองรับ HTML5 มากน้อย เพียงไรจากคะแนนเต็ม 500

ตัวอย่าง HTML5 บน Smart phone

ซอฟท์แวร์ที่พัฒนาด้วย HTML5 สร้างเมนูบนหน้าจอ iPhone

ซอฟท์แวร์ที่พัฒนาด้วย HTML5 สร้างเมนูบนหน้าจอ iPhone

ซอฟท์แวร์ที่พัฒนาด้วย HTML5 สร้างเมนูบนหน้าจอ iPhone

ซอฟท์แวร์ที่พัฒนาด้วย HTML5 สร้างเมนูบนหน้าจอ android

ซอฟท์แวร์ที่พัฒนาด้วย HTML5 สร้างเมนูบนหน้าจอ android

ตัวอย่างโค้ด HTML5 ในการสร้าง Shortcut บนหน้าจอของ Smart Phone หรือ Tablet

ตัวอย่างโค้ด HTML5 ในการสร้าง Shortcut บนหน้าจอของ Smart Phone หรือ Tablet

HTML5 กับการสร้างสื่อการเรียนการสอนผ่าน Mobile รองรับอุปกรณ์หลากหลาย แสดงภาพ เสียง หรือ กราฟิกอนิเมชั่นต่างๆ โดยไม่ต้องติดตั้ง ซอฟท์แวร์เพิ่มเติม ไม่ต้องพัฒนาในลักษณะ Native Apps และไม่ต้องนำโปรแกรม ขึ้น App Store หรือ Google Play ผู้เรียนเข้าถึงได้ง่าย และ ผู้พัฒนาก็สามารถพัฒนาโปรแกรมได้ง่าย รองรับการติดต่อเพื่อเรียกใช้งานคุณสมบัติต่างๆ ของอุปกรณ์ โดยเฉพาะ Mobile ได้ เช่นเรียกใช้งานระบบ GPS (แผนที่), กล้องถ่ายรูป เป็นต้น

จบบทที่ 11