HTML5 and the Future of the Mobile Web

HTML5 and The Future of the Mobile WebHTML5 and The Future of the Mobile Web- Next Generation Mobile Web -

Overall Circumstance of the Internet is changing ...

22

Smartphone > PC Shipments Within 2 YearsSmartphone > PC Shipments Within 2 Years

33

Mobile Users > Desktop Internet Users Within 5 YearsMobile Users > Desktop Internet Users Within 5 Years

44

Smartphone > Feature Phone Shipments Within 1 Year Smartphone > Feature Phone Shipments Within 1 Year

55

Increasingly, Mobile Phone Usage is About Data, Not VoiceIncreasingly, Mobile Phone Usage is About Data, Not Voice

66

Change of Mobile Content Consumption in SmartphoneChange of Mobile Content Consumption in Smartphone

77

Why HTML5 is important in the Mobile ?

88

Position of Major IT CompaniesPosition of Major IT Companies� “We're betting big on HTML 5.” — Vic Gundotra, Google� “The world is moving to HTML5.” — Steve Jobs, Apple� “The future of the web is HTML5.”— Dean Hachamovitch, Microsoft99

1010

1111

(Reference) Comparison of Features among the Smartphone Platforms(Reference) Comparison of Features among the Smartphone Platforms

1212

New Computing Cycles – 10x More Devices New Computing Cycles – 10x More Devices

1313

What is the HTML5?

1414

Change of Circumstances: The Web Platform is AcceleratingChange of Circumstances: The Web Platform is Accelerating

1515[ Source : Brad Neuberg ]

Change of Circumstances : And It’s Solving Key Developer ChallengesChange of Circumstances : And It’s Solving Key Developer Challenges

1616[ Source : Brad Neuberg ]

Change of Circumstances: More DevelopersChange of Circumstances: More Developers

1717[ Source : Brad Neuberg ]

Change of Circumstances: More UsersChange of Circumstances: More Users

1818[ Source : Brad Neuberg ]

Change of Circumstances: More SpeedChange of Circumstances: More Speed

1919[ Source : Brad Neuberg ]

HTML TimelineHTML Timeline

2020[ Source : Appleinsider ]

What is HTML5 ?What is HTML5 ?Structure and Semantic APIs

2121

HTML5 Basic StructureHTML5 Basic Structure� Common structures� Differentiation & Style. How about Semantic?� What is the potential of new elements?

� E.g. Search engine, etc

2222[ HTML4] [ HTML5]

New Elements in HTML5New Elements in HTML5� New Markup Elements – for better structure

� <article>, <aside>, <command>, <details>, <summary>, <figure>, <figcaption>, <footer>, <header>, <hgroup>, <mark>, <meter>, <nav>, <progress>, <ruby>, <rt>, <rp>, <section>, <time>� New Media Elements – for media content

� <audio>, <video>, <source>, <embed>� The Canvas Element – for drawing

� <canvas>� New Form Elements and Input type attribute values

� <datalist>, <keygen>, <output>� New input type attribute values: email, url, number, range, date, month, week, time, datetime, datetime-local, search, color, etc2323

Web FormsWeb Forms� Placeholder text

� An autofocus attribute

2424

Web FormsWeb Forms

2525

Web FormWeb Form� Validation of input value

2626

(Reference) HTML5 elements(Reference) HTML5 elements

28 New Elements are added&

2727

&7 elements are changed

HTML5 FeaturesHTML5 FeaturesCanvas / SVG

Video / Audio

Geolocation

Web Socket

Local Storage

Web Workers

2828

Geolocation

Offline web apps More features …

Web SQL Database

Web Workers

CanvasCanvas� What is Canvas ?

� Dynamic and interactive graphics� Draw images using 2D drawing API•Lines, curves, shapes, fills, etc.� Useful for Graphs, Applications, Games, etc.

2929

[ http://canvaspaint.org/ ][http://www.liquidx.net/plotkit/ ] [http://www.benjoffe.com/code/demos/canvascape/]

SVGSVG� What is SVG ?

� Scalable Vector Graphic� HTML-like tags for drawing

3030

Video/AudioVideo/Audio� Embedding multimedia will get easier through the user of tags like <audio> and <video>

3131

Video/Audio: CodecVideo/Audio: Codec

3232<Source: Dive into html5>

Audio/Video: StreamingAudio/Video: Streaming� HTTP adaptive streaming would be cool for mobile device

� HTTP Live Streaming by Apple, on the iPhone� IIS Smooth Streaming by Microsoft for Silverlight� Dynamic streaming in Adobe Flash Player 10.1� What about browsers that will support WebM?� Skyfire does the adaptation on-the-fly

3333

GeolocationGeolocation� Geolocation API

� brings browser-based location to your appsnavigator.geolocation.getCurrentPosition(function(position) {var lat = position.coords.latitude;var lon = position.coords.longitude;showLocation(lat, lon);}

3434

});

Offline Web AppsOffline Web Apps� Web apps need to work everywhere

� Database and app cache store user data and app resources locally3535

