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
IE7

IE8

IE9

FireFox 4.0b7

Opera 11 Alpha

Chrome 8.0

Safari 5.0

iOS 4.2.1

Android 2.2

0 50 100 150 200 250 300

June
http://beta.html5test.com
November

HTML5
0
IE7

27
IE8

0
IE9

139
FireFox 4.0b7

129
Opera 11 Alpha

202
Chrome 8.0

212
Safari 5.0

125
iOS 4.2.1

178
Android 2.2

0 50 100 150 200 250 300

June
November

HTML5
0
IE7
17

27
IE8
27

0
IE9
80

139
FireFox 4.0b7
249

129
Opera 11 Alpha
223

202
Chrome 8.0
252

212
Safari 5.0
220

125
iOS 4.2.1
198

178
Android 2.2
178

0 50 100 150 200 250 300

June
November

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

Canvas / SVG Local Storage

Audio / Video Web Workers

Geolocation Web Socket

Ofﬂine web apps

HTML5 FEATURES

Web Form Web SQL Database

Canvas / SVG Local Storage

Audio / Video Web Workers

Geolocation Web Socket

Ofﬂine web apps ● ● ● ● ●

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.

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

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
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 .

✤ 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

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

header

content

footer

DEMO

(iPhone & Android)

http://bit.ly/zany-mobile

HTML5 를 이용한 하이브리드앱 제작

HTML5 를 이용한 하이브리드앱 제작

More Related Content

Viewers also liked

Similar to HTML5 를 이용한 하이브리드앱 제작

Recently uploaded

HTML5 를 이용한 하이브리드앱 제작

Editor's Notes