Curs Html5 [PDF]

Zitiervorschau

---

Curs HTML5 - Partea I HTML5 este noua versiune de HTML. Noul standard introduce notiuni noi pe care o sa le studiem in acest curs.

1.1 Introducere Exemplu: Code:





Browserul dvs nu suporta tag-ul video.



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 catvea 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: 1

- 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 pentru HTML5 In HTML5 avem o singura declaratie de tip . Document HTML5 minim Mai jos aveti exemplificat un document HTML5 simplu, cu minimul de tag-uri necesare. Exemplu: Code:

Titlul documentului

Continutul documentului...

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.

Curs HTML5 - Partea a II-a 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

2

Quote: - pentru continut externt (stiri, blog, forum) - pentru continut deoparte fata de continutul in care este plasat. Continutul "aside" trebuie sa fie legat de continutul inconjurator. - Izoleaza o parte din text ce poate fi formatata intr-o directie diferita fata de textul din afara - buton, buton radio, caseta (checkbox) - pentru a descrie detaliile unui document sau unei parti dintr-un document - legenda sau sumar (in interiorul elementului "details") - specifica continutul independent, ca ilustratiile, diagramele, fotografiile, listari de cod, etc. - legenda unei figuri - pentru sfarsitul unui document sau sectiune. Poate include numele autorului, data documentului, informatii de contact sau de copyright - pentru introducerea intr-un document sau sectiune. Poate include navigare. - o sectiune de rubrici (headings) de la la , unde cea mai mare este rubrica principala iar celelalte sunt sub-rubrici - marcarea unui text (highlight) - pentru masuri (doar daca se cunosc valorile minima si maxima) - sectiune de navigare - starea unei lucrari in progres - pentru notatii ruby (note sau caractere chinezesti) - pentru explicarea notatiei elementului ruby - ca sa arate browserelor care nu suporta elementul ruby - sectiune in document (cepitol, header, footer) - pentru definire timp, data sau amandoua - 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. Quote: - pentru continut audio - pentru continut video - pentru elemente media definite in elemente audio sau video - pentru continut incroporat (cum ar fi un plug-in) - defineste textul pieselor pentru si 2.3 Elementul canvas Utilizeaza JavaScript pentru a realiza desene intr-o pagina web. Quote: - pentru a realiza elemente grafice cu un script 2.4 Elemente noi pentru formulare

3

HTML5 introduce elemente noi pentru formulare menite sa imbunatateasca functionalitatea acestora. Quote: - o lista cu optiuni pentru valori de intrare - genereaza chei pentru autentificarea utilizatorilor - pentru diferite tipuri de iesiri cum ar fi iesirile scrise de un script 2.4.1 Valori noi pentru atributele de intrare Quote: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: Quote:







Curs HTML5 - Partea a III-a 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 4

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 . Nota: Interenet Explorer 8 si versiunile mai vechi nu suporta elementul . 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: Code: (Select All)

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

5

Quote: Browserul dvs nu suporta tag-ul 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. Code:



Browserul dvs nu suporta tag-ul video.

3.4 Tag-urile HTML5 Video Tag

Descriere

Defineste un fisier video Defineste resurse media multiple pentru elemente media cum ar fi si

Defineste textul pieselor in playerele media

3.4.1 Atributele tag-ului Aveti in imaginea de mai jos atributele suportate in HTML 5 pentru tag-ul .

6

3.5 HTML5 Video + DOM Elementul HTML5 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 porneste, face pauza sau se opreste etc. Exemplul urmator ilustreaza, intr-un mod simplu, cum sa adresam un element , cum sa citim si sa stabilim propietatile, si metodele de apelare. 3.5.1 HTML5 - 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 propietatile video, doar videoWidth si videoHeight sunt disponibile imediat. Celelalte propietati sunt disponibile dupa ce sunt incarcate metadatele fisierului video.

Curs HTML5 - Partea a IV-a 3 HTML5 Audio HTML5 prevede un standard pentru fisierele audio. Pana la aparitia HTML5 nu exista un standard pentru rederarea fisierelor audio intr-o pagina web. 7

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. 4.1 Formate audio si suportul in browsere

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

Atributul control adauga butoanele de control "play" (redare), "pause" (pauza) si "volume" (volum). Continutul se insereaza intre tag-urile si pentru browserele care nu suporta elementul audio: Exemplu: Code:

Browserul dumneavoastra nu suporta acest element.

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

Exemplu: Code:

Browserul dumneavoastra nu suporta acest element.

4.3 Tag-urile HTML5 Audio Tag

Descriere

Defineste continut audio Defineste resurse media multiple pentru elemente media cum ar fi si

4.3.1 Atributele tag-ului

Curs HTML5 - Partea a V-a 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. 9

5.2 Exemple Drag and Drop in HTML5 Mai jos aveti un exemplu simplu de drag and drop. Exemplu: Code:







5.3 Cum faci un element sa poate fi tras (Draggable) Inainte de toate trebuie sa setam valoarea "true" atributului draggable al elementului. Code:

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. Code: function drag(ev) {

10

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: Code: 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). Code:

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 .

Curs HTML5 - Partea a VI-a 6 HTML5 Canvas (Panza) Elementul canvas este utilizat pentru a desena intr-o pagina web. 11

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

