Sunteți pe pagina 1din 23

Curs HTML5 Cuprins

1. Introducere
Exemplu:
Code: (Select All)
<!DOCTYPE HTML>
<html>
<body>
<video width="320" height="240" controls="controls">
<source src="film.ogg" type="video/ogg" />
<source src="film.mp4" type="video/mp4" />
<source src="film.webm" type="video/webm" />
Browserul dvs nu suporta tag-ul video.
</video>
</body>
</html>
Ce este HTML5?
HTML5 reprezinta noul standard pentru HTML, XHTML si HTML DOM. Versiunea curenta a HTML (versiunea 4)
a aparut in 1999. De atunci insa web-ul s-a schimbat mult. Tocmai de aceea se impunea aparitia unui nou standard.
Inca se lucreaza la acest standard dar multe browsere (Firefox, Chrome, Opera) au deja suport pentru HTML5.
Cum a aparut HTML5?
La realizarea acestui nou standard au cooperat W3C (World Wide Web Consortium) si WHATWG (Web
Hypertext Application Technology Working Group). WHATWG s-a ocupat de forumularele si aplicatiile web iar
W3C de XHTML 2.0. In anul 2006 cele 2 grupuri s-au decis sa colaboreze si sa realizeze impreuna noul standard
HTML.
S-au stabilit cateva reguli noi:
- noile caracteristici trebuie sa se bazeze pe HTML, CSS, DOM si JavaScript
- se reduce nevoia unor pluginuri externe (cum ar fi Flash)
- manipularea mai usoara a erorilor
- utilizarea marcajelor pentru a inlocui scriptingul
- HTML5 trebuie sa fie independent de dispozitiv (device)
- procesul de dezvoltare trebuie sa fie deschis publicului.
Cateva din caracteristicile noi pe care le are HTML5:
- elementul canvas pentru desen
- elementele video si audio pentru redare fisiere media
- suport mai bun pentru gazduirea offline locala
- elemente noi pentru continut: article, footer, header, nav, section
- controale noi pentru formulare: calendar, date, time, email, url, search
<!DOCTYPE> pentru HTML5
In HTML5 avem o singura declaratie de tip <!DOCTYPE>.
<!DOCTYPE html>
Document HTML5 minim
Mai jos aveti exemplificat un document HTML5 simplu, cu minimul de tag-uri necesare.

Exemplu:
<!DOCTYPE html>
<html>
<head>
<title>Titlul documentului</title>
</head>
<body>Continutul documentului...</body>
</html>
Suport in browsere
HTML5 nu este momentan standardul oficial HTML iar browserele nu au suport total pentru acesta. Totusi, cei care
realizeaza cele mai cunoscute browsere (Firefox, Chrome, Oprea, Safar, Internet Explorer) continua sa adauge
carcatersitici menite sa suporte noul standard.

2. Elemente noi in HTML5


Deoarece internetul s-a schimbat mult de la aparitia standardului HTML 4.01 (in 1999) multe din elementele acestuia
nu sunt folosite la realizarea unor pagini web sau nu sunt folosite pentru ce au fost ele gandite. Aceste elemente au fost
eliminate sau rescrise in noul standard HTML. Pe langa asta, datorita nevoilor impuse, s-au creat elemente noi menite
sa faciliteze realizarea paginilor web.

2.1 Elemente Semantice/Structurale noi


Mai jos aveti o lista cu elemente noi de marcaj introduse in HTML5
<article> - pentru continut externt (stiri, blog, forum)
<aside> - pentru continut deoparte fata de continutul in care este plasat. Continutul "aside" trebuie sa fie legat de
continutul inconjurator.
<bdi> - Izoleaza o parte din text ce poate fi formatata intr-o directie diferita fata de textul din afara
<command> - buton, buton radio, caseta (checkbox)
<details> - pentru a descrie detaliile unui document sau unei parti dintr-un document
<summary> - legenda sau sumar (in interiorul elementului "details")
<figure> - specifica continutul independent, ca ilustratiile, diagramele, fotografiile, listari de cod, etc.
<figcaption> - legenda unei figuri
<footer> - pentru sfarsitul unui document sau sectiune. Poate include numele autorului, data documentului, informatii
de contact sau de copyright
<header> - pentru introducerea intr-un document sau sectiune. Poate include navigare.
<hgroup> - o sectiune de rubrici (headings) de la <h1> la <h6>, unde cea mai mare este rubrica principala iar celelalte
sunt sub-rubrici
<mark> - marcarea unui text (highlight)
<meter> - pentru masuri (doar daca se cunosc valorile minima si maxima)
<nav> - sectiune de navigare
<progress> - starea unei lucrari in progres
<ruby> - pentru notatii ruby (note sau caractere chinezesti)
<rt> - pentru explicarea notatiei elementului ruby
<rp> - ca sa arate browserelor care nu suporta elementul ruby
<section> - sectiune in document (cepitol, header, footer)
<time> - pentru definire timp, data sau amandoua
<wbr> - pauza intre cuvinte. Pentru definirea unei oportunitati de "line-break"

2.2 Elemente media noi

Aceste elemente elimina utilizarea unor pluginuri externe cum ar fi Flash.


<audio> - pentru continut audio
<video> - pentru continut video
<source> - pentru elemente media definite in elemente audio sau video
<embed> - pentru continut incroporat (cum ar fi un plug-in)
<track> - defineste textul pieselor pentru <video> si <audio>

2.3 Elementul canvas


