![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].](https://image.slidesharecdn.com/005-170929155324/85/005-html5-si-canvas-3-320.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].](https://image.slidesharecdn.com/005-170929155324/85/005-html5-si-canvas-4-320.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.](https://image.slidesharecdn.com/005-170929155324/85/005-html5-si-canvas-5-320.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.](https://image.slidesharecdn.com/005-170929155324/85/005-html5-si-canvas-6-320.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.](https://image.slidesharecdn.com/005-170929155324/85/005-html5-si-canvas-8-320.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ă.](https://image.slidesharecdn.com/005-170929155324/85/005-html5-si-canvas-9-320.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']);
?>](https://image.slidesharecdn.com/005-170929155324/85/005-html5-si-canvas-32-320.jpg)
005. html5 si canvas
- 2. 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.
- 3. 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].
- 4. 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].
- 5. 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.
- 6. 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.
- 7. 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.
- 8. 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.
- 9. 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ă.
- 10. 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;
- 11. 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 o sectiune a pagini; • <keygen>: marcheaza un cod generat automat intr-un formular; • <mark>: marcheaza text evidentiat;
- 12. 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);
- 13. Tag-uri noi HTML5 • <source>: marcheaza sursa fisierului multimedia; • <time>: marcheaza ora / data; • <video>: marcheaza introducerea unui video;
- 14. Interpretări multimedia în HTML5 (video) <video> <source src="movie.webm" type='vid eo/webm; codecs="vp8, vorbis"' /> <source src="movie.mp4" type='vide o/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">her e</a>. <video>>
- 15. Interpretări multimedia în HTML5 (audio) <audio controls> <source src="sound.ogg" type="audio/ogg" > <source src="sound.mp3" type="audio/mp3" > Ваш браузер не пожжерживает тег audio! </audio>
- 16. 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.
- 17. 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.
- 18. • 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
- 19. 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
- 20. 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
- 21. 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
- 22. 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
- 23. 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
- 24. Proprietati de configurare a continuturilor Line Styles • lineCap Sets or returns the style of the end caps for a line • lineJoin Sets or returns the type of corner created, when two lines meet • lineWidth Sets or returns the current line width • miterLimit Sets or returns the maximum miter length Text • Font Sets or returns the current font properties for text content • textAlign Sets or returns the current alignment for text content • textBaseline Sets or returns the current text baseline used when drawing text
- 25. 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.
- 26. Alte functionalitati • save() • contextrestore() • createEvent() • getContext() • toDataURL()
- 28. Exemple canvas animatii • https://developer.mozilla.org/en- US/docs/Web/API/Canvas_API/Tutorial/Basic_ animations
- 29. 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)
- 31. AJAX transmiterea conținutului $.ajax({ type: "POST", url: "script.php", data: { imgBase64: dataURL } }) .done(function(o) { console.log('saved'); });
- 32. <? 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']); ?>
- 34. cliping
- 35. Interpretări multimedia în HTML5 (animații) HTML5 elemente (DOM) + JavaScript = animație
- 36. INSTRUMENTE DEREALIZARE A ANIMAȚIEI (Web-Drawing) • jQuery.animate • Adobe Edge Animation; • Paper.js ; • WebGL • TreeJs • Processing.js ; • Raphael.js; • ...
- 37. 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ă.
- 38. 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;
- 39. 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/