PW3-Advanced HTML PDF

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
More on Web.
Ciprian Dobre ciprian.dobre@cs.pub.ro
Curs Programare Web, anul 4 C5 Curs 6
XML
eXtensible Markup Language
Programare Web
HTML i XML
XML = eXtensible Markup Language
HTML este folosit pentru formatarea textului a.. acesta s fie afiat utilizatorilor HTML descrie att structura (e.g. <p>, <h2>, <em>) ct i aparena (e.g. <br>, <font>, <i>) HTML folosete un set fix, nemodificabil de tag-uri XML este folosit pentru formatarea datelor a.. s fie procesate de calculatoare XML descrie doar coninut sau sensul textului
n XML se folosesc propriile tag-uri, fr constrngeri

3
HTML i XML
HTML i XML arat similar deoarece ambele sunt limbaje SGML (Standard Generalized Markup Language)
Att HTML ct i XML folosesc elemente ncadrate de tag-uri (e.g. <body>This is an element</body>) n ambele cazuri tag-urile pot avea atribute (e.g., <font face="Verdana" size="1" color="red">) Ambele folosesc entiti interpretabile (<, >, &, ", ')
Mai exact,
HTML este definit n SGML XML este un subset (restrns) al SGML
Curs Programare Web, anul 4 C5 Curs 7 4
HTML i XML
HTML este adresat oamenilor
HTML descrie pagini web Oamenii nu doresc s vad mesaje de eroare despre paginile vizitate
Browserele ignor i/sau corecteaz attea erori HTML ct se poate
XML este folosit de calculatoare

XML descrie date Regulile sunt stricte i nu sunt permise erori
Din acest punct de vedere XML seaman cu un limbaj de programare
Versiunile curente ale majoritii browserelor pot afia XML

Totui suportul browserelor pentru XML e destul de redus
Tehnologii nrudite XML

DTD (Document Type Definition) i XML Schemas sunt folosite pentru definirea tag-urilor legale XML i a atributelor acestora pentru scopuri particulare (metadescrieri) CSS (Cascading Style Sheets) descrie cum sunt afiate HTML i XML n browser XSLT (eXtensible Stylesheet Language Transformations) i XPath sunt folosite pentru translatarea de la o form de XML la o alta DOM (Document Object Model), SAX (Simple API for XML) i JAXP (Java API for XML Processing) sunt API-uri pentru parsare XML
Exemplu de document XML

<?xml version="1.0"?> <weatherReport> <date>7/14/97</date> <city>North Place</city>, <state>NX</state> <country>USA</country> High Temp: <high scale="F">103</high> Low Temp: <low scale="F">70</low> Morning: <morning>Partly cloudy, Hazy</morning> Afternoon: <afternoon>Sunny & hot</afternoon> Evening: <evening>Clear and Cooler</evening> </weatherReport>
Sursa: XML: A Primer, de Simon St. Laurent
Structura Un document XML poate ncepe cu una sau mai multe instruciuni de procesare (PIs) sau directive:
<?xml version="1.0"?> <?xml-stylesheet type="text/css" href="ss.css"?>
Dup directiv trebuie s existe exact un singur tag, numit elementul root, ce conine restul documentului XML:
<weatherReport> ... </weatherReport>
Elementele XML Un document XML mai este construit din:

elemente: high n <high scale="F">103</high> tag-uri, n perechi: <high scale="F">103</high> atribute: <high scale="F">103</high> entiti: <afternoon>Sunny & hot</afternoon> date de tip caractere ce pot fi:
parsate (procesate ca XML)modalitatea default neparsate (toate caractere sunt de sine stttoare)
Elemente i atribute
Atributele i elementele sunt parial interschimbabile Exemplu folosind doar elemente:
<name> <first>David</first> <last>Matuszek</last> </name>
Exemplu folosind atribute:

<name first="David" last="Matuszek"></name>
Atributele conin adesea i metadate, precum ID-uri unice n general browserele afieaz doar elemente (valori nchise de tag-uri), nu i tag-uri i atribute
10
XML bine format

Orice elemente trebuie s aib att un tag de start, ct i un tag de terminare, e.g.: <name> ... </name> Dar elementele goale pot fi abreviate: <break />. Tag-urile XML sunt case sensitive Tag-urile XML nu pot ncepe cu literele xml Elementele trebuie s fie corect imbricate, e.g. nu <b><i>bold and italic</b></i> Orice document XML trebuie s aib unul i numai un element root Valorile atributelor trebuie s fie ncadrate de ghilimele sau apostroafe, e.g. <time unit="days"> Datele caracter nu pot conine < sau &
Exemplu de document bine format

<novel> <foreword> <paragraph> This is the great American novel. </paragraph> </foreword> <chapter number="1"> <paragraph> It was a dark and stormy night. </paragraph> <paragraph> Suddenly, a shot rang out! </paragraph> </chapter> </novel>
XML ca un arbore
Un document XML reprezint o ierarhie, poate fi reprezentat ca un arbore:
novel
foreword
chapter number="1"
paragraph This is the great American novel.
paragraph It was a dark and stormy night.

paragraph Suddenly, a shot rang out!

13
XML Valid
Putei crea propriile tag-uri i atribute XML, dar...
...orice program ce folosete XML-ul trebuie s tie la ce s se atepte!
Un DTD (Document Type Definition) definete ce tag-uri sunt legale i unde pot acestea aprea n cadrul documentului XML
Un document XML nu necesit un DTD
XML este bine structurat dac respecta regulile amintite anterior n plus, un XML este valid dac specific un DTD i este conform cu respectivul DTD Un DTD poate fi inclus n XML, dar tipic se folosete ca document separat Erorile dintr-un document XML vor opri programele XML Alternative la DTD-uri sunt XML Schemas i RELAX NG
Exemplu
Putem s ne imaginm o modalitate de reprezentare a unor reete de buctrie, pe baza unor documente XML:
15
Exemplu
O versiune XML a unei colecii de astfel de reete este format din:
Reetele conin list de ingrediente, paii pentru pregtire, posibil comentarii i o specificaie a valorilor nutritive Un ingredient poate fi simplu sau compus Un ingredient simplu are un nume, o cantitate (posibil chiar nespecificat) i o unitate de msur (totui sunt i cazuri cnd nu se specific i unitate) Un ingredient compus este specificat recursiv ca o reet avnd ingrediente i modalitate de pregtire
<?xml version="1.0" encoding="UTF-8"?> <collection> <description> Some recipes used for the XML lesson. </description> <recipe> <title>Beef Parmesan with Garlic Angel Hair Pasta</title> <ingredient name="beef cube steak" amount="1.5" unit="pound"/> ... <preparation> <step> Preheat oven to 350 degrees F (175 degrees C). </step> ... </preparation> <comment> Make the meat ahead of time, and refrigerate over night, the acid in the tomato sauce will tenderize the meat even more. If you do this, save the mozzarella till the last minute. </comment> <nutrition calories="1167" fat="23" carbohydrates="45" protein="32"/> </recipe> ... </collection>
Un exemplu de document XML ce specific cinci astfel de reete:
16
Exemplu
Un exemplu de document DTD pentru reetele noastre arat astfel: Prin inserarea:
<!DOCTYPE collection SYSTEM "recipes.dtd">
<!ELEMENT collection (description,recipe*)> <!ELEMENT description ANY> <!ELEMENT recipe (title,ingredient*,preparation,comment?,nutrition)> <!ELEMENT title (#PCDATA)> <!ELEMENT ingredient (ingredient*,preparation)?> <!ATTLIST ingredient name CDATA #REQUIRED amount CDATA #IMPLIED unit CDATA #IMPLIED> <!ELEMENT preparation (step*)> <!ELEMENT step (#PCDATA)> <!ELEMENT comment (#PCDATA)> <!ELEMENT nutrition EMPTY> <!ATTLIST nutrition protein CDATA #REQUIRED carbohydrates CDATA #REQUIRED fat CDATA #REQUIRED calories CDATA #REQUIRED alcohol CDATA #IMPLIED>
specificm c dorim c documentul nostru ce conine reete trebuie s fie conform cu acest DTD Putem defini i local regulile DTD cu:
<!DOCTYPE collection [ ... ]>
17
Scop XML
XML este proiectat pentru a fi procesat de ctre programele software, nu pentru a afia date Totui aproape toate browserele pot afia documente XML
Ele nu vor fi afiate n aceeai manier Nu vor fi afiate deloc dac conin erori
Atenie: HTML este proiectat pentru a fi vizualizat, XML este proiectat pentru a fi folosit
18
Standarde extinse de documente

Putei s v definii propriile tag-uri XML, dar exist seturi deja disponibile:
XHTML: HTML redefinit pentru XML SMIL: Synchronized Multimedia Integration Language MathML: Mathematical Markup Language SVG: Scalable Vector Graphics DrawML: Drawing MetaLanguage ICE: Information and Content Exchange ebXML: Electronic Business with XML cxml: Commerce XML CBL: Common Business Library
XHTML
http://www.w3schools.com/xhtml/
20
Cuvnt nainte: Origini
21
Origini
HTML dezvoltat de Tim Berners-Lee n 1989
O modalitate de accesare a bazei de date ENQUIRE peste Internet Rezultatul a devenit World Wide Web
HTML-ul a fost definit ca o aplicaie a SGML,

standardul ISO oferea suport pentru documente structurate
Pentru a face din HTML un standard, Berners-Lee avea nevoie de o implementare real a unei aplicaii care s suporte astfel de documente
S-a oprit la Mosaic un browser a crui finanare era suportat de congresman-ul Al Gore
HTML devine suportat de AOL, CompuServe, MSN, etc.

Open-standard i avnd n spate investiii critice suportate de guvernul USA Ameninare la adresa supremaiei Microsoft*
*http://www.roughlydrafted.com/RD/RDM.Tech.Q2.07/12C0979F-82C7-4952-898A-55051A2D3897.html
Origini
Cnd standardul devine popular, se pune problema controlului asupra acestuia:
IETF formeaz HTML Working Group cu scopul de a ncepe lucrul la HTML 2.0 Berners-Lee creaz World Wide Web Consortium (W3C) scop: promovarea tehnologii Web IETF reuete s scoat standardul HTML 2.0 n 1995, totui n 1996 controlul revine n ntregime ctre W3C
HTML 2.0
Integrarea extensiilor pe care dezvoltatorii de browsere le ncorporase ad-hoc pentru diverse funcionaliti
HTML 3.0
n 1995, W3C scoate HTML 3.0 ca o modalitate de formalizare a unor funcii precum suportul pentru documente tiinifice i matematice
Origini
Rzboiul dezvoltatorilor de browsere continu
Fiecare vendor propune funcii noi, ne-standadizate, n ncercarea de a acumula segmente din piaa nou n continu expansiune: Microsoft reuete s scoat 3 versiuni stabile ntr-un singur an (1996) a IE, ntr-o ncercare de a lega viitorul Web-ului de platforma Windows
IE 3.0 vine cu suport pentru ActiveX, tehnologia de contrucie a unor controale bogate (dar care ruleaz doar pe Windows)
Netscape vine cu propria implementare de ActiveX i adaug limbajul de scripting JavaScript

IE nu se las mai prejos i propune Jscript
n ncercarea de a nvinge, apar dispute cu privire la ce i cum ar trebui standardizat n HTML:

Netscape propune tag-ul BLINK Microsoft vine cu MARQUEE
Origini
Mediatorul e tot W3C
n standard nu intr nici BLINK, nici MARQUEE Suportul pentru prezentare din Netscape e deprecated n loc se propune folosirea CSS ca form de separare a elementelor HTML de cele de formatare/stil
HTML 4.0 lansat n 1997 (HTML 4.01 n 1999)

Pe lng separare coninut de prezentare, HTML 4 standadizeaz i elementele de limbaj JavaScript i modalitatea de acces cu documentul pe baza DOM
W3C a decis i s conduc HTML 4 ntr-o nou direcie:

n loc s fie o form de SGML, noua specificaie conduce HTML nspre stricteea XML:
Documentele HTML ar putea fi astfel mai uor procesate de motoare XML HTML-ul devine n acelai timp deschis, n loc de a complica structura standardului, utilizatorul ar putea veni cu tag-uri definite ntr-o bibliotec extern pentru reprezentri particulare (e.g., pentru matematic se poate folosi MathML)
Tem pentru acas

Tema const ntr-un eseu avnd ca subiect:

HTML 5 viitorul Web-ului? Vei urmri n principal (dar nu numai):

Ce este HTML 5, Ce elemente noi aduce acest standard, cui se adreseaz Ce organizaii sunt implicate n efortul de standardizare, Minim 1 paragraf n care s prezentai propria voastr prere vizavi de standard (elemente pro i contra) cu justificare. Referine.
Reguli de trimitere:
Se accept doar documente n format PDF Formatare: pagina A4, font Times New Roman, dimensiune 12, fr spaiere, margini 2,5 cm stnga, dreapta, jos, sus Eseul trebuie s se ntind pe minim 1 pagin i maxim 3 pagini
Rspunsurile se trimit electronic, pe site-ul cursului (curs.cs.pub.ro), pn pe data de 13.03.2013, ora 23.55.
Nu se accept ntrzieri: temele trimise dup aceast dat nu sunt luate n considerare.
Dar la noi?
www.pub.ro a aprut n 1997, coninea elemente minimale de HTML 3.2
27
HTML 4
HTML 4 extinde HTML cu mecanisme adecvate pentru:*
Elemente de style sheet, Limbaje de scripting, Frame-uri, Obiecte embedded, Suport mbuntit pentru text reprezentat de la dreapta la stnga Elemente mai bogate de prezentare a tabelelor mbuntiri pentru reprezentarea formularelor, oferirea de suport pentru persoane cu disabiliti.
*http://www.w3.org/TR/1999/REC-html401-19991224/intro/intro.html#h-2.3
Ce este XHTML? XHTML = Extensible Hypertext Markup Language

XHTML urmrete s nlocuiasc HTML XHTML este aproape identic cu HTML 4.01 XHTML este o versiune mai strict i mai curat a HTML XHTML este HTML redefinit ca o aplicaie XML XHTML este o punte ntre HTML i XML
29
Problema cu HTML
HTML a fost conceput ca o modalitate de a descrie structura unui document, cu tag-uri pentru a indica headere, paragrafe, etc. Apare nevoia de control asupra aparenei documentelor, motiv pentru care HTML a fost mbogit cu tag-uri pentru controlul font-urilor, aliniatelor, etc.
30
HTML vs. XML

XML arat mult ca HTML, dar:
HTML folosete un set fix de tag-uri HTML este proiectat pentru afiarea datelor n form uman Browser-ele sunt foarte tolerante cu erorile n HTML Toate browserele pot afia HTML n XML putei folosi propriile tag-uri (i defini ce reprezint ele ntr-un document separat) XML este proiectat pentru descrierea datelor pentru computere Documentele XML trebuie s fie bine formate (corect sintactic) Toate browserele moderne afieaz XML, dar n diverse moduri
31
Codificarea documentelor XML

Un document XML ncepe cu o declaraie:
<?xml version='1.0' encoding='utf-8'?>
Forma arborescent:
Exist exact un element rdcin Elementele sunt coninute unele n altele, formnd o ierarhie arborescent
<person> <firstname>Ion</firstname> <lastname>Popescu</lastname> <age>30</age> <ssn>2711130345678</ssn> </person>
Documente XML bine formate

Reminder: document XML bine format = un document corect din punctul de vedere al regulilor sintactice generale XML:
are exact un element rdcin fiecare element are un tag de sfrit elementele sunt imbricate corect valorile atributelor sunt ntre ghilimele
33
Documente XML: Valide XML Schema

Document XML Valid: un document care respect reguli impuse structurii Metode de specificare formal a structurii unui document XML:
XML DTD (Data Type Definition): XML Schema (XSD): un limbaj ce impune constrngeri asupra structurii documentelor XML
Pentru o clas de documente XML se pot impune reguli privitoare la:

Ce tag-uri sunt permise, n ce ordine pot sa apar, de cte ori, ce atribute pot s aib, de ce tipuri, etc.
Parserele XML cu validare verific respectarea constrngerilor impuse de o schem specificat XML Schema Tutorial: http://www.w3schools.com/schema/default.asp
Exemplu - XML Schema

Pentru reprezentarea unui set de puncte n plan se stabilesc urmtoarele reguli:
Elementul rdcin este dots <xs:element name="dots"> Acesta poate conine un numr oarecare de elemente de tip dot - este un tip complex pentru c el conine i alte elemente <xs:complexType> Conine o secven de alte elemente <xs:sequence> Fiecare element dot are 2 atribute, x i y, cu valori ntregi <xs:attribute name="x" type="xs:integer" />
Exemplu XML Schema

dots.xsd
<?xml version="1.0"?> <xs:schema xmlns:xs=http://www.w3.org/2001/XMLSchema> <xs:element name="dots"> <xs:complexType> <xs:sequence> <xs:element name="dot" maxOccurs="unbounded"> <xs:complexType> <xs:attribute name="x" type="xs:integer" use="required"/> <xs:attribute name="y" type="xs:integer" use="required"/> </xs:complexType> </xs:element> </xs:sequence> </xs:complexType> </xs:element> </xs:schema>
Exemplu: document XML cu schema

dots.xml
<?xml version="1.0" encoding="UTF-8" ?> <dots xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="dots.xsd">> <dot x="32" y="100" /> <dot x="17" y="14" /> <dot x="18" y="58" > </dot> </dots>
Comparaie HTML / XHTML

Un documnt valid HTML (SGML) nu este neaprat i un document valid XHTML (XML):
01.04.2010
38
De la HTML la XHTML, I
Elementele XHTML trebuie s fie corect imbricate
<b><i>bold and italic</b></i> este greit
Documentele XHTML trebuie s fie bine formate

<html> <head> ... </head> <body> ... </body> </html>
Numele de tag-uri trebuie s fie lowercase Toate elementele XHTML trebuie s fie nchise
Dac un tag HTML nu este un container el se nchide: <br />, <hr />, <img src="smile.gif" />
De la HTML la XHTML, II
Numele de atribute trebuie s fie lower case
Exemplu: <table width="100%">
Valorile atributelor trebuie s fie ncadrate de

Exemplu: <table width="100%">
Minimizarea atributelor este interzis

Exemplu: <frame noresize="noresize">, nu poate fi abreviat prin <frame noresize>
Atributul id nlocuiete atributul name

Greit: <img src="picture.gif" name="picture1" /> Corect: <img src="picture.gif" id="picture1" /> Cel mai bine: <img src="picture.gif" name="picture1" id="picture1" />
XHTML i DTD-uri
HTML, XHTML, XML i multe alte limbaje de markup ce suport DTD-uri DTD (Document Type Definition) descrie sintaxa ce trebuie folosit pentru un anumit document, folosirea unui DTD fiind o regul n cazul documentelor XHTML Exist trei tipuri diferite de DTD-uri pentru XHTML putei lucra cu oricare
Ele sunt publice pe web Documentul XHTML trebuie s nceap cu o referin la unul dintre aceste DTD-uri
Declaraia DOCTYPE
Orice document XHTML trebuie s nceap cu o declaraie DOCTYPE (ce specific DTD-ul curent folosit):
1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
42
Declaraia DOCTYPE Cele trei tipuri de DTD-uri sunt:

Strict
Specific c documentul XHTML e curat, el nu conine informaii de afiare (precum cele legate de font, culoare sau dimensiune). Stilul acesta e folosit n conjuncie cu un CSS dac se dorete definirea totui a felului n care trebuie s arate reprezentarea documentului.
Transitional
Folosit cu HTML standard i/sau cu CSS. Permite introducerea de elemente HTML depricated (tag-uri <center>, <embed>, <font>, <i>, <u> sau atribute <align>, <background>, <color>, <height>, <size>, etc).
Frameset
Folosit dac documentul include frame-uri HTML
"Strict" vs "Transitional"
Demarcaia ntre markup i prezentare
Markup / Presentation - Transitional
Markup / Presentation - Strict
01.04.2010
44
Exemplu de document XHTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1strict.dtd"> <html> <head> <title>A simple document</title> </head> <body> <p>A simple paragraph.</p> </body> </html>
45
Instrumente utile
Dave Raggett's HTML TIDY
http://www.w3.org/People/Raggett/tidy/ este un instrument free UNIX pentru verificarea i curarea paginilor HTML
W3C HTML Validation Tool

http://validator.w3.org/ este un formular HTML pentru verificarea (dar nu i corectarea) documentelor HTML i XHTML
46
Reminder: Vocabular
SGML: Standard Generalized Markup Language
HTML: Hypertext Markup Language XHTML: eXtensible Hypertext Markup Language XML: eXtensible Markup Language
DTD: Document Type Definition
47
Solar System: Markup + Style + Function
04.03.2010
Programare Web Curs 2
48
XHTML Document Structure

Document Type Declaration html
head body
A Tree
01.04.2010
49
Skeleton XHTML Document
01.04.2010
50
CSS (Cascading Style Sheet )
51
Problema cu HTML
HTML a fost de la nceput conceput pentru a descrie coninutul unui document Autorii de pagini web nu aveau nevoie s descrie layout-ul -browserul avea grij de acest aspect Aceasta reprezint o abordare inginereasc corect, ns nu satisface nevoile stilitilor i artitilor
Oamenii ce aveau nevoie sa spun mai multe simeau nevoia unui control mai bun al modului de prezentare a propriilor pagini Web
Ca rezultat, HTML a nceput s ncorporeze din ce n ce mai multe tag-uri folosite pentru controlul afirii
Coninutul i modul de afiare al informailor au devenit din ce n ce mai mult interconectate Browsere diferite afieaz totui lucrurile n moduri diferite, ceea ce reprezint o problem real atunci cnd modul de prezentare al informaiilor e chiar mai important dect informaia propriu-zis
Cascading Style Sheets

Cascading Style Sheet (CSS) este o modalitate de separare a elementelor de prezentare de elementele de date
Practic modul de prezentare al unei pagini HTML se poate descrie mai curat, ntr-un document separat, rezultnd n independen ntre form i coninut
CSS are cteva avantaje:

Permite separarea coninutului de prezentare Permite definirea prezentrii i a layout-ului tuturor paginilor dintr-un site Web, ntr-o manier unitar, printr-o construcie unic Poate fi folosit att mpreun cu pagini HTML, ct i cu cele XML
n opinia criticilor, totui CSS are dezavantaje:

Unele browsere mai vechi nu l suport n totalitate n funcie de dimensiune, documentele CSS externe pot crete timpul de ncrcare a paginilor
Exemplu: Harvard Summer School

With CSS disabled:
01.04.2010
54
Sintaxa CSS
Sintaxa CSS este compus dintr-o list de selectori (pentru alegerea tag-urilor) i descriptori (pentru a specifica ce dorim s facem cu respectivele tag-uri):
Exemplu: h1 {color: green; font-family: Verdana} specific c orice text inclus n tag-uri h1 (HTML heading level 1) trebuie afiat folosind font de tip Verdana i colorat n verde
Un fiier CSS reprezint o list de astfel de perechi selector/descriptor

Selectorii pot fi simple tag-uri HTML sau XML CSS permite de asemenea definirea altor moduri de combinare a tag-urilor Descriptorii sunt definii chiar n CSS
55
Sintaxa CSS
Sintaxa generala este:
selector { property: value } sau selector, ..., selector { property: value; ... property: value } unde selector reprezint tag-ul afectat de stil (selectorul este casesensitive dac i numai dac limbajul de descriere a documentului este case-sensitive). property i value descriu modul de afiare al respectivului tag. Spaiile dup virgule i punct si virgule sunt opionale. Un punct i virgul trebuie s fie folosit ntre perechi property:value, dar dup ultima pereche punct i virgul devine caracter opional.
Anatomia unei reguli CSS
01.04.2010
57
01.04.2010
58
Exemplu de CSS
/* Acesta este un comentariu */ h1,h2,h3 {font-family: Arial, sans-serif;} /*folosete primul font disponibil */ p, table, li, address { font-family: "Courier New"; } margin-left: 15pt; /* se aplic tuturor acestor tag-uri */ /* valoare ncadrat ntre ghilimele ce conine spaii */ /* indentare */ /* 80% din dimensiunea elemenului ce l conine */ /* culorile pot fi specificate n hexa */ /* se adaug elementelor specificate */ /* un link ne-vizitat */ /* un link vizitat */ /* un link deja vizitat */ /* atunci cnd mouse-ul trece deasupra elementului */
59
p, li, th, td {font-size: 80%;} th {background-color:#FAEBD7} body { background-color: #ffffff;} h1,h2,h3,hr {color:saddlebrown;} a:link {color:darkred} a:visited {color:darkred} a:active {color:red} a:hover {color:red}
Selectori
Un tag XML sau HTML poate fi folosit ca un simplu element selector:
body { background-color: #ffffff }
Putem ns folosi i selectori multipli:

em, i {color: red}
Putem repeta selectorii:

h1, h2, h3 {font-family: Verdana; color: red} h1, h3 {font-weight: bold; color: pink} Atunci cnd valorile nu coincid, ultima declaraie suprascrie declaraiile anterioare
Selectorul universal * se aplic oricrui i tuturor elementelor:

* {color: blue} Atunci cnd valorile nu coincid, selectorii mai specifici suprascriu comportamentul selectorilor mai generali (deci elementele em vor fi n continuare roii)
60
Exemplu de suprascriere
61
Reguli combinate
Regulile pot fi combinate
01.04.2010
62
Selectori
Un selector descendent alege un tag avnd un element ancestor corespunztor:
p code { color: brown } selecteaz code doar dac este folosit n interiorul unui paragraf
Un selector copil > alege un tag avnd un printe corespunztor:

h3 > em { font-weight: bold } selecteaz un em doar dac printele imediat este h3
Un selector adiacent alege un element ce imediat urmeaz altuia:

b + i { font-size: 8pt } Exemplu: <b>I'm bold and</b> <i>I'm italic</i> Rezultatul va arata astfel: I'm bold and I'm italic
63
Selectori
Un selector simplu de atribut permite alegerea elementelor ce au un anumit atribut, indiferent de valoarea acestuia:
Sintaxa: element[atribut] { ... } Exemplu: table[border] { ... }
Un selector de atribut valoare permite alegerea elementelor ce au un anumit atribut avnd o anumit valoare:
Sintaxa: element[atribut="valoare"] { ... } Exemplu: table[border="0"] { ... }
64
Combinarea selectorilor
i selectorii pot fi combinai
01.04.2010
65
Valori
Sintaxa unei reguli CSS este:
selector, ..., selector { property: value; . . . property: value }
Valoarea este orice apare ntre dou puncte i punct i virgul (sau acolad) Exemple:
* {font-family: Trebuchet, Verdana, sans-serif;}
Aceasta nseamn ca trebuie folosit font Trebuchet pentru orice, dac este disponibil; altfel, se folosete font Verdana, dac este disponibil; altfel folosete orice font sans serif pe care browserul l are instalat.
section {border: thin solid blue;}

Aceasta nseamn c trebuie pus un border n jurul elementelor section; acesta trebuie s fie subire i solid i albastr
66
Atributul class
Atributul class permite definirea mai multor stiluri diferite pentru un acelai element:
n fiierul de style sheet: p.important {font-size: 24pt; color: red} p.fineprint {font-size: 8pt} n documentul HTML: <p class="important">The end is nigh!</p> <p class="fineprint">Offer ends 1/1/97.</p>
Pentru definirea unui selector ce se aplic oricrui element avnd o anumit clas se omite numele tag-ului (dar se pstreaz punctul):
.fineprint {font-size: 8pt}
Atributul id
Atributul id este definit similar atributului class, dar folosete # in loc de .
n fiierul style sheet: p#important {font-style: italic} # important {font-style: italic} n documentul HTML: <p id="important"> sau
class i id pot fi ambele folosite i nu e obligatoriu s aib nume diferite:

<p class="important" id="important">
68
div i span
div i span sunt elemente HTML ce au ca scop introducerea de informaii de prezentare a elementelor pe baza regulilor CSS div asigur existena unei linii noi nainte i dup (similar unui paragraf); span nu Exemplu:
CSS: div {background-color: #66FFFF} span.color {color: red} HTML: <div>This div is treated like a paragraph, but <span class="color">this span</span> is not.</div>
69
Rezultat:
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <link REL="STYLESHEET" TYPE="text/css" HREF="stil.css"/> </head> <body> Text inainte. <div>This div is treated like a paragraph, but <span class="color">this span</span> is not.</div> Text dupa. </body> </html>
70
Alt exemplu
Elementele <div> sunt cel mai adesea folosite pentru poziionare:
#container { position: relative } #navigation { position: absolute; left: 30px; top: 5px }
<div id="container"><div id="navigation">Text</div></div>
71
Folosirea elementelor CSS

Sunt trei moduri de folosire a unui CSS: 1. Style sheet extern
Elementele CSS sunt specificate ntr-un document extern Se poate folosi att pentru HTML, ct i pentru XML Toate elementele CSS pot fi folosite
2. Style sheet embedded

Se aplic doar pentru HTML, nu i pentru XML Toate elementele CSS pot fi folosite
3. Stiluri inline
Se aplic doar pentru HTML, nu i pentru XML Form limitat de sintax CSS
External style sheet

Toate elementele CSS se definesc ntr-un fiier extern Pentru a folosi elementele definite n fiierul extern, se adaug n HTML, n interiorul elementului <head> sintaxa:
<link REL="STYLESHEET" TYPE="text/css" HREF="Style Sheet URL">
Sau n prologul unui document XML se poate aduga sintaxa:

<?xml-stylesheet href="Style Sheet URL" type="text/css"?>
73
Embedded style sheet

Elementele CSS se definesc n interiorul documentului HTML, n interiorul elementului <head>:
<style TYPE="text/css"> <!-CSS Style Sheet --> </style>
Not: ncapsularea style sheet-ului ntr-un comentariu reprezint un artificiu de ascundere a informaiei de browsere mai vechi ce nu neleg sintaxa CSS.
Inline style sheet

Atributul STYLE poate fi adugat oricrui element HTML:
<html-tag STYLE="property: value"> sau <html-tag STYLE="property: value; property: value; ...; property: value">
Avantaj:
Folositor dac dorim doar o mic modificare de stil
Dezavantaje:
Mix de informaii de prezentare n cadrul HTML Ascunde i ngreuneaz vizibilitatea codului HTML Nu se pot folosi toate elementele CSS
Ordinea de cascadare
Stilurile vor fi aplicate unui document HTML n ordinea urmtoare:
1. Stilul implicit al browser-ului 2. External style sheet 3. Internal style sheet (n interiorul tag-ului <head>) 4. Inline style (n interiorul altor elemente, cele mai din afar mai nti)
Cnd elementele de stil ajung s fie n conflict, cel mai apropiat (mai recent aplicat) stil ctig
76
Exemplu de ordine de cascadare

External style sheet: h3 { } Internal style sheet: h3 { } Atributele rezultante: color: red; text-align: right; font-size: 20pt text-align: right; font-size: 20pt color: red; text-align: left; font-size: 8pt
77
Alt exemplu
Considerm documentul HTML:
<p class="pclass" id="pid"><span class="sclass" id="sid">text</span></p>
Cazurile considerate de CSS:

span#sid { color: red; } #pid span { color: green; } #pid { color: blue; font-size: 10px; } #pid span { color: red !important;} p #sid { color: green; font-size: 150%; } Textul va fi afiat verde
Cum va fi afiat textul?
Rspuns: Textul va fi afiat rou cu dimensiunea 15px (font-size: 10px, combinat cu font-size: 150% => 10 x 1.5 = 15px)
78
Un exemplu XML
<?xml version="1.0" standalone="no"?> <!DOCTYPE novel SYSTEM "novel.dtd"> <?xml-stylesheet href="styles.css" type="text/css"?> <novel> <foreword> <paragraph>This is the great American novel.</paragraph> </foreword> <chapter> <paragraph>It was a dark and stormy night.</paragraph> <paragraph>Suddenly, a shot rang out!</paragraph> </chapter> </novel> chapter {font-family: "Papyrus", fantasy} foreword > paragraph {border: solid red; padding: 10px} novel > foreword {font-family: Impact; color: blue} chapter {display: block} chapter:first-letter {font-size: 200%; float: left} paragraph {display: block} chapter:before {content: "New chapter: "}
CSS:
Rezultatul
Rezultat afiat de Firefox 4:
Rezultat afiat de IE
80
Cteva proprieti i valori pentru font

font-family:
inherit (la fel ca fontul elementului parent, motenire) Verdana, "Courier New", ... (dac fontul este instalat n browser) serif | sans-serif | cursive | fantasy | monospace (fonturi generice: browser-ul decide ce font s foloseasc)
font-size:
inherit | smaller | larger | xx-small | x-small | small | medium | large | x-large | xx-large | 12pt
font-weight:
normal | bold |bolder | lighter | 100 | 200 | ... | 700
font-style:
normal | italic | oblique
81
Forma prescurtat de specificare a proprietilor

Adesea mai multe proprieti pot fi combinate, acest aspect ajutnd la o scriere mai rapid a specificaiilor de prezentare De exemplu, dac considerm construcia CSS:
h2 { font-weight: bold; font-variant: small-caps; fontsize: 12pt; line-height: 14pt; font-family: sans-serif }
Ea poate fi scris sub forma prescurtat:

h2 { font: bold small-caps 12pt/14pt sans-serif }
82
Culori i lungimi
color: i background-color:
aqua | black | blue | fuchsia | gray | green | lime | maroon | navy | olive | purple | red | silver | teal | white | #FF0000 | #F00 | rgb(255, 0, 0) | Alte nume recunoscute de browser (nu se recomand)
Acestea sunt elemente folosite pentru unitile de msur:

em, ex, px, %
Dimensiunea fontului, nlimea pe x, pixeli, procent din dimensiunea motenit
in, cm, mm, pt, pc

inci, centimetri, milimetri, puncte (1/72 dintr-un inch), picas (1 pica = 12 puncte), relative la valoarea motenit
Cteva proprieti i valori pentru text

text-align:
left | right | center | justify
text-decoration:
none | underline | overline | line-through
text-transform:
none | capitalize | uppercase | lowercase
text-indent
length | 10% (indentarea primei linii a textului)
white-space:
normal | pre | nowrap
Pseudo-clase
Pseudo-clasele sunt elemente ale cror stare (i mod de aparitie) poate varia n timp Sintaxa: element:pseudo-class {...}
:link Un link ce nu a fost vizitat :visited Un link ce a fost vizitat :active Un link pe care tocmai se execut un click :hover Un link peste care este poziionat cursorul mouseului
Pseudo-clasele sunt permise oriunde n cadrul selectorilor CSS

Alegerea numelor
CSS este proiectat pentru a separa coninut de stil
Prin urmare, numele ce sunt folosite n HTML sau (mai ales) n XML trebuie s descrie coninut, nu stil
Exemplu:
S presupunem c definii span.huge {font-size: 36pt} i folosii <span class="huge"> n cadrul mai multor documente Ulterior descoperii c utilizatorii dezagreaz stilul acesta, deci modificai CSS-ul n span.huge {font-color: red} Numele este incorect ales; ncercai s l redenumii n toate documentele? Daca ai fi ales de la nceput span.important {font-size: 36pt}, ar fi fost mai uor de ntreinut propriile documente
Web Developer Extension
01.04.2010
87
Eg.: Firebug
01.04.2010
88
Firebug
Disable CSS Rules in Firebug:
Edit CSS in Firebug:
01.04.2010
89
Google Chrome: Developer Tools
01.04.2010
90
01.04.2010
91
Internet Explorer: Developer Tools
01.04.2010
92
01.04.2010
93
HTML 5
01.04.2010
94
HTML reminder
HTML 1.0 i HTML+ 1990, respectiv 1993. HTML 2.0 - 1994, a fost prima versiune standardizat, (49 taguri). HTML 3.0 - 1995. Versiunea cuprindea extensii importante, cum ar fi marcaje pentru notaii matematice, bannere etc. HTML 3.2, - Ianuarie 1997, este considerat ca succesorul versiunii 2.0, incorpornd o serie de taguri din HTML 3.0. HTML 4 - Decembrie 1997 extinde HTML cu mecanisme pentru stylesheets, script-uri, frame-uri, un suport mai mare i mbuntit pentru alinierea textului, tabele mai bogate i mbunatiri ale formularelor, oferind o accesibilitate mai mare pentru oamenii cu deficit. HTML 4.01 - Decembrie 1999 este o versiune revizuit de HTML4.0 care corecteaza unele erori si face unele schimbari in privinta modului de functionare a unor sintaxe.
01.04.2010 Curs Programare Web, anul 4 C5 Curs 6 95
Markup Evolution
01.04.2010
96
Timeline of Web Markup and Style Standards
01.04.2010
97
HTML 5
2004 Web Hypertext Application Working Group (WHATWG) au inceput lucrul la noul standard HTML 2004 Consortiul W3C se concentrau asupra dezvoltarii XHTML 2.0 desi HTML 4.01 nu mai fusese actualizat inca din 2000. 2007 Specificatiile HTML 5 ale WHATWG au fost apoi adoptate de catre W3C ca punct de start al noului standard HTML.
01.04.2010 Curs Programare Web, anul 4 C5 Curs 6 98
HTML 5
HTML5 este ultima versiune HTML si XHTML. Standardul incearca sa rezolve problemele intalnite in versiunile anterioare HTML si se adreseaza nevoii de APLICATII WEB, un domeniu ce nu a fost acoperit de catre HTML pana in acest moment. Desi ultima versiune HTML 5 lansata pe data de 22 Februarie 2012 este o ciorna (W3C Working Draft), dezvoltatorii browserelor au inceput sa implementeze parti din functionalitatile prezente in standardul HTML5.
De ce HTML5?
Calculatoare performante folosite insuficient Numarul utilizatorilor de servicii web devine din ce in ce mai mare
Performantele JavaScript.
ELEMENTE SIMPLIFICATE IN HTML5
DOCTYPE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR /xhtml1/DTD/xhtml1transitional.dtd">
HTML 5 <!DOCTYPE html>
Radacina HTML
<html xmlns=http://www.w3.org/1999/x html lang="en" xml:lang="en">
HTML 5 <html lang="en">
CHARSET
<meta http-equiv="Content-Type" content="text/html; charset=utf8">
HTML 5 <meta charset="utf-8">
STYLESHEET
<link rel="stylesheet" href="styleoriginal.css" type="text/css" />
HTML 5 <link rel="stylesheet" href="style-original.css" />
ELEMENTE NOI IN HTML5
Elementul Base
<head> <base href=url target="_blank" /> </head> -se introduce adresa de baza.
Elemente semantice de sectionare HTML 4
HTML 5
Elemente semantice de sectionare
<HEADER>
HTML 4
<div id="header"> <h1>My Weblog</h1> <p class="tagline">A lot of effort went into making this effortless.</p> </div>
HTML 5
<header> <h1>My Weblog</h1> <p class="tagline">A lot of effort went into making this effortless.</p> </header>
<HGROUP>
HTML 4
<h1>My Weblog</h1> <h2>A lot of effort went into making this effortless.</h2>
HTML 5
<header>
<hgroup> <h1>My Weblog</h1> <h2>A lot of effort went into making this ffortless.</h2> </hgroup>
</header>
Exemplu
<header> <hgroup> <h1><a href="/">Mini Apps</a></h1> <h2>Web applications for iPhone, Android & other mobile platforms</h2> </hgroup> </header>
<FOOTER>
HTML 4
<div id="footer"> <p>§</p> <p>© 2001–9 <a href="#">Mark Pilgrim</a></p> </div>
HTML 5
<footer> <p>§</p> <p>© 2001–9 <a href="#">Mark Pilgrim</a> </p> </footer>
<SECTION>
Sectiune generica de aplicatie sau document
<section> <h1>Level 1</h1> <section> <h1>Level 2</h1> <section> <h1>Level 3</h1> </section> </section>
<ARTICLE>
HTML 4
<div class="entry"> <p class="post-date">October 22, 2009</p> <h2> <a href="#" rel="bookmark" title="link to this post"> Travel day </a> </h2> </div>
<article> <header> <p class="post-date">October 22, 2009</p> <h1> <a href="#" rel="bookmark" title="link to this post"> Travel day </a> </h1> </header> </article>
HTML 5
<ASIDE>
HTML5 <aside>
<h1>Archives</h1> <ul>
<li><a href="/2007/09/">September 2007</a></li> <li><a href="/2007/08/">August 2007</a></li> <li><a href="/2007/07/">July 2007</a></li> </ul>
</aside>
<NAV>
HTML 4
<div id="nav"> <ul> <li><a href="#">home</a></li> <li><a href="#">blog</a></li> <li><a href="#">gallery</a></li> <li><a href="#">about</a></li> </ul> </div>
HTML 5
<nav> <ul> <li><a href="#">home</a></li> <li><a href="#">blog</a></li> <li><a href="#">gallery</a></li> <li><a href="#">about</a></li> </ul> </nav>
<TIME>
<time datetime="2009-10-22" pubdate>October 22, 2009</time> <time datetime="2009-10-22T13:59:47-04:00" pubdate> October 22, 2009 1:59pm EDT </time> <article> <header>
<time datetime="2009-10-22" pubdate> October 22, 2009 </time> <h1> <a href="#" rel="bookmark" title="link to this post"> Travel day </a> </h1>
</header> <p>Lorem ipsum dolor sit amet</p> </article>
a resolution-dependent bitmap canvas which can be used for rendering graphs, game graphics, or other visual images on the fly.
GRAFICA IN HTML5 <CANVAS>
<CANVAS>
Sintaxa:
<canvas id="a" width="300" height="225"></canvas>
Utilizare cu JavaScript & DOM

var a_canvas = document.getElementById("a"); Desenare
function draw_b() {
var b_canvas = document.getElementById("b"); var b_context = b_canvas.getContext("2d");//future 3D b_context.fillRect(50, 25, 150, 100);
<CANVAS>
Desenarea in Canvas Context: Sunt esentiale functiile:
beginPath() closePath() stroke() fill()
Proprietati:
fillStyle = (CSS color,pattern,gradient) strokeStyle= (CSS color,pattern,gradient)
<CANVAS>
Alte functii de desenare in canvas context o Desenare dreptunghiuri
fillRect(x, y, width, height) strokeRect(x, y, width, height) clearRect(x, y, width, height)
o Desenare linii
o moveTo(x, y) o lineTo(x, y)
<CANVAS>
o Desenarearce
arc(x,y,radius,startAngle,endAngle,anticlockwise)
(pentrucercstartAngle=0,endAngle=Math.pi*2)
quadraticCurveTo(cp1x, cp1y, x, y) bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
x,ycoordonatelepunctuluidesfarsit cp1x,cp1y,cp2x,cp2ycoordonateleprimuluisiceluidealdoileapunctdecontrol.
Desenareadetext o Proprietaticontext:
Context.font={font} Context.textAlign={start,end,left,right,center}; Context.textBaseline={top,hanging,middle,alphabetic,ideographic,bottom};
oFunctiadedesenare
o Context.fillText(text,x,y);
<CANVAS>
o Crearea unui gradient
createLinearGradient(x0, y0, x1, y1) createRadialGradient(x0, y0, r0, x1, y1, r1)
Exemple gradient:
1. var my_gradient = context.createLinearGradient(0, 0, 300, 0); my_gradient.addColorStop(0, "black"); my_gradient.addColorStop(1, "white"); context.fillStyle = my_gradient; context.fillRect(0, 0, 300, 225);
<CANVAS>
<CANVAS>
o Desenarea de imagini
o o o drawImage(image, dx, dy) drawImage(image, dx, dy, dw, dh) drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)
<CANVAS>
Exemple desenare imagini
1. <img id="cat" src="images/cat.png" alt="sleeping cat" width="177" height="113"> <canvas id="e" width="177" height="113"></canvas> <script> window.onload = function() { var canvas = document.getElementById("e"); var context = canvas.getContext("2d"); var cat = document.getElementById("cat"); context.drawImage(cat, 0, 0); }; </script> 2. <canvas id="e" width="177" height="113"></canvas> <script> var canvas = document.getElementById("e"); var context = canvas.getContext("2d"); var cat = new Image(); cat.src = "images/cat.png"; cat.onload = function() { context.drawImage(cat, 0, 0); }; </script>
<CANVAS>
Transformari
Pentru a retine si a prelua starile panzei :
Save(); Restore();
Starea panzei=transformari, valorile proprietatilor strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, lineJoin, miterLimit, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor
Translatarea: translate(x, y)
<CANVAS>
Rotatia: rotate(angle)
Scalarea: scale(x, y)
Umbre
Proprietati context:
ShadowColor ShadowOffsetX ShadowOffsetY ShadowBlur
Exemple <CANVAS>
http://html5demos.com/canvas-grad
Exemple <CANVAS>
First person gifter http://htmlfive.appspot.com/static/gifter.html
01.04.2010
132
HTML5 API VIDEO & AUDIO

Continut media fara plugin Multitudine de formate video:
MPEG4 FLASH VIDEO OGG AUDIO VIDEO INTERLACED
HTML 4:
<video src="video.ogg"> <object data="videoplayer.swf" type="application/x-shockwave-flash"> <param name="movie" value="video.swf"/> </object> </video>

HTML5
<video src="video.ogg" controls> Your browser does not support HTML5 video. </video> <audio controls src="johann_sebastian_bach_air.ogg"> An audio clip from Johann Sebastian Bach. </audio>
Functii media
Load() Play() Pause() canPlayType(type)
<video width="320" height="240" controls> <source src="pr6.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> <source src="pr6.webm" type='video/webm; codecs="vp8, vorbis"'> <source src="pr6.ogv" type='video/ogg; codecs="theora, vorbis"'> </video> <audio controls> <source src="johann_sebastian_bach_air.ogg"> <source src="johann_sebastian_bach_air.mp3"> An audio clip from Johann Sebastian Bach. </audio>

Atribute ReadOnly
Duration Paused Ended startTime Error currentSrc Autoplay Loop currentTime Controls Volume (0.0-1.0) Muted Preload
Atribute ce pot fi folosite in Javascript

Atribute legate de format

Type=formatul containerului (e.g video/mp4); Codecs=video codec, audio codec.
HTML5 API - GEOLOCATIE

O noua proprietate a obiectului global navigator:
Navigator.geoLocation
Detecteaza locatia utilizatorului curent utilizand urmatoarele informatii:

-Adresa IP -Conexiunile la retele wireless -Turnul de comunicatii cu care comunica telefonul -hardware GPS

Exemplu de implementare:
function get_location() { navigator.geolocation.getCurrentPosition(show_map); } //determina afisarea unei bare de informatii ce intreaba utilizatorul daca doreste sa isi dezvaluie locatia sa. //show_map ->functia de callback function show_map(position) { var latitude = position.coords.latitude; var longitude = position.coords.longitude; // let's show a map or do something interesting! }
Exemplu de tratarea a erorilor:

navigator.geolocation.getCurrentPosition( show_map, handle_error) function handle_error(err) { if (err.code == 1) { // user said no! } } handle_error este un obiect ce contine urmatoarele proprietati:
code short an enumerated value
PERMISSION_DENIED (1) POSITION_UNAVAILABLE (2) TIMEOUT (3) UNKNOWN_ERROR (0)
message DOMString not intended for end users
Exemplu Geolocatie
Google Maps http://htmlfive.appspot.com/static/where ami.html
APLICATII OFFLINE
APLICATII OFFLINE
O aplicatie web este o lista de URL-uri- HTML,CSS,Javascript, imagini sau orice alta forma de resursa. Homepage-ul unei aplicatii offline ne directioneaza catre aceasta lista (fisier manifest) ceea ce este doar un fisier text de pe server. Un Browser ce implementeaza aplicatii offline HTML5 citeste aceeasta lista, downloadeaza resursele indicate si le inmagazineaza local actualizandu-le doar cand este necesar. Cand veti accesa aplicatia web fara a avea acces la internet, browserul web va aduce copiile locale. De asemeni exista in DOM un flag ce va indica daca sunteti online sau offline.
var online = navigator.onLine;
Acest atribut se modifica in timpul evenimentelor online si offline ce sunt manevrate de obiectul Window.
MANIFESTUL CACHE
O aplicatie web offline este dependenta de fisierul cache manifest.

Manifestul CACHE = lista resurselor de care are nevoie aplicatia web cand este deconectata de la retea.
Utilizarea fisierului cache manifest

<!DOCTYPE HTML> <html manifest="/cache.manifest"> <body> ... </body> </html>
Fisierul manifest se poate regasi oriunde pe server dar trebuie servit clientului avand Content-Type: text/cache.manifest.
Exemplu Manifest Cache de pe server:

CACHE MANIFEST /static/stickies.html /media/deleteButton.png /media/deleteButtonPressed.png /css/stickies.css /js/stickies.js
Baza de date
HTML5 asigura un API de baza de date bazat pe SQL pentru a inmagazina local si structurat datele. API-ul interactioneaza cu baza de date in mod asincron ceea ce asigura faptul ca interfata utilizator nu se va bloca. Exemplu de implementare
//pentru a crea un obiect baza de date
var db = window.openDatabase("NoteTest", "1.0","Example DB",200000);
function renderNote(row) { // renders the note somewhere } function reportError(source, message) { // report error }
Baza de date
function renderNotes() { db.transaction(function(tx) { tx.executeSql('CREATE TABLE IF NOT EXISTS Notes(title TEXT, body TEXT)', []); tx.executeSql(SELECT * FROM Notes, [], function(tx, rs) { for(var i = 0; i < rs.rows.length; i++) { renderNote(rs.rows[i]); } }); }); } function insertNote(title, text) { db.transaction(function(tx) { tx.executeSql('INSERT INTO Notes VALUES(?, ?)', [ title, text ], function(tx, rs) { // }, function(tx, error) { reportError('sql', error.message); }); }); }
APLICATII OFFLINE
Pentru depozitarea simpla si sincrona a informatiilor pentru utilizare offline HTML introduce atributul localStorage al obiectului Windows.
localStorage["status"] = "Idling.";
EXEMPLU APLICATII OFFLINE

Sticky notes http://htmlfive.appspot.com/static/sticki es.html
NU VOI BLOCA BROWSERUL CU JAVASCRIPT! NU VOI BLOCA BROWSERUL CU JAVASCRIPT! NU VOI BLOCA BROWSERUL CU JAVASCRIPT! NU VOI BLOCA BROWSERUL CU JAVASCRIPT! NU VOI BLOCA BROWSERUL CU JAVASCRIPT! NU VOI BLOCA BROWSERUL CU JAVASCRIPT! NU VOI BLOCA BROWSERUL CU JAVASCRIPT! NU VOI BLOCA BROWSERUL CU JAVASCRIPT! NU VOI BLOCA BROWSERUL CU JAVASCRIPT! NU VOI BLOCA BROWSERUL CU JAVASCRIPT!
WEB WORKERS
WEB WORKERS
Javascript ruleaza pe acelasi fir de executie cu browserul ceea ce poate face ca acesta din urma sa nu mai poata raspunde la comenzile utilizatorului. Muncitorii Web definesc un API ce ruleaza scripturile in background. ! muncitorii trebuie sa se afle intr-un script extern. Exemplu de implementare
<script> var worker = new Worker('worker.js'); worker.onmessage = function (event) { console.log('Results: ' + event.data); }; </script> Muncitorii: function findPrimes() { // ... prime algorithm here postMessage(nextPrime); } findPrimes();
EXEMPLU WEB WORKERS

http://htmlfive.appspot.com/static/tracker1.html
Motion tracker
EXEMPLU WEB WORKERS

http://htmlfive.appspot.com/static/primes-good.html Good Primes
01.04.2010
151
Ce mai ofera HTML5?

Trasaturi noi formularelor (validare la nivelul clientului, date pickers, sliders)
Socket-uri Web Web storage Alte tag-uri noi Manipularea istoricului browserului Drag and Drop
Concluzii
HTML5 stie unde te afli, stie ce scrii, unde esti si unde ai fost. HTML5 este viitorul si desi inca nu a ajuns la un stadiu final (se preconizeaza ca in jurul anului 2022) el poate fi implementat si utilizat in cadrul browserelor moderne.
Bibliografie
Pro HTML5 Programming - Powerful APIs for Richer Internet Application Development (Peter Lubbers, Brian Albers and Frank Salim) Introduction cu HTML5 (Brad Neuberg) W3C HTML 5 Working Draft Dive into HTML5 (Mark Pilgrim)

PW3-Advanced HTML PDF

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

PW3-Advanced HTML PDF

Încărcat de

Drepturi de autor:

Formate disponibile

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Ciprian Dobre ciprian.dobre@cs.pub.ro

Curs Programare Web, anul 4 C5 Curs 6

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

n XML se folosesc propriile tag-uri, fr constrngeri

Curs Programare Web, anul 4 C5 Curs 7

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

XML este folosit de calculatoare

Versiunile curente ale majoritii browserelor pot afia XML

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Tehnologii nrudite XML

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Exemplu de document XML

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Elementele XML Un document XML mai este construit din:

Curs Programare Web, anul 4 C5 Curs 7

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Exemplu folosind atribute:

Curs Programare Web, anul 4 C5 Curs 7

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

XML bine format

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Exemplu de document bine format

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

paragraph This is the great American novel.

paragraph It was a dark and stormy night.

paragraph Suddenly, a shot rang out!

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Curs Programare Web, anul 4 C5 Curs 7

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Un exemplu de document XML ce specific cinci astfel de reete:

Curs Programare Web, anul 4 C5 Curs 7

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Curs Programare Web, anul 4 C5 Curs 7

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Curs Programare Web, anul 4 C5 Curs 7

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Standarde extinse de documente

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Curs Programare Web, anul 4 C5 Curs 7

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Cuvnt nainte: Origini

Curs Programare Web, anul 4 C5 Curs 7

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

HTML-ul a fost definit ca o aplicaie a SGML,

HTML devine suportat de AOL, CompuServe, MSN, etc.

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Netscape vine cu propria implementare de ActiveX i adaug limbajul de scripting JavaScript

n ncercarea de a nvinge, apar dispute cu privire la ce i cum ar trebui standardizat n HTML:

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

HTML 4.0 lansat n 1997 (HTML 4.01 n 1999)

W3C a decis i s conduc HTML 4 ntr-o nou direcie:

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Tem pentru acas

HTML 5 viitorul Web-ului? Vei urmri n principal (dar nu numai):

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Curs Programare Web, anul 4 C5 Curs 7

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare