Estado da Arte HTML5
Transcript of Estado da Arte HTML5
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