HTML5 ทำอะไรได้บ้าง?

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

 

ด้านโครงสร้าง

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

ส่วนประกาศโครงสร้างเอกสารที่เปลี่ยนให้สั้นลงเหลือ
<!DOCTYPE html>

Tag ใหม่สำหรับควบคุมโครงสร้าง และเลย์เอาท์ของเอกสาร เช่น

blog03-02

<header> แสดงส่วนหัวของเว็บ
<nav> แสดงเนวิเกตพวกลิงค์ หรือเมนู
<article> แสดงเนื้อหาของเว็บ
<section> แสดงเนื้อหาย่อย
<figure> แสดงส่วนของรูปภาพ
<aside> แสดงไซด์บาร์ด้านข้าง
<dialog> แสดงไดอะลอกบ๊อกซ์
<footer> แสดงส่วนล่างของเว็บ

 

ซึ่งถ้าใครทำเว็บตั้งแต่ยุคแรกๆ น่าจะเคยจัดหน้าเว็บด้วย <table> แบบ border 0px ซึ่งค่อนข้างมีปัญหากับข้อมูลภาษาไทย เพราะมันไม่ตัดบรรทัดให้และข้อมูลล้นจนทำให้เว็บดูไม่สวยงาม พอผ่านมาอีกยุคคือการใช้ <div id=”xxx”>…</div> แล้วใช้ CSS มาช่วยจัดทำให้ลดปัญหาการ overflow ของข้อมูลไปได้
แต่วัตถุประสงค์ของ Tag ที่เพิ่มเข้ามาใหม่นี่จะเน้นให้การกรองข้อมูลเอาไปใช้งานด้วย bot ทำได้ง่ายขึ้น ส่วนการใช้งานและการควบคุมยังคงเหมือนกับการใช้ <div> ครับ

Attribute ใหม่ที่ช่วยให้ฟอร์มน่าใช้มากขึ้น

<input placeholder=”คำอธิบาย”/>
<input required=”กำหนดให้เป็น require field”/>
<input pattern=”regexp สำหรับกรองรูปแบบ”/>blog03-03

Input Type ใหม่ๆ ที่ทำขึ้นมาเฉพาะเจาะจงมากชึ้น

<input type=”xxx”/>  : time, date, datetime, week, month, email, url,
search, color, number

<datalist> ที่มาทำให้  select/option  เดิมๆ ดูใช้ได้ง่ายขึ้น

<input list="browsers">

<datalist id="browsers">
     <option value="Internet Explorer">
     <option value="Firefox">
     <option value="Chrome">
     <option value="Opera">
     <option value="Safari">
 </datalist>

ด้านมัลติมิเดีย

มีการปรับให้รองรับข้อมูลภาพและเสียงที่นิยมใช้กันในยุคปัจจุบันเพราะแต่ก่อนเสียงรองรับแต่ .wav ซึ่งมีข้อเสียคือขนาดมันใหญ่ ส่วน .midi ก็มีแค่ทำนอง ส่วนของวิดีโอนั้นแต่ก่อนถ้าจะทำให้เปิดได้ผ่านเว็บต้องลง plugin ของ flash shockwave หรือเรียกผ่าน Tag <embded>

<video src=”….”></video>  รองรับไฟล์ .mp4, .ogg ซึ่งมีขนาดเล็กและเป็นที่นิยมในปัจจุบัน

<video width="320" height="240" controls>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
     Your browser does not support the video tag.
 </video>

<audio src=”…”></audio> รองรับไฟล์ .mp3 , .ogg ซึ่งเป็นไฟล์เพลงที่เราใช้เปิดกับพวกเครื่องเล่นนั่นเอง

<audio controls>
     <source src="horse.ogg" type="audio/ogg">
     <source src="horse.mp3" type="audio/mpeg">
     Your browser does not support the audio tag.
 </audio>

ส่วนใครที่ต้องการแนบวิดีโอของ Youtube เดี๋ยวนี้ก็สามารถทำได้ง่ายผ่าน iframe โดยทาง Youtube ได้เพิ่ม URL พิเศษสำหรับเข้าถึงวิดีโอแบบ HTML5

<iframe width="420" height="315"
        src="http://www.youtube.com/embed/xGSy3_Czz8k?autoplay=1">
 </iframe>

