HTML5 Mobile Application Technology

조만영 대표이사 / 미래웹기술연구소

http://w3labs.kr

발표자 소개

(현) 미래웹기술연구소㈜ 대표이사

(현) W3C 대한민국 사무국 Staff

(전) 오페라소프트웨어 Presales Engineer 부장

(전) 유니퀘스트 경영기획실

(전) 나모인터랙티브 웹개발팀

E-Mail : manyoung@w3labs.kr, manyoung@w3.org

Twitter : @manyoungc

Page 1-2

http://w3labs.kr Page 3

미래웹기술연구소 소개

HTML5 및 웹표준 기술 전문 연구 강의, 교육

HTML5 모바일 개발 및 앱개발

웹기술기반 아이폮, 안드로이드앱 개발 및 컨설팅

아이패드, 안드로이드 패드용 전자책 개발

웹기술과 가전제품의 융합 선행연구

http://w3labs.kr

WEB AS MOBILE APPLICATION

Page 4

http://w3labs.kr

Web as Mobile Application

Page 5

웹기술은 어플리케이션을 구현할 수 있는 수준으로 발전 예) Google Maps, Google Docs

모바일기기에서 웹기술을 응용한 어플리케이션 제작증가

W3C에서는 이러한 흐름을 반영한 표준화들이 짂행중

http://w3labs.kr

애플리케이션의 구성 요소

Page 6

Web Application

Text

Graphics

Multimedia

User Interactions

Forms

Content

User Input

WEB

Storage

User

Other Users

Other Applications

Network Communication

Sensors & Hardwares

Packaging

http://w3labs.kr

W3C STANDARDIZATION

Page 7

http://w3labs.kr

W3C 표준화 단계

Page 8

Recommendation

Proposed Recommendation

Candidate Recommendation

Last Call Working Draft

Working Draft

http://w3labs.kr

표준화가 짂행중인 애플리케이션 기반기술

Page 9

Graphics, Multimedia

User Interaction, Forms

Data Storage

Sensors and Hardware Integration

Network, Communication

Packaging

Performance and Optimization

http://w3labs.kr

GRAPHICS, MULTIMEDIA

Page 10

http://w3labs.kr

Graphcis W3C Standard

Page 11

Bitmap image : HTML5 Canvas http://dev.w3.org/html5/spec/the-canvas-element.html

Vector Graphic : SVG(Scalabe Vector Graphics)

http://www.w3.org/TR/SVG/

CSS

http://www.w3.org/TR/CSS21/

http://w3labs.kr

HTML5 Canvas Example

Page 12

http://www.benjoffe.com/code/demos/interpolate/

http://9elements.com/io/projects/html5/canvas/

http://www.nihilogic.dk/labs/mariokart/

http://w3labs.kr

Canvas Drawing API 의 종류

Line

Rectangle

Arc

Curve

Image

Text

http://w3labs.kr

선(Line)

선 그려보기

beginPath() 를 통해 선의 시작을 선언

moveTo() 이용 시작점으로 이동

lineTo()를 통해 원하는 좌표까지 선을 그린다

stroke()를 통해 그림을 표시한다

(30,20) (130,20)

(130,70)

ctx.beginPath();

ctx.moveTo(30, 20);

ctx.lineTo(130, 20);

ctx.lineTo(130, 70);

ctx.stroke();

//ctx.fill();

http://w3labs.kr

직사각형

직사각형 그려보기

직사각형 관련 method 는 세번째, 네번째 인자가 width, height(픽셀값) 임을

주의한다.

(10,10) ctx.strokeStyle = "red";

ctx.lineWidth = 3;

ctx.fillRect(10,10, 90,90);

ctx.strokeRect(10,10,90,90);

ctx.clearRect(55,55,100,100);

(100,100)

90px

http://w3labs.kr

원(Arc)

곡선과 원 그려보기

http://w3labs.kr

곡선(Curve)

곡선 그리기의 이해

http://w3labs.kr

이미지(Image)

이미지 삽입 Method

Type Method() /

Attribute Description

Image

drawImage( imageObj, destX, destY)

이미지 표시. imageObj : 이미지 객체 descX : 이미지 위치 x 값 descY : 이미지 위치 y 값

ctx.drawImage( imageObj, 10,20);

drawImage( imageObj, destX, destY, destWidth, destHeight)

이미지 표시. imageObj : 이미지 객체 descX : 이미지 위치 x 값 descY : 이미지 위치 y 값 destWidth : 이미지 폭 descHeight : 이미지 높이

