แนะนำให้คุณรู้จัก HTML5 ด้วยภาษาและความเข้าใจแบบง่ายๆ ก็พอจะเรียกได้ว่า ถ้าอ่านจบต้องรู้บ้างแหละ มีข้อซักถามส่งอีเมล์มาได้ที่ wihtoon@bizpotential.com ครับ

1. HTML5
แนะนำ HTML5
แบบอ่ำนจบต้องรู้บ้ำงแหละ
โดย
วิทูร หวังสงวนกิจ
บริษัท บิซโพเทนเชียล จำกัด
http://www.bizpotential.com

2. บริษัท บิซโพเทนเชียล จำกัด

3. ยินดีต้อนรับสู่โลกแห่งควำมคิดสร้ำงสรรค์

4. รู้จักกับบิซโพเทนเชียล
• ก่อตั้งปี 2000
• ทีมงำน 60 คน
“เราสร้างสรรค์และพ ัฒนานว ัตกรรมใหม่ๆ
่ั
ทางด้านเว็บเบสแอปพลิเคชนเพือตอบสนอง
่
ความต้องการทีแท้จริงของลูกค้า”
่

5. เรำจะเรียนรู้อะไรกันเกี่ยวกับ HTML5
• รู้จักกับ Web Applications / Web Apps
• HTML5 คืออะไร
• มีอะไรใหม่ใน HTML5
• แนวโน้มกำรใช้งำนและกำรสนับสนุนมำตรฐำน HTML5
• กำรทดสอบกำรรองรับ HTML5 ด้วยตัวคุณเอง
• HTML5 กับอุปกรณ์ Mobile

6. Web Applications / Web Apps
• โปรแกรมที่ทำงำนบนฝั่งเซิร์ฟเวอร์ เรียกว่ำ Web Server (Server Side)
• เข้ำไปใช้งำนโปรแกรมโดยโปรแกรม Web Browser เช่น Internet
Explorer, Firefox, Chrome, Safari เรียกว่ำ Client Side
• ฝั่ง Client ไม่ต้องติดตั้งโปรแกรมเพิ่มเติม สำมำรถเข้ำใช้งำนได้ทันทีโดย
พิมพ์ URL ของโปรแกรมนั้นๆ เช่น http://www.facebook.com
• ข้อมูลทุกอย่ำงจะเก็บอยู่ที่ Server Side เป็นหลัก (Remote Storage)
• เวลำใช้ต้องต่ออินเทอร์เน็ต (ส่วนใหญ่)
• พัฒนำโดยใช้ HTML/CSS/JavaScript แต่ต้องมีพวกภำษำ Script เข้ำ
ช่วยเช่น PHP และ ASP (หรืออื่นๆ)

7. Native Application
• ต้อง Load โปรแกรมมำติดตั้งที่เครื่อง Smart Phone ผ่ำน Apps
Store / Google Play / MarketPlace / Ovi
• ทำงำนได้เร็ว และเขียนโปรแกรมที่ซับซ้อนได้

