O viziune de ansamblu asupra suitei de tehnologii HTML5, plus exemple referitoare la generarea de conținut multimedia via SVG sau via elementul canvas. Detalii la http://profs.info.uaic.ro/~busaco/teach/courses/cliw/web-film.html
7. Dr.SabinBuragawww.purl.org/net/busaco
Animations
Background-image options
Border images
Border radius
Box shadows
Box sizing
Downloadable fonts (@font-face)
Fixed positioning (position:fixed)
Font-feature settings
Gradients
Grid layout
Hyphenation
Media Queries
Multiple-column layout
Multiple backgrounds
Opacity
Pointer events
Selectors
Text overflow
Text shadows
Transforms (2D)
Transforms (3D)
Transitions
CSSOM (CSS Object Model)
CSSOM View Module
module CSS – standardizate ori în curs de standardizare –
specificând diverse funcționalități
de experimentat și validatorul de foi de stiluri CSS:
http://jigsaw.w3.org/css-validator/
8. Dr.SabinBuragawww.purl.org/net/busaco
Tehnologii înrudite cu HTML5 vizând acces (abstract)
via un model conceptual: Document Object Model – DOM
pentru HTML, SVG și XML
în vigoare: DOM Level 4
(recomandare W3C, noiembrie 2015)
http://www.w3.org/standards/techs/dom#w3c_all
https://dom.spec.whatwg.org/
9. Dr.SabinBuragawww.purl.org/net/busaco
Web API
suita de API-uri JavaScript (ECMAScript) disponibile
– la nivel de client – pentru dezvoltarea de aplicații
arii de interes: grafică și tipografie, multimedia,
interacțiune cu utilizatorul, stocare și fișiere, transfer
în timp-real, componente Web, performanță, securitate
http://www.w3.org/standards/techs/js
https://platform.html5.org/
16. Dr.SabinBuragawww.purl.org/net/busaco
specificarea tipului de document
se 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 nume
rămâne neschimbat
27. Dr.SabinBuragawww.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>Grafică vectorială cu SVG</title>
<defs>
<!-- definim un dégradé (gradient) liniar -->
<linearGradient id="unGradient">
<stop offset="33%" stop-color="#ADA" />
<stop offset="74%" stop-color="#369" />
</linearGradient>
<rect id="patrat" width="15px" height="15px" rx="2" ry="2" fill="green" />
<!-- o cale de redare -->
<path id="cale" d="M15 50 C10 0 90 0 90 40" />
<!-- un filtru cromatic -->
<filter id="filtruCromatic">
<feColorMatrix in="SourceGraphic" type="matrix"
values="0 0 0 0 0
1 0 1 1 0
0 1 1 0 0
0 0 0 1 0" />
</filter>
</defs>
studiu de caz: grafică vectorială cu SVG
C. Bulancea & S. Buraga (2004, 2014)
comenzi grafice
(e.g., M=mută, C=cerc)
aplicarea unui filtru
www.w3.org/TR/SVG/filters.html
28. Dr.SabinBuragawww.purl.org/net/busaco
<!-- o formă rectangulară umplută cu dégradé-ul definit anterior -->
<rect x="1cm" y="1cm" width="6cm" height="1cm" round="1em"
fill="url (#unGradient)" />
<!-- folosim 4 instanțe ale pătratului definit,
plasate la diverse coordonate și având diverse proprietăți grafice -->
<use x="40" y="40" xlink:href="#patrat" />
<use x="100" y="80" xlink:href="#patrat" filter="url (#filtruCromatic)" />
<use x="160" y="80" xlink:href="#patrat" fill-opacity="0.33" />
<use x="220" y="80" xlink:href="#patrat" />
<!-- un text redat conform căii specificate -->
<text fill="darkgreen">
<!-- de studiat și http://www.w3.org/TR/SVG/fonts.html -->
<textPath xlink:href="#cale">❤ 2015</textPath>
</text>
</svg>
studiu de caz: grafică vectorială cu SVG
C. Bulancea & S. Buraga (2004, 2014)
44. Dr.SabinBuragawww.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 (MPEG4 – comercial, susținut de Apple și Microsoft;
actualmente, orice browser Web modern îl acceptă)
www.h264info.com
45. Dr.SabinBuragawww.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 – open-source; implementat de Chrome,
Firefox (inclusiv pe Android) și Opera; fără suport în IE/
Edge și Safari ori pe platforme mobile) – www.xiph.org/ogg/
46. Dr.SabinBuragawww.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, dar nu și de Safari sau Edge)
www.webmproject.org
49. Dr.SabinBuragawww.purl.org/net/busaco
Embedded content
elementul track permite specificarea de piste (track-uri)
ce pot include subtitrări, descrieri, capitole, meta-date
<!-- prezentarea M. Figus, Components as Microservices
in the Front-end World (2015) -->
<video src="http://www.infoq.com/presentations/html-components-services">
<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>
51. Dr.SabinBuragawww.purl.org/net/busaco
În ceea ce privește redarea conținutului video,
de interes poate fi și Fullscreen API
specificație în lucru (octombrie 2015),
dar implementată de majoritatea navigatoarelor
https://fullscreen.spec.whatwg.org/
56. Dr.SabinBuragawww.purl.org/net/busaco
typedef (CanvasRenderingContext2D or
WebGLRenderingContext) RenderingContext;
interface HTMLCanvasElement : HTMLElement {
// specifică zona rectangulară de redare a conținutului grafic
attribute unsigned long width;
attribute unsigned long height;
// metodă care oferă contextul redării conținutului
RenderingContext? getContext (DOMString contextId, any... args);
// metodă ce întoarce un URL folosind schema data:
// pentru accesul la conținutul generat
DOMString toDataURL
(optional DOMString type, any... args);
// metodă oferind manieră de serializare (e.g., salvare) a imaginii
void toBlob (FileCallback? _callback,
optional DOMString type, any... arguments);
};
57. Dr.SabinBuragawww.purl.org/net/busaco
Interfața HTMLCanvasElement
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
https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D
70. Sabin Buraga < busaco@infoiasi.ro >
de studiat și
https://developer.mozilla.org/docs/Web/API/Canvas_API
http://perfectionkills.com/exploring-canvas-drawing-techniques/
o suită de tutoriale:
www.html5canvastutorials.com
80. Dr.SabinBuragawww.purl.org/net/busaco
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
date
A date (year, month, day)
with no time zone
A date control
time
A time (hour, minute, seconds,
fractional seconds)
with no time zone
A time control
number A numerical value
A text field or
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, & blue components
A color well
81. Dr.SabinBuragawww.purl.org/net/busaco
<label>Adrese suplimentare:
<input type="email" multiple
list="adrese" name="cc" />
</label>
<datalist id="adrese">
<option value="tux@pinguin.info">tux@pinguin.info</option>
<option value="tuxy.pingu@pol.org">tuxy.pingu@pol.org</option>
<option value="tp@alt.undeva.org">tp@alt.undeva.org</option>
</datalist>
<input type="date" max="2000-12-31" name="zi-nastere" />
<input type="range" min="1" max="7" step="2" name="premii" />
<input type="color" name="culoare" />
<input type="search" pattern="[A-Za-z]+" placeholder="Caută cadouri..." />
nu există încă suport complet
pentru toate tipurile de controale de interacțiune
atributul multiple poate fi folosit
și la upload-ul mai multor fișiere
83. Dr.SabinBuragawww.purl.org/net/busaco
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
84. Dr.SabinBuragawww.purl.org/net/busaco
<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 = '1991-12-17'; // stabilim când s-a născut
el.dataset.someDataAttr = 'mydata';
// 'someDataAttr' in el.dataset === true
folosirea consolei navigatorului Web pentru
accesarea și modificarea atributelor data-
via obiectul dataset