HTML 5

HTML 5
Proiectarea Clientului Web
Student: Constandache Alexandra

Anul IV
Facultatea de Automatica si Calculatoare Iasi
Cuprins
• Scurt istoric HTML
• HTML 5
• Elemente simplificate in HTML5
• Elemente noi in HTML5
• Grafica in HTML5 <CANVAS>
• HTML5 API VIDEO & AUDIO
• Aplicatii offline
• WEB WORKERS
• Compatiblitatea browserelor cu HTML 5
• Ce mai ofera HTML5?
SĂ NE REAMINTIM DE HTML.
HTML sau Hypertext Markup Language este așa cum

sugerează și definiția un limbaj pentru marcare hypertext ce
descrie conținutul şi structura informațiilor într-o pagina web.
Scurt Istoric HTML
• HTML 1.0 şi HTML+ 1990, respectiv 1993.

• HTML 2.0 - 1994, a fost prima versiune standardizată, (49 taguri).
• HTML 3.0 - 1995. Versiunea cuprindea extensii importante, cum ar fi
marcaje pentru notaţii matematice, bannere etc.
• HTML 3.2, - Ianuarie 1997, este considerat ca succesorul versiunii 2.0,
incorporând o serie de taguri din HTML 3.0.
• HTML 4 - Decembrie 1997 extinde HTML cu mecanisme pentru
stylesheets, script-uri, frame-uri, un suport mai mare şi îmbunătăţit
pentru alinierea textului, tabele mai bogate şi îmbunatăţiri ale
formularelor, oferind o accesibilitate mai mare pentru oamenii cu
deficit.
• HTML 4.01 - Decembrie 1999 este o versiune revizuită de HTML4.0 care
corecteaza unele erori si face unele schimbari in privinta modului de
functionare a unor sintaxe.
Scurt Istoric HTML
• Consorţiul Web W3C (World Wide Web Consortium)
deţine controlul asupra specificaţiilor.
• Odata cu dezvoltarea HTML-ului browserele au evoluat
foarte mult insa au aparut si pagini web ce nu respectau
constrangerile si regulile descrise de HTML sau nu
aveau sintaxa corecta.
• In Ianuarie 2000 este introdusa versiune de xHTML 1.0
ce se bazează pe versiunea de HTML 4.0.1.
HTML5
• 2004 Web Hypertext Application Working Group (WHATWG)
au inceput lucrul la noul standard HTML
• 2004 Consortiul W3C se concentrau asupra dezvoltarii XHTML

2.0 desi HTML 4.01 nu mai fusese actualizat inca din 2000.
• 2007 Specificatiile HTML 5 ale WHATWG au fost apoi adoptate

