HTML5 웹 표준과 모바일 개발

W3 iP ho ne
C
ery
bile
HTML5

jQu
5
Mo
Ph

L
on

TM
eG

(@ohmyzany)
ap

HISTORY OF HTML
1989 Tim Berners-Lee, HTML Tags CERN
1994 May The First WWW conference Geneva
1994 Sep IETF sets up HTML working group
1995 Nov HTML 2.0 IETF
1997 Jan HTML 3.2 W3C
1997 Dec HTML 4.0 W3C
1999 Dec HTML 4.01 W3C
2000 XHTML 1.0 W3C
2002 XHTML 2.0 W3C
2004 Web Applications 1.0 WHATWG
2007 HTML5 Working Group W3C
2010 Oct HTML5 Last Call Working Draft W3C

HTML5
Jun, 2010
Nov, 2010
Mar, 2011

http://beta.html5test.com

HTML5
Jun, 2010
IE7 Nov, 2010
Mar, 2011

IE8

IE9 RC

FireFox 4.0 b12

Opera 11 Alpha

Chrome 10.0

Safari 5.0

iOS 4.3

Android 2.3

0 50 100 150 200 250 300

HTML5
Jun, 2010
0
IE7 Nov, 2010
Mar, 2011
27
IE8

0
IE9 RC

139
FireFox 4.0 b12

129
Opera 11 Alpha

202
Chrome 10.0

212
Safari 5.0

125
iOS 4.3

178
Android 2.3

0 50 100 150 200 250 300

HTML5
Jun, 2010
0
IE7 17 Nov, 2010
Mar, 2011
27
IE8 27

0
IE9 RC 80

139
FireFox 4.0 b12 249

129
Opera 11 Alpha 223

202
Chrome 10.0 252

212
Safari 5.0 220

125
iOS 4.3 198

178
Android 2.3 178

0 50 100 150 200 250 300

HTML5
Jun, 2010
0
IE7 17 Nov, 2010
17
Mar, 2011
27
IE8 27
32

0
IE9 RC 80
130

139
FireFox 4.0 b12 249
255

129
Opera 11 Alpha 223
234

202
Chrome 10.0 252
288

212
Safari 5.0 220
228

125
iOS 4.3 198
206

178
Android 2.3 178
182

0 50 100 150 200 250 300

HTML5

✤ HTML5 - http://bit.ly/chh79p

✤ - http://beta.html5test.com (http://
html5test.com)

DOCTYPE

<!DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN">

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">

<!DOCTYPE html>

STRUCTURAL ELEMENTS

Before After
http://html5doctor.com/designing-a-blog-with-html5/

HTML5 FEATURES

Web Form Web SQL Database
Indexed Database

Canvas / SVG Web Storage

Audio / Video Web Workers

Geolocation Web Socket

Web GL

HTML5 FEATURES

Web Form Web SQL Database
Indexed Database

Canvas / SVG Web Storage

Audio / Video Web Workers

Geolocation Web Socket

Web GL ● ● ● ● ●

FORM

<canvas> For making graphics with a script.

<datalist> A list of options for input values.

<keygen> Generate keys to authenticate users.

For different types of output, such as
<output>
output written by a script.

INPUT TYPE

tel week

search time

url datetime-local

email number

datetime range

date color

month

INPUT TYPE

<input type=‘color’/>

<input type=‘datetime’/>
<input type=‘number’/>

INPUT TYPE RANGE

<input type=‘range’ min=’0’ max=‘100’ step=’1’/>

INPUT PLACEHOLDER

<input type=‘text’ id=‘userid’ placeholder=‘ ’/>
<input type=‘password’ id=‘passwd’ placeholder=‘ ’/>

INPUT

input required

, URL

DATALIST

<input type="text" list="favorite_cars"/>
<datalist id="favorite_cars">
<option label="210hp" value="Kia K5"/>
<option label="270hp" value="Kia K7"/>
<option label="235hp" value="Hyundai Genesis"/>
<option label="360hp" value="Hyundai Equus"/>
<option label="174hp" value="BMW Mini Cooper"/>
<option label="236hp" value="BMW Mini Cooper S"/>
</datalist>

INPUT TYPE

<input type=‘text’/> <input type=‘email’/>

INPUT TYPE

<input type=‘number’/> <input type=‘tel’/>

For multimedia content, sounds, music or
<audio>
other audio streams.

For video content, such as a movie clip or
<video>
other video streams.

For media resources for media elements,
<source>
deﬁned inside video or audio elements.

<embed> For embedded content, such as plug-in.

AUDIO, VIDEO TAG
Video Audio
Ogg Ogg
MPEG-4 H.264 WebM PCM MP3 AAC WebM
Theora Vorbis

IE9 YES YES YES

