More Related Content Similar to Aplicații Firefox OS cu HTML5 (20) More from Sabin Buraga (20) Aplicații Firefox OS cu HTML51. + + =
Dr. Sabin Buraga
Facultatea de Informatică, Universitatea “Alexandru Ioan Cuza” Iași
www.purl.org/net/busaco
3. + + =
dezvoltator Web
4. + + =
altcineva
cool (?!)
6. + + =
vocabular (set de elemente + atribute)
folosit pentru marcarea paginilor Web
7. + + =
suită de API-uri facilitând procesarea documentelor
la nivelul navigatorului Web – desktop, mobil,…
8. + + =
permite dezvoltarea standardizată de aplicații Web
9. + + =
recurge la tehnologii înrudite referitoare la
prezentare via foi de stiluri în cascadă – CSS
model conceptual – DOM
procesare la nivel de navigator Web – JavaScript
…și altele
10. + + =
.web-ui { tehnologie: CSS3; }
Cascading Style Sheets
11. @font-face Web fonts Background-image options
calc() as CSS unit value Border images
2.1 selectors Border-radius (rounded corners)
Counters Box-shadow
Feature Queries Box-sizing
Filter Effects Colors
Generated content Media Queries
Gradients Multiple backgrounds
Grid Layout Multiple column layout
Hyphenation object-fit/object-position
inline-block Opacity
Masks Overflow-wrap
min/max-width/height selectors
outline Text-overflow
position:fixed Text-shadow
Regions Transforms
Repeating Gradients Transitions
resize property word-break
Table display Flexible Box Layout Module
3D Transforms Font feature settings
Animation rem (root em) units
13. + + =
acces & manipulare
DOM
(Document Object Model)
14. HTML
HtmlElement
<html>
<body>
<p> HTML
Tehnologii Web BodyElement
</p>
<div>
HTML
<img src="web.png"/> HTML
Paragraph
</div> DivElement
Element
</body>
</html>
HTML
Text
ImageElement
document text (.html)
reprezentare în memorie ca arbore de obiecte
15. + + =
procesare via API-uri
this.javascript
16. + + =
în curs de standardizare la Consorțiul Web
statut candidate recommendation (decembrie 2012)
www.w3.org/TR/html5/
18. “HTML5 should not be considered as a whole.
You should cherry-pick the technology
that suits the solution to your problem.”
Remy Sharp
19. semantic
markup
+ + =
noi elemente
de structurare
a conținutului
20. <!DOCTYPE html>
<html>
<head>
<title>Titlu glorios al paginii sau aplicației Web</title>
<link rel="stylesheet" type="text/css" href="stiluri.css" />
<meta charset="utf-8" />
</head>
<body>
<header>
<h1>Titlu principal</h1>
<p class="slogan">...</p>
</header>
<article>
<nav class="menu">
<a href="...">Undeva</a> * <a href="...">Altundeva</a>
</nav>
<section>
<p>ceva aparent interesant?!</p>
<aside>informații adiționale</aside>
</section>
<section>...</section>
</article>
<footer>
<h6>Ultima actualizare, autorul, termeni legali,...</h6>
</footer>
</body>
detalii la http://html5doctor.com/
</html>
21. semantic
markup
+ + =
noi tipuri de
interacțiune
via formulare Web
search tel url email
date number range
22. semantic
markup
+ + =
microdate
schema.org
23. grafică
2D & 3D
+ + =
<canvas>
în contextul 2D
25. grafică
2D & 3D
+ + =
<canvas>
în contextul 3D
WebGL
27. grafică
2D & 3D
+ + =
grafică vectorială
SVG / TinySVG
28. <svg>
...
<circle cx="75" cy="75" r="10" class="forma"/>
</svg>
.forma { /* stiluri pentru construcțiile SVG */
fill: red; stroke: yellow; stroke-width: 3px;
}
biblioteci Javascript: BonsaiJS, D3.js, Raphaël.js,…
29. multimedia
+ + =
<audio>
<video>
API-uri de procesare
a sunetului
30. offline &
storage
+ + =
Web Storage
(localStorage & sessionStorage)
baze de date: IndexedDB
caching via ApplicationCache
31. connectivity
& real-time
+ + =
mesaje între documente
XMLHttpRequest2
WebSocket
evenimente de la server
WebRTC
32. performanța
+ + =
WebWorker
RequestAnimationFrame
date direct în URL – BlobURL
33. device
access
+ + =
drag & drop
orientation
geolocation
starea bateriei
34. device
access
+ + =
notificări
acces la camera Web
acces la fișiere – FileAPI
35. Blob URLs matchMedia
Cross-document messaging Navigation Timing API
Cross-Origin Resource Sharing PageVisibility
Device Orientation events requestAnimationFrame
File API Server-sent DOM events
FileReader API Shared Web Workers
Filesystem & FileWriter API Typed Arrays
Full Screen API Web Audio API
Geolocation Web Notifications
getUserMedia/Stream API Web Sockets
Hashchange event Web Storage
IndexedDB Web Workers
HTML5 – cele mai importante API-uri JavaScript
http://www.w3.org/standards/techs/js#w3c_all
46. aplicație
Firefox OS
+ + =
construită cu
HTML, CSS și JavaScript
47. .
│ favicon.ico
│ index.html
│ install.html
│ manifest.webapp
│ offline.appcache
├───css
│ app.css
│ install-button.css
├───img
│ │ offline.png
│ │ online.png
│ │ pattern.png
│ │ recommend.png
│ └───icons
└───js
│ app.js
│ init.js
│ install-button.js
└───lib
48. .
│ favicon.ico document HTML5
│ index.html structurare conținut +
│ install.html interacțiune cu utilizatorul
│ manifest.webapp
│ offline.appcache
├───css
│ app.css
│ install-button.css
├───img
│ │ offline.png
│ │ online.png
│ │ pattern.png
│ │ recommend.png
│ └───icons
└───js
│ app.js
│ init.js
│ install-button.js
└───lib
49. .
│ favicon.ico document HTML5
│ index.html structurare conținut +
│
│
install.html
manifest.webapp
interacțiune cu utilizatorul
│ offline.appcache <!DOCTYPE html>
├───css <html>
<head manifest="offline.appcache">
│ app.css <meta charset="utf-8" />
│ install-button.css <title>Aplicație Firefox OS</title>
<meta name="description" content="..."/>
├───img <link rel="stylesheet"
│ │ offline.png href="css/app.css"/>
│ │ online.png </head>
<body>
│ │ pattern.png <!-- conținut oferit de aplicație -->
│ │ recommend.png
│ └───icons <!-- indicator baterie -->
<div id="indicator">...</div>
└───js <script type="text/javascript"
│ app.js data-main="js/init.js"
│ init.js src="js/lib/require.js">
</script>
│ install-button.js </body>
└───lib </html>
50. .
│ favicon.ico
│ index.html
│ install.html
│ manifest.webapp
│ offline.appcache
├───css
│ app.css
│ install-button.css
├───img
│ │ offline.png stiluri CSS, eventual imagini
│ │ online.png pentru redarea datelor
│ │ pattern.png
│ │ recommend.png
│ └───icons
└───js
│ app.js
│ init.js
│ install-button.js
└───lib
51. .
│ favicon.ico
│ index.html
│ install.html
│ manifest.webapp
│ offline.appcache
├───css
│ app.css
│ install-button.css
├───img
│ │ offline.png stiluri CSS, eventual imagini
│ │ online.png pentru redarea datelor
│ │ pattern.png
│ │ recommend.png html {
background: url(../img/pattern.png);
│ └───icons }
└───js
│ app.js /* responsive Web design */
@media only screen and
│ init.js (max-width : 500px) {
│ install-button.js #indicator { /* indicator baterie */
└───lib border: 2px solid #999;
text-align: center;
...
}
}
52. .
│ favicon.ico
│ index.html
│ install.html
│ manifest.webapp
│ offline.appcache
├───css
│ app.css
│ install-button.css
├───img
│ │ offline.png
│ │ online.png
│ │ pattern.png
│ │ recommend.png
│ └───icons programe JavaScript
└───js recurg la API-uri HTML5
│
│
app.js
init.js
& API-uri specifice Firefox OS
│ install-button.js
└───lib
53. .
│ favicon.ico
│ index.html ...
// creăm via DOM un element <canvas>
│ install.html var canvas =
│ manifest.webapp document.createElement ('canvas');
│ offline.appcache var ctx = canvas.getContext ('2d');
canvas.width = game.width * blocksize;
├───css canvas.height = game.height * blocksize;
│ app.css canvas.id = 'game-canvas';
...
│ install-button.css // desenăm numărul nivelului jocului
├───img ctx.fillStyle = 'rgb(0, 0, 0)';
│ │ offline.png ctx.font =
'14pt SilkscreenNormal, sans-serif';
│ │ online.png ctx.fillText ('Level: ' +
│ │ pattern.png (game.levelidx + 1),
│ │ recommend.png canvas.width - blocksize,
canvas.height + 1);
│ └───icons ...
└───js
│
│
app.js
init.js
fragment de cod JavaScript
│ install-button.js implementând un joc
└───lib
55. sistemul
Firefox OS
+ + =
Gaia – interfața cu utilizatorul
56. sistemul
Firefox OS
+ + =
Gecko
redarea & procesarea datelor
via standarde Web deschise
(HTML, CSS, JS etc.)
57. sistemul
Firefox OS
+ + =
Gonk
biblioteci & nucleu Linux
58. + + =
resurse pentru creatorii de aplicații Firefox OS
(documentații, exemplificări, referințe, ajutor,…)
oferite de Mozilla:
developer.mozilla.org/en/docs/Mozilla/Firefox_OS
59. + + =
resurse pentru creatorii de aplicații Firefox OS
(documentații, exemplificări, referințe, ajutor,…)
puse la dispoziție de alții:
http://firefoxos.info/
http://buildingfirefoxos.com/
60. Mult succes!
+ + =
Dr. Sabin Buraga
Facultatea de Informatică, Universitatea “Alexandru Ioan Cuza” Iași
www.purl.org/net/busaco