8. กำรพัฒนำ Web Applications
เมื่อก่อนและปัจจุบัน ปัจจุบันและอนำคต
Web Application Web Apps
อุปกรณ์ Mobile (Smart
เครื่อง Desktop (PC/Mac) Phone/Tablet
โปรแกรม Browser บน
iOS/Android/Windows
โปรแกรม Browser (IE/Firefox) Mobile/Others

9. ก่อนจะรู้ว่ำ HTML5 คืออะไร
• HTML คืออะไร
– ย่อมำจำก “HyperText Markup Language”
– ภำษำคอมพิวเตอร์ที่ใช้สั่งให้แสดง “ข้อมูลหรือเนื้อหำ” (Content) บนหน้ำ
เว็บเพจ
– ทุกหน้ำเว็บเพจบนอินเทอร์เน็ตจะต้องมีภำษำ HTML อยู่

10. HTML5 คืออะไร
• ภำษำ HTML เวอร์ชั่นใหม่ล่ำสุด แต่ยังไม่เป็น Final Version
• มีคุณสมบัติเพิ่มขึ้นจำก HTML เดิม ทำให้เขียน HTML ง่ำยขึ้น
• สนับสนุนกำรแสดงผลบนอุปกรณ์ต่ำงๆ ได้เช่น PC, Mac, iPhone,
iPad, Android Phone หรือ Tablet เป็นต้น
• เพิ่มลูกเล่นในกำรทำงำน เช่น ทำงำนกับระบบแผนที่, สร้ำงภำพกรำฟิก
โดยไม่ต้องมี Flash ฯลฯ
• เน้นกำรใช้งำนร่วมกับ CSS (Cascading Style Sheets) และ
JavaScript
• ทำงำนกับภำษำที่ใช้พัฒนำ Web Application เช่น PHP หรือ ASP ได้
อย่ำงมีประสิทธิภำพเพิ่มขึ้น

11. หน่วยงำนที่กำหนดมำตรฐำน HTML5
• มี 2 หน่วยงำนหลักคือ WHATWG (Web Hypertext Application
Technology Working Group) และ W3C (World Wide Web
Consortium)
• WHATWG เริ่มกำหนดมำตรฐำนมำตั้งแต่ปี 2004
• ในปี 2007 W3C เริ่มใช้มำตรฐำน HTML5 ที่ WHATWG กำหนดไว้ก่อนแล้ว
• 2 องค์กรทำงำนร่วมกัน แต่มำตรฐำนไม่เหมือนกันทั้งหมด
• W3C ต้องกำรมำตรฐำน HTML5 ที่เป็นเอกสำรที่กำหนดสำเร็จไปเลย (แต่ก็ยังไม่
เสร็จ)
• WHATWG ต้องกำรให้มำตรฐำน HTML5 มีกำรเปลี่ยนแปลงอย่ำงเสมอตำม
สถำนะกำรณ์ และควำมต้องกำรทำงเทคโนโลยี

12. มำตรฐำน HTML5 จะจบลงที่ใด
• คำตอบ คือ “ยังไม่รู้”
• แต่ อุปกรณ์ และ Browser ต่ำงๆ ก็เริ่มสนับสนุนกันไปแล้ว
แม้ว่ำมำตรฐำน HTML5 ยังไม่ลงตัวก็ตำม
• ผู้พัฒนำ สำมำรถเริ่มศึกษำและพัฒนำได้ เพรำะมีกำรรองรับ
เพิ่มขึ้น

13. ข้อดีของ HTML5
• รองรับอุปกรณ์หลำกหลำยทั้ง Desktop PC, Mac และ Mobile เช่น Smart
Phone, Tablet
• แสดงภำพ เสียง หรือกรำฟิกอนิเมชั่นต่ำงๆ โดยไม่ต้องติดตั้งซอฟท์แวร์เพิ่มเติม
• สำมำรถพัฒนำโปรแกรมได้เหมือนกับโปรแกรมที่ใช้งำนทั่วไป ไม่ใช่เพียงแค่สร้ำง
หน้ำเว็บเพจแสดงข้อมูลอย่ำงเดียว
• เขียนโปรแกรมง่ำยยิ่งขึ้น โดยเฉพำะบน Mobile ไม่ต้องพัฒนำในลักษณะ
Native Apps และไม่ต้องนำโปรแกรมขึ้น App Store หรือ Google Play
• เขียนโปรแกรมได้อย่ำงมีประสิทธิภำพ เพรำะรองรับกำรติดต่อเพื่อเรียกใช้งำน
คุณสมบัติต่ำงๆ ของอุปกรณ์โดยเฉพำะ Mobile ได้ เช่นเรียกใช้งำนระบบ GPS
(แผนที)่

14. CSS3 คืออะไร
• หำก HTML ใช้ในกำรแสดง “ข้อมูลหรือเนื้อหำ” บนหน้ำเว็บเพจ
CSS คือตัวที่กำหนด “รูปแบบและลูกเล่น” ในกำรแสดง “เนื้อหำ”
– HTML แสดง “เนื้อหำ”
– CSS ทำให้ “เนื้อหำ” สวย และมีลูกเล่นมำกขึ้น
• CSS กำหนดควำมสวยงำม เช่น ขนำด (ตัวอักษร), สี, กำรจัดวำง,
ขอบ (Border) และอื่นๆ อีกมำกมำย
• CSS3 คือเวอร์ชั่นใหม่ล่ำสุดของ CSS
• เป็นคู่หูของ HTML5
• เรียกใช้โดยคำสั่งง่ำยๆ
<link rel="stylesheet" type="text/css" href="mystyle.css" />
• หรือสำมำรถเขียนแทรกเข้ำไปใน HTML ได้เลย แต่ใน HTML5 เน้น
ให้สร้ำงไฟล์ CSS ต่ำงหำก

15. กำรทำงำนของ HTML5
mypage.html
2 เว็บเพจแสดง “ข้อมูลหรือ
เนื้อหำ” ตำมที่เขียนไว้ด้วยภำษำ
HTML5 HTML5
<HTML>
<HEAD>
<TITLE>my first web page</TITLE>
</HEAD> This is my web site
<BODY>
<h1>This is my web site.</h1> 1 ผู้ชมเข้ำดูเว็บเพจผ่ำนอินเทอร์เน็ต
</body>
</HTML>

16. กำรทำงำนของ HTML5 กับ CSS3
mypage.html
2 เว็บเพจแสดง “ข้อมูลหรือเนื้อหำ”
HTML5 ตำมที่เขียนไว้ด้วยภำษำ HTML5 ซึ่งจะ
แสดงในรูปแบบที่กำหนดด้วย CSS3 ที่
<HTML>
<HEAD> Link เข้ำมำ
<TITLE>my first web page</TITLE>
<link rel="stylesheet"
type="text/css" This is my web site
href="mystyle.css" />
</HEAD>
<BODY> 1 ผู้ชมเข้ำดูเว็บเพจผ่ำนอินเทอร์เน็ต
<h1> This is my web site. </h1>
</body>
</HTML>
CSS3 mystyle.css
h1
{text-shadow: 5px 5px 5px
#FF0000;}

17. ข้อดีของ CSS3
• กำหนดรูปแบบที่ต้องกำรแสดงผลจำกที่เดียว เว็บเพจทุกหน้ำสำมำรถ
เรียกรูปแบบมำตรฐำนได้จำกไฟล์ CSS เพียงไฟล์เดียว
• บริหำรจัดกำรในกำรเขียนโปรแกรมได้ง่ำยกว่ำ
• มีลูกเล่นเพิ่มขึ้นจำก CSS เวอร์ชั่นเดิม
• สำมำรถมีไฟล์ CSS ได้มำกกว่ำหนึ่งไฟล์ และหน้ำเว็บเพจก็สำมำรถ
เรียกได้ใช้งำนไฟล์ CSS ได้มำกกว่ำหนึ่งไฟล์เช่นกัน

18. JavaScript คืออะไร
• JavaScript เป็นภำษำที่ทำงำนร่วมกับ HTML
• ลูกเล่นต่ำงๆ ของ HTML5 จะสำมำรถเรียกใช้ได้อย่ำงมีประสิทธิภำพด้วย
JavaScript
• HTML5 = เนื้อหำ (นิ่งๆ) + CSS3 = รูปแบบ (สวยๆ)
JavaScript = สั่งให้ประมวลผล (สร้ำงควำม Dynamic ให้กับเนื้อหำ)
• เรียกใช้โดยคำสั่งง่ำยๆ คือ
<script language="javascript" type="text/javascript“ src="../scripts/example.js"></script>
• สำมำรถเขียนแทรกเข้ำไปใน HTML ได้เลย แต่ใน HTML5 เน้นให้สร้ำงไฟล์
JS ต่ำงหำก

19. ข้อดีของ JavaScript
• เขียนโปรแกรมที่มีควำมซับซ้อน เช่น
– สร้ำง และเรียกดูฐำนข้อมูล เช่น ระบบกำรสมัครเป็นสมำชิก และประวัติกำร
เรียน เป็นต้น
– ติดต่อเรียกข้อมูลจำกเครื่องแม่ข่ำย เช่น เรียกระบบกำรเรียนผ่ำนอุปกรณ์
Mobile ก็อำจจะเรียกข้อมูลบทเรียนใหม่ๆ
– เชื่อมโยงระบบแผนที่ของอุปกรณ์ Mobile เพื่อเรียกดูตำแหน่ง
– จัดเก็บข้อมูลที่อุปกรณ์ Mobile แบบ Local ทำให้ไม่ต้องเข้ำอินเทอร์เน็ตทุก
ครั้งที่ใช้งำน
– เขียนควบคุมกำรทำงำนของปุ่ม เช่น ปุ่มบังคับกำรเคลื่อนไหวของตัวละครใน
เกม เป็นต้น

20. กำรทำงำนของ HTML5/CSS3 และ JavaScript
mypage.html
2 เว็บเพจแสดง “ข้อมูลหรือเนื้อหำ”
HTML5 ตำมที่เขียนไว้ด้วยภำษำ HTML5 ซึ่งจะ
แสดงในรูปแบบที่กำหนดด้วย CSS3 ที่
<HTML>
<HEAD> Link เข้ำมำ
<TITLE>my first web page</TITLE>
<script type="text/javascript“
src="myscript.js"></script>
<link rel="stylesheet" type="text/css" href="mystyle.css"
/>
This is my web site
</HEAD>
<BODY>
<h1> This is my web site. </h1>
</body>
1 ผู้ชมเข้ำดูเว็บเพจผ่ำนอินเทอร์เน็ต
</HTML>
CSS3 JavaScript
mystyle.css myscript.js

21. ข้อจำกัดของ HTML5
• แต่ละคุณสมบัติยังมิได้มีกำรสนับสนุนจำกทุก Browser และ
อุปกรณ์ Mobile
• ยังไม่ประกำศเป็นมำตรฐำนที่กำหนดเสร็จสิ้นแล้ว
• กำรใช้ในรูปแบบ Offline (ไม่ได้ต่ออินเทอร์เน็ต) จะต้องมีกำร
เขียนโปรแกรมเพิ่มเติม

22. HTML5 เขียนอย่ำงไร
• ในเวอร์ ชนก่อนหน้ าเราจะเขียนว่า HTML 4 แต่ในเวอร์ ชน 5 รูปแบบ
ั่ ั่
การเขียนที่เป็ นทางการคือ HTML5 เลข 5 จะติดกับคาว่า HTML

23. HTML5 แสดงผลได้บนทุกอุปกรณ์
• Desktop Browser (PC/Mac)
– Internet Explorer, Safari, Firefox, Chrome, Opera เป็นต้น
• Smart Phone
– iPhone (iOS), Android Phone, BB เป็นต้น
• Tablet
– iPad (iOS), Android Tablet, RIM Playbook เป็นต้น
• อื่นๆ เช่น อุปกรณ์เล่นเกม (Game Console), โทรทัศน์รุ่น
ใหม่ (Smart TV)

24. HTML5 แสดงผลได้บนทุกอุปกรณ์.... แต่
• แต่ยังไม่ 100% บนทุกอุปกรณ์
• HTML5 คือชุดคำสั่งในกำรแสดงผลบนหน้ำจออุปกรณ์ต่ำงๆ
ซึ่งอุปกรณ์ต่ำงๆ ที่กล่ำวถึง ไม่ว่ำจะเป็นบน PC, Mac, Smart
Phone หรือ Tablet ล้วนแล้วแต่ยังไม่สนับสนุนทุกชุดคำสั่ง
ของ HTML5 (สนับสนุนเป็นบำงคำสั่ง)
• กำรพัฒนำจะต้องดูด้วยว่ำชุดคำสั่งใดให้กำรสนับสนุนแล้วโดย
อุปกรณ์ หรือ Browser ส่วนใหญ่ และชุดคำสั่งใดยังให้กำร
สนับสนุนน้อยอยู่

25. มีอะไรใหม่ใน HTML5
• Canvas: ไดนำมิกกรำฟิกบนหน้ำเว็บเพจ
• Geolocation: บอกตำแหน่งผู้ใช้งำน
• Form: สร้ำงแบบฟอร์มออนไลน์ง่ำยยิ่งขึ้น
• Local Storage: เก็บข้อมูล หรือฐำนข้อมูล (WebSQL) ได้ที่
คอมพิวเตอร์ของผู้ใช้งำน
• Media Player: เล่นวีดีโอและเสียงได้อย่ำงง่ำยดำย
• Semantics: สร้ำงควำมหมำยให้ข้อมูล

26. คุณสมบัติอย่ำงเป็นทำงกำรของ HTML5 โดย W3C
Class: 3D, Graphics & Effects
SVG, Canvas, WebGL, CSS3 3D ช่วย
ให้คุณสำมำรถสร้ำงหน้ำเว็บเพจบนหน้ำ
เครื่อง Desktop หรือ Mobile ได้อย่ำง
หน้ำตื่นตำตื่นใจ

27. ตัวอย่ำงกำรใช้งำน SVG
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
<polygon points="100,10 40,180 190,60 10,60 160,180"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;">
</svg>
โปรแกรมนี้วำดเป็นรูปดำว

28. Canvas: ไดนำมิกกรำฟิกบนหน้ำเว็บเพจ
• Canvas ช่วยให้นักพัฒนำสำมำรถสร้ำงภำพกรำฟิก และอนิ
เมชั่นในรูปแบบต่ำงๆ ได้โดยไม่ต้องใช้ Flash ทำให้ผู้ใช้งำนไม่
จำเป็นต้องติดตั้งโปรแกรม Flash Player
• สำมำรถสร้ำงให้กรำฟิกในรูปแบบที่มีกำรตอบโต้
(Interaction) เช่นปุ่มบังคับต่ำงๆ โดยใช้ JavaScript เข้ำ
ช่วย
• อุปกรณ์ iOS Device ของ Apple คือ iPhone และ iPad ไม่
รองรับ Flash แต่รองรับ HTML5

29. ตัวอย่ำงกำรใช้งำน Canvas
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Create gradient โปรแกรมนี้วำดเป็นรูป
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red"); สี่เหลี่ยมไล่สี
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);
</script>

30. ตัวอย่ำงกำรใช้งำน Drag & Drop
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}