Firefox 4
YES YES YES YES YES
beta 7
Safari
YES YES YES YES YES
5.0.2
Chrome
YES YES YES YES YES YES YES YES
8.0
Opera
YES YES YES YES YES
11.0
iOS
YES YES YES YES YES
4.2.1
Android
2.2
http://html5test.com

VIDEO TAG
<video id="video" poster="../video/poster.png" autobuffer>
<source src="../video/myvideo.ogv"/>
<source src="../video/myvideo.webm"/>
<source src="../video/myvideo.m4v"/>
</video>

<script>
var videoObj = document.getElementById("video");
</script>

currentTime ended ?

duration paused ?

volume pause()

play()

WEB GL

✤ 3D .

✤ OpenGL ES 2.0 JavaScript .

✤

, ,

NVIDIA, AMD,

WEB GL

http://bodybrowser.googlelabs.com

WEB GL

http://blog.nihilogic.dk/2009/11/webgl-musical-solar-system.html

DEVICE APIS AND POLICY WORKING GROUP

Calendar Contacts
Address-book

Camera Messaging
and microphone (SMS, MMS, Emails)

System info Device Interfaces
(CPU, Network, etc)

Application Launcher
(KangChan Lee, WonSuk Lee)
● ● ●

DEVICE APIS AND POLICY WORKING GROUP

Calendar Contacts
Address-book

Camera Messaging
and microphone (SMS, MMS, Emails)

System info Device Interfaces
(CPU, Network, etc)

Application Launcher
(KangChan Lee, WonSuk Lee)
● ● ●

Device APIs and Policy Working Group Meeting
The DAP WG is planning to have a F2F in Seoul, South Korea
on March 15-18 2011, hosted by ETRI.

HTML5
WEB STORAGE
WEB APPLICATION SOFTWARE METHODS AND PROTOCOLS USED FOR STORING DATA IN A WEB BROWSER.
WEB STORAGE SUPPORTS PERSISTENT DATA STORAGE, SIMILAR TO COOKIES, AS WELL AS WINDOW-LOCAL STORAGE.

HTML5 WEB STORAGE API

✤ Cookie .

✤ Cookie .

4KB .

HTTP Request .

.

.

.


✤ HTML5 Web Storage

.

5MB .

.

Key - Value

LocalStorage, SessionStorage 2 .


LocalStorage SessionStorage

( ) ( )


var sKey = $(“#txtKey”).val();
var sValue = $(“#txtValue”).val();

try {
localStorage.setItem(sKey, sValue);
} catch (e) {
if (e == QUOTA_EXCEEDED_ERR) {
alert(“ .”);
}
}

Key-Value pair


var sKey = “userName”;

localStorage.getItem(sKey);
localStorage.removeItem(sKey);
localStorage.clear();

SessionStorage LocalStorage
.

HTML5
WEB SQL DATABASE
AN API FOR STORING DATA IN DATABASES THAT CAN BE QUERIED USING A VARIANT OF SQL.

HTML5 WEB SQL DATABASE

✤ SQL .

✤ SQLite

✤ (http://www.caniuse.com/#search=sql)

Google Chrome 7.0 ⇧ / Apple Safari 3.2 ⇧

Opera 10.5 ⇧ / iOS Safari 3.2 ⇧ / Android 2.1 ⇧

IE FireFox

✤ Indexed Database .


✤ Indexed Database
Web SQL Database

JavaScript .

( / )

SQL .

SQL

(Key-Value )

Firefox 4.0 beta 12 .


✤ Web SQL Database

openDatabase : .

transaction : . commit / rollback.

executeSql : SQL Query .


✤ openDatabase

( Open)

var db = openDatabase('mydb', '1.0', 'sample db', 2 * 1024 * 1024);
db.transaction(function (tx) {
// here be the transaction
// do SQL magic here using the tx object
});

openDatabase Parameters

Creation callback


✤

executeSql SQL .


tx.executeSql('CREATE TABLE IF NOT EXISTS foo (id unique, text)');

tx.executeSql('INSERT INTO foo (id, text) VALUES (1, "synergies")');
});


✤ executeSql

.


var userID = document.getElementById('userId').value;
var userName = document.getElementById('userName').value;

tx.executeSql('CREATE TABLE IF NOT EXISTS foo (id unique, text)');
tx.executeSql('INSERT INTO foo (id, text) VALUES (?, ?)', [userID, userName]);
});


✤

executeSql
ResultSet .


tx.executeSql('SELECT * FROM foo', [], function (tx, results) {
var len = results.rows.length, i;
for (i = 0; i < len; i++) {
alert(results.rows.item(i).text);
}
});
});

HTML5
GEOLOCATION
THE GEOLOCATION API DEFINES A HIGH-LEVEL INTERFACE TO
LOCATION INFORMATION ASSOCIATED ONLY WITH THE DEVICE HOSTING
THE IMPLEMENTATION, SUCH AS LATITUDE AND LONGITUDE

