HTML5, State of art

june, 2Presented by Nelson Monteiro,

5242

1

1º Simpósio do Mestrado em Computação Móvel 2

Agenda

• What is HTML5• HTML5 brief history• Where are we now?• Mobile webkit browsers

support• New rules/ new tags

– semantic web– video– canvas– local storage– geolocation– offline applications

• State of mobile web development– HTML5 API usage– Mobile browser os

choice• Native apps vs Web apps• Advantages of mobile apps

using html5• Examples• Useful links• Questions?

2

1º Simpósio do Mestrado em Computação Móvel 3

What is HTML5

• the natural evolution of html?• the lost battle of xhtml2?• the union between whatwg an w3c?• the end of native apps?• HTML + CSS + javascript?

3

1º Simpósio do Mestrado em Computação Móvel 4

HTML5 brief history

• 1999: HTML 4.01 was released• 2002: w3c start XHTML2• 2004: Web Hypertext Application Technology Working

Group (WHATWG) - Apple, Mozilla and Opera - started work on Web Applications 1.0

• 2007: W3C drops XHTML and forms HTMLWG• 2008: first draft of HTML5 is published• June 2011: HTML5 Working Draft has reached its Last

Call milestone

4

1º Simpósio do Mestrado em Computação Móvel 5

Where are we now?

• Current State:http://www.whatwg.org/specs/web-apps/current-work/multipage/

5

1º Simpósio do Mestrado em Computação Móvel

Mobile webkit browsers support

6

http://radar.oreilly.com/2010/05/mobile-operating-systems-and-b.html

6

1º Simpósio do Mestrado em Computação Móvel

New rules/ new tags

Semantic Web

7

• Before HTML5 • After HTML5

7

1º Simpósio do Mestrado em Computação Móvel

New rules/ new tags

Video

8

http://diveintohtml5.org/video.html

<video width="640" height="360" controls> <source src="vid.mp4" type="video/mp4" /><!-- Safari / iOS video -->

<source src="vid.ogv" type="video/ogg" /><!-- Firefox3.6+ / Opera 10.5+ -->

<source src="vid.webm" type="video/webm" /><!-- Chrome10+, Ffx4+, Opera10.6+ -->

</video>

8

1º Simpósio do Mestrado em Computação Móvel

New rules/ new tags

Video

9

9

1º Simpósio do Mestrado em Computação Móvel

New rules/ new tags

VideoAdvantages:

10

• no plugins needed• direct video watching• interaction between video and web app

10

1º Simpósio do Mestrado em Computação Móvel

New rules/ new tags

Canvas

11

http://diveintohtml5.org/canvas.html

