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

Dr.

Sab

in B

ura

ga

www.purl.org/net/busa

co

Dezvoltarea aplicațiilor Webla nivel de client

☑programare Web

suita de tehnologii HTML5

Dr.

Sab

in B

ura

ga


co

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

Walt Disney

Dr.

Sab

in B

ura

ga


co

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

Dr.

Sab

in B

ura

ga


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


co

HTML5

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

Dr.

Sab

in B

ura

ga


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


co

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

Dr.

Sab

in B

ura

ga


co

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/

Dr.

Sab

in B

ura

ga


co

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/

Dr.

Sab

in B

ura

ga


co

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/

Dr.

Sab

in B

ura

ga


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


co

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

Dr.

Sab

in B

ura

ga


co

HTML5

actualmente, standard al Consorțiului Web

W3C Recommendation (28 octombrie 2014)

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

Dr.

Sab

in B

ura

ga


co

diverse alte specificațiiHTML5 în lucru:

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

Dr.

Sab

in B

ura

ga


co

Ce aduce nou HTML5?

Dr.

Sab

in B

ura

ga


co

Relaxarea corectitudinii la nivel de sintaxă

HTML

și/sau

XHTML

Dr.

Sab

in B

ura

ga


co

Relaxarea corectitudinii la nivel de sintaxă

text/html

versus

application/xhtml+xml

Dr.

Sab

in B

ura

ga


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


co

Modelul de reprezentare internă este bazat pe DOM

DOM HTML5

Dr.

Sab

in B

ura

ga


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


co


DOM HTML5

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

Dr.

Sab

in B

ura

ga


co

HTML5

detalii privind elementele (marcajele) și atributele aferente:

http://www.w3.org/standards/techs/html

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

Dr.

Sab

in B

ura

ga


co

Lista elementelor HTML5

referitoare la antetul documentului (head):

html

head title base link

meta

style

script noscript

Dr.

Sab

in B

ura

ga


co


vizând structura (sections):

body

article nav aside section

header footer

h1—h6

main

address

Dr.

Sab

in B

ura

ga


co


grupare (grouping):

p

hr

pre blockquote

ol ul li

dl dt dd

figure figcaption

div

Dr.

Sab

in B

ura

ga


co


tabele (tables):

table

caption

thead tbody tfoot

tr th td

col colgroup

Dr.

Sab

in B

ura

ga


co


formulare (forms):

form

fieldset legend label

input button

select datalist optgroup option

textarea

keygen output

progress meter

Dr.

Sab

in B

ura

ga


co


editări de conținut (edits):

ins

del

Dr.

Sab

in B

ura

ga


co


alte conținuturi inserate (embedded):

img

iframe

embed object param

video audio track source

canvas

map

area

Dr.

Sab

in B

ura

ga


co


privind datele textuale (text-level):

a

em strong

abbr

q cite dfn

sub sup

Dr.

Sab

in B

ura

ga


co


privind datele textuale (text-level 2):

time

code kbd samp var mark

bdi bdo

ruby rt rp

span

br

wbr

Dr.

Sab

in B

ura

ga


co

aabbraddressareaarticleasideaudiobbasebdibdoblockquotebodybrbuttoncanvascaptioncitecodecolcolgroup

datadatalistdddeldfndivdldtemembedfieldsetfigcaptionfigurefooterformh1—h6headheaderhrhtmli

iframeimginputinskbdkeygenlabellegendlilinkmainmapmarkmetameternavnoscriptobjectoloptgroupoption

outputpparampreprogressqrbrprtrtcrubyssampscriptsectionselectsmallsourcespanstrongstyle

subsuptabletbodytdtemplatetextareatfootththeadtimetitletrtrackuulvarvideowbr

elementele HTML5

Dr.

Sab

in B

ura

ga


co

Câteva amănunte despre noile elemente HTML5?

Dr.

Sab

in B

ura