31. ตัวอย่ำงกำรใช้งำน WebGL
WebGL เป็นคุณสมบัติในกำรจัดกำรเกี่ยวกับภำพ และ 3D ที่มีควำม
ซับซ้อนมำกยิ่งขึ้น
กำรเปลี่ยนสีของภำพถ่ำย

32. ตัวอย่ำงกำรใช้งำน CSS3 3D

33. คุณสมบัติอย่ำงเป็นทำงกำรของ HTML5 โดย W3C
Class: Connectivity
เสริมประสิทธิภำพและควำมเร็วด้ำนกำร
เชื่อมต่อ (Web Sockets and Server-
Sent Events) กับเครื่องแม่ข่ำยผ่ำน
อินเทอร์เน็ต ทำให้สำมำรถสร้ำงโปรแกรม
ประเภทออนไลน์เกมส์ ระบบกำรเรียนรู้
ผ่ำนอินเทอร์เน็ต (E-Learning) ระบบกำร
สื่อสำรแบบออนไลน์ (Chat) กำรเรียกดู
ข้อมูลแบบ Real-Time

34. ตัวอย่ำงกำรใช้งำน WebSockets
เป็นกำรเขียนโปรแกรมที่ Chat ระหว่ำงกัน

35. คุณสมบัติอย่ำงเป็นทำงกำรของ HTML5 โดย W3C
Class: Device Access
ช่วยให้กำรเขียนโปรแกรมเพื่อเข้ำถึง
คุณสมบัติต่ำงๆ ของอุปกรณ์ Mobile เช่น
แผนที่ (Geolocation) กล้องถ่ำยรูป
ไมโครโฟน หรือข้อมูลเช่น รำยชื่อ
(Contact) ทำได้ง่ำยและรวดเร็วยิ่งขึน
้

