Suita de tehnologii HTML5

1,961 views

Published on

An overview of HTML5.

O prezentare generală referitoare la suita de tehnologii HTML5, incluzând aspecte legate de grafică vectorială (SVG) și raster (via <canvas> și JavaScript), plus informații despre microdatele HTML5 pe baza modelelor schema.org.

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,961
On SlideShare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
64
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Suita de tehnologii HTML5

  1. 1. suita de tehnologii HTML5 o privire de ansamblu Dr. Sabin Buragawww.purl.org/net/busaco Dr. Sabin Buraga www.purl.org/net/busaco
  2. 2. Ce reprezintă HTML5?Dr. Sabin Buragawww.purl.org/net/busaco
  3. 3. Dr. Sabin Buragawww.purl.org/net/busaco HTML5 un vocabular (set de elemente + atribute) folosit pentru marcarea paginilor Web +o suită de API-uri facilitând procesarea documentelor
  4. 4. Dr. Sabin Buragawww.purl.org/net/busaco HTML5 un vocabular (set de elemente + atribute) folosit pentru marcarea paginilor Web +o suită de API-uri facilitând procesarea documentelor
  5. 5. Dr. Sabin Buragawww.purl.org/net/busaco HTML5permite dezvoltarea standardizată de aplicații Web pe baza unor interfețe de programare (API-uri)
  6. 6. Dr. Sabin Buragawww.purl.org/net/busaco HTML5 recurge la tehnologii înrudite referitoare laprezentare via foi de stiluri în cascadă: CSS – nivelul 3 model conceptual: DOM (Document Object Model) procesare la nivel de navigator Web: JavaScript …și altele
  7. 7. Dr. Sabin Buragawww.purl.org/net/busaco HTML5 în curs de standardizare la Consortiul Webstatut candidate recommendation (decembrie 2012) http://www.w3.org/TR/html5/
  8. 8. Dr. Sabin Buragawww.purl.org/net/busacodiverse specificații HTML5 în lucru: http://dev.w3.org/html5/
  9. 9. Ce aduce nou HTML5?Dr. Sabin Buragawww.purl.org/net/busaco
  10. 10. Dr. Sabin Buragawww.purl.org/net/busacoRelaxarea corectitudinii la nivel de sintaxă HTML și/sau XHTML
  11. 11. Dr. Sabin Buragawww.purl.org/net/busaco HTML5 specificarea tipului de documentse poate realiza în mod simplificat: <!DOCTYPE html>
  12. 12. Dr. Sabin Buragawww.purl.org/net/busacoModelul de reprezentare internă este bazat pe DOM DOM HTML5
  13. 13. Dr. Sabin Buragawww.purl.org/net/busaco HTML5lista elementelor (marcajelor) poate fi consultată la http://dev.w3.org/html5/markup/spec.html a se vizita si HTML5 Doctor http://html5doctor.com/
  14. 14. Dr. Sabin Buragawww.purl.org/net/busacoAntetul documentului poate include meta-date diverse construcții privind maniera de prezentare/comportamentul conținutuluisau relația documentului curent cu alte resurse Web
  15. 15. Dr. Sabin Buragawww.purl.org/net/busacoAntetul documentului poate include meta-date diverse construcții privind maniera de prezentare/comportamentul conținutuluisau relația documentului curent cu alte resurse Web title, base, link, meta, style, script, noscript
  16. 16. Dr. Sabin Buragawww.purl.org/net/busacoNoi elemente de structurare (secțiuni) în stilul POSH – Plain Old Semantic HTMLarticle, nav, aside, section, header, footer, hgroup
  17. 17. <article> un articol disponibil pe un blog <header> <h1>Titlul articolului</h1> <p><time pubdate datetime="2013-01-07T07:33"></time></p> Dr. Sabin Buragawww.purl.org/net/busaco </header> <p>Conținutul propriu-zis al articolului…</p> <aside>Alte resurse de interes</aside> <section> <h1>Comentarii</h1> <article> <!-- comentariile sunt considerate aici note de subsol --> <footer> <p>Autor: Tuxy Pinguinescu</p> <p><time pubdate datetime="2013-01-10T01:07-03:03"></time></p> </footer> <p>Un comentariu</p> </article> </section></article>
  18. 18. specificarea unor figuri<figure> Dr. Sabin Buragawww.purl.org/net/busaco <img src="imagine.png" alt="Descriere alternativă" /> <figcaption>O explicație…</figcaption></figure><figure> <!-- conținutul nu trebuie neapărat să fie o imagine --> <video src="http://ferma.info/video/pinguini.mov"></video> <figcaption> Relatare despre <cite>pinguinii FII</cite>. </figcaption></figure> gruparea conținutului
  19. 19. Dr. Sabin Buragawww.purl.org/net/busaco Embedded content“scufundarea” altor tipuri de conținuturi într-un document HTMLconținut grafic – raster și/sau vectorial conținut sonor conținut video
  20. 20. Dr. Sabin Buragawww.purl.org/net/busaco Embedded content svg conținut grafic vectorialspecificat prin SVG (Scalable Vector Graphics) un limbaj descriptiv bazat pe XML http://www.w3.org/Graphics/SVG/
  21. 21. studiu de caz: grafică vectorială SVG<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="8cm" height="3cm"> <title>Conținut grafic SVG</title> Dr. Sabin Buragawww.purl.org/net/busaco <defs> <linearGradient id="unGradient"> <!-- definim un degrade liniar --> <stop offset="20%" stop-color="#3FF" /> <stop offset="90%" stop-color="#F3F" /> </linearGradient> <rect id="patrat" width="15px" height="15px" fill="navy" /> <path id="cale" d="M15 50 C10 0 90 0 90 40" /> <!-- o cale de redare --> </defs> <!-- o formă rectangulară umplută cu degrade-ul de mai sus --> <rect x="1cm" y="1cm" width="6cm" height="1cm" fill="url(#unGradient)" /> <!-- folosim instanțe ale pătratului definit --> <use x="40" y="40" xlink:href="#patrat" /> <use x="100" y="80" xlink:href="#patrat" /> <use x="160" y="80" xlink:href="#patrat" /> <use x="220" y="80" xlink:href="#patrat" /> <!-- un text redat conform căii specificate --> <text fill="#000"><textPath xlink:href="#cale">Salut, lume!</textPath></text></svg> C. Bulancea & S. Buraga, 2004
  22. 22. studiu de caz: grafică vectorială SVGDr. Sabin Buragawww.purl.org/net/busaco
  23. 23. Dr. Sabin Buragawww.purl.org/net/busaco un experiment de editare on-line cu instrumentul JS Binincluderea construcțiilor SVG direct în documentul HTML5
  24. 24. Dr. Sabin Buragawww.purl.org/net/busaco Embedded content svg specificația curentă: SVG 1.1 2nd Edition în contextul dispozitivelor mobile: SVG Tiny suport în cadrul navigatoarelor moderneOpera, Firefox, Safari (inclusiv pentru iOS), Chrome, IE9+ instrumente: Apache Batik, Inkscape, Raphaël.js,…
  25. 25. caniuse.com Dr. Sabin Buragawww.purl.org/net/busaco
  26. 26. Dr. Sabin Buragawww.purl.org/net/busacoanimații SVG realizate dinamic via biblioteca Raphaël
  27. 27. Dr. Sabin Buragawww.purl.org/net/busaco Embedded content mathexpresii matematice exprimate via limbajul MathML un limbaj declarativ bazat pe XML http://www.w3.org/Math/
  28. 28. Dr. Sabin Buragawww.purl.org/net/busaco Embedded content mathspecificația curentă: MathML 3.0 (2010) suport nativ în Firefox și Chrome o listă a instrumentelor software lahttp://www.w3.org/Math/Software/
  29. 29. Dr. Sabin Buragawww.purl.org/net/busaco exemplu demonstrativ oferit de Mozillahttps://developer.mozilla.org/docs/Mozilla_MathML_Project
  30. 30. Dr. Sabin Buragawww.purl.org/net/busaco Embedded content alături de elementele img, iframe, embed și object, sunt permise audio, video, sourcece pot fi utilizate la includerea de conținut multimedia
  31. 31. <video id="film" src="/media/tux.ogg" controls autoplay> Nu există suport pentru elementul video… :-( Dr. Sabin Buragawww.purl.org/net/busaco</video>…<script type="text/javascript">// preluăm conținutul videovar video = document.getElementById(film);</script><p> <input type="button" value="Oprește" onclick="video.pause ();" /> <input type="button" value="Rulează" onclick="video.play ();" /></p>
  32. 32. <source src=fii-absolvent.mp4 type=video/mp4; codecs="mp4v.20.240, mp4a.40.2" /> Dr. Sabin Buragawww.purl.org/net/busaco<source src=fii-absolvent.mkv type=video/x-matroska; codecs="theora, vorbis" /><source src=discursul-lui-tux.oga type=audio/ogg; codecs=flac /> precizarea codec-urilor necesare redării
  33. 33. <source src=fii-absolvent.mp4 type=video/mp4; codecs="mp4v.20.240, mp4a.40.2" /> Dr. Sabin Buragawww.purl.org/net/busaco<source src=fii-absolvent.mkv type=video/x-matroska; codecs="theora, vorbis" /><source src=discursul-lui-tux.oga type=audio/ogg; codecs=flac /> precizarea codec-urilor necesare redării codec-uri uzuale: H.264 (MP4 – comercial, susținut de Apple & Microsoft) www.h264info.com
  34. 34. <source src=fii-absolvent.mp4 type=video/mp4; codecs="mp4v.20.240, mp4a.40.2" /> Dr. Sabin Buragawww.purl.org/net/busaco<source src=fii-absolvent.mkv type=video/x-matroska; codecs="theora, vorbis" /><source src=discursul-lui-tux.oga type=audio/ogg; codecs=flac /> precizarea codec-urilor necesare redării codec-uri uzuale: OGG (Theora – disponibil open-source) www.xiph.org/ogg/
  35. 35. <source src=fii-absolvent.mp4 type=video/mp4; codecs="mp4v.20.240, mp4a.40.2" /> Dr. Sabin Buragawww.purl.org/net/busaco<source src=fii-absolvent.mkv type=video/x-matroska; codecs="theora, vorbis" /><source src=discursul-lui-tux.oga type=audio/ogg; codecs=flac /> precizarea codec-urilor necesare redării codec-uri uzuale: WebM (VP8 – o inițiativă Google) www.webmproject.org
  36. 36. Dr. Sabin Buragawww.purl.org/net/busaco Embedded content elementul track permite specificarea de piste (track-uri) ce pot include subtitrări, descrieri, capitole, meta-date<video src="…"> <track kind="subtitles" src="..." srclang="en" label="English" /> <track kind="captions" src="..." srclang="en" label="English for the Hard of Hearing" /> <track kind="subtitles" src="..." srclang="ro" label="Românește" /></video>
  37. 37. Dr. Sabin Buragawww.purl.org/net/busaco Embedded content canvassuport pentru grafica raster (bitmap) generată dinamic via JavaScript
  38. 38. Dr. Sabin Buragawww.purl.org/net/busaco Embedded content canvas suport pentru grafica raster (bitmap) generată dinamic via JavaScriptfuncționalitățile privind redarea graficii sunt oferite de interfața de programare HTMLCanvasElement
  39. 39. Dr. Sabin Buragawww.purl.org/net/busaco Interfața HTMLCanvasElementspecificație W3C: candidate recommendation (decembrie 2012) context de redare:conținut grafic 2D transparent de tip raster www.w3.org/TR/2dcontext/
  40. 40. <!DOCTYPE html><html> generarea<head> unei corole de minuni <title>Corola de minuni</title> Dr. Sabin Buragawww.purl.org/net/busaco</head><script type="text/javascript" src="discuri.js"></script><body onclick="javascript:deseneazaDiscuri()"> <h1>Un click…</h1> <canvas id="canvas" height="500" width="375"> </canvas></body></html>
  41. 41. function deseneazaDiscuri() { // preluăm contextul de redare 2D Dr. Sabin Buragawww.purl.org/net/busaco var context = document.getElementById (canvas).getContext (2d); // stabilim parametrii corpului de literă context.font = "20pt sans-serif"; context.fillText ("o minune", 5, 30); // translăm... context.translate (75, 75); programul JavaScript (discuri.js) generând conținutul
  42. 42. for (var i = 1; i < 5; i++) { // vom genera inele de discuri // salvăm contextul de redare context.save (); // stabilim via CSS3 culoarea de umplere a discului curent Dr. Sabin Buragawww.purl.org/net/busaco // și ajustăm aleatoriu transparența (alpha) context.fillStyle = rgba(33, + (51 * i) + , + (255 - 51 * i) + , + Math.random() + ); for (var j = 0; j < i * 6; j++) { // desenăm discuri context.rotate (Math.PI * 2 / (i * 6)); context.beginPath (); context.arc (0, i * 12.5, 5, 0, Math.PI * 2, true); context.fill (); } // restaurăm contextul de redare context.restore (); } programul JavaScript} (discuri.js) generând conținutul
  43. 43. Dr. Sabin Buragawww.purl.org/net/busacoun posibil rezultat al execuției codului
  44. 44. Dr. Sabin Buragawww.purl.org/net/busacogenerarea dinamică a unui “mărțișor” Web
  45. 45. exemple, tutoriale & resurse: www.html5canvastutorials.com www.canvasdemos.comSabin Buraga < busaco@infoiasi.ro >
  46. 46. Dr. Sabin Buragawww.purl.org/net/busacoredarea în canvas a unui grafic cu biblioteca Flotr2
  47. 47. inspectarea documentului HTML5Sabin Buraga < busaco@infoiasi.ro > în Firefox
  48. 48. Dr. Sabin Buragawww.purl.org/net/busaco Alternativă de redare:conținut grafic 3D pe baza WebGL http://get.webgl.org/
  49. 49. Dr. Sabin Buragawww.purl.org/net/busacoinstrumente pentru dezvoltatori: CopperLicht, CubicVR, PhiloGL, SceneJS, TDL (ThreeD Library), Three.js
  50. 50. Dr. Sabin Buragawww.purl.org/net/busaco Formulare HTML5formularele Web pot include noi tipuri de câmpuri search tel url email datetime date number range
  51. 51. <label>Adrese suplimentare: exemplificări <input type="email" multiple list="adrese" name="cc" /></label> Dr. Sabin Buragawww.purl.org/net/busaco…<datalist id="adrese"> <option value="tux@pinguin.info" /> <option value="tuxy.pinguinescu@info.uaic.ro" /> <option value="tp@alt.undeva.org" /> …</datalist><input type="date" max="2000-12-31" name="zi-nastere" /><input type="range" min="1" max="7" step="2" name="premii" />
  52. 52. Dr. Sabin Buragawww.purl.org/net/busaco Microdata HTML 5 specificație W3C în stadiu de ciornă (Ian Hickson, octombrie 2012)http://www.w3.org/TR/microdata/
  53. 53. Dr. Sabin Buragawww.purl.org/net/busaco Microdata HTML 5posibilitatea de a specifica perechi de proprietăți (nume, valoare) “scufundate” în HTML menite a fi “înțelese” de software (e.g., motoarele de căutare)
  54. 54. Dr. Sabin Buragawww.purl.org/net/busaco Microdata HTML 5grupurile de perechi de proprietăți nume—valoare sunt denumite items creare via atributul itemscopespecificarea unei proprietăți prin atributul itemprop referire cu ajutorul atributului itemref
  55. 55. Dr. Sabin Buragawww.purl.org/net/busaco Microdata HTML 5 grupurile de perechi de proprietăți nume—valoare sunt denumite itemsasocierea unui tip de date se face cu atributul itemtype pentru identificarea unui item se folosește itemid
  56. 56. Dr. Sabin Buragawww.purl.org/net/busaco schema.org colecție de vocabulare (scheme de date)– e.g., Book, Event, LocalBusiness, Movie, Offer, Person, Place, Recipe, Review, TVSeries,… – recunoscute și indexate de roboții principalelor motoare de căutare Bing, Google, Yahoo!, Yandex
  57. 57. Dr. Sabin Buragawww.purl.org/net/busaco
  58. 58. <body itemscope itemtype="http://schema.org/WebPage"> <header> <h1 itemprop="name"> <a href="index.html" title="…">Dezvoltarea aplicațiilor Web la nivel de client</a> Dr. Sabin Buragawww.purl.org/net/busaco </h1> <p class="slogan" itemprop="description">prezentările aferente cursului</p> </header> <article> <!-- conținut propriu-zis --> </article> specificarea faptului că Sabin Buraga <footer> este o persoană <h6> <span itemscope itemtype="http://schema.org/Person"> <a href="http://www.purl.org/net/busaco" title="…" itemprop="url" accesskey="S"> <span itemprop="name">Sabin Buraga</span> </a> </span> </h6> </footer> recurgerea la elemente structurale și</body> scheme de microdate HTML5
  59. 59. Dr. Sabin Buragawww.purl.org/net/busaco extragerea/verificarea de date structurate via Structured Data Testing Toolhttp://www.google.com/webmasters/tools/richsnippets
  60. 60. Dr. Sabin Buragawww.purl.org/net/busacocunoștințele incluse în paginile Web via microdate HTML5 pot fi folosite la recomandarea altor resurse
  61. 61. Până la urmă, ce înseamnă HTML5?Dr. Sabin Buragawww.purl.org/net/busaco
  62. 62. Dr. Sabin Buragawww.purl.org/net/busaco“HTML5 should not be considered as a whole. You should cherry-pick the technology that suits the solution to your problem.” Remy Sharp
  63. 63. Dr. Sabin Buragawww.purl.org/net/busaco HTML5 semantic markupnoi marcaje precum <header> <nav> <section> <aside>… noi tipuri de interacțiune via formulare Web expresii matematice – MathML microdate conținut editabil
  64. 64. Dr. Sabin Buragawww.purl.org/net/busaco HTML5 prezentarea conținutului via foi de stiluri CSSfacilități aduse de CSS3: tranziții, transformări, coloane,… media queries utilizarea fonturilor externe – Web fonts
  65. 65. Dr. Sabin Buragawww.purl.org/net/busaco HTML5 grafica 2D & 3D <canvas> în contextul 2D <canvas> 3D (WebGL)conținut grafic scalabil – SVG
  66. 66. Dr. Sabin Buragawww.purl.org/net/busaco HTML5 multimedia <audio> (MP3, OGG) <video> (H.264, OGG, WebM) API-uri de procesare a sunetuluicomunicații în timp-real – WebRTC
  67. 67. Dr. Sabin Buragawww.purl.org/net/busaco HTML5 device access drag & drop orientation geolocation acces la camera Web notificări acces la fișierele gazdei – File APIHTML5 în contextul TV & industriei auto
  68. 68. Dr. Sabin Buragawww.purl.org/net/busaco HTML5 offline & storageWeb Storage (localStorage & Session Storage)baze de date la nivel de client – e.g., indexedDB caching
  69. 69. Dr. Sabin Buragawww.purl.org/net/busaco HTML5 connectivity & real-time mesaje vehiculate între documente transferuri asincrone via XMLHttpRequest – nivelul 2 WebSocketevenimente recepționate de la server (server-side events)
  70. 70. Dr. Sabin Buragawww.purl.org/net/busaco HTML5 asigurarea performanței Web Workersmanagementul istoricului navigării RequestAnimationFrame înglobarea datelor direct în URI
  71. 71. Dr. Sabin Buragawww.purl.org/net/busacoarhitectura clientului Web actual (Jeff Jaffe, 2012)
  72. 72. Web-ul mobil Dr. Sabin Buragawww.purl.org/net/busacosuportul oferit de navigatoarele platformelor mobile conform http://mobilehtml5.org/
  73. 73. De unde aflu mai multe?Dr. Sabin Buragawww.purl.org/net/busaco
  74. 74. http://diveintohtml5.org/Sabin Buraga < busaco@infoiasi.ro >
  75. 75. developer.mozilla.orgSabin Buraga < busaco@infoiasi.ro >
  76. 76. www.html5rocks.comSabin Buraga < busaco@infoiasi.ro >
  77. 77. http://html5demos.com/Sabin Buraga < busaco@infoiasi.ro >
  78. 78. http://html5boilerplate.com/Sabin Buraga < busaco@infoiasi.ro >
  79. 79. http://jster.net/Sabin Buraga < busaco@infoiasi.ro >
  80. 80. http://html5please.com/Sabin Buraga < busaco@infoiasi.ro >
  81. 81. http://html5weekly.com/Sabin Buraga < busaco@infoiasi.ro >
  82. 82. suita de tehnologii HTML5 spor la lucru & succes Dr. Sabin Buragawww.purl.org/net/busaco Dr. Sabin Buraga www.purl.org/net/busaco

×