PW3 Advanced HTML

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare
More on Web 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 t folosit f l it pentru t 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 difi bil de d tag-uri i XML este t folosit f l it pentru t formatarea datelor a.. s fie procesate de calculatoare XML descrie doar coninut sau l textului t t l i sensul
n XML se folosesc propriile tag uri fr constrngeri tag-uri,

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 M i exact, t
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 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 e o og nrudite ud te XML

DTD (Document Type Definition) i XML Schemas sunt folosite pentru definirea tag tag-urilor 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 API-uri uri pentru parsare XML
Exemplu de document XML

<?xml version="1.0"?> <weatherReport> <date>7/14/97</date> d t 7/14/97 /d t <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> E Evening: i g <evening>Clear i g Cl and dC Cooler</evening> l / i g </weatherReport>
Sursa: XML: A Primer, de Simon St. Laurent
Structura St uctu a 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 p directiv trebuie s existe exact un singur tag, numit elementul root, ce conine estu docu documentului e tu u XML: restul
<weatherReport> ... </weatherReport>
Elementele e e te e XML Un document XML mai este construit din:

elemente: high n <high scale="F">103</high> tag-uri, tag uri n perechi: <high scale= scale="F">103</high> F >103</high> atribute: <high scale="F">103</high> entiti: <afternoon>Sunny & hot</afternoon> date de tip p caractere ce p pot fi:
parsate (procesate ca XML)modalitatea default neparsate p (toate caractere sunt de sine stttoare) ( )
Elemente Element e e te te i atribute at bute

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 g general browserele afieaz doar elemente ( (valori nchise de tag-uri), nu i tag-uri i atribute
10
XML b bine e format o at

Orice elemente trebuie s aib att un tag de start, ct i un tag de terminare terminare, e.g.: 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 D t l caracter t nu pot t conine i < sau &
Exemplu e p u de document docu e t b bine e format o at

<novel> <foreword> <paragraph> This is the great American novel. </paragraph> / h </foreword> <chapter number= number="1"> 1 > <paragraph> It was a dark and stormy night. </paragraph> <paragraph> S dd l a shot Suddenly, h t rang out! t! </paragraph> </chapter> </novel>
XML ca un arbore
Un document XML reprezint o ierarhie, poate fi reprezentat t t ca un arbore: b
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 a d
Putei crea propriile tag-uri i atribute XML, dar...
...orice program ce folosete XML XML-ul 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, XML dar tipic se folosete ca document separat p p programele g XML Erorile dintr-un document XML vor opri Alternative la DTD-uri sunt XML Schemas i RELAX NG
Exemplu
Putem s ne imaginm o modalitate de reprezentare t 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 specifica p ie a valorilor nutritive Un ingredient poate fi simplu sau compus Un ingredient simplu are un nume, o cantitate (p (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> 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" calories= 1167 fat= fat="23" 23 carbohydrates= carbohydrates="45" 45 protein= protein="32"/> 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 !ELE EN description d ANY> N <!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 !ELEMENT step t (#PCDATA) (#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 lil 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 p proiectat p pentru a fi vizualizat, , XML este proiectat pentru a fi folosit
18
Standarde Sta da de e extinse t se de docu documente e te

Putei s v definii propriile tag-uri XML, dar exist seturi t id deja j di disponibile: ibil
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 i d de o i implementare l t real l a unei i aplica li ii care s suporte astfel de documente
S-a 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 g
Cnd standardul devine popular, se pune problema p acestuia: controlului asupra
IETF formeaz HTML Working Group cu scopul de a ncepe lucrul la HTML 2.0 Berners-Lee B L creaz W World ld Wid Wide W Web bC Consortium ti (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 3.0 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 noi, ne-standadizate 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 p p pentru ActiveX, , tehnologia g 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 nvinge, apar dispute cu privire la ce i cum ar trebui standardizat n HTML:
Netscape propune tag-ul tag ul BLINK Microsoft vine cu MARQUEE
Origini
Mediatorul e tot W3C
n standard nu intr nici BLINK 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)

P Pe lng l separare coninut i t de d prezentare, t HTML 4 standadizeaz t d di 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 stricte t i t ea XML: 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, t d d l i utilizatorul tili t l ar putea t veni i cu t tag-uri id definite fi it ntr-o t bibli t extern bibliotec t pentru reprezentri particulare (e.g., pentru matematic se poate folosi MathML)
Tem p 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, C elemente Ce l t noi i aduce d acest t standard, t d d cui i se adreseaz d Ce organizaii sunt implicate n efortul de standardizare, Minim 1 paragraf n care s prezentai propria voastr prere vizavi de standard (elemente p ( pro i contra) ) cu j justificare. Referine.
Reguli de trimitere:
Se accept doar documente n format PDF F Formatare: pagina i A4 A4, f font Times Ti New N R Roman, di dimensiune i 12 12, fr spai iere, 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 06.03.2012, 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 3.2 2
27
HTML 4
HTML 4 extinde HTML cu mecanisme adecvate pentru:* t *
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 p p pentru p persoane cu disabilit i.
*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 ob e a 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 documentelor, mbogit cu tag-uri pentru controlul font-urilor, aliniatelor etc. aliniatelor, etc
30
HTML vs. XML

XML arat mult ca HTML, dar:
HTML folosete un set fix de tag-uri g HTML este proiectat pentru afiarea datelor n form uman Browser-ele sunt foarte tolerante cu erorile n HTML Toate browserele p pot afia HTML n XML putei folosi propriile tag-uri g (i defini ce reprezint p ele ntr-un document separat) XML este proiectat pentru descrierea datelor pentru computere p Documentele XML trebuie s fie bine formate ( (corect sintactic) ) Toate browserele moderne afieaz XML, dar n diverse moduri
31
Codificarea Cod ca ea docu documentelor e te o 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 ocu e te XML bine b e formate o ate

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 S h

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

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 l t name="dots"> "d t " 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 ? l version="1.0"?> i "1 0"? <xs:schema xmlns:xs=http://www.w3.org/2001/XMLSchema> <xs:element name="dots"> < s comple T pe> <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:complexType </xs:element> </xs:schema>
Exemplu: Exemplu : document XML cu schema

dots xml dots.xml
<?xml version="1.0" encoding="UTF-8" ?> <dots xmlns:xsi= xmlns:xsi="http://www http://www.w3.org/2001/XMLSchema-instance w3 org/2001/XMLSchema instance" xsi:noNamespaceSchemaLocation="dots.xsd">> <dot x="32" y="100" /> <dot x="17" x= 17 y= y="14" 14 /> <dot x="18" y="58" > </dot> </dots>
De e la a HTML la a 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 e la a HTML la a XHTML, , II
Numele de atribute trebuie s fie lower case
Exemplu: <table width= width="100%"> 100% >
Valorile atributelor trebuie s fie ncadrate de

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

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

Greit: <img src="picture.gif" name="picture1" /> Corect: <img img src src="picture.gif" picture.gif id id="picture1" picture1 / /> Cel mai bine: <img g src="picture.gif" p g name="picture1" p id="picture1" p />
XHTML i DTDDTD-u uri

HTML, XHTML, XML i multe alte limbaje de markup ce suport DTD-uri (Document Type yp Definition) ) descrie DTD ( sintaxa ce trebuie folosit pentru un anumit document, , folosirea unui DTD fiind o regul g n cazul documentelor XHTML DTD-uri uri pentru Exist trei tipuri diferite de DTD XHTML putei lucra cu oricare
Ele sunt publice pe web Documentul XHTML trebuie s nceap cu o referin la unul dintre aceste DTD DTD-uri uri
Declaraia DOCTYPE
Orice document XHTML trebuie s nceap cu o d l ie declara i DOCTYPE (ce ( specific ifi DTD-ul DTD l curent t 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" p g "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" p g "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
41
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. 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>, <background>, <color> <height> <height>, <size> <size>, etc). etc)
Frameset
Folosit dac documentul include frame-uri HTML
Exemplu de document XHTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www Strict//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1w3 org/TR/xhtml1/DTD/xhtml1 strict.dtd"> <html> m <head> <title>A title A simple document document</title> /title </head> <body> <p>A simple paragraph.</p> </body> </html>
43
Instrumente st u e te ut utile e
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 p verificarea ( (dar nu i corectarea) documentelor HTML i XHTML
44
Reminder: Vocabular
SGML: Standard Generalized Markup p Language
HTML: Hypertext Markup Language XHTML: eXtensible Hypertext Markup Language XML: eXtensible Markup Language
DTD: DTD Document D T Type D fi i i Definition
45
Qu Quiz
Care este diferena dintre document XML bine format i document XML valid? Ce este un DTD? Pe ce standard HTML este bazat XHTML? Enumerai patru diferene ntre HTML i XHTML. XHTML
46
CSS (Cascading Style Sheet )
47
Problema ob e a 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 g grij j de acest aspect Aceasta reprezint o abordare inginereasc corect, ns nu satisface nevoile stilitilor i artitilor
O Oamenii ii ce aveau nevoie i sa spun mai i multe lt sim i eau nevoia i unui i control mai bun al modului de prezentare a propriilor pagini Web
Ca rezultat, , HTML a nceput p s ncorporeze p 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 propriu-zis zis
Cascading g Style y 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 layout ului tuturor paginilor dintr-un 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 func f ie i de d di dimensiune, i d documentele t l CSS externe t pot t crete t timpul de ncrcare a paginilor
Sintaxa S ta a CSS
Sintaxa CSS este compus dintr-o list de selectori (pentru alegerea tag-urilor) tag urilor) i descriptori (pentru a specifica ce dorim s facem cu respectivele tag-uri):
Exemplu: p 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 se ecto /desc pto selector/descriptor
Selectorii pot fi simple tag-uri HTML sau XML CSS p permite de asemenea definirea altor moduri de combinare a tag-urilor Descriptorii sunt definii chiar n CSS
50
Sintaxa S ta a CSS
Sintaxa generala este:
selector l t { property t : value l } sau selector, ..., selector { property: value; ... property: value } unde selector reprezint tag-ul tag ul afectat de stil (selectorul este casecase sensitive dac i numai dac limbajul de descriere a documentului este case-sensitive). property i value descriu modul de afiare al respectivului tag tag. Spaiile dup virgule i punct si virgule sunt opionale. Un punct i virgul trebuie s fie folosit ntre perechi property:value t l , dar d d dup ultima lti pereche h punct t i virgul i l devine caracter opional.
Exemplu e p u de CSS
/* Acesta este un comentariu */ h1 h2 h3 {font-family: Arial h1,h2,h3 Arial, sans-serif;} / /*folose 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 i */ /* culorile pot fi specificate n hexa */ /* se adaug elementelor specificate */ /* un link ne-vizitat */ /* un link vizitat */ /* un link deja vizitat */ /* atunci cnd mouse / mouse-ul ul trece deasupra elementului */ /
52
p, li, th, td {font-size: 80%;} th {background-color:#FAEBD7} body y { background-color: g #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} em,
Putem repeta selectorii:

h1, h2, h3 {font-family: Verdana; color: red} h1 h3 {font h1, {font-weight: 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)
53
Exemplu de suprascriere
54
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: 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 <b>I'm m bold and</b> <i>I <i>I'm m italic</i> Rezultatul va arata astfel: I'm bold and I'm italic
55
Selectori Se ecto
Un selector simplu de atribut permite alegerea elementelor l t l ce au un anumit it atribut, t ib t i indiferent dif td 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"] { ... }
56
Valori ao
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 p 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.
sect section o {border: {bo de : thin t solid sol d blue;}

Aceasta nseamn c trebuie pus un border n jurul elementelor section; acesta trebuie s fie subire i solid i albastr
57
Atributul t butu c class ass

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= class="fineprint">Offer fineprint >Offer ends 1/1/97.</p> 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 fi i t {font-size: {f t i 8 8pt} t}
Atributul t butu id d
Atributul id este definit similar atributului class, dar folosete # in loc de .
n fiierul style y 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">
59
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 {background-color: 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>
60
Rezultat:
<html xmlns="http://www.w3.org/1999/xhtml"> p g <head> <link REL="STYLESHEET" TYPE="text/css" HREF="stil.css"/> </head> <body> T xt inainte. Text i i t <div>This div is treated like a paragraph, but <span class="color">this span</span> is not.</div> Text dupa. </body> </html> /html
61
Alt exemplu
Elementele <div> sunt cel mai adesea folosite pentru poziionare:
#container #c nt in { position: relative } #navigation { position: absolute; left: 30px; top: 5px }
<div id="container"><div id="navigation">Text</div></div>
62
Folosirea o os ea elementelor e e e te o CSS

Sunt trei moduri de folosire a unui CSS: 1. Style S 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 y sheet

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

<?xml-stylesheet href="Style Sheet URL" t type="text/css"?> "t t/ "?
64
Embedded bedded sty style es sheet eet

Elementele CSS se definesc n interiorul documentului HTML, n interiorul elementului <head>:
<style TYPE="text/css"> <!-CSS Style Sheet --> </style> /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 CSS.
Inline e sty style es sheet eet

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 O d ea de cascada cascadare e

Stilurile vor fi aplicate unui document HTML n ordinea di urmtoare: t
1. Stilul implicit al browser-ului 2. External style sheet 3. Internal style y sheet ( (n interiorul tag-ului g <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 p p ( (mai recent aplicat) p ) stil ctig g
67
Exemplu e p u de ordine o d e de cascada cascadare e

External style sheet: h3 { } Internal style sheet: h3 { } Atributele rezultante: color: red; text-align: right; f font-size: 20 20pt text align: right; text-align: font-size: 20pt color: red; text-align: left; font-size: 8pt
68
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; } p span p { color: red !important;} p #pid 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: ( o s e 10px, 0p , co combinat b a cu font-size: o s e 150% 50% => 10 0 x 1.5 5 = 15px) 5p )
69
Un exemplu XML
<?xml version="1.0" standalone="no"?> <!DOCTYPE novel SYSTEM "novel.dtd"> <?xml-stylesheet l l h h f href="styles.css" l type="text/css"?> <novel> <foreword> <paragraph>This h Thi i is th the great tA American i novel.</paragraph> l / h </foreword> <chapter> <paragraph>It was a dark and stormy night.</paragraph> 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 chapter:first letter {font {font-size: size: 200%; float: left} paragraph {display: block} chapter:before {content: "New chapter: "}
CSS: CSS :
Rezultatul
Rezultat afiat de Firefox 4:
Rezultat afiat de IE
71
Cteva te a p propriet op eti i valori a o pentru pe t u font o t

font-family:
inherit i h it (la (l f fel l ca f fontul t l elementului l t l i parent, t motenire) t i ) Verdana, "Courier New", ... (dac fontul este instalat n browser) serif | sans-serif sans serif | cursive | fantasy | monospace (fonturi generice: browser-ul decide ce font s foloseasc)
font-size: 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
72
Forma prescurtat de specificare a proprietilor

Adesea mai multe proprieti pot fi combinate 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 small-caps caps 12pt/14pt sans sans-serif serif }
73
Culori Cu o i lungimi u g
color: i background-color:
aqua | black | blue | fuchsia | gray | green | lime | maroon | navy | olive | purple | red | silver | teal | white h | #FF0000 # 0000 | # #F00 00 | rgb(255, b2 0 0, 0 0) | Alte Al nume recunoscute de browser (nu se recomand)
A Acestea t sunt t elemente l t folosite f l it pentru t unit itile il d 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 dintr-un un inch), picas (1 pica = 12 puncte), relative la valoarea motenit
Cteva te a p propriet op eti i valori a o pentru pe t u text te t

text-align:
left | right | center | justify
text-decoration:
none | underline | overline | line-through
text text-transform: transform:

none | capitalize | uppercase | lowercase
text-indent text indent

length | 10% (indentarea primei linii a textului)
white-space:
normal | pre | nowrap
PseudoPseudo seudo-c clase ase

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 U li link k pe care tocmai i se execut un click li k :hover Un link peste care este poziionat cursorul mouseului
Pseudo-clasele sunt p permise oriunde n cadrul selectorilor CSS

Alegerea ege ea numelor u eo

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: E l
S presupunem c definii span.huge {font-size: 36pt} i folosii <span class="huge"> class= huge > n cadrul mai multor documente Ulterior descoperi p i c utilizatorii dezagreaz g stilul acesta, , deci modificai CSS-ul n span.huge {font-color: red} Numele este incorect ales; ncercai s l redenumii n toate documentele? doc mentele? Daca ai fi ales de la nceput span.important {font-size: 36pt}, ar fi fost mai uor de ntreinut propriile documente
HTML 5
01.04.2010
78
HTML reminder
HTML 1.0 i HTML+ 1990, respectiv 1993. HTML 2.0 - 1994, a fost prima versiune standardizat, (49 taguri). HTML 3 3.0 0 - 1995. 1995 Versiunea cuprindea extensii importante 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, stylesheets script script-uri uri, frame frame-uri 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. sintaxe
01.04.2010 Curs Programare Web, anul 4 C5 Curs 6 79
HTML 5
2004 Web Hypertext Application Working Group (WHATWG) au inceput lucrul la noul standard HTML 2004 Consortiul W3C se concentrau asupra p dezvoltarii XHTML 2.0 desi HTML 4.01 nu mai fusese actualizat inca din 2000. 2007 Specificatiile HTML 5 ale WHATWG au fost apoi adoptate de catre W3C ca punct de start al noului standard HTML HTML.
01.04.2010 Curs Programare Web, anul 4 C5 Curs 6 80
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 D i ultima lti versiune i HTML 5 l lansata t pe d data t d de 22 Februarie 2012 este o ciorna (W3C Working Draft), Draft) dezvoltatorii browserelor au inceput sa implementeze parti din u c o a a ep prezente e e e in s standardul a da du HTML5. 5 functionalitatile
De ce HTML5?
Calculatoare performante folosite insuficient Numarul utilizatorilor de servicii web devine din ce in ce mai mare
Performantele JavaScript. p
ELEMENTE SIMPLIFICATE IN HTML5
DOCTYPE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T Transitional//EN iti l//EN http://www.w3.org/TR /xhtml1/DTD/xhtml1 /xhtml1/DTD/xhtml1transitional.dtd">
HTML 5 <!DOCTYPE html>
Radacina HTML
<html ht l xmlns=http://www.w3.org/1999/x html lang="en" xml:lang="en">
HTML 5 g <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 target blank" /> </head> -se introduce i d adresa d d de b baza.
El Elemente t semantice ti d sectionare de ti HTML 4
HTML 5
Elemente semantice de sectionare
<HEADER>
HTML 4
<div id="header"> <h1>M W <h1>My Weblog</h1> bl </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> g p <h1>My Weblog</h1> <h2>A lot of effort went into making this ffortless.</h2> </hgroup>
</header>
Exemplu
<header> <hgroup> <h1><a h1 href="/">Mini h f "/" Mi i A Apps</a></h1> / /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= href="#">Mark # >Mark Pilgrim</a> </p> </footer>
<SECTION> SECTION
Sectiune g generica de aplicatie p 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 class="post-date">October post date >October 22 22, 2009</p> <h1> <a href="#" rel="bookmark" title="link to this post"> Travel day </a> </h1> </header> </article>
HTML 5
<ASIDE> 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>< h <li><a href="/2007/07/">July f "/2007/07/">J l 2007</ 2007</a></li> ></li> </ul>
</aside>
<NAV>
HTML 4
<div id="nav"> id= nav > <ul> <li><a href="#">home</a></li> <li><a href="#">blog</a></li> # g / / <li><a href="#">gallery</a></li> <li><a href="#">about</a></li> </ul> </div> /
HTML 5
<nav> <ul> < l> <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
<time datetime="2009-10-22" datetime "2009 10 22" pubdate>October 22 22, 2009</time> <time datetime= datetime="2009 2009-10-22T13:59:47-04:00 10 22T13:59:47 04:00" pubdate> October 22, 2009 1:59pm EDT </time> <article> <header>
<time datetime="2009-10-22" p pubdate> October 22, , 2009 </time> <h1> <a href="#" rel="bookmark" title="link to this post"> Travel day </a> </h1>
</header> /h d <p>Lorem ipsum dolor sit amet</p> </article> / i l
a resolution-dependent bitmap canvas which can be used for rendering graphs, game graphics, or other visual images on the fly fly.
GRAFICA IN HTML5 <CANVAS> <CANVAS >
<CANVAS> CANVAS
Sintaxa: Si t
<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"); g y ( ) var b_context = b_canvas.getContext("2d");//future 3D b_context.fillRect(50, 25, 150, 100);
<CANVAS> CANVAS
Desenarea in Canvas Context: Sunt esentiale functiile:
beginPath() closePath() stroke() fill()
Proprietati:
fillStyle = (CSS color color,pattern,gradient) pattern gradient) strokeStyle= (CSS color,pattern,gradient)
<CANVAS> 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 D li linii ii
o moveTo(x, y) o lineTo(x, lineTo(x y)
<CANVAS> CANVAS
o Desenare arce
arc(x,y,radius,startAngle,endAngle,anticlockwise)
(pentru cerc startAngle=0,endAngle=Math.pi*2)
quadraticCurveTo(cp1x, cp1y, x, y) bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
x,y coordonatele punctului desfarsit cp1x,cp1y,cp2x,cp2ycoordonatele primului si celui dealdoilea punct decontrol.
Desenarea detext o Proprietati context:

Context.font={font} Context.textAlign={start,end,left,right,center}; Context.textBaseline={top,hanging,middle,alphabetic,ideographic,bottom}; Context textBaseline={top hanging middle alphabetic ideographic bottom};
oFunctia dedesenare
o Context.fillText(text,x,y);
<CANVAS> CANVAS
o Crearea unui gradient g
createLinearGradient(x0, y0, x1, y1) createRadialGradient(x0, createRadialGradient(x0 y0 y0, r0 r0, x1 x1, y1 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 context.fillStyle my_gradient; gradient; context.fillRect(0, 0, 300, 225);
<CANVAS> CANVAS
2. var my_gradient = context.createLinearGradient(0, 0, 0, 225); y_g p "black"); my_gradient.addColorStop(0, my_gradient.addColorStop(1, "white"); context.fillStyle = my_gradient; context.fillRect(0, 0, 300, 225);
3. var my_gradient _ = context.createLinearGradient(0, 0, 300, 225); 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 g
o o o drawImage(image, dx, dy) drawImage(image, dx, dy, dw, dh) drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)
<CANVAS> CANVAS
Exemple p desenare imagini g
1. <img id="cat" src="images/cat.png" alt="sleeping cat" width="177" height="113"> <canvas id="e" width="177" height="113"></canvas> <script> i window.onload = function() { var canvas = document.getElementById("e"); var context = canvas.getContext( canvas.getContext("2d"); 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( canvas getContext("2d"); 2d ); var cat = new Image(); cat.src = "images/cat.png"; cat.onload = function() { context.drawImage(cat, 0, 0); }; </script>
<CANVAS> CANVAS
Transformari
Pentru a retine si a prelua starile panzei :
Save(); Restore();
Starea panzei=transformari, panzei transformari, valorile proprietatilor strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, lineJoin, miterLimit, shadowOffsetX, shadowOffsetY, shadowBlur shadowColor shadowBlur,
Translatarea: translate(x, y)
<CANVAS> CANVAS
Rotatia: rotate(angle)
Scalarea: scale(x, y)
Umbre
Proprietati context:
ShadowColor ShadowOffsetX ShadowOffsetY Sh d Bl ShadowBlur
Exemple <CANVAS> CANVAS

http://html5demos.com/canvas-grad p g
Exemple <CANVAS> CANVAS

First p person g gifter http://htmlfive.appspot.com/static/gifter.html
01.04.2010
114
HTML5 API VIDEO & AUDIO

Continut media fara plugin p g Multitudine de formate video:
MPEG4 FLASH VIDEO OGG AUDIO VIDEO INTERLACED
HTML 4:
<video src="video.ogg"> j data="videoplayer.swf" p y type="application/x-shockwave-flash"> yp pp / <object <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, p , 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 A t l 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 p proprietate p a obiectului g global navigator:
Navigator.geoLocation 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 p de implementare: p
function get_location() { navigator.geolocation.getCurrentPosition(show_map); } //determina afisarea unei bare de informatii ce intreaba utilizatorul daca doreste sa isi dezvaluie locatia sa sa. //show_map ->functia de callback function show_map(position) { p 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! } } proprietati: p handle_error este un obiect ce contine urmatoarele p
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 g Maps p http://htmlfive.appspot.com/static/where ami html 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. 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 actualizandu le doar cand este necesar necesar. Cand veti accesa aplicatia web fara a avea acces la internet, browserul web va aduce copiile locale. De asemeni exista in DOM un fl ce va i flag indica di d daca sunteti t ti online li sau offline. ffli
var online = navigator.onLine;
Acest atribut se modifica in timpul p 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 /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 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) { p error // report }
Baza de date
function renderNotes() { db.transaction(function(tx) { tx executeSql('CREATE tx.executeSql( CREATE TABLE IF NOT EXISTS Notes(title TEXT TEXT, body TEXT) 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 p simpla p si sincrona a informatiilor pentru utilizare offline HTML introduce atributul localStorage al obiectului Windows.
localStorage["status"] localStorage[ status ] = "Idling Idling."; ;
EXEMPLU APLICATII OFFLINE

Sticky y notes http://htmlfive.appspot.com/static/sticki es html 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 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: console.log( Results: ' + event.data); 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
133
Ce mai ofera HTML5?

Trasaturi noi formularelor (validare la nivelul clientului, date pickers, sliders)
Socket-uri Web Web storage Alte tag-uri 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 j l anului jurul l i 2022) el l poate t fi i implementat l t t si i utilizat in cadrul browserelor moderne.
Bibliografie
Pro HTML5 Programming g g - Powerful APIs for Richer Internet Application Development (Peter Lubbers Lubbers, Brian Albers and Frank Salim) Introduction I t d ti cu HTML5 (B (Brad dN Neuberg) b ) W3C HTML 5 Working Draft Dive into HTML5 (Mark Pilgrim)

PW3 Advanced HTML

Încărcat de

Informații document

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

Încărcat de

Drepturi de autor:

Formate disponibile

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

More on Web Web. .

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 tag-uri,

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 e o og nrudite ud te 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 e e te e XML Un document XML mai este construit din:

Curs Programare Web, anul 4 C5 Curs 7

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Elemente Element e e te te i atribute at bute

Exemplu folosind atribute:

Curs Programare Web, anul 4 C5 Curs 7

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

XML b bine e format o at

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

Exemplu e p u de document docu e t b bine e format o at

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 Sta da de e extinse t se de docu documente e te

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

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 p 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