• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Aplicații Firefox OS cu HTML5
 

Aplicații Firefox OS cu HTML5

on

  • 1,360 views

De la suita de tehnologii HTML5 la maniera de dezvoltare de aplicații Web pentru sistemul de operare Firefox OS destinat dispozitivelor mobile.

De la suita de tehnologii HTML5 la maniera de dezvoltare de aplicații Web pentru sistemul de operare Firefox OS destinat dispozitivelor mobile.

Statistics

Views

Total Views
1,360
Views on SlideShare
896
Embed Views
464

Actions

Likes
1
Downloads
9
Comments
1

3 Embeds 464

http://profs.info.uaic.ro 427
https://twitter.com 25
http://thor.info.uaic.ro 12

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Aplicații Firefox OS cu HTML5 Aplicații Firefox OS cu HTML5 Presentation Transcript

    • + + =  Dr. Sabin BuragaFacultatea de Informatică, Universitatea “Alexandru Ioan Cuza” Iași www.purl.org/net/busaco
    • designer Web + + = 
    • + + = dezvoltator Web
    •  + + = altcineva cool (?!)
    • Salut, eu sunt suitade 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 – DOMprocesare la nivel de navigator Web – JavaScript …și altele
    • + + = .web-ui { tehnologie: CSS3; } Cascading Style Sheets
    • @font-face Web fonts Background-image optionscalc() as CSS unit value Border images2.1 selectors Border-radius (rounded corners)Counters Box-shadowFeature Queries Box-sizingFilter Effects ColorsGenerated content Media QueriesGradients Multiple backgroundsGrid Layout Multiple column layoutHyphenation object-fit/object-positioninline-block OpacityMasks Overflow-wrapmin/max-width/height selectorsoutline Text-overflowposition:fixed Text-shadowRegions TransformsRepeating Gradients Transitionsresize property word-breakTable display Flexible Box Layout Module3D Transforms Font feature settingsAnimation rem (root em) units
    • http://caniuse.com/
    • + + =  acces & manipulare DOM(Document Object Model)
    • 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
    • + + = procesare via API-uri this.javascript
    • + + =  în curs de standardizare la Consorțiul Webstatut 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 elementede structurarea 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> detalii la http://html5doctor.com/</html>
    • semantic markup + + =  noi tipuri de interacțiune via formulare Websearch tel url email date number range
    • semantic markup+ + =  microdateschema.org
    • grafică 2D & 3D+ + =  <canvas>în contextul 2D
    • <canvas> + JavaScript = www.html5canvastutorials.com
    • 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
    • <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,…
    • multimedia + + =  <audio> <video>API-uri de procesare a sunetului
    • offline & storage + + =  Web Storage(localStorage & sessionStorage) baze de date: IndexedDB caching via ApplicationCache
    • connectivity & real-time + + = mesaje între documente XMLHttpRequest2 WebSocketevenimente de la server WebRTC
    • performanța + + =  WebWorker RequestAnimationFramedate direct în URL – BlobURL
    • device access+ + =  drag & drop orientation geolocationstarea bateriei
    • device access + + =  notificări acces la camera Webacces la fișiere – FileAPI
    • Blob URLs matchMediaCross-document messaging Navigation Timing APICross-Origin Resource Sharing PageVisibilityDevice Orientation events requestAnimationFrameFile API Server-sent DOM eventsFileReader API Shared Web WorkersFilesystem & FileWriter API Typed ArraysFull Screen API Web Audio APIGeolocation Web NotificationsgetUserMedia/Stream API Web SocketsHashchange event Web StorageIndexedDB 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 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
    • .│ 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>
    • .│ 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
    • .│ 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; ... } }
    • .│ 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
    • .│ 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
    • 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/
    • Mult succes!  + + =  Dr. Sabin BuragaFacultatea de Informatică, Universitatea “Alexandru Ioan Cuza” Iași www.purl.org/net/busaco