• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
HTML5? HTML5!
 

HTML5? HTML5!

on

  • 22,160 views

A presentation -- prepared for InfoEducation 2011 summer camp -- of one of most important HTML5 features. Several examples are also provided.

A presentation -- prepared for InfoEducation 2011 summer camp -- of one of most important HTML5 features. Several examples are also provided.

Statistics

Views

Total Views
22,160
Views on SlideShare
5,058
Embed Views
17,102

Actions

Likes
2
Downloads
81
Comments
2

13 Embeds 17,102

http://fiistudent.wordpress.com 15945
http://www.cirip.ro 611
http://www.worldit.info 278
http://incampus.ro 182
http://home.wephp.info 45
http://codeshout.ro 17
http://feeds.feedburner.com 8
http://twitter.com 5
http://webcache.googleusercontent.com 5
http://in-campus.net 3
http://programare.ucoz.ro 1
http://diversediversificate.wordpress.com 1
https://twitter.com 1
More...

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

12 of 2 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

    HTML5? HTML5! HTML5? HTML5! Presentation Transcript

    • HTML ? Dr. Sabin Buraga www.purl.org/net/busaco
    • HTML !“scurtă” introducere: aspecte esențiale
    • Ce este HTML5?
    • vocabular (set de elemente + atribute) pentru marcarea paginilor Web
    • suită de API-urifacilitând procesarea documentelor
    • permite dezvoltarea standardizată de aplicații Web pe baza unor API-uri specificate formal
    • conținut structurat având prezentări complexe via CSS3
    • independența de dispozitivubicuitate & accesibilitate
    • multitudine de conținuturiinteracțiune & experiență Web
    • de la Web 2D la Web 3D
    • API-uri specifice pentru îmbunătățirea performanței Web
    • API-uri pentru stocare locală (ne)persistentă a datelor
    • conectivitate între aplicații Web și/sau aplicații “clasice”
    • date structurate și modelate conceptual
    • recurge la tehnologii înrudite referitoare la prezentare: CSS3 model (abstract): DOM procesare: JavaScript …și altele
    • inițial, o propunere descrisă deWHATWG compus din Apple, Mozilla, Opera www.whatwg.org/specs/web-apps/current-work/
    • actualmente, în curs de standardizare la W3C cu statut de ciornă în lucru (working draft) www.w3.org/TR/html5/
    • specificațiile redactate de W3C și de WHATWG sunt diferite conținut, frecvența actualizărilor, licență de utilizare
    • Ce aduce nou HTML5?
    • relaxarea corectitudinii la nivel de sintaxă HTML și/sau XHTML
    • relaxarea corectitudinii la nivel de sintaxă HTML și/sau XHTML text/html versus application/xhtml+xml
    • specificarea tipului de documentse poate realiza în mod simplificat <!DOCTYPE html>
    • modelul de reprezentare internăeste bazat pe DOM (Document Object Model) DOM HTML5
    • modelul de reprezentare internăeste bazat pe DOM (Document Object Model) eventual, arborele DOM – regăsit la nivel de browservia un obiect de tip Document – poate fi redat (accesat) de o extensie (plug-in)
    • 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,…
    • <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
    • 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
    • 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
    • exemplu<video src="porcii-verzi.ogg" controls autoplay></video>…<script>// preluăm via DOM obiectul referitor la conținutul videovar 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
    • 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
    • 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
    • interfața HTMLCanvasElementpermite generarea dinamică de conținut grafic dependent de rezoluția curentă
    • interfața HTMLCanvasElementpermite 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/
    • interfața HTMLCanvasElement este asociată elementului canvas
    • interfața HTMLCanvasElement este asociată elementului canvas navigatoarele Web actuale oferă suport relativ completpentru Internet Explorer (versiuni < 9), se poate recurge la ExplorerCanvas: http://code.google.com/p/explorercanvas/
    • 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
    • <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>
    • 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
    • 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
    • un posibil rezultat al execuției codului(folosind un browser bazat pe WebKit)
    • exemple demonstrative & resurse: www.canvasdemos.com
    • interacțiunea cu utilizatorulformularele Web pot include câmpuri suplimentare
    • interacțiunea cu utilizatorul noi tipuri: search tel url email datetime date number range color
    • <label>Adrese suplimentare: exemplu <input type="email" multiple list="adrese" name="cc" /></label>…<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" />
    • interacțiunea cu utilizatorul noi elemente interactive:details summary command menu
    • încărcarea & redarea documentelor suplimentar față de obiectul Document,se specifică Window oferind acces la mediul de redare
    • încărcarea & redarea documentelor API-uri de bază: ApplicationCachecontrol asupra cache-ului navigatorului Web
    • încărcarea & redarea documentelor API-uri de bază: WindowTimersoferă suport pentru specificarea contoarelor de timp
    • încărcarea & redarea documentelor API-uri de bază: Navigator acces la starea și proprietățile sistemuluivia sub-interfețele NavigatorID și NavigatorAbilities
    • încărcarea & redarea documentelor API-uri de bază: DataTransfer stochează fragmente de date în diverse formate(util și pentru efectuarea operațiilor drag & drop)
    • încărcarea & redarea documentelor API-uri de bază: UndoManagergestionează istoricul comenzilor efectuate (undo transaction history)
    • Există și alte specificațiisau inițiative de interes?
    • WebSocket APIdefineș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/
    • 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);};
    • Web Messagingoferă API-uri pentru realizarea transferului de mesaje între diverse contexte de navigare www.w3.org/TR/postmsg/
    • Web Messagingmesajele pot proveni de la server, via socket-uri Websau de la alte documente via canale de comunicație
    • 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
    • Web Workersmediul de execuție al unui worker e complet separat, codul fiind rulat în paralel, în mod asincron http://whatwg.org/ww
    • Web Storage oferă mecanisme de stocare (persistentă) a datelorla nivel de client sub formă de perechi cheie—valoare www.w3.org/TR/webstorage/
    • Web Storagemaniera de stocare a itemilor se precizeazăvia atributele sessionStorage și localStorage
    • Web Storage maniera de stocare a itemilor se precizează via atributele sessionStorage și localStorage stocare nepersistentă(suport pentru sesiuni)
    • Web Storagemaniera de stocare a itemilor se precizeazăvia atributele sessionStorage și localStorage alternativă la cookie-uri
    • 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);
    • Web SQL Databasese referă la un set de API-uri pentru managementulasincron al bazelor de date la nivel de client via SQL www.w3.org/TR/webdatabase/
    • Web SQL Databasedialectul SQL suportat trebuie să fie cel oferit de SQLite
    • Web SQL Database accesul la baze de date e abstractizat de interfețeleWindowDatabase, WorkerUtilsDatabase, DatabaseCallback
    • 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țieicomenzilor SQL se regăsesc într-un obiect SQLResultSet
    • <script> new Worker (actualizator.js); </script> exemplu// deschiderea conexiunii cu baza de datevar 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
    • File APIsuită de API-uri pentru manipularea fișierelor File Blob FileList FileReader BlobBuilder FileWriter FileSaver FileSystem
    • De unde aflu mai multe?
    • WHATWG – Web HypertextApplication Technology Working Group www.whatwg.org
    • http://diveintohtml5.org/
    • http://www.html5rocks.com/
    • http://html5boilerplate.com/
    • http://html5demos.com/
    • mult succes cuHTML ! Dr. Sabin Buraga www.purl.org/net/busaco