CLIW 2014—2015 (10/12): Programare Web. Suita de tehnologii HTML5

Dr.SabinBuragawww.purl.org/net/busaco
Dezvoltarea aplicațiilor Web
la nivel de client
☑
programare Web
suita de tehnologii HTML5

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

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

HTML5
un vocabular (set de elemente + atribute)
folosit pentru marcarea paginilor Web
+
o suită de API-uri facilitând procesarea documentelor

HTML5
permite dezvoltarea standardizată de aplicații Web
pe baza unor API-uri specificate formal

HTML5
permite dezvoltarea standardizată de aplicații Web
pe baza unor API-uri specificate formal
API-urile sunt definite de interfețe
descrise via limbajul declarativ WebIDL
W3C Candidate Recommendation, 2012
http://www.w3.org/TR/WebIDL/

tehnologii înrudite cu HTML5 vizând prezentarea datelor:
Cascading Style Sheets – CSS (specificații W3C)
http://www.w3.org/Style/CSS/
https://developer.mozilla.org/docs/Web/CSS

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/

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 3
în curs de standardizare: DOM Level 4
http://www.w3.org/standards/techs/dom#w3c_all
https://dom.spec.whatwg.org/

Web API
suita de API-uri JavaScript (ECMAScript) disponibile
– la nivel de client – pentru dezvoltarea de aplicații
arii de interes: grafică & tipografie, multimedia,
interacțiune cu utilizatorul, stocare & fișiere, transfer
în timp-real, componente Web, performanță, securitate
http://www.w3.org/standards/techs/js
https://platform.html5.org/

HTML5
inițial, o propunere independentă de Consorțiul Web
WHATWG (Web Hypertext Application Technology
Working Group) compus din Apple, Mozilla, Opera
www.whatwg.org

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

HTML5
actualmente, standard al Consorțiului Web
W3C Recommendation (28 octombrie 2014)
http://www.w3.org/TR/html5/

diverse alte specificații
HTML5 în lucru:
http://dev.w3.org/html5/

Ce aduce nou HTML5?

Relaxarea corectitudinii la nivel de sintaxă
HTML
și/sau
XHTML

Relaxarea corectitudinii la nivel de sintaxă
text/html
versus
application/xhtml+xml

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

Modelul de reprezentare internă este bazat pe DOM
DOM HTML5

DOM HTML5
eventual, arborele DOM – regăsit la nivel de browser
via un obiect de tip Document – poate fi redat (accesat)
de către o extensie/plug-in

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

HTML5
detalii privind elementele (marcajele)
și atributele aferente:
http://www.w3.org/standards/techs/html
a se consulta și HTML5 Doctor
http://html5doctor.com/

Lista elementelor HTML5
referitoare la antetul documentului (head):
html
head title base link
meta
style
script noscript

vizând structura (sections):
body
article nav aside section
header footer
h1—h6
main
address

grupare (grouping):
p
hr
pre blockquote
ol ul li
dl dt dd
figure figcaption
div

tabele (tables):
table
caption
thead tbody tfoot
tr th td
col colgroup

formulare (forms):
form
fieldset legend label
input button
select datalist optgroup option
textarea
keygen output
progress meter

editări de conținut (edits):
ins
del

alte conținuturi inserate (embedded):
img
iframe
embed object param
video audio track source
canvas
map
area

privind datele textuale (text-level):
a
em strong
abbr
q cite dfn
sub sup

privind datele textuale (text-level 2):
time
code kbd samp var mark
bdi bdo
ruby rt rp
span
br
wbr

a
abbr
address
area
article
aside
audio
b
base
bdi
bdo
blockquote
body
br
button
canvas
caption
cite
code
col
colgroup
data
datalist
dd
del
dfn
div
dl
dt
em
embed
fieldset
figcaption
figure
footer
form
h1—h6
head
header
hr
html
i
iframe
img
input
ins
kbd
keygen
label
legend
li
link
main
map
mark
meta
meter
nav
noscript
object
ol
optgroup
option
output
p
param
pre
progress
q
rb
rp
rt
rtc
ruby
s
samp
script
section
select
small
source
span
strong
style
sub
sup
table
tbody
td
template
textarea
tfoot
th
thead
time
title
tr
track
u
ul
var
video
wbr
elementele HTML5

Câteva amănunte
despre noile elemente HTML5?

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), 2013
http://slid.es/blankdots/weblsd

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="ro" xml:lang="ro">
<head>
<title>Filmul disciplinei | Dezvoltarea aplicaţiilor Web la nivel de client</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="author" content="Sabin Buraga – http://www.purl.org/net/busaco" />
<link rel="stylesheet" type="text/css" href="web.css" />
</head>
<body>
<header>
<h1>Dezvoltarea aplicaţiilor Web la nivel de client</h1>
<p class="slogan">prezentările aferente cursului</p>
</header>
<article>
<p>Filmul desfăşurării materiei este prezentat mai jos.</p>
<nav>
<ul>
<li><a href="#week12" title="…">Săptămâna 12</a></li>
…
<li><a href="#week1" title="…">Săptămâna 1</a></li>
</ul>
</nav>
detalii despre atributul rel la
www.w3.org/TR/html5/links.html

