Aplicații Firefox OS cu HTML5
•
1 like•1,389 views
De la suita de tehnologii HTML5 la maniera de dezvoltare de aplicații Web pentru sistemul de operare Firefox OS destinat dispozitivelor mobile.
Recommended
Recommended
More Related Content
What's hot
What's hot (18)
Viewers also liked
Viewers also liked (6)
Similar to Aplicații Firefox OS cu HTML5
Similar to Aplicații Firefox OS cu HTML5 (20)
More from Sabin Buraga
More from Sabin Buraga (20)
Aplicații Firefox OS cu HTML5
- 1. + + = Dr. Sabin Buraga Facultatea de Informatică, Universitatea “Alexandru Ioan Cuza” Iași www.purl.org/net/busaco
- 2. designer Web + + =
- 3. + + = dezvoltator Web
- 4. + + = altcineva cool (?!)
- 5. Salut, eu sunt suita de tehnologii HTML5! + + =
- 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/
- 17. diverse specificații HTML5 în lucru: dev.w3.org/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
- 24. <canvas> + JavaScript = www.html5canvastutorials.com
- 25. grafică 2D & 3D + + = <canvas> în contextul 3D WebGL
- 26. instrumente pentru dezvoltatori: CopperLicht, CubicVR, PhiloGL, SceneJS, TDL (ThreeD Library), Three.js
- 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
- 37. Super!... Mai multe despre tehnologiile HTML5? + + =
- 45. aplicație Firefox OS + + =
- 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
- 54. sistemul Firefox OS + + =
- 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