เห้ย นี่มันคำโฆษณา project Kyou!
วันนี้ไม่ได้มาขาย Kyou ครับ แต่จะมาพูดถึง HTML5 ครับ คนเข้าใจผิดกันเยอะ
# HTML5
## อะไรคือ HTML5
“HTML5” เพียวๆ คือเอกสารที่บอกมาตรฐาน HTML อันใหม่ครับ จะมีการเพิ่มความสามารถต่างๆ เช่น แท็กใหม่ attribute ใหม่ ค่าของ attribute ใหม่ โครงสร้างใหม่
คนส่วนมากชอบเอา HTML5 ไปรวมกับตัวมาตรฐานอื่นๆ ที่ออกมาควบคู่กัน และการก้าวหน้าของแพลทฟอร์มด้วย เป็น Buzzword อย่างนึง
## รู้ HTML แล้วจะเรียน HTML5 ยังไง
คุณรู้ HTML5 อยู่แล้วล่ะครับ
มันไม่ใช่ภาษาใหม่ที่ต้องหัดกันใหม่แต่ต้น แต่เป็นการเอาของเดิมไปปรับเพิ่มฟีเจอร์ เหมือนใช้ Photoshop CS4 จะไปใช้ CS6 เมนูมันก็ยังเมนูเดิมอยู่ แค่เพิ่มปุ่มเข้ามา จะใช้ไม่ใช้ก็ได้
ทีนี้ถามว่าแล้วจะรู้ได้ไงว่าอันไหนเพิ่มมา ก็ดูข่าวเอาครับว่าเค้าเพิ่มอะไรขึ้นมา หรือถ้าไปเห็นใครใช้ก็ลองดูว่าเค้าใช้อะไร ไอ้นี่มันใหม่มั้ย เพราะตัวเอกสารประกอบเนี่ย แค่เปิด browser ก็ค้างแล้วครับ จะไปนั่งอ่านทีละหัวข้อไม่มีทางเลย
## แล้วจะรู้ได้ยังไงว่าไอ้นี่คือ HTML อะไร
มีคนพูดตลกๆ ว่าถ้า IE รันไม่ได้มันคือ HTML5
เอาจริงๆ คือดูใน MDN ก็ได้ครับ ตัวอย่างเช่น [<input>](https://developer.mozilla.org/en-US/docs/HTML/Element/Input) จะเห็นมันแปะ HTML5 เต็มเลย อันไหนที่ไม่มีแปะ HTML5 ก็คือมีนานแล้ว
นอกจากนี้จะมีประเภท “Obsolete since HTML5” นั่นคือ ถ้าคุณใช้ HTML5 ไม่ควรจะเอามาใช้คำสั่งนี้อีกต่อไป
สิ่งที่ควรจำไว้มากๆ คือ HTML5 ออกแบบมาเพื่อให้ทำงานร่วมกับ Browser ในอดีต ฉะนั้นแล้วการออกแบบ
1. คำสั่งใหม่ ถ้าเป็นไปได้จะไม่ทำให้ browser รุ่นเก่าพัง (คำสั่งอาจจะไม่มีผล แต่การแสดงผลหน้าเว็บยังสามารถแสดงผลได้ต่อถึงจะไม่สมบูรณ์)
2. คำสั่งเก่าถ้าไม่ได้ห้ามใช้ก็ใช้ได้เหมือนเดิม (ผมถึงบอกว่าคุณน่ะรู้ HTML5 อยู่แล้ว)
## เมื่อไร HTML5 จะเสร็จ
คำตอบคือมันไม่มีวันเสร็จครับ
HTML5 เป็น Living standard นั่นคือมันจะถูกพัฒนาแก้ไขต่อไปเรื่อยๆ ไม่มีที่สิ้นสุด
## งั้น เมื่อไรจะได้ใช้ HTML5
สมมุติว่าวันนี้ผมเสนอแท็ก `
พออนุมัติแล้ว ทาง Browser ต่างๆ ก็จะเอาไปพัฒนา ซึ่งจะพัฒนาเมื่อไรก็ได้ หรือไม่พัฒนาก็ได้ (เช่นอ้างว่าเว็บไม่หวังดีอาจจะปลอมการคลิกทำให้ผู้ใช้ถูกชกรัวๆ ได้)
ฉะนั้นแล้วความสามารถของ HTML5 มันจึงแยกออกมาเป็นอย่างๆ ครับ อย่าไปมองมันเป็นก้อนเดียวกัน ทีนี้ถามว่าแล้วเมื่อไรจะใช้ก้อนนี้ได้ ก็ดูที่ [caniuse](http://caniuse.com/) ได้เลย ตัวอย่างเช่น [3D Transforms](http://caniuse.com/#feat=transforms3d) นั้นเว็บบอกว่า Firefox 16, Chrome 23, Safari 5.1, Android 3.0, iOS 3.2, BB7 มี โดยตระกูล WebKit ต้องใส่ `-webkit-` นำหน้าคำสั่ง ก็แปลว่า ถ้าผมไม่แคร์คนใช้ IE9 หรือ Chrome 22 ผมก็สามารถใช้ได้เลย
## WebKit?
WebKit เป็นชื่อเอนจิ้นที่ทำหน้าที่ประมวลผลโค้ดเว็บให้ออกมาให้เราเห็นครับ มันพัฒนาขึ้นมาจาก KHTML (ซึ่งกำลังจะเจ๊งแล้วเพราะโดน WebKit นำหน้า) และใช้ใน Safari ทั้งบน PC/Mac และบน iOS ต่อมา Google นำไปใช้ใน Chrome และ Android Browser อีกด้วย ปัจจุบัน BB7 ก็ใช้ เรียกได้ว่าถ้าจะอิงกับ Smartphone แล้ว WebKit แทบจะผูกขาด
สิ่งที่ควรจำคือ ถึงจะ WebKit เหมือนกัน แต่ไม่ได้แปลว่าจะเหมือนกันนะครับ มันมีความแตกต่างยิบย่อยของมันในแต่ละ platform ไปอีกที่ต้องจัดการ เช่น Android ต่ำกว่า 3 ไม่สามารถเลื่อน div ที่มี scrollbar ได้, iOS 4 เลื่อนได้ต้องใช้สองนิ้ว, iOS 5 เลื่อนได้เลย, `position:fixed` ใน Android ไม่ติดหัว browser ในต่ำกว่า 3 และ iOS ต่ำกว่า 5 แต่บนคอมปกติหมด, WebKit บน Safari PC ใช้ JavaScript Engine ชื่อ SquirrelFish Extreme (หรือบน iOS ใช้ชื่อการค้าว่า Nitro) แต่บน iOS ถ้าทำ shortcut แล้วจะไม่ได้ใช้ Nitro, บน Chrome ใช้เอนจิ้นชื่อ V8 เป็นต้น
Google, Apple และคณะเองก็สนใจคิดมาตรฐานใหม่ๆ เหมือนกันครับ ทำให้ใน Chrome และบางส่วนใน WebKit ด้วยมีมาตรฐานเฉพาะตัวที่ Browser อื่นไม่มีถึงแม้จะมีเอกสารมาตรฐานออกมา เช่นใน Chrome จะมีระบบ Native Client, คำสั่ง `-webkit-text-stroke` เป็นต้น
## ทำไมต้อง `-webkit-`
มันเคยมีปัญหาในสมัยก่อนครับว่า Browser นั้นแข่งกันออกมาตรฐานกันมา คนก็เข้าใจกันว่านี่คือมาตรฐานก็ใช้กันเหมือนว่า browser นั้นเป็นตัวเดียวในโลก
เค้าก็เลยบอกว่า มาตรฐานไหนก็ตาม ถ้ามันยังไม่เสร็จแต่คุณจะเอาไปทำก่อน ให้ใส่ `-vendor-` (เรียกว่า prefix) นำหน้า โดย vendor คือยี่ห้อของคุณ (เช่น ms, o, webkit, moz)
ทีนี้มันก็มีปัญหาสิครับ ถ้าผมจะสั่ง `border-radius` ที่มีทุก browser แต่ติด prefix นำหน้าเนี่ย ผมก็พิมพ์สี่รอบ ปวดมือพอดี ผมก็ขี้เกียจใส่มันซะอันเดียวพอของ `-webkit-` เพราะคนใช้เยอะสุด
คนใช้ Firefox ก็ซวยครับ Browser รันได้หมดทุกอย่าง แค่คนเขียนไม่ได้ใส่ `-moz-` แค่นั้น ก็เลยมีการโจมตีกันเกิดขึ้น ถึงขนาดว่า Opera ยอมอ่าน `-webkit-` เหมือนเป็นของตัวเองด้วย
ปัจจุบันคำสั่งดังๆ หลายๆ อันไม่จำเป็นต้องใส่ Prefix แล้วครับ ผมขอแนะนำว่าถ้าจำเป็นต้องใช้คำสั่งที่มี prefix ควรจะใส่รูปไม่มี prefix ไว้เสมอ ถึงจะขี้เกียจใส่ครบทุกยี่ห้อแต่แบบไม่มียี่ห้อนี่ควรจะใส่
## ไอ้วิบๆ นี่คือ HTML5 มั้ย
สิ่งที่เกิดขึ้นใน [Chrome Experiments](http://www.chromeexperiments.com/) หลายตัวมันไม่ใช่ HTML5 อย่างเดียวครับ มันมาจาก
– API ใหม่ๆ ใน JavaScript
– การที่ Browser ทำงานเร็วขึ้น (สมัยนี้ browser ใช้การ์ดจอ render หน้าเว็บได้แล้วนะครับ ไม่ใช่ว่าการ์ดจอแรมเยอะจะมีไว้แต่เล่นเกมแล้วนะ)
– Canvas ซึ่งเป็น tag ใน HTML5 ที่เอามาตรฐาน SVG เข้ามาใน HTML
บางอันจริงๆ จะนับมันอยู่ในกลุ่ม DHTML แบบสมัยก่อน (ถ้าไม่รู้จัก มันคือโค้ดพวกตัววิ่งใน title, หิมะตกในเว็บ, เปลี่ยนรูปไปมา จริงๆ ก็คือ JavaScript มาคุม HTML นั่นแหละ) ยังได้เลยครับ แค่โค้ดมันเรียบร้อยทันสมัยกว่าเท่านั้นเอง
ฉะนั้นแล้ว เว็บไม่มีวิบๆ ก็ไม่ใช่ว่าจะไม่ใช่ HTML5 เว็บมีวิบๆ ก็ไม่ใช่ว่าจะเป็น HTML5
## Microdata?
(ผมว่าไม่มีใครถามคำถามนี้หรอก แต่อยากเขียน)
Microdata คือการบอกให้คอมรู้ว่าเรากำลังเสนอข้อมูลอะไร จะบอกว่าเป็น SEO ก็ได้แหละครับ ตัวอย่างเช่น ถ้าผมเขียนว่าบ่ายสองโมงวันนี้นัดกินข้าวกับสมศรีที่ร้านสมพงศ์หมูทอด โปรแกรมมาดูคงไม่เข้าใจ แต่ถ้าผมเขียนเป็นรูปแบบ Schema.org จะได้
~~~~~
นัดกินข้าวกับ
สมศรี
~~~~~
หน้าตาออกมาจะเหมือนกันเลยนะครับ แต่[คอมจะสามารถเข้าใจ](http://www.google.com/webmasters/tools/richsnippets?url=&html=%3Cdiv+itemscope+itemtype%3D%22http%3A%2F%2Fschema.org%2FFoodEvent%22%3E%0D%0A%3Ctime+datetime%3D%222013-01-15T14%3A00%2B07%3A00%22+itemprop%3D%22startDate%22%3E%E0%B8%9A%E0%B9%88%E0%B8%B2%E0%B8%A2%E0%B8%AA%E0%B8%AD%E0%B8%87%E0%B9%82%E0%B8%A1%E0%B8%87%E0%B8%A7%E0%B8%B1%E0%B8%99%E0%B8%99%E0%B8%B5%E0%B9%89%3C%2Ftime%3E%3Cspan+itemprop%3D%22name%22%3E%E0%B8%99%E0%B8%B1%E0%B8%94%E0%B8%81%E0%B8%B4%E0%B8%99%E0%B8%82%E0%B9%89%E0%B8%B2%E0%B8%A7%3C%2Fspan%3E%E0%B8%81%E0%B8%B1%E0%B8%9A%3Cspan+itemprop%3D%22attendee%22+itemscope+itemtype%3D%22http%3A%2F%2Fschema.org%2FPerson%22%3E%3Cspan+itemprop%3D%22name%22%3E%E0%B8%AA%E0%B8%A1%E0%B8%A8%E0%B8%A3%E0%B8%B5%3C%2Fspan%3E%3C%2Fspan%3E%0D%0A%3C%2Fdiv%3E)ได้เลยว่า
– เหตุการณ์ชนิด FoodEvent
– เริ่มวันที่ 15/01/2013 เวลา 14:00 เขตเวลา UTC+7
– เหตุการณ์ชื่อ นัดกินข้าว
– ผู้ร่วมงานชื่อ สมศรี เป็นประเภท Person
ตัว `itemscope`, `itemtype`, `itemprop`, `
นอกจากนี้ถ้าใครเคยใช้ Facebook Open Graph นั่นก็เป็น Microdata อีกแบบหนึ่งครับที่ระบุค่าลงไปชัดเจนเลยไม่ได้ปนกับเนื้อหา สองแบบนี้สามารถปนกันได้
ใน menome ก็มี Schema ครับ ลองเช็คดูได้ที่ [Structured Data Test Tool](http://www.google.com/webmasters/tools/richsnippets?url=http%3A%2F%2Fmenome.in.th%2Fanime%2Fmadoka&html=) สิ่งที่น่าสนใจคือสังเกตว่าจะมีการให้คะแนนรีวิวเป็นดาวด้วย แต่มันมีแค่ 5 ดาว ใน menome ใช้ระบบ 0-10 ก็เพราะใน Schema ผมบอกว่าคะแนนเต็มผมคือ 10 Google ก็จะเทียบลงมาเป็น 5 เอง
—————–
พาร์ทต่อไป คิดว่าคงเป็นคำว่า CSS3 บ้าง ตอนแรกผมไม่อยากทำซีรีย์นะ แต่มันยาวแล้ว