<section id="week1">
<h2>▣ Săptămâna 1</h2>
<ul>
<li><aside class="menu">reamintire:
<a href="http://profs.info.uaic.ro/~busaco/teach/courses/web/web-film.html"
title="Spre situl disciplinei">Tehnologii Web</a></aside>
<p>…</p>
</li>
</ul>
</section>
</article>
<footer>
<h6>Ultima actualizare: 15 decembrie 2014 /
<a rel="license"
href="http://creativecommons.org/licenses/by-nc-sa/4.0/" title="…">CC</a>
<span itemscope="itemscope" itemtype="http://schema.org/Person">
<a href="http://www.purl.org/net/busaco" title="Spre situl Web al titularului…"
itemprop="url" accesskey="S">
<span itemprop="name">Sabin Buraga</span></a>
</span>
</h6>
</footer>
</body>
</html>
microdate HTML5
folosind vocabularele schema.org
(vezi unul din cursurile anterioare)

Embedded content
„scufundarea” altor tipuri de conținuturi
într-un document HTML
conținut grafic – raster și/sau vectorial
conținut sonor
conținut video

Embedded content
svg
conținut grafic vectorial
specificat prin SVG (Scalable Vector Graphics)
un limbaj descriptiv bazat pe XML
http://www.w3.org/Graphics/SVG/
https://developer.mozilla.org/docs/Web/SVG

<rect x="1cm" y="1cm" width="6cm" height="1cm" round="1em"
fill="url (#unGradient)" />

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

<text fill="darkgreen">

<textPath xlink:href="#cale">❤ 2015</textPath>
</text>
</svg>
C. Bulancea & S. Buraga (2004, 2014)

redarea conținutului grafic vectorial SVG
Safari pe platforma
mobilă iOS 8.1 (iPad Air)
Firefox
la nivel de desktop
Windows 8.1

un experiment de editare on-line cu instrumentul JS Bin
includerea construcțiilor SVG – aici, <rect> și <circle> –
direct în documentul HTML5

Embedded content
svg
specificația curentă: SVG 1.1 2nd Edition (2011)
http://www.w3.org/TR/SVG/
în lucru: SVG 2.0 – https://svgwg.org/svg2-draft/
în contextul dispozitivelor mobile: SVG Tiny 1.2 (2008)
http://www.w3.org/TR/SVGTiny12/

Embedded content
svg
suport în cadrul navigatoarelor moderne
Chrome, Firefox, IE9+, Opera, Safari (inclusiv pentru iOS)

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

Embedded content
svg
biblioteci JavaScript importante:
Raphaël.js – raphaeljs.com
Snap.svg – snapsvg.io
svg.js – svgjs.com
a se considera și Bonsai, Fabric.js, SVG Circus etc.
http://jster.net/tag/svg

examinarea codului SVG generat de biblioteca Snap.svg
folosind instrumentele de depanare furnizate de browser

Embedded content
math
expresii matematice exprimate via limbajul MathML
un limbaj declarativ bazat pe XML
http://www.w3.org/Math/

Embedded content
math
specificația curentă: MathML 3.0 (2010)
o listă a instrumentelor software la
http://www.w3.org/Math/Software/
suport nativ oferit de Firefox (inclusiv pentru Android),
Safari (inclusiv pentru iOS) și Blackberry

proiectul MathJax
www.mathjax.org
soluție alternativă
(polyfill)

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

Embedded content
elementele audio și video
implementează interfața HTMLMediaElement

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 și
metode ale interfeței
HTMLMediaElement

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

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

<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

necesare redării
codec-uri uzuale:
H.264 (MP4 – comercial, susținut de Apple și Microsoft;
actualmente, orice browser Web modern îl acceptă)
www.h264info.com

necesare redării
codec-uri uzuale:
OGG (Theora – open-source; implementat de Chrome,
Firefox și Opera, inexistent pentru IE și Safari ori Android)
www.xiph.org/ogg/

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)
www.webmproject.org

Alte codec-uri:
WebP (Google – format grafic cu/fără pierderi,
oferind suport și pentru animații sau transparență;
implementat doar de Chrome și Opera)
https://developers.google.com/speed/webp/

Alte codec-uri:
Opus (specificație IETF liberă
asigurând calitatea ridicată a conținutului audio;
implementări actuale: Chrome și Firefox)
http://tools.ietf.org/html/rfc6716

Embedded content
elementul track permite specificarea de piste (track-uri)
ce pot include subtitrări, descrieri, capitole, meta-date

<video src="http://videolectures.net/eswc2014_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>