ส่วนของเอนิเมชันและการวาดกราฟ ซึ่งแต่ก่อนเราเคยใช้ Flash เดี๋ยวนี้สามารถทดแทนด้วย <canvas>…</canvas> ได้ทั้งหมดแล้ว อีกเหตุผลหนึ่งที่เราต้องรีบเปลี่ยนมาใช้ canvas เพราะ iOS และ browser หลายๆเจ้าเริ่มออกมาประกาศหยุดรองรับ Flash โดยเฉพาะพวกแผ่นป้ายโฆษณา

<!DOCTYPE html>
<html>
  <body>
   <canvas id="myCanvas">
       Your browser does not support the HTML5 canvas tag.
   </canvas>

   <script>
             var c = document.getElementById("myCanvas");
             var ctx = c.getContext("2d");
             ctx.fillStyle = "#FF0000";
             ctx.fillRect(0, 0, 80, 100);
    </script>
  </body>
 </html>

มีนักพัฒนาใจดีหลายกลุ่ม ที่ได้พัฒนา library สำหรับการแสดงผลกราฟด้วย Canvas ใน HTML5 ที่น่าใช้และฟรีคือ Chart.js และยังมีตัวอื่นๆลองค้นใน Google ด้วยคำว่า “HTML5 free Charts”

blog03-06

นอกจากการใช้งานในด้านการแสดงผลกราฟฟิก เอนิเมชัน แล้วยังมีการนำ canvas มาใช้ในการเขียนเกมส์ และว่างขายใน Amazon รวมถึงการทำเป็น Hybrid Mobile Game โดยเขียนครั้งเดียวเล่นได้ทั้ง iOS,  Android, และ Windows Phone (แต่ควรเป็นเกมส์แบบ 2D ที่ใช้งานกราฟฟิคไม่หนักมาก เพราะสุดท้ายยังไงการรับผ่าน browser ก็ยังช้ากว่าการเขียนแบบ Native อยู่ดี)

blog03-04

ด้านการจัดเก็บข้อมูล

แต่ก่อนการเก็บข้อมูลไว้ที่ฝั่งของ browser จะใช้วิธีเก็บใน cookie ซึ่งค่อนข้างจำกัดทั้งการเข้าถึงและพื้นที่ในการจัดเก็บ รวมถึงจะใช้งานก็ต้องเปลืองโค้ดอยู่หลายบรรทัด ทางกลุ่มที่ร่วมออกแบบ HTML5 ก็ไม่ได้นิ่งนอนใจ เลยออกมาตรฐานให้ browser ที่จะรองรับ HTML5 ต้องปรับปรุง engine และเพิ่มคำสั่ง Java Script ให้รองรับวิธีจัดเก็บข้อมูลที่สะดวกสบายมากขึ้น

sessionStorage  ใช้ในการเก็บข้อมูลที่ต้องการให้คงอยู่ตั้งแต่เปิด browser จนถึงปิด browser  เหมาะสำหรับเก็บพวกรายการสินค้าที่เลือก ทำตะกร้าสินค้าเป็นต้น

if (sessionStorage.clickcount) {
      sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
 } else {
     sessionStorage.clickcount = 1;
 }
     document.getElementById("result").innerHTML = "You have clicked the           button " + sessionStorage.clickcount + " time(s) in this session.";

localStorage  ใช้เก็บข้อมุลแบบถาวร ถึงแม้ปิดเครื่องไป แล้วเปิดใหม่ก็จะยังอยู่ เหมือนกับ cookies  แต่ใช้ง่ายกว่าเยอะ เหมาะกับการเก็บข้อมูลที่ผู้ใช้ต้องการเรียกอีกคร้ังในอนาคตเช่น Favorite item เป็นต้น

// Store
 localStorage.setItem("lastname", "Smith");
 // Retrieve
 document.getElementById("result").innerHTML =    localStorage.getItem("lastname");

blog03-05

webSQL และ indexDB เป็นการเก็บข้อมูลในรูปแบบฐานข้อมูลขนาดย่อม (เบื้องหลังใช้ SQLite ในการเก็บ) สามารถเขียนคิวรี่และใช้คำสั่ง select, insert, update, delete ได้เหมือนฐานข้อมูลทั่วไป ต่างกันที่ตัวนี้เก็บอยู่ที่ browser เลยซึ่งทำให้ไม่จำเป็นต้องต่อ internet ขณะใช้งานและการทำงานเร็วมาก

