• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Dezvoltarea aplicaţiilor Web la nivel de client (cursul #11): Programare Web. Suita de tehnologii HTML5
 

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

on

  • 317 views

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

Statistics

Views

Total Views
317
Views on SlideShare
317
Embed Views
0

Actions

Likes
0
Downloads
6
Comments
0

0 Embeds 0

No embeds

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
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

    • Dr. Sabin Buragawww.purl.org/net/busaco programare Web la nivel de client suita de tehnologii HTML5
    • Walt Disney Dr. Sabin Buragawww.purl.org/net/busaco “If you can dream it, you can do it.”
    • Dr. Sabin Buragawww.purl.org/net/busaco Care este prezentul și viitorul programării Web la nivel de client?
    • 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
    • permite dezvoltarea standardizată de aplicații Web pe baza unor API-uri specificate formal Dr. Sabin Buragawww.purl.org/net/busaco HTML5
    • 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
    • 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
    • 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
    • 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
    • Dr. Sabin Buragawww.purl.org/net/busaco www.whatwg.org/specs/web-apps/current-work/
    • î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
    • Dr. Sabin Buragawww.purl.org/net/busaco diverse specificații HTML5 în lucru: http://dev.w3.org/html5/
    • 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
    • Dr. Sabin Buragawww.purl.org/net/busaco Ce aduce nou HTML5?
    • HTML și/sau XHTML Dr. Sabin Buragawww.purl.org/net/busaco Relaxarea corectitudinii la nivel de sintaxă
    • text/html versus application/xhtml+xml Dr. Sabin Buragawww.purl.org/net/busaco Relaxarea corectitudinii la nivel de sintaxă
    • <!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:
    • DOM HTML5 Dr. Sabin Buragawww.purl.org/net/busaco Modelul de reprezentare internă este bazat pe DOM
    • 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
    • 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
    • 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
    • î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
    • “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
    • 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
    • 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
    • Dr. Sabin Buragawww.purl.org/net/busaco studiu de caz: grafică vectorială cu SVG
    • 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
    • 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
    • Dr. Sabin Buragawww.purl.org/net/busaco exemple demonstrative: http://svg-wow.org/
    • Dr. Sabin Buragawww.purl.org/net/busaco animații SVG realizate dinamic via biblioteca Raphaël
    • 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
    • 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
    • Dr. Sabin Buragawww.purl.org/net/busaco exemplu demonstrativ oferit de Mozilla – Mathzilla https://developer.mozilla.org/docs/Mozilla_MathML_Project
    • 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
    • elementele audio și video implementează interfața HTMLMediaElement Dr. Sabin Buragawww.purl.org/net/busaco Embedded content
    • 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;
    • 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>
    • 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
    • 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' />
    • 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' />
    • 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' />
    • 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' />
    • 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
    • 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
    • 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
    • canvas suport pentru grafica raster (bitmap) generată dinamic via JavaScript Dr. Sabin Buragawww.purl.org/net/busaco Embedded content
    • scop: generarea dinamică de conținut grafic dependent de rezoluția curentă Dr. Sabin Buragawww.purl.org/net/busaco Interfața HTMLCanvasElement
    • 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
    • // 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;
    • 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
    • transformări geometrice de bază: scale() rotate() translate() transform() setTransform() Dr. Sabin Buragawww.purl.org/net/busaco Elementul canvas – interfața CanvasRenderingContext2D
    • 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
    • manipularea zonelor rectangulare: strokeRect() fillRect() clearRect() Dr. Sabin Buragawww.purl.org/net/busaco Elementul canvas – interfața CanvasRenderingContext2D
    • 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
    • specificarea de conținuturi textuale: font textAlign fillText() strokeText() measureText() Dr. Sabin Buragawww.purl.org/net/busaco Elementul canvas – interfața CanvasRenderingContext2D
    • suport pentru redarea umbrelor: shadowOffsetX shadowOffsetY shadowColor shadowBlur Dr. Sabin Buragawww.purl.org/net/busaco Elementul canvas – interfața CanvasRenderingContext2D
    • manipularea conținutului grafic: createImageData() getImageData() putImageData() vezi interfața ImageData Dr. Sabin Buragawww.purl.org/net/busaco Elementul canvas – interfața CanvasRenderingContext2D
    • operații cu imagini: drawImage() save() restore() globalAlpha globalCompositeOperation Dr. Sabin Buragawww.purl.org/net/busaco Elementul canvas – interfața CanvasRenderingContext2D
    • 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>
    • // 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');
    • 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() + ')';
    • Dr. Sabin Buragawww.purl.org/net/busaco un posibil rezultat al execuției codului
    • exemple, tutoriale și resurse: www.html5canvastutorials.com www.canvasdemos.com Sabin Buraga < busaco@infoiasi.ro >
    • Dr. Sabin Buragawww.purl.org/net/busaco vizualizarea datelor: redarea în <canvas> a unui grafic cu biblioteca Flotr2 http://humblesoftware.com/flotr2/
    • 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
    • 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/
    • 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
    • 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/
    • 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
    • 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
    • <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
    • elemente noi asigurând interactivitatea: details summary command menu Dr. Sabin Buragawww.purl.org/net/busaco Formulare HTML5
    • <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')" />
    • î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)
    • 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>
    •  ❄ ❄ ❄ ❄ ❄ ❄  episodul viitor: vacanța de iarnă ☃  Dr. Sabin Buragawww.purl.org/net/busaco ❄