View
38.741
Download
0
Category
Preview:
DESCRIPTION
แนะนำให้คุณรู้จัก HTML5 ด้วยภาษาและความเข้าใจแบบง่ายๆ ก็พอจะเรียกได้ว่า ถ้าอ่านจบต้องรู้บ้างแหละ มีข้อซักถามส่งอีเมล์มาได้ที่ wihtoon@bizpotential.com ครับ
Citation preview
HTML5
แนะน ำ HTML5 แบบอำนจบตองรบำงแหละ
โดย
วทร หวงสงวนกจ
บรษท บซโพเทนเชยล จ ำกด
http://www.bizpotential.com
บรษท บซโพเทนเชยล จ ำกด
ยนดตอนรบสโลกแหงควำมคดสรำงสรรค
รจกกบบซโพเทนเชยล
• กอตงป 2000
• ทมงำน 60 คน
“เราสรางสรรคและพฒนานวตกรรมใหมๆ ทางดานเวบเบสแอปพลเคช นเพอตอบสนองความตองการทแทจรงของลกคา”
เรำจะเรยนรอะไรกนเกยวกบ HTML5
• รจกกบ Web Applications / Web Apps
• HTML5 คออะไร
• มอะไรใหมใน HTML5
• แนวโนมกำรใชงำนและกำรสนบสนนมำตรฐำน HTML5
• กำรทดสอบกำรรองรบ HTML5 ดวยตวคณเอง
• HTML5 กบอปกรณ Mobile
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 (หรออนๆ)
Native Application
• ตอง Load โปรแกรมมำตดตงทเครอง Smart Phone ผำน Apps Store / Google Play / MarketPlace / Ovi
• ท ำงำนไดเรว และเขยนโปรแกรมทซบซอนได
กำรพฒนำ Web Applications
Web Application
เครอง Desktop (PC/Mac)
โปรแกรม Browser (IE/Firefox)
Web Apps อปกรณ Mobile (Smart Phone/Tablet โปรแกรม Browser บน iOS/Android/Windows Mobile/Others
เมอกอนและปจจบน ปจจบนและอนำคต
กอนจะรวำ HTML5 คออะไร
• HTML คออะไร – ยอมำจำก “HyperText Markup Language”
– ภำษำคอมพวเตอรทใชสงใหแสดง “ขอมลหรอเนอหำ” (Content) บนหนำเวบเพจ
– ทกหนำเวบเพจบนอนเทอรเนตจะตองมภำษำ HTML อย
HTML5 คออะไร
• ภำษำ HTML เวอรชนใหมลำสด แตยงไมเปน Final Version • มคณสมบตเพมขนจำก HTML เดม ท ำใหเขยน HTML งำยขน • สนบสนนกำรแสดงผลบนอปกรณตำงๆ ไดเชน PC, Mac, iPhone,
iPad, Android Phone หรอ Tablet เปนตน • เพมลกเลนในกำรท ำงำน เชน ท ำงำนกบระบบแผนท, สรำงภำพกรำฟก
โดยไมตองม Flash ฯลฯ • เนนกำรใชงำนรวมกบ CSS (Cascading Style Sheets) และ
JavaScript • ท ำงำนกบภำษำทใชพฒนำ Web Application เชน PHP หรอ ASP ได
อยำงมประสทธภำพเพมขน
หนวยงำนทก ำหนดมำตรฐำน 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 มกำรเปลยนแปลงอยำงเสมอตำม
สถำนะกำรณ และควำมตองกำรทำงเทคโนโลย
มำตรฐำน HTML5 จะจบลงทใด
• ค ำตอบ คอ “ยงไมร”
• แต อปกรณ และ Browser ตำงๆ กเรมสนบสนนกนไปแลว แมวำมำตรฐำน HTML5 ยงไมลงตวกตำม
• ผพฒนำ สำมำรถเรมศกษำและพฒนำได เพรำะมกำรรองรบเพมขน
ขอดของ HTML5
• รองรบอปกรณหลำกหลำยทง Desktop PC, Mac และ Mobile เชน Smart Phone, Tablet
• แสดงภำพ เสยง หรอกรำฟกอนเมชนตำงๆ โดยไมตองตดตงซอฟทแวรเพมเตม • สำมำรถพฒนำโปรแกรมไดเหมอนกบโปรแกรมทใชงำนทวไป ไมใชเพยงแคสรำง
หนำเวบเพจแสดงขอมลอยำงเดยว • เขยนโปรแกรมงำยยงขน โดยเฉพำะบน Mobile ไมตองพฒนำในลกษณะ
Native Apps และไมตองน ำโปรแกรมขน App Store หรอ Google Play • เขยนโปรแกรมไดอยำงมประสทธภำพ เพรำะรองรบกำรตดตอเพอเรยกใชงำน
คณสมบตตำงๆ ของอปกรณโดยเฉพำะ Mobile ได เชนเรยกใชงำนระบบ GPS (แผนท)
CSS3 คออะไร
• หำก HTML ใชในกำรแสดง “ขอมลหรอเนอหำ” บนหนำเวบเพจ CSS คอตวทก ำหนด “รปแบบและลกเลน” ในกำรแสดง “เนอหำ”
– HTML แสดง “เนอหำ”
– CSS ท ำให “เนอหำ” สวย และมลกเลนมำกขน
• CSS ก ำหนดควำมสวยงำม เชน ขนำด (ตวอกษร), ส, กำรจดวำง, ขอบ (Border) และอนๆ อกมำกมำย
• CSS3 คอเวอรชนใหมลำสดของ CSS
• เปนคหของ HTML5
• เรยกใชโดยค ำสงงำยๆ <link rel="stylesheet" type="text/css" href="mystyle.css" />
• หรอสำมำรถเขยนแทรกเขำไปใน HTML ไดเลย แตใน HTML5 เนนใหสรำงไฟล CSS ตำงหำก
<HTML> <HEAD> <TITLE>my first web page</TITLE> </HEAD> <BODY> <h1>This is my web site.</h1> </body> </HTML>
กำรท ำงำนของ HTML5
HTML5
This is my web site
ผชมเขำดเวบเพจผำนอนเทอรเนต
เวบเพจแสดง “ขอมลหรอเนอหำ” ตำมทเขยนไวดวยภำษำ HTML5
1
2 mypage.html
<HTML> <HEAD> <TITLE>my first web page</TITLE>
<link rel="stylesheet" type="text/css" href="mystyle.css" /> </HEAD> <BODY>
<h1> This is my web site. </h1> </body> </HTML>
กำรท ำงำนของ HTML5 กบ CSS3
HTML5
This is my web site
ผชมเขำดเวบเพจผำนอนเทอรเนต
เวบเพจแสดง “ขอมลหรอเนอหำ” ตำมทเขยนไวดวยภำษำ HTML5 ซงจะแสดงในรปแบบทก ำหนดดวย CSS3 ท Link เขำมำ
1
2
h1 {text-shadow: 5px 5px 5px #FF0000;}
CSS3 mystyle.css
mypage.html
ขอดของ CSS3
• ก ำหนดรปแบบทตองกำรแสดงผลจำกทเดยว เวบเพจทกหนำสำมำรถเรยกรปแบบมำตรฐำนไดจำกไฟล CSS เพยงไฟลเดยว
• บรหำรจดกำรในกำรเขยนโปรแกรมไดงำยกวำ
• มลกเลนเพมขนจำก CSS เวอรชนเดม
• สำมำรถมไฟล CSS ไดมำกกวำหนงไฟล และหนำเวบเพจกสำมำรถเรยกไดใชงำนไฟล CSS ไดมำกกวำหนงไฟลเชนกน
JavaScript คออะไร
• JavaScript เปนภำษำทท ำงำนรวมกบ HTML
• ลกเลนตำงๆ ของ HTML5 จะสำมำรถเรยกใชไดอยำงมประสทธภำพดวย JavaScript
• HTML5 = เนอหำ (นงๆ) + CSS3 = รปแบบ (สวยๆ) JavaScript = สงใหประมวลผล (สรำงควำม Dynamic ใหกบเนอหำ)
• เรยกใชโดยค ำสงงำยๆ คอ <script language="javascript" type="text/javascript“ src="../scripts/example.js"></script>
• สำมำรถเขยนแทรกเขำไปใน HTML ไดเลย แตใน HTML5 เนนใหสรำงไฟล JS ตำงหำก
ขอดของ JavaScript
• เขยนโปรแกรมทมควำมซบซอน เชน – สรำง และเรยกดฐำนขอมล เชน ระบบกำรสมครเปนสมำชก และประวตกำร
เรยน เปนตน – ตดตอเรยกขอมลจำกเครองแมขำย เชน เรยกระบบกำรเรยนผำนอปกรณ
Mobile กอำจจะเรยกขอมลบทเรยนใหมๆ – เชอมโยงระบบแผนทของอปกรณ Mobile เพอเรยกดต ำแหนง – จดเกบขอมลทอปกรณ Mobile แบบ Local ท ำใหไมตองเขำอนเทอรเนตทก
ครงทใชงำน – เขยนควบคมกำรท ำงำนของปม เชน ปมบงคบกำรเคลอนไหวของตวละครใน
เกม เปนตน
<HTML> <HEAD> <TITLE>my first web page</TITLE>
<script type="text/javascript“ src="myscript.js"></script> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </HEAD> <BODY> <h1> This is my web site. </h1> </body> </HTML>
กำรท ำงำนของ HTML5/CSS3 และ JavaScript
HTML5
This is my web site
ผชมเขำดเวบเพจผำนอนเทอรเนต
เวบเพจแสดง “ขอมลหรอเนอหำ” ตำมทเขยนไวดวยภำษำ HTML5 ซงจะแสดงในรปแบบทก ำหนดดวย CSS3 ท Link เขำมำ
1
2
mystyle.css CSS3 JavaScript
myscript.js
mypage.html
ขอจ ำกดของ HTML5
• แตละคณสมบตยงมไดมกำรสนบสนนจำกทก Browser และอปกรณ Mobile
• ยงไมประกำศเปนมำตรฐำนทก ำหนดเสรจสนแลว
• กำรใชในรปแบบ Offline (ไมไดตออนเทอรเนต) จะตองมกำรเขยนโปรแกรมเพมเตม
HTML5 เขยนอยำงไร
• ในเวอรชนกอนหนาเราจะเขยนวา HTML 4 แตในเวอรชน 5 รปแบบการเขยนทเปนทางการคอ HTML5 เลข 5 จะตดกบค าวา HTML
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)
HTML5 แสดงผลไดบนทกอปกรณ.... แต
• แตยงไม 100% บนทกอปกรณ • HTML5 คอชดค ำสงในกำรแสดงผลบนหนำจออปกรณตำงๆ
ซงอปกรณตำงๆ ทกลำวถง ไมวำจะเปนบน PC, Mac, Smart Phone หรอ Tablet ลวนแลวแตยงไมสนบสนนทกชดค ำสงของ HTML5 (สนบสนนเปนบำงค ำสง)
• กำรพฒนำจะตองดดวยวำชดค ำสงใดใหกำรสนบสนนแลวโดยอปกรณ หรอ Browser สวนใหญ และชดค ำสงใดยงใหกำรสนบสนนนอยอย
มอะไรใหมใน HTML5
• Canvas: ไดนำมกกรำฟกบนหนำเวบเพจ
• Geolocation: บอกต ำแหนงผใชงำน
• Form: สรำงแบบฟอรมออนไลนงำยยงขน
• Local Storage: เกบขอมล หรอฐำนขอมล (WebSQL) ไดทคอมพวเตอรของผใชงำน
• Media Player: เลนวดโอและเสยงไดอยำงงำยดำย
• Semantics: สรำงควำมหมำยใหขอมล
คณสมบตอยำงเปนทำงกำรของ HTML5 โดย W3C
Class: 3D, Graphics & Effects
SVG, Canvas, WebGL, CSS3 3D ชวยใหคณสำมำรถสรำงหนำเวบเพจบนหนำเครอง Desktop หรอ Mobile ไดอยำงหนำตนตำตนใจ
ตวอยำงกำรใชงำน 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>
โปรแกรมนวำดเปนรปดำว
Canvas: ไดนำมกกรำฟกบนหนำเวบเพจ
• Canvas ชวยใหนกพฒนำสำมำรถสรำงภำพกรำฟก และอนเมชนในรปแบบตำงๆ ไดโดยไมตองใช Flash ท ำใหผใชงำนไมจ ำเปนตองตดตงโปรแกรม Flash Player
• สำมำรถสรำงใหกรำฟกในรปแบบทมกำรตอบโต (Interaction) เชนปมบงคบตำงๆ โดยใช JavaScript เขำชวย
• อปกรณ iOS Device ของ Apple คอ iPhone และ iPad ไมรองรบ Flash แตรองรบ HTML5
ตวอยำงกำรใชงำน 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>
โปรแกรมนวำดเปนรปสเหลยมไลส
ตวอยำงกำรใชงำน 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));
}
ตวอยำงกำรใชงำน WebGL
WebGL เปนคณสมบตในกำรจดกำรเกยวกบภำพ และ 3D ทมควำมซบซอนมำกยงขน
กำรเปลยนสของภำพถำย
คณสมบตอยำงเปนทำงกำรของ HTML5 โดย W3C
Class: Connectivity
เสรมประสทธภำพและควำมเรวดำนกำรเชอมตอ (Web Sockets and Server-Sent Events) กบเครองแมขำยผำนอนเทอรเนต ท ำใหสำมำรถสรำงโปรแกรมประเภทออนไลนเกมส ระบบกำรเรยนรผำนอนเทอรเนต (E-Learning) ระบบกำรสอสำรแบบออนไลน (Chat) กำรเรยกดขอมลแบบ Real-Time
ตวอยำงกำรใชงำน WebSockets
เปนกำรเขยนโปรแกรมท Chat ระหวำงกน
คณสมบตอยำงเปนทำงกำรของ HTML5 โดย W3C
Class: Device Access
ชวยใหกำรเขยนโปรแกรมเพอเขำถงคณสมบตตำงๆ ของอปกรณ Mobile เชน แผนท (Geolocation) กลองถำยรป ไมโครโฟน หรอขอมลเชน รำยชอ (Contact) ท ำไดงำยและรวดเรวยงขน
ตวอยำงกำรใชงำนกบแผนท
ตวอยำงกำรใชงำนกบกลอง
คณสมบตอยำงเปนทำงกำรของ HTML5 โดย W3C
Class: Multimedia
เรยกไฟลวดโอ หรอเสยงใหแสดงดวยกำรเขยนโปรแกรมเพยงไมกบรรทด
Multimedia: เลนวดโอและเสยงไดอยำงงำยดำย
• เปนคณสมบตทเดน และจบตองไดมากทสด
• อปกรณ iPhone/iPad ไมสามารถเลน Flash ได แตอาศยการเลนไฟลเสยงและวดโอ ตลอดจนภาพอนเมชนตางๆ ดวย HTML5
ฟอรแมททสนบสนนดำนเสยงของ HTML5
ตวอยำง Code HTML5 ในกำรใสเสยงทหนำเวบ
<audio controls="controls"> <source src=“testsound.ogg" type="audio/ogg"> <source src=“testsound.mp3" type="audio/mpeg"> Browser ของคณไมสนบสนนการเลนไฟลเสยงดวย HTML5 </audio>
ตวอยำงกำรเลนไฟลเสยง
ฟอรแมททสนบสนนดำนวดโอของ HTML5
ตวอยำง 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>
ตวอยำงกำรแสดงวดโอ
คณสมบตอยำงเปนทำงกำรของ HTML5 โดย W3C
Class: Offline & Storage
HTML5 ท ำใหนกพฒนำสำมำรถเกบขอมลกำรใชงำนโปรแกรม หรอฐำนขอมลทจ ำเปนไวทอปกรณได ท ำใหเวลำใชงำนไมจ ำเปนทจะตองตออนเทอรเนตเสมอไป เทคโนโลยทส ำคญไดแก HTML5 App Cache, Local Storage, Indexed DB และ File API
ตวอยำงกำรใชงำน Local Storage
เมอออกจำกเวบไซตแลว เขำมำใหม มำคลกทปมตอ เลขกจะตอไปเลย ระบบจ ำเลขลำสดไวใน Local Storage
รจกกบ 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
ตวอยำงกำรใชงำนฐำนขอมลดวย HTML5
บนทกขอมลลงฐำนขอมลฝง Client ดวย indexedDB
แนวโนมกำรสนบสนน Offline Web Apps
คณสมบตอยำงเปนทำงกำรของ HTML5 โดย W3C
Class: Performance & Integration
ชวยในกำรสรำง Web Applications ทเรยกขอมลจำกเครองแมขำยดวยเทคโนโลย เชน Web Worker และXMLHttpRequest (กำรเชอมโยงขอมลระหวำง Web Browser และ Web Server) ท ำใหสำมำรถเรยกขอมลไดรวดเรว และท ำงำนในลกษณะ Background ได
อะไรคอ Web Worker
• Web Worker ชวยใหชดค ำสง JavaScript ท ำงำนในรปแบบ Background Mode ท ำใหผใชงำนสำมำรถใชงำนฟงกชนงำนอนๆ บนหนำเวบเพจได โดยไมตองรอให JavaScript ท ำงำนเสรจกอน โดย Web Worker จะสงให JavaScript ท ำงำนโดยไมกระทบกบงำนอนๆ
คณสมบตอยำงเปนทำงกำรของ HTML5 โดย W3C
Class: Semantics
ก ำหนดควำมหมำยใหแกตวแปรตำงๆ ในโปรแกรม HTML ทเขยนได ท ำใหสำมำรถก ำหนดตวแปรทมควำมหมำยได นอกเหนอจำกเพยงแคค ำสงทวไป เชน <body> แตไมรวำใน <body> มอะไรบำง เทคโนโลยทเกยวของเชนRDFa, microdata และ microformats
ตวอยำงกำรใชงำนแนวคดเรอง 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>
ตวอยำงกำรใชงำนแนวคดเรอง Semantics
<section id="section_a">
ตวอยำงกำรใชงำนแนวคดเรอง 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>
ตวอยำงกำรใชงำนแนวคดเรอง Semantics
คณสมบตอยำงเปนทำงกำรของ HTML5 โดย W3C
Class: CSS3
CSS3 เมอใชงำนรวมกบ HTML5 จะชวยก ำหนด “รปแบบ” ในกำรน ำเสนอขอมลไดอยำงยดหยน หลำกหลำย ท ำใหมกำรน ำเสนอมสสรร ทงในรปแบบ 2 มตและ 3 มต
Form: สรำงแบบฟอรมออนไลนงำยยงขน
• สรำงแบบฟอรมออนไลนบนหนำเวบเพจไดงำยยงขน
• ใน HTML เวอรชนกอนหนำ (4.01) จะตองเขยน JavaScript เยอะในกำรจดกำรเกยวกบฟอรม แตใน HTML5 กำรเขยนโปรแกรมจะนอยลง
ค ำสงทเกยวกบ Form ทเพมขนมำใน HTML5
• date
• datetime
• datetime-local
• month
• week
• number
• range
• search
• tel
• time
• color
• url
ตวอยำงหนำจอเครอง Smart Phone ในกำรแสดงรปแบบ Input ของ Form
Date Datetime
ตวอยำงหนำจอเครอง Smart Phone ในกำรแสดงรปแบบ Input ของ Form
Month Time
ตวอยำงหนำจอเครอง Smart Phone ในกำรแสดงรปแบบ Input ของ Form
Range
Flash และ HTML5
• Flash ยงเปนรปแบบทมกำรใชงำนอยำงกวำงขวำงบนโลกอนเทอรเนต
• HTML5 ก ำลงไดรบควำมนยมมำกขน สวนหนงมำจำกกำรทอปกรณ iOS ของ Apple คอ iPhone และ iPad นนไมรองรบ Flash
• Google เองกน ำ HTML5 มำใชงำนมำกยงขน
• ในอนำคต Flash จะยงคงอยเนองจำกครองตลำดมำนำน อยำงไรกด เมอมเครองมอในกำรพฒนำใหมๆ ส ำหรบสรำง HTML5 ออกมำมำกขน นกพฒนำสวนหนงกจะหนไปใช HTML5 มำกขนตำมไปดวย
• อยำงไรกด กำรสนบสนนทงสองรปแบบกยงคงมตอไป เพรำะ Flash เองกยงมขอดอกมำกทใน HTML5 ยงไมม
ดตวอยำงกำรพฒนำโคดดวย HTML5
• http://www.chromeexperiments.com/
แนวโนมกำรใชงำนและกำรสนบสนนมำตรฐำน HTML5
ประเภท แนวโนมกำรสนบสนน Desktop Browser มำกขน
Smart Phone มำกขน
Tablet มำกขน
แนวโนมกำรสนบสนนของ Desktop Browser
แนวโนมกำรสนบสนนของ Smart Phone
แนวโนมกำรสนบสนนของ Tablet
กำรทดสอบกำรรองรบ HTML5 ดวยตวคณเอง
• เขำไปยง Browser ของอปกรณทคณตองกำรทดสอบ
• จำกนนพมพ URL ไปท http://www.html5test.com
• เวบไซตจะแสดงผลกำรทดสอบวำอปกรณและ Browser ทคณใชอยรองรบ HTML5 มำกนอยเพยงไรจำกคะแนนเตม 500
HTML5 กบอปกรณ Mobile
• สงทจะตองค ำนง – ขนำดจอทเลกกวำเครอง Desktop – กำรยอขยำยโดยอตโนมตของรป และตวอกษร – ไมม Scrollbar ดำนขำง – งำยตอกำรแตะ (Touch) – ใชงำนฟงกชนทส ำคญๆ ของอปกรณ Mobile เชน SMS, โทรศพท
, GPS ได เปนตน – สรำง Shortcut บนหนำจอของ Smart Phone หรอ Tablet
สงทจ ำเปนจะตองรเมอจะเขยนโปรแกรมส ำหรบ Mobile
• รวำใชเครอง Mobile หรอ Browser ประเภทไหนเขำมำดโปรแกรมของเรำ ซงอำจจะเปนเครอง Desktop หรอ Mobile กได
• รวำใช “หนำจอ” (Screen Resolution) ขนำดใด
• รวำใช “ตวอกษร” (Font) ขนำดใด
• รวำใช “รป” (Image) ขนำดใด
ตวอยำงโปรแกรมตรวจสอบ 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
}
ขนำดหนำจอของอปกรณ iOS Mobile
ตวอยำงโปรแกรมก ำหนดขนำดของตวอกษร (Font) ตำมแตละอปกรณ
switch(GetBrowser())
{
case('Android') : f = '24pt'; break
case('iPhone') : f = '22pt'; break
case('iPad') : f = '18pt'; break
default : f = '12pt'; break
}
เรองของรป (Image)
• ไมงายเหมอนตวอกษร
• ตองท าขนาดใหญไวกอน แลวคอยยอลง คณภาพจะไดไมเสย
ตวอยำงโปรแกรมก ำหนดขนำดรป (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
}
หนำเวบไซตปกตดผำน Browser บน Desktop PC
หนำเวบไซตดอปกรณ Smart Phone
HTML ปกต
HTML5
สรำง Shortcut บนหนำจอของ Smart Phone หรอ Tablet
• ผใชงำนสะดวกในกำรเขำถง
• เหมอนเปน Native Applications
• ใสรปไอคอน และหนำจอ (Splash Screen) ทตองกำรได
ตวอยำงซอฟทแวรทพฒนำดวย HTML5 บน Smart Phone
เกมสรางโดย HTML5 ปมเคลอนไหว
ปมยง
ซอฟทแวรทพฒนำดวย HTML5 สรำงเมนบนหนำจอ iPhone
เลอก Add to Home Screen
1
ซอฟทแวรทพฒนำดวย HTML5 สรำงเมนบนหนำจอ iPhone
ตงชอ
2
ซอฟทแวรทพฒนำดวย HTML5 สรำงเมนบนหนำจอ iPhone
มปมใหเลอกทหนำจอเหมอน App อนๆ
3
ซอฟทแวรทพฒนำดวย HTML5 สรำงเมนบนหนำจอ Android
คลกปม More
1
ซอฟทแวรทพฒนำดวย HTML5 สรำงเมนบนหนำจอ Android
เลอก Add shortcut to
Home
2
ตวอยำงโคด HTML5 ในกำรสรำง Shortcut บนหนำจอของ Smart Phone หรอ Tablet
<link rel="Shortcut Icon" href="myicon.ico" />
<link rel="apple-touch-icon" href="myicon.png"/>
<meta name="apple-mobile-web-app-capable" content="yes" /> แสดง Application แบบ
Full Screen
รปโลโกทตองกำรแสดงเปนเมน (iOS)
รปโลโกทตองกำรแสดงเปนเมน (Android)
ตวอยำงโคด HTML5 ในกำรสรำง Shortcut บนหนำจอของ Smart Phone หรอ Tablet
link rel="apple-touch-icon-precomposed" href="iphone_icon.png" />
<link rel="apple-touch-startup-image" href=“startimage.png"/>
รปเรมตนกอนเขำโปรแกรม
รปโลโกทตองกำรแสดงเปนเมน (iOS) แตไมตองใสเงำ
หรอขอบให
ขนำดมำตรฐำนของไอคอนบนอปกรณ iOS Mobile
ขนำดมำตรฐำนของไอคอนบนอปกรณ Android Mobile
HTML5 กบกำรสรำงสอกำรเรยนกำรสอนผำน Mobile
• รองรบอปกรณหลำกหลำย • แสดงภำพ เสยง หรอกรำฟกอนเมชนตำงๆ โดยไมตองตดตง
ซอฟทแวรเพมเตม • ไมตองพฒนำในลกษณะ Native Apps และไมตองน ำโปรแกรมขน
App Store หรอ Google Play ผเรยนเขำถงไดงำย และผพฒนำกสำมำรถพฒนำโปรแกรมไดงำย
• รองรบกำรตดตอเพอเรยกใชงำนคณสมบตตำงๆ ของอปกรณโดยเฉพำะ Mobile ได เชนเรยกใชงำนระบบ GPS (แผนท), กลองถำยรป เปนตน
กอตงป 2000: 12 ปแหงกำรพฒนำ Applications
บนเนอท 4 ชน พฒนำระบบ IT ครบวงจร
ทมงำนมออำชพกวำ 60 คน
ขอแสดงควำมขอบคณ
วทร หวงสงวนกจ
withoon@bizpotential.com
Thank you
Recommended