<script type="text/javascript">
 var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
 var msg;

 db.transaction(function (tx) {
    tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
    tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "foobar")');
    tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "logmsg")');
    msg = '<p>Log message created and row inserted.</p>';
                document.querySelector('#status').innerHTML = msg;
  });

 db.transaction(function (tx) {
     tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) {
     var len = results.rows.length, i;
     msg = "<p>Found rows: " + len + "</p>";
     document.querySelector('#status').innerHTML += msg;

     for (i = 0; i < len; i++){
        msg = "<p><b>" + results.rows.item(i).log + "</b></p>";
       document.querySelector('#status').innerHTML += msg;
     }
  }, null);
  });

 </script>

ตัวนี้ผมเอามาใช้ในการเขียนพวกโปรแกรมที่ไม่ต้องการเชื่อมต่อกับ Server ตลอดเวลาโดยดูข้อมล (sync) มาไว้ใน webSQL ก่อนแล้วสามารถปิดการใช้งาน internet ได้เลย ใครสนใจลองดู  library ของ JayData ครับใช้ง่าย ปิดงานไว ^_^

 ด้านการแสดงผล

ตัว HTML5 เองถูกปรับปรุ่งขึ้นมาในยุคของ Responsive Web และยุคที่ต้องแสดงผลในหน้าจอหลากหลายขนาด และหลายแพลตฟอร์ม ทำให้การแสดงผลต่างๆ จะใช้ความสามารถของผู้ช่วยอย่าง CSS3 เข้ามาช่วย ที่เราจะได้ใช้กันบ่อยๆคือ

@fontface  ใช้ในการฝังฟอนต์ที่เราใช้ในหน้าเว็บซึ่งอาจจะไม่มีในเครื่องของผู้ใช้ โดยวิธีนี้จะเป็นการรวม ฟอนต์นั้นๆไปก้บเว็บเลยทำให้สามารถรับประกันการแสดงผลที่ถูกต้องในทุกอุปกรณ์

<style> 
    @font-face {
       font-family: myFirstFont;
      src: url(sansation_light.woff);
    }

    div {
      font-family: myFirstFont;
    }
 </style>

@media   ใช้ในการกรอง และตรวจจับขนาดของหน้าจอ เพื่อที่เราจะได้ปรับโค้ดของ CSS ให้เหมาะสมกับหน้าจอแต่ละขนาด ซึ่งจำเป็นมากสำหรับการเขียนเว็บในรูปแบบ Responsive

@media screen and (max-width: 300px) {
     body {
        background-color: lightblue;
     }
 }
@media not|only mediatype and (media feature) {
      CSS-Code;
 }
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">
<link media="screen"
  href="/path/to/global.css" type="text/css" rel="stylesheet"/>
 
 <link media="only screen and (max-width: 320px)"
  href="/path/to/touch.css" type="text/css" rel="stylesheet"/>
 
 <link media="only screen and (max-width: 1024px)"
  href="/path/to/tablet.css" type="text/css" rel="stylesheet"/>
 
 <link media="handheld"
  href="/path/to/mobile.css" type="text/css" rel="stylesheet"/>

ใครสนใจเนื้อหาอื่นๆ เพิ่มเติมดูได้ที่
Reference: http://www.w3schools.com/

บทสรุป

หวังว่าท่านผู้อ่านคงได้ข้อมูลพื้นฐานเกี่ยวกับ HTML5 และสามารถนำไปประยุกต์ใช้ต่อยอดในงานต่อได้ อย่างไรก็ตามถึงแม้ว่าเราจะมีพวก plug-in , framework หรือ component สำเร็จรูปให้ใช้ หากขาดซึ่งพื้นฐานก็ไม่สามารถปรับแต่งและใช้งานสิ่งเหล่านั้นได้อย่างเต็มประสิทธิภาพ ในครั้งหน้าผมจะมาเล่าฟีเจอร์ของ CSS3 ที่เราต้องได้ใช้กันบ่อยๆ เพื่อเตรียมความพร้อมก่อนไปเขียน Hybrid Mobile Application กันโปรดติดตามตอนต่อไปนะครับ ^_^

AjBee.Me : กดแชร์กันได้ตามสบาย ไม่หวงครับ