HTML5 GEOLOCATION API

✤ API.

✤ GPS .

WPS : WiFi Positioning System

✤ , , , , , .

✤ navigator.geolocation object

HTML5 GEOLOCATION API

if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(success, error);
} else {
alert(“browser does not support geolocation”);
}

function success(position) {
alert(“latitude=” + position.coords.latitude + “, ”
+ “longitude=” + position.coords.longitude);
}

function error(e) {
alert(“Error”);
}

HTML5
WEBSOCKET
A TECHNOLOGY PROVIDING FOR BI-DIRECTIONAL,
FULL-DUPLEX COMMUNICATIONS CHANNELS,
OVER A SINGLE TRANSMISSION CONTROL PROTOCOL (TCP) SOCKET

?

✤ TCP Socket
IETF .

✤ 1 TCP .

✤ , ,
.

✤ JavaScript setInterval()
Reverse Ajax (Comet) .

[Constructor (in DOMString url, in optional DOMString protocol)]
interface WebSocket {
readonly attribute DOMString URL;

const unsigned short CONNECTING = 0;
const unsigned short OPEN = 1;
const unsigned short CLOSED = 2;
readonly attribute unsigned short readyState;
readonly attribute unsigned long bufferedAmount;

attribute Function onopen;
attribute Function onmessage;
attribute Function onclose;
boolean send(in DOMString data);
void close();
};
WebSocket implements EventTarget;

WebSocket Client API Working Draft - 2009 12 22

[Constructor (in DOMString url, in optional DOMString protocol)]
[Constructor (in DOMString url, in optional DOMString[] protocols)]
interface WebSocket {
readonly attribute DOMString URL;

const unsigned short CONNECTING = 0;
const unsigned short OPEN = 1;
const unsigned short CLOSING = 2;
const unsigned short CLOSED = 3;
readonly attribute unsigned short readyState;
readonly attribute unsigned long bufferedAmount;

attribute Function onopen;
attribute Function onmessage;
attribute Function onerror;
attribute Function onclose;
readonly attribute DOMString protocol;
void send(in DOMString data);
void close();
};
WebSocket implements EventTarget;

WebSocket Client API Editor’s Draft - 2010 12 14

WebSocket Server
Opening handshake

✤ JavaApplet Flash HTTP Header
.

(Firewall Circumvention Attack)

Host Header ,
( ) .

Cache Poisoning Attack

Proxy Cache .

✤ (Firewall Circumvention Attack)
attacker.com:843 port origin Flash

.

swf attacker.com:80 .

Flash Player attacker.com:843 , .

swf attacker.com:80 .

swf Host Header .

Transparent Proxy HTTP Request , Host

Header .( IP Address (2.2.2.2) Host Header (target.com;
1.1.1.1) ...)

✤ Cache Poisoning Attack
Java Applet attacker.com:80 .

Java Applet Host Header .

Transparent Proxy Data HTTP request ,

IP .

HTTP Expires header .

Host Header

http://www.google.com/script.js ( http://attacker.com/script.js )

, http://www.google.com/script.js

, .

✤ Proxy Upgrade-based, POST-based
WebSocket Handshake .

✤ CONNECT mechanism
.

✤ Firefox 4 beta 8 Opera 11.0 WebSocket
.

