Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

แนะนำ HTML5 แบบอ่านจบต้องรู้บ้างแหละ

52,775 views

Published on

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

Published in: Technology

แนะนำ HTML5 แบบอ่านจบต้องรู้บ้างแหละ

  1. 1. HTML5 แนะนำ HTML5แบบอ่ำนจบต้องรู้บ้ำงแหละ โดย วิทูร หวังสงวนกิจ บริษัท บิซโพเทนเชียล จำกัด http://www.bizpotential.com
  2. 2. บริษัท บิซโพเทนเชียล จำกัด
  3. 3. ยินดีต้อนรับสู่โลกแห่งควำมคิดสร้ำงสรรค์
  4. 4. รู้จักกับบิซโพเทนเชียล• ก่อตั้งปี 2000• ทีมงำน 60 คน“เราสร้างสรรค์และพ ัฒนานว ัตกรรมใหม่ๆ ่ัทางด้านเว็บเบสแอปพลิเคชนเพือตอบสนอง ่ความต้องการทีแท้จริงของลูกค้า” ่
  5. 5. เรำจะเรียนรู้อะไรกันเกี่ยวกับ HTML5• รู้จักกับ Web Applications / Web Apps• HTML5 คืออะไร• มีอะไรใหม่ใน HTML5• แนวโน้มกำรใช้งำนและกำรสนับสนุนมำตรฐำน HTML5• กำรทดสอบกำรรองรับ HTML5 ด้วยตัวคุณเอง• HTML5 กับอุปกรณ์ Mobile
  6. 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. 7. Native Application• ต้อง Load โปรแกรมมำติดตั้งที่เครื่อง Smart Phone ผ่ำน Apps Store / Google Play / MarketPlace / Ovi• ทำงำนได้เร็ว และเขียนโปรแกรมที่ซับซ้อนได้
  8. 8. กำรพัฒนำ Web Applicationsเมื่อก่อนและปัจจุบัน ปัจจุบันและอนำคตWeb Application Web Apps อุปกรณ์ Mobile (Smartเครื่อง Desktop (PC/Mac) Phone/Tablet โปรแกรม Browser บน iOS/Android/Windowsโปรแกรม Browser (IE/Firefox) Mobile/Others
  9. 9. ก่อนจะรู้ว่ำ HTML5 คืออะไร• HTML คืออะไร – ย่อมำจำก “HyperText Markup Language” – ภำษำคอมพิวเตอร์ที่ใช้สั่งให้แสดง “ข้อมูลหรือเนื้อหำ” (Content) บนหน้ำ เว็บเพจ – ทุกหน้ำเว็บเพจบนอินเทอร์เน็ตจะต้องมีภำษำ HTML อยู่
  10. 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. 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. 12. มำตรฐำน HTML5 จะจบลงที่ใด• คำตอบ คือ “ยังไม่รู้”• แต่ อุปกรณ์ และ Browser ต่ำงๆ ก็เริ่มสนับสนุนกันไปแล้ว แม้ว่ำมำตรฐำน HTML5 ยังไม่ลงตัวก็ตำม• ผู้พัฒนำ สำมำรถเริ่มศึกษำและพัฒนำได้ เพรำะมีกำรรองรับ เพิ่มขึ้น
  13. 13. ข้อดีของ HTML5• รองรับอุปกรณ์หลำกหลำยทั้ง Desktop PC, Mac และ Mobile เช่น Smart Phone, Tablet• แสดงภำพ เสียง หรือกรำฟิกอนิเมชั่นต่ำงๆ โดยไม่ต้องติดตั้งซอฟท์แวร์เพิ่มเติม• สำมำรถพัฒนำโปรแกรมได้เหมือนกับโปรแกรมที่ใช้งำนทั่วไป ไม่ใช่เพียงแค่สร้ำง หน้ำเว็บเพจแสดงข้อมูลอย่ำงเดียว• เขียนโปรแกรมง่ำยยิ่งขึ้น โดยเฉพำะบน Mobile ไม่ต้องพัฒนำในลักษณะ Native Apps และไม่ต้องนำโปรแกรมขึ้น App Store หรือ Google Play• เขียนโปรแกรมได้อย่ำงมีประสิทธิภำพ เพรำะรองรับกำรติดต่อเพื่อเรียกใช้งำน คุณสมบัติต่ำงๆ ของอุปกรณ์โดยเฉพำะ Mobile ได้ เช่นเรียกใช้งำนระบบ GPS (แผนที)่
  14. 14. CSS3 คืออะไร• หำก HTML ใช้ในกำรแสดง “ข้อมูลหรือเนื้อหำ” บนหน้ำเว็บเพจ CSS คือตัวที่กำหนด “รูปแบบและลูกเล่น” ในกำรแสดง “เนื้อหำ” – HTML แสดง “เนื้อหำ” – CSS ทำให้ “เนื้อหำ” สวย และมีลูกเล่นมำกขึ้น• CSS กำหนดควำมสวยงำม เช่น ขนำด (ตัวอักษร), สี, กำรจัดวำง, ขอบ (Border) และอื่นๆ อีกมำกมำย• CSS3 คือเวอร์ชั่นใหม่ล่ำสุดของ CSS• เป็นคู่หูของ HTML5• เรียกใช้โดยคำสั่งง่ำยๆ <link rel="stylesheet" type="text/css" href="mystyle.css" />• หรือสำมำรถเขียนแทรกเข้ำไปใน HTML ได้เลย แต่ใน HTML5 เน้น ให้สร้ำงไฟล์ CSS ต่ำงหำก
  15. 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. 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 sitehref="mystyle.css" /></HEAD><BODY> 1 ผู้ชมเข้ำดูเว็บเพจผ่ำนอินเทอร์เน็ต<h1> This is my web site. </h1></body></HTML>CSS3 mystyle.cssh1{text-shadow: 5px 5px 5px#FF0000;}
  17. 17. ข้อดีของ CSS3• กำหนดรูปแบบที่ต้องกำรแสดงผลจำกที่เดียว เว็บเพจทุกหน้ำสำมำรถ เรียกรูปแบบมำตรฐำนได้จำกไฟล์ CSS เพียงไฟล์เดียว• บริหำรจัดกำรในกำรเขียนโปรแกรมได้ง่ำยกว่ำ• มีลูกเล่นเพิ่มขึ้นจำก CSS เวอร์ชั่นเดิม• สำมำรถมีไฟล์ CSS ได้มำกกว่ำหนึ่งไฟล์ และหน้ำเว็บเพจก็สำมำรถ เรียกได้ใช้งำนไฟล์ CSS ได้มำกกว่ำหนึ่งไฟล์เช่นกัน
  18. 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. 19. ข้อดีของ JavaScript• เขียนโปรแกรมที่มีควำมซับซ้อน เช่น – สร้ำง และเรียกดูฐำนข้อมูล เช่น ระบบกำรสมัครเป็นสมำชิก และประวัติกำร เรียน เป็นต้น – ติดต่อเรียกข้อมูลจำกเครื่องแม่ข่ำย เช่น เรียกระบบกำรเรียนผ่ำนอุปกรณ์ Mobile ก็อำจจะเรียกข้อมูลบทเรียนใหม่ๆ – เชื่อมโยงระบบแผนที่ของอุปกรณ์ Mobile เพื่อเรียกดูตำแหน่ง – จัดเก็บข้อมูลที่อุปกรณ์ Mobile แบบ Local ทำให้ไม่ต้องเข้ำอินเทอร์เน็ตทุก ครั้งที่ใช้งำน – เขียนควบคุมกำรทำงำนของปุ่ม เช่น ปุ่มบังคับกำรเคลื่อนไหวของตัวละครใน เกม เป็นต้น
  20. 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 JavaScriptmystyle.css myscript.js
  21. 21. ข้อจำกัดของ HTML5• แต่ละคุณสมบัติยังมิได้มีกำรสนับสนุนจำกทุก Browser และ อุปกรณ์ Mobile• ยังไม่ประกำศเป็นมำตรฐำนที่กำหนดเสร็จสิ้นแล้ว• กำรใช้ในรูปแบบ Offline (ไม่ได้ต่ออินเทอร์เน็ต) จะต้องมีกำร เขียนโปรแกรมเพิ่มเติม
  22. 22. HTML5 เขียนอย่ำงไร• ในเวอร์ ชนก่อนหน้ าเราจะเขียนว่า HTML 4 แต่ในเวอร์ ชน 5 รูปแบบ ั่ ั่ การเขียนที่เป็ นทางการคือ HTML5 เลข 5 จะติดกับคาว่า HTML
  23. 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. 24. HTML5 แสดงผลได้บนทุกอุปกรณ์.... แต่• แต่ยังไม่ 100% บนทุกอุปกรณ์• HTML5 คือชุดคำสั่งในกำรแสดงผลบนหน้ำจออุปกรณ์ต่ำงๆ ซึ่งอุปกรณ์ต่ำงๆ ที่กล่ำวถึง ไม่ว่ำจะเป็นบน PC, Mac, Smart Phone หรือ Tablet ล้วนแล้วแต่ยังไม่สนับสนุนทุกชุดคำสั่ง ของ HTML5 (สนับสนุนเป็นบำงคำสั่ง)• กำรพัฒนำจะต้องดูด้วยว่ำชุดคำสั่งใดให้กำรสนับสนุนแล้วโดย อุปกรณ์ หรือ Browser ส่วนใหญ่ และชุดคำสั่งใดยังให้กำร สนับสนุนน้อยอยู่
  25. 25. มีอะไรใหม่ใน HTML5• Canvas: ไดนำมิกกรำฟิกบนหน้ำเว็บเพจ• Geolocation: บอกตำแหน่งผู้ใช้งำน• Form: สร้ำงแบบฟอร์มออนไลน์ง่ำยยิ่งขึ้น• Local Storage: เก็บข้อมูล หรือฐำนข้อมูล (WebSQL) ได้ที่ คอมพิวเตอร์ของผู้ใช้งำน• Media Player: เล่นวีดีโอและเสียงได้อย่ำงง่ำยดำย• Semantics: สร้ำงควำมหมำยให้ข้อมูล
  26. 26. คุณสมบัติอย่ำงเป็นทำงกำรของ HTML5 โดย W3C Class: 3D, Graphics & Effects SVG, Canvas, WebGL, CSS3 3D ช่วย ให้คุณสำมำรถสร้ำงหน้ำเว็บเพจบนหน้ำ เครื่อง Desktop หรือ Mobile ได้อย่ำง หน้ำตื่นตำตื่นใจ
  27. 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. 28. Canvas: ไดนำมิกกรำฟิกบนหน้ำเว็บเพจ• Canvas ช่วยให้นักพัฒนำสำมำรถสร้ำงภำพกรำฟิก และอนิ เมชั่นในรูปแบบต่ำงๆ ได้โดยไม่ต้องใช้ Flash ทำให้ผู้ใช้งำนไม่ จำเป็นต้องติดตั้งโปรแกรม Flash Player• สำมำรถสร้ำงให้กรำฟิกในรูปแบบที่มีกำรตอบโต้ (Interaction) เช่นปุ่มบังคับต่ำงๆ โดยใช้ JavaScript เข้ำ ช่วย• อุปกรณ์ iOS Device ของ Apple คือ iPhone และ iPad ไม่ รองรับ Flash แต่รองรับ HTML5
  29. 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 gradientctx.fillStyle=grd;ctx.fillRect(10,10,150,80);</script>
  30. 30. ตัวอย่ำงกำรใช้งำน Drag & Dropfunction 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. 31. ตัวอย่ำงกำรใช้งำน WebGLWebGL เป็นคุณสมบัติในกำรจัดกำรเกี่ยวกับภำพ และ 3D ที่มีควำมซับซ้อนมำกยิ่งขึ้น กำรเปลี่ยนสีของภำพถ่ำย
  32. 32. ตัวอย่ำงกำรใช้งำน CSS3 3D
  33. 33. คุณสมบัติอย่ำงเป็นทำงกำรของ HTML5 โดย W3C Class: Connectivity เสริมประสิทธิภำพและควำมเร็วด้ำนกำร เชื่อมต่อ (Web Sockets and Server- Sent Events) กับเครื่องแม่ข่ำยผ่ำน อินเทอร์เน็ต ทำให้สำมำรถสร้ำงโปรแกรม ประเภทออนไลน์เกมส์ ระบบกำรเรียนรู้ ผ่ำนอินเทอร์เน็ต (E-Learning) ระบบกำร สื่อสำรแบบออนไลน์ (Chat) กำรเรียกดู ข้อมูลแบบ Real-Time
  34. 34. ตัวอย่ำงกำรใช้งำน WebSockets เป็นกำรเขียนโปรแกรมที่ Chat ระหว่ำงกัน
  35. 35. คุณสมบัติอย่ำงเป็นทำงกำรของ HTML5 โดย W3C Class: Device Access ช่วยให้กำรเขียนโปรแกรมเพื่อเข้ำถึง คุณสมบัติต่ำงๆ ของอุปกรณ์ Mobile เช่น แผนที่ (Geolocation) กล้องถ่ำยรูป ไมโครโฟน หรือข้อมูลเช่น รำยชื่อ (Contact) ทำได้ง่ำยและรวดเร็วยิ่งขึน ้
  36. 36. ตัวอย่ำงกำรใช้งำนกับแผนที่
  37. 37. ตัวอย่ำงกำรใช้งำนกับกล้อง
  38. 38. คุณสมบัติอย่ำงเป็นทำงกำรของ HTML5 โดย W3C Class: Multimedia เรียกไฟล์วีดีโอ หรือเสียงให้แสดงด้วยกำร เขียนโปรแกรมเพียงไม่กี่บรรทัด
  39. 39. Multimedia: เล่นวีดีโอและเสียงได้อย่ำงง่ำยดำย• เป็นคุณสมบัติที่เด่น และจับต้องได้มากที่สุด• อุปกรณ์ iPhone/iPad ไม่สามารถเล่น Flash ได้ แต่อาศัยการเล่นไฟล์ เสียงและวีดีโอ ตลอดจนภาพอนิเมชั่นต่างๆ ด้วย HTML5
  40. 40. ฟอร์แมทที่สนับสนุนด้ำนเสียงของ HTML5
  41. 41. ตัวอย่ำง Code HTML5 ในกำรใส่เสียงที่หน้ำเว็บ<audio controls="controls"> <source src=“testsound.ogg" type="audio/ogg"> <source src=“testsound.mp3" type="audio/mpeg"> Browser ของคุณไม่สนับสนุนการเล่นไฟล์เสียงด้วย HTML5</audio>
  42. 42. ตัวอย่ำงกำรเล่นไฟล์เสียง
  43. 43. ฟอร์แมทที่สนับสนุนด้ำนวิดีโอของ HTML5
  44. 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. 45. ตัวอย่ำงกำรแสดงวีดีโอ
  46. 46. คุณสมบัติอย่ำงเป็นทำงกำรของ HTML5 โดย W3C Class: Offline & Storage HTML5 ทำให้นักพัฒนำสำมำรถเก็บข้อมูล กำรใช้งำนโปรแกรม หรือฐำนข้อมูลที่ จำเป็นไว้ที่อุปกรณ์ได้ ทำให้เวลำใช้งำนไม่ จำเป็นที่จะต้องต่ออินเทอร์เน็ตเสมอไป เทคโนโลยีที่สำคัญได้แก่ HTML5 App Cache, Local Storage, Indexed DB และ File API
  47. 47. ตัวอย่ำงกำรใช้งำน Local Storageเมื่อออกจำกเว็บไซต์แล้ว เข้ำมำใหม่ มำคลิกที่ปุ่มต่อ เลขก็จะต่อไปเลยระบบจำเลขล่ำสุดไว้ใน Local Storage
  48. 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. 49. ตัวอย่ำงกำรใช้งำนฐำนข้อมูลด้วย HTML5บันทึกข้อมูลลงฐำนข้อมูลฝั่ง Client ด้วย indexedDB
  50. 50. แนวโน้มกำรสนับสนุน Offline Web Apps
  51. 51. คุณสมบัติอย่ำงเป็นทำงกำรของ HTML5 โดย W3C Class: Performance & Integration ช่วยในกำรสร้ำง Web Applications ที่ เรียกข้อมูลจำกเครืองแม่ข่ำยด้วย ่ เทคโนโลยี เช่น Web Worker และ XMLHttpRequest (กำรเชื่อมโยงข้อมูล ระหว่ำง Web Browser และ Web Server) ทำให้สำมำรถเรียกข้อมูลได้ รวดเร็ว และทำงำนในลักษณะ Background ได้
  52. 52. อะไรคือ Web Worker• Web Worker ช่วยให้ชุดคำสั่ง JavaScript ทำงำนในรูปแบบ Background Mode ทำให้ผู้ใช้งำนสำมำรถใช้งำนฟังก์ชนงำนอื่นๆ ั่ บนหน้ำเว็บเพจได้ โดยไม่ต้องรอให้ JavaScript ทำงำนเสร็จก่อน โดย Web Worker จะสั่งให้ JavaScript ทำงำนโดยไม่กระทบกับงำนอื่นๆ
  53. 53. คุณสมบัติอย่ำงเป็นทำงกำรของ HTML5 โดย W3C Class: Semantics กำหนดควำมหมำยให้แก่ตัวแปรต่ำงๆ ใน โปรแกรม HTML ที่เขียนได้ ทำให้สำมำรถ กำหนดตัวแปรที่มีควำมหมำยได้ นอกเหนือจำกเพียงแค่คำสังทั่วไป เช่น ่ <body> แต่ไม่รู้ว่ำใน <body> มี อะไรบ้ำง เทคโนโลยีที่เกี่ยวข้องเช่นRDFa, microdata และ microformats
  54. 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. 55. ตัวอย่ำงกำรใช้งำนแนวคิดเรือง Semantics ่ <section id="section_a">
  56. 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. 57. ตัวอย่ำงกำรใช้งำนแนวคิดเรือง Semantics ่
  58. 58. คุณสมบัติอย่ำงเป็นทำงกำรของ HTML5 โดย W3C Class: CSS3 CSS3 เมื่อใช้งำนร่วมกับ HTML5 จะช่วย กำหนด “รูปแบบ” ในกำรนำเสนอข้อมูล ได้อย่ำงยืดหยุ่น หลำกหลำย ทำให้มีกำร นำเสนอมีสีสรร ทั้งในรูปแบบ 2 มิติและ 3 มิติ
  59. 59. Form: สร้ำงแบบฟอร์มออนไลน์ง่ำยยิ่งขึ้น• สร้ำงแบบฟอร์มออนไลน์บนหน้ำเว็บเพจได้ง่ำยยิ่งขึ้น• ใน HTML เวอร์ชั่นก่อนหน้ำ (4.01) จะต้องเขียน JavaScript เยอะในกำรจัดกำรเกี่ยวกับฟอร์ม แต่ใน HTML5 กำรเขียน โปรแกรมจะน้อยลง
  60. 60. คำสั่งที่เกี่ยวกับ Form ที่เพิ่มขึ้นมำใน HTML5• date • range• datetime • search• datetime-local • tel• email • time• month • color• week • url• number
  61. 61. ตัวอย่ำงหน้ำจอเครื่อง Smart Phone ในกำรแสดงรูปแบบ Input ของ Form Date Datetime
  62. 62. ตัวอย่ำงหน้ำจอเครื่อง Smart Phone ในกำรแสดงรูปแบบ Input ของ Form Month Time
  63. 63. ตัวอย่ำงหน้ำจอเครื่อง Smart Phone ในกำรแสดงรูปแบบ Input ของ Form Range
  64. 64. Flash และ HTML5• Flash ยังเป็นรูปแบบที่มีกำรใช้งำนอย่ำงกว้ำงขวำงบนโลกอินเทอร์เน็ต• HTML5 กำลังได้รับควำมนิยมมำกขึ้น ส่วนหนึ่งมำจำกกำรที่อุปกรณ์ iOS ของ Apple คือ iPhone และ iPad นั้นไม่รองรับ Flash• Google เองก็นำ HTML5 มำใช้งำนมำกยิ่งขึ้น• ในอนำคต Flash จะยังคงอยู่เนื่องจำกครองตลำดมำนำน อย่ำงไรก็ดี เมื่อมี เครื่องมือในกำรพัฒนำใหม่ๆ สำหรับสร้ำง HTML5 ออกมำมำกขึ้น นักพัฒนำ ส่วนหนึ่งก็จะหันไปใช้ HTML5 มำกขึ้นตำมไปด้วย• อย่ำงไรก็ดี กำรสนับสนุนทั้งสองรูปแบบก็ยังคงมีต่อไป เพรำะ Flash เองก็ยังมี ข้อดีอีกมำกที่ใน HTML5 ยังไม่มี
  65. 65. ดูตัวอย่ำงกำรพัฒนำโค้ดด้วย HTML5• http://www.chromeexperiments.com/
  66. 66. แนวโน้มกำรใช้งำนและกำรสนับสนุนมำตรฐำน HTML5 ประเภท แนวโน้มกำรสนับสนุน Desktop Browser มำกขึ้น Smart Phone มำกขึ้น Tablet มำกขึ้น
  67. 67. แนวโน้มกำรสนับสนุนของ Desktop Browser
  68. 68. แนวโน้มกำรสนับสนุนของ Smart Phone
  69. 69. แนวโน้มกำรสนับสนุนของ Tablet
  70. 70. กำรทดสอบกำรรองรับ HTML5 ด้วยตัวคุณเอง• เข้ำไปยัง Browser ของอุปกรณ์ที่ คุณต้องกำรทดสอบ• จำกนั้นพิมพ์ URL ไปที่ http://www.html5test.com• เว็บไซต์จะแสดงผลกำรทดสอบว่ำ อุปกรณ์และ Browser ที่คุณใช้อยู่ รองรับ HTML5 มำกน้อยเพียงไร จำกคะแนนเต็ม 500
  71. 71. HTML5 กับอุปกรณ์ Mobile• สิ่งที่จะต้องคำนึง – ขนำดจอที่เล็กกว่ำเครือง Desktop ่ – กำรย่อขยำยโดยอัตโนมัติของรูป และตัวอักษร – ไม่มี Scrollbar ด้ำนข้ำง – ง่ำยต่อกำรแตะ (Touch) – ใช้งำนฟังก์ชั่นทีสำคัญๆ ของอุปกรณ์ Mobile เช่น SMS, โทรศัพท์ ่ , GPS ได้ เป็นต้น – สร้ำง Shortcut บนหน้ำจอของ Smart Phone หรือ Tablet
  72. 72. สิ่งที่จำเป็นจะต้องรู้เมื่อจะเขียนโปรแกรมสำหรับ Mobile• รู้ว่ำใช้เครือง Mobile หรือ Browser ประเภทไหนเข้ำมำดูโปรแกรม ่ ของเรำ ซึ่งอำจจะเป็นเครือง Desktop หรือ Mobile ก็ได้ ่• รู้ว่ำใช้ “หน้ำจอ” (Screen Resolution) ขนำดใด• รู้ว่ำใช้ “ตัวอักษร” (Font) ขนำดใด• รู้ว่ำใช้ “รูป” (Image) ขนำดใด
  73. 73. ตัวอย่ำงโปรแกรมตรวจสอบ Browser ที่ผู้ใช้งำนใช้ที่เขียนโดย JavaScriptfunction 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. 74. ขนำดหน้ำจอของอุปกรณ์ iOS Mobile
  75. 75. ตัวอย่ำงโปรแกรมกำหนดขนำดของตัวอักษร (Font) ตำมแต่ละอุปกรณ์switch(GetBrowser()) { case(Android) : f = 24pt; break case(iPhone) : f = 22pt; break case(iPad) : f = 18pt; break default : f = 12pt; break }
  76. 76. เรื่องของรูป (Image)• ไม่ง่ายเหมือนตัวอักษร• ต้ องทาขนาดใหญ่ไว้ ก่อน แล้ วค่อยย่อลง คุณภาพจะได้ ไม่เสีย
  77. 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. 78. หน้ำเว็บไซต์ปกติดูผ่ำน Browser บน Desktop PC
  79. 79. หน้ำเว็บไซต์ดูอุปกรณ์ Smart Phone
  80. 80. HTML ปกติ
  81. 81. HTML5
  82. 82. สร้ำง Shortcut บนหน้ำจอของ Smart Phone หรือ Tablet• ผู้ใช้งำนสะดวกในกำรเข้ำถึง• เหมือนเป็น Native Applications• ใส่รูปไอคอน และหน้ำจอ (Splash Screen) ที่ต้องกำรได้
  83. 83. ตัวอย่ำงซอฟท์แวร์ที่พัฒนำด้วย HTML5 บน Smart Phone เกมสร้ างโดย HTML5 ปุ่มยิงปุ่มเคลื่อนไหว
  84. 84. ซอฟท์แวร์ที่พัฒนำด้วย HTML5 สร้ำงเมนูบนหน้ำจอ iPhone1 เลือก Add to Home Screen
  85. 85. ซอฟท์แวร์ที่พัฒนำด้วย HTML5 สร้ำงเมนูบนหน้ำจอ iPhone2 ตั้งชื่อ
  86. 86. ซอฟท์แวร์ที่พัฒนำด้วย HTML5 สร้ำงเมนูบนหน้ำจอ iPhone3 มีปุ่มให้เลือกที่ หน้ำจอเหมือน App อื่นๆ
  87. 87. ซอฟท์แวร์ที่พัฒนำด้วย HTML5 สร้ำงเมนูบนหน้ำจอ Android1 คลิกปุ่ม More
  88. 88. ซอฟท์แวร์ที่พัฒนำด้วย HTML5 สร้ำงเมนูบนหน้ำจอ Android2 เลือก Add shortcut to Home
  89. 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. 90. ตัวอย่ำงโค้ด HTML5 ในกำรสร้ำง Shortcut บนหน้ำจอ ของ Smart Phone หรือ Tabletlink rel="apple-touch-icon- รูปโลโก้ที่ต้องกำรแสดงเป็นprecomposed" เมนู (iOS) แต่ไม่ต้องใส่เงำ หรือขอบให้href="iphone_icon.png" /><link rel="apple-touch-startup- รูปเริ่มต้นก่อนเข้ำโปรแกรมimage" href=“startimage.png"/>
  91. 91. ขนำดมำตรฐำนของไอคอนบนอุปกรณ์ iOS Mobile
  92. 92. ขนำดมำตรฐำนของไอคอนบนอุปกรณ์ Android Mobile
  93. 93. HTML5 กับกำรสร้ำงสื่อกำรเรียนกำรสอนผ่ำน Mobile• รองรับอุปกรณ์หลำกหลำย• แสดงภำพ เสียง หรือกรำฟิกอนิเมชั่นต่ำงๆ โดยไม่ต้องติดตั้ง ซอฟท์แวร์เพิ่มเติม• ไม่ต้องพัฒนำในลักษณะ Native Apps และไม่ต้องนำโปรแกรมขึ้น App Store หรือ Google Play ผู้เรียนเข้ำถึงได้ง่ำย และผู้พัฒนำก็ สำมำรถพัฒนำโปรแกรมได้ง่ำย• รองรับกำรติดต่อเพื่อเรียกใช้งำนคุณสมบัติต่ำงๆ ของอุปกรณ์ โดยเฉพำะ Mobile ได้ เช่นเรียกใช้งำนระบบ GPS (แผนที่), กล้อง ถ่ำยรูป เป็นต้น
  94. 94. ก่อตั้งปี 2000: 12 ปีแห่งกำรพัฒนำ Applications
  95. 95. บนเนื้อที่ 4 ชั้น พัฒนำระบบ IT ครบวงจร
  96. 96. ทีมงำนมืออำชีพกว่ำ 60 คน
  97. 97. Thank you ขอแสดงควำมขอบคุณ วิทูร หวังสงวนกิจwithoon@bizpotential.com

×