TỔNG ÔN TẬP THI VÀO LỚP 10 MÔN TIẾNG ANH NĂM HỌC 2023 - 2024 CÓ ĐÁP ÁN (NGỮ Â...
Estado da Arte HTML5
1. HTML5, State of art
june, 2
Presented by Nelson Monteiro,
5242
1
2. Agenda
• What is HTML5 • State of mobile web
• HTML5 brief history development
• Where are we now? – HTML5 API usage
• Mobile webkit browsers – Mobile browser os
support choice
• New rules/ new tags • Native apps vs Web apps
– semantic web • Advantages of mobile apps
using html5
– video
• Examples
– canvas
• Useful links
– local storage
• Questions?
– geolocation
– offline applications
1º Simpósio do Mestrado em Computação Móvel 2
2
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?
1º Simpósio do Mestrado em Computação Móvel 3
3
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
1º Simpósio do Mestrado em Computação Móvel 4
4
5. Where are we now?
• Current State:
http://www.whatwg.org/specs/web-apps/current-work/multipage/
1º Simpósio do Mestrado em Computação Móvel 5
5
6. Mobile webkit browsers support
http://radar.oreilly.com/2010/05/mobile-operating-systems-and-b.html
1º Simpósio do Mestrado em Computação Móvel 6
6
7. New rules/ new tags
Semantic Web
• Before HTML5 • After HTML5
1º Simpósio do Mestrado em Computação Móvel 7
7
8. New rules/ new tags
Video
<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>
http://diveintohtml5.org/video.html
1º Simpósio do Mestrado em Computação Móvel 8
8
9. New rules/ new tags
Video
1º Simpósio do Mestrado em Computação Móvel 9
9
10. New rules/ new tags
Video
Advantages:
• no plugins needed
• direct video watching
• interaction between video and web app
1º Simpósio do Mestrado em Computação Móvel 10
10
11. New rules/ new tags
Canvas
<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>
http://diveintohtml5.org/canvas.html
1º Simpósio do Mestrado em Computação Móvel 11
11
12. New rules/ new tags
Canvas
1º Simpósio do Mestrado em Computação Móvel 12
12
13. New rules/ new tags
Canvas
Advantages:
• no plugins needed
• creating interactive/ dynamic charts
• creating interactive/ dynamic maps
1º Simpósio do Mestrado em Computação Móvel 13
13
14. New rules/ new tags
Local Storage
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;
}
http://diveintohtml5.org/storage.html
1º Simpósio do Mestrado em Computação Móvel 14
14
15. New rules/ new tags
Local Storage
1º Simpósio do Mestrado em Computação Móvel 15
15
16. New rules/ new tags
Local Storage
Advantages:
• persists beyond a page refresh
• on the client
• isn’t transmitted to the server
• 5 Mb of storage
1º Simpósio do Mestrado em Computação Móvel 16
16
17. New rules/ new tags
Geolocation
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!
}
http://diveintohtml5.org/geolocation.html
1º Simpósio do Mestrado em Computação Móvel 17
17
18. New rules/ new tags
Geolocation
1º Simpósio do Mestrado em Computação Móvel 18
18
19. New rules/ new tags
Geolocation
Advantages:
• no plugins needed
• show current location on map
• deliver content for your location only
1º Simpósio do Mestrado em Computação Móvel 19
19
20. New rules/ new tags
Offline Application
<!DOCTYPE HTML>
CACHE
MANIFEST
<html manifest="/cache.manifest">
/clock.css
<body>
/clock.js
...
/clock-‐face.jpg
</body>
</html>
http://diveintohtml5.org/offline.html
1º Simpósio do Mestrado em Computação Móvel 20
20
21. New rules/ new tags
Offline Application
Advantages:
• Working with the application offline
• New data downloaded when online again
1º Simpósio do Mestrado em Computação Móvel 21
21
22. State mobile web development
• HTML5 API usage
http://www.webdirections.org/sotmw2011/technologies/
1º Simpósio do Mestrado em Computação Móvel 22
22
23. State mobile web development
• HTML5 API usage
http://www.webdirections.org/sotmw2011/technologies/
1º Simpósio do Mestrado em Computação Móvel 23
23
24. State mobile web development
• Mobile browser os choice
http://www.webdirections.org/sotmw2011/browsers-and-platforms/
1º Simpósio do Mestrado em Computação Móvel 24
24
25. Native apps vs. Web apps
Native Web
• access to app store • no app store
• access to device api • no access to device api
• native UI experience • challenge creating device UI
• good performance • smaller performance
• bigger learning curve • ease of learning
• no cross platform • ease of cross platform
deployment development
• long development time • ease of development
• upgrades need to be • instant upgrades
submited to app store • no app store restrictions
• App store restrictions
1º Simpósio do Mestrado em Computação Móvel 25
25
26. 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
1º Simpósio do Mestrado em Computação Móvel 26
26
