แนะนำ HTML5 แบบอ่านจบต้องรู้บ้างแหละ
76 likes52,003 views
แนะนำให้คุณรู้จัก HTML5 ด้วยภาษาและความเข้าใจแบบง่ายๆ ก็พอจะเรียกได้ว่า ถ้าอ่านจบต้องรู้บ้างแหละ มีข้อซักถามส่งอีเมล์มาได้ที่ wihtoon@bizpotential.com ครับ
![ตัวอย่ำงโปรแกรมกำหนดขนำดรูป (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
}](https://image.slidesharecdn.com/presentbizhtml5formobilesforshare-121014112812-phpapp02/85/HTML5-77-320.jpg)
แนะนำ HTML5 แบบอ่านจบต้องรู้บ้างแหละ
- 1. HTML5 แนะนำ HTML5 แบบอ่ำนจบต้องรู้บ้ำงแหละ โดย วิทูร หวังสงวนกิจ บริษัท บิซโพเทนเชียล จำกัด http://www.bizpotential.com
- 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 ที่มีควำม ซับซ้อนมำกยิ่งขึ้น กำรเปลี่ยนสีของภำพถ่ำย
- 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) ทำได้ง่ำยและรวดเร็วยิ่งขึน ้
- 38. คุณสมบัติอย่ำงเป็นทำงกำรของ HTML5 โดย W3C Class: Multimedia เรียกไฟล์วีดีโอ หรือเสียงให้แสดงด้วยกำร เขียนโปรแกรมเพียงไม่กี่บรรทัด
- 39. Multimedia: เล่นวีดีโอและเสียงได้อย่ำงง่ำยดำย • เป็นคุณสมบัติที่เด่น และจับต้องได้มากที่สุด • อุปกรณ์ iPhone/iPad ไม่สามารถเล่น Flash ได้ แต่อาศัยการเล่นไฟล์ เสียงและวีดีโอ ตลอดจนภาพอนิเมชั่นต่างๆ ด้วย HTML5
- 41. ตัวอย่ำง Code HTML5 ในกำรใส่เสียงที่หน้ำเว็บ <audio controls="controls"> <source src=“testsound.ogg" type="audio/ogg"> <source src=“testsound.mp3" type="audio/mpeg"> Browser ของคุณไม่สนับสนุนการเล่นไฟล์เสียงด้วย HTML5 </audio>
- 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>
- 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>
- 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 ยังไม่มี
- 66. แนวโน้มกำรใช้งำนและกำรสนับสนุนมำตรฐำน HTML5 ประเภท แนวโน้มกำรสนับสนุน Desktop Browser มำกขึ้น Smart Phone มำกขึ้น 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 }
- 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
- 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"/>
- 93. HTML5 กับกำรสร้ำงสื่อกำรเรียนกำรสอนผ่ำน Mobile • รองรับอุปกรณ์หลำกหลำย • แสดงภำพ เสียง หรือกรำฟิกอนิเมชั่นต่ำงๆ โดยไม่ต้องติดตั้ง ซอฟท์แวร์เพิ่มเติม • ไม่ต้องพัฒนำในลักษณะ Native Apps และไม่ต้องนำโปรแกรมขึ้น App Store หรือ Google Play ผู้เรียนเข้ำถึงได้ง่ำย และผู้พัฒนำก็ สำมำรถพัฒนำโปรแกรมได้ง่ำย • รองรับกำรติดต่อเพื่อเรียกใช้งำนคุณสมบัติต่ำงๆ ของอุปกรณ์ โดยเฉพำะ Mobile ได้ เช่นเรียกใช้งำนระบบ GPS (แผนที่), กล้อง ถ่ำยรูป เป็นต้น
- 94. ก่อตั้งปี 2000: 12 ปีแห่งกำรพัฒนำ Applications
- 95. บนเนื้อที่ 4 ชั้น พัฒนำระบบ IT ครบวงจร
- 97. Thank you ขอแสดงควำมขอบคุณ วิทูร หวังสงวนกิจ withoon@bizpotential.com