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

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 (หรออนๆ)

http://www.facebook.com/

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 ทมควำมซบซอนมำกยงขน

กำรเปลยนสของภำพถำย

ตวอยำงกำรใชงำน CSS3 3D

assets/10-10-2555 17-46-20.mp4


Class: Connectivity

เสรมประสทธภำพและควำมเรวดำนกำรเชอมตอ (Web Sockets and Server-Sent Events) กบเครองแมขำยผำนอนเทอรเนต ท ำใหสำมำรถสรำงโปรแกรมประเภทออนไลนเกมส ระบบกำรเรยนรผำนอนเทอรเนต (E-Learning) ระบบกำรสอสำรแบบออนไลน (Chat) กำรเรยกดขอมลแบบ Real-Time

ตวอยำงกำรใชงำน WebSockets

เปนกำรเขยนโปรแกรมท Chat ระหวำงกน


Class: Device Access

ชวยใหกำรเขยนโปรแกรมเพอเขำถงคณสมบตตำงๆ ของอปกรณ Mobile เชน แผนท (Geolocation) กลองถำยรป ไมโครโฟน หรอขอมลเชน รำยชอ (Contact) ท ำไดงำยและรวดเรวยงขน

ตวอยำงกำรใชงำนกบแผนท

ตวอยำงกำรใชงำนกบกลอง


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>

ตวอยำงกำรแสดงวดโอ


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


Class: Performance & Integration

ชวยในกำรสรำง Web Applications ทเรยกขอมลจำกเครองแมขำยดวยเทคโนโลย เชน Web Worker และXMLHttpRequest (กำรเชอมโยงขอมลระหวำง Web Browser และ Web Server) ท ำใหสำมำรถเรยกขอมลไดรวดเรว และท ำงำนในลกษณะ Background ได

อะไรคอ Web Worker

• Web Worker ชวยใหชดค ำสง JavaScript ท ำงำนในรปแบบ Background Mode ท ำใหผใชงำนสำมำรถใชงำนฟงกชนงำนอนๆ บนหนำเวบเพจได โดยไมตองรอให JavaScript ท ำงำนเสรจกอน โดย Web Worker จะสงให JavaScript ท ำงำนโดยไมกระทบกบงำนอนๆ


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>


Class: CSS3

CSS3 เมอใชงำนรวมกบ HTML5 จะชวยก ำหนด “รปแบบ” ในกำรน ำเสนอขอมลไดอยำงยดหยน หลำกหลำย ท ำใหมกำรน ำเสนอมสสรร ทงในรปแบบ 2 มตและ 3 มต

Form: สรำงแบบฟอรมออนไลนงำยยงขน

• สรำงแบบฟอรมออนไลนบนหนำเวบเพจไดงำยยงขน

• ใน HTML เวอรชนกอนหนำ (4.01) จะตองเขยน JavaScript เยอะในกำรจดกำรเกยวกบฟอรม แตใน HTML5 กำรเขยนโปรแกรมจะนอยลง

ค ำสงทเกยวกบ Form ทเพมขนมำใน HTML5

• date

• datetime

• datetime-local

• email

• month

• week

• number

• range

• search

• tel

• time

• color

• url

ตวอยำงหนำจอเครอง Smart Phone ในกำรแสดงรปแบบ Input ของ Form

Date Datetime


Month Time


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

http://www.html5test.com/



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 ปกต

สรำง Shortcut บนหนำจอของ Smart Phone หรอ Tablet

• ผใชงำนสะดวกในกำรเขำถง

• เหมอนเปน Native Applications

• ใสรปไอคอน และหนำจอ (Splash Screen) ทตองกำรได

ตวอยำงซอฟทแวรทพฒนำดวย HTML5 บน Smart Phone

เกมสรางโดย HTML5 ปมเคลอนไหว

ปมยง

ซอฟทแวรทพฒนำดวย HTML5 สรำงเมนบนหนำจอ iPhone

เลอก Add to Home Screen

1


ตงชอ

2


มปมใหเลอกทหนำจอเหมอน 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 คน

ขอแสดงควำมขอบคณ

วทร หวงสงวนกจ

[email protected]

Thank you