36. ตัวอย่ำงกำรใช้งำนกับแผนที่

37. ตัวอย่ำงกำรใช้งำนกับกล้อง

38. คุณสมบัติอย่ำงเป็นทำงกำรของ HTML5 โดย W3C
Class: Multimedia
เรียกไฟล์วีดีโอ หรือเสียงให้แสดงด้วยกำร
เขียนโปรแกรมเพียงไม่กี่บรรทัด

39. Multimedia: เล่นวีดีโอและเสียงได้อย่ำงง่ำยดำย
• เป็นคุณสมบัติที่เด่น และจับต้องได้มากที่สุด
• อุปกรณ์ iPhone/iPad ไม่สามารถเล่น Flash ได้ แต่อาศัยการเล่นไฟล์
เสียงและวีดีโอ ตลอดจนภาพอนิเมชั่นต่างๆ ด้วย HTML5

40. ฟอร์แมทที่สนับสนุนด้ำนเสียงของ HTML5

41. ตัวอย่ำง Code HTML5 ในกำรใส่เสียงที่หน้ำเว็บ
<audio controls="controls">
<source src=“testsound.ogg" type="audio/ogg">
<source src=“testsound.mp3" type="audio/mpeg">
Browser ของคุณไม่สนับสนุนการเล่นไฟล์เสียงด้วย HTML5
</audio>

