HTML5 – มีอะำไรใหม่บ้าง? by plug.in
Jun1
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 อย่างแพร่หลาย
Enjoy this article?
Consider subscribing to our RSS feed!
17:38 on October 4th, 2012
เว็บไซต์จะไม่เป็นเพียงเว็บไวต์ธรรมดาๆแล้ว ขอบคุณบทความดีๆครับ ^^