de catre W3C ca punct de start al noului standard HTML.
HTML 5
• HTML5 este ultima versiune HTML si XHTML. Standardul
incearca sa rezolve problemele intalnite in versiunile
anterioare HTML si se adreseaza nevoii de APLICATII WEB, un
domeniu ce nu a fost acoperit de catre HTML pana in acest
moment.
• Desi ultima versiune HTML 5 lansata pe data de 13 Ianuarie
2011 este o „ciorna” (W3C Working Draft), dezvoltatorii
browserelor au inceput sa implementeze parti din
functionalitatile prezente in standardul HTML5.
De ce HTML5?
Numarul utilizatorilor de servicii web devine
Calculatoare performante folosite insuficient din ce in ce mai mare
• Performantele JavaScript.
Avem nevoie de un web
mai puternic!
ELEMENTE SIMPLIFICATE IN HTML5
DOCTYPE
<!DOCTYPE • HTML 5
html <!DOCTYPE html>
PUBLIC "-//W3C//DTD
XHTML 1.0
Transitional//EN„
“http://www.w3.org/TR
/xhtml1/DTD/xhtml1-
transitional.dtd">
Radacina HTML
<html
xmlns=http://www.w3.org/1999/x
• HTML 5
html <html lang="en">
lang="en"
xml:lang="en">
CHARSET
• <meta http-equiv="Content-Type"
content="text/html; charset=utf-
8">
• HTML 5
<meta charset="utf-8">
STYLESHEET
• <link rel="stylesheet" href="style-
original.css" type="text/css" />
• HTML 5
<link rel="stylesheet"
href="style-original.css" />
ELEMENTE NOI IN HTML5
Elementul Base
<head>
<base href=“url” target="_blank" />
</head>
-se introduce adresa de baza.
Elemente semantice de
sectionare
• HTML 4
Elemente semantice de
sectionare
• HTML 5
<HEADER>
HTML 4
<div id="header">
<h1>My Weblog</h1>
<p class="tagline">A lot of effort went into
making this effortless.</p>
</div>
HTML 5
<header>
<h1>My Weblog</h1>
<p class="tagline">A lot of effort went
into making this effortless.</p> …
</header>
<HGROUP>
HTML 4
<h1>My Weblog</h1>
<h2>A lot of effort went into making
this effortless.</h2>
HTML 5
<header>
<hgroup>
<h1>My Weblog</h1> <h2>A lot of effort
went into making this ffortless.</h2>
</hgroup> …
</header>
<FOOTER>
HTML 4
<div id="footer">
<p>§</p> <p>© 2001–9
<a href="#">Mark Pilgrim</a></p>
</div>
HTML 5
<footer>
<p>§</p>
<p>© 2001–9
<a href="#">Mark Pilgrim</a>
</p>
</footer>
<SECTION>
• HTML 5 (sectiune generica de aplicatie sau document)
<section>
<h1>Level 1</h1> <section> <h1>Level 2</h1>
<section> <h1>Level 3</h1> </section>
</section>
<ARTICLE>
HTML 4
<div class="entry">
<p class="post-date">October 22, 2009</p> <h2>
<a href="#" rel="bookmark" title="link to this
post"> Travel day </a> </h2>
</div>
HTML 5
<article>
<header>
<p class="post-date">October 22, 2009</p>
<h1> <a href="#" rel="bookmark" title="link to this
post"> Travel day </a> </h1> </header> …
</article>
<ASIDE>
HTML5
<aside>
<h1>Archives</h1>
<ul>
<li><a href="/2007/09/">September 2007</a></li>
<li><a href="/2007/08/">August 2007</a></li>
<li><a href="/2007/07/">July 2007</a></li>
</ul>
</aside>
<NAV>
HTML 4 HTML 5
<nav>
<div id="nav"> <ul>
<ul> <li><a
<li><a href="#">home</a></li>
<li><a
href="#">home</a></li> href="#">blog</a></li>
<li><a <li><a
href="#">blog</a></li> href="#">gallery</a></
<li><a li>
href="#">gallery</a></li> <li><a
href="#">about</a></li
<li><a >
href="#">about</a></li> </ul>
</ul> </nav>
</div>
<TIME>
• <time datetime="2009-10-22" pubdate>October 22,
2009</time>
• <time datetime="2009-10-22T13:59:47-04:00" pubdate>
October 22, 2009 1:59pm EDT </time>
• <article>
<header>
<time datetime="2009-10-22" pubdate> October 22, 2009 </time>
<h1> <a href="#" rel="bookmark" title="link to this post"> Travel day </a>
</h1>
</header>
<p>Lorem ipsum dolor sit amet…</p>
</article>
Exemple
• Exemplul1.html
a resolution-dependent bitmap canvas which can be used
for rendering graphs, game graphics, or other visual
images on the fly.
GRAFICA IN HTML5 <CANVAS>

<CANVAS>
• Sintaxa:
<canvas id="a" width="300" height="225"></canvas>
• Utilizare cu JavaScript & DOM
var a_canvas = document.getElementById("a");
• Desenare
function draw_b() {
var b_canvas = document.getElementById("b");
var b_context = b_canvas.getContext("2d");//future 3D
b_context.fillRect(50, 25, 150, 100);
}
<CANVAS>
Desenarea in Canvas Context:
Sunt esentiale functiile:
 beginPath()
 closePath()
 stroke()
 fill()