<script type="text/javascript">if (Modernizr.canvas) { var c = document.createElement('canvas'); var context = c.getContext('2d'); // context.fillStyle = "rgb(200,0,0)"; context.fillRect (10, 10, 55, 50); context.fillStyle = "rgba(0, 0, 200, 0.5)"; context.fillRect (30, 30, 55, 50); // document.getElementById('chartContainer').appendChild(c);}</script>

11

1º Simpósio do Mestrado em Computação Móvel

New rules/ new tags

Canvas

12

12

1º Simpósio do Mestrado em Computação Móvel

New rules/ new tags

CanvasAdvantages:

13

• no plugins needed• creating interactive/ dynamic charts• creating interactive/ dynamic maps

13

1º Simpósio do Mestrado em Computação Móvel

New rules/ new tags

Local Storage

14

http://diveintohtml5.org/storage.html

function saveGameState() {

if (!supportsLocalStorage()) { return false; }

localStorage["halma.game.in.progress"] = gGameInProgress;

for (var i = 0; i < kNumPieces; i++) {

localStorage["halma.piece." + i + ".row"] = gPieces[i].row;

localStorage["halma.piece." + i + ".column"] = gPieces[i].column;

}

14

1º Simpósio do Mestrado em Computação Móvel

New rules/ new tags

Local Storage

15

15

1º Simpósio do Mestrado em Computação Móvel

New rules/ new tags

Local StorageAdvantages:

16

• persists beyond a page refresh• on the client• isn’t transmitted to the server• 5 Mb of storage

16

1º Simpósio do Mestrado em Computação Móvel

New rules/ new tags

Geolocation

17

http://diveintohtml5.org/geolocation.html

function get_location() {

navigator.geolocation.getCurrentPosition(show_map);

}

function show_map(position) {

var latitude = position.coords.latitude;

var longitude = position.coords.longitude;

// let's show a map or do something interesting!

}

17

1º Simpósio do Mestrado em Computação Móvel

New rules/ new tags

Geolocation

18

18

1º Simpósio do Mestrado em Computação Móvel

New rules/ new tags

GeolocationAdvantages:

19

• no plugins needed• show current location on map• deliver content for your location only

19

1º Simpósio do Mestrado em Computação Móvel

New rules/ new tags

Offline Application

20

http://diveintohtml5.org/offline.html

CACHE  MANIFEST

/clock.css

/clock.js

/clock-­‐face.jpg

<!DOCTYPE HTML>

<html manifest="/cache.manifest">

<body>

...

</body>

</html>

20

1º Simpósio do Mestrado em Computação Móvel

New rules/ new tags

Offline ApplicationAdvantages:

21

• Working with the application offline• New data downloaded when online again

21

1º Simpósio do Mestrado em Computação Móvel

State mobile web development

• HTML5 API usage

22http://www.webdirections.org/sotmw2011/technologies/

22

1º Simpósio do Mestrado em Computação Móvel

State mobile web development

• HTML5 API usage

23http://www.webdirections.org/sotmw2011/technologies/

23

1º Simpósio do Mestrado em Computação Móvel

State mobile web development

• Mobile browser os choice

24http://www.webdirections.org/sotmw2011/browsers-and-platforms/

24

1º Simpósio do Mestrado em Computação Móvel

Native apps vs. Web appsNative

• access to app store• access to device api• native UI experience• good performance• bigger learning curve• no cross platform

deployment• long development time• upgrades need to be

submited to app store• App store restrictions

25

Web• no app store• no access to device api• challenge creating device UI• smaller performance• ease of learning• ease of cross platform

development• ease of development• instant upgrades• no app store restrictions

25

1º Simpósio do Mestrado em Computação Móvel

Advantages of mobile apps using html5

• Geolocation API• Offline Storage• Offline Cache• Multi-touch Event API• Vídeo• Canvas• Fancier styles and transitions• Great javascript engine

26

26

1º Simpósio do Mestrado em Computação Móvel

Examples• http://optimus.usatoday.com/• http://foursquareplayground.com/• http://everytimezone.com/

27

27

1º Simpósio do Mestrado em Computação Móvel

Useful links• http://www.slideshare.net/MrJ1971/html5-and-the-mobile-web• http://www.slideshare.net/glenn.kelman/html-5-vs-native-mobile-applications• http://www.slideshare.net/phish108/html5-for-mobiles• http://www.slideshare.net/brucelawson/web-anywhere-mobile-optimisation-

with-html5-css3-javascript• http://www.slideshare.net/didoo/html5-for-mobile• http://www.slideshare.net/batmoo/html5-css3-and-other-fancy-buzzwords• http://www.slideshare.net/wolframkriesing/html5-apps-mobile-developer-

summit-bangalore• http://www.slideshare.net/docdoku/html-5-ou-lvolution-majeure-du-web-et-

de-linternet-mobile• http://www.slideshare.net/pp.koch/the-future-of-the-mobile-web• http://www.slideshare.net/marcelioleal/html5overviewpdf• http://www.slideshare.net/zibin/brief-history-of-html5-7977732• http://www.slideshare.net/elisabethrobson/html5-whats-it-all-about• http://www.slideshare.net/marcelioleal/html5overviewpdf• http://www.whatwg.org/specs/web-apps/current-work/multipage/• http://devfiles.myopera.com/articles/572/idlist-url.htm

28

28

1º Simpósio do Mestrado em Computação Móvel

Questions?

29

29