✤ Firefox
. (http://hacks.mozilla.org/2010/12/websockets-disabled-in-ﬁrefox-4/)

?

✤ ,
Native SDK
.

✤ , Native SDK
.

✤ iPhone Safari

http://splax.net/m

http://www.touchapp.co.uk/iphone

✤

, .

.

.

✤

.

Native .

Native SDK
HTML, CSS, JavaScript
(iPhone SDK, Android SDK...)

Native SDK
(Native Native )

Native Browser

Native

HTML, CSS,
JavaScript

JQTouch,
JQueryMobile

Native Framework

HTML, CSS,
JavaScript

JQTouch,
JQueryMobile

iPhone SDK
Android SDK

Native Framework

HTML, CSS,
JavaScript

JQTouch,
JQueryMobile

iPhone SDK
Android SDK

Native App
Native Framework

HTML, CSS,
JavaScript

JQTouch,
JQueryMobile

iPhone SDK
Android SDK

Native App App Store
Native Framework

HTML, CSS,
JavaScript

JQTouch,
JQueryMobile

✤ (iPhone, Android, Blackberry, Tablet PC...)

✤ iPhone / iPad Native SDK
Macintosh .

✤ Android Windows, Mac, Linux .

✤ Blackberry Windows .

Macintosh .

✤ Xcode 3.2.4

iOS4

✤ Eclipse Galileo

✤ PhoneGap Framework

✤ JQuery Framework (for JQueryMobile)

✤ JQueryMobile or JQTouch Framework

✤ Android SDK & Blackberry SDK

PHONEGAP
BUILDING CROSS-PLATFORM MOBILE APPS
IN HTML, CSS AND JAVASCRIPT

PHONEGAP ?

✤ HTML, CSS, JavaScript
.

.

✤ HTML5 .

, .

JQUERY MOBILE
TOUCH-OPTIMIZED WEB FRAMEWORK
FOR SMARTPHONES & TABLETS

JQUERY MOBILE

✤ JavaScript Framework.

✤ UI Layout .

Theme .

✤ Event .

Tap, Swipe, Orientation, Scroll...

✤ JQuery Framework

Ajax, Animation, Transitions, Dialogs...

JQUERY MOBILE
<link rel="stylesheet" href="./script/jquery.mobile-1.0a2.min.css"/>
<script src="./script/jquery-1.4.4.min.js"></script>
<script src="./script/jquery.mobile-1.0a2.min.js"></script>

✤ <head> JQueryMobile
.

✤ .

✤ Alpha 3... ...

JQUERY MOBILE

<meta name="apple-touch-fullscreen" content="yes" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="viewport" content="width=device-width, initial-scale=1.0,
maximum-scale=1.0, user-scalable=0;"/>
<meta charset="UTF-8">

<title>Hybrid App Demos - zany.kr</title>

<link rel="apple-touch-startup-image" href="./images/splash_iphone4.png"/>
<link rel="apple-touch-icon" href="./images/icon.png"/>

<link rel="stylesheet" href="./base.css" />
<link rel="stylesheet" href="./script/jquery.mobile-1.0a2.min.css" />
<script src="./script/jWebSocket.js"></script>
<script src="./script/jquery-1.4.4.min.js"></script>
<script src="./script/jquery.mobile-1.0a2.min.js"></script>

<script src="http://maps.google.com/maps/api/js?sensor=true"></script>

JQUERY MOBILE

$(document).bind("mobileinit", function() {
// Initialize
});

$(document).ready(function() {
// Document Ready
});

JQUERY MOBILE

<div data-role="page">
<div data-role="header">...</div>
<div data-role="content">...</div>
<div data-role="footer">...</div>
</div>

header

content

footer

JQUERY MOBILE
<body onload="onBodyLoad()">
<div data-role="page" data-theme="a" id="main">
<div id="headerArea" data-role="header">
<h1>HybridApp Demo</h1>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">
<li data-role="list-divider">Demo List</li>
<li><a href="#inputDemo">Input Demo</a></li>
<li><a href="#progressDemo">Progress Demo</a></li>
<li><a href="#webstorageDemo">WebStorage Demo</a></li>
<li><a href="#geolocationDemo">Geolocation Demo</a></li>
<li><a href="#googleMapDemo">GoogleMap Demo</a></li>
<li><a href="#websocketChat">WebSocket Chatting</a></li>
<li><a href="./list_basic.html" rel="external">Basic ListView</a></li>
</ul>
</div>
<div data-role="footer">
<h4><a href="http://zany.kr">http://zany.kr</a></h4>
</div>
</div>
...
</body>

JQUERY MOBILE
<div data-role="page" data-theme="a" id="googleMapDemo">
<div data-role="header">
<h1>GoogleMap Demo</h1>
</div>
<div data-role="content">

<div id="mapDivTrackingYes">
<input type="button" id="btnTrackingYes" value="Start Tracking"/>
</div>
<div id="mapDivTrackingNo">
<input type="button" id="btnTrackingNo" value="Stop Tracking"/>
</div>

<div id="mapLogArea"></div>
<div id="map_canvas"></div>

</div>
<div data-role="footer">
<h4><a href="http://zany.kr">http://zany.kr</a></h4>
</div>
</div>

JQUERY MOBILE
$("#googleMapDemo").live("pageshow", function() {

$("#mapDivTrackingNo").hide();

if (isSupportGeolocation()) {
navigator.geolocation.getCurrentPosition(mapSuccess, mapError);
}

});

function mapSuccess(position) {

mapLatitude = position.coords.latitude;
mapLongitude = position.coords.longitude;

$("#mapLogArea div").remove();
$("<div></div>").html(""
+ "Lat: " + mapLatitude + ", "
+ "Lon: " + mapLongitude).css("color","#228822").appendTo("#mapLogArea");

latlng = new google.maps.LatLng(mapLatitude, mapLongitude);

... ...

}

✤ .

✤ Firebug Chrome .

✤ ...

.

✤

http://caniuse.com http://html5test.com

DEMO

(iPhone & Android)

http://bit.ly/zany-mobile

HTML5 웹 표준과 모바일 개발

HTML5 웹 표준과 모바일 개발

Recommended

Recommended

More Related Content

Recently uploaded

Recently uploaded (20)

Featured

Featured (20)

HTML5 웹 표준과 모바일 개발

Editor's Notes