차세대 모바일 웹 ui/ux 기술 및 표준화 동향 (기조발표)

차세대모바일웹 UI/UX 기술및표준화동향

Jonghong JeonETRI, SRC

Email: [email protected] Blog: http://mobile2.tistory.com

http://twitter.com/hollobit

http://www.etri.re.kr

3

Why Web : Screen Convergence

4

Why Web : Platform War & Fragmentation

5

Web UI/UX의기본기술요소

6

HTML과 Web API의진화

7

Case : Audio

http://daftpunk.themaninblue.com/

8

Case: SVG

http://slaveryfootprint.org/

9

Case : Canvas + WebGLhttp://www.myrobotnation.com/

10

Case : WebGL + LocalStorage

http://chrome.angrybirds.com/

11

Case : SVG + WebGL

http://www.cuttherope.ie/

12

Case : Offline & N-Screen

https://read.amazon.com

13

Case : Hybrid Web

http://www.wunderlist.com/

14

Case : Web OS & UI

15

Web RTC(Real-time Communication) API

http://www.w3.org/2010/12/webrtc-charter.html

16

기타 – The Web platform

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

17

Web App Framework 전성시대

Mobile Web Application Framework Sencha Touch, jQuery Mobile, WebApp.net, DTHMLX

touch, jQTouch, iWebKit, Jo HTML5 Mobile App framework, iUI, Sproutcore, Zepto.js, AML, WebView, Adobe Air

Hybrid Web application Framework Titanium Appcelerator, Phonegap, App inventor,

Droidraw, Rhomobile, Appspresso, HyWAI Lite

18

JavaScript 전성시대

JavaScript Libraries http://bit.ly/tVFW6Y Application Frameworks, Server Side Library, Testing Frameworks Game Engines, Animation Library, Image manipulation

• Akihabara, IMPACT, enchant.js, Unity3D

Server-side JavaScript Node.js : Evented Server-Side Javascript http://nodejs.org

• Google Chrome의 Javascript Engine V8을 단독으로 사용• 모든 Network I/O는 NonBlocking, File I/O는 Asynchronous • Thread 방식에 비해 뛰어난 성능• HTTPd, FTPd, IMAP, WebDAV 등 다양한 서버모듈

Javascript로 컴파일 되는 언어들 http://j.mp/hp2pnR CoffeeScript & Kaffeine : Javascript를 더 간결하게 J2js Java ByteCode to JS, Script# C# to JS

19

모바일 HTML5 Web App 관련책들

20

Web UI의변화, 현재와미래

Sensors: Voice, Video, Sensing devices 카메라, 마이크, 터치, 가속, 자이로, 온도계, 위치, 제스처 …

M2M & Web of Things증강 브라우징, 위치기반 브라우징 …

Gopher

Keyboard

1차원Link

Mosaic

Mouse

2차원Link

PCIE

Mouse

Event

Mobile

Touch

Sensing

1995 2000 2005 2010

21

Web of Things

22

Mobile Web 1.0, 2.0 …. 3.0

새롭게 나타나는 사용자 특징들과 변화들

지금우리가알고있는모바일웹이전부일까 ?

더편한미래웹 UI/UX를위해필요한것은 ?

24

참고할만한자료들

2011 in review: 20 HTML5 sites that changed the game http://bit.ly/siSW2O

HTML5 - http://dev.w3.org/html5/spec/Overview.html

HTML5: Edition for Web Authors http://dev.w3.org/html5/spec-author-view/

HTML5 differences from HTML4 - http://www.w3.org/TR/html5-diff/ 실전 HTML5 가이드 - http://webstandards.or.kr/html5 놀랄만큼 유용하고 재미있는 HTML5 모바일 앱 30개 - http://is.gd/e87hy 기타 참조 사이트

http://kr.html5doctor.com http://html5demos.com http://html5rocks.com http://www.html5video.org/ http://www.chromeexperiments.com/ http://html5test.com

25

Thank youFor more discussion :

JongHong Jeon ([email protected])+82-42-860-5333

Blog : http://mobile2.tistory.com/mhttp://twitter.com/hollobit

OR

차세대 모바일 웹 ui/ux 기술 및 표준화 동향 (기조발표)

Technology