6. html5
TRANSCRIPT
![Page 1: 6. html5](https://reader036.vdocuments.pub/reader036/viewer/2022070517/58ceb1781a28abb2218b50a1/html5/thumbnails/1.jpg)
HTML5 perspective multimedia
![Page 2: 6. html5](https://reader036.vdocuments.pub/reader036/viewer/2022070517/58ceb1781a28abb2218b50a1/html5/thumbnails/2.jpg)
HTML a apărut ca limbaj de marcare în 1990, fiind standardizat în anul 1997 ca HTML 4. Din Decembrie
2012, autoritatea numită W3C (World Wide Web Consortium) recomandă și susține utilizarea HTML5
pentru că acesta creează o experiență mai bună pentru utilizator și face paginile mai ușor de înțeles
de către browser-e.
![Page 3: 6. html5](https://reader036.vdocuments.pub/reader036/viewer/2022070517/58ceb1781a28abb2218b50a1/html5/thumbnails/3.jpg)
Diferențele majore între HTML și HTML5
1. HTML5 nu mai este un tot unitar. El reprezintă o colecție de aplicații astfel încât, pe lângă tag-uri, conține și API-uri (Application Programming Interface) care știu cum să trateze fiecare element media în parte: video, audio, canvas.
2. Fișierele Audio și Video nu făceau parte din specificațiile HTML4. În schimb, HTML5 a creat tag-uri speciale care știu cum să trateze elementele multimedia: [audio] și [video].
![Page 4: 6. html5](https://reader036.vdocuments.pub/reader036/viewer/2022070517/58ceb1781a28abb2218b50a1/html5/thumbnails/4.jpg)
Diferențele majore între HTML și HTML5
3. Geo-localizarea este aproape imposibilă în HTML4, pe când în HTML5, cu ajutorul JS GeoLocation API se poate detecta ușor locația unui utilizator care accesează un site.
4. Grafică vectorială era posibilă în HTML4 doar cu ajutorul unor aplicații ca Silverlight sau Flash. HTML5 conține suport integral pentru grafică vectorială, prin intermediul elementului numit [canvas].
![Page 5: 6. html5](https://reader036.vdocuments.pub/reader036/viewer/2022070517/58ceb1781a28abb2218b50a1/html5/thumbnails/5.jpg)
Diferențele majore între HTML și HTML5
5. Pentru că este o tehnologie nouă, HTML5 nu este suportat momentan de toate browserele. Pe măsură ce limbajul este pus la punct, pentru că în acest moment încă se lucrează la el, toate browserele vor putea citi și interpreta noul cod HTML.
6. Pentru ca paginile să fie mult mai bine înțelese de către motoarele de căutare, au fost introduse în HTML5 elementele [header] și [footer] în concordanță cu noua anatomie a web-ului.
![Page 6: 6. html5](https://reader036.vdocuments.pub/reader036/viewer/2022070517/58ceb1781a28abb2218b50a1/html5/thumbnails/6.jpg)
Diferențele majore între HTML și HTML5
7. Au fost introduse deasemenea în HTML5 și elementele [section] și [article] care vor avea un impact mare în SEO pentru că astfel pot fi delimitate mai bine porțiuni din textul paginii.
![Page 7: 6. html5](https://reader036.vdocuments.pub/reader036/viewer/2022070517/58ceb1781a28abb2218b50a1/html5/thumbnails/7.jpg)
Valențe FLASH în scădere
Odată cu implementarea HTML5, rolul platformei Flash a scăzut foarte mult pentru că nu mai este necesar în redarea clipurilor video (aceasta fiind principala sa funcționalitate). Același lucru se va întâmpla și cu alte programe pe care HTML le utiliza pentru a reda elemente pentru care nu exista suport.
![Page 8: 6. html5](https://reader036.vdocuments.pub/reader036/viewer/2022070517/58ceb1781a28abb2218b50a1/html5/thumbnails/8.jpg)
Motivele pentru care am utiliza HTML5
1. Accesibilitate sporită datorită elementelor noi introduse: [section], [article], [header], [footer], [nav], [aside]. Astfel oamenii pot mai identifica ușor secțiunile de text care îi interesează.
2. Declarația [!Doctype] este mult mai simplă și nu necesită introducerea unui cod lung care poate fi uneori greșit interpretat. Noua declarație este [!DOCTYPE HTML] și atât.
3. Codul est mult mai simplu și elegant față de versiunile anterioare.
![Page 9: 6. html5](https://reader036.vdocuments.pub/reader036/viewer/2022070517/58ceb1781a28abb2218b50a1/html5/thumbnails/9.jpg)
Motivele pentru care am utiliza HTML5
4. Interacțiune mai bună pentru că HTML5 nu mai este un limbaj static. Cu ajutorul elementului [canvas] există posibilitate de a interacționa și de a crea animații mai bune decât în Flash. Dar mai mult decât [canvas] , HTML5 vine cu serii de API-uri care vor ajuta la crearea unui site foarte dinamic.
5. Creare de jocuri. Tot cu ajutorul elementului [canvas] se pot dezvolta jocuri interactive, cu funcționalități superioare Flash-ului.
6. HTML5 este adoptat și de browser-ele telefoanelor mobile. Există tag-uri care te ajută la optimizarea site-ului pentru varianta mobilă.
![Page 10: 6. html5](https://reader036.vdocuments.pub/reader036/viewer/2022070517/58ceb1781a28abb2218b50a1/html5/thumbnails/10.jpg)
Tag-uri noi HTML5
• <article>: marcheaza un articol;• <aside>: marcheaza un continut aparte fata de
continutul paginii, dar care are legatura cu el;• <audio>: marcheaza introducerea de continut
audio;• <canvas>: marcheaza introducerea de continut
grafic;• <command>: marcheaza un buton de comanda;• <datalist>: marcheaza un meniu drop-down;
![Page 11: 6. html5](https://reader036.vdocuments.pub/reader036/viewer/2022070517/58ceb1781a28abb2218b50a1/html5/thumbnails/11.jpg)
Tag-uri noi HTML5• <dialog>: marcheaza un dialog, o conversatie;• <figure>: marcheaza un grup de elemente care au
legatura unul cu celalalt si care pot fi considerate in pagina, continut de sine statator;
• <footer>: marcheaza sectiunea footer a pagini;• <header>: marcheaza sectiunea header a pagini;• <hgroup>: marcheaza marcheaza o sectiune a pagini;• <keygen>: marcheaza un cod generat automat intr-un
formular;• <mark>: marcheaza text evidentiat;
![Page 12: 6. html5](https://reader036.vdocuments.pub/reader036/viewer/2022070517/58ceb1781a28abb2218b50a1/html5/thumbnails/12.jpg)
Tag-uri noi HTML5
• <meter>: marcheaza valoarea unei unitati de masura cunoscute;
• <nav>: marcheaza o bara de navigare cu linkuri;• <output>: marcheaza diferite tipuri de rezultate ale
unui script oarecare;• <progress>: marcheaza o bara de progres fie ea grafica
sau numerica;• <section>: marcheaza o sectiune oarecare (header,
footer, bara de navigare, capitole sau orice alta sectiune);
![Page 13: 6. html5](https://reader036.vdocuments.pub/reader036/viewer/2022070517/58ceb1781a28abb2218b50a1/html5/thumbnails/13.jpg)
Tag-uri noi HTML5
• <source>: marcheaza sursa fisierului multimedia;
• <time>: marcheaza ora / data;• <video>: marcheaza introducerea unui video;
![Page 14: 6. html5](https://reader036.vdocuments.pub/reader036/viewer/2022070517/58ceb1781a28abb2218b50a1/html5/thumbnails/14.jpg)
Interpretări multimedia în HTML5(video)
<video><source src="movie.webm" type='video
/webm; codecs="vp8, vorbis"' /><source src="movie.mp4" type='video/
mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src="movie.ogv" type='video/ogg; codecs="theora, vorbis"' />
Video tag not supported. Download the video <a href="movie.webm">here</a>.
<video>>
![Page 15: 6. html5](https://reader036.vdocuments.pub/reader036/viewer/2022070517/58ceb1781a28abb2218b50a1/html5/thumbnails/15.jpg)
Interpretări multimedia în HTML5(audio)
<audio controls> <source src="sound.ogg"
type="audio/ogg" > <source src="sound.mp3"
type="audio/mp3" > Ваш браузер не пожжерживает тег
audio! </audio>
![Page 16: 6. html5](https://reader036.vdocuments.pub/reader036/viewer/2022070517/58ceb1781a28abb2218b50a1/html5/thumbnails/16.jpg)
Interpretări multimedia în HTML5(canvas)
Elementul HTML5 Canvas a fost introdus pentru prima oară de compania Apple, în anul 2004, după care a fost standardizat în 2006 de grupul WHATWG.
El reprezintă, efectiv, o planșă în context 2D, în care browserele moderne pot desena un set de forme definite prin intermediul unor metode specifice în limbaj JavaScript.
![Page 17: 6. html5](https://reader036.vdocuments.pub/reader036/viewer/2022070517/58ceb1781a28abb2218b50a1/html5/thumbnails/17.jpg)
Elementul HTML Canvas
• Canvas nu depinde de framework-uri externe (orice mediu care rulează JavaScript este de-ajuns) și este suportat în toate browserele moderne.
![Page 18: 6. html5](https://reader036.vdocuments.pub/reader036/viewer/2022070517/58ceb1781a28abb2218b50a1/html5/thumbnails/18.jpg)
• Este important să definiți lățimea și înălțimea elementului înainte de efectuarea operațiilor JavaScript specifice. De asemenea, e de dorit, să afișați și o atenționare utilizatorilor atunci când browserul acestora nu suportă elementul.
<canvas id="canvasArea" width="570" height="150">
Google Chrome is awesome. Try it today! </canvas>
Initierea elementului Canvas
![Page 19: 6. html5](https://reader036.vdocuments.pub/reader036/viewer/2022070517/58ceb1781a28abb2218b50a1/html5/thumbnails/19.jpg)
GESTIUNI CANVAS
• Configurarea zonei de desen• Desenarea utînd primitive grafice• Utilizarea imaginilor• Utilizarea schemelor de culoare și stilurilor• Transformări• Compoziționarea și decuparea• Animații de baza• Optimizarea starii elementelor canvas
![Page 20: 6. html5](https://reader036.vdocuments.pub/reader036/viewer/2022070517/58ceb1781a28abb2218b50a1/html5/thumbnails/20.jpg)
Metode de creare a continuturilor• fill()Fills the current drawing (path)• stroke()Actually draws the path you have defined• beginPath()Begins a path, or resets the current path• moveTo()Moves the path to the specified point in the canvas,
without creating a line• closePath()Creates a path from the current point back to the starting
point• lineTo()Adds a new point and creates a line to that point from the
last specified point in the canvas• clip()Clips a region of any shape and size from the original canvas• quadraticCurveTo()Creates a quadratic Bézier curve• bezierCurveTo()Creates a cubic Bézier curve
![Page 21: 6. html5](https://reader036.vdocuments.pub/reader036/viewer/2022070517/58ceb1781a28abb2218b50a1/html5/thumbnails/21.jpg)
Metode de creare a continuturilor
• arc()Creates an arc/curve (used to create circles, or parts of circles)
• arcTo()Creates an arc/curve between two tangents• isPointInPath()Returns true if the specified point is in the
current path, otherwise false• rect()Creates a rectangle• fillRect()Draws a "filled" rectangle• strokeRect()Draws a rectangle (no fill)• clearRect()Clears the specified pixels within a given
rectangle
![Page 22: 6. html5](https://reader036.vdocuments.pub/reader036/viewer/2022070517/58ceb1781a28abb2218b50a1/html5/thumbnails/22.jpg)
Metode de creare a continuturilor• createLinearGradient()Creates a linear gradient (to use on canvas
content)• createPattern()Repeats a specified element in the specified
direction• createRadialGradient()Creates a radial/circular gradient (to use on
canvas content)• addColorStop()Specifies the colors and stop positions in a gradient
object• fillText()Draws "filled" text on the canvas• strokeText()Draws text on the canvas (no fill)• measureText()Returns an object that contains the width of the
specified text
![Page 23: 6. html5](https://reader036.vdocuments.pub/reader036/viewer/2022070517/58ceb1781a28abb2218b50a1/html5/thumbnails/23.jpg)
Proprietati de configurare a continuturilor
Colors, Styles, and Shadows
• fillStyleSets or returns the color, gradient, or pattern used to fill the drawing
• strokeStyleSets or returns the color, gradient, or pattern used for strokes
• shadowColorSets or returns the color to use for shadows• shadowBlurSets or returns the blur level for shadows• shadowOffsetXSets or returns the horizontal distance of the
shadow from the shape• shadowOffsetYSets or returns the vertical distance of the shadow
from the shape
![Page 24: 6. html5](https://reader036.vdocuments.pub/reader036/viewer/2022070517/58ceb1781a28abb2218b50a1/html5/thumbnails/24.jpg)
Proprietati de configurare a continuturilor
Line Styles• lineCapSets or returns the style of the end caps for a line• lineJoinSets or returns the type of corner created, when two lines
meet• lineWidthSets or returns the current line width• miterLimitSets or returns the maximum miter length
Text• fontSets or returns the current font properties for text content• textAlignSets or returns the current alignment for text content• textBaselineSets or returns the current text baseline used when
drawing text
![Page 25: 6. html5](https://reader036.vdocuments.pub/reader036/viewer/2022070517/58ceb1781a28abb2218b50a1/html5/thumbnails/25.jpg)
Transformari
• scale()Scales the current drawing bigger or smaller
• rotate()Rotates the current drawing• translate()Remaps the (0,0) position on the
canvas• transform()Replaces the current transformation
matrix for the drawing• setTransform()Resets the current transform to
the identity matrix.
![Page 26: 6. html5](https://reader036.vdocuments.pub/reader036/viewer/2022070517/58ceb1781a28abb2218b50a1/html5/thumbnails/26.jpg)
Alte functionalitati
• save()Saves the state of the current• contextrestore()Returns previously saved path
state and attributes• createEvent() • getContext() • toDataURL()
![Page 27: 6. html5](https://reader036.vdocuments.pub/reader036/viewer/2022070517/58ceb1781a28abb2218b50a1/html5/thumbnails/27.jpg)
![Page 28: 6. html5](https://reader036.vdocuments.pub/reader036/viewer/2022070517/58ceb1781a28abb2218b50a1/html5/thumbnails/28.jpg)
Exemple canvas animatii
• https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations
![Page 29: 6. html5](https://reader036.vdocuments.pub/reader036/viewer/2022070517/58ceb1781a28abb2218b50a1/html5/thumbnails/29.jpg)
Utilizarea imaginilor în Canvas<script> var exm = document.getElementById("example");
ctx = exm.getContext('2d');
//--------------------------pic = new Image();
pic.src = 'nocopypast.png'; //--------------------------
pic.onload = function() { ctx.drawImage(pic, 0, 0); }</script>
drawImage(image, x, y, width, height)
![Page 30: 6. html5](https://reader036.vdocuments.pub/reader036/viewer/2022070517/58ceb1781a28abb2218b50a1/html5/thumbnails/30.jpg)
Conținuturi imagesimg.src =
'data:image/gif;base64,R0lGODlhDAAMAOYAANPe5Pz//4KkutDb4szY3/b+/5u5z/3//3KWrfn//8rk8naasYGkuszY4Mbg8qG+0dzv9tXg5sTg8t/o7vP8/4iqv9ft9NPe5qfD1Mfc56O/0YKlu+Lr8M3Z4JCwxuj2/Of0+eDz9+rw9Z68z8/n8sHe8sbT3Ju6zuDv96nE1Onw9Nbh6cvX39Hq89Hq8u77/srW3tbh54Kku8ba56TD1u37/vL8/vL8/9ft9ebu8+Ps8bzM1Ymsw7XR4Nnj6Yanvsnj8qrI2Or2/NTf5tvl68vY3+r3/HqdtNji6OXt8eDz+dLc477c7bDO3t7n7d7v9s3Z4dbs9N/y98Pd6PX+/8/b4f7//+Hp7tDo8vv//+fu84GjunKWro6uxHqctOfu9P///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAAAAAAALAAAAAAMAAwAAAeEgCJfg4RfWlo5KlpgjI2OOklWBwcBAVmXCQlXHAUFVBkGBjMUNzZOEy81IF2sXUZCH0QrDyhPGzICAkohUj4XHhoQKQsLGDgWUTFIJxUjUy0uWNIkQxE9W9gMDD9BCgpLAEBNXl5H5F40DlUDEkxc71wICDwlDQBQHQ0EBEUsJjswBgQCADs=';
![Page 31: 6. html5](https://reader036.vdocuments.pub/reader036/viewer/2022070517/58ceb1781a28abb2218b50a1/html5/thumbnails/31.jpg)
AJAX transmiterea conținutului
$.ajax({ type: "POST", url: "script.php", data: { imgBase64: dataURL } }) .done(function(o) { console.log('saved'); });
![Page 32: 6. html5](https://reader036.vdocuments.pub/reader036/viewer/2022070517/58ceb1781a28abb2218b50a1/html5/thumbnails/32.jpg)
<?php $upload_dir = somehow_get_upload_dir(); $img = $_POST['my_hidden']; $img = str_replace('data:image/png;base64,', '',
$img); $img = str_replace(' ', '+', $img); $data = base64_decode($img); $file = $upload_dir."image_name.png"; $success = file_put_contents($file, $data);
header('Location: '.$_POST['return_url']); ?>
![Page 33: 6. html5](https://reader036.vdocuments.pub/reader036/viewer/2022070517/58ceb1781a28abb2218b50a1/html5/thumbnails/33.jpg)
globalCompositeOperation
![Page 34: 6. html5](https://reader036.vdocuments.pub/reader036/viewer/2022070517/58ceb1781a28abb2218b50a1/html5/thumbnails/34.jpg)
cliping
![Page 35: 6. html5](https://reader036.vdocuments.pub/reader036/viewer/2022070517/58ceb1781a28abb2218b50a1/html5/thumbnails/35.jpg)
Interpretări multimedia în HTML5(animații)
HTML5 elemente (DOM)+
JavaScript =
animație
![Page 36: 6. html5](https://reader036.vdocuments.pub/reader036/viewer/2022070517/58ceb1781a28abb2218b50a1/html5/thumbnails/36.jpg)
DOM (Document Object Model)
![Page 37: 6. html5](https://reader036.vdocuments.pub/reader036/viewer/2022070517/58ceb1781a28abb2218b50a1/html5/thumbnails/37.jpg)
INSTRUMENTE DEREALIZARE A ANIMAȚIEI (Web-Drawing)
• jQuery.animate• Adobe Edge Animation;• Paper.js ;• WebGL• TreeJs• Processing.js ;• Raphael.js;• ...
![Page 38: 6. html5](https://reader036.vdocuments.pub/reader036/viewer/2022070517/58ceb1781a28abb2218b50a1/html5/thumbnails/38.jpg)
JavaScript (jQuery)
• Schimbi sau ștergi conținutul unei pagini întregi sau doar a unei porțiuni din pagină;
• Animații;• Efecte (SlideUp/SlideDown, FadeIn/FadeOut, etc);• Ajax;• Adaugi diverse event-uri (click, hover, over, focus
etc) cam pe orice element din pagină;• Reduce la minim codul Javascript din pagină.
![Page 39: 6. html5](https://reader036.vdocuments.pub/reader036/viewer/2022070517/58ceb1781a28abb2218b50a1/html5/thumbnails/39.jpg)
Diferențe dintre Flash și Edge (avantage)
• Stabilitatea;• Instrumente de Timeline;• Simboluri setate opțional;• Copierea animație;• Capacitatea de a muta obiecte pe scena, fara a
afecta animația;• Ușurința la modificare componentelor;• Easing presets și Code presets;
![Page 40: 6. html5](https://reader036.vdocuments.pub/reader036/viewer/2022070517/58ceb1781a28abb2218b50a1/html5/thumbnails/40.jpg)
Bibliografie• Rowell E. - HTML5 Canvas• Williams L.J. - Learning HTML5 Game Programming. A Hands-
on Guide to Building Online Games Using Canvas, SVG, and WebGL
• Hawkes R. - Foundation HTML5 Canvas. For Games and Entertainment
• Fulton S., Fulton J. - HTML5 Canvas• Flanagan D. - Canvas Pocket Reference. Scripted Graphics for
HTML5• https://www.w3schools.com/tags/ref_canvas.asp• http://www.html5canvastutorials.com/