Utilizeaza JavaScript pentru a realiza desene intr-o pagina web.
<canvas> - pentru a realiza elemente grafice cu un script

2.4 Elemente noi pentru formulare


HTML5 introduce elemente noi pentru formulare menite sa imbunatateasca functionalitatea acestora.
<datalist> - o lista cu optiuni pentru valori de intrare
<keygen> - genereaza chei pentru autentificarea utilizatorilor
<output> - pentru diferite tipuri de iesiri cum ar fi iesirile scrise de un script

2.4.1 Valori noi pentru atributele de intrare


tel - numar de telefon
search cautare
url link
email email
datetime - data si/sau timp
date data
month luna
week saptamana
time timp
datetime-local - data/timp local
number numar
range - un numar dintr-o gama
color - culoare in format hexazecimal (#FF0000)

2.5 Elemente retrase


Urmatoarele elemente HTML 4.01 au fost retrase in HTML5:
<acronym>
<applet>
<basefont>
<big>
<center>
<dir>
<font>
<frame>
<frameset>
<noframes>
<strike>
<tt>

3. HTML5 Video
Pana la aparitia HTML5 nu exista un standard pentru redarea fisierelor video intr-o pagina web, fisierele fiind
publicate cu ajutorul unui plugin (cum ar fi flash). Necesitatea realizarii unui standard a aparut datorita faptului ca
browserele nu utilizeaza aceleasi pluginuri pentru redarea fisierelor video. Ca sa intelegeti mai bine trebuie sa va
ganditi de cate ori ati fost nevoiti sa utilizati un alt browser pentru ca cel pe care il foloseati nu avea suport pentru
redarea fisierelor video dintr-o anumita pagina sau de cate ori nu a trebui sa instalati in browser un plug-in nou pentru a
putea vedea aceste fisiere video.
HTML5 rezolva aceste probleme prin introducerea unui standard video.

3.1 Suport in browsere

Internet Explorer 9, Firefox, Opera, Chrome si Safari suporta elementul <video>.


Nota: Interenet Explorer 8 si versiunile mai vechi nu suporta elementul <video>.

3.2 Formate video si suportul in browsere


In acest moment sunt suportate 3 formate video

- Ogg - fisiere Ogg cu codec video Theora si codec audio Vorbis


- MP4 - fisiere MPEG4 cu codec video H.264 si codec audio AAC
- WebM - fisiere WebM cu codec video VP8 si codec audio Vorbis

3.3 Cum functioneaza


Pentru a reda un fisier video in HTML5 aveti nevoie de codul de mai jos:
<video src="film.ogg" controls="controls">
</video>

Nota: Atributul "controls" este folosit pentru a adauga la fisierul video controale (play, pause, volume).
Este recomandat sa includeti si atributele width (latime) si height (inaltime) pentru ca spatiul necesar fisierului video sa
fie rezervat cand se incarca pagina. In caz contrar, aspectul paginii se va modifica in momentul incarcarii acesteia.
Insearam continutul intre tag-urile <video> si </video>.
<video src="flim.ogg" width="320" height="240" controls="controls">
Browserul dvs nu suporta tag-ul video.
</video>
Exemplu de mai sus foloseste un fisier Ogg si va functiona in Opera, Chrome si Firefox. Pentru a functiona in Safari si
versiunile viitoare de Chrome trebuie sa adaugam un fisier MPEG4 si unul WebM.

Una din caracteristicile speciale ale tag-ului video este acela ca suporta mai multe surse ce faca legatura catre fisiere
video in formate diferite. Browserul va reda primul format recunoscut.
<video width="320" height="240" controls="controls">
<source src="film.ogg" type="video/ogg" />
<source src="film.mp4" type="video/mp4" />
<source src="film.webm" type="video/webm" />
Browserul dvs nu suporta tag-ul video.
</video>

3.4 Tag-urile HTML5 Video <video>


Tag

Descriere

<video> Defineste un fisier video


<source> Defineste resurse media multiple pentru elemente media cum ar fi <video> si
<audio>
<track>

Defineste textul pieselor in playerele media

3.4.1 Atributele tag-ului <video>


Aveti in imaginea de mai jos atributele suportate in HTML 5 pentru tag-ul <video>.

3.5 HTML5 Video + DOM


Elementul HTML5 <video> are deasemenea metode (methods), propietati (properties) si evenimente (events). Spre
exemplu, exista metode pentru pornire (playing), pauza (pausing) si incarcare (loading). Sunt propietati (ex: durata,
volum, cautare) pe care le putem citi sau seta. Exista desemenea evenimente DOM ce ne pot notifica, spre exemplu,
cand elementul <video> porneste, face pauza sau se opreste etc.
Exemplul urmator ilustreaza, intr-un mod simplu, cum sa adresam un element <video>, cum sa citim si sa stabilim
propietatile, si metodele de apelare.

3.5.1 HTML5 <video> - Metode (Methods), Propietati (Properties) si Evenimente (Events)


In tabelul de mai jos aveti afisate metode video, propietati si evenimente suportate de majoritatea browserelor.

Nota: Dintre proprietatile video, doar videoWidth si videoHeight sunt disponibile imediat. Celelalte propietati sunt
disponibile dupa ce sunt incarcate metadatele fisierului video.

4. HTML audio
4.1 Formate audio si suportul in browsere
HTML5 prevede un standard pentru fisierele audio. Pana la aparitia HTML5 nu exista un standard pentru rederarea
fisierelor audio intr-o pagina web. Astazi, majoritatea fisierelor audio sunt redate printr-un plugin (cum ar fi flash). Insa
nu toate browserele au aceleasi pluginuri. HTML5 specifica un mod standard de a include fisierele audio cu ajutorul
elementului audio. Acest element poate reda fisiere de sunet sau stream audio.
In acest moment sunt suportate 3 formate pentru elementul audio:

4.2 Cum functioneaza?


Pentru a reda un fisier audio in HTML5 tot ce trebuie sa scrieti este:
<audio src="song.ogg" controls="controls">
</audio>
Atributul control adauga butoanele de control "play" (redare), "pause" (pauza) si "volume" (volum).
Continutul se insereaza intre tag-urile <audio> si </audio> pentru browserele care nu suporta elementul audio:
Exemplu:
<audio src="song.ogg" controls="controls">

Browserul dumneavoastra nu suporta acest element.


</audio>
Exemplul anterior foloseste un fisier Ogg si va functiona in Firefox, Opera si Chrome. Pentru ca fisierul audio sa fie
redat si in Internet Explorer si Safari, formatul fisierului trebuie sa fie MP3. Elementul audio permite sa utilizati mai
multe elemente sursa. Elementele sursa pot sa aiba legatura catre fisiere audio diferite. Browserul va folosi primul
format recunoscut.
Exemplu:
<audio controls="controls">
<source src="song.ogg" type="audio/ogg" />
<source src="song.mp3" type="audio/mpeg" />
Browserul dumneavoastra nu suporta acest element.
</audio>

4.3 Tag-urile HTML5 Audio


Tag

Descriere

<audio> Defineste continut audio


<source> Defineste resurse media multiple pentru elemente media cum ar fi <video> si
<audio>

4.3.1 Atributele tag-ului <audio>

5. HTML5 Drag and Drop


Drag and drop (prinde si lasa) este o propietate frecventa ce ne permite sa mutam prin tragere un obiect, dintr-o locatie
in alta.
Drag and drop face parte din standardul HTML5, orice element putand fi tras dintr-un loc in altul.

5.1 Suport in browsere

Internet Explorer 9, Firefox, Chrome si Safari 5 suporta drag and drop.


Nota: Drag and drop nu este suportat in Safari 5.1.2.

5.2 Exemple Drag and Drop in HTML5


Mai jos aveti un exemplu simplu de drag and drop.
Exemplu:
<!DOCTYPE HTML>
<html><head><script type="text/javascript">
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev)
{
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
ev.preventDefault();
}
</script></head>
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img id="drag1" src="imagini/codebox_html5.jpg" draggable="true" ondragstart="drag(event)" width="336" height="69" />
</body></html>