Dupa acest pas desenam canvas-ul cu ajutorul J Code:

JavaScript utilizeaza id-ul pentru a gasi elementul canvas: Code: var c=document.getElementById("primulcanvas"); Apoi creaza un obiect de context: Code: var cxt=c.getContext("2d");

12

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: Code: 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. In pagina de mai jos puteti afla coordonatele intr-un canvas. Puneti mouse-ul in interiorul dreptunghilui. 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.

13

c) Gradient Deseneaza un gradient cu culorile specificate. Image has been scaled down 18% (500x110). Click this bar to view original image (606x133). Click image to open in new window.

d) Imagine Pune o imagine in canvas.

Curs HTML5 - Partea a VII-a 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 14

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





Rezultat:

Curs HTML5 - Partea a VIII-a 15

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

•

•

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

Curs HTML5 - Partea a IX-a 9 HTML Geolocalizare (Geolocation)

16

9.1 Introducere 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: Code:

Explicatii: Se verifica daca browserul suporta Geolocation.

17

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: Code: 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: 18

Code: 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=""; }

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

19

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. Code:

Curs HTML5 - Partea a X-a 20

10 HTML5 Stocare Web (Web Storage) Suport in browsere:

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:

In exemplul urmator numaram de cate ori este accesata o pagina: PHP Code:

10.1 Obiectul sessionStorage Retine datele pentru o sesiune. Cand utilizatorul inchide browserul datele sunt sterse. Cum cream si accesam sessionStorage: PHP Code:

In exemplul urmator numaram de cate ori este accesata o pagina intr-o sesiune PHP Code:

Curs HTML5 - Partea a XI-a 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 Suport in browsere: 22

Application cache este suportat in majoritatea browserelor cu exceptia Internet Explorer. 11.2 Exemplu HTML5 Manifest Cache Exemplul urmator arata un document HTML cu cache manifest (pentru navigare offline). Exemplu: Code:

Continutul documentului...

11.3 Notiuni de baza Cache Manifest Pentru a activa application cache trebuie sa includem atributul manifest in tag-ul al documnetului. Exemplu: Code:

...

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 23

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: Code: 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: Code: NETWORK: login.php

Daca folosim asterisk (*), toate resursele/fisierele vor necesita o conexiune la internet. Exemplu: Code: 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: Code: /html5/ /offline.html

Nota: Primul URI (uniform resource identifier) este resursa, iar cel de-al doilea este rezerva (fallback). 11.5 Actualizarea cache-ului 24

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: Code: 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-cache-uiasca 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).

Curs HTML5 - Partea a XIV-a 14 Formularele HTML5 14.1 Tipuri de input HTML5 introduce noi tipuri de input pentru formulare. In acest curs vom discuta despre:

25

- 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: Code: E-mail:

14.1.2 Tip input - url Folosit pentru introducerea si validarea datelor de tip adresa URL. Exemplu: Code:

Homepage:

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: Code: Puncte:

Puteti folosi urmatoarele atribute pentru a adauga restrictii. 26

14.1.4 Tip input - range Folosit pentru introducerea si validarea datelor dintr-un range (gama) de numere. Exemplu: Code:

Puteti folosi urmatoarele atribute pentru a adauga restrictii. 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: Code:

Data:

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

Exemplu: Code: Culoare:

Curs HTML5 - Partea a XV-a 15 Elemente formularelor in HTML5 15.1 Noi elemente in formulare HTML5 introduce noi elemente pentru formulare: - Specifica o lista de optiuni predefinite pentru elementul - Specifica un camp tip generator de pereche de chei intr-un formular - 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 Elementul specifica o lista de optiuni predefinite pentru elementul si este folosit pentru a adauga o optiune de "autocompletare" in elementul . Utilizati lista de atribute a elementului pentru a il lega cu un element de tip . Exemplu: Code:







Un element cu valori predefinite in . 15.1.2 Elementul Scopul elementului este de a oferi o cale securizata pentru autentificarea utilizatorilor. Tag-ul specifica un generator de percehe de chei intr-un formular. Cand formularul este trimis, sunt generate doua chei, una privata si una publica. 28

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

Utilizator: Criptare:

Un formular cu camp . 15.1.3 Elementul Elementul reprezinta rezultatul unui calcul (ca cel realizat de un script). Exemplu: Code:

0 100 + =

Realizeaza un calcul si arata rezultatul intr-un element de tip . Noile elemente semantice din HTML5 HTML5 nu este doar despre reducerea markupului existent (desi face destul de mult in acest sens). El defineste si noi elemente semantice.

Elementul section reprezinta o sectiune generica a documentului sau a aplicatiei. O sectiune, in acest context, este o grupare tematica a continutului, de obicei avand un antet. Exemple de sectiuni pot fi capitolele, taburile dintr-un dialog bazat pe taburi sau sectiunile numerotate ale une teze. O pagina de start poate fi impartita in sectiuni de introducere, stiri, informatii de contact.

