[HTML5 Tutorial] ทุกอย่างที่คุณควรรู้เกี่ยวกับ HTML5 !! (ตอนที่ 2)
สำหรับท่านที่ไม่ได้อ่านตอนที่ 1 สามารถตามอ่านได้ที่นี่เลยครับ: [HTML5 Tutorial] ทุกอย่างที่คุณควรรู้เกี่ยวกับ HTML5 !! (ตอนที่ 1)
บทความและภาพประกอบบางส่วนนำมาจาก บลอค W3Avenue หากท่านใดชำนาญภาษาอังกฤษ อยากฝึกภาษา ก็สามารถตามลิงค์ไปอ่านบทความต้นฉบับได้เลยครับ
บทความนี้เขียนขึ้นเพื่อแนะนำ HTML5 ให้ผู้ที่ยังไม่เคยใช้มาก่อน รวมถึงสอนการเขียนโค้ด HTML5 เบื้องต้นอีกด้วย หากท่านใดพอจะทราบเรื่อง HTML5 แล้ว ก็จะได้รู้ทิป เทคนิคต่าง ๆ จากบทความนี้ครับ
คราวที่แล้วเราพูดถึงเรื่องการเขียน Semantic Markup ใน HTML5 กันไปแล้ว คราวนี้มาพูดถึง Form (แบบฟอร์มที่กรอก ๆ กันบนหน้าเว็บไซต์นั่นเอง) มาดูกันว่าใน HTML5 ฟอร์มจะเจ๋งขึ้นขนาดไหน
HTML5 Form
ก่อนอื่นต้องขอบอกก่อนว่า ในตอนนี้ (ที่เขียนบทความอยู่) เว็บบราวเซอร์ที่ซัพพอร์ท HTML5 Form ได้ดีที่สุด ก็คือ Opera ครับ เพราะฉะนั้นถ้าอยากเห็นการทำงานจริง ๆ ของมันต้องไป ดาวน์โหลด Opera มาก่อนนะครับ
ความสามารถใหม่ ๆ ของฟอร์ม HTML5
- Input Type แบบใหม่
color, email, date, month, week, time, datetime, datetime-local, number, range, search, tel, และ url - Attribute ใหม่
required, autofocus, pattern, list, autocomplete และ placeholder - Element ใหม่
<keygen>, <datalist>, <output>, <meter> และ <progress>
เนื่องจากว่าบทความนี้อธิบายความสามารถของ HTML5 คร่าว ๆ เลยยังไม่ขอลงรายละเอียดนะครับ เอาไว้โอกาสหน้าจะนำแต่ละตัวมาให้ดูกันแบบละเอียดครับ
เราลองมาดูโค้ดตัวอย่างของการใช้ความสามารถใหม่ ๆ ของ HTML5 กันนะครับ เมื่อแสดงผลในเว็บบราวเซอร์ที่รองรับ HTML5 Form ได้ (ในตอนนี้คือ Opera) ก็จะแสดงผลตามในรูป HTML5 Form Demo Image เลยครับ
ส่วนคนที่อยากลองเทสในบราวเซอร์ตัวเองว่าซัพพอร์ท HTML5 Form ได้ขนาดไหน (ลองเอาไปเปรียบเทียบกับในรูป) ก็เชิญที่ HTML5 Form Demo Page เลยครับ
<form>
<fieldset>
<legend>New Attributes</legend>
<p>
<label>Required:</label>
<input type="text" name="html5requied" required="true">
<small>Works in Opera & Chrome</small>
</p>
<p>
<label>AutoFocus:</label>
<input type="text" name="html5autofocus" autofocus="true">
<small>Works in Opera, Chrome & Safari</small>
</p>
<p>
<label>PlaceHolder:</label>
<input type="text" name="html5placeholder" placeholder="This Will Show in WebKit">
<small>Works in Chrome & Safari</small>
</p>
<p>
<label>Input Pattern:</label>
<input type="text" pattern="[0-9][A-Z]{3}" name="html5pattern" required title="Enter a digit followed by three uppercase letters"/>
<small>Works in Opera & Chrome</small>
</p>
<p>
<label>Multiple Files:</label>
<input type="file" name="html5multiplefileupload" multiple>
<small>Works in Chrome, Safari & Firefox</small>
</p>
<p>
<label>List:</label>
<input type="text" name="html5textwithdatalist" list="colors">
<datalist id="colors">
<option value="Red">
<option value="Green">
<option value="Blue">
</datalist>
<small>Works in Opera</small>
</p>
</fieldset>
<fieldset>
<legend>New Input Types</legend>
<p>
<label>Email:</label>
<input type="email" name="html5email">
<small>Works in Opera</small>
</p>
<p>
<label>URL:</label>
<input type="url" name="html5url">
<small>Works in Opera</small>
</p>
<p>
<label>Number:</label>
<input type="number" name="html5number" min="1" max="10" step="1" value="1">
<small>Works in Opera</small>
</p>
<p>
<label>Range:</label>
<input type="range" name="html5range" min="-100" max="100" value="0" step="10">
<small>Works in Opera, Chrome & Safari</small>
</p>
<p>
<label>Time:</label>
<input type="time" step="900" name="html5time">
<small>Works in Opera</small>
</p>
<p>
<label>Date:</label>
<input type="date" name="html5date">
<small>Works in Opera</small>
</p>
<p>
<label>Month:</label>
<input type="month" name="html5month">
<small>Works in Opera</small>
</p>
<p>
<label>Week:</label>
<input type="week" name="html5week">
<small>Works in Opera</small>
</p>
<p>
<label>DateTime:</label>
<input type="datetime" name="html5datetime">
<small>Works in Opera</small>
</p>
</fieldset>
<div><button>Submit</button></div>
</form>
HTML5 Audio & Video
หลายคนน่าจะเคยได้ยินกันมาบ้างเรื่องการเล่น Video ของ HTML5 ครับ เพราะเป็นที่ถกเถียงกันพอสมควรกับ Adobe Flash ซึ่งข้อดีของ HTML5 Video ที่มีเหนือ Adobe Flash คือ มันรันได้โดยที่ไม่ต้องใช้ปลั๊กอินอะไรเพิ่มเลย และไม่ต้อง embed โค้ดยาว ๆ แค่ใส่แท็ก HTML5 สั้น ๆ ไปก็เรียบร้อย (ส่วนข้อดีของคนดู คือ จะดูดไฟล์ก็ทำได้ง่าย ๆ ไม่ต้องไปพึ่งเว็บ พึ่งโปรแกรมดูด)
หมายเหตุ: ไฟล์เสียง/วีดิโอพวกนี้ใช้ Firefox ก็รันได้นะครับ ไม่ต้องใช้ Opera อย่างเดียวเหมือน HTML5 Form
ก่อนอื่นมาดูกันว่าไฟล์เสียง/วีดิโอนามสกุลไหนบ้างที่ซัพพอร์ทบนเว็บบราวเซอร์:
- ไฟล์เสียง: ogg (ogg, oga), mp3, wav, AAC
- ไฟล์วีดิโอ: ogg (ogv), H.264 (mp4)
เราสามารถตั้งไฟล์ได้มากกว่า 1 นามสกุลในแท็กอันเดียว เพื่อให้บราวเซอร์เลือกไปเล่นไฟล์นามสกุลอื่นกรณีที่ไม่ซัพพอร์ทไฟล์แรกได้อีกด้วย ลองดูตัวอย่างโค้ดสำหรับรันไฟล์เสียงอันนี้:
Audio Player
<audio controls> <source src="demo-audio.ogg" /> <source src="demo-audio.mp3" /> </audio>
จะเห็นได้ชัดว่าโค้ด HTML5 สั้นมาก ๆ และยังรองรับการกำหนดหลายไฟล์อีกด้วย
ด้านบนนี้เป็นรูปนะครับ สามารถเข้าไปดูของจริงบนบราวเซอร์ได้ที่ HTML5 Audio Demo
Video Player
<video width="320" height="240" controls preload="none" poster="videoframe.jpg"> <source src="demo-video.mp4" type="video/mp4" /> <source src="demo-video.ogv" type="video/ogg" /> </video>
โค้ดสำหรับใส่วีดิโอบนหน้าเว็บไซต์ก็ยาวกว่าเล่นเสียงนิดเดียวเอง โดยหน้าตาของมันเวลาเล่นบนเว็บบราวเซอร์จะเป็นแบบนี้
โดยถ้าอยากลองทดสอบของจริงบนเว็บบราวเซอร์ของคุณ ก็ลองแวะไป HTML5 Video Demo ได้เลยครับ
นอกจากจะใช้ตัวเล่นเสียง/วีดิโอแบบปกติที่มากับเว็บบราวเซอร์ เราสามารถใช้ Javascript เพื่อเขียนอินเตอร์เฟซของเราเองได้ด้วยครับ ซึ่งอันนี้เอาไว้พูดถึงตอนเขียนลงรายละเอียดกันอีกทีครับ
HTML5 Graphics with Canvas
นอกจากเรื่องของ HTML5 Video ที่โด่งดังแล้ว ความสามารถในการวาดรูปบน HTML5 ก็เป็นที่พูดถึงไม่แพ้กัน โดยเท่าที่ผมลองไปศึกษามาดูนั้น การวาดรูปใน Canvas ต้องใช้ Javascript วาดอีกที เพราะฉะนั้นควรเขียน Javascript พื้นฐานเป็นนิดหน่อย และมีความรู้เรขาคณิตเบื้องต้นครับ
ข้อดีของ Canvas ก็คือ บราวเซอร์ที่รองรับมีเยอะมากครับ (Firefox 3, Safari 3.1, Chrome 2, และ Opera 9.6) ซึ่งสำหรับ Internet Explorer ที่ไม่รองรับ เราสามารถใช้เทคนิค Javascript ที่เรียกว่า ExplorerCanvas ในการแสดงผลบน IE ได้ครับ
เราลองมาดูตัวอย่างโค้ดการใช้ Canvas กันครับ โค้ดจะยาวสักหน่อยครับ:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>HTML5 Canvas Demo</title>
<link rel="stylesheet" href="html5reset.css" type="text/css" />
<link rel="stylesheet" href="html5simple.css" type="text/css" />
<!--[if lt IE 9]>
<script src="html5.js"></script>
<script src="excanvas.js"></script>
<![endif]-->
<script type="text/javascript">
function draw(){
var canvas = document.getElementById('mycanvas');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
// Draw Rectangle
ctx.fillStyle = "rgb(255,0,0)";
ctx.fillRect (10, 10, 100, 100);
// Draw Circle
ctx.fillStyle = "rgb(0,255,0)";
ctx.beginPath();
ctx.arc(125,100,50,0,Math.PI*2,true);
ctx.fill();
ctx.closePath();
// Draw Custom Shape With Lines
ctx.fillStyle = "rgb(0,0,255)";
ctx.beginPath();
ctx.moveTo(125,100);
ctx.lineTo(175,50);
ctx.lineTo(225,150);
ctx.fill();
ctx.closePath();
// Draw Image From External File
var myImage = new Image();
myImage.onload = function(){
ctx.drawImage(myImage, 220, 10);
}
myImage.src = "sample.jpg";
}
}
</script>
<style type="text/css">
canvas {
border: 5px solid #ccc;
background: #000;
}
</style>
</head>
<body onload="draw();">
<header>
<h1>HTML5 Canvas Demo</h1>
</header>
<figure>
<canvas id="mycanvas" width="300" height="200">Fallback content, in case the browser does not support Canvas.</canvas>
<figcaption>Works in Firefox 3+, Safari 3.1+, Chrome 2+ and Opera 9.6+)</figcaption>
</figure>
</body>
</html>
เวลาแสดงผลจะออกแบบเป็นแบบนี้รูปด้านล่างนี้ครับ
จากโค้ด จะเห็นได้ว่าเราใช้วิธีสร้าง <canvas> ขึ้นมา แล้วเอา Javascript วาดรูปลงไปในแท็ก <canvas> ครับ ใครอยากลองเทสบนบราวเซอร์ตัวเองก็แวะไปที่ HTML5 Canvas Demo นะครับ
สำหรับบทความตอนที่ 2 ก็ขอจบลงแต่เพียงเท่านี้ก่อนครับ หวังว่าจะได้รับความรู้ HTML5 เบื้องต้นกันไป และสามารถไปศึกษาเพิ่มเติมตามเรื่องที่สนใจได้เลยครับ :)
สงสัย หรือมีความคิดเห็นอะไร เชิญโพสได้ตามสะดวกเลยนะครับ หรือถ้าใครชอบก็รบกวนกด Retweet เพื่อเผยแพร่บทความให้ด้วยครับ ขอบคุณมากครับผม
* สำหรับท่านที่เป็นมือใหม่ และต้องการเรียนรู้ HTML5 และ CSS3 แบบรวดเร็ว และเข้าใจง่าย ขณะนี้ทาง Designil School ยินดีมอบส่วนลด คอร์สวีดิโอ Basic HTML5 & CSS3 ให้ท่านที่อ่านบทความนี้ในเดือนนี้ครับ สามารถคลิก รับส่วนลดคอร์ส 15% ได้เลย