42. ตัวอย่ำงกำรเล่นไฟล์เสียง

43. ฟอร์แมทที่สนับสนุนด้ำนวิดีโอของ HTML5

44. ตัวอย่ำง Code HTML5 ในกำรใส่วิดีโอที่หน้ำเว็บ
<video width="300" height="250" controls="controls">
<source src=“testmovie.mp4" type="video/mp4">
<source src=“testmovie.ogg" type="video/ogg">
Browser ของคุณไม่สนับสนุนการเล่นไฟล์วีดีโอด้วย HTML5
</video>

45. ตัวอย่ำงกำรแสดงวีดีโอ

46. คุณสมบัติอย่ำงเป็นทำงกำรของ HTML5 โดย W3C
Class: Offline & Storage
HTML5 ทำให้นักพัฒนำสำมำรถเก็บข้อมูล
กำรใช้งำนโปรแกรม หรือฐำนข้อมูลที่
จำเป็นไว้ที่อุปกรณ์ได้ ทำให้เวลำใช้งำนไม่
จำเป็นที่จะต้องต่ออินเทอร์เน็ตเสมอไป
เทคโนโลยีที่สำคัญได้แก่ HTML5 App
Cache, Local Storage, Indexed DB
และ File API

47. ตัวอย่ำงกำรใช้งำน Local Storage
เมื่อออกจำกเว็บไซต์แล้ว เข้ำมำใหม่ มำคลิกที่ปุ่มต่อ เลขก็จะต่อไปเลย
ระบบจำเลขล่ำสุดไว้ใน Local Storage

48. รู้จักกับ IndexedDB
• IndexedDB เป็นแนวคิดเรื่องกำรจัดเก็บข้อมูลลงฐำนข้อมูลในฝั่งผู้ใช้งำน
(Client Side) ทำให้โปรแกรมแบบ Web Application สำมำรถทำงำนบน
Desktop หรือ Mobile ได้โดยไม่ต้องต่ออินเทอร์เน็ต (Offline)
mydb.indexedDB.db = null;
mydb.indexedDB.open = function() {
var request = indexedDB.open("todos");
request.onsuccess = function(e) {
mydb.indexedDB.db = e.target.result; };
request.onfailure = mydb.indexedDB.onerror; };
ตัวอย่ำงโปรแกรมในกำรเปิด Database

49. ตัวอย่ำงกำรใช้งำนฐำนข้อมูลด้วย HTML5
บันทึกข้อมูลลงฐำนข้อมูลฝั่ง Client ด้วย indexedDB

50. แนวโน้มกำรสนับสนุน Offline Web Apps