5.3 Cum faci un element sa poate fi tras (Draggable)


Inainte de toate trebuie sa setam valoarea "true" atributului draggable al elementului.
<img draggable="true" />
Apoi va trebui sa specificam ce se va intampla cand elementul este prins (dragged). In exemplul anterior, atributul
ondragstart apeleaza o functie, drag(event), care specfica data ce va fi trasa.
Metoda dataTransfer.setData() stabileste tipul si valoarea acestei datei.
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
In acest caz, tipul datei este "Text" si valoarea este id-ul elementului prins ("drag1"). Urmatorul pas este sa vedem unde
va fi lasat elementul prins.
Evenimentul ondragover specifica unde va fi lasata (dropped) data prinsa. In mod implicit, datele/elementele nu pot fi
trase in alte elemente. Pentru a permite o tragere trebuie sa prevenim manipularea implicita a elementului.Acest lucru
este posibil prin apelarea metodei event.preventDefault() pentru evenimentul ondragover:
event.preventDefault()
In final, trebuie sa plasam elementul prins. Cand datele prinse sunt lasate, are loc un eveniment de aruncare. In
exemplul anterior, atributul ondrop apeleaza functia drop(event).
function drop(ev)
{
var data=ev.dataTransfer.getData("Text");

ev.target.appendChild(document.getElementById(data));
ev.preventDefault();
}
Explicarea codului:
- preia data prinsa cu metoda dataTransfer.getData("Text"). Aceasta metoda va returna orice data care are acelasi tip in
metoda setData().
- data prinsa este id-ul elementului prins ("drag1")
- se transforma elementul prins in element lasat
- se apeleaza preventDefault() pentru a preveni manipularea implicita a datei de catre browser
Alte exemple: Trage o imagine inainte si inapoi - in acest exemplu este prezentat modul in care puteti muta o imagina
inainte si inapoi intre doua elemente <div>.

6. HTML5 Canvas (Panza)


Elementul canvas este utilizat pentru a desena intr-o pagina web.

Ce este canvas (Panza)?


Elementul HTML5 canvas utilizeaza JavaScript pentru a desena elemente grafice intr-o pagina web. Canvas-ul
(Panza) este o zona dreptunghiulara in care puteti controla fiecare pixel. Elementul canvas are diferite metode pentru a
desena traiectorii (paths), casute (boxes), cercuri (circles), caractere (characters) si pentru a adauga imagini.
Surportul in browsere

Cum cream un element canvas


