Aplicații Firefox OS cu HTML5

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


document HTML5 structurare conținut +

interacțiune cu utilizatorul

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>   <div id="indicator">...</div> <script type="text/javascript" data-main="js/init.js" src="js/lib/require.js"> </script> </body> </html>


stiluri CSS, eventual imagini pentru redarea datelor


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; ... } }


programe JavaScript recurg la API-uri HTML5

& API-uri specifice Firefox OS


... // 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!

Aplicații Firefox OS cu HTML5

Technology

Transcript of Aplicații Firefox OS cu HTML5