Proprietati:
 fillStyle = (CSS color,pattern,gradient)
 strokeStyle= (CSS color,pattern,gradient)
<CANVAS>
• Alte functii de desenare in canvas context
o Desenare dreptunghiuri
• fillRect(x, y, width, height)
• strokeRect(x, y, width, height)
• clearRect(x, y, width, height)
o Desenare linii
o moveTo(x, y)
o lineTo(x, y)
<CANVAS>
o Desenare arce
• arc(x, y, radius, startAngle, endAngle, anticlockwise)
(pentru cerc startAngle=0, endAngle=Math.pi*2)
• quadraticCurveTo(cp1x, cp1y, x, y)
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
• x,y coordonatele punctului de sfarsit
• cp1x,cp1y, cp2x,cp2y coordonatele primului si celui de al doilea punct de control.
Desenarea de text
o Proprietati context:
 Context.font= {font}
 Context.textAlign={start,end,left,right,center};
 Context.textBaseline={top,hanging,middle,alphabetic,ideographic,bottom};
o Functia de desenare
o Context.fillText(text,x,y);
<CANVAS>
o Crearea unui gradient
• createLinearGradient(x0, y0, x1, y1)
• createRadialGradient(x0, y0, r0, x1, y1, r1)
• Exemple gradient:
1. var my_gradient = context.createLinearGradient(0, 0, 300, 0);
my_gradient.addColorStop(0, "black");
my_gradient.addColorStop(1, "white");
context.fillStyle = my_gradient;
context.fillRect(0, 0, 300, 225);
<CANVAS>

