MOBAS Tutorial 2010 Tutorial on Mobile Applications & Systems 권오현, 김기환

목차 Background – 왜 HTML5 가 대두되는가 ? – 앞으로의 웹 개발의 방향은 ? Overview of HTML5 –HTML5 개요 –HTML5 표준안 개발 현황 Examples of HTML5 –HTML5 가 적용된 사이트의 모습은 ?

BACKGROUND MOBAS Tutorial 2010

Smartphone Wars 2007 : Success of iPhone 2008 : Success of AppStore iPhone : Mobile internet machine iPhone + AppStore : Application contents matter

Mobile Apps Wars Apple is the only winner 20M iPhone & iPod touch (iOS) users in 2008 iPod, iPhone2G, iPhone3G users Followers can’t defeat this

Anti Apple alliances Operators Handset markers Too many platforms –Windows Mobile, Limo, Android, Brew, SHP, Symbian, Proprietary OS, WebOS… What can be the cross platform?

It’s WEB! Cross Device Cross Platform

History of Web HyperText –1965, Nelson HyperCard –1987, apple World Wide Web –1990, CERN Tim Berners-Lee Mosaic Web Browser –1993, Marc Andreeseen & Eric Bina WWW Consortium –1994,

HTML versions 1991, HTML 1.0 (Berners-Lee) 1995, HTML 2.0(IETF) 1997, HTML 3.2(W3C) 1997, HTML 4.0(W3C) 1999, HTML 4.01(W3C) 2000, XHTML 1.0(W3C) ??, XHTML2.0(W3C)

WHATWG Web Hypertext Application Technology Working Group –Open Community, 2004 Developing –Web Form 2.0, Web Application 1.0

Why “new HTML”? Fail of XHTML2 Developer Productivity Browser Compatibility Rich Web functions Now, Web is a Platform –Web on Everything

Why HTML5? For Desktop For Mobile For Any Devices

Why HTML5? IT goes to CE Market –Web + CE industry –Web will be the key technology

Youtube IE6 support ended

Vimeo uses HTML5

Google & HTML5

Apple & HTML5

향후 모바일 애플리케이션 전망 Issues related with HTML5 –Performance, Development tools, time Outlook –HTML5 Web App It is appropriate for multi-platform environment Webkit based browser is so popular in the mobile HTML5 web appis more faster than legacy web app HTML5 based Private Web Store Hybrid Mobile Application –phoneGap, QuickConnect, Titanium, etc

향후 모바일 애플리케이션 전망 보안 이슈가 대두 –Mobile device 의 Context Sensor 정보가 HTML 의 API 로 제공되는 과정에서의 보안 문 제가 중요한 이슈로 다뤄지고 있음

OVERVIEW OF HTML5 MOBAS Tutorial 2010

What is “HTML5”? 웹문서를 만들기 위한 기본 프로그래밍 언 어 HTML 의 최신 규격 액티브 X 를 포함한 기타 여러 플러그인을 설치하지 않고도 동일한 기능을 구현 – 어도비 플래시나 마이크로소프트의 실버라이 트, 썬의 자바 FX 와 같은 플러그인 기반의 인터 넷 어플리케이션에 대한 필요를 줄이는 데 목 적을 둠

HTML5 표준화 W3C WGs related with HTML5 –HTML WG HTML5, HTML+RDFa, HTML Microdata, HTML Canvas 2D Context, HTML: The Markup Language, HTML5 diffs from HTML4, etc –Web Application WG Web Storage, Indexed Database API, File API, Server-Sent Event, Web Sockets API, Web Workers, Programmable HTTP Caching and Serving, Web SQL Database, etc –Device APIs and Policy WG Calendar, Contact, Media Capture, Messaging, System Information, File Writer, Gallery, Powerbox, Application Launcher, etc –Geolocation WG Geolocation API, DeviceOrientation Event, Acceleration –New WGs Web Notification WG, Touch Interfface WG, Web Performance WG

W3C HTML WG Old Milestones (This schedule was removed) – HTML5 and Web Forms 2.0 specs adopted as basis for review – HTML Design Principles First Public Working Draft – HTML5 First Public Working Draft – HTML5 Last Call Working Draft – ? HTML5 Candidate Recommendation – ? HTML5 Proposed Recommendation – ? HTML5 Recommendation New Milestones (2010/09/07) –2010 년 10 월 1 일 : HTML5 표준 초안 Last Call –2011 년 5 월 22 일 : HTML5 표준 초안 Last Call 종료

HTML5 Structure HTML5 HTML

HTML5 Structure Structure and SemanticAPIs

HTML5 Structure

Device + HTML5 웹 애플리케이션이 자바스크립트를 이용해 서 디바이스의 기능을 활용할 수 있는가 ? HTML + 자바스크립트 + CSS 웹 플랫폼 (platform specific) GPS, contacts, photo, SMS 등 자바스크립트 표준 API 플랫폼 제공 API

HTML5 Features for Mobile Offline web apps Geolocation Web Socket Web Storage Video / Audio Web Workers Web Font Web Form Canvas / SVG More features….

[Ref.] Useful site for HTML

EXAMPLES OF HTML5 MOBAS Tutorial 2010

Apple HTML5 Showcase

Youtube HTML5 Version

HTML5STUDIO

HTML5Demos.com

Asteroids HTML5 Canvas and JavaScript demo