Pentru a adauga un element canvas la o pagina HTML5 trebuie sa specificam id-ul, latimea si inaltimea elementului:
<canvas id="primulcanvas" width="200" height="100"></canvas>
Dupa acest pas desenam canvas-ul cu ajutorul J
<script type="text/javascript">
var c=document.getElementById("primulcanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>
JavaScript utilizeaza id-ul pentru a gasi elementul canvas:
var c=document.getElementById("primulcanvas");
Apoi creaza un obiect de context:
var cxt=c.getContext("2d");
Obiectul getContext("2d") este un element HTML5 construit, cu numeroase metode pentru desenarea traiectoriilor,
casutelor, cercurilor, caracterelor, imaginilor etc.

Urmatoarele doua linii deseneaza un dreptunghi rosu:


cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
Metoda fillStyle adauga culoarea rosie iar metoda fillRect specifica forma, pozitia si dimensiunea.

6.1 Intelegerea coordonatelor


Metoda fillRect de mai sus are parametrii (0,0,150,75). Asta inseamna ca: se deseneaza un dreptungi de 150x75
(150,75) in canvas, incepand de la coltul din stanga, sus (0,0). Coordonatele X si Y sunt folosite pentru a pozitiona
desenela in canvas.

6.2 Exemple de canvas-uri


a) Linie
Deseneaza o linie specficiand de unde sa porneasca si unde sa se opreasca.

b) Cerc
Deseneaza un cerc specificand dimensiunea, culoarea si pozitia.

c) Gradient
Deseneaza un gradient cu culorile specificate.

d) Imagine
Pune o imagine in canvas.

7. HTML5 Inline SVG


HTML5 ofera suport pentru Inline SVG

7.1 Ce este SVG?


SVG = Scalable Vector Graphics
SVG - este folosit pentru a defini elemente grafice bazate pe vectori pt. Web
SVG - defineste elemente grafice in format XML
SVG - elementele grafice SVG nu isi pierd din calitate cand facem zoom pe ele sau cand le redimensionam
SVG - orice element si orice atribut poate fi animat in fisiere SVG
SVG - este o recomandare W3C

7.2 Avantajele SVG


Avantajele utilizari SVG in locul altor formate (ca JPEG sau GIF) sunt:
1. Imaginile SVG pot fi create si editate cu orice editor text
2. Imaginile SVG pot fi cautate, indexate, scriptate si comprimate
3. Imaginile SVG pot fi scalate
4. Imaginile SVG pot fi printate cu o calitate inalta la orice rezolutie
5. Imaginile SVG pot fi marite (zoom) fara ca imaginea sa isi piarda din calitate

7.3 Suport in browsere

Internet Explorer 9, Firefox, Opera, Chrome si Safari suporta inline SVG.

7.4 Includerea SVG direct in paginile HTML


In HTML putem include elemente SVG direct in pagina HTML.

Exemplu:
<!DOCTYPE html>
<html><body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
<polygon points="100,10 40,180 190,60 10,60 160,180"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" /></svg>
</body></html>

Rezultat:

Mai multe detalii legate de SVG in cursul XML.

8. Canvas vs. SVG


SVG si canvas va permit sa creati elemente grafice in browser, dar acestea sunt fundamental diferite.
SVG
SVG este un limbaj folosit pentru descrierea elementelor grafice 2D in XML. SVG se bazeaza pe XML, ceea ce
inseamna ca fiecare element este disponibil in cadrul DOM SVG. Putem atasa agenti de evenimente JavaScript pentru
un element. In SVG, fiecare forma desenata este prezentata ca un obiect. Daca atributele unui obiect SVG sunt
modificate, browser-ul va reincarca forma.
Canvas
Canvas-ul desneaza instantaneu elemente grafice 2D cu ajutorul JavaScript. Canvas-urile sunt redate (incarcate) pixel
cu pixel. Elementele grafice desenate cu canvas raman nemodificate de catre browser. Daca va trebui sa modificam
pozitia, intreaga scena trebuie redesenata, incluzand si obiectele care sunt acoperite de elementul grafic.
Comparatie intre Canvas si SVG
Tabelul urmator prezinta cele mai importante diferente dintre canvas si SVG.
Canvas
SVG

dependent de rezolutie
nu suporta agenti de evenimente
capabilitati reduse pentru redarea textului
imaginea poate fi salvata ca .png sau .jpg
potrivit pentru cazurile in care obiectele
sunt redesenate frecvent

9 HTML Geolocalizare (Geolocation)

9.1 Introducere

independent de rezolutie
suporta agenti de evenimente
potrivit pentru cazurile in care trebuie redate suprafete
mari (Google Maps)
redare cu viteza mica in cazul unor elemente complexe
(orice va folosi DOM va fi incet)
nu este potrivit pentru aplicatii de jocuri

API-ul Geolocalizare (Geolocation) oferit de HTML5 ne da posibilitatea de a afla pozitia geografica a unui vizitator.
Aceasta optiune poate fi folosita doar daca vizitatorul accepta localizarea pozitiei sale (datorita confidentialitatii
utilizatorilor).

9.2 Suport in browsere

Internet Explorer 9, Firefox, Chrome, Safari si Opera suporta Geolocation.


Nota: API-ul Geolocation este mai precis in cazul dispozitivelor prevazute cu GPS (ca iPhone).

9.3 Utilizarea Golocation


Folosim metoda getCurrentPosition() pentru a obtine pozitia utilizatorului.
Mai jos aveti un exemplu simplu de geolocalizare care returneaza latitudinea si longitudinea pozitiei utilizatorului.
Exemplu:
<script>
var x=document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition);
}
else{x.innerHTML="Geolocation is not supported by this browser.";}
}
function showPosition(position)
{
x.innerHTML="Latitudine: " + position.coords.latitude +
"<br />Longitudine: " + position.coords.longitude;
}
</script>
Explicatii:
Se verifica daca browserul suporta Geolocation. Daca suporta API-ul atunci se executa metoda getCurrentPosition().
Daca nu, se afiseaza un mesaj de eroare. Daca metoda getCurrentPosition() este executata cu succes, se afiseaza un
obiect de coordonate pentru functia specificata in parametru ( showPosition ).
Functia showPosition() preia afisarea Latitudinii si Longitudinii.
Exemplul de mai sus este unul simplu, fara manipularea erorilor.