ctx.drawImage( imageObj, 10,20,

100,200);

http://w3labs.kr

SVG

Page 19

SVG http://www.nissanusa.com/leaf-electric-car/index#/leaf-electric-car

http://pepsicozeitgeist.com/

http://g.raphaeljs.com/piechart2.html

http://w3labs.kr

CSS3

Page 20

CSS3 http://www.zurb.com/playground/osx-dock

http://paulbakaus.com/lab/js/coverflow/

http://w3labs.kr

CSS3

2D transforms

Borders, backgrounds, box-shadows

http://people.opera.com/pepelsbey/experiments/bdi/

http://people.opera.com/pepelsbey/experiments/bdr/

http://people.opera.com/andreasb/demos/demo_textshadow/demo_t

extshadow1.html

http://people.opera.com/andreasb/demos/demo_textshadow/demo_t

extshadow3.html

http://w3labs.kr

CSS3

Traditional mouse rollover technic

<img src=”img.gif" onmouseover="this.src=‘image_over.gif';"

onmouseout="this.src=’img.gif';">

Animated transition

http://people.opera.com/patrickl/experiments/css3/transitions/

http://people.opera.com/dstorey/transitions/transition-timing-

example.html

http://people.opera.com/andreasb/temp_toshiba/stack/

http://w3labs.kr

CSS3

Webfonts

