HTML5 perspective multimedia

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.

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].

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].

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.

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.

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.

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.

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ă.

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;

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;

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);

Tag-uri noi HTML5

• <source>: marcheaza sursa fisierului multimedia;

• <time>: marcheaza ora / data;• <video>: marcheaza introducerea unui video;

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>>

Interpretări multimedia în HTML5(audio)

<audio controls> <source src="sound.ogg"

type="audio/ogg" > <source src="sound.mp3"

type="audio/mp3" > Ваш браузер не пожжерживает тег

audio! </audio>

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.

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.

• 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

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

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

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

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

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

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

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.

Alte functionalitati

• save()Saves the state of the current• contextrestore()Returns previously saved path

state and attributes• createEvent() • getContext() • toDataURL()

Exemple canvas animatii

• https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations

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)

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=';

AJAX transmiterea conținutului

$.ajax({ type: "POST", url: "script.php", data: { imgBase64: dataURL } }) .done(function(o) { console.log('saved'); });

<?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']); ?>

globalCompositeOperation

cliping

Interpretări multimedia în HTML5(animații)

HTML5 elemente (DOM)+

JavaScript =

animație

DOM (Document Object Model)

INSTRUMENTE DEREALIZARE A ANIMAȚIEI (Web-Drawing)

• jQuery.animate• Adobe Edge Animation;• Paper.js ;• WebGL• TreeJs• Processing.js ;• Raphael.js;• ...

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ă.

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;

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/