dezvoltarea aplicaţiilor web la nivel de client (cursul #11): programare web. suita de tehnologii...

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

suita de tehnologii HTML5

programare Web la nivel de client

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

“If you can dream it, you can do it.”

Walt Disney

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

Care este prezentul și viitorulprogramării Web la nivel de client?

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

HTML5

un vocabular (set de elemente + atribute)folosit pentru marcarea paginilor Web

+o suită de API-uri facilitând procesarea documentelor

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

HTML5

permite dezvoltarea standardizată de aplicații Webpe baza unor API-uri specificate formal

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

HTML5

permite dezvoltarea standardizată de aplicații Webpe baza unor API-uri specificate formal

API-urile sunt definite de interfețedescrise via limbajul declarativ WebIDLW3C Candidate Recommendation, 2012

http://www.w3.org/TR/WebIDL/

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

HTML5

recurge la tehnologii înrudite referitoare la

prezentare: CSS – nivelul 3model conceptual (abstract): DOM

procesare: JavaScript

…și altele

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

HTML5

recurge la tehnologii înrudite referitoare la

prezentare: CSS – nivelul 3model conceptual (abstract): DOM

procesare: JavaScript

…și altele API-urispecifice

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

HTML5

inițial, o propunere independentă de Consorțiul Web

WHATWG (Web Hypertext Application TechnologyWorking Group) compus din Apple, Mozilla, Opera

www.whatwg.org

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

www.whatwg.org/specs/web-apps/current-work/

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

HTML5

în curs de standardizare la Consorțiul Web

Candidate Recommendation (august 2013)

http://www.w3.org/TR/html5/

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

diverse specificații HTML5în lucru:

http://dev.w3.org/html5/

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

HTML5

specificațiile redactate de W3C și de WHATWGsunt diferite

conținut, frecvența actualizărilor, licență de utilizare

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

Ce aduce nou HTML5?

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

Relaxarea corectitudinii la nivel de sintaxă

HTML

și/sau

XHTML

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

Relaxarea corectitudinii la nivel de sintaxă

text/html

versus

application/xhtml+xml

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

specificarea tipului de documentse poate realiza în mod simplificat:

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" lang="ro">

<head>

<title>…</title>

<meta charset="utf-8" />

…

</head>

<body>

…

</body>

</html>

spațiul de numerămâne neschimbat

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

Modelul de reprezentare internă este bazat pe DOM

DOM HTML5

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co


DOM HTML5

eventual, arborele DOM – regăsit la nivel de browservia un obiect de tip Document – poate fi redat (accesat)

de către o extensie/plug-in

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co


DOM HTML5

orice document Web este identificatde o adresă unică (URL) ce poate fi manipulată via DOM

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

HTML5

detalii privind elementele (marcajele) și atributele aferente:

http://docs.webplatform.org/wiki/html

a se vizita și HTML5 Doctorhttp://html5doctor.com/

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

Noi elemente de structurare (secțiuni)

în stilul POSH – Plain Old Semantic HTML

article, nav, aside, section, header, footer etc.

de studiat Ș. Negru, Web LSD (Logic, Semantics and Design)http://slid.es/blankdots/weblsd

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

Embedded content

“scufundarea” altor tipuri de conținuturiîntr-un document HTML

conținut grafic – raster și/sau vectorialconținut sonorconținut video

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

Embedded content

svg

conținut grafic vectorialspecificat prin SVG (Scalable Vector Graphics)

un limbaj descriptiv bazat pe XML

http://www.w3.org/Graphics/SVG/

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

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

</defs><rect x="1cm" y="1cm" width="6cm" height="1cm" fill="url(#unGradient)" /><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" /><text fill="#000"><textPath xlink:href="#cale">Salut, lume!</textPath></text>

</svg>

studiu de caz: grafică vectorială cu SVG

C. Bulancea & S. Buraga, 2004

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

studiu de caz: grafică vectorială cu SVG

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

un experiment de editare on-line cu instrumentul JS Binincluderea construcțiilor SVG – aici, <rect> și <circle> –

direct în documentul HTML5

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

Embedded content

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.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

exemple demonstrative: http://svg-wow.org/

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

animații SVG realizate dinamic via biblioteca Raphaël

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

Embedded content

math

expresii matematice exprimate via limbajul MathML

un limbaj declarativ bazat pe XML

http://www.w3.org/Math/

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

Embedded content

math

specificația curenta: MathML 3.0 (2010)

o listă a instrumentelor software lahttp://www.w3.org/Math/Software/

suport nativ oferit de Firefox, Safari și Blackberry

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

exemplu demonstrativ oferit de Mozilla – Mathzillahttps://developer.mozilla.org/docs/Mozilla_MathML_Project

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

Embedded content

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.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

Embedded content

elementele audio și video

implementează interfața HTMLMediaElement

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

interface HTMLMediaElement : HTMLElement {

readonly attribute MediaError error;

attribute DOMString src;

readonly attribute DOMString currentSrc;

attribute DOMString preload;

readonly attribute TimeRanges buffered;

attribute double currentTime;

readonly attribute double duration;

readonly attribute boolean paused;

attribute boolean autoplay;

attribute boolean loop;

attribute boolean controls;

attribute double volume;

attribute boolean muted;

void load ();

void play ();

void pause ();

};

principalele atribute șimetode ale interfeței

HTMLMediaElement

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

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

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

Embedded content

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.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

<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-urilornecesare redării

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co








codec-uri uzuale:H.264 (MP4 – comercial, susținut de Apple și Microsoft;

actualmente, orice browser Web îl acceptă)www.h264info.com

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co








codec-uri uzuale:OGG (Theora – disponibil open-source;

implementat de Chrome, Firefox și Opera)www.xiph.org/ogg/

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co








codec-uri uzuale:WebM (o inițiativă Google – open source;

suport oferit de Chrome, Firefox și Opera)www.webmproject.org

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

Embedded content

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.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

statistici actuale privind redarea conținutului via <video>

(inclusiv la nivelul dispozitivelor mobile)www.longtailvideo.com/html5

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

În ceea ce privește redarea conținutului video, de interes poate fi și Fullscreen API

specificație în lucru la Consorțiul Web, dar implementată de majoritatea navigatoarelor

www.w3.org/TR/fullscreen/

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

Embedded content

canvas

suport pentru grafica raster (bitmap)generată dinamic via JavaScript

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

Interfața HTMLCanvasElement

scop:generarea dinamică de conținut grafic

dependent de rezoluția curentă

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co


specificație W3C: Candidate Recommendation (august 2013)

context de redare:conținut grafic 2D transparent de tip raster

www.w3.org/TR/2dcontext/

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

interface HTMLCanvasElement : HTMLElement {

// specifică zona rectangulară de redare a conținutului

attribute unsigned long width;

attribute unsigned long height;

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

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co


este asociată elementului HTML5 canvas

contextul 2D de redare a conținutul generat dinamicde script-urile operând asupra obiectului canvas este

specificat formal de interfața CanvasRenderingContext2D

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

Elementul canvas – interfața CanvasRenderingContext2D

transformări geometrice de bază:

scale()

rotate()

translate()

transform()

setTransform()

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co


generarea de căi grafice (paths):

lineTo() moveTo() rect() arc() fill() stroke() clip()

arcTo() quadraticCurveTo() bezierCurveTo()

beginPath() closePath()

isPointInPath()

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co


manipularea zonelor rectangulare:

strokeRect()

fillRect()

clearRect()

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co


crearea degradé-urilor:

createLinearGradient()

createRadialGradient()

createPattern()

plus addColorStop() – oferită de interfața CanvasGradient

vezi și CSS3

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co


specificarea de conținuturi textuale:

font

textAlign

fillText()

strokeText()

measureText()

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co


suport pentru redarea umbrelor:

shadowOffsetX

shadowOffsetY

shadowColor

shadowBlur

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co


manipularea conținutului grafic:

createImageData()

getImageData()

putImageData()

vezi interfața ImageData

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co


operații cu imagini:

drawImage()

save()

restore()

globalAlpha

globalCompositeOperation

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

<!DOCTYPE html><html><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>

generareaunei corole de minuni

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

function deseneazaDiscuri() {// preluăm contextul de redare 2Dvar context =

document.getElementById ('canvas').getContext ('2d');

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

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

for (var i = 1; i < 5; i++) { // vom genera 'inele' de discuri// salvăm contextul de redarecontext.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() + ')';

for (var j = 0; j < i * 6; j++) { // desenăm discuricontext.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 redarecontext.restore ();

}}

programul JavaScript(discuri.js) generând conținutul

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

un posibil rezultat al execuției codului

Sabin Buraga < [email protected] >

exemple, tutoriale și resurse:www.html5canvastutorials.com

www.canvasdemos.com

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

vizualizarea datelor:redarea în <canvas> a unui grafic cu biblioteca Flotr2http://humblesoftware.com/flotr2/

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co


alternativă de redare:conținut grafic 3D pe baza WebGL

implementare JavaScript a standardului OpenGL ES 2.0specificație în lucru (Khronos Group, noiembrie 2013)

http://www.khronos.org/webgl/

http://webglplayground.net/

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

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.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

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

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

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/

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

Formulare HTML5

formularele Web pot include noi tipuri de câmpuri

search

tel url email

datetime date

number

range

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

Tip Data type Control type search Text with no line breaks Search field

tel Text with no line breaks A text field url An absolute URL A text field

email An e-mail address or list of e-mail addresses A text field

datetime A date and time (year, month, day, hour, min., sec., fraction of a second) with the time zone set to UTC

A date & time control

date A date (year, month, day) with no time zone A date control

month A date consisting of a year & a month

with no time zone A month control

week A date consisting of a week-year number and

a week number with no time zone A week control

time A time (hour, minute, seconds, fractional seconds) A time control

number A numerical value A text field/

spinner control

range A numerical value, with the extra semantic

that the exact value is not important A slider control

or similar

color An sRGB color

with 8-bit red, green, and blue components A color wheel

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

<label>Adrese suplimentare:<input type="email" multiple

list="adrese" name="cc" /></label> … <datalist id="adrese">

<option value="[email protected]" /> <option value="[email protected]" /> <option value="[email protected]" />…

</datalist>

<input type="date" max="2000-12-31" name="zi-nastere" />

<input type="range" min="1" max="7" step="2" name="premii" />

pentru detalii, de studiat http://diveintohtml5.info/forms.html

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

Formulare HTML5

elemente noi asigurând interactivitatea:

details

summary

command

menu

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co



<menu type="toolbar">

<command type="radio" radiogroup="aliniere"

label="La stanga" icon="icons/align-left.png"

onclick="setAlign ('left')" checked="checked" />


label="Centrat" icon="icons/align-center.png"

onclick="setAlign ('center')" />


label="La dreapta" icon="icons/align-right.png"

onclick="setAlign ('right')" />

<command type="command" disabled="disabled"

label="Publica" icon="icons/publish.png"

onclick="publish ()" />

</menu>

Dr.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

Atribute definite de programator(custom HTML5 attributes)

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

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

<div id="utilizator" data-id="1234" data-user="tux" data-date-of-birth>

Tuxy Pinguinescu</div>

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.

Sab

in B

ura

ga

ww

w.p

url

.org

/ne

t/b

usa

co

❄❄

❄❄

❄❄

episodul viitor: vacanța de iarnă ☃

❄

dezvoltarea aplicaţiilor web la nivel de client (cursul #11): programare web. suita de tehnologii...

Technology

wo sabin buragawww

projectdr sabin buragawww

svg tiny

viitorulprogramrii web

tehnologii html5programare

o list

grafic vectorial cu

grafic vectorial cu