Elementul nav reprezinta o sectiune a unei pagini care se leaga de alte pagini sau la parti din pagina: practic o sectiune cu linkuri de navigare. Nu toate grupurile de linkuri de pe o pagina trebuie sa fie cuprinse intr-un element nav - numai sectiunile care sunt alcatuite din blocuri principale de navigare sunt potrivite pentru elementul nav. In particular, este ceva obisnuit ca in subsolul de pagina sa existe o lista scurta de linkuri la paginile uzuale ale unui site, cum ar fi termenii de utilizare, pagina de start sau pagina de copyright. Elementul footer de unul singur este suficient pentru astfel de cazuri, fara un element nav

29

Elementul article reprezinta o componenta a unei pagini care consta dintr-o compozitie independenta dintr-un document, pagina, aplicatie sau site si pentru care intentia este sa fie distrubuita independent sau sa fie reutilizata. Acesta poate fi o postare de pe forum, un articol de ziar sau de revista, un comentariu lasat de utilizatori, un widhet sau gadget interactiv sau alta forma independenta de continut.

Elementul aside reprezinta o sectiune a unei pagini care consta din continut care este tangential legat de continutul din jurul elementului si care poate fi considerat separat de continut. Asemenea sectiuni sunt deseori reprezentate ca bare laterale de tiparituri. Elementul poate fi folosit pentru efecte tipografie cum ar fi citatele evidentiate sau barele laterale, pentru publicitate, pentru grupuri de elemente nav si pentru alt continut care este considerat separat de continutul principal al paginii.

Elementul hrgoup reprezinta titlul unei sectiuni. Elementul este folosit pentru a grupa un set de elemente h1 - h6 cand titlul are niveluri multiple, cum ar fi sub-titluri, titluri alternative sau slogane.

Elementul header grupeaza un set de detalii introductive sau navigationale. Un element header va contine de obicei titlul unei sectiuni (un element h1 - h6 sau un element hgroup), dar acest lucru nu este obligatoriu. Elementul header poate fi folosit de asemenea pentru cuprinsul unei sectiuni, un formulat de cautare sau orice logouri relevante.

Elementul footer reprezinta un subsol pentru cel mai apropiat element ierarhic superior sau element root al sectiunii. El contine de obicei informatii despre sectiune, cum ar fi cine a scris-o, linkuri catre documentele conexe, date de copyright si altele. Subsolurile nu trebuie sa apara neaparat la sfarsitul unei sectiuni, desi de obicei acolo apar. Cand un element footer contine sectiuni intregi, reprezinta anexe, indexuri, casete redactionale lungi, acorduri de licentiere stufoase si alte tipuri de continut de acest fel.

Elementul time reprezinta ori o reprezentare a orei in format cu 24 de ore ori o data precisa in calendarul gregorian, optional insotita de ora si fus orar.

Elementul mark reprezinta o secventa de text intr-un document evidentiata sau subliniata in scopuri informative. Articole Haide sa vedem ce putem sa facem in legatura cu acest markup: Code:

October 22, 2009

Travel day

...

Din nou, acesta este HTML5 valid. Dar HTML5 ofera un element mai specific pentru cazul obisnuit de marcare a unui articol pe o pagina - numit sugestiv elementul . Code:

October 22, 2009

Travel day

...

Ah, dar nu este totusi atat de simplu. Mai exista o schimbare pe care ar trebui sa o faceti. Va voi arata mai intai si apoi va voi explica: Code:

October 22, 2009

Travel day

...

V-ati prins ? Am schimbat elementul intr-un si l-am impachetat intr-un element . Am vazut deja elementul in actiune. Scopul sau este sa impacheteze toate elementele care formeaza antetul articolului (in acest caz, data de publicare a articolului si titlul). Dar... dar... nu ar trebui sa avem un per document ? Nu va da asta peste cap schema articolului ? Nu, dar pentru a intelege de ce nu, trebuie sa ne dam inapoi un pas. In HTML 4, singura modalitate de a crea schema unui document a fost cu ajutorul elementelor - . Daca ati fi vrut un singur nod radacina in schema, trebuia sa va limitati la un singur in markupul dumneavoastra. Dar specificatiile HTML5 definesc un algoritm pentru generarea schemei documentului care incorporeaza noi elemente semantice in HTML5. Algoritmul HTML5 spune ca un element creeaza o noua sectiune, care are un nou nod in schema documentului. Si in HTML5 fiecare sectiune poate avea elementul propriu .

31

Este o schimbare drastica fata de HTML 4 si iata de ce este un lucru bun. Multe pagini web sunt generate prin intermediul template-urilor. O bucata de continut este luata dintr-o sursa si inserata in pagina intr-o parte, o alta bucata de continut este inserata in alta parte. Multe tutoriale sunt structurate in acest fel. "Iata o bucata de cod HTML. Copiati-o si lipiti-o in pagina dumneavoastra." Este foarte bine pentru bucati mici de continut, dar daca ceea ce lipiti reprezinta o sectiune intreaga ? In acest caz, tutorialul va citi ceva de acest gen: "Iata o bucata de cod HTML. Copiati-o si lipiti-o intr-un editor de text si aveti grija ca tagurile si tutlurile sa se potriveasca cu nivelul ierarhic al tagurilor de titluri din pagina in care o lipiti." Sa va explic altfel. HTML 4 nu are element de titlu generic. Are sase elemente numerotate strick - , care trebuie ordonate ierarhic in exact aceeasi ordine. Cam neplacut, mai ales daca pagina dumneavoastra este mai curand "asamblata" decat "creata". Si aceasta este problema pe care o rezolva HTML5 cu noile elemente de sectiune si noile reguli pentru elementele de tip titlu existente. Daca folositi noi elemente de sectiune, va pot da acest markup: Code:

>h1> A syndicate post

Lorem ipsum blah blah...

si il puteti copia si lipi oriunde in pagina dumneavoastra fara modificari. Faptul ca dispune de un element nu este o problema, deoarece intreg codul este continut intr-un . Elementul defineste un nod auto-continut in schema documenteului, elementul ofera titlul pentru acel nod din schema si toate elementele de sectiune de pe pagina vor ramane la ce nivel de ierarhie erau inainte.

Profesorul Markup spune: Precum toate lucrurile de pe web, realitate este putin mai complicata decat lasa sa se inteleaga aici. Noile elemente "explicite" de sectiune (cum ar fi impachetat in ) pot interactiona in moduri nebanuite cu vechile elemente de sectiune "implicite" ( - de unele singure). Viata va va fi mult mai simpla daca folositi ori o metoda ori cealalta, dar nu pe manadoua.Daca trebuie sa le folositi pe amandoua pe aceeasi pagina, fiti sigur ca verificati rezultatul in HTML5 Outliner si ca schema documentlui dumneavoastra are sens. Anteturi Code:

My Weblog

A lot of effort went into making this effortless.

...

Travel day

...

32

I'm going to Prague !

Nu este nimic gresit cu acest markup. Daca va place, il puteti pastra. Este HTML5 valid. Dar HTML5 ofera cateva elemente semantice aditionale pentru anteturi si sectiuni. Mai intai haideti sa scapam de antetul . Este o metoda des utilizata, dar nu inseamna nimic. Elementul div nu are semantica definita si nici atributul id nu are semantica definita. (Unui User Agent nu ii este permisa deductia nici unui inteles din valoarea atributului id.) Ati putea schimba aici in si ar avea aceeasi valoare semantica, adica nimic. HTML5 defineste un element pentru acest scop. Specificatia HTML5 are exemple reale de folosire a elementului . Iata cum ar atata pe pagina noastra data exemplu: Code:

My Weblog

A lot of effort went into making this effortless.

...

E bine. Va spune tuturor celor care vor sa stie ca aceasta este un antet. Dar ce spuneti despre slogan ? Un alt obicei, care apan acum nu a dispus de markup standard. Este un lucru dificil sa-l marchezi. Un slogan este precum un subtitlu, dar este "atasat" titlului principal. Aceasta inseamna ca este un subtitlu care nu isi creeaza propria sectiune. Elementele de antet, cum ar fi si , dau structura pagini. Luate impreuna, ele creeaza o schema pe care o puteti folosi pentru a vizualiza (sau naviga) in pagina. Aplicatiile de tip "screen reader" folosesc schema documentului pentru a ajuta utilizatorii nevazatori sa navigheze in pagina. Exista unelte online si extensii de browser care va permit sa vizualizati schema documentului. In HTML 4, elementele - erau singura care de a crea schema documentului. Schema paginii date exemplu arata asa: Code: My Weblog (h1) | + - - Travel day (h2) | + - - I'm going to Prague ! (h2)

Este bine, dar inseamna ca nu exista un mod pentru a marca sloganul "A lot of effort went into making this effortless". Daca am fi incercat sa il marcam cu un , ar fi adaugat un nod fantoma la schema documentului. Code:

My Weblog (h1) | + - - A lot of effort went into making this effortless. (h2) |

33

+ - - Travel day (h2) | + - - I'm going to Prague ! (h2)

Dar aceasta nu este structura documentului. Sloganul nu reprezinta o sectiune: este doar un subtitlu. Probabil am putea marca sloganul ca un si vom marca fiecare titlu din articol ca un ? Nu, este chiar mai rau: Code:

My Weblog | + - | + | +

(h1) A lot of effort went into making this effortless. (h2) - - Travel day (h3) - - I'm going to Prague ! (h3)

Acum avem in continuare un nod fantoma in schema documentului, care a "furat" copii care apartineau de drept nodului radacina. Si aici apare problema: HTML 4 nu ofera o cale pentru a a marca subtitlu fara a-l adauga la schema documentului. Indiferent cat de mult incercam sa schimbam lucrurile, "A lot of effort went into making this effortless" va ateriza in aceasta reprezentare. Si de aceea am ajuns sa folosim markup fara valoare semantica, asa cum este

HTML5 ofera o solutie pentru aceasta: elementul . Elementul actioneaza ca un ambalaj pentru doua sau mai multe elemente de titrare inrudite. Ce inseamna "inrudite" ? Inseamna ca, luate laolalte, ele creeaza un singur nod in schema documentului. Dat fiind acest markup: Code:

My Weblog A lot of effort went into this effortless.

...

...

Travel day

...

I'm going to Prague!

34

Aceasta este schema documentului care este creat: Code: My Weblog (h1 of its hgroup) | + - - Travel day (h2) | + - - I'm going to Prague ! (h2)

