html5? html5!
Post on 28-Nov-2014
22.579 Views
Preview:
DESCRIPTION
TRANSCRIPT
HTML ?
Dr. Sabin Buraga
www.purl.org/net/busaco
HTML !
“scurtă” introducere: aspecte esențiale
Ce este HTML5?
vocabular (set de elemente + atribute)pentru marcarea paginilor Web
suită de API-urifacilitând procesarea documentelor
permite dezvoltarea standardizată de aplicații Web pe baza unor API-uri specificate formal
conținut structurat având prezentări complexe via CSS3
independența de dispozitivubicuitate & accesibilitate
multitudine de conținuturiinteracțiune & experiență Web
de la Web 2D la Web 3D
API-uri specifice pentru îmbunătățirea performanței Web
API-uri pentru stocare locală (ne)persistentă a datelor
conectivitate între aplicații Web și/sau aplicații “clasice”
date structurate și modelate conceptual
recurge la tehnologii înrudite referitoare la
prezentare: CSS3model (abstract): DOMprocesare: JavaScript
…și altele
inițial, o propunere descrisă deWHATWG compus din Apple, Mozilla, Opera
www.whatwg.org/specs/web-apps/current-work/
actualmente, în curs de standardizare la W3Ccu statut de ciornă în lucru (working draft)
www.w3.org/TR/html5/
specificațiile redactate de W3C și de WHATWGsunt diferite
conținut, frecvența actualizărilor, licență de utilizare
Ce aduce nou HTML5?
relaxarea corectitudinii la nivel de sintaxă
HTML și/sau XHTML
relaxarea corectitudinii la nivel de sintaxă
HTML și/sau XHTML
text/html versus application/xhtml+xml
specificarea tipului de documentse poate realiza în mod simplificat
<!DOCTYPE html>
modelul de reprezentare internăeste bazat pe DOM (Document Object Model)
DOM HTML5
modelul de reprezentare internăeste bazat pe DOM (Document Object Model)
eventual, arborele DOM – regăsit la nivel de browser
via un obiect de tip Document – poate fi redat (accesat)
de o extensie (plug-in)
noi elemente descriind fluxul informaționalîn stilul POSH (Plain Old Semantic HTML)
article, aside, audio, canvas, datalist, details, figure,
footer, header, keygen, mark, math, meter, nav, output,
progress, samp, section, svg, time, video,…
<article> <header>
<h1>Titlul articolului</h1><p><time pubdate datetime="2011-08-01T07:33"></time></p>
</header> <p>Conținutul propriu-zis al articolului…</p> <aside>Alte resurse de interes</aside><section>
<h1>Comentarii</h1> <article>
<!-- comentariile sunt considerate note de subsol --><footer>
<p>Tuxy Pinguinescu</p><p><time pubdate
datetime="2011-08-03T01:07-03:03"></time></p> </footer> <p>Un comentariu</p>
</article> </section>
</article> un articol disponibil pe un blog
exemplu
<figure> <img src="fii-student.png" alt="Sigla FII Student" /> <figcaption>FII Student</figcaption>
</figure>
<figure> <!-- conținutul nu neapărat trebuie să fie o imagine --><video
src="http://ferma.info/video/porci.mov"></video> <figcaption>
Relatare despre <em>porcii viole(n)ți</em>.</figcaption>
</figure> specificarea unor figuri
exemplu
elemente care permit “scufundarea”altor tipuri de conținuturi într-o pagină Web
alături de elementele img, iframe, embed și object,
sunt permise audio, video, source
<video src="porcii-verzi.ogg" controls autoplay></video>…<script>// preluăm via DOM obiectul referitor la conținutul videovar video = document.getElementsByTagName ('video')[0];</script><p>
<input type="button" value="Pauză" onclick="video.pause ();">
<input type="button" value="Rulează" onclick="video.play ();">
</p>metodele pause() și play()
sunt specificate de interfața
HTMLMediaElement
exemplu
exemple de evenimente ce pot fi tratateîn ceea ce privește conținutul multimedia:
loadstart progress suspend abort error
stalled play pause loadeddata
waiting playing seeking
canplay seeked timeupdate ended
ratechange durationchange volumechange
elemente care permit “scufundarea”altor tipuri de conținuturi într-o pagină Web
plus:
canvas – grafică raster generată dinamic
svg – conținut grafic vectorial specificat prin SVG
math – formule matematice exprimate via MathML
interfața HTMLCanvasElement
permite generarea dinamică de conținut grafic
dependent de rezoluția curentă
interfața HTMLCanvasElement
permite generarea dinamică de conținut grafic
dependent de rezoluția curentă
în prezent – specificație W3C (mai 2011):
conținut grafic 2D transparent de tip raster
www.w3.org/TR/2dcontext/
interfața HTMLCanvasElement
este asociată elementului canvas
interfața HTMLCanvasElement
este asociată elementului canvas
navigatoarele Web actuale oferă suport relativ complet
pentru Internet Explorer (versiuni < 9), se poate recurge la
ExplorerCanvas: http://code.google.com/p/explorercanvas/
prin JavaScript pot fi efectuate
transformări geometrice de bază
generarea de căi grafice (paths)crearea degradé-urilor & redarea umbrelor
specificarea de conținuturi textuale
manipularea conținutului grafic
…și altele
<html><head>
<title>Corola de minuni</title><script type="text/javascript" src="discuri.js"></script>
</head><body onclick="javascript:deseneazaDiscuri ()">
<h1>Fă un click…</h1><canvas id="canvas"
height="500" width="375">
</canvas></body></html>
exemplu
function deseneazaDiscuri () {// preluăm contextul de redare 2Dvar context =
document.getElementById ('canvas').getContext ('2d');
// stabilim parametrii umbrelorcontext.shadowOffsetX = 3; context.shadowOffsetY = 3;context.shadowBlur = 33;
// stabilim parametrii corpului de literăcontext.font = "20pt Arial, Helvetica, sans-serif"; context.fillText ("Fă un click", 5, 30);
// translăm...context.translate (75, 75);
programul JavaScript(discuri.js) generând conținutul
exemplu
for (var i = 1; i < 5; i++) { // generăm '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 ();
}// restaurăm contextul de redarecontext.restore ();
}}
programul JavaScript(discuri.js) generând conținutul
exemplu
un posibil rezultat al execuției codului
(folosind un browser bazat pe WebKit)
exemple demonstrative & resurse:
www.canvasdemos.com
interacțiunea cu utilizatorul
formularele Web pot include câmpuri suplimentare
interacțiunea cu utilizatorul
noi tipuri:
search tel url email
datetime date
number range
color
<label>Adrese suplimentare:<input type="email" multiple
list="adrese" name="cc" /></label> … <datalist id="adrese">
<option value="tux@pinguin.info" /> <option value="tuxy.pinguinescu@info.uaic.ro" /> <option value="tp@alt.undeva.org" />…
</datalist>
<input type="date" max="2000-12-31" name="zi-nastere" /><input type="range" min="1" max="7" step="2"
name="premii" />
exemplu
interacțiunea cu utilizatorul
noi elemente interactive:
details summary command menu
încărcarea & redarea documentelor
suplimentar față de obiectul Document,
se specifică Window oferind acces la mediul de redare
încărcarea & redarea documentelor
API-uri de bază:
ApplicationCache
control asupra cache-ului navigatorului Web
încărcarea & redarea documentelor
API-uri de bază:
WindowTimers
oferă suport pentru specificarea contoarelor de timp
încărcarea & redarea documentelor
API-uri de bază:
Navigator
acces la starea și proprietățile sistemului
via sub-interfețele NavigatorID și NavigatorAbilities
încărcarea & redarea documentelor
API-uri de bază:
DataTransfer
stochează fragmente de date în diverse formate
(util și pentru efectuarea operațiilor drag & drop)
încărcarea & redarea documentelor
API-uri de bază:
UndoManager
gestionează istoricul comenzilor efectuate
(undo transaction history)
Există și alte specificațiisau inițiative de interes?
WebSocket API
definește un API abstract pentru transmiterea de date
pe baza protocolului de transfer WebSocket:
www.whatwg.org/specs/web-socket-protocol/
www.w3.org/TR/websockets/
// actualizările de date vor fi trimise cu rata de o actualizare// la fiecare 50ms, dacă există suficientă lățime de bandăvar socket = new WebSocket ('ws://joc.undeva.info:1974/updates');
socket.onopen = function () { setInterval (function() {
if (socket.bufferedAmount == 0) socket.send (oferaDate ());
}, 50); };
exemplu
Web Messaging
oferă API-uri pentru realizarea transferului de mesaje
între diverse contexte de navigare
www.w3.org/TR/postmsg/
Web Messaging
mesajele pot proveni de la server, via socket-uri Web
sau de la alte documente via canale de comunicație
Web Workers
“muncitor” (worker) Web:
script rulat în fundal – în accepțiunea daemon-ilor UNIX –
independent de alte programe
ce pot interacționa cu utilizatorul
Web Workers
mediul de execuție al unui worker e complet separat,
codul fiind rulat în paralel, în mod asincron
http://whatwg.org/ww
Web Storage
oferă mecanisme de stocare (persistentă) a datelor
la nivel de client sub formă de perechi cheie—valoare
www.w3.org/TR/webstorage/
Web Storage
maniera de stocare a itemilor se precizează
via atributele sessionStorage și localStorage
Web Storage
maniera de stocare a itemilor se precizează
via atributele sessionStorage și localStorage
stocare nepersistentă
(suport pentru sesiuni)
Web Storage
maniera de stocare a itemilor se precizează
via atributele sessionStorage și localStorage
alternativă la cookie-uri
<textarea id="editor" placeholder="Începeți să tastați..."></textarea>
document.querySelector ('#editor').addEventListener ('keyup', function (e) { // la fiecare eliberare a tastei…
// stocăm conținutul și data edităriilocalStorage.setItem ('text', this.value);localStorage.setItem ('data', (new Date()).getTime());
}, false);
exemplu
Web SQL Database
se referă la un set de API-uri pentru managementul
asincron al bazelor de date la nivel de client via SQL
www.w3.org/TR/webdatabase/
Web SQL Database
dialectul SQL suportat trebuie să fie cel oferit de SQLite
Web SQL Database
accesul la baze de date e abstractizat de interfețele
WindowDatabase, WorkerUtilsDatabase, DatabaseCallback
Web SQL Database
în caz de succes, se va crea un obiect de tip:
SQLTransaction (tranzacție asincronă) sau
SQLTransactionSync (tranzacție realizată sincron)
rezultatele întoarse de server în urma execuției
comenzilor SQL se regăsesc într-un obiect SQLResultSet
<script> new Worker ('actualizator.js'); </script>
// deschiderea conexiunii cu baza de datevar server = new WebSocket ('ws://whatwg.org/database'); var db = openDatabase ('demo', '1.0', 'Date demo', 10240);server.onmessage = function (eveniment) { // datele sunt în format "comanda cheie valoare" var date = eveniment.data.split (' '); switch (date[0]) { // inserare a unei valori pe baza cheiicase '+': db.transaction (function (t) {
t.executeSql ('INSERT INTO info (cheie, valoare) VALUES (?, ?)', date[1], date[2]); });
case '-': db.transaction (function (t) { // operația de ștergeret.executeSql ('DELETE FROM info WHERE cheie=? AND valoare=?',
date[1], date[2]); }); }
};un worker ce efectuează operații asupra
unei baze de date existente la nivel de client
exemplu
File API
suită de API-uri pentru manipularea fișierelor
File Blob FileList FileReader
BlobBuilder FileWriter FileSaver
FileSystem
De unde aflu mai multe?
WHATWG – Web Hypertext
Application Technology Working Group
www.whatwg.org
http://diveintohtml5.org/
http://www.html5rocks.com/
http://html5boilerplate.com/
http://html5demos.com/
HTML !
Dr. Sabin Buraga
www.purl.org/net/busaco
mult succes cu
top related