ga


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

Dr.

Sab

in B

ura

ga


co

<!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 lawww.w3.org/TR/html5/links.html

Dr.

Sab

in B

ura

ga


co

<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 HTML5folosind vocabularele schema.org

(vezi unul din cursurile anterioare)

Dr.

Sab

in B

ura

ga


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


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/

https://developer.mozilla.org/docs/Web/SVG

Dr.

Sab

in B

ura

ga


co

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

<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" /><path id="cale" d="M15 50 C10 0 90 0 90 40" /> <filter id="filtruCromatic"><feColorMatrix in="SourceGraphic" type="matrix"

values="0 0 0 0 01 0 1 1 00 1 1 0 00 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 filtruwww.w3.org/TR/SVG/filters.html

Dr.

Sab

in B

ura

ga


co

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

Dr.

Sab

in B

ura

ga


co


redarea conținutului grafic vectorial SVG

Safari pe platforma mobilă iOS 8.1 (iPad Air)

Firefoxla nivel de desktop

Windows 8.1

Dr.

Sab

in B

ura

ga


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


co

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/

Dr.

Sab

in B

ura

ga


co

Embedded content

svg

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

Dr.

Sab

in B

ura

ga


co

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

Dr.

Sab

in B

ura

ga


co

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

Dr.

Sab

in B

ura

ga


co

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

Dr.

Sab

in B

ura

ga


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


co

Embedded content

math

specificația curentă: MathML 3.0 (2010)

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

suport nativ oferit de Firefox (inclusiv pentru Android), Safari (inclusiv pentru iOS) și Blackberry

Dr.

Sab

in B

ura

ga


co

proiectul MathJaxwww.mathjax.org

soluție alternativă (polyfill)

Dr.

Sab

in B

ura

ga


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


co

Embedded content

elementele audio și video

implementează interfața HTMLMediaElement

Dr.

Sab

in B

ura

ga


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


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


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


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


co








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

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

Dr.

Sab

in B

ura

ga


co








codec-uri uzuale:OGG (Theora – open-source; implementat de Chrome,

Firefox și Opera, inexistent pentru IE și Safari ori Android)www.xiph.org/ogg/

Dr.

Sab

in B

ura

ga


co








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

Dr.

Sab

in B

ura

ga


co

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/

Dr.

Sab

in B

ura

ga


co

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

Dr.

Sab

in B

ura

ga


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

Dr.

Sab

in B

ura

ga


co

statistici privind redarea conținutului via <video> (inclusivla nivelul dispozitivelor mobile) pe baza API-urilor

http://www.jwplayer.com/html5/

Dr.

Sab

in B

ura

ga


co

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

Dr.

Sab

in B

ura

ga


co

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

Dr.

Sab

in B

ura

ga


co

Embedded content

canvas

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

Dr.

Sab

in B

ura

ga


co

Interfața HTMLCanvasElement

scop:generarea dinamică de conținut grafic

dependent de rezoluția curentă

Dr.

Sab

in B

ura

ga


co


stipulată de recomandarea W3C privind HTML5

Dr.

Sab

in B

ura

ga


co


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/

Dr.

Sab

in B

ura

ga


co

typedef (CanvasRenderingContext2D or WebGLRenderingContext) RenderingContext;

interface HTMLCanvasElement : HTMLElement { // specifică zona rectangulară de redare a conținutului graficattribute unsigned long width; attribute unsigned long height;

// metodă care oferă contextul redării conținutuluiRenderingContext? getContext (DOMString contextId, any... args);

// metodă ce întoarce un URL folosind schema data:// pentru accesul la conținutul generatDOMString toDataURL

(optional DOMString type, any... args);// metodă oferind manieră de serializare (e.g., salvare) a imaginiivoid toBlob (FileCallback? _callback,

optional DOMString type, any... arguments); };

Dr.

Sab

in B

ura

ga


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

