Aplicații Firefox OS cu HTML5
1 like1,390 views
Documentul oferă o prezentare detaliată a tehnologiilor HTML5, inclusiv vocabularul asociat pentru marcarea paginilor web, API-uri pentru procesarea documentelor și interacțiuni prin formulare web. De asemenea, acestea includ elemente de grafică 2D/3D, stocare web, acces la dispozitive și funcționalități multimedia. În plus, sunt menționate resurse și instrumente utile pentru dezvoltatorii de aplicații adaptate la sistemul Firefox OS.
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