9.3.1 Mainipularea erorilor si refuzurilor


Al doilea parametru al metodei getCurrentPosition() este folosit pentru a manipula erorile. Specifica o functie ce va fi
executata in cazul in care nu se poate determina pozitia vizitatorului.
Exemplu:
function showError(error)
{
switch(error.code)
{
case error.PERMISSION_DENIED:
x.innerHTML="Utilizatorul a respins cererea pentru Geolocalizare."

break;
case error.POSITION_UNAVAILABLE:
x.innerHTML="Nu sunt disponibile informatii despre Locatie."
break;
case error.TIMEOUT:
x.innerHTML="Cererea pentru aflarea locatiei utilizatorului a expirat."
break;
case error.UNKNOWN_ERROR:
x.innerHTML="A aparut o eroare necunoscuta."
break;
}
}
Coduri de eroare:
Permisiune respinsa (Permission denied) - utilizatorul nu permite Geolocalizarea
Pozitie indisponibila (Position unavailable) - nu este posibila localizarea
A expirat (Timeout) - operatiunea a expirat

9.4 Afisarea rezultatelor pe harta


Pentru a afisa rezultatul intr-o harta trebuie sa accesam un serviciu de harti ce poate folosi latitudinea si longitudinea.
Cel mai recomandat este Google Maps.
Exemplu:
function showPosition(position)
{ var latlon=position.coords.latitude+","+position.coords.longitude;
var img_url=http://maps.googleapis.com/maps/api/staticmap?center=
+latlon+"&zoom=14&size=400x300&sensor=false";
document.getElementById("mapholder").innerHTML="<img src='"+img_url+"' />";
}
In exemplul anterior am utilizat latitudinea si longitudinea pentru a arata locatia intr-o harta Google (utilizand o
imagine statica).

9.4.1 Scriptul Google Map


In acest exemplu vom arata cum putem folosi scriptul Google Map pentru a crea o harta interactiva (cu marcaj, zoom si
optiuni de tragere).
Exemplu:
function showPosition(position)
{
lat=position.coords.latitude;
lon=position.coords.longitude;
latlon=new google.maps.LatLng(lat, lon)
mapholder=document.getElementById('mapholder')
mapholder.style.height='250px';
mapholder.style.width='500px';
var myOptions={
center:latlon,zoom:14,
mapTypeId:google.maps.MapTypeId.ROADMAP,
mapTypeControl:false,
navigationControlOptions:{style:google.maps.NavigationControlStyle.SMALL}

};
var map=new google.maps.Map(document.getElementById("mapholder"),myOptions);
var marker=new google.maps.Marker({position:latlon,map:map,title:"You are here!"});
}

9.5 Informatii specifice locatiei


Mai sus am prezentat exemple despre modul in care se poate determina pozitia unui utilizator pe o harta.
Geolocalizarea poate fi desemenea folosita pentru a obtine informatii specifice locatiei.
Exemple:
- Informatii locale la zi
- Afisarea unor puncte de interes in apropierea utilizatorului
- Navigatie GPS

9.6 Metoda getCurrentPosition() - Date de iesire


Metoda getCurrentPosition() returneaza un obiect daca este executata cu succes. Propietatile atitudine, longitudine si
precizie sunt intotdeauna returnate. Celelalte propietati, specificate in tabelul de mai jos, sunt returnate daca sunt
disponibile.
Propietate

Descriere

coords.latitude

Latitudinea ca numar zecimal

coords.longitude

Longitudinea ca numar zecimal

coords.accuracy

Precizia unei pozitii

coords.altitude

Altitudinea in metrii (desupra nivelului marii)

coords.altitudeAccuracy Precizia altitudinii unei pozitii


coords.heading

Pozitia in grade, masurata in sensul acelor de ceas, de la Nord

coords.speed

Viteza in metrii pe secunda

timestamp

Data/timpul raspunsului

9.7 Obiectul Geolocation - alte metode interesante