51. คุณสมบัติอย่ำงเป็นทำงกำรของ HTML5 โดย W3C
Class: Performance &
Integration
ช่วยในกำรสร้ำง Web Applications ที่
เรียกข้อมูลจำกเครืองแม่ข่ำยด้วย
่
เทคโนโลยี เช่น Web Worker และ
XMLHttpRequest (กำรเชื่อมโยงข้อมูล
ระหว่ำง Web Browser และ Web
Server) ทำให้สำมำรถเรียกข้อมูลได้
รวดเร็ว และทำงำนในลักษณะ
Background ได้

52. อะไรคือ Web Worker
• Web Worker ช่วยให้ชุดคำสั่ง JavaScript ทำงำนในรูปแบบ
Background Mode ทำให้ผู้ใช้งำนสำมำรถใช้งำนฟังก์ชนงำนอื่นๆ
ั่
บนหน้ำเว็บเพจได้ โดยไม่ต้องรอให้ JavaScript ทำงำนเสร็จก่อน โดย
Web Worker จะสั่งให้ JavaScript ทำงำนโดยไม่กระทบกับงำนอื่นๆ

53. คุณสมบัติอย่ำงเป็นทำงกำรของ HTML5 โดย W3C
Class: Semantics
กำหนดควำมหมำยให้แก่ตัวแปรต่ำงๆ ใน
โปรแกรม HTML ที่เขียนได้ ทำให้สำมำรถ
กำหนดตัวแปรที่มีควำมหมำยได้
นอกเหนือจำกเพียงแค่คำสังทั่วไป เช่น
่
<body> แต่ไม่รู้ว่ำใน <body> มี
อะไรบ้ำง เทคโนโลยีที่เกี่ยวข้องเช่นRDFa,
microdata และ microformats

54. ตัวอย่ำงกำรใช้งำนแนวคิดเรือง Semantics
่
<!DOCTYPE html>
<html>
<head>
<title>Semantics Sample</title>
<style>
body { font-family: arial, sans-serif }
section#section_a { margin-left: 20px; color: #990000 }
</style>
</head>
<body>
<h1>Semantics Sample</h1>
<p>By Mr. Smith</p>
<section id="section_a">
<h2>What Is Semantics?</h2>
<p>Semantics จะเป็นชุดคำสั่งที่ให้ผู้สร้ำงหน้ำเว็บไซต์สำมำรถที่จะกำหนดควำมหมำยให้แต่ละส่วนของเนื้อหำได้</p>
</section>
</body>
</html>

55. ตัวอย่ำงกำรใช้งำนแนวคิดเรือง Semantics
่
<section id="section_a">

