HTML5? HTML5!
3 likes3,186 views
Documentul oferă o prezentare generală a HTML5, explicând vocabularul, noile elemente și API-urile care facilitează dezvoltarea aplicațiilor web. Se discută despre independența de dispozitiv, suport pentru multimedia și stocarea locală a datelor, plus noi tipuri de interacțiune cu utilizatorii. În plus, se menționează inițiativele de standardizare a specificațiilor HTML5 de către WHATWG și W3C.
![exemplu
<video src="porcii-verzi.ogg" controls autoplay></video>
…
<script>
// preluăm via DOM obiectul referitor la conținutul video
var video = document.getElementsByTagName ('video')[0];
</script>
<p>
<input type="button" value="Pauză"
onclick="video.pause ();">
<input type="button" value="Rulează"
onclick="video.play ();"> metodele pause() și play()
</p> sunt specificate de interfața
HTMLMediaElement](https://image.slidesharecdn.com/sburaga-html5-110730111555-phpapp02/85/HTML5-HTML5-29-320.jpg)
![<script> new Worker ('actualizator.js'); </script> exemplu
// deschiderea conexiunii cu baza de date
var server = new WebSocket ('ws://whatwg.org/database');
var db = openDatabase ('demo', '1.0', 'Date demo', 10240);
server.onmessage = function (eveniment) {
// datele sunt în format "comanda cheie valoare"
var date = eveniment.data.split (' ');
switch (date[0]) {
// inserare a unei valori pe baza cheii
case '+': db.transaction (function (t) {
t.executeSql ('INSERT INTO info (cheie, valoare) VALUES (?, ?)',
date[1], date[2]); });
case '-': db.transaction (function (t) { // operația de ștergere
t.executeSql ('DELETE FROM info WHERE cheie=? AND valoare=?',
date[1], date[2]); });
} un worker ce efectuează operații asupra
}; unei baze de date existente la nivel de client](https://image.slidesharecdn.com/sburaga-html5-110730111555-phpapp02/85/HTML5-HTML5-68-320.jpg)
HTML5? HTML5!
- 1. HTML ? Dr. Sabin Buraga www.purl.org/net/busaco
- 2. HTML ! “scurtă” introducere: aspecte esențiale
- 4. vocabular (set de elemente + atribute) pentru marcarea paginilor Web
- 5. suită de API-uri facilitând procesarea documentelor
- 6. permite dezvoltarea standardizată de aplicații Web pe baza unor API-uri specificate formal
- 7. conținut structurat având prezentări complexe via CSS3
- 8. independența de dispozitivubicuitate & accesibilitate
- 9. multitudine de conținuturiinteracțiune & experiență Web
- 10. de la Web 2D la Web 3D
- 11. API-uri specifice pentru îmbunătățirea performanței Web
- 12. API-uri pentru stocare locală (ne)persistentă a datelor
- 13. conectivitate între aplicații Web și/sau aplicații “clasice”
- 14. date structurate și modelate conceptual
- 15. recurge la tehnologii înrudite referitoare la prezentare: CSS3 model (abstract): DOM procesare: JavaScript …și altele
- 16. inițial, o propunere descrisă de WHATWG compus din Apple, Mozilla, Opera www.whatwg.org/specs/web-apps/current-work/
- 17. actualmente, în curs de standardizare la W3C cu statut de ciornă în lucru (working draft) www.w3.org/TR/html5/
- 18. specificațiile redactate de W3C și de WHATWG sunt diferite conținut, frecvența actualizărilor, licență de utilizare
- 19. Ce aduce nou HTML5?
- 20. relaxarea corectitudinii la nivel de sintaxă HTML și/sau XHTML
- 21. relaxarea corectitudinii la nivel de sintaxă HTML și/sau XHTML text/html versus application/xhtml+xml
- 22. specificarea tipului de document se poate realiza în mod simplificat <!DOCTYPE html>
- 23. modelul de reprezentare internă este bazat pe DOM (Document Object Model) DOM HTML5
- 24. modelul de reprezentare internă este bazat pe DOM (Document Object Model) eventual, arborele DOM – regăsit la nivel de browser via un obiect de tip Document – poate fi redat (accesat) de o extensie (plug-in)
- 25. noi elemente descriind fluxul informațional în stilul POSH (Plain Old Semantic HTML) article, aside, audio, canvas, datalist, details, figure, footer, header, keygen, mark, math, meter, nav, output, progress, samp, section, svg, time, video,…
- 26. <article> exemplu <header> <h1>Titlul articolului</h1> <p><time pubdate datetime="2011-08-01T07:33"></time></p> </header> <p>Conținutul propriu-zis al articolului…</p> <aside>Alte resurse de interes</aside> <section> <h1>Comentarii</h1> <article> <!-- comentariile sunt considerate note de subsol --> <footer> <p>Tuxy Pinguinescu</p> <p><time pubdate datetime="2011-08-03T01:07-03:03"></time></p> </footer> <p>Un comentariu</p> </article> </section> </article> un articol disponibil pe un blog
- 27. exemplu <figure> <img src="fii-student.png" alt="Sigla FII Student" /> <figcaption>FII Student</figcaption> </figure> <figure> <!-- conținutul nu neapărat trebuie să fie o imagine --> <video src="http://ferma.info/video/porci.mov"> </video> <figcaption> Relatare despre <em>porcii viole(n)ți</em>. </figcaption> </figure> specificarea unor figuri
- 28. elemente care permit “scufundarea” altor tipuri de conținuturi într-o pagină Web alături de elementele img, iframe, embed și object, sunt permise audio, video, source
- 29. exemplu <video src="porcii-verzi.ogg" controls autoplay></video> … <script> // preluăm via DOM obiectul referitor la conținutul video var video = document.getElementsByTagName ('video')[0]; </script> <p> <input type="button" value="Pauză" onclick="video.pause ();"> <input type="button" value="Rulează" onclick="video.play ();"> metodele pause() și play() </p> sunt specificate de interfața HTMLMediaElement
- 30. exemple de evenimente ce pot fi tratate în ceea ce privește conținutul multimedia: loadstart progress suspend abort error stalled play pause loadeddata waiting playing seeking canplay seeked timeupdate ended ratechange durationchange volumechange
- 31. elemente care permit “scufundarea” altor tipuri de conținuturi într-o pagină Web plus: canvas – grafică raster generată dinamic svg – conținut grafic vectorial specificat prin SVG math – formule matematice exprimate via MathML
- 32. interfața HTMLCanvasElement permite generarea dinamică de conținut grafic dependent de rezoluția curentă
- 33. interfața HTMLCanvasElement permite generarea dinamică de conținut grafic dependent de rezoluția curentă în prezent – specificație W3C (mai 2011): conținut grafic 2D transparent de tip raster www.w3.org/TR/2dcontext/
- 34. interfața HTMLCanvasElement este asociată elementului canvas
- 35. interfața HTMLCanvasElement este asociată elementului canvas navigatoarele Web actuale oferă suport relativ complet pentru Internet Explorer (versiuni < 9), se poate recurge la ExplorerCanvas: http://code.google.com/p/explorercanvas/
- 36. prin JavaScript pot fi efectuate transformări geometrice de bază generarea de căi grafice (paths) crearea degradé-urilor & redarea umbrelor specificarea de conținuturi textuale manipularea conținutului grafic …și altele
- 37. <html> exemplu <head> <title>Corola de minuni</title> <script type="text/javascript" src="discuri.js"></script> </head> <body onclick="javascript:deseneazaDiscuri ()"> <h1>Fă un click…</h1> <canvas id="canvas" height="500" width="375"> </canvas> </body> </html>
- 38. function deseneazaDiscuri () { exemplu // preluăm contextul de redare 2D var context = document.getElementById ('canvas').getContext ('2d'); // stabilim parametrii umbrelor context.shadowOffsetX = 3; context.shadowOffsetY = 3; context.shadowBlur = 33; // stabilim parametrii corpului de literă context.font = "20pt Arial, Helvetica, sans-serif"; context.fillText ("Fă un click", 5, 30); // translăm... context.translate (75, 75); programul JavaScript (discuri.js) generând conținutul
- 39. for (var i = 1; i < 5; i++) { // generăm 'inele' de discuri exemplu // salvăm contextul de redare context.save (); // stabilim via CSS3 culoarea de umplere a discului curent // ș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
- 40. un posibil rezultat al execuției codului (folosind un browser bazat pe WebKit)
- 41. exemple demonstrative & resurse: www.canvasdemos.com
- 42. interacțiunea cu utilizatorul formularele Web pot include câmpuri suplimentare
- 43. interacțiunea cu utilizatorul noi tipuri: search tel url email datetime date number range color
- 44. <label>Adrese suplimentare: exemplu <input type="email" multiple list="adrese" name="cc" /> </label> … <datalist id="adrese"> <option value="[email protected]" /> <option value="[email protected]" /> <option value="[email protected]" /> … </datalist> <input type="date" max="2000-12-31" name="zi-nastere" /> <input type="range" min="1" max="7" step="2" name="premii" />
- 45. interacțiunea cu utilizatorul noi elemente interactive: details summary command menu
- 46. încărcarea & redarea documentelor suplimentar față de obiectul Document, se specifică Window oferind acces la mediul de redare
- 47. încărcarea & redarea documentelor API-uri de bază: ApplicationCache control asupra cache-ului navigatorului Web
- 48. încărcarea & redarea documentelor API-uri de bază: WindowTimers oferă suport pentru specificarea contoarelor de timp
- 49. încărcarea & redarea documentelor API-uri de bază: Navigator acces la starea și proprietățile sistemului via sub-interfețele NavigatorID și NavigatorAbilities
- 50. încărcarea & redarea documentelor API-uri de bază: DataTransfer stochează fragmente de date în diverse formate (util și pentru efectuarea operațiilor drag & drop)
- 51. încărcarea & redarea documentelor API-uri de bază: UndoManager gestionează istoricul comenzilor efectuate (undo transaction history)
- 52. Există și alte specificații sau inițiative de interes?
- 53. WebSocket API definește un API abstract pentru transmiterea de date pe baza protocolului de transfer WebSocket: www.whatwg.org/specs/web-socket-protocol/ www.w3.org/TR/websockets/
- 54. exemplu // actualizările de date vor fi trimise cu rata de o actualizare // la fiecare 50ms, dacă există suficientă lățime de bandă var socket = new WebSocket ('ws://joc.undeva.info:1974/updates'); socket.onopen = function () { setInterval (function() { if (socket.bufferedAmount == 0) socket.send (oferaDate ()); }, 50); };
- 55. Web Messaging oferă API-uri pentru realizarea transferului de mesaje între diverse contexte de navigare www.w3.org/TR/postmsg/
- 56. Web Messaging mesajele pot proveni de la server, via socket-uri Web sau de la alte documente via canale de comunicație
- 57. Web Workers “muncitor” (worker) Web: script rulat în fundal – în accepțiunea daemon-ilor UNIX – independent de alte programe ce pot interacționa cu utilizatorul
- 58. Web Workers mediul de execuție al unui worker e complet separat, codul fiind rulat în paralel, în mod asincron http://whatwg.org/ww
- 59. Web Storage oferă mecanisme de stocare (persistentă) a datelor la nivel de client sub formă de perechi cheie—valoare www.w3.org/TR/webstorage/
- 60. Web Storage maniera de stocare a itemilor se precizează via atributele sessionStorage și localStorage
- 61. Web Storage maniera de stocare a itemilor se precizează via atributele sessionStorage și localStorage stocare nepersistentă (suport pentru sesiuni)
- 62. Web Storage maniera de stocare a itemilor se precizează via atributele sessionStorage și localStorage alternativă la cookie-uri
- 63. exemplu <textarea id="editor" placeholder="Începeți să tastați..."> </textarea> document.querySelector ('#editor').addEventListener ('keyup', function (e) { // la fiecare eliberare a tastei… // stocăm conținutul și data editării localStorage.setItem ('text', this.value); localStorage.setItem ('data', (new Date()).getTime()); }, false);
- 64. Web SQL Database se referă la un set de API-uri pentru managementul asincron al bazelor de date la nivel de client via SQL www.w3.org/TR/webdatabase/
- 65. Web SQL Database dialectul SQL suportat trebuie să fie cel oferit de SQLite
- 66. Web SQL Database accesul la baze de date e abstractizat de interfețele WindowDatabase, WorkerUtilsDatabase, DatabaseCallback
- 67. Web SQL Database în caz de succes, se va crea un obiect de tip: SQLTransaction (tranzacție asincronă) sau SQLTransactionSync (tranzacție realizată sincron) rezultatele întoarse de server în urma execuției comenzilor SQL se regăsesc într-un obiect SQLResultSet
- 68. <script> new Worker ('actualizator.js'); </script> exemplu // deschiderea conexiunii cu baza de date var server = new WebSocket ('ws://whatwg.org/database'); var db = openDatabase ('demo', '1.0', 'Date demo', 10240); server.onmessage = function (eveniment) { // datele sunt în format "comanda cheie valoare" var date = eveniment.data.split (' '); switch (date[0]) { // inserare a unei valori pe baza cheii case '+': db.transaction (function (t) { t.executeSql ('INSERT INTO info (cheie, valoare) VALUES (?, ?)', date[1], date[2]); }); case '-': db.transaction (function (t) { // operația de ștergere t.executeSql ('DELETE FROM info WHERE cheie=? AND valoare=?', date[1], date[2]); }); } un worker ce efectuează operații asupra }; unei baze de date existente la nivel de client
- 69. File API suită de API-uri pentru manipularea fișierelor File Blob FileList FileReader BlobBuilder FileWriter FileSaver FileSystem
- 70. De unde aflu mai multe?
- 71. WHATWG – Web Hypertext Application Technology Working Group www.whatwg.org
- 76. mult succes cu HTML ! Dr. Sabin Buraga www.purl.org/net/busaco