Puteti testa paginile dumneavoastra in HTML5 Outliner pentru a va asigura ca folositi corect elemetnele titrare. Cum se gestioneaza elementele necunoscute Fiecare browser are o lista de baza de elemente HTML pe care le suporta. De exemplu, lista din Mozilla Firefox este stocata in nsElementTable.cpp. Elementele care nu sunt in aceasta lista sunt tratate ca "elemente necunoscute". Exista doua probleme fundamentale cu elementele necunoscute. 1. Care ar trebui sa fie stilul acestor elemente ? Implicit,

are spatiere deasupra si dedesubt, este indentat cu o margine la stanga si este afisat intr-un font mai mare. Dar ce stil implicit trebuie aplicat acestor elemente necunoscute ? 2. Cum ar trebui sa arate DOM-ul elementului ? nsElementTable.cpp din Mozilla include informatii despre ce tipuri de alte elemente poate contine fiecare element. Daca includeti markup cum ar fi

, al doilea paragraf il inchide in mod implicit pe primul, astfel incat elementele apar ca frati, nu in relatie parinte - copil. Dar daca scrieti

, elementul span nu inchide paragraful, din cauza faptului ca Firefox stie ca

este un element bloc care contine elementul . Astfel, ajunge sa fie copil al lui

in DOM. Diferitele browsere raspund acestor intrebari in mod diferit. (Socant, stiu). Dintre browserele majore, raspunsul lui Internet Explorer la maandoua intrebarile a fost cel mai problematic, dar fiecare browser are nevoie de putin ajutor aici. La prima intrebare ar trebui sa fie relativ usor de raspuns. NU dari nici o stilizare speciala elementelor necunoscute. Lasati-le sa mosteneasca proprietatile CSS care sunt in vigoare oriunde apar in pagina si lasati autorul paginii sa specifice toate stilurile prin CSS. Si acest lucru merge, in mare parte, dar este un mic schepsis pe care trebuie sa il stiti.

Profesorul Markup spune: Toate browserele afiseaza elementele necunoscute in linie, de exemplu ca si cum ar avea o regula CSS display: inline Exista cateva elemente noi definite in HTML5 care sunt elemete de tip container. Aceasta inseamna ca pot contine alte elemente de tip container, iar browserele care se conformeaza HTML5 le vor stiliza implicit ca display:block. Daca vreti sa folositi aceste elemente in browserele mai vechi, ca trebui sa definiti manual stilul de afisare: Code: 35

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { }

(Aceasta secventa este prelucrata din HTML5 Reset Stylesheet a lui Rich Clark, care face multe alte lucruri care sunt mai presus de scopul acestui capitol). Dar stati, totul se complica si mai tare ! Inainte de versiunea9, Internet Explorer nu aplica nici un fel de stilizare pe documentele necunoscute. De exemplu aveati acest markup: Code

...

Welcome to Initech

This is your first day .

Internet Explorer ( pana la si inclusiv IE8) nu va trata elementul ca un element de tip container si nici nu va pune o bordura rosie in jurul elementului. Toate regulile de stil sunt pur si simplu ignorate. Internet Explorer 9 rezolva aceasta problema. A doua problema este ca DOM-ul pe care il creeaza browserele atunci cand intalnesc elemente necunoscute. Din nou, ce mai problematic browser este reprezentat de versiunile mai vechi de Internet Explorer (inainte de versiunea 9, care rezolva si aceasta problema). Daca IE8 nu recunoaste explicit numele elementului, va insera elementul in DOM ca un nod gol fara copii. Toate elementele la care v-ati asteptat sa fie copii directi ai elementului necunoscut vor fi introduse ca frati. Iata aici o mostra de arta ASCII pentru a ilustra diferenta. Acesta este DOM-ul pe care il dicteaza HTML5: Code: | + | | | + | + | + | | | +

- -h1 (child of article) | + - - text node "Welcome to Initech" - -p (child of article, sibling of h1) - - text node "This is your " - - span | + - - text node "first day" - - text node "."

Dar acesta este DOM-ul pe care il creeaza versiunile vechi de Internet Explorer Code: 36

h1 (sibling of article) | + - - text node "Welcome to Initech" p (sibling of h1) | + - - text node "This is your" | + - - span | | | + - - text node "first day" | + - - text node "."

Exista un artificiu minunat pentru a rezolva aceasta problema. IN cazul in care crati prin JavaScript un element vid inaitne de a-l folosi in pagina dumneavoastra, Internet Explorer va recunoaste elementul si va va lasa sa il prelucrati cu CSS. Nu exista nevoia de a insera vreodata elementul vid in DOM. Simpla creare a elementului o singura data este de ajung pentru a invata Internet Explorere sa stilizeze elementul pe care nu il recunoaste. Code:





Welcome to Initech

This is your first day .

Aceasta functioneaza in toate versiunile de Internet Explorer, pana inapoi la IE6 ! Putem extinde aceasta tehnica pentru a crea deodata copii vide ale tuturor noilor elemente HTML5 - din nou, ele nu sunt inserate niciodata in DOM, astfel incat nu veti vedea aceste elemente goale - si apoi puteti incepe sa le folositi fara a va face prea multe griji legate de browserele incapabile de HTML5. Remy Sharp a facut chiar acest lucru, cu al sau script numit sugestiv "HTML5 enabling script". Script-ul a trecut prin mai mult de zece revizii, dar ideea de baza este: Code:



37

Partile si sunt comentarii conditionale. Internet Explorer le interpreteaza ca o declaratie if: "daca browserul curent este o versiune de Internet Explorer mai mica de versiunea 9, atunci executa acest bloc." Toate celelealte browsere vor trata intregul bloc ca un comentariu HTML. Rezultatul net este ca Internet Explorer (pana la si inclusiv versiunea 8) va executa script-ul, dar alte browsere vor ignora scriptul cu totul. Acest lucru va face ca incarcarea paginilor sa fie mai rapida in browserele care nu au nevoie de acesta smecherie. Codul JavaScript in sine este relativ simplu. Variabila e se termina cu o matrice de elemente de tip string, cum ar fi "abbr", "article", "aside" si asa mai departe. Apoi parcurgem aceasta matrice si cream fiecare din elementele necesare prin apelarea document.createElement (). Dar din moment ce ignoram valoarea reurnata, elemtenele nu sunt nicioodata inserate in DOM. Acest lucru este de ajuns pentru a face Internet Explorer sa trateze aceste elemente in modul in care am dorit sa fie tratate, odata ce le vom folosi mai jos in pagina. "Mai tarziu" este informatia importanta. Acest script trebuie sa fie in partea de sus a paginii dumneavoastra, preferabil in elementul , nu la final. In acest fel, Internet Explorer va executa scriptul inainte sa proceseze tagurile si atributele. Daca puneti acest script in josul paginii dumneavoastra, va fi prea tarziu. Internet Explorer va interpreta deja in mod gresit markupul dumneavoastra si va construi DOM-ul gresit si nu va mai merge inapoi sa il ajusteze din cauza acestui script. Remy Shapr a "minimizat" script-ul si l-a postat pe Google Project Hosting. (In cazul in care va intrebati, script-ul in sine este open source si licentiat de MIT, deci in putetit folosi in orice proiect). Daca doriti, puteti folosi un "hotlink" pentru script indicand direct la versiunea gazduita, ca aici: Code:

My Weblog



Relatii de prietenie si alte legaturi Linkurile obisnuite indica pur si simplu o alta pagina. Relatiile de legatura sunt un mod de a explica de ce faceti trimtere la alta pagina. Ele termina propozitia "Fac trimitere la acest lucru pentru ca ..." • ... este un fisier de stiluri continand reguli CSS pe care browserul ar trebui sa le aplice la acest document. • ... este un flux care contine acelasi continut ca si aceasta pagina, dar intr-un format standard cu posibilitatea de abonare. • ... este o traducere a paginii in alta limba. • ... este urmatorul capitol dintr-o carte online din care aceasta pagina face parte. Si asa mai departe. HTML5 desparte relatiile de legatura in doua categorii: 38

Doua categorii de linkuri pot fi create folosind elementul link. Legaturile catre resurse externe sunt legaturi catre surse care vor fi folosite pentru a imbunatati documentul curent si legaturile hyperlink sunt legaturi la alte documente ... Comportamentul exact al linkurilor catre resurse externe depinde de relatiile exacte, asa cum sunt definite pentru tipul respectiv de legatura. Din exemplele pe care tocmai le-am dat, numai primul (rel="stylesheet") este un link catre o resursa externa. Restul sunt hyperlinkurispre alte documente. Veti dori sau nu sa urmati aceste linkuri, dar ele nu sunt necesare pentru a vizualiza pagina curenta. Cel mai adesea, relatiile de legatura pot fi observate pe elementul din elementul al unei pagini. Unele relatii de legatura pot fi folosite pe elemente , dar este neobisnuit chiar si atunci cand se permite acest lucru. HTML5 permite unele relatii pe elementele , dar acest lucru este si mai putin obisnuit. (HTML 4 nu permitea un atribut rel pe elementele ).

Intrebati-l pe profesorul Markup I: Imi pot defini propriile relatii de legatura ? R: Se pare ca exista o resursa nesfarsita de idei pentru noi relatii de legatura. In incercarea de a impiedica oamenii sa incurce total lucrurile, WHATWG metine un registru de valori rel propuse si defineste proceul de acceptare.

rel=stylesheet Sa observam prima relatie de legatura din pagina noastra de exemplificare: Code:

Aceasta este cel mai frecvent folosita relatie de legatura din lume (literalmente). este folosita ca sa indice reguli CSS care sunt stocate intr-un fisier separat. O mica optimizare pe care o puteti face in HTML5 este sa scapati din atributul type. Exista un singur limbaj pentru stiluri pe web, CSS, deci aceasta este valoarea implicita pentru atributul type. functioneaza in toate browserele. (Cineva, cred, ar putea imagina vreodata un nou limbaj pentru crearea stilurilor, insa, daca se intampla acel lucru, adaugati la loc atributul type.) Code:

rel=alternate Continuand cu pagina noastra de exemplu: Code: 39