56. ตัวอย่ำงกำรใช้งำนแนวคิดเรือง Semantics
่
<style>
body { margin: 0; padding: 0; font-family: arial, sans-serif }
nav.horiz { width: 100%; height: 28px; background-color: #F4DBA9 }
nav.horiz ul { margin: 0; padding: 0 }
nav.horiz ul li { float: left; padding: 5px 10px; border-right: solid white 1px; list-style: none }
</style>
</head>
<body>
<nav class="horiz">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="adventures.html">Adventures</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</nav>

57. ตัวอย่ำงกำรใช้งำนแนวคิดเรือง Semantics
่

58. คุณสมบัติอย่ำงเป็นทำงกำรของ HTML5 โดย W3C
Class: CSS3
CSS3 เมื่อใช้งำนร่วมกับ HTML5 จะช่วย
กำหนด “รูปแบบ” ในกำรนำเสนอข้อมูล
ได้อย่ำงยืดหยุ่น หลำกหลำย ทำให้มีกำร
นำเสนอมีสีสรร ทั้งในรูปแบบ 2 มิติและ 3
มิติ

59. Form: สร้ำงแบบฟอร์มออนไลน์ง่ำยยิ่งขึ้น
• สร้ำงแบบฟอร์มออนไลน์บนหน้ำเว็บเพจได้ง่ำยยิ่งขึ้น
• ใน HTML เวอร์ชั่นก่อนหน้ำ (4.01) จะต้องเขียน JavaScript
เยอะในกำรจัดกำรเกี่ยวกับฟอร์ม แต่ใน HTML5 กำรเขียน
โปรแกรมจะน้อยลง

60. คำสั่งที่เกี่ยวกับ Form ที่เพิ่มขึ้นมำใน HTML5
• date • range
• datetime • search
• datetime-local • tel
• email • time
• month • color
• week • url
• number

61. ตัวอย่ำงหน้ำจอเครื่อง Smart Phone ในกำรแสดงรูปแบบ Input ของ Form
Date Datetime

62. ตัวอย่ำงหน้ำจอเครื่อง Smart Phone ในกำรแสดงรูปแบบ Input ของ Form
Month Time

63. ตัวอย่ำงหน้ำจอเครื่อง Smart Phone ในกำรแสดงรูปแบบ Input ของ Form
Range

64. Flash และ HTML5
• Flash ยังเป็นรูปแบบที่มีกำรใช้งำนอย่ำงกว้ำงขวำงบนโลกอินเทอร์เน็ต
• HTML5 กำลังได้รับควำมนิยมมำกขึ้น ส่วนหนึ่งมำจำกกำรที่อุปกรณ์ iOS ของ
Apple คือ iPhone และ iPad นั้นไม่รองรับ Flash
• Google เองก็นำ HTML5 มำใช้งำนมำกยิ่งขึ้น
• ในอนำคต Flash จะยังคงอยู่เนื่องจำกครองตลำดมำนำน อย่ำงไรก็ดี เมื่อมี
เครื่องมือในกำรพัฒนำใหม่ๆ สำหรับสร้ำง HTML5 ออกมำมำกขึ้น นักพัฒนำ
ส่วนหนึ่งก็จะหันไปใช้ HTML5 มำกขึ้นตำมไปด้วย
• อย่ำงไรก็ดี กำรสนับสนุนทั้งสองรูปแบบก็ยังคงมีต่อไป เพรำะ Flash เองก็ยังมี
ข้อดีอีกมำกที่ใน HTML5 ยังไม่มี

65. ดูตัวอย่ำงกำรพัฒนำโค้ดด้วย HTML5
• http://www.chromeexperiments.com/

66. แนวโน้มกำรใช้งำนและกำรสนับสนุนมำตรฐำน HTML5
ประเภท แนวโน้มกำรสนับสนุน
Desktop Browser มำกขึ้น
Smart Phone มำกขึ้น
Tablet มำกขึ้น

67. แนวโน้มกำรสนับสนุนของ Desktop Browser

68. แนวโน้มกำรสนับสนุนของ Smart Phone

69. แนวโน้มกำรสนับสนุนของ Tablet

70. กำรทดสอบกำรรองรับ HTML5 ด้วยตัวคุณเอง
• เข้ำไปยัง Browser ของอุปกรณ์ที่
คุณต้องกำรทดสอบ
• จำกนั้นพิมพ์ URL ไปที่
http://www.html5test.com
• เว็บไซต์จะแสดงผลกำรทดสอบว่ำ
อุปกรณ์และ Browser ที่คุณใช้อยู่
รองรับ HTML5 มำกน้อยเพียงไร
จำกคะแนนเต็ม 500

71. HTML5 กับอุปกรณ์ Mobile
• สิ่งที่จะต้องคำนึง
– ขนำดจอที่เล็กกว่ำเครือง Desktop
่
– กำรย่อขยำยโดยอัตโนมัติของรูป และตัวอักษร
– ไม่มี Scrollbar ด้ำนข้ำง
– ง่ำยต่อกำรแตะ (Touch)
– ใช้งำนฟังก์ชั่นทีสำคัญๆ ของอุปกรณ์ Mobile เช่น SMS, โทรศัพท์
่
, GPS ได้ เป็นต้น
– สร้ำง Shortcut บนหน้ำจอของ Smart Phone หรือ Tablet

72. สิ่งที่จำเป็นจะต้องรู้เมื่อจะเขียนโปรแกรมสำหรับ Mobile
• รู้ว่ำใช้เครือง Mobile หรือ Browser ประเภทไหนเข้ำมำดูโปรแกรม
่
ของเรำ ซึ่งอำจจะเป็นเครือง Desktop หรือ Mobile ก็ได้
่
• รู้ว่ำใช้ “หน้ำจอ” (Screen Resolution) ขนำดใด
• รู้ว่ำใช้ “ตัวอักษร” (Font) ขนำดใด
• รู้ว่ำใช้ “รูป” (Image) ขนำดใด

73. ตัวอย่ำงโปรแกรมตรวจสอบ Browser ที่ผู้ใช้งำนใช้ที่เขียนโดย JavaScript
function GetBrowser()
{
if (NavCheck('iPhone') || NavCheck('iPod'))
return 'iPhone'
else if (NavCheck('iPad'))
return 'iPad'
else if (NavCheck('Android'))
return 'Android'
}
function NavCheck(check)
{
return navigator.userAgent.indexOf(check) != -1
}

74. ขนำดหน้ำจอของอุปกรณ์ iOS Mobile

75. ตัวอย่ำงโปรแกรมกำหนดขนำดของตัวอักษร (Font) ตำมแต่ละอุปกรณ์
switch(GetBrowser())
{
case('Android') : f = '24pt'; break
case('iPhone') : f = '22pt'; break
case('iPad') : f = '18pt'; break
default : f = '12pt'; break
}

76. เรื่องของรูป (Image)
• ไม่ง่ายเหมือนตัวอักษร
• ต้ องทาขนาดใหญ่ไว้
ก่อน แล้ วค่อยย่อลง
คุณภาพจะได้ ไม่เสีย

77. ตัวอย่ำงโปรแกรมกำหนดขนำดรูป (Image) ตำมแต่ละอุปกรณ์
switch(GetBrowser())
{case('Android') : f = '24pt'; m = 1.00; break
case('iPhone') : f = '22pt'; m = 0.92; break
case('iPad') : f = '18pt'; m = 0.75; break
default : f = '12pt'; m = 0.50; break}
e.fontSize = f
e.textAlign = 'justify'
t = document.getElementsByTagName('img')
for (j = 0 ; j < t.length ; ++j)
{
t[j].width *= m
t[j].height *= m
}

78. หน้ำเว็บไซต์ปกติดูผ่ำน Browser บน Desktop PC

79. หน้ำเว็บไซต์ดูอุปกรณ์ Smart Phone

80. HTML ปกติ

81. HTML5

82. สร้ำง Shortcut บนหน้ำจอของ Smart Phone หรือ Tablet
• ผู้ใช้งำนสะดวกในกำรเข้ำถึง
• เหมือนเป็น Native
Applications
• ใส่รูปไอคอน และหน้ำจอ
(Splash Screen) ที่ต้องกำรได้

83. ตัวอย่ำงซอฟท์แวร์ที่พัฒนำด้วย HTML5 บน Smart Phone
เกมสร้ างโดย HTML5 ปุ่มยิง
ปุ่มเคลื่อนไหว

84. ซอฟท์แวร์ที่พัฒนำด้วย HTML5 สร้ำงเมนูบนหน้ำจอ iPhone
1
เลือก Add to
Home Screen

85. ซอฟท์แวร์ที่พัฒนำด้วย HTML5 สร้ำงเมนูบนหน้ำจอ iPhone
2
ตั้งชื่อ

86. ซอฟท์แวร์ที่พัฒนำด้วย HTML5 สร้ำงเมนูบนหน้ำจอ iPhone
3
มีปุ่มให้เลือกที่
หน้ำจอเหมือน
App อื่นๆ

87. ซอฟท์แวร์ที่พัฒนำด้วย HTML5 สร้ำงเมนูบนหน้ำจอ Android
1
คลิกปุ่ม More

88. ซอฟท์แวร์ที่พัฒนำด้วย HTML5 สร้ำงเมนูบนหน้ำจอ Android
2
เลือก Add
shortcut to
Home

89. ตัวอย่ำงโค้ด HTML5 ในกำรสร้ำง Shortcut บนหน้ำจอ
ของ Smart Phone หรือ Tablet
<link rel="Shortcut Icon" รูปโลโก้ที่ต้องกำรแสดงเป็น
href="myicon.ico" /> เมนู (Android)
<link rel="apple-touch-icon" รูปโลโก้ที่ต้องกำรแสดงเป็น
href="myicon.png"/> เมนู (iOS)
<meta name="apple-mobile-web-
แสดง Application แบบ
app-capable" content="yes" />
Full Screen

90. ตัวอย่ำงโค้ด HTML5 ในกำรสร้ำง Shortcut บนหน้ำจอ
ของ Smart Phone หรือ Tablet
link rel="apple-touch-icon- รูปโลโก้ที่ต้องกำรแสดงเป็น
precomposed" เมนู (iOS) แต่ไม่ต้องใส่เงำ
หรือขอบให้
href="iphone_icon.png" />
<link rel="apple-touch-startup- รูปเริ่มต้นก่อนเข้ำโปรแกรม
image" href=“startimage.png"/>

91. ขนำดมำตรฐำนของไอคอนบนอุปกรณ์ iOS Mobile

92. ขนำดมำตรฐำนของไอคอนบนอุปกรณ์ Android Mobile

93. HTML5 กับกำรสร้ำงสื่อกำรเรียนกำรสอนผ่ำน Mobile
• รองรับอุปกรณ์หลำกหลำย
• แสดงภำพ เสียง หรือกรำฟิกอนิเมชั่นต่ำงๆ โดยไม่ต้องติดตั้ง
ซอฟท์แวร์เพิ่มเติม
• ไม่ต้องพัฒนำในลักษณะ Native Apps และไม่ต้องนำโปรแกรมขึ้น
App Store หรือ Google Play ผู้เรียนเข้ำถึงได้ง่ำย และผู้พัฒนำก็
สำมำรถพัฒนำโปรแกรมได้ง่ำย
• รองรับกำรติดต่อเพื่อเรียกใช้งำนคุณสมบัติต่ำงๆ ของอุปกรณ์
โดยเฉพำะ Mobile ได้ เช่นเรียกใช้งำนระบบ GPS (แผนที่), กล้อง
ถ่ำยรูป เป็นต้น

94. ก่อตั้งปี 2000: 12 ปีแห่งกำรพัฒนำ Applications

95. บนเนื้อที่ 4 ชั้น พัฒนำระบบ IT ครบวงจร

96. ทีมงำนมืออำชีพกว่ำ 60 คน

97. Thank you
ขอแสดงควำมขอบคุณ
วิทูร หวังสงวนกิจ
withoon@bizpotential.com