<CANVAS>
o Desenarea de imagini
o drawImage(image, dx, dy)
o drawImage(image, dx, dy, dw, dh)
o drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)
<CANVAS>
• Exemple desenare imagini
1. <img id="cat" src="images/cat.png" alt="sleeping cat"
width="177" height="113">
<canvas id="e" width="177" height="113"></canvas>
<script>
window.onload = function() {
var canvas = document.getElementById("e");
var context = canvas.getContext("2d");
var cat = document.getElementById("cat");
context.drawImage(cat, 0, 0);
}; </script>
2. <canvas id="e" width="177" height="113"></canvas>
<script>
var canvas = document.getElementById("e");
var context = canvas.getContext("2d");
var cat = new Image();
cat.src = "images/cat.png"; cat.onload = function() {
context.drawImage(cat, 0, 0);
}; </script>
<CANVAS>
• Transformari
• Pentru a retine si a prelua starile “panzei” :
• Save();
• Restore();
• Starea panzei=transformari, valorile proprietatilor strokeStyle, fillStyle,
globalAlpha, lineWidth, lineCap, lineJoin, miterLimit, shadowOffsetX,
shadowOffsetY, shadowBlur, shadowColor
• Translatarea: translate(x, y)
<CANVAS>
• Rotatia: rotate(angle)
• Scalarea: scale(x, y)
• Umbre
• Proprietati context:
• ShadowColor
• ShadowOffsetX
• ShadowOffsetY
• ShadowBlur
Exemple <CANVAS>
• http://html5demos.com/canvas-grad [FF]
• First person gifter
http://htmlfive.appspot.com/static/gifter.html [FF]
HTML5 API VIDEO & AUDIO
• Continut media fara plugin
• Multitudine de formate video:
• MPEG4
• FLASH VIDEO
• OGG
• AUDIO VIDEO INTERLACED
• HTML 4:
<video src="video.ogg">
<object data="videoplayer.swf" type="application/x-shockwave-
flash">
<param name="movie" value="video.swf"/>
</object>
</video>
• HTML5
<video src="video.ogg" controls>
Your browser does not support HTML5 video.
</video>
<audio controls src="johann_sebastian_bach_air.ogg">
An audio clip from Johann Sebastian Bach.
</audio> <video width="320" height="240" controls>
<source src="pr6.mp4" type='video/mp4;
• Functii media codecs="avc1.42E01E, mp4a.40.2"'>
<source src="pr6.webm" type='video/webm;
• Load() codecs="vp8, vorbis"'>
<source src="pr6.ogv" type='video/ogg;
• Play() codecs="theora, vorbis"'>
</video>
• Pause()
• canPlayType(type) <audio controls>
<source src="johann_sebastian_bach_air.ogg">
<source src="johann_sebastian_bach_air.mp3">
An audio clip from Johann Sebastian Bach.
</audio>
• Atribute ReadOnly
• Duration
• Paused
• Ended
• startTime
• Error
• currentSrc
• Atribute ce pot fi folosite in Javascript
• Autoplay
• Loop
• currentTime
• Controls
• Volume (0.0-1.0)
• Muted
• Preload
• Atribute legate de format
• Type=formatul containerului (e.g video/mp4);
• Codecs=“video codec, audio codec”.
Exemple audio/video
• Exemple/av
• Player HTML5 al fisierelor audio locale
http://antimatter15.github.com/player/player.html
HTML5 API - GEOLOCATIE
O noua proprietate a obiectului global navigator:
• Navigator.geoLocation
• Detecteaza locatia utilizatorului curent utilizand urmatoarele
informatii:
• -Adresa IP
• -Conexiunile la retele wireless
• -Turnul de comunicatii cu care comunica telefonul
• -hardware GPS
• Exemplu de implementare:
function get_location() {
navigator.geolocation.getCurrentPosition(show_map); }
//determina afisarea unei bare de informatii ce intreaba
utilizatorul daca doreste sa isi dezvaluie locatia sa.
//show_map ->functia de callback
function show_map(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
// let's show a map or do something interesting! }
Exemplu de tratarea a erorilor:
navigator.geolocation.getCurrentPosition( show_map, handle_error)
function handle_error(err)
{ if (err.code == 1) { // user said no! } }
• handle_error este un obiect ce contine urmatoarele proprietati:
• code short an enumerated value
• PERMISSION_DENIED (1)
• POSITION_UNAVAILABLE (2)
• TIMEOUT (3)
• UNKNOWN_ERROR (0)
• message DOMString not intended for end users

Exemplu Geolocatie
• Google Maps
http://htmlfive.appspot.com/static/whereami.html
APLICATII OFFLINE
APLICATII OFFLINE
• O aplicatie web este o lista de URL-uri- HTML,CSS,Javascript, imagini
sau orice alta forma de resursa.
• Homepage-ul unei aplicatii offline ne directioneaza catre aceasta
lista (fisier manifest) ceea ce este doar un fisier text de pe server.
• Un Browser ce implementeaza aplicatii offline HTML5 citeste
aceeasta lista, downloadeaza resursele indicate si le inmagazineaza
local actualizandu-le doar cand este necesar.
• Cand veti accesa aplicatia web fara a avea acces la internet,
browserul web va aduce copiile locale. De asemeni exista in DOM un
flag ce va indica daca sunteti online sau offline.
• var online = navigator.onLine;
• Acest atribut se modifica in timpul evenimentelor online si offline ce
sunt manevrate de obiectul Window.
MANIFESTUL CACHE
• O aplicatie web offline este dependenta de fisierul cache manifest.
• Manifestul CACHE = lista resurselor de care are nevoie aplicatia web cand este
deconectata de la retea.
• Utilizarea fisierului cache manifest
<!DOCTYPE HTML>
<html manifest="/cache.manifest">
<body> ... </body>
</html>
Fisierul manifest se poate regasi oriunde pe server dar trebuie servit clientului avand
Content-Type: text/cache.manifest.
• Exemplu Manifest Cache de pe server:
CACHE MANIFEST
/static/stickies.html
/media/deleteButton.png
/media/deleteButtonPressed.png
/css/stickies.css
/js/stickies.js
Baza de date
• HTML5 asigura un API de baza de date bazat pe SQL pentru a
inmagazina local si structurat datele.
• API-ul interactioneaza cu baza de date in mod asincron ceea
ce asigura faptul ca interfata utilizator nu se va bloca.
Exemplu de implementare
//pentru a crea un obiect baza de date
var db = window.openDatabase("NoteTest", "1.0","Example DB",200000);
function renderNote(row) {
// renders the note somewhere }
function reportError(source, message) {

// report error
}
Baza de date
function renderNotes() {
db.transaction(function(tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS Notes(title TEXT, body TEXT)',
[]);
tx.executeSql(„SELECT * FROM Notes‟, [], function(tx, rs) {
for(var i = 0; i < rs.rows.length; i++) {
renderNote(rs.rows[i]);
}
});
});
}
function insertNote(title, text) {

db.transaction(function(tx) {
tx.executeSql('INSERT INTO Notes VALUES(?, ?)', [ title, text ],
function(tx, rs) {
// …
},
function(tx, error) {
reportError('sql', error.message);
});
});
}
APLICATII OFFLINE
• Pentru depozitarea simpla si sincrona a informatiilor pentru
utilizare offline HTML introduce atributul localStorage al
obiectului Windows.
localStorage["status"] = "Idling.";
EXEMPLU APLICATII OFFLINE
• Sticky notes
http://htmlfive.appspot.com/static/stickies.html
• [Google Chrome 10]
NU VOI BLOCA BROWSERUL CU JAVASCRIPT!

WEB WORKERS
WEB WORKERS
• Javascript ruleaza pe acelasi fir de executie cu browserul ceea ce poate face ca acesta din
urma sa nu mai poata raspunde la comenzile utilizatorului.
• „Muncitorii” Web definesc un API ce ruleaza scripturile in background.
• ! „muncitorii” trebuie sa se afle intr-un script extern.
• Exemplu de implementare
<script>
var worker = new Worker('worker.js');
worker.onmessage = function (event) {
console.log('Results: ' + event.data);
};
</script>
Muncitorii:
function findPrimes() {
// ... prime algorithm here
postMessage(nextPrime);
}
findPrimes();
EXEMPLU WEB WORKERS
• http://htmlfive.appspot.com/static/tracker1.html Motion tracker
• http://htmlfive.appspot.com/static/primes-good.html Good Primes
• http://htmlfive.appspot.com/static/primes-bad.html Bad Primes
Compatiblitatea browserelor
Ce mai ofera HTML5?
• Trasaturi noi formularelor (validare la nivelul clientului, date
pickers, sliders)
• Socket-uri Web
• Web storage
• Alte tag-uri noi
• Manipularea istoricului browserului
• Drag and Drop
Compatibilitatea browserelor
http://www.findmebyip.com/litmus/
Concluzii
• HTML5 stie unde te afli, stie ce scrii, unde esti si unde ai fost.
• HTML5 este viitorul si desi inca nu a ajuns la un stadiu final (se
preconizeaza ca in jurul anului 2022) el poate fi implementat si
utilizat in cadrul browserelor moderne.
Bibliografie
• Pro HTML5 Programming - Powerful APIs for Richer Internet
Application Development (Peter Lubbers, Brian Albers and
Frank Salim)
• Introduction cu HTML5 (Brad Neuberg)
• W3C HTML 5 Working Draft
• Dive into HTML5 (Mark Pilgrim)

HTML 5

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

HTML 5

Enviado por

Direitos autorais:

Formatos disponíveis

HTML 5

Proiectarea Clientului Web

Student: Constandache Alexandra

HTML sau Hypertext Markup Language este așa cum

• HTML 1.0 şi HTML+ 1990, respectiv 1993.

• 2004 Consortiul W3C se concentrau asupra dezvoltarii XHTML

• 2007 Specificatiile HTML 5 ale WHATWG au fost apoi adoptate

GRAFICA IN HTML5 <CANVAS>

3. var my_gradient = context.createLinearGradient(0, 0, 300, 225);

• message DOMString not intended for end users

function reportError(source, message) {

function insertNote(title, text) {

NU VOI BLOCA BROWSERUL CU JAVASCRIPT!

Você também pode gostar