Aceasta relatie de legatura este de asemenea destul de intalnita. , combinata cu tipul de media RSS sau Atom in atributul type, permite operatiunea denumita "feed autodiscovery". Permite cititoarelor de fluxuri de stiri (cum ar fi Google Reader) sa descopere ca un site are un flux de stiri cu cele mai noi articole. Cele mai multe browsere suporta descoperirea automata de fluxuri ATOM/RSS prin afisarea unui icon alaturi de URL. (Spre deosebirea de rel="stylesheet", atributul type conteaza aici. Nu renuntati la el!) Relatia de legatura rel="alternate" a fost intotdeauna un hibrid ciudat de cazuri de folosire, chiar si in cazul HTML 4. In HTML5, definita sa a fost clarificata si extinsa pentru a descrie mai pe larg continutul existent de pe web. Dupa cum tocmai ati vazut, folosirea rel="alternate" in combinatie cu type="application/atom+xml" indica prezenta unui flux Atom pentru pagina curenta. Insa puteti folosi rel="alternate" si impreuna cu alte atribute type pentru a indica acelasi continut intr-un format diferit, cum ar fi PDF. HTML5 ne scapa de confuzia indelungata despre cum sa facem legaturi la traducerile documentelor. HTML 4 ne spune sa folosim atributul lang in combinatie cu rel="alternate" pentru a specifica limba documentului catre care se face legatura, dar nu este corect. Erata HTML 4 prezinta patru erori din specificatiile HTML4. Una face legatura prin rel="alternate". Modul corect descris in erata HTML 4 si acum prezent in HTML5 este sa folosim atributul hreflang. Din nefericire, aceste specificatii din erata nu au fost reintroduse niciodata in specificatiile HTML 4, deoarece nimeni din grupul Grupul de lucru HTML al W3C nu mai lucra la HTML.

Alte relatii de legatura in HTML5 rel="author" este folosita pentru a face legatura la informatii despre autorul unei pagini. Acestea pot fi reprezentate printr-o adresa de tip mailto:, desi nu este neaparat necesar. Poate fi pur si simplu un link catre un formular de contact sau o pagina despre autor. rel="external" "arata ca linul duce la un document care nu este parte a site-ului din care documentul curent reprezinta o parte". Cred ca a fost prima data popularizat de WordPress, care il foloseste pentru linkurile lasate de cei care comenteaza. HTML 4 a definit rel="start", rel="prev" si rel="next" pentru a defini relatiile intre paginile care sunt parti ale unei serii (cum ar fi capitolele unei carti sau chiar postarile pe un blog). Singura care a fost vreodata folosita corect este rel="next". Oamenii au folosit rel="previous" in loc de rel="prev"; au folosit rel="begin" si rel="first" in loc de rel="start". Au folosit rel="end" in loc de rel="last". Oh, si - de capul lor - au folosit rel="up" pentru a indica o pagina "parinte". HTML5 include rel="first", care a fost cea mai obisnuita variatie a diferitelor moduri de a spune "prima pagina dintr-o serie" (rel="start" este un sinonim neconform, oferit pentru compatibilitatea cu versiunile anterioare). Include de asemenea rel="prev" si rel="next", ca si 40

HTML4, si suporta rel="previous" pentru compatibilitate, precum si rel="last" (ultimul dintr-o serie, oglinda lui rel="first") si rel="up". Cea mai buna cale de a va gandi la rel="up" este sa va uitati la navigare de tip bread-crumb (sau cel putin imaginati-va). Pagina dumneavoastra este probabil prima pagina din lista dumneavoastra si pagina curenta este cea de sfarsit. rel="up" arata catre penultima pagina din lista. rel="icon" este a doua cea mai populara relatie de legatura, dupa rel="stylesheet". Este de obicei regasita impreuna cu shortcut, in acest mod: Code:

Toate browserele importante suporta acest mod de folosire pentru a asocia paginii un mic icon. De obicei este afista in bara de adrese a browserului, langa URL, sau intr-un tab ori in amandoua. De asemenea nou in HTML5: atributul sizes poate fi folosit in combinatie cu icon pentru a indica marimea iconului mentionat. rel="license" a fost inventat de catre comunitatea micro-formatelor. "Indica faptul ca documentul mentionat ofera termenii licentei de copyright sub care este oferit documentul respectiv". rel="nofollow" "indica faptul ca linkul nu este aprobat de autorul original sau publisherul paginii sau ca linkul la documentul mentionat a fost inclus in primul rand datorita unei relatii comerciale intre oamenii afiliati cu cele doua pagini. A fost inventat de Google si standardizat in cadrul comunitatii micro-formatelor. WordPress adauga rel="nofollow" la toate linkurile adaugate de cei care comenteaza. Ratiunea a fost ca linkurile "nofollow" nu vor ajunge in ecuatia PageRank si spammerii vor renunta sa posteze comentarii spam pe bloguri. Aceasta nu sa intamplat, dar rel="nofollow" a rezistat. rel="noreferrer" "indica faptul ca nici o informatie despre pagina anterioara nu trebuie transmisa atunci cand se urmeaza o legatura". rel="pingback" specifica adresa unui server "pingback". Cum era explicat in specificatiile Pingback, "sistemul pingback este o cale pentru un blog de a fi automat notificat atunci cand alte site-uri stabilesc legaturi cu el ... Permite legaturi inverse (reverse linking) - o cale de a merge inapoi pe un lant de legaturi, mai curand decat mergand inainte". Sistemele de blogging, mai ales WordPress, implementeaza mecanismul de pingback pentru a notificat autorii la care ati realizat linkuri atunci cand ati creat o postare pe blog. rel="prefetch" "indica faptul ca trasnferul si stocarea resursei specificate este probabil sa fie benefice, dupa cum este foarte probabil ca utilizatorul sa ceara aceasta resursa." Motoarele de cautare adauga uneori la pagina de rezultate daca simt ca primul rezultat este cu mult mai popular decar oricare altul. De exemplu: folosind Firefox, cautati in Google dupa CNN, vedeti sursa paginiii si cautati cuvantul cheie prefetch. Mozilla Firefox este insugurul browser actual care suporta rel="prefetch". rel="search" "indica faptul ca documentul metionat ofera o interfata specifica pentru cautarea in document si resursele sale conexe". In mod specific, daca vreti ca rel="search" sa faca ceva 41