Web SQL DatabaseWeb SQL Database� Databases right in the browser� Around 5MB per domain� Accessible across tabs and windows� Based on SQLite� Features: Transaction, SQL queries

var db = window.openDatabase("NoteTest", "1.0“, "Example DB“, 200000);

3636

var db = window.openDatabase("NoteTest", "1.0“, "Example DB“, 200000);

function saveMe(id, text, timestamp, left, top, zIndex) {db.transaction(function (tx) {tx.executeSql(

"INSERT INTO WebKitStickyNotes "+ "(id, note, timestamp, left, top, zindex) "+ "VALUES (?, ?, ?, ?, ?, ?)",[id, text, timestamp, left, top, zIndex]);

});

}

Web StorageWeb Storage� Key/value pair (hash) storage� Hash-based storage of strings (not objects).� 10 MB per zone.� Two kinds:

� sessionStorage:•Die when browser closes•Die when browser closes•Not shared between tabs� localStorage•Crash-safe•Shared BW tabs / windows and sessions – but not zones.3737

Web SocketsWeb Sockets� TCP for the Web� a next-generation bidirectional communication technology for web applications

if ("WebSocket" in window) {var ws = new WebSocket("ws://example.com/service");ws.onopen = function() {

3838

ws.onopen = function() {// Web Socket is connected. You can send data by send() method.

ws.send("message to send"); ....};ws.onmessage = function (evt) { var received_msg = evt.data; ... };ws.onclose = function() { // websocket is closed. };

} else {// the browser doesn't support WebSocket.}

Web SocketsWeb Sockets� HTML5 Web Sockets and the Need for Speed!

� http://www.kaazing.com/blog/?p=301� http://bloga.jp/ws/jq/wakachi/mecab/wakachi.html ( Demo )3939

The Web Sockets experience is 55 times faster than XHR

Web WorkersWeb Workers� API for running background scripts� Threads for Web apps� Useful for gaming, graphics, crypto and etc.

4040

Web FontsWeb Fonts

4141

Browser SupportBrowser Support

4242

Standardization Activity related with HTML5Standardization Activity related with 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 Applications WG•Web Storage, Indexed Database API, File API, Server-Sent •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, Acceleration4343

W3C HTML WGW3C HTML WG� Milestones ( This schedule was removed )

� 2007-05 HTML5 and Web Forms 2.0 specs adopted as basis for review� 2007-11 HTML Design Principles First Public Working Draft� 2008-02 HTML5 First Public Working Draft� 2010-01 HTML5 Last Call Working Draft� 2010-12? HTML5 Candidate Recommendation� 2010-12? HTML5 Candidate Recommendation� 2012-01? HTML5 Proposed Recommendation� 2012-03? HTML5 Recommendation

� Participants� 407 group participants,� 407 in good standing,� 140 participants from 37 organizations� 267 Invited Experts4444

The Future of the Mobile Web=HTML5 based Mobile Web

4545

HTML5 based Mobile Web

Social NetworkingSocial Networking� HTML5 based Facebook Client

� Music, Video, Photo, Apps

4646

4747< http://techcrunch.com/2010/07/07/youtube-iphone-mobile-html5/ >

4848

4949

< Source: http://ymobileblog.com/blog/2010/06/30/yahoo-brings-its-world-class-communications-experiences-to-your-android-phone-plus-introduces-the-all-new-html5-mobile-web-mail/ >

5050

5151

< Source: http://solsie.com/2010/08/yahoo-mail-for-ipad-updated-with-html5-optimization/?utm_source=twitterfeed&utm_medium=twitter >

e-Book and e-Magazinee-Book and e-Magazine

5252

GameGame

5353

5454 < http://openappmkt.com/ >

Issues and Outlook...

5555

Issues and Outlook of the Mobile WebIssues and Outlook of the Mobile Web� Issues

� Performance, Development tools, timeline of HTML5 standard including device API� Outlook

� HTML5 Web App•It is appropriate for multi-platform environment•It is appropriate for multi-platform environment•Webkit based browser is so popular in the mobile•HTML5 web app is more faster than legacy web app� HTML5 based Private Web Store� Hybrid Mobile Application•phoneGap, QuickConnect, Titanium, etc5656

이원석 (Wonsuk Lee)/선임연구원/Ph.D.ETRI 표준연구센터 서비스융합표준연구팀W3C 대한민국 사무국 코디네이터/모바일 웹2.0 포럼 HTML5 AG 의장W3C Media Annotation WG 에디터/ W3C Device API WG 에디터/W3C HTML WG / W3C Web Application WG/ W3C Geolocation WG 멤버Email: [email protected], [email protected]: 042-860-4893, 010-5800-39975757

ReferencesReferences[brad Neuberg] Introduction to HTML5, http://codinginparadise.org/presentations/intro_html5.pdf[Mark Pilgrim] Dive into HTML5, http://diveintohtml5.org/[Nabtron] New Elements introduced in HTML5, http://nabtron.com/new-elements-in-html5/1910/[W3C HTML WG], http://www.w3.org/html/wg/[W3C Web Applications WG], http://www.w3.org/2008/webapps/

5858