aplicații firefox os cu html5
DESCRIPTION
De la suita de tehnologii HTML5 la maniera de dezvoltare de aplicații Web pentru sistemul de operare Firefox OS destinat dispozitivelor mobile.TRANSCRIPT
Dr. Sabin Buraga Facultatea de Informatică, Universitatea “Alexandru Ioan Cuza” Iași
www.purl.org/net/busaco
+ + =
+ + =
designer Web
+ + =
dezvoltator Web
+ + =
altcineva cool (?!)
+ + =
Salut, eu sunt suita de tehnologii HTML5!
+ + =
vocabular (set de elemente + atribute) folosit pentru marcarea paginilor Web
+ + =
suită de API-uri facilitând procesarea documentelor la nivelul navigatorului Web – desktop, mobil,…
+ + =
permite dezvoltarea standardizată de aplicații Web
+ + =
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
+ + =
.web-ui { tehnologie: CSS3; }
Cascading Style Sheets
@font-face Web fonts calc() as CSS unit value 2.1 selectors Counters Feature Queries Filter Effects Generated content Gradients Grid Layout Hyphenation inline-block Masks min/max-width/height outline position:fixed Regions Repeating Gradients resize property Table display 3D Transforms Animation
Background-image options Border images Border-radius (rounded corners) Box-shadow Box-sizing Colors Media Queries Multiple backgrounds Multiple column layout object-fit/object-position Opacity Overflow-wrap selectors Text-overflow Text-shadow Transforms Transitions word-break Flexible Box Layout Module Font feature settings rem (root em) units
http://caniuse.com/
+ + =
acces & manipulare DOM
(Document Object Model)
<html> <body> <p> Tehnologii Web </p> <div> <img src="web.png"/> </div> </body> </html>
HTML HtmlElement
HTML BodyElement
HTML Paragraph Element
Text
HTML DivElement
HTML ImageElement
document text (.html) reprezentare în memorie ca arbore de obiecte
+ + =
procesare via API-uri
this.javascript
+ + =
în curs de standardizare la Consorțiul Web statut candidate recommendation (decembrie 2012)
www.w3.org/TR/html5/
diverse specificații HTML5 în lucru: dev.w3.org/html5/
“HTML5 should not be considered as a whole. You should cherry-pick the technology
that suits the solution to your problem.” Remy Sharp
+ + =
semantic markup
noi elemente de structurare a conținutului
<!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> </html>
detalii la http://html5doctor.com/
+ + =
semantic markup
noi tipuri de interacțiune
via formulare Web search tel url email date number range
+ + =
semantic markup
microdate schema.org
+ + =
grafică 2D & 3D
<canvas> în contextul 2D
www.html5canvastutorials.com
<canvas> + JavaScript =
+ + =
grafică 2D & 3D
<canvas> în contextul 3D
WebGL
instrumente pentru dezvoltatori: CopperLicht, CubicVR, PhiloGL, SceneJS, TDL (ThreeD Library), Three.js
+ + =
grafică 2D & 3D
grafică vectorială SVG / TinySVG
biblioteci Javascript: BonsaiJS, D3.js, Raphaël.js,…
<svg> ... <circle cx="75" cy="75" r="10" class="forma"/> </svg>
.forma { /* stiluri pentru construcțiile SVG */ fill: red; stroke: yellow; stroke-width: 3px; }
+ + =
multimedia
<audio> <video>
API-uri de procesare a sunetului
+ + =
Web Storage (localStorage & sessionStorage)
baze de date: IndexedDB caching via ApplicationCache
offline & storage
+ + =
mesaje între documente XMLHttpRequest2
WebSocket evenimente de la server
WebRTC
connectivity & real-time
+ + =
performanța
WebWorker RequestAnimationFrame
date direct în URL – BlobURL
+ + =
drag & drop orientation geolocation
starea bateriei
device access
+ + =
notificări acces la camera Web
acces la fișiere – FileAPI
device access
Blob URLs Cross-document messaging Cross-Origin Resource Sharing Device Orientation events File API FileReader API Filesystem & FileWriter API Full Screen API Geolocation getUserMedia/Stream API Hashchange event IndexedDB
matchMedia Navigation Timing API PageVisibility requestAnimationFrame Server-sent DOM events Shared Web Workers Typed Arrays Web Audio API Web Notifications Web Sockets Web Storage Web Workers
HTML5 – cele mai importante API-uri JavaScript http://www.w3.org/standards/techs/js#w3c_all
http://mobilehtml5.org/
+ + =
Super!... Mai multe despre tehnologiile HTML5?
www.webplatform.org
http://diveintohtml5.org/
developer.mozilla.org
www.html5rocks.com
http://html5please.com/
http://webplatformtools.org/
http://html5weekly.com/
+ + =
aplicație Firefox OS
+ + =
aplicație Firefox OS
construită cu HTML, CSS și JavaScript
. │ 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
. │ 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
document HTML5 structurare conținut +
interacțiune cu utilizatorul
. │ 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
document HTML5 structurare conținut +
interacțiune cu utilizatorul
<!DOCTYPE html> <html> <head manifest="offline.appcache"> <meta charset="utf-8" /> <title>Aplicație Firefox OS</title> <meta name="description" content="..."/> <link rel="stylesheet" href="css/app.css"/> </head> <body> <!-- conținut oferit de aplicație --> <!-- indicator baterie --> <div id="indicator">...</div> <script type="text/javascript" data-main="js/init.js" src="js/lib/require.js"> </script> </body> </html>
. │ 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
stiluri CSS, eventual imagini pentru redarea datelor
. │ 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
stiluri CSS, eventual imagini pentru redarea datelor
html { background: url(../img/pattern.png); } /* responsive Web design */ @media only screen and (max-width : 500px) { #indicator { /* indicator baterie */ border: 2px solid #999; text-align: center; ... } }
. │ 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
programe JavaScript recurg la API-uri HTML5
& API-uri specifice Firefox OS
. │ 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
... // creăm via DOM un element <canvas> var canvas = document.createElement ('canvas'); var ctx = canvas.getContext ('2d'); canvas.width = game.width * blocksize; canvas.height = game.height * blocksize; canvas.id = 'game-canvas'; ... // desenăm numărul nivelului jocului ctx.fillStyle = 'rgb(0, 0, 0)'; ctx.font = '14pt SilkscreenNormal, sans-serif'; ctx.fillText ('Level: ' + (game.levelidx + 1), canvas.width - blocksize, canvas.height + 1); ...
fragment de cod JavaScript implementând un joc
+ + =
sistemul Firefox OS
+ + =
sistemul Firefox OS
Gaia – interfața cu utilizatorul
+ + =
sistemul Firefox OS
Gecko redarea & procesarea datelor via standarde Web deschise
(HTML, CSS, JS etc.)
+ + =
sistemul Firefox OS
Gonk biblioteci & nucleu Linux
+ + =
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
+ + =
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/
Dr. Sabin Buraga Facultatea de Informatică, Universitatea “Alexandru Ioan Cuza” Iași
www.purl.org/net/busaco
+ + =
Mult succes!