HTML5 – มีอะำไรใหม่บ้าง? by plug.in

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

จนกระทั่งช่วงหลังมาเกิดแรงผลักดันจากหลายๆฝ่าย โดยเฉพาะที่เห็นกันอย่างชัดเจนคือ สงครามน้ำลายระหว่าง Apple และ Adobe ในปัญหาเรื่อง Flash บน iPad/iPhone ทำให้ HTML5 ถูกดึงมาเป็นประเด็นที่กล่าวถึงกันมาก จนนักพัฒนาทั้งหลายกลับมาให้ความสนใจกันมากขึ้น ซึ่งคาดว่าจะมีผลทำให้ HTML5 อาจจะได้ถูกใช้งานอย่างแพร่หลายในเร็วๆวันนี้

HTML5 ที่เี่ราๆพูดถึงกันนั้น จะประกอบด้วยส่วนหลักๆ สามส่วนคือ

- HTML5 ที่มาพร้อมกับ Tag html ใหม่ๆ

- Javascript API มาตราฐานใหม่ๆที่เพิ่มเข้ามา

- CSS3 ลูกเล่นเพิ่มเติม เช่น Animation

ไล่ไปทีละส่วนนะครับ

HTML5

- Tag ใหม่ๆเช่น

- <video> ที่มาใช้งานแทน Flash เดิม ซึ่งก็ยังเป็นที่ถกเถียงว่าดี เสียต่างกันยังไงบ้าง

- <audio> ตรงตัว มีขึ้นเพื่อเล่นเสียงเพลงบนหน้าเวป

- <canvas> ใช้ในการแสดงผลด้านรูปภาพบน browser ด้วย Javascript ซึ่งจะใช้ Library WebGL เป็นตัวแสดงผล

- Tag ที่บ่งบอกตำแหน่งในหน้าเวป เช่น header , group , nav , section , article ซึ่งจะทำงานเหมือน div แต่จะมีผลกับ search engine ในกา่รอ่าน html

- microdata ไว้ใช้แสดงความหมายของข้อความใน html เช่น [ My name is <span itemprop='name'>Neil</span> ]  หมายความ Neil เป็นชื่อ

- UI Form ใหม่ เช่น range , search และ Validation

Javascript API

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

- getElementsByClassName : ไว้ใช้ในการ select DOM element ตามที่ต้องการ ซึ่งแต่เดิม Framework ต่างๆจะมีให้พร้อมอยู่แล้ว

- querySelectorAll : เป็นการเลือก DOM element อีกแบบ โดยจะใช้ Format อ้างอิงแบบใหม่ เช่่นเดียวกับ CSS3 เช่น ul li:nth-child(odd)

- localStorage : คล้ายๆกับ Cookie แต่จะไม่มีการ Expired โดยขนาดที่ใช้ได้จะขึ้นอยู่ว่า Browser ตั้งไว้เท่าไหร

- Web sql : เป็น localStorage แบบที่เราสามารถใช้ ภาษา sql ในการ query เรียกข้อมูลมากใช้งานได้

- Cache api : เก็บไฟล์สำหรับการใช้งานแบบ offline

- Worker : หรือ Thread คือแตกการทำงานหลายๆอย่างพร้อมกัน

- Socket : เปิด Socket เชื่อมต่อกับ server หรือ web browser อื่นๆได้

- Notification : เพิ่มการแจ้งเตือนใน Browser เช่น มีใคร tweet มาหา หรือต้องไปเก็บผักแล้ว

- Drag Drop : ลากวาง

- Geolocation : หาตำแหน่งพิกัดของผู้ใช้งาน เพื่อไปใช้งานกับ Google map หรือ application อื่นๆ

CSS3

- Selector ใหม่ๆ เช่น  nth-child(even/odd) ใช้ในการ select แถวที่เป็นคู่และึคี่ของตาราง

- สามารถ Embed font ลงบนหน้าเวปไำด้แล้ว

- โหมดสีแบบใหม่ rgba (rgb+ alpha) และ hsl (Hue/saturation/luminance)

-  ไล่สี Gradient , ใส่เงา , ขอบโค้ง ด้วย CSS

- ใส่ Background ได้หลายอันพร้อมกัน

- Animation ด้วย CSS

- Translation เคลื่อนที่จากตำแหน่งนึง ไปอีกตำแหน่งนึง

- Transform หมุน ย่อ ขยาย ด้วย CSS

- Keyframe ทำ Animation แบบเต็มรูปแบบ

ซึ่งทั้งหมดนี้ ยังใช้กับ Browser ได้จำกัด โดยหลักจะเป็น Chrome , Safari และ Firefox (IE8 ยังไม่สามารถใช้งานได้) ซึ่งก็ยังเป็นปัญหาอยู่เพราะคนส่วนใหญ่ก็ยังใช้ Internet Explorer เป็นหลัก คงต้องรอให้คนเริ่มเปลี่ยนไปใช้ Internet explore 9 กันมากขึ้นก่อน เราจึงจะได้เห็น Application ที่ทำด้วย HTML5 อย่างแพร่หลาย