watchPosition() - returneaza pozitia curenta a utilizatorului si continua sa actualizeze aceasta pozitie pe masura ca
utilizatorul se misca (ca GPS-ul intr-o masina).
clearWatch() - opreste metoda watchPosition().
In exemplul urmator prezentam metoda watchPosition(). Aveti nevoie de un dispozitiv GPS precis pentru a testa
aceasta metoda (spre exemplu un iPhone).
Exemplu.
<script>
var x=document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.watchPosition(showPosition);

}
else{x.innerHTML="Browserul dvs. nu suporta Geolocation.";}
}
function showPosition(position)
{
x.innerHTML="Latitudine: " + position.coords.latitude +
"<br />Longitudine: " + position.coords.longitude;
}
</script>
10 HTML5 Stocare Web (Web Storage)
Stocarea datelor la client
Cu HTML5, paginile web pot stoca date local, in browserul utilizatorului.
HTML5 ofera 2 obiecte noi pentru stocarea de date la client:
- localStorage - stocarea datelor fara limita de timp
- sessionStorage - stocarea datelor pentru o sesiune
Pana acum acest lucru era posibil prin cookies dar in cazul unei cantitati mari de date, datorita faptului ca acestea sunt
transmise la fiecare cerere catre server, se micsoreaza mult viteza de accesare a unui site.
In HTML5 datele nu mai sunt trecute la fiecare cerere catre server ci sunt folosite doar atunci cand e necesar acest
lucru. Astfel se poate stoca o mare cantitate de date fara a afecta performantele serverului.
Datele sunt stocate in zone diferite pentru site-uri diferite si un site poate accesa doar datele stocate de el. HTML5
foloseste JavaScript pentru a stoca si accesa datele.
10.1 Obiectul localStorage
Acest obiect stocheaza datele fara limita de timp, ele fiind disponibile oricand.
Cum se creeaza si se acceseaza un obiect localStorage:
PHP Code
<script type="text/javascript">
localStorage.lastname="Smith";
document.write(localStorage.lastname);
</script>
In exemplul urmator numaram de cate ori este accesata o pagina:
PHP Code
<script type="text/javascript">
if (localStorage.pagecount)
{
localStorage.pagecount=Number(localStorage.pagecount) +1;

}
Else
{ localStorage.pagecount=1; }
document.write("Pagina vizitata de "+ localStorage.pagecount + " ori.");

</script>
10.1 Obiectul sessionStorage
Retine datele pentru o sesiune. Cand utilizatorul inchide browserul datele sunt sterse. Cum cream si accesam
sessionStorage:
PHP Code
<script type="text/javascript">
sessionStorage.lastname="Cristian";
document.write(sessionStorage.lastname);
</script>
In exemplul urmator numaram de cate ori este accesata o pagina intr-o sesiune
PHP Code

<script type="text/javascript">
if (sessionStorage.pagecount)
{
sessionStorage.pagecount=Number(sessionStorage.pagecount) +1;

}
else

{
sessionStorage.pagecount=1;

}
document.write("Vizite "+sessionStorage.pagecount+" in aceasta sesiune.");
</script>
11. HTML5 App Cache
11.1 Ce este Application Cache
HTML5 introduce application cache, ceea ce inseamna ca o aplicatie web este cache-uita, fiind ulterior accesibila fara
o conexiune la internet.
Cache-uirea aplicatiilor ofera trei avantaje unei aplicatii:
1. Navigare offline - utilizatorii pot folosi aplicatia chiar daca sunt offline
2. Viteza - resursele cache-uite de incarca mai repede
3. Incarcare redusa a serverului - browserul va descarca doar resursele actualizate/modificate de pe server
11.2 Exemplu HTML5 Manifest Cache
Exemplul urmator arata un document HTML cu cache manifest (pentru navigare offline).
Exemplu:
<!DOCTYPE HTML>
<html manifest="demo.appcache">
<body>
Continutul documentului...</body>
</html>
11.3 Notiuni de baza Cache Manifest
Pentru a activa application cache trebuie sa includem atributul manifest in tag-ul <html> al documnetului.
Exemplu:
<!DOCTYPE HTML>
<html manifest="demo.appcache">...
</html>
Orice pagina ce are atributul manifest specificat va fi cache-uita in momentul in care este vizitata. Daca atributul
manifest nu este specificat, pagina nu va fi cache-uita (cu exceptia cazului in care pagina este specificata direct in
fisierul manifest).
Extensia recomandata pentru fisierul manifest este: ".appcache". Un fisier manfifest trebuie servit cu tipul MIME
corect care este "text/cache-manifest" si trebuie sa fie configurat pe serverul de web.
11.4 Fisierul Manifest
Fisierul manifest este de tip text si este folosit pentru a spune browserului ce trebuie cache-uit (si ce nu trebuie
niciodata sa fie cache-uit).
Fisierul manifest are trei sectiuni:
1. CACHE MANIFEST - fisierele listate sub acest header vor fi cache-uite dupar ce sunt descarcate pentru prima data
2. NETWORK - fisierele listate sub acest header necesita o conexiune la server si nu vor fi niciodata cache-uite
3. FALLBACK - fisierele listate sub acest header specifica pagini de rezerva in cazul in care o pagina nu este
accesibila
11.4.1 CACHE MANIFEST
Prima sectiune (CACHE MANIFEST) este obligatorie.
Exemplu:
CACHE MANIFEST
/tema.css
/logo.gif

/main.js
11.4.2 NETWORK
Sectiunea NETWORK de mai jos specifica ca fisierul "login.php" nu va fi niciodata cache-uit si nu va fi disponibil
offline.
Exemplu:
NETWORK:
login.php
Daca folosim asterisk (*), toate resursele/fisierele vor necesita o conexiune la internet.
Exemplu:
NETWORK:
*
11.4.3 FALLBACK
Sectiunea FALLBACK de mai jos specifica ca fisierul "offline.html" va fi servit pentru toate fisierele din folderul
/html5/ in cazul in care nu se poate stabili o conexiune la internet.
Exemplu:
/html5/ /offline.html
Nota: Primul URI (uniform resource identifier) este resursa, iar cel de-al doilea este rezerva (fallback).
11.5 Actualizarea cache-ului
Odata ce o aplicatie este cache-uita, e ramane cache-uita panga cand una din urmatoarele actiuni se petrece:
1. Utilizatorul sterge cache-ul browserului
2. Fisierul manifest este modificat (vezi nota mai jos)
3. Cache-ul aplicatiei este actualizat prin programare
Exemplu:
CACHE MANIFEST
# 2012-02-21 v1.0.0
/tema.css
/logo.gif
/main.js
NETWORK:
login.php
FALLBACK:
/html5/ /offline.html
Nota: Liniile care incep cu "#" reprezinta comentarii dar mai au si un alt scop. Cache-ul unei aplicatii este actualizat
cand fisierul manifest se schimba. Daca editati o imagine sau daca modificati o functie JavaScript, aceste operatii nu
vor fi re-cache-uite. Actualizarea datei si versiunii in linia de comentariu este o cale de a face browser-ul sa re-cacheuiasca fisirele.
11.6 Observatii cu privire la Application Cache
Aveti grija la ce cache-uiti.
Odata ce un fisier este cache-uit, browser-ul va continua sa afiseze versiunea cache-uita, chiar daca fisierul de pe server
este mofificat. Pentru a va asigura ca browserul actualizeaza cache-ul, va trebui sa modificati fisierul manifest.
Nota: browserele au limite diferite pentru volumul de date pe care pot sa il cache-uiasaca (unele browsere au 5MB
limita pentru fiecare site).
14 Formularele HTML5