statistici privind redarea conținutului via <video> (inclusiv
la nivelul dispozitivelor mobile) pe baza API-urilor
http://www.jwplayer.com/html5/

streaming adaptiv (eventual criptat)
disponibil doar în stadiu experimental

În ceea ce privește redarea conținutului video,
de interes poate fi și Fullscreen API
specificație în lucru (octombrie 2014),
dar implementată de majoritatea navigatoarelor
https://fullscreen.spec.whatwg.org/

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

Interfața HTMLCanvasElement
scop:
generarea dinamică de conținut grafic
dependent de rezoluția curentă

stipulată de recomandarea W3C privind HTML5

stipulată de recomandarea W3C privind HTML5
context de redare:
conținut grafic 2D transparent de tip raster
(W3C Candidate Recommendation, august 2014)
www.w3.org/TR/2dcontext/

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

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

Elementul canvas – interfața CanvasRenderingContext2D
transformări geometrice de bază:
scale()
rotate()
translate()
transform()
setTransform()

generarea de căi grafice (paths):
lineTo() moveTo() rect() arc() fill() stroke() clip()
arcTo() quadraticCurveTo() bezierCurveTo()
beginPath() closePath()
isPointInPath()

manipularea zonelor rectangulare:
strokeRect()
fillRect()
clearRect()

crearea dégradé-urilor:
createLinearGradient()
createRadialGradient()
createPattern()
plus addColorStop() – oferită de interfața CanvasGradient
vezi și CSS3

specificarea de conținuturi textuale:
font
textAlign
fillText()
strokeText()
measureText()

suport pentru redarea umbrelor:
shadowOffsetX
shadowOffsetY
shadowColor
shadowBlur

manipularea conținutului grafic:
createImageData()
getImageData()
putImageData()
vezi interfața ImageData

operații cu imagini:
drawImage()
save()
restore()
globalAlpha
globalCompositeOperation

<!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>
generarea
unei corole de minuni

function deseneazaDiscuri() {
// preluăm contextul de redare 2D
var 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

for (var i = 1; i < 5; i++) { // vom genera 'inele' de discuri
// salvăm contextul de redare
context.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 discuri
context.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 redare
context.restore ();
}
}
programul JavaScript
(discuri.js) generând conținutul

un posibil rezultat al execuției codului

Sabin Buraga < busaco@infoiasi.ro >
o suită de tutoriale:
www.html5canvastutorials.com
vezi și https://developer.mozilla.org/docs/Web/API/Canvas_API

biblioteci JavaScript:
Fabric Flotr2 Kinetic Paper
libCanvas Processing.js Rekapi
în contextul vizualizării
datelor, de experimentat
JavaScript InfoVis Toolkit
http://thejit.org/

alternativă de redare:
conținut grafic 3D pe baza WebGL
implementare JavaScript a standardului
OpenGL ES 2.0 (Embedded Accelerated 3D Graphics)
www.khronos.org/opengles/2_X/
suport: Apple, AMD, Fujitsu, Google, Intel, NVIDIA, Samsung, Sony,…

alternativă de redare:
conținut grafic 3D pe baza WebGL
specificații în lucru furnizate de Khronos Group
WebGL 1.0 – ciornă, 10 decembrie 2014
WebGL 2.0 – ciornă, 17 octombrie 2014
http://www.khronos.org/webgl/

mediu Web de dezvoltare: http://webglplayground.net/
resurse: https://developer.mozilla.org/docs/Web/WebGL
WebGL în conjuncție cu jQuery

WebGL este implementat
(inclusiv pe platforme mobile)
în proporție de aproape 75%

Shader Editor inclus în Firefox folosit la inspectarea
shader-elor demonstrative ale instrumentului online Shdr

biblioteci JavaScript: Babilon, c3DL,
CopperLicht, CubicVR, OSG, PhiloGL,
SceneJS, TDL (ThreeD Library), Three.js,…
alte detalii la www.khronos.org/webgl/wiki/User_Contributions

Formulare HTML5
formularele Web pot include noi tipuri de câmpuri,
valorile putând fi eventual auto-completate
și/sau validate de browser
http://www.w3.org/TR/html5/forms.html
http://diveintohtml5.info/forms.html

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

<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

formulare HTML5 – testarea facilităților:
https://miketaylr.com/code/input-type-attr.html

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

<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

implementările HTML5:
html5test.com



❄
❄
❄
❄
❄
❄

episodul viitor: vacanța de iarnă ☃
❄

CLIW 2014—2015 (10/12): Programare Web. Suita de tehnologii HTML5

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Semelhante a CLIW 2014—2015 (10/12): Programare Web. Suita de tehnologii HTML5

Semelhante a CLIW 2014—2015 (10/12): Programare Web. Suita de tehnologii HTML5 (20)

Mais de Sabin Buraga

Mais de Sabin Buraga (20)

CLIW 2014—2015 (10/12): Programare Web. Suita de tehnologii HTML5