+                 +                  =                           Dr. Sabin BuragaFacultatea de Informatică, Universitatea...
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 – deskt...
+             +             =   permite dezvoltarea standardizată de aplicații Web
+              +              =      recurge la tehnologii înrudite referitoare la  prezentare via foi de stiluri în casc...
+              +          =   .web-ui { tehnologie: CSS3; }   Cascading Style Sheets
@font-face Web fonts       Background-image optionscalc() as CSS unit value   Border images2.1 selectors              Bord...
http://caniuse.com/
+            +        =     acces & manipulare         DOM(Document Object Model)
HTML                                    HtmlElement<html>  <body>    <p>                                HTML       Tehnolo...
+             +       =   procesare via API-uri this.javascript
+             +             =      în curs de standardizare la Consorțiul Webstatut candidate recommendation (decembrie 2...
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 probl...
semantic     markup+              +   =   noi elementede structurarea conținutului
<!DOCTYPE html><html>  <head>     <title>Titlu glorios al paginii sau aplicației Web</title>     <link rel="stylesheet" ty...
semantic        markup   +              +    =        noi tipuri de     interacțiune  via formulare Websearch tel url ema...
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...
multimedia  +             +      =         <audio>      <video>API-uri de procesare    a sunetului
offline &            storage        +               +         =              Web Storage(localStorage & sessionStorage)  ...
connectivity     & real-time   +                +     =   mesaje între documente  XMLHttpRequest2     WebSocketevenimente...
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 Shari...
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...
.│   favicon.ico                  document HTML5│   index.html                 structurare conținut +│   install.html     ...
.│   favicon.ico                     document HTML5│   index.html                    structurare conținut +││    install.h...
.│   favicon.ico│   index.html│   install.html│   manifest.webapp│   offline.appcache├───css│       app.css│       install...
.│   favicon.ico│   index.html│   install.html│   manifest.webapp│   offline.appcache├───css│       app.css│       install...
.│   favicon.ico│   index.html│   install.html│   manifest.webapp│   offline.appcache├───css│       app.css│       install...
.│   favicon.ico│   index.html               ...                             // creăm via DOM un element <canvas>│   insta...
sistemul        Firefox OS+   +                =   
sistemul              Firefox OS+         +                =       Gaia – interfața cu utilizatorul
sistemul             Firefox OS+        +                =                   Gecko    redarea & procesarea datelor     vi...
sistemul           Firefox OS+      +                =                  Gonk    biblioteci & nucleu Linux
         +              +               =    resurse pentru creatorii de aplicații Firefox OS  (documentații, exemplific...
        +              +               =   resurse pentru creatorii de aplicații Firefox OS (documentații, exemplificări...
Mult succes!             +                 +                  =                           Dr. Sabin BuragaFacultatea de ...
Upcoming SlideShare
Loading in …5
×

Aplicații Firefox OS cu HTML5

1,228
-1

Published on

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

Published in: Technology
1 Comment
1 Like
Statistics
Notes
No Downloads
Views
Total Views
1,228
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
15
Comments
1
Likes
1
Embeds 0
No embeds

No notes for slide

Aplicații Firefox OS cu HTML5

  1. 1. + + =  Dr. Sabin BuragaFacultatea de Informatică, Universitatea “Alexandru Ioan Cuza” Iași www.purl.org/net/busaco
  2. 2. designer Web + + = 
  3. 3. + + = dezvoltator Web
  4. 4.  + + = altcineva cool (?!)
  5. 5. Salut, eu sunt suitade tehnologii HTML5!+ + = 
  6. 6. + + =  vocabular (set de elemente + atribute)folosit pentru marcarea paginilor Web
  7. 7. + + = suită de API-uri facilitând procesarea documentelor la nivelul navigatorului Web – desktop, mobil,…
  8. 8. + + = permite dezvoltarea standardizată de aplicații Web
  9. 9. + + =  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
  10. 10. + + = .web-ui { tehnologie: CSS3; } Cascading Style Sheets
  11. 11. @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
  12. 12. http://caniuse.com/
  13. 13. + + =  acces & manipulare DOM(Document Object Model)
  14. 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. 15. + + = procesare via API-uri this.javascript
  16. 16. + + =  în curs de standardizare la Consorțiul Webstatut candidate recommendation (decembrie 2012) www.w3.org/TR/html5/
  17. 17. diverse specificații HTML5 în lucru: dev.w3.org/html5/
  18. 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. 19. semantic markup+ + = noi elementede structurarea conținutului
  20. 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. 21. semantic markup + + =  noi tipuri de interacțiune via formulare Websearch tel url email date number range
  22. 22. semantic markup+ + =  microdateschema.org
  23. 23. grafică 2D & 3D+ + =  <canvas>în contextul 2D
  24. 24. <canvas> + JavaScript = www.html5canvastutorials.com
  25. 25. grafică 2D & 3D+ + =  <canvas>în contextul 3D WebGL
  26. 26. instrumente pentru dezvoltatori: CopperLicht, CubicVR, PhiloGL, SceneJS, TDL (ThreeD Library), Three.js
  27. 27. grafică 2D & 3D + + = grafică vectorială SVG / TinySVG
  28. 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. 29. multimedia + + =  <audio> <video>API-uri de procesare a sunetului
  30. 30. offline & storage + + =  Web Storage(localStorage & sessionStorage) baze de date: IndexedDB caching via ApplicationCache
  31. 31. connectivity & real-time + + = mesaje între documente XMLHttpRequest2 WebSocketevenimente de la server WebRTC
  32. 32. performanța + + =  WebWorker RequestAnimationFramedate direct în URL – BlobURL
  33. 33. device access+ + =  drag & drop orientation geolocationstarea bateriei
  34. 34. device access + + =  notificări acces la camera Webacces la fișiere – FileAPI
  35. 35. 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
  36. 36. http://mobilehtml5.org/
  37. 37. Super!... Mai multe despre tehnologiile HTML5?  + + = 
  38. 38. www.webplatform.org
  39. 39. http://diveintohtml5.org/
  40. 40. developer.mozilla.org
  41. 41. www.html5rocks.com
  42. 42. http://html5please.com/
  43. 43. http://webplatformtools.org/
  44. 44. http://html5weekly.com/
  45. 45. aplicație Firefox OS+ + = 
  46. 46. aplicație Firefox OS+ + =  construită cu HTML, CSS și JavaScript
  47. 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. 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. 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. 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. 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. 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. 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. 54. sistemul Firefox OS+ + = 
  55. 55. sistemul Firefox OS+ + =  Gaia – interfața cu utilizatorul
  56. 56. sistemul Firefox OS+ + =  Gecko redarea & procesarea datelor via standarde Web deschise (HTML, CSS, JS etc.)
  57. 57. sistemul Firefox OS+ + =  Gonk biblioteci & nucleu Linux
  58. 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. 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. 60. Mult succes!  + + =  Dr. Sabin BuragaFacultatea de Informatică, Universitatea “Alexandru Ioan Cuza” Iași www.purl.org/net/busaco
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×