Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

HTML5 în XXX de minute

4,401 views

Published on

Aspecte esențiale privitoare la limbajul de marcare HTML5 (o prezentare pentru un hackathon Web destinat elevilor de liceu).

Essential aspects about the HTML5 markup language (a Web hackathon presentation for high-school students).

Published in: Technology
  • Be the first to like this

HTML5 în XXX de minute

  1. 1. Dr. Sabin Buraga Facultatea de Informatică, Universitatea „Alexandru Ioan Cuza” Iași www.purl.org/net/busaco  @busaco4web HTML5 în <abbr title="30">XXX</abbr> de minute
  2. 2. dezvoltarea aplicațiilor Web aplicație Web = interfață + program + conținut (date) Internet (Web) ⌚   ⎚
  3. 3. dezvoltarea aplicațiilor Web aplicație Web = interfață + program + conținut (date) la nivel de client (front-end) și/sau server (back-end) Internet (Web) ⌚   ⎚
  4. 4. Cum publicăm pe Web? ☸ ♛ ⌬ ❁ ♨ Cum punem la dispoziția utilizatorilor resurse de interes?
  5. 5. Recurgând la o modalitate de structurare și de prezentare a datelor
  6. 6. Reprezentări (textuale) ale resurselor Web date procesabile, disponibile în formate precum HTML, SVG, RSS, JSON, CSV, TXT etc.
  7. 7. Reprezentări (textuale) ale resurselor Web identificate pe baza unui URL (Uniform Resource Locator) http://www.slideshare.com/busaco/presentations/ https://twitter.com/alecsandru
  8. 8. Reprezentări (textuale) ale resurselor Web accesate via un protocol HTTP (HyperText Transfer Protocol)
  9. 9. Pentru Web, vom folosi limbaj(e) de marcare (mark-up languages) </>
  10. 10. H T M L hipsters’ hyper hilarious tax-free text tags mesmerizing markup mystic laugh language lure
  11. 11. lingua franca a Web-ului SGMLHTML 2.0HTML 3.2 HTML 4.01XHTML 1.0HTML 5HTML 5.1…
  12. 12. documente HTML  pagini Web fișiere text .html scrise manual de utilizator editor de cod-sursă – exemple: Atom, Sublime Text etc. mediu de dezvoltare Web – e.g., Eclipse, Visual Studio aplicație online – exemplificări: c9.io, Codepen, JS Bin,…
  13. 13. documente HTML  pagini Web generate de un program la nivel de client – cu JavaScript eventual, folosind o bibliotecă: Angular, D3.js, jQuery, React,…
  14. 14. documente HTML  pagini Web generate de un program la nivel de server uzual, via un server de aplicații Web + un cadru de lucru (framework) specific limbaje: C#, Java, JavaScript, PHP, Python, Ruby, Scala,… soluții: ASP.NET MVC, Laravel, Node.js, Play, Rails etc.
  15. 15. Format bazat pe marcatori (adnotări, mark-ups, elemente) <!DOCTYPE html> <html> <!-- început de doc. (element obligatoriu) --> <!-- început de antet (tag de început) --> <head> ... <!-- includere de stiluri CSS, meta-date etc. --> </head> <!-- sfârșit de antet (tag de final) --> <!-- început de corp: date propriu-zise --> <body> ... <!-- conținut redat de browser --> </body> <!-- sfârșit de corp --> </html> <!-- sfârșit de document -->
  16. 16. Lista elementelor HTML referitoare la antetul documentului (head): html head title base link meta style script noscript
  17. 17. Lista elementelor HTML vizând structura (sections): body article nav aside section header footer h1—h6 main address
  18. 18. Lista elementelor HTML grupare (grouping): p hr pre blockquote ol ul li dl dt dd figure figcaption div
  19. 19. Lista elementelor HTML tabele (tables): table caption thead tbody tfoot tr th td col colgroup
  20. 20. Lista elementelor HTML formulare (Web forms): form fieldset legend label input button select datalist optgroup option textarea keygen output progress meter
  21. 21. Lista elementelor HTML alte conținuturi inserate (embedded): img iframe embed object param video audio track source canvas map area
  22. 22. Lista elementelor HTML privind datele textuale (text-level): a em strong abbr q cite dfn sub sup
  23. 23. Lista elementelor HTML privind datele textuale (text-level 2): time code kbd samp var mark bdi bdo ruby rt rp span br wbr
  24. 24. http://jsbin.com/yurecuwuye/
  25. 25. <a href="http://www.infoiasi.ro/" title="…">FII</a> tag de început tag de sfârșit atributadresă Web (URL) posibilitatea de a interacționa – via HTTP sau alte protocoale de comunicație – cu resurse disponibile local ori la distanță (oferite de alte situri/aplicații Web) „pânze” (web-uri) de resurse interconectate
  26. 26. spațiile albe nu au semnificație
  27. 27. marcatorii trebuie să fie închiși și să se împerecheze corect! <div><q>We don't need no education</div></q> greșit!
  28. 28. valorile atributelor trebuie încadrate de ghilimele sau apostrofuri <form action=proc.php method="GET'> <label for=căutare">Caută:</label> <input type=search placeholder= /></form> eronat!
  29. 29. incorectitudinile sintactice/semantice nu vor fi semnalate de navigatorul Web
  30. 30. HyperText Markup Language versiunea actuală: HTML5 standard al Consorțiului Web (octombrie 2014) http://www.w3.org/html/
  31. 31. a abbr address area article aside audio b base bdi bdo blockquote body br button canvas caption cite code col colgroup data datalist dd del dfn div dl dt em embed fieldset figcaption figure footer form h1—h6 head header hr html i iframe img input ins kbd keygen label legend li link main map mark meta meter nav noscript object ol optgroup option output p param pre progress q rb rp rt rtc ruby s samp script section select small source span strong style sub sup table tbody td template textarea tfoot th thead time title tr track u ul var video wbr elementele HTML5 – de consultat http://html5doctor.com/
  32. 32. Câteva detalii despre noile elemente HTML5? ⧉ ⎔ ⍝ ⵄ ✷
  33. 33. Noi elemente de structurare (secțiuni) article, nav, aside, section, header, footer
  34. 34. <!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> vezi și https://w3c.github.io/elements-of-html/
  35. 35. „Scufundarea” altor tipuri de conținuturi într-un document HTML conținut grafic – raster și/sau vectorial conținut sonor conținut video
  36. 36. Conținut grafic vectorial specificat prin SVG (Scalable Vector Graphics) un limbaj descriptiv bazat pe XML http://www.w3.org/Graphics/SVG/ https://developer.mozilla.org/docs/Web/SVG
  37. 37. un experiment de editare on-line cu instrumentul JS Bin includerea de marcaje SVG direct în documentul HTML5 exemple demonstrative la http://svg-wow.org/
  38. 38. Alături de elementele img, iframe, embed și object, sunt permise audio, video, source și track pentru a încorpora resurse multimedia într-o pagină Web
  39. 39. <!-- prezentarea lui Rufus Pollock despre datele deschise --> <section id="tutorial"> <p>Open Data: Where We Are and Where We're Going</p> <video src= "http://videolectures.net/dataforum2012_pollock_open_data/"> <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> </section> codec-uri uzuale pentru facilitarea redării: H.264 (MP4, comercial) – www.h264info.com OGG (open-source) – www.xiph.org/ogg/ WebM (open-source) – www.webmproject.org Opus (specificație liberă) – http://tools.ietf.org/html/rfc6716
  40. 40. canvas generarea dinamică – via JavaScript – de conținut grafic 2D dependent de rezoluția curentă
  41. 41. Sabin Buraga < busaco@infoiasi.ro > o suită de tutoriale: www.html5canvastutorials.com vezi și https://developer.mozilla.org/docs/Web/API/Canvas_API
  42. 42. canvas alternativă de redare: conținut grafic 3D pe baza WebGL
  43. 43. mediu Web de dezvoltare: http://webglplayground.net/ resurse: https://developer.mozilla.org/docs/Web/WebGL WebGL în conjuncție cu jQuery
  44. 44. Noi tipuri de câmpuri ale formularelor Web alături de text, password, checkbox, radio, file, hidden, button, image, submit se pot folosi color, email, tel, number, range, date, time, url,… <input type="date" max="2000-12-31" name="aniversare" /> <input type="range" min="1" max="7" step="2" name="premii" /> <input type="color" name="culoare" /> <input type="search" pattern="[A-Za-z]+" placeholder="Caută cadouri..." /> nu există încă suport complet pentru toate tipurile de controale de interacțiune
  45. 45. Instrumente software de interes? ✐ ☑ ☂
  46. 46. inspectarea codului HTML via instrumentele pentru dezvoltatorii Web oferite de orice browser modern
  47. 47. validarea documentelor HTML5 (testarea corectitudinii la nivel de sintaxă) validator.w3.org
  48. 48. testarea suportului HTML5 oferit de browser html5test.com caniuse.com – situația curentă vizând implementarea unor specificații de către navigatoarele Web
  49. 49. Până la urmă, ce înseamnă HTML5?
  50. 50. “HTML5 should not be considered as a whole. You should cherry-pick the technology that suits the solution to your problem.” Remy Sharp
  51. 51. vocabular (set de elemente + atribute) folosit pentru marcarea paginilor Web + suită de interfețe de programare (API) facilitând procesarea documentelor la nivelul navigatorului Web – desktop, mobil,…
  52. 52. scop: 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
  53. 53. Care-s posibilitățile de documentare privind HTML5? ♚ ✂ ☄ ❤ ♻
  54. 54. http://profs.info.uaic.ro/~busaco/teach/ materiile vizând tehnologiile Web inițiate și predate de Sabin Buraga Facultatea de Informatică, UAIC Iași
  55. 55. Mozilla Developer Network (MDN) – developer.mozilla.org
  56. 56. M. Pilgrim et al., Dive into HTML5 – http://diveintohtml5.org/
  57. 57. DevDocs – http://devdocs.io/
  58. 58. HTML5 Rocks – html5rocks.com
  59. 59. HTML5 Weekly – http://html5weekly.com/
  60. 60.  Dr. Sabin Buraga Facultatea de Informatică, Universitatea „Alexandru Ioan Cuza” Iași www.purl.org/net/busaco  @busaco4web + + = Mult succes!

×