util, ar trebui sa faca legatura catre un document Open-Search care descrie cum un browser poate construi un URL pentru a efectua cautari in site. OpenSearch (si linkurile rel="search" care trimit la documentele de descriere OpenSearch) a fost suportat in Microsoft Internet Explorer inca din versiunea 7 si de Mozilla Firefox inca de la versiunea 2. rel="sidebar" "indica faptul ca, daca documentul mentionat este incarcat, sa fie prezentat intrun context de navigare secundar (daca este posibil), in locul celui curent." Ce inseamna asta ? In Opera si Mozilla Firefox, inseamna "atunci cand dau clic pe acest link, atentionez utilizatorul sa creeze un bookmark care, atunci cand este selectat din meniul bookmarkuri, deschide documentul la care este facuta legatura, intr-un sidebar al browserului" (Opera il numeste "panel" in loc de "sidebar"). Internet Explorer, Safari si Chrome ignora rel="sidebar" si il trateaza ca pe un link obisnuit, [cazul de utilizare rel="sidebar"] rel="tag" "indica faptul ca tagul pe care documentul mentionat il reprezinta se aplica documentul curent". Marcarea tagurilor (cuvinte cheie ale categoriilor) cu atribut rel a fost inventata de Technorati pentru a-i ajuta sa-si organizeze postarile de pe blog. Blogurile si tutorialele timpurii se refereau la aceastea ca la "taguri Technorati". (Ati citit bine: o companie comerciala a convins intreaha lume sa adauge metadatele care au facut mai usoara munca companiei. O treaba buna !) Sintaxa a fost mai tarziu standardiata in cadrul comunitatii microformatelor, unde a fost simplu numita rel="tag". Cele mai multe sisteme de blogging care permiteau asocierea categoriilor, a cuvintelor cheie sau a tagurilor cu postari individuale le vor marca cu linkuri rel="tag". Browserele nu fac nimic special cu ele; ele sunt create pentru a fi folosite de motoarele de cautare ca indicii despre continutul de pe pagina. Codarea caracterelor Cand va ganditi la "text", va ganditi probabil la "caractere si simboluri pe care le pot vedea pe ecranul calculatorului". Dar calculatoarele nu prelucreaza caractere si simboluri; ele au de-a face cu biti si baiti. Fiecare bucata de text pe care o vedetio pe un ecran de calculator este de fapt stocata intr-un anumit cod de caractere. Exista sute de codari diferite de caractere, unele optimizate pentru anumite limbi, cum ar fi rusa, chineza sau engleza, si altele care pot fi folosite pentru mai multe limbi. In mare, putem spune despre codarea caracterelor ca ofera o relatie intre lucrurile pe care le vedeti pe ecranul calculatorului si lucrurile care sunt de fapt stocate in memorie si pe disc. In realitate, este mai complicat de atat. Acelasi caracter poate aparea in mai mult de o codare, dar fiecare codare poate sa foloseasca o secventa diferita de baiti pentru stocarea caracterelor in memorie sau pe disc. Astfel, va puteti gandi la codarea caracterelor ca la un fel de cheie de decriptare pentru text. Ori de care ori va da cineva o secventa de biti si pretinde ca este "text", trebuie sa stiti ce cod de caractere a folosit astfel incat sa decodati bitii in caractere si sa ii afisati (sau sa ii procesati ori cum vreti sa spuneti). Deci, cum determina browserul dumneavoastra codul de caractere al fluxului de biti pe care ii trimite un server web ? Ma bucur ca ati intrebat. Daca sunteti familiarizat cu headerele HTTP, sar putea sa fi vazut un header ca acesta: Code:

Content-Type: text/html; charset="utf - 8"

Pe scurt, aceasta spune ca un server web crede ca va trimite un document HTML si ca 42

documentul foloseste codarea de caractere UTF-8. Din nefericire, in intreaba magnifica supa care este World Wide Web, putin autori de pagini controleaza serverul lor HTTP. Ganditi-va la Blogger: continul este oferit de indivizi, dar serverele sunt controlate de Google. HTML 4 a oferit o cale de a preciza codarea de caractere in insusi documentul HTML. Ati vazut probabil si aceasta: Code: