บทความชิ้นนี้ค่อนข้างเป็นบทความ เชิงเทคนิค แต่อย่าเพิ่งตกใจ เพราะผู้เขียนตั้งใจเขียนให้มีเนื้อหาด้านเทคนิคไม่ซับซ้อน เพื่อให้ผู้อ่านได้เข้าใจถึงแนวคิดของเทคโนโลยีที่นับวันจะพัฒนาขึ้นไป เรื่อยๆ และเมื่อรู้เขารู้เรา ก็จะเพิ่มโอกาสและไอเดียในการนำความสามารถของ HTML5 มาต่อยอดทำอะไรๆ ได้เยอะแยะเลยครับ
HTML5 คืออะไร
HTML (ย่อมาจากคำว่า Hypertext Markup Language) คือภาษาพื้นฐานภาษาหนึ่งที่ใช้ในการแสดงผลโดยมีแท็ก (Tag) ไว้กำหนดคำสั่งความสามารถต่างๆ โดย HTML มีหน่วยงานกลางคือ W3C (World Wide Web Consortium) ที่คอยกำกับดูแลและพัฒนามาตรฐานของภาษานี้ จนเมื่อเวลาผ่านไป การแสดงผลของ HTML ก็ไม่ได้มีเพียงเบราว์เซอร์เจ้าดังๆ บนหน้าจอคอมพิวเตอร์เท่านั้น HTML จึงถูกพัฒนาและเพิ่มความสามารถมากขึ้นเรื่อยๆ จนถึงเวอร์ชั่นที่ 5 แล้ว
สำหรับ HTML5 นี้เป็นการก้าวกระโดดครั้งสำคัญของภาษามาตรฐานสำหรับการแสดงผลเว็บฯ ก่อนหน้านี้เวลาเราเปิดเว็บไซต์ก็จะเห็นเพียงตัวอักษรและภาพเท่านั้น แต่ในปัจจุบัน ยังมีความสามารถในการแสดงผลด้านกราฟิก เทคนิคลึกล้ำอลังการ กดตรงนี้ไปโผล่ตรงนั้น หรือจะดูหนัง ฟังเพลง เล่นวิดีโอ แทรกมัลติมีเดียหรือเกมลงในเว็บฯ เลย ก็สามารถทำได้ด้วย HTML5 โดย (แทบ) ไม่ต้องพึ่งโปรแกรมเสริมใดๆ จึงทำให้นักพัฒนาทำงานง่ายขึ้นมาก ไม่ต้องกลัวว่าจะเจอปัญหาที่เคยเกิดใน "ยุคสงครามเบราว์เซอร์" อีกต่อไป
สิ้นสุดสงครามมาตรฐานเบราว์เซอร์อันยาวนาน
ก่อนหน้านี้ ปัญหาใหญ่ที่คนทำเว็บฯ ต้องหนักอกหนักใจมาตลอดก็คือ อุตส่าห์เขียนโค้ดเท่ห์ๆ ใส่กราฟิกสวยงาม ผสมเอฟเฟ็กต์ไว้เสียดิบดี ปรากฏว่าไม่สามารถแสดงผลได้แม่นยำในเบราว์เซอร์บางยี่ห้อซะอย่างนั้น
ด้วยเหตุที่ HTML/HTML5 นั้นถูกพัฒนาและผ่านการปูพื้นฐานมาอย่างยาวนานและแข็งแรง ทำให้เบราว์เซอร์รุ่นใหม่ๆ ไม่ว่าจะเป็น Mozilla Forefox, Google Chrome, Apple Safari หรือแม้แต่ Microsoft Internet Explorer ที่เคยเป็นเจ้าปัญหาและคู่กัดตลอดกาลของคนทำเว็บฯ (อุ๊ย! เผลอบอกชื่อยี่ห้อจนได้ แต่เบราว์เซอร์เจ้านี้แหละครับที่ประหลาดหน่อย คือเขียนโค้ดยังไงก็มีแต่เจ้านี้แหละที่แสดงผลไม่ค่อยเหมือนชาวบ้าน เพราะเวอร์ชั่นเก่ายังไม่รู้จักเทคนิคใหม่ๆ แต่คนก็ยังใช้กันเยอะเพราะขี้เกียจลงโปรแกรมใหม่)
ซึ่งรุ่นล่าสุดก็สามารถรองรับและแสดงผลความสามารถหลายๆ อย่างใน HTML5 ได้เป็นที่น่าพอใจแล้ว
ซึ่งสำหรับนักออกแบบและพัฒนาเว็บฯ และแอพพลิเคชั่นต่างๆ แล้ว ไม่มีอะไรที่หายเหนื่อยไปกว่าการแสดงผลได้เป๊ะตามที่เขียนโค้ดมาแล้วล่ะ
ลาก่อน Flash
คงยังจำกันได้ว่าเมื่อไม่กี่ปีก่อนหน้านี้ ไม่ว่าเราจะเข้าเว็บไซต์ไหนๆ ในโลก ก็ต้องเจอเอฟเฟ็กต์ลึกล้ำเต็มหน้าเว็บฯ ที่โหลดช้าสุดๆ เพราะต้องแบกภาระความลึกล้ำ (จนต้องเป็นแถบ Now Loading หมุนๆ และปุ่ม Skip Intro ที่คุ้นตาและน่ารำคาญกันมายาวนาน) นี่เป็นเทรนด์การออกแบบในยุคที่เทคโนโลยี Adobe Flash ยังรุ่งเรือง เข้าเว็บฯ อะไรก็เป็นเว็บฯ แฟลชไปหมด
ซึ่งถ้าจะว่ากันตามจริงแล้ว เทคโนโลยีนี้ไม่ได้เป็นการแสดงผลแบบ Native นะครับ นั่นคือถ้าจะให้แสดงผลแฟลชได้ ผู้ใช้เองจำเป็นต้องติดตั้งปลั๊กอินของบริษัท Adobe เสียก่อน นี่จึงทำให้โลกของมัลติมีเดียบนเว็บฯ ถูกผูกขาดโดยมหาอำนาจ Adobe มายาวนาน ถ้านึกภาพไม่ออกก็นึกถึง YouTube ล่ะกันครับ ว่าคลิปวิดีโอทุกชิ้นที่เราเห็นกันนี้จำเป็นต้องมี Flash Player Plugin ติดตั้งไว้ในเครื่องก่อนนะ ถ้าอย่างนั้นเล่นไม่ได้ แต่แล้วเมื่อยุคสมัยเปลี่ยนไป
นักพัฒนาหลายๆ สำนักลุกขึ้นมาบอกว่า "เราน่าจะใช้มาตรฐานกลางในการแสดงผลสิ" เพื่อเว็บฯ จะได้เป็นของทุกคน ไม่ต้องไปง้อบริษัทใดบริษัทหนึ่งให้เขาผูกขาดแล้วนะ
และ HTML5 ก็ถือกำเนิดขึ้นเพื่อตอบโจทย์เหล่านี้ เพราะมันสามารถเขียนเพื่อให้รองรับการดูหนัง ฟังเพลง และเล่นเกมได้ทดแทน Adobe Flash เป็นอย่างดี จนกระทั่งปัจจุบันเว็บไซต์มัลติมีเดียยักษ์ใหญ่อย่าง YouTube เองก็เปลี่ยนเทคโนโลยีการแสดงผลเป็น HTML5 Video เป็นที่เรียบร้อย
เท่านั้นยังไม่พอ เมื่อเว็บฯ ไม่ได้อยู่แค่หน้าจอคอมพิวเตอร์ แต่การกำเนิดขึ้นของ iPhone รุ่นแรกนั้น ทำให้ความรุ่งเรืองของแฟลชสะดุดกึกอย่างรวดเร็ว เพราะอยู่ดีๆ Apple ก็ประกาศตูมว่า "ไม่เอาแล้วล่ะ แฟลชมันไม่เวิร์ก งั้นมือถือเราเปิดแฟลชไม่ได้แล้วกัน" เท่านี้แหละครับ จบเลย คนใช้สินค้าตระกูล iPhone และ iPad กันทั่วโลกนั้นมากพอที่จะทำให้นักพัฒนาหันมาให้ความสำคัญ และค่อยๆ เปลี่ยนเทคนิคการทำเว็บฯ ให้ไม่ต้องพึ่งปลั๊กอินเสริมกันมากขึ้น
แถมระบบปฏิบัติการมือถือค่ายอื่นๆ ก็เริ่มตีตัวออกห่างจากแฟลชไปสู่มาตรฐาน HTML5 เช่นกัน นี่ก็เป็นการชี้เป็นชี้ตายอนาคตของแฟลชได้เลย ว่ากำลังตายจากเราไปอย่างช้าๆ แล้ว จะเหลืออยู่ก็แค่เว็บฯ ราชการของบ้านเราที่ยังนิยมแสดงเสียงเพลงบนหน้าเว็บฯ พร้อมเทพพนมโปรยดอกไม้ และปุ่ม Skip Intro ไว้ให้กดหนี (ฮาๆ)
เพื่อนสนิทของ HTML5
ถ้าจะให้เปรียบเทียบตัว HTML5 นั้นเหมือนบ้านหนึ่งหลัง ที่มีประตูหน้าต่างพร้อมเข้าอยู่พร้อมใช้งานได้ และอาจจะประดับตกแต่ง เช่น ยกพื้น ทำบันได เคาน์เตอร์ครัวก็พอได้ แต่ก็มีเทคโนโลยีเพื่อนสนิทที่ไปไหนไปกันอีก 2 ตัวนั่นคือ
CSS คือส่วนแสดงผล ที่นักออกแบบสามารถกำหนดสีสัน ตำแหน่ง ลักษณะเวลานำเมาส์ไปแหย่แล้วมีกระต่ายโผล่ออกมาจากโพรง หรือจับก้อนวัตถุในหน้าเว็บฯ ให้ชิดซ้ายชิดขวา
ประดับตกแต่งได้ตามใจ เปรียบเหมือนเฟอร์นิเจอร์หน้าตาดี และสวนสวยๆ ที่อยู่รายล้อมตัวบ้าน ปัจจุบันนี้ CSS ได้พัฒนามาตรฐานมาถึงเวอร์ชั่น 3 แล้ว (เรียกว่า CSS3) และเปิดตัวไล่เลี่ยกับ HTML5 จึงทำงานควบคู่กันได้เป็นอย่างดี
jQuery เป็นชุดคำสั่งยอดนิยมของ JavaScript ซึ่งเป็นภาษาที่ใช้เพิ่มลูกเล่น และทำให้เว็บฯ มีลักษณะเป็น Interactive ทำให้เว็บฯ ไม่แข็งกระด้าง จับคลิกลากวาง พลิกซ้าย-ขวาได้อย่างสนุกสนาน นี่คงคล้ายๆ โฮมเธียเตอร์เจ๋งๆ เอาไว้อวดแขกที่มาเยี่ยมบ้านได้นั่นเอง
HTML5 คือพาหนะที่นำ "เว็บฯ" มาสู่ทุกครัวเรือน
เพราะ HTML5 เป็นภาษามาตรฐาน ที่ไม่ได้มาอย่างชั่วครั้งชั่วคราว แต่อีกห้าปีสิบปียี่สิบปี มันก็ยังแสดงผลได้เหมือนกับวันแรกที่เขียนโค้ดขึ้นมา ดังนั้นนักพัฒนาเว็บฯ จึงสามารถใช้ HTML5 เป็นโครงหลักในการเขียนโปรแกรมได้หลากหลาย แล้วแสดงผลออกมาในอุปกรณ์อะไรก็ได้ที่รองรับ ไม่ว่าจะเป็นโปรแกรมในตัวระบบปฏิบัติการเอง ลองนึกภาพโปรแกรมที่คุณใช้อยู่นี้ ถูกเขียนขึ้นด้วยโค้ดตัวเดียวกันเป๊ะ ทั้งในเครื่องคอมพิวเตอร์และบนเว็บไซต์เลย
ตัวอย่างเช่น ชุดโปรแกรม Google Docs ที่สามารถใช้แทนโปรแกรมออฟฟิศในเครื่องได้เป็นอย่างดี คุณสามารถพิมพ์แก้ไขเอกสารได้ในเบราว์เซอร์ไปพร้อมๆ กับเพื่อนร่วมงานคนอื่นๆ ได้ แล้วบันทึกลงในอากาศโดยไม่ต้องเก็บลงคอมพิวเตอร์เลย หรืออาจจะเป็นเกมออนไลน์ที่เล่นผ่านเว็บฯ แล้วแสดงผลได้ยิ่งใหญ่อลังการสมจริง ทั้งในเบราว์เซอร์คอมพิวเตอร์วางตัก และโทรศัพท์มือถือ แถมยังน่าสนุกก็ตรงที่ทุกวันนี้ อุปกรณ์อิเล็กทรอนิกส์ต่างๆ เริ่มรองรับและใช้ HTML5 ในการทำงานกันบ้างแล้ว ไม่ว่าจะเป็นกล้องดิจิตอล โทรทัศน์ หรือแม้แต่ตู้เย็น ไมโครเวฟ เครื่องซักผ้าก็เริ่มมีแล้วนะ!
หากคุณโทรมาภายใน 10 นาทีนี้
โฆษณาจูงใจมาเสียเยอะ ก็คงพอทำให้คุณผู้อ่านได้รู้จักเทคโนโลยี HTML5 กันมาบ้างพอสมควร ขอย้ำว่ามันไม่ใช่เรื่องของอนาคตหรือไกลตัวคุณอีกต่อไปแล้ว แต่มันคือเทคโนโลยีปัจจุบันที่ต้องก้าวตามให้เท่าทัน เพื่อจะได้ไม่ตกขบวนรถไฟ และเปิดโอกาสให้คุณได้ต่อยอดไปสู่ความสำเร็จอื่นๆ ที่กำลังเดินทางมาพร้อมเทคโนโลยีใหม่ๆ ในไม่ช้า
Note:
- ถ้าบทความนี้มีแต่ตัวอักษรแล้วยังไม่เร้าใจพอ คุณผู้อ่านสามารถคลิกเข้าไปชมตัวอย่างเว็บฯ ที่นำเทคโนโลยี HTML5 มาอวดกันได้ที่ www.html5demos.com และ www.html5rocks.com ครับ
- ดูตัวอย่างงานของเว็บฯ ที่ใช้ HTML5 ได้ที่ www.smashingapps.com/2011/08/24/the-outstanding-use-of-html5-in-web-design-to-grab-your-attention.html
- ภาพโลโก้ของ HTML5 มีทั้งแบบเวกเตอร์ (SVG) และภาพธรรมดา www.w3.org/html/logo/#downloads
Profile นักเขียน
@iannnnn ปรัชญา สิงห์โต