https://developer.mozilla.org/docs/Web/API/CanvasRenderingContext2D

Dr.

Sab

in B

ura

ga


co

Elementul canvas – interfața CanvasRenderingContext2D

transformări geometrice de bază:

scale()

rotate()

translate()

transform()

setTransform()

Dr.

Sab

in B

ura

ga


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


co


manipularea zonelor rectangulare:

strokeRect()

fillRect()

clearRect()

Dr.

Sab

in B

ura

ga


co


crearea dégradé-urilor:

createLinearGradient()

createRadialGradient()

createPattern()

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

vezi și CSS3

Dr.

Sab

in B

ura

ga


co


specificarea de conținuturi textuale:

font

textAlign

fillText()

strokeText()

measureText()

Dr.

Sab

in B

ura

ga


co


suport pentru redarea umbrelor:

shadowOffsetX

shadowOffsetY

shadowColor

shadowBlur

Dr.

Sab

in B

ura

ga


co


manipularea conținutului grafic:

createImageData()

getImageData()

putImageData()

vezi interfața ImageData

Dr.

Sab

in B

ura

ga


co


operații cu imagini:

drawImage()

save()

restore()

globalAlpha

globalCompositeOperation

Dr.

Sab

in B

ura

ga


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


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


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


co

un posibil rezultat al execuției codului

Sabin Buraga < [email protected] >

o suită de tutoriale:www.html5canvastutorials.com

vezi și https://developer.mozilla.org/docs/Web/API/Canvas_API

Dr.

Sab

in B

ura

ga


co

biblioteci JavaScript:Fabric Flotr2 Kinetic Paper

libCanvas Processing.js Rekapi

în contextul vizualizării datelor, de experimentat JavaScript InfoVis Toolkit

http://thejit.org/

Dr.

Sab

in B

ura

ga


co


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

implementare JavaScript a standarduluiOpenGL ES 2.0 (Embedded Accelerated 3D Graphics)

www.khronos.org/opengles/2_X/suport: Apple, AMD, Fujitsu, Google, Intel, NVIDIA, Samsung, Sony,…

Dr.

Sab

in B

ura

ga


co


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

specificații în lucru furnizate de Khronos GroupWebGL 1.0 – ciornă, 10 decembrie 2014WebGL 2.0 – ciornă, 17 octombrie 2014

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

Dr.

Sab

in B

ura

ga


co

mediu Web de dezvoltare: http://webglplayground.net/

resurse: https://developer.mozilla.org/docs/Web/WebGL

WebGL în conjuncție cu jQuery

Dr.

Sab

in B

ura

ga


co

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

Dr.

Sab

in B

ura

ga


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


co

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

Dr.

Sab

in B

ura

ga


co

biblioteci JavaScript: Babilon, c3DL,CopperLicht, CubicVR, OSG, PhiloGL,

SceneJS, TDL (ThreeD Library), Three.js,…

alte detalii la www.khronos.org/webgl/wiki/User_Contributions

Dr.

Sab

in B

ura

ga


co

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

Dr.

Sab

in B

ura

ga


co

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

Dr.

Sab

in B

ura

ga


co

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

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

<option value="[email protected]">[email protected]</option> <option value="[email protected]">[email protected]</option> <option value="[email protected]">[email protected]</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

Dr.

Sab

in B

ura

ga


co

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

Dr.

Sab

in B

ura

ga


co

Atribute definite de programator(custom HTML5 attributes)

într-un document HTML5 pot fi incluse atribute propriiprefixate cu data-

pot stoca valori private disponibile la nivel de pagină/aplicație Web

Dr.

Sab

in B

ura

ga


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

Dr.

Sab

in B

ura

ga


co

implementările HTML5: html5test.com

Dr.

Sab

in B

ura

ga


co

❄❄

❄❄

❄❄

episodul viitor: vacanța de iarnă ☃

❄

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

Technology

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