Your SlideShare is downloading. ×
Dezvoltarea aplicaţiilor Web la nivel de client (cursul #11): Programare Web. Suita de tehnologii HTML5
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Dezvoltarea aplicaţiilor Web la nivel de client (cursul #11): Programare Web. Suita de tehnologii HTML5

213
views

Published on

Dezvoltarea aplicaţiilor Web la nivel de client — detalii la http://profs.info.uaic.ro/~busaco/teach/courses/cliw/web-film.html

Dezvoltarea aplicaţiilor Web la nivel de client — detalii la http://profs.info.uaic.ro/~busaco/teach/courses/cliw/web-film.html

Published in: Technology

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
213
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Dr. Sabin Buragawww.purl.org/net/busaco programare Web la nivel de client suita de tehnologii HTML5
  • 2. Walt Disney Dr. Sabin Buragawww.purl.org/net/busaco “If you can dream it, you can do it.”
  • 3. Dr. Sabin Buragawww.purl.org/net/busaco Care este prezentul și viitorul programării Web la nivel de client?
  • 4. un vocabular (set de elemente + atribute) folosit pentru marcarea paginilor Web + o suită de API-uri facilitând procesarea documentelor Dr. Sabin Buragawww.purl.org/net/busaco HTML5
  • 5. permite dezvoltarea standardizată de aplicații Web pe baza unor API-uri specificate formal Dr. Sabin Buragawww.purl.org/net/busaco HTML5
  • 6. permite dezvoltarea standardizată de aplicații Web pe baza unor API-uri specificate formal API-urile sunt definite de interfețe descrise via limbajul declarativ WebIDL W3C Candidate Recommendation, 2012 http://www.w3.org/TR/WebIDL/ Dr. Sabin Buragawww.purl.org/net/busaco HTML5
  • 7. recurge la tehnologii înrudite referitoare la prezentare: CSS – nivelul 3 model conceptual (abstract): DOM procesare: JavaScript …și altele Dr. Sabin Buragawww.purl.org/net/busaco HTML5
  • 8. recurge la tehnologii înrudite referitoare la prezentare: CSS – nivelul 3 model conceptual (abstract): DOM procesare: JavaScript …și altele API-uri specifice Dr. Sabin Buragawww.purl.org/net/busaco HTML5
  • 9. inițial, o propunere independentă de Consorțiul Web WHATWG (Web Hypertext Application Technology Working Group) compus din Apple, Mozilla, Opera www.whatwg.org Dr. Sabin Buragawww.purl.org/net/busaco HTML5
  • 10. Dr. Sabin Buragawww.purl.org/net/busaco www.whatwg.org/specs/web-apps/current-work/
  • 11. în curs de standardizare la Consorțiul Web Candidate Recommendation (august 2013) http://www.w3.org/TR/html5/ Dr. Sabin Buragawww.purl.org/net/busaco HTML5
  • 12. Dr. Sabin Buragawww.purl.org/net/busaco diverse specificații HTML5 în lucru: http://dev.w3.org/html5/
  • 13. specificațiile redactate de W3C și de WHATWG sunt diferite conținut, frecvența actualizărilor, licență de utilizare Dr. Sabin Buragawww.purl.org/net/busaco HTML5
  • 14. Dr. Sabin Buragawww.purl.org/net/busaco Ce aduce nou HTML5?
  • 15. HTML și/sau XHTML Dr. Sabin Buragawww.purl.org/net/busaco Relaxarea corectitudinii la nivel de sintaxă
  • 16. text/html versus application/xhtml+xml Dr. Sabin Buragawww.purl.org/net/busaco Relaxarea corectitudinii la nivel de sintaxă
  • 17. <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" lang="ro"> <head> spațiul de nume <title>…</title> rămâne neschimbat <meta charset="utf-8" /> … </head> <body> … </body> </html> Dr. Sabin Buragawww.purl.org/net/busaco specificarea tipului de document se poate realiza în mod simplificat:
  • 18. DOM HTML5 Dr. Sabin Buragawww.purl.org/net/busaco Modelul de reprezentare internă este bazat pe DOM
  • 19. DOM HTML5 eventual, arborele DOM – regăsit la nivel de browser via un obiect de tip Document – poate fi redat (accesat) de către o extensie/plug-in Dr. Sabin Buragawww.purl.org/net/busaco Modelul de reprezentare internă este bazat pe DOM
  • 20. DOM HTML5 orice document Web este identificat de o adresă unică (URL) ce poate fi manipulată via DOM Dr. Sabin Buragawww.purl.org/net/busaco Modelul de reprezentare internă este bazat pe DOM
  • 21. detalii privind elementele (marcajele) și atributele aferente: http://docs.webplatform.org/wiki/html a se vizita și HTML5 Doctor http://html5doctor.com/ Dr. Sabin Buragawww.purl.org/net/busaco HTML5
  • 22. în stilul POSH – Plain Old Semantic HTML article, nav, aside, section, header, footer etc. Dr. Sabin Buragawww.purl.org/net/busaco Noi elemente de structurare (secțiuni) de studiat Ș. Negru, Web LSD (Logic, Semantics and Design) http://slid.es/blankdots/weblsd
  • 23. “scufundarea” altor tipuri de conținuturi într-un document HTML conținut grafic – raster și/sau vectorial conținut sonor conținut video Dr. Sabin Buragawww.purl.org/net/busaco Embedded content
  • 24. svg conținut grafic vectorial specificat prin SVG (Scalable Vector Graphics) un limbaj descriptiv bazat pe XML http://www.w3.org/Graphics/SVG/ Dr. Sabin Buragawww.purl.org/net/busaco Embedded content
  • 25. studiu de caz: grafică vectorială cu SVG Dr. Sabin Buragawww.purl.org/net/busaco <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> <defs> <linearGradient id="unGradient"> <!-- definim un degradé 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 degradé-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
  • 26. Dr. Sabin Buragawww.purl.org/net/busaco studiu de caz: grafică vectorială cu SVG
  • 27. Dr. Sabin Buragawww.purl.org/net/busaco un experiment de editare on-line cu instrumentul JS Bin includerea construcțiilor SVG – aici, <rect> și <circle> – direct în documentul HTML5
  • 28. svg specificația curentă: SVG 1.1 2nd Edition (2011) în contextul dispozitivelor mobile: SVG Tiny (2008) suport în cadrul navigatoarelor moderne Chrome, Firefox, IE9+, Opera, Safari (inclusiv pentru iOS) biblioteci JavaScript: Raphaël.js, Snap.svg, svg.js,… Dr. Sabin Buragawww.purl.org/net/busaco Embedded content
  • 29. Dr. Sabin Buragawww.purl.org/net/busaco exemple demonstrative: http://svg-wow.org/
  • 30. Dr. Sabin Buragawww.purl.org/net/busaco animații SVG realizate dinamic via biblioteca Raphaël
  • 31. math expresii matematice exprimate via limbajul MathML un limbaj declarativ bazat pe XML http://www.w3.org/Math/ Dr. Sabin Buragawww.purl.org/net/busaco Embedded content
  • 32. math specificația curenta: MathML 3.0 (2010) o listă a instrumentelor software la http://www.w3.org/Math/Software/ suport nativ oferit de Firefox, Safari și Blackberry Dr. Sabin Buragawww.purl.org/net/busaco Embedded content
  • 33. Dr. Sabin Buragawww.purl.org/net/busaco exemplu demonstrativ oferit de Mozilla – Mathzilla https://developer.mozilla.org/docs/Mozilla_MathML_Project
  • 34. alături de elementele img, iframe, embed și object, sunt permise audio, video, source ce pot fi utilizate la includerea de conținut multimedia Dr. Sabin Buragawww.purl.org/net/busaco Embedded content
  • 35. elementele audio și video implementează interfața HTMLMediaElement Dr. Sabin Buragawww.purl.org/net/busaco Embedded content
  • 36. attribute double readonly attribute double readonly attribute boolean attribute boolean attribute boolean duration; paused; autoplay; loop; attribute boolean attribute double attribute boolean controls; volume; muted; void void void }; currentTime; load (); play (); pause (); principalele atribute și metode ale interfeței HTMLMediaElement Dr. Sabin Buragawww.purl.org/net/busaco interface HTMLMediaElement : HTMLElement { readonly attribute MediaError error; attribute DOMString src; readonly attribute DOMString currentSrc; attribute DOMString preload; readonly attribute TimeRanges buffered;
  • 37. Dr. Sabin Buragawww.purl.org/net/busaco <video id="film" src="/media/tux.ogg" controls autoplay> Nu există suport pentru elementul video… :-( </video> … <script type="text/javascript"> // preluăm conținutul video var video = document.getElementById ('film'); </script> <p> <input type="button" value="Oprește" onclick="video.pause ();" /> <input type="button" value="Rulează" onclick="video.play ();" /> </p>
  • 38. principalele evenimente ce pot fi tratate în ceea ce privește conținutul audio/video: loadstart progress suspend abort error stalled play pause loadeddata waiting playing seeking canplay seeked timeupdate ended ratechange durationchange volumechange Dr. Sabin Buragawww.purl.org/net/busaco Embedded content
  • 39. precizarea codec-urilor necesare redării Dr. Sabin Buragawww.purl.org/net/busaco <source src='fii-absolvent.mp4' type='video/mp4; codecs="mp4v.20.240, mp4a.40.2"' /> <source src='fii-absolvent.mkv' type='video/x-matroska; codecs="theora, vorbis"' /> <source src='discursul-lui-tux.oga' type='audio/ogg; codecs=flac' />
  • 40. precizarea codec-urilor necesare redării codec-uri uzuale: H.264 (MP4 – comercial, susținut de Apple și Microsoft; actualmente, orice browser Web îl acceptă) www.h264info.com Dr. Sabin Buragawww.purl.org/net/busaco <source src='fii-absolvent.mp4' type='video/mp4; codecs="mp4v.20.240, mp4a.40.2"' /> <source src='fii-absolvent.mkv' type='video/x-matroska; codecs="theora, vorbis"' /> <source src='discursul-lui-tux.oga' type='audio/ogg; codecs=flac' />
  • 41. precizarea codec-urilor necesare redării codec-uri uzuale: OGG (Theora – disponibil open-source; implementat de Chrome, Firefox și Opera) www.xiph.org/ogg/ Dr. Sabin Buragawww.purl.org/net/busaco <source src='fii-absolvent.mp4' type='video/mp4; codecs="mp4v.20.240, mp4a.40.2"' /> <source src='fii-absolvent.mkv' type='video/x-matroska; codecs="theora, vorbis"' /> <source src='discursul-lui-tux.oga' type='audio/ogg; codecs=flac' />
  • 42. precizarea codec-urilor necesare redării codec-uri uzuale: WebM (o inițiativă Google – open source; suport oferit de Chrome, Firefox și Opera) www.webmproject.org Dr. Sabin Buragawww.purl.org/net/busaco <source src='fii-absolvent.mp4' type='video/mp4; codecs="mp4v.20.240, mp4a.40.2"' /> <source src='fii-absolvent.mkv' type='video/x-matroska; codecs="theora, vorbis"' /> <source src='discursul-lui-tux.oga' type='audio/ogg; codecs=flac' />
  • 43. elementul track permite specificarea de piste (track-uri) ce pot include subtitrări, descrieri, capitole, meta-date <video src="http://videolectures.net/eswc2013_staab_semantic_web/"> <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> Dr. Sabin Buragawww.purl.org/net/busaco Embedded content
  • 44. Dr. Sabin Buragawww.purl.org/net/busaco statistici actuale privind redarea conținutului via <video> (inclusiv la nivelul dispozitivelor mobile) www.longtailvideo.com/html5
  • 45. specificație în lucru la Consorțiul Web, dar implementată de majoritatea navigatoarelor www.w3.org/TR/fullscreen/ Dr. Sabin Buragawww.purl.org/net/busaco În ceea ce privește redarea conținutului video, de interes poate fi și Fullscreen API
  • 46. canvas suport pentru grafica raster (bitmap) generată dinamic via JavaScript Dr. Sabin Buragawww.purl.org/net/busaco Embedded content
  • 47. scop: generarea dinamică de conținut grafic dependent de rezoluția curentă Dr. Sabin Buragawww.purl.org/net/busaco Interfața HTMLCanvasElement
  • 48. specificație W3C: Candidate Recommendation (august 2013) context de redare: conținut grafic 2D transparent de tip raster www.w3.org/TR/2dcontext/ Dr. Sabin Buragawww.purl.org/net/busaco Interfața HTMLCanvasElement
  • 49. // metodă care oferă contextul redării conținutului object getContext (in DOMString contextId, in any... args); // metodă ce întoarce un URL folosind schema data: // pentru accesul la conținutul generat DOMString toDataURL (in optional DOMString type, in any... args); }; Dr. Sabin Buragawww.purl.org/net/busaco interface HTMLCanvasElement : HTMLElement { // specifică zona rectangulară de redare a conținutului attribute unsigned long width; attribute unsigned long height;
  • 50. este asociată elementului HTML5 canvas contextul 2D de redare a conținutul generat dinamic de script-urile operând asupra obiectului canvas este specificat formal de interfața CanvasRenderingContext2D Dr. Sabin Buragawww.purl.org/net/busaco Interfața HTMLCanvasElement
  • 51. transformări geometrice de bază: scale() rotate() translate() transform() setTransform() Dr. Sabin Buragawww.purl.org/net/busaco Elementul canvas – interfața CanvasRenderingContext2D
  • 52. generarea de căi grafice (paths): lineTo() moveTo() rect() arc() fill() stroke() clip() arcTo() quadraticCurveTo() bezierCurveTo() beginPath() closePath() isPointInPath() Dr. Sabin Buragawww.purl.org/net/busaco Elementul canvas – interfața CanvasRenderingContext2D
  • 53. manipularea zonelor rectangulare: strokeRect() fillRect() clearRect() Dr. Sabin Buragawww.purl.org/net/busaco Elementul canvas – interfața CanvasRenderingContext2D
  • 54. crearea degradé-urilor: createLinearGradient() createRadialGradient() createPattern() plus addColorStop() – oferită de interfața CanvasGradient vezi și CSS3 Dr. Sabin Buragawww.purl.org/net/busaco Elementul canvas – interfața CanvasRenderingContext2D
  • 55. specificarea de conținuturi textuale: font textAlign fillText() strokeText() measureText() Dr. Sabin Buragawww.purl.org/net/busaco Elementul canvas – interfața CanvasRenderingContext2D
  • 56. suport pentru redarea umbrelor: shadowOffsetX shadowOffsetY shadowColor shadowBlur Dr. Sabin Buragawww.purl.org/net/busaco Elementul canvas – interfața CanvasRenderingContext2D
  • 57. manipularea conținutului grafic: createImageData() getImageData() putImageData() vezi interfața ImageData Dr. Sabin Buragawww.purl.org/net/busaco Elementul canvas – interfața CanvasRenderingContext2D
  • 58. operații cu imagini: drawImage() save() restore() globalAlpha globalCompositeOperation Dr. Sabin Buragawww.purl.org/net/busaco Elementul canvas – interfața CanvasRenderingContext2D
  • 59. Dr. Sabin Buragawww.purl.org/net/busaco <!DOCTYPE html> generarea <html> unei corole de minuni <head> <title>Corola de minuni</title> </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>
  • 60. // 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 Dr. Sabin Buragawww.purl.org/net/busaco function deseneazaDiscuri() { // preluăm contextul de redare 2D var context = document.getElementById ('canvas').getContext ('2d');
  • 61. 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 (); } // restăuram contextul de redare context.restore (); } programul JavaScript } (discuri.js) generând conținutul Dr. Sabin Buragawww.purl.org/net/busaco 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 // și ajustăm aleatoriu transparența (alpha) context.fillStyle = 'rgba(33,' + (51 * i) + ',' + (255 - 51 * i) + ',' + Math.random() + ')';
  • 62. Dr. Sabin Buragawww.purl.org/net/busaco un posibil rezultat al execuției codului
  • 63. exemple, tutoriale și resurse: www.html5canvastutorials.com www.canvasdemos.com Sabin Buraga < busaco@infoiasi.ro >
  • 64. Dr. Sabin Buragawww.purl.org/net/busaco vizualizarea datelor: redarea în <canvas> a unui grafic cu biblioteca Flotr2 http://humblesoftware.com/flotr2/
  • 65. alternativă de redare: conținut grafic 3D pe baza WebGL implementare JavaScript a standardului OpenGL ES 2.0 specificație în lucru (Khronos Group, noiembrie 2013) http://www.khronos.org/webgl/ http://webglplayground.net/ Dr. Sabin Buragawww.purl.org/net/busaco Interfața HTMLCanvasElement
  • 66. Dr. Sabin Buragawww.purl.org/net/busaco WebGL implementat de Chrome, Firefox, MSIE 11+, Safari etc. vezi Shader Editor oferit de instrumentele de dezvoltare din Firefox: https://hacks.mozilla.org/2013/11/live-editing-webgl-shaders-with-firefox-developer-tools/
  • 67. Dr. Sabin Buragawww.purl.org/net/busaco <script id="shader-vs" type="x-shader/x-vertex"> // codul-sursă implementând un vertex shader (OpenGL) </script> <script id="shader-fs" type="x-shader/x-fragment"> // codul-sursă al unui fragment shader (OpenGL) </script> <script type="text/javascript"> // cod JavaScript recurgând la WebGL </script> … <body onload="webGLStart ();"> <canvas id="spatiu3D" width="1024" height="768"></canvas> </body> tutorial WebGL: http://learningwebgl.com/blog/?page_id=1217
  • 68. Dr. Sabin Buragawww.purl.org/net/busaco biblioteci JS: CopperLicht, CubicVR, PhiloGL, SceneJS, TDL (ThreeD Library), Three.js,… diverse exemple demonstrative: http://tutorialzine.com/2013/09/20-impressive-examples-for-learning-webgl-with-three-js/
  • 69. formularele Web pot include noi tipuri de câmpuri search tel url email datetime date number range Dr. Sabin Buragawww.purl.org/net/busaco Formulare HTML5
  • 70. Data type Control type Text with no line breaks Search field Text with no line breaks A text field An absolute URL A text field An e-mail address or list of e-mail addresses A text field A date and time (year, month, day, hour, min., sec., A date & time datetime fraction of a second) with the time zone set to UTC control date month week A date (year, month, day) with no time zone A date consisting of a year & a month with no time zone A date consisting of a week-year number and a week number with no time zone Dr. Sabin Buragawww.purl.org/net/busaco Tip search tel url email A date control A month control A week control A time (hour, minute, seconds, fractional seconds) A time control A text field/ A numerical value number spinner control A numerical value, with the extra semantic A slider control range that the exact value is not important or similar An sRGB color A color wheel color with 8-bit red, green, and blue components time
  • 71. <input type="date" max="2000-12-31" name="zi-nastere" /> <input type="range" min="1" max="7" step="2" name="premii" /> Dr. Sabin Buragawww.purl.org/net/busaco <label>Adrese suplimentare: <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> pentru detalii, de studiat http://diveintohtml5.info/forms.html
  • 72. elemente noi asigurând interactivitatea: details summary command menu Dr. Sabin Buragawww.purl.org/net/busaco Formulare HTML5
  • 73. <command type="command" disabled="disabled" label="Publica" icon="icons/publish.png" onclick="publish ()" /> </menu> Dr. Sabin Buragawww.purl.org/net/busaco <!-- specificarea unui grup de comenzi --> <menu type="toolbar"> <command type="radio" radiogroup="aliniere" label="La stanga" icon="icons/align-left.png" onclick="setAlign ('left')" checked="checked" /> <command type="radio" radiogroup="aliniere" label="Centrat" icon="icons/align-center.png" onclick="setAlign ('center')" /> <command type="radio" radiogroup="aliniere" label="La dreapta" icon="icons/align-right.png" onclick="setAlign ('right')" />
  • 74. într-un document HTML5 pot fi incluse atribute proprii (prefixate cu data-) pot stoca valori private disponibile la nivel de pagină/aplicație Web Dr. Sabin Buragawww.purl.org/net/busaco Atribute definite de programator (custom HTML5 attributes)
  • 75. var elem = document.querySelector ('#utilizator'); // obținem datele // elem.id == 'utilizator' // elem.dataset.id === '1234' // elem.dataset.dateOfBirth === '' (data de naștere n-a fost precizată) elem.dataset.dateOfBirth = '1990-12-07'; // stabilim când s-a născut el.dataset.someDataAttr = 'mydata'; // 'someDataAttr' in el.dataset === true folosirea consolei navigatorului Web pentru accesarea & modificarea atributelor data- Dr. Sabin Buragawww.purl.org/net/busaco <div id="utilizator" data-id="1234" data-user="tux" data-date-of-birth> Tuxy Pinguinescu</div>
  • 76.  ❄ ❄ ❄ ❄ ❄ ❄  episodul viitor: vacanța de iarnă ☃  Dr. Sabin Buragawww.purl.org/net/busaco ❄