View
4
Download
0
Category
Preview:
Citation preview
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
감사합니다. 질의 응답 시갂
Recommended