14.1 Tipuri de input


HTML5 introduce noi tipuri de input pentru formulare.
In acest curs vom discuta despre:
- email
- url
- number
- range
- Date pickers (date, month, week, time, datetime, datetime-local)
- search
- color
Suport in browsere:

Nota: cel mai bun suport pentru aceste tipuri noi inputuri este oferit de Opera.
14.1.1 Tip input email
Folosit pentru introducerea si validarea datelor de tip email.
Exemplu:
E-mail: <input type="email" name="user_email" />
14.1.2 Tip input url
Folosit pentru introducerea si validarea datelor de tip adresa URL.
Exemplu:
Homepage: <input type="url" name="user_url" />
14.1.3 Tip input number
Folosit pentru introducerea si validarea datelor de tip numeric. Se pot inpune restrictii cu privire la numerele acceptate
in input.
Exemplu:
Puncte: <input type="number" name="points" min="1" max="10" />
Puteti folosi urmatoarele atribute pentru a adauga restrictii.

14.1.4 Tip input range


Folosit pentru introducerea si validarea datelor dintr-un range (gama) de numere.
Exemplu:
<input type="range" name="points" min="1" max="10" />
14.1.5 Tip input - Date Pickers
HTML5 ofera mai multe tipuri de input pentru selectarea datei si a timpului:

date - selecteaza data, luna si anul


month - selecteaza luna si anul
week - selecteaza saptamana si anul
time - selecteaza timpul (ora si minutul)
datetime - selecteaza timpul, data, luna si anul (timp UTC)
datetime-local - selecteaza timpul, data, luna si anul (timp local)
Urmatorul exemplu va permite sa selectati o data dintr-un calendar:
Data: <input type="date" name="user_date" />
14.1.6 Tip input search
Folosit pentru campuri de cautare si se comporta ca si campurile obisnuite de text.
14.1.7 Tip input color
Folosit pentru campuri ce contin culori.
Exemplul de mai jos va permite sa selectati o culoare dintr-un color picker.
Exemplu:
Culoare: <input type="color" name="user_color" />
15 Elemente formularelor in HTML5
15.1 Noi elemente in formulare
HTML5 introduce noi elemente pentru formulare:
<datalist> - Specifica o lista de optiuni predefinite pentru elementul <input>
<keygen> - Specifica un camp tip generator de pereche de chei intr-un formular
<output> - Reprezinta rezultatul unui calcul
Nota: Nu toate browserele suporta noile elemente pentru formulare. Puteti totusi sa incepeti sa le utilizati deorece ele se
vor comporta ca si campuri text in browserele care nu suporta noile elemente.
15.1.1 Elementul <datalist>
Elementul <datalist> specifica o lista de optiuni predefinite pentru elementul <input> si este folosit pentru a adauga o
optiune de "autocompletare" in elementul <input>.
Utilizati lista de atribute a elementului <input> pentru a il lega cu un element de tip <datalist>.
Exemplu:
<input list="browsers" />
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
Un element <input> cu valori predefinite in <datalist>.
15.1.2 Elementul <keygen>
Scopul elementului <keygen> este de a oferi o cale securizata pentru autentificarea utilizatorilor.
Tag-ul <keygen> specifica un generator de percehe de chei intr-un formular. Cand formularul este trimis, sunt generate
doua chei, una privata si una publica. Cheia privata este stocata local, iar cheia publica este trimisa la server. Cheia
publica poate fi folosita pentru a genera un certificat pentru client, acesta putand folosi certificatul pentru urmatoarele
autentificari.
Exemplu:
<form action="test_keygen.php" method="get">
Utilizator: <input type="text" name="usr_name" />
Criptare: <keygen name="security" />
<input type="submit" />
</form>
Un formular cu camp <keygen>.
15.1.3 Elementul <output>