@font-face { font-family:’fontname'; src:url (fontfile);}

OTF, TTF, SVG

http://devfiles.myopera.com/articles/751/newspaper.html

http://devfiles.myopera.com/articles/751/japanese-newspaper.html

http://w3labs.kr

USER INTERACTION, FORMS

Page 24

http://w3labs.kr

Drag and Drop

http://www.w3.org/TR/html5/dnd.html

Page 7-25

http://w3labs.kr

Touch Event

Page 26

Web Event Working Group

http://www.w3.org/2010/webevents/charter/Overview.html

http://w3labs.kr

User Interactions

Page 27

Feature Specification Working Group Maturity Current implementations

Touch-based interactions Touch Events Specification (no public draft yet) Web Events Working Group N/A Growing deployment

Vibration N/A Device API & Policy N/A None

Intent-based events N/A Web Events Working Group N/A None

Notification Web Notifications (no public draft yet) Web Notifications Working Group N/A None

Speech-based interactions N/A HTML Speech Incubator Group N/A N/A

http://w3labs.kr

Web Forms 2.0

http://people.opera.com/andreasb/demos/demo_webforms/webf

orms2demo.html

New input type : number, email, url, range, etc

New button type : move-up, move-down

Datalist

Autofocus

Form validation

http://w3labs.kr

Forms

Page 29

Feature Specification Working Group Maturity Current implementations

Date and time entries HTML5 Date and Time state of input element

HTML Working Group Working Draft

Limited

Customized text entries (tel, email, url)

HTML5 telephone, email and URL state of input element

Limited (?)

Input pattern HTML5 pattern attribute Very limited (?)

Input hint HTML5 placeholder attribute

Limited (?)

Pre-defined values for text entries

HTML5 datalist element Very limited (?)

http://w3labs.kr

DATA STORAGE

Page 30

http://w3labs.kr

Html5demos.com

Page 31

http://w3labs.kr

Data Storage

Page 32

Feature Specification Working Group Maturity Current implementations

Simple data storage Web Storage Web Applications Working Group

Working Draft Well deployed

File reading File API Web Applications Working Group

Working Draft Limited (?)

File writing File API: Writer Web Applications Working Group

Working Draft Limited (?)

Filesystems operations File API: Directories and System

Web Applications Working Group

Working Draft None

Database query/update Indexed Database API Web Applications Working Group

Working Draft Very limited (?)

Addressbook data Contacts API Device APIs & Policy Working Group

Working Draft Very limited

Calendar data Calendar API (no public draft yet)

Device APIs & Policy Working Group

N/A Very limited

http://w3labs.kr

SENSORS AND HARDWARE INTEGRATION

Page 33

http://w3labs.kr

Geolocation

Page 34

http://studio.html5rocks.com/#Geolocation

http://w3labs.kr

Sensors and Hardware Integration

Page 35

Feature Specification Working Group Maturity Current implementations

Geolocation Geolocation API Geolocation Working Group

Candidate Recommendation

Widely deployed

Accelerometer / Orientation

DeviceOrientation Event Specification (no public draft yet)

Geolocation Working Group

N/A Limited

Generic sensors The System Information API

Device APIs & Policy Working Group

Working Draft None

Camera & Microphone capture

The Media Capture API Device APIs & Policy Working Group

Working Draft None (?)

http://w3labs.kr

NETWORK

Page 36

http://w3labs.kr

Network

Page 37

Feature Specification Working Group Maturity Current implementations

HTTP(s) network API XMLHttpRequest Web Applications Working Group

Candidate Recommendation

Widely deployed

XHR2 XMLHttpRequest Level 2 Web Applications Working Group

Working Draft Very limited (?)

Cross-domain requests Cross-Origin Resource Sharing

Web Applications Working Group

Working Draft Getting deployed (?)

Server-pushed requests Server-Sent Events Web Applications Working Group

Working Draft Limited (?)

Bidirectional connections The WebSocket API Web Applications Working Group

Working Draft None (?)

on-line state HTML5 onLine DOM state HTML Working Group Working Draft Getting deployed

Network characteristics Network Property in The System Information API

Device APIs & Policy Working Group

Working Draft None

http://w3labs.kr

COMMUNICATION

Page 38

http://w3labs.kr

Communication

Page 39

Feature Specification Working Group Maturity Current implementations

Emails, SMS and MMS

with generated

attachments

The Messaging API Device APIs & Policy

Working Group Working Draft None

Inter-app communications HTML5 Web Messaging Web Applications Working

Group Working Draft Limited (?)

Inter-app triggers None Possibly Device APIs &

Policy Working Group N/A None

P2P connections None

Proposed Web Real-Time

Communications Working

Group

N/A None

P2P Video/Audio streams None

Proposed Web Real-Time

Communications Working

Group

N/A None

http://w3labs.kr

PACKAGING

Page 40

http://w3labs.kr

Packaging

Page 41

Feature Specification Working Group Maturity Current implementations

Application Cache HTML5 Application Cache HTML Working Group Working Draft Getting deployed

Widgets

Widgets Packaging &

Configuration

Web Applications Working

Group

Last Call Getting deployed

Digital Signatures for

Widgets

Candidate

Recommendation Getting deployed

Widget Access Request

Policy

Candidate

Recommendation Limited

http://w3labs.kr

PERFORMANCE AND OPTIMIZATION

Page 42

http://w3labs.kr

Performance and Optimization

Page 43

Feature Specification Working Group Maturity Current implementations

Timing hooks Navigation Timing Web Performance Working

Group Last Call None (?)

Threading Web Workers Web Applications Working

Group Working Draft Limited (?)

Optimization Best

Practices

Mobile Web Application

Best Practices

Mobile Web Best Practices

Working Group (now

closed)

Standard N/A

http://w3labs.kr

BROWSER IMPLEMENTATION

Page 44

http://w3labs.kr

Desktop Browser Trend

Page 1-45

http://gs.statcounter.com/#browser-ww-monthly-201003-201103-bar

http://w3labs.kr

HTML5 and Desktop Browser

Page 1-46

http://www.findmebyip.com/litmus

http://w3labs.kr

HTML5 and Mobile Browser

2010년 7월 현재

Page 1-47

http://www.liftagency.com/2010/07/20/html5_test_score_full.png

http://w3labs.kr

Quirksmode.org

Page 48

http://w3labs.kr

SUMMARY

Page 49

http://w3labs.kr Page 50

애플리케이션 기반 기술로서 웹기술의 고도화

웹기술은 네이티브 영역에 다뤄지는 내용들까지 포용하는 방향으로 표준화 짂행. 예) HTML5 Video

스마트폮 대중화와 함께 각종 모바일 서비스를 웹기반으로 제작하여 앱으로도 응용하고자 하는 요구 발생

데스크탑환경에서 전자상거래, Web 2.0, Open API, Mash Up, SNS 를 통해 검증된 웹기술의 애플리케이션화

웹기술의 고도화

모바일 환경에서 접목하려는 시장의 요구

데스크탑 환경에서 웹기술을 애플리케이션으로 응용

http://w3labs.kr Page 51

참고자료

Standards for Web Applications on Mobile: February 2011 current state and roadmap http://www.w3.org/2011/02/mobile-web-app-state.html

http://w3labs.kr Page 52

조만영 / 미래웹기술연구소 대표이사 manyoung@w3labs.kr http://w3labs.kr @w3labskr

감사합니다. 질의 응답 시갂