aplicații firefox os cu html5
Post on 29-Nov-2014
1.571 Views
Preview:
DESCRIPTION
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!
top related