Elementul <output> reprezinta rezultatul unui calcul (ca cel realizat de un script).
Exemplu:
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" name="a" value="50" />100
+<input type="number" name="b" value="50" />
=<output name="x" for="a b"></output>
</form>
Realizeaza un calcul si arata rezultatul intr-un element de tip <output>.
HTML Reference - (HTML5 Compliant)
W3Schools Home
Next Reference
Ordered Alphabetically
New : New tags in HTML5.
Tag
Description
<!--...-->
Defines a comment
<!DOCTYPE>
Defines the document type
<a>
Defines a hyperlink
<abbr>
Defines an abbreviation
<acronym>
Not supported in HTML5. Defines an acronym
<address>
Defines contact information for the author/owner of a document
<applet>
Not supported in HTML5. Deprecated in HTML 4.01. Defines an embedded applet
<area>
Defines an area inside an image-map
<article>New
Defines an article
<aside>New
Defines content aside from the page content
<audio>New
Defines sound content
<b>
Defines bold text
<base>
Specifies the base URL/target for all relative URLs in a document
Not supported in HTML5. Deprecated in HTML 4.01. Specifies a default color, size, and
<basefont>
font for all text in a document
Isolates a part of text that might be formatted in a different direction from other text
<bdi>New
outside it
<bdo>
Overrides the current text direction
<big>
Not supported in HTML5. Defines big text
<blockquote>
Defines a section that is quoted from another source
<body>
Defines the document's body
<br>
Defines a single line break
<button>
Defines a clickable button
<canvas>New
Used to draw graphics, on the fly, via scripting (usually JavaScript)
<caption>
Defines a table caption
<center>
Not supported in HTML5. Deprecated in HTML 4.01. Defines centered text
<cite>
Defines the title of a work
<code>
Defines a piece of computer code
<col>
Specifies column properties for each column within a <colgroup> element
<colgroup>
Specifies a group of one or more columns in a table for formatting
<command>New
Defines a command button that a user can invoke
<datalist>New
Specifies a list of pre-defined options for input controls
<dd>
Defines a description of an item in a definition list
<del>
Defines text that has been deleted from a document

<details>New
<dfn>
<dir>
<div>
<dl>
<dt>
<em>
<embed>New
<fieldset>
<figcaption>New
<figure>New
<font>
<footer>New
<form>
<frame>
<frameset>
<h1> to <h6>
<head>
<header>New
<hgroup>New
<hr>
<html>
<i>
<iframe>
<img>
<input>
<ins>
<kbd>
<keygen>New
<label>
<legend>
<li>
<link>
<map>
<mark>New
<menu>
<meta>
<meter>New
<nav>New
<noframes>
<noscript>
<object>
<ol>
<optgroup>
<option>
<output>New
<p>

Defines additional details that the user can view or hide


Defines a definition term
Not supported in HTML5. Deprecated in HTML 4.01. Defines a directory list
Defines a section in a document
Defines a definition list
Defines a term (an item) in a definition list
Defines emphasized text
Defines a container for an external (non-HTML) application
Groups related elements in a form
Defines a caption for a <figure> element
Specifies self-contained content
Not supported in HTML5. Deprecated in HTML 4.01. Defines font, color, and size for
text
Defines a footer for a document or section
Defines an HTML form for user input
Not supported in HTML5. Defines a window (a frame) in a frameset
Not supported in HTML5. Defines a set of frames
Defines HTML headings
Defines information about the document
Defines a header for a document or section
Groups heading (<h1> to <h6>) elements
Defines a thematic change in the content
Defines the root of an HTML document
Defines a part of text in an alternate voice or mood
Defines an inline frame
Defines an image
Defines an input control
Defines a text that has been inserted into a document
Defines keyboard input
Defines a key-pair generator field (for forms)
Defines a label for an <input> element
Defines a caption for a <fieldset>, < figure>, or <details> element
Defines a list item
Defines the relationship between a document and an external resource (most used to link
to style sheets)
Defines a client-side image-map
Defines marked/highlighted text
Defines a list/menu of commands
Defines metadata about an HTML document
Defines a scalar measurement within a known range (a gauge)
Defines navigation links
Not supported in HTML5. Defines an alternate content for users that do not support
frames
Defines an alternate content for users that do not support client-side scripts
Defines an embedded object
Defines an ordered list
Defines a group of related options in a drop-down list
Defines an option in a drop-down list
Defines the result of a calculation
Defines a paragraph

<param>
<pre>
<progress>New
<q>
<rp>New
<rt>New
<ruby>New
<s>
<samp>
<script>
<section>New
<select>
<small>
<source>New
<span>
<strike>
<strong>
<style>
<sub>
<summary>New
<sup>
<table>
<tbody>
<td>
<textarea>
<tfoot>
<th>
<thead>
<time>New
<title>
<tr>
<track>New
<tt>
<u>
<ul>
<var>
<video>New
<wbr>New

Defines a parameter for an object


Defines preformatted text
Represents the progress of a task
Defines a short quotation
Defines what to show in browsers that do not support ruby annotations
Defines an explanation/pronunciation of characters (for East Asian typography)
Defines a ruby annotation (for East Asian typography)
Defines text that is no longer correct
Defines sample output from a computer program
Defines a client-side script
Defines a section in a document
Defines a drop-down list
Defines smaller text
Defines multiple media resources for media elements (<video> and <audio>)
Defines a section in a document
Not supported in HTML5. Deprecated in HTML 4.01. Defines strikethrough text
Defines important text
Defines style information for a document
Defines subscripted text
Defines a visible heading for a <details> element
Defines superscripted text
Defines a table
Groups the body content in a table
Defines a cell in a table
Defines a multiline input control (text area)
Groups the footer content in a table
Defines a header cell in a table
Groups the header content in a table
Defines a date/time
Defines a title for the document
Defines a row in a table
Defines text tracks for media elements (<video> and <audio>)
Not supported in HTML5. Defines teletype text
Defines text that should be stylistically different from normal text
Defines an unordered list
Defines a variable
Defines a video or movie
Defines a possible line-break