more on more on webweb..2021. 4. 6. · universitatea politehnica bucuresti - facultatea de...

Universitatea Politehnica Bucuresti - Facultatea de Automatica si Calculatoare

More on More on WebWeb..

Ciprian DobreCiprian [email protected]

1Curs Programare Web, anul 4 C5 – Curs 6


XMLXML

eXtensible Markup LanguageeXtensible Markup Language

2Programare Web


HTMLHTML şişi XMLXMLHTML HTML şi şi XMLXMLXML = eXtensible Markup Language

HTML t f l it t XML t f l it tHTML este folosit pentru formatarea textului a.î. acesta să fie afişat utilizatorilor

XML este folosit pentru formatarea datelor a.î. să fie procesate de calculatoarefie afişat utilizatorilor procesate de calculatoare

HTML descrie atât structura (e.g. <p> <h2> <em>) cât şi aparenţa

XML descrie doar conţinut sau “ l” t t l i<p>, <h2>, <em>) cât şi aparenţa

(e.g. <br>, <font>, <i>)“sensul” textului

HTML foloseşte un set fix, difi bil d i

În XML se folosesc propriile tag uri fără constrângeri

3

nemodificabil de tag-uri tag-uri, fără constrângeri

Curs Programare Web, anul 4 C5 – Curs 7


HTML HTML şi şi XMLXMLşş

• HTML şi XML arată similar deoarece ambele sunt limbaje SGML (Standard Generalized Markup Language) – Atât HTML cât ş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 entităţi interpretabile (<, >,

&, ", ')M i t• Mai exact,– HTML este definit în SGML

4

– XML este un subset (restrâns) al SGMLCurs Programare Web, anul 4 C5 – Curs 7


HTML HTML şi şi XMLXMLşş

• HTML este adresat oamenilor– HTML descrie pagini web– Oamenii nu doresc să vadă mesaje de eroare despre

paginile vizitatepaginile vizitate…• Browserele ignoră şi/sau corectează atâtea erori HTML cât 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 programareprogramare

– Versiunile curente ale majorităţii browserelor pot afişa XML

5

• Totuşi suportul browserelor pentru XML e destul de redus



Tehnologii înrudite Tehnologii înrudite XMLXMLe o og ud tee o og ud te• DTD (Document Type Definition) şi XML Schemas sunt

folosite pentru definirea tag urilor legale XML şi afolosite pentru definirea tag-urilor legale XML şi a atributelor acestora pentru scopuri particulare (meta-descrieri))

• CSS (Cascading Style Sheets) descrie cum sunt afişate HTML şi XML în browserHTML şi XML în browser

• XSLT (eXtensible Stylesheet Language Transformations)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

6

XML) și JAXP (Java API for XML Processing) sunt API uripentru parsare XML



Exemplu de documentExemplu de document XMLXMLExemplu de documentExemplu de document XMLXML

<?xml version="1.0"?><weatherReport>

d t 7/14/97 /d t<date>7/14/97</date><city>North Place</city>, <state>NX</state><country>USA</country><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 i g i g Cl d C l / i gEvening: <evening>Clear and Cooler</evening>

</weatherReport>

7

Sursa: XML: A Primer, de Simon St. LaurentCurs Programare Web, anul 4 C5 – Curs 7


StructuraStructuraSt uctu aSt uctu a

• Un document XML poate începe cu una sau mai multe instrucţiuni de procesare (PIs) sau directive:( )

<?xml version="1.0"?><?xml-stylesheet type="text/css" href="ss.css"?>

• După directivă trebuie să existe exact un psingur tag, numit elementul root, ce conţine restul documentului XML:estu docu e tu u

<weatherReport>...

8

...</weatherReport>



Elementele Elementele XMLXMLe e te ee e te e

• Un document XML mai este construit din:– elemente: high în <high scale="F">103</high>

tag uri în perechi: <high scale="F">103</high>– tag-uri, în perechi: <high scale= F >103</high>– atribute: <high scale="F">103</high>– entităţi: <afternoon>Sunny & hot</afternoon>

– date de tip caractere ce pot fi:p p• parsate (procesate ca XML)—modalitatea default• neparsate (toate caractere sunt de sine stătătoare)p ( )



ElementElementee şi şi atributeatributee e te e tee şş at buteat bute• Atributele şi elementele sunt parțial interschimbabile• Exemplu folosind doar elemente:

<name><first>David</first><first>David</first><last>Matuszek</last>

</name>

• Exemplu folosind atribute:<name first="David" last="Matuszek"></name>

• Atributele conţin adesea şi metadate, precum ID-uri unice• În general browserele afişează doar elemente (valori g ş (

închise de tag-uri), nu și tag-uri şi atribute



XML bine formatXML bine formatb e o atb e o at• Orice elemente trebuie să aibă atât un tag de start, cât şi

un tag de terminare e g : <name> </name>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">

D t l t t ţi &

11

• Datele caracter nu pot conţine < sau &



Exemplu de document bine formatExemplu de document bine formate p u de docu e t b e o ate p u de docu e t b e o at<novel>

<foreword><paragraph>

This is the great American novel./ h</paragraph>

</foreword><chapter number="1"><chapter number= 1 >

<paragraph>It was a dark and stormy night.

</paragraph><paragraph>

S dd l h t t!Suddenly, a shot rang out!</paragraph>

</chapter>

12

</chapter></novel>



XMLXML ca un arboreca un arboreXML XML ca un arboreca un arbore• Un document XML reprezintă o ierarhie, poate fi

t t breprezentat ca un arbore:

novelnovel

foreword chapternumber="1"

paragraph paragraph paragraph

This is the great It was a dark Suddenly, a shot

13

American novel. and stormy night. rang out!



XML ValidXML Valida da d• Puteţi crea propriile tag-uri şi atribute XML, dar...

– ...orice program ce foloseşte XML-ul trebuie să ştie la ce să se...orice program ce foloseşte XML ul trebuie să ştie la ce să se aştepte!

• Un DTD (Document Type Definition) defineşte ce tag-uri sunt legale şi unde pot acestea apărea în cadrulsunt legale şi unde pot acestea apărea î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 foloseşte ca• Un DTD poate fi inclus în XML, dar tipic se foloseşte ca document separat

• Erorile dintr-un document XML vor opri programele XML

14

p p g• Alternative la DTD-uri sunt XML Schemas şi RELAX NG



ExempluExempluExempluExemplu• Putem să ne

imaginăm o modalitate de

treprezentare a unor rețete de bucătărie, pe baza unor documentebaza unor documente XML:

Curs Programare Web, anul 4 C5 – Curs 7 15


ExempluExemplu• O versiune XML a unei colecții de astfel de rețete este formată din:

– Rețetele conțin listă de ingrediente, pașii pentru pregătire, posibil comentarii și o specificație a valorilor nutritive

– Un ingredient simplu are un nume, o cantitate (posibil

<?xml version="1.0" encoding="UTF-8"?><collection>

p ț– Un ingredient poate fi simplu sau compus

, (pchiar nespecificată) și o unitate de măsură (totuși sunt și cazuri când nu se specifică și unitate)

<collection><description>

Some recipes used for the XML lesson.</description><recipe>

<title>Beef Parmesan with Garlic Angel Hair Pasta</title>specifică și unitate)– Un ingredient compus este

specificat recursiv ca o rețetă având ingrediente și

<title>Beef Parmesan with Garlic Angel Hair Pasta</title><ingredient name="beef cube steak" amount="1.5" unit="pound"/>...<preparation>

<step>rețetă având ingrediente și modalitate de pregătire

• Un exemplu de document XML ce specifică cinci

Preheat oven to 350 degrees F (175 degrees C).</step>...

</preparation><comment>XML ce specifică cinci

astfel de rețete:commentMake 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"/>


<nutrition calories= 1167 fat= 23 carbohydrates= 45 protein= 32 /></recipe>...

</collection>


ExempluExempluExempluExemplu• Un exemplu de document

DTD pentru rețetele<!ELEMENT collection (description,recipe*)>

!ELE EN d NDTD pentru rețetele noastre arată astfel:

• Prin inserarea:

<!ELEMENT description ANY>

<!ELEMENT recipe (title,ingredient*,preparation,comment?,nutrition)>Prin inserarea:

specificăm că dorim că

<!ELEMENT title (#PCDATA)>

<!ELEMENT ingredient (ingredient*,preparation)?><!ATTLIST ingredient name CDATA #REQUIRED

amount CDATA #IMPLIED

<!DOCTYPE collection SYSTEM "recipes.dtd">

specificăm că dorim că documentul nostru ce conține rețete trebuie să

amount CDATA #IMPLIEDunit CDATA #IMPLIED>

<!ELEMENT preparation (step*)>

!ELEMENT t (#PCDATA)fie conform cu acest DTD• Putem defini și local

lil DTD

<!ELEMENT step (#PCDATA)>

<!ELEMENT comment (#PCDATA)>

<!ELEMENT nutrition EMPTY>regulile DTD cu: <!ATTLIST nutrition protein CDATA #REQUIRED

carbohydrates CDATA #REQUIREDfat CDATA #REQUIREDcalories CDATA #REQUIREDalcohol CDATA #IMPLIED>

<!DOCTYPE collection [ ... ]>


alcohol CDATA #IMPLIED>


Scop XMLScop XMLScopScop

• XML este proiectat pentru a fi procesat de către programele software, nu pentru a afişa date

• Totuşi aproape toate browserele pot afişaTotuşi aproape toate browserele pot afişa documente XML

Ele nu vor fi afişate în aceeaşi manieră– Ele nu vor fi afişate în aceeaşi manieră

– Nu vor fi afişate deloc dacă conţin erori

• Atenție:HTML este proiectat pentru a fi vizualizat,p p ,XML este proiectat pentru a fi folosit



Standarde extinse de documenteStandarde extinse de documenteSta da de e t se de docu e teSta da de e t se de docu e te• Puteţi să vă definiţi propriile tag-uri XML, dar există

t i d j di ibilseturi 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

19

– …Curs Programare Web, anul 4 C5 – Curs 7


XHTMLXHTML

http://www.w3schools.com/xhtml/http://www.w3schools.com/xhtml/



Cuvânt Înainte: OriginiCuvânt Înainte: OriginiCuvânt Înainte: OriginiCuvânt Înainte: Origini



OriginiOrigini• 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 aplicație a SGML,– standardul ISO oferea suport pentru documente structurate

• Pentru a face din HTML un standard, Berners-Lee avea i d i l t lă i li ții ănevoie de o implementare reală a unei aplicații care să

suporte astfel de documente– S-a oprit la Mosaic – un browser a cărui finanțare era suportată deS a oprit la Mosaic un browser a cărui finanțare era suportată de

congresman-ul Al Gore

• HTML devine suportat de AOL, CompuServe, MSN, etc.– Open-standard și având în spate investiții critice suportate de

guvernul USAAmenințare la adresa supremației Microsoft*– Amenințare la adresa supremației Microsoft*


*http://www.roughlydrafted.com/RD/RDM.Tech.Q2.07/12C0979F-82C7-4952-898A-55051A2D3897.html


OriginiOriginigg• Când standardul devine popular, se pune problema

controlului asupra acestuia:p– IETF formează HTML Working Group cu scopul de a începe lucrul

la HTML 2.0B L ă W ld Wid W b C ti (W3C)– Berners-Lee crează World Wide Web Consortium (W3C) – scop: promovarea tehnologii Web

– IETF reușește să scoată standardul HTML 2.0 în 1995, totuși în ș ș , ș1996 controlul revine în întregime către W3C

• HTML 2.0– Integrarea extensiilor pe care dezvoltatorii de browsere le

încorporase ad-hoc pentru diverse funcționalități

• HTML 3 0• HTML 3.0– În 1995, W3C scoate HTML 3.0 ca o modalitate de formalizare a

unor funcții precum suportul pentru documente științifice și matematice



OriginiOriginiOriginiOrigini• Războiul dezvoltatorilor de browsere continuă

– Fiecare vendor propune funcții noi ne-standadizate în încercarea– Fiecare vendor propune funcții noi, ne-standadizate, în încercarea de a acumula segmente din piața nouă în continuă expansiune:

– Microsoft reușește 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 contrucție a unor p p , g țcontroale bogate (dar care rulează doar pe Windows)

– Netscape vine cu propria implementare de ActiveX și adaugă limbajul de scripting JavaScriptlimbajul de scripting JavaScript

• IE nu se lasă mai prejos și propune Jscript

• În încercarea de a învinge apar dispute cu privire la ceÎn încercarea de a învinge, apar dispute cu privire la ce și cum ar trebui standardizat în HTML:– Netscape propune tag-ul BLINKNetscape propune tag ul BLINK– Microsoft vine cu MARQUEE



OriginiOriginiOriginiOrigini• Mediatorul e tot W3C

– În standard nu intră nici BLINK nici MARQUEE– Î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)P lâ ă ți t d t HTML 4 t d di ă i– Pe lângă separare conținut 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ă direcție:– În loc să fie o formă de SGML, noua specificație conduce HTML

î t i t ț XMLînspre strictețea XML:• Documentele HTML ar putea fi astfel mai ușor procesate de motoare XML • HTML-ul devine în același timp deschis, în loc de a complica structura

t d d l i tili t l t i t i d fi it î t bibli t ă t ăstandardului, utilizatorul ar putea veni cu tag-uri definite într-o bibliotecă externă pentru reprezentări particulare (e.g., pentru matematică se poate folosi MathML)



Temă pentru acasăTemă pentru acasăppTema constă într-un eseu având ca subiect:

• HTML 5 – viitorul Web-ului?• Veți urmări în principal (dar nu numai):

– Ce este HTML 5, C l t i d t t d d i d ă– Ce elemente noi aduce acest standard, cui se adresează

– Ce organizații sunt implicate în efortul de standardizare, – Minim 1 paragraf în care să prezentați propria voastră părere vizavi de standard

(elemente pro și contra) cu justificare.( p ș ) j– Referințe.

• Reguli de trimitere:– Se acceptă doar documente în format PDF

F i A4 f Ti N R di i 12 fă ă i– Formatare: pagina A4, font Times New Roman, dimensiune 12, fără spațiere, margini 2,5 cm stânga, dreapta, jos, sus

– Eseul trebuie să se întindă pe minim 1 pagină și maxim 3 pagini

Răspunsurile se trimit electronic, pe site-ul cursului (curs.cs.pub.ro), până pe data de 06.03.2012, ora 23.55.

– Nu se acceptă întârzieri: temele trimise după această datăNu se acceptă întârzieri: temele trimise după această dată nu sunt luate în considerare.



Dar la noi?Dar la noi?Dar la noi?Dar la noi?• www.pub.ro – a apărut în 1997, conținea

elemente minimale de HTML 3 2elemente minimale de HTML 3.2



HTML 4HTML 4

• HTML 4 extinde HTML cu mecanisme adecvate t *pentru:*

– Elemente de style sheet, – Limbaje de scripting, – Frame-uri, ,– Obiecte embedded, – Suport îmbunătățit pentru text reprezentat de la– Suport îmbunătățit pentru text reprezentat de la

dreapta la stânga– Elemente mai bogate de prezentare a tabelelorElemente mai bogate de prezentare a tabelelor– Îmbunătățiri pentru reprezentarea formularelor, oferirea

de suport pentru persoane cu disabilități.

28

p p p ț*http://www.w3.org/TR/1999/REC-html401-19991224/intro/intro.html#h-2.3



Ce este XHTML?Ce este XHTML?Ce esteCe este

• XHTML = Extensible Hypertext Markup Language– XHTML urmăreşte să înlocuiască HTMLş– XHTML este aproape identic cu HTML 4.01– XHTML este o versiune mai strictă şi maiXHTML este o versiune mai strictă şi mai

curată a HTML– XHTML este HTML redefinit ca o aplicaţie XMLXHTML este HTML redefinit ca o aplicaţie XML– XHTML este o “punte” între HTML şi XML



Problema cu HTMLProblema cu HTMLob e a cuob e a cu

• HTML a fost conceput ca o modalitate de a descrie structura unui document, cu tag-uripentru a indica headere, paragrafe, etc.

• Apare nevoia de control asupra aparenţeidocumentelor motiv pentru care HTML a fostdocumentelor, motiv pentru care HTML a fost îmbogăţit cu tag-uri pentru controlul font-urilor, aliniatelor etcaliniatelor, etc.



HTML vs. XMLHTML vs. XMLXML arată mult ca HTML, dar:

HTML foloseşte un set fix de tag-uri

În XML puteţi folosi propriile tag-uri (şi defini ce reprezintă ele g g (ş pîntr-un document separat)

HTML este proiectat pentru XML este proiectat pentruHTML este proiectat pentru afişarea datelor în formă umană

XML este proiectat pentru descrierea datelor pentru computerep

Browser-ele sunt foarte tolerante cu erorile în

Documentele XML trebuie să fie bine formate (corect sintactic)

HTML( )

Toate browserele pot afişa Toate browserele moderne afişează

31

p şHTML

şXML, dar în diverse moduri



Codificarea documentelor XMLCodificarea documentelor XMLCod ca ea docu e te oCod ca ea docu e te o• Un document XML începe cu o declaraţie:

<?xml version='1.0' encoding='utf-8'?>

• Forma arborescentă:– Există exact un element rădăcină– Elementele sunt conținute unele în altele, formând oElementele sunt conținute unele în altele, formând o

ierarhie arborescentă<person>

<firstname>Ion</firstname><lastname>Popescu</lastname>

<age>30</age><ssn>2711130345678</ssn>

32

</person>Curs Programare Web, anul 4 C5 – Curs 7


DocumenteDocumente XMLXML bine formatebine formateocu e teocu e te b e o ateb e o ate

• Reminder: document XML “bine format” = un document corect din punctul de vedere al regulilorsintactice generale XML:– are exact un element rădăcină

– fiecare element are un tag de sfârşit– fiecare element are un tag de sfârşit

– elementele sunt imbricate corect

– valorile atributelor sunt între ghilimele



DocumenteDocumente XML: XML: ValideValideXML S hXML S hXML SchemaXML Schema

• Document XML “Valid”: un document care respectă reguli impuse structuriiimpuse structurii

• Metode de specificare formală a structurii unui document XML:XML:– XML DTD (Data Type Definition): – XML Schema (XSD): un limbaj ce impune constrângeri asupra

structurii documentelor XMLstructurii 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 câte ori, ce

atribute pot să aibă, de ce tipuri, etc.• Parserele XML cu validare verifică respectarea• Parserele XML cu validare verifică respectarea

constrângerilor impuse de o schemă specificată• XML Schema Tutorial:

34

XML Schema Tutorial: http://www.w3schools.com/schema/default.asp



ExempluExemplu -- XML SchemaXML Schema• Pentru reprezentarea unui set de puncte în plan se

stabilesc următoarele reguli:stabilesc următoarele reguli:– Elementul rădăcină este dots

l t "d t "<xs:element name="dots">– Acesta poate conţine un număr oarecare de elemente de

tip dot este un tip complex pentru că el conţine și altetip dot - este un tip complex pentru că el conţine și alte elemente

<xs:complexType><xs:complexType>– Conţine o secvenţă de alte elemente

<xs:sequence>– Fiecare element dot are 2 atribute, x şi y, cu valori întregi

35

<xs:attribute name="x" type="xs:integer" />Curs Programare Web, anul 4 C5 – Curs 7


ExempluExemplu XML SchemaXML SchemaExempluExemplu XML SchemaXML Schema

? l i "1 0"?

dots.xsd<?xml version="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:complexType><xs:attribute name="x" type="xs:integer" use="required"/><xs:attribute name="y" type="xs:integer" use="required"/>

</xs:complexType></xs:complexType></xs:element>

</xs:sequence></xs:complexType>/xs:complexType

</xs:element></xs:schema>



ExempluExemplu: document XML cu schema: document XML cu schemaExempluExemplu: document XML cu schema : document XML cu schema

dots xml

<?xml version="1.0" encoding="UTF-8" ?> <dots xmlns:xsi="http://www w3 org/2001/XMLSchema instance"

dots.xml

<dots xmlns:xsi= http://www.w3.org/2001/XMLSchema-instancexsi:noNamespaceSchemaLocation="dots.xsd">>

<dot x="32" y="100" /><dot x="17" y="14" /><dot x= 17 y= 14 /><dot x="18" y="58" > </dot></dots>



De la HTML la XHTML, IDe la HTML la XHTML, Ie a a ,e a a ,

• Elementele XHTML trebuie să fie corect imbricate<b><i>bold and italic</b></i> este greşit

• 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, IIDe la HTML la XHTML, IIe a a ,e a a ,• Numele de atribute trebuie să fie lower case

Exemplu: <table width="100%">– Exemplu: <table width= 100% >

• Valorile atributelor trebuie să fie încadrate de “Exemplu: <table width "100%">– Exemplu: <table width= 100% >

• Minimizarea atributelor este interzisăE l f i " i "– Exemplu: <frame noresize="noresize">,nu poate fi abreviată prin <frame noresize>

• Atributul id înlocuieşte atributul nameAtributul id înlocuieşte atributul name– Greşit: <img src="picture.gif" name="picture1" />

– Corect: <img src="picture.gif" id="picture1" />Corect: img src picture.gif id picture1 /

– Cel mai bine: <img src="picture.gif" name="picture1" id="picture1" />

39

g p g p p



XHTML șiXHTML și DTDDTD--uriurișș uu

• HTML, XHTML, XML şi multe alte limbaje de markup ce suportă DTD-uri

• DTD (“Document Type Definition”) descrie ( yp )sintaxa ce trebuie folosită pentru un anumit document, folosirea unui DTD fiind o regulă în , gcazul documentelor XHTML

• Există trei tipuri diferite de DTD-uri pentruExistă trei tipuri diferite de DTD uri pentruXHTML — puteţi lucra cu oricare– Ele sunt publice pe web– Ele sunt publice pe web– Documentul XHTML trebuie să înceapă cu o referinţă

la unul dintre aceste DTD-uri

40

la unul dintre aceste DTD uri



Declaraţia Declaraţia DOCTYPEDOCTYPEţţ

• Orice document XHTML trebuie să înceapă cu o d l ţi DOCTYPE ( ifi ă DTD l tdeclaraţie 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">p g

3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">p g



Declaraţia Declaraţia DOCTYPEDOCTYPEţţ• Cele trei tipuri de DTD-uri sunt:

Strict– Strict• Specifică că documentul XHTML e “curat”, el nu conține informaţii

de afişare (precum cele legate de font, culoare sau dimensiune).• Stilul acesta e folosit în conjuncție cu un CSS dacă se doreşte

definirea totuși a felului în care trebuie să arate reprezentarea documentuluidocumentului.

– Transitional• Folosit cu HTML standard şi/sau cu CSS.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)<background>, <color>, <height>, <size>, etc).

– Frameset• Folosit dacă documentul include frame-uri HTML

42

• Folosit dacă documentul include frame-uri HTML



EExempluxemplu de document XHTMLde document XHTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www w3 org/TR/xhtml1/DTD/xhtml1Strict//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>m<head>

<title>A simple document</title>title A simple document /title</head><body><body>

<p>A simple paragraph.</p></body></body>

</html>



InstrumenteInstrumente utile…utile…st u e test u e te ut eut e

• Dave Raggett's HTML TIDY– http://www.w3.org/People/Raggett/tidy/– este un instrument free UNIX pentru verificarea şi

curăţarea paginilor HTML• W3C HTML Validation Tool

– http://validator.w3.org/– este un formular HTML pentru verificarea (dar nu şi p ( ş

corectarea) documentelor HTML şi XHTML



Reminder:Reminder: VocabularVocabularReminder: Reminder: VocabularVocabular• SGML: Standard Generalized Markup p

LanguageHTML: Hypertext Markup Language– HTML: Hypertext Markup Language

– XHTML: eXtensible Hypertext Markup Language– XML: eXtensible Markup Language

DTD D T D fi i i• DTD: Document Type Definition



QuizQuizQuQu

• Care este diferenţa dintre document XML bine format şi document XML valid?

• Ce este un DTD?• Pe ce standard HTML este bazat XHTML?• Enumeraţi patru diferenţe între HTML şi XHTML• Enumeraţi patru diferenţe între HTML şi XHTML.



CSSCSSCSSCSS

((CCascading ascading SStyle tyle SSheet heet ))



Problema cu HTMLProblema cu HTMLob e a cuob e a cu• HTML a fost de la început conceput pentru a descrie

conținutul unui documentconținutul unui document• Autorii de pagini web nu aveau nevoie să descrie layout-ul --

browserul avea grijă de acest aspectg j• Aceasta reprezintă o abordare inginerească corectă, însă

nu satisface nevoile stiliștilor și “artiștilor”O ii i ă i lt i ț i i– Oamenii ce aveau nevoie sa spună mai multe simțeau 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 , p pmulte tag-uri folosite pentru controlul afișării– Conținutul și modul de afișare al informaților au devenit din ce în ce

mai mult interconectatemai mult interconectate– Browsere diferite afișează totuși lucrurile în moduri diferite, ceea ce

reprezintă o problemă reală atunci când modul de prezentare al informațiilor e chiar mai important decât informația propriu zisă

48

informațiilor e chiar mai important decât informația propriu-zisă



Cascading Style SheetsCascading Style Sheetsg yg y• Cascading Style Sheet (CSS) este o modalitate de

separare a elementelor de prezentare de elementele deseparare 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, rezultând în independență între formă și conținut

• CSS are câteva avantaje:• CSS are câteva avantaje:– Permite separarea conținutului de prezentare– Permite definirea prezentării și a layout-ului tuturor paginilor dintr-unPermite definirea prezentării și a layout ului tuturor paginilor dintr un

site Web, într-o manieră unitară, printr-o construcție unică– Poate fi folosit atât împreună cu pagini HTML, cât și cu cele XML

Î• În opinia criticilor, totuși CSS are dezavantaje:– Unele browsere mai vechi nu îl suportă în totalitate

Î f ți d di i d t l CSS t t t

49

– În funcție de dimensiune, documentele CSS externe pot crește timpul de încărcare a paginilor



SintaxaSintaxa CSSCSSS ta aS ta a CSSCSS• Sintaxa CSS este compusă dintr-o listă de selectori (pentru

alegerea tag-urilor) și descriptori (pentru a specifica cealegerea 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 afișat folosind font de tip Verdana și colorat în verdefont de tip Verdana și colorat în verde

• Un fișier CSS reprezintă o listă de astfel de perechi selector/descriptorse ecto /desc pto– Selectorii pot fi simple tag-uri HTML sau XML– CSS permite de asemenea definirea altor moduri de combinare a p

tag-urilor– Descriptorii sunt definiți chiar în CSS



Sintaxa CSSSintaxa CSSS ta a CSSS ta a CSS• Sintaxa generala este:

l t { t l }selector { property: value }– sau

selector, ..., selector {, , {property: value;. . .property: value

}– unde

• selector reprezintă tag-ul afectat de stil (selectorul este case-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 afișare al respectivului tagproperty și value descriu modul de afișare al respectivului tag.• Spațiile după virgule și punct si virgule sunt opționale.• Un punct și virgulă trebuie să fie folosit între perechi

t l d d ă lti h t i i lă

51

property:value, dar după ultima pereche punct și virgulă devine caracter opțional.



ExempluExemplu de CSSde CSSe p ue p u de CSSde CSS/* Acesta este un comentariu */

h1 h2 h3 {font-family: Arial sans-serif;} /*folosește primul font disponibil */h1,h2,h3 {font-family: Arial, sans-serif;} / folosește primul font disponibil /

p, table, li, address { /* se aplică tuturor acestor tag-uri */font-family: "Courier New"; /* valoare încadrată între ghilimele ce conţine

spaţii */spaţii /margin-left: 15pt; /* indentare */

}

p, li, th, td {font-size: 80%;} /* 80% din dimensiunea elemenului ce îl ţi */conţine */

th {background-color:#FAEBD7} /* culorile pot fi specificate în hexa */

body { background-color: #ffffff;}y { g ;}

h1,h2,h3,hr {color:saddlebrown;} /* se adaugă elementelor specificate */

a:link {color:darkred} /* un link ne-vizitat */

a:visited {color:darkred} /* un link vizitat */

a:active {color:red} /* un link deja vizitat */

a:hover {color:red} /* atunci când mouse-ul trece deasupra elementului */

52

a:hover {color:red} / atunci când mouse ul trece deasupra elementului /



SelectoriSelectori• 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, i {color: red}

Putem repeta selectorii:h1, h2, h3 {font-family: Verdana; color: red}h1 h3 {font weight: bold; color: pink}h1, h3 {font-weight: bold; color: pink}

• Atunci când valorile nu coincid, ultima declarație suprascrie declarațiile anterioare

Selectorul universal * se aplică oricărui și tuturor• Selectorul universal * se aplică oricărui și tuturor elementelor:

* {color: blue}• Atunci când valorile nu coincid, selectorii mai specifici suprascriu

comportamentul selectorilor mai generali (deci elementele em vor fi în continuare roșii)



Exemplu de suprascriereExemplu de suprascriereExemplu de suprascriereExemplu de suprascriere



SelectoriSelectori• Un selector descendent alege un tag având un element

ancestor corespunzător:p code { color: brown }

– selectează code doar dacă este folosit în interiorul unui paragraf

• Un selector copil > alege un tag având un părinte corespunzător:

h3 > em { font weight: bold }h3 > em { font-weight: bold }selectează un em doar dacă părintele imediat este h3

• Un selector adiacent alege un element ce imediat urmează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>Exemplu: <b>I m bold and</b> <i>I m italic</i>Rezultatul va arata astfel: I'm bold and I'm italic



SelectoriSelectoriSe ectoSe ecto• Un selector simplu de atribut permite alegerea

l t l it t ib t i dif t delementelor 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 având o anumită valoare:– Sintaxa: element[atribut="valoare"] { ... }[ ] { }– Exemplu: table[border="0"] { ... }



ValoriValoria oa o• Sintaxa unei reguli CSS este:

selector selector { property: value; property:selector, ..., selector { property: value; . . . property:value }

• Valoarea este orice apare între două puncte șiValoarea este orice apare între două puncte și punct și virgulă (sau acoladă)

• Exemple:Exemple: – * {font-family: Trebuchet, Verdana, sans-serif;}

• Aceasta înseamnă ca trebuie folosit font Trebuchet pentru orice, dacă p ,este disponibil; altfel, se folosește font Verdana, dacă este disponibil; altfel folosește orice font sans serif pe care browserul îl are instalat.

– section {border: thin solid blue;}sect o {bo de : t sol d blue;}• Aceasta înseamnă că trebuie pus un border în jurul elementelor

section; acesta trebuie să fie subțire și solidă și albastră



Atributul Atributul classclasst butut butu c assc ass

• Atributul class permite definirea mai multor stiluri diferite pentru un același element:– În fișierul 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><p class= fineprint >Offer ends 1/1/97.</p>

• Pentru definirea unui selector ce se aplică oricărui element având o anumită clasă se omiteoricărui element având o anumită clasă se omite numele tag-ului (dar se păstrează punctul):

fi i t {f t i 8 t}

58

.fineprint {font-size: 8pt}



Atributul Atributul ididt butut butu dd

• Atributul id este definit similar atributului class, dar folosește # in loc de .– În fișierul style sheet:ș y

p#important {font-style: italic} sau# important {font-style: italic}

– În documentul HTML:<p id="important">

• class și id pot fi ambele folosite și nu e obligatoriu să aibă nume diferite:să aibă nume diferite:<p class="important" id="important">



divdiv șșii spanspanșș• div și span sunt elemente HTML ce au ca scop

introducerea de informații de prezentare aintroducerea de informații de prezentare a elementelor pe baza regulilor CSS

• div asigură existența unei linii noi înainte și după• div asigură existența unei linii noi înainte și după (similar unui paragraf); span nu

• Exemplu:Exemplu:– CSS:

div {background-color: #66FFFF}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>



Rezultat:Rezultat:Rezultat: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 i i tText inainte.

<div>This div is treated like a paragraph, but <span class="color">this span</span> is not.</div>

Text dupa.

</body>

</html>/html



Alt exempluAlt exempluAlt exempluAlt exemplu• Elementele <div> sunt cel mai adesea folosite

pentru poziționare:

#c nt in {#container {position: relative

}

#navigation {position: absolute;left: 30px;top: 5pxtop: 5px

}

<div id="container"><div id="navigation">Text</div></div>



FolosireaFolosirea elementelorelementelor CSSCSSo os eao os ea e e e te oe e e te o CSSCSSSunt trei moduri de folosire a unui CSS:

S1. Style sheet extern– Elementele CSS sunt specificate într-un document

extern– Se poate folosi atât pentru HTML, cât ș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

63

Se aplică doar pentru HTML, nu și pentru XML– Formă limitată de sintaxă CSS



External style sheetExternal style sheetyy

• Toate elementele CSS se definesc într-un fișier textern…

• Pentru a folosi elementele definite în fișierul extern, se adaugă în HTML, în interiorul

l t l i h d i telementului <head> sintaxa:<link REL="STYLESHEET" TYPE="text/css" HREF="Style Sheet URL">Sheet URL >

• Sau în prologul unui document XML se poate p g padăuga sintaxa:<?xml-stylesheet href="Style Sheet URL" t "t t/ "?

64

type="text/css"?>


Embedded style sheetEmbedded style sheetbedded sty e s eetbedded sty e s eet

• Elementele CSS se definesc în interiorul documentului HTML, în interiorul elementului <head>: <style TYPE="text/css">



</style>/style

• Notă: Încapsularea style sheet-ului într-un comentariu reprezintă un artificiu de ascundere acomentariu reprezintă un artificiu de ascundere a informației de browsere mai vechi ce nu înțeleg sintaxa CSS

65

sintaxa CSS.


Inline style sheetInline style sheete sty e s eete sty e s eet

• Atributul STYLE poate fi adăugat oricărui 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 informații de prezentare în cadrul HTMLMix de informații de prezentare în cadrul HTML– Ascunde și îngreunează vizibilitatea codului HTML– Nu se pot folosi toate elementele CSS

66

– Nu se pot folosi toate elementele CSS



Ordinea de cascadareOrdinea de cascadareO d ea de cascada eO d ea de cascada e

• Stilurile vor fi aplicate unui document HTML în di ătordinea următoare:

1.Stilul implicit al browser-ului2.External style sheet3. Internal style sheet (în interiorul tag-ului <head>)y ( g )4. Inline style (în interiorul altor elemente, cele mai din afară

mai întâi)

• Când elementele de stil ajung să fie în conflict, cel mai “apropiat” (mai recent aplicat) stil câștigăp p ( p ) ș g



Exemplu de ordine de cascadareExemplu de ordine de cascadaree p u de o d e de cascada ee p u de o d e de cascada e• External style sheet:

h3 { color: red;h3 { color: red;text-align: left;font-size: 8pt

}}• Internal style sheet:

h3 { text-align: right; h3 { text align: right; font-size: 20pt

}• Atributele rezultante:• Atributele rezultante:

color: red;text-align: right;f 20font-size: 20pt



Alt exempluAlt exempluAlt exempluAlt exemplu• Considerăm documentul HTML:

• Cazurile considerate de CSS:

<p class="pclass" id="pid"><span class="sclass" id="sid">text</span></p>

span#sid { color: red; }#pid span { color: green; }

Textul va fi afișat verde

#pid { color: blue; font-size: 10px; }#pid span { color: red !important;} Cum va fi afișat textul?p p pp #sid { color: green; font-size: 150%; }

Răspuns: Textul va fi afișat roșu cu dimensiunea 15px (font-size: 10px, combinat cu font-size: 150% => 10 x 1.5 = 15px)


( o s e 0p , co b a cu o s e 50% 0 5 5p )


Un exemplu XMLUn exemplu XMLUn exemplu XMLUn exemplu XML<?xml version="1.0" standalone="no"?><!DOCTYPE novel SYSTEM "novel.dtd">

l l h h f l<?xml-stylesheet href="styles.css" type="text/css"?><novel>

<foreword>h Thi i th t A i l / h<paragraph>This is the great American novel.</paragraph>

</foreword><chapter>

<paragraph>It was a dark and stormy night </paragraph><paragraph>It was a dark and stormy night.</paragraph><paragraph>Suddenly, a shot rang out!</paragraph>

</chapter></novel></novel>

chapter {font-family: "Papyrus", fantasy}foreword > paragraph {border: solid red; padding: 10px}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}

CSSCSS::


chapter:first letter {font size: 200%; float: left}paragraph {display: block}chapter:before {content: "New chapter: "}


RezultatulRezultatulRezultatulRezultatulRezultat afișat de Firefox 4:

Rezultat afișat de IERezultat afișat de IE



Forma Forma prescurtată de specificareprescurtată de specificare a a proprietproprietăţăţilorilor

• Adesea mai multe proprietăţi pot fi combinateAdesea mai multe proprietăţi pot fi combinate, acest aspect ajutând la o scriere mai rapidă a specificațiilor de prezentarespecificațiilor de prezentare

• De exemplu, dacă considerăm construcția CSS:h2 { font-weight: bold; font-variant: small-caps; font-size: 12pt; line-height: 14pt; font-family: sans-serif }

• Ea poate fi scrisă sub forma prescurtată:h2 { font: bold small-caps 12pt/14pt sans-serif } h2 { font: bold small caps 12pt/14pt sans serif }



PseudoPseudo--claseclaseseudoseudo c asec ase• Pseudo-clasele sunt elemente ale căror stare (și

mod de aparitie) poate varia în timpmod de aparitie) poate varia în timp• Sintaxa: element:pseudo-class {...}

:link– :link• Un link ce nu a fost vizitat

– :visited• Un link ce a fost vizitat

– :activeU li k i ă li k• Un link pe care tocmai se execută un click

– :hover• Un link peste care este poziționat cursorul mouse-• Un link peste care este poziționat cursorul mouse-

ului• Pseudo-clasele sunt permise oriunde în cadrul

76

pselectorilor CSS



Alegerea numelorAlegerea numelorege ea u e oege ea u e o

• CSS este proiectat pentru a separa conținut de stil– Prin urmare, numele ce sunt folosite în HTML sau (mai

ales) în XML trebuie să descrie conținut, nu stilE l• Exemplu:– Să presupunem că definiți span.huge {font-size: 36pt} și

folosiți <span class="huge"> în cadrul mai multorfolosiți <span class= huge > în cadrul mai multor documente

– Ulterior descoperiți că utilizatorii dezagrează stilul acesta, p ț g ,deci modificați CSS-ul în span.huge {font-color: red}

– Numele este incorect ales; încercați să îl redenumiți în toate doc mentele?toate documentele?

– Daca ați fi ales de la început span.important {font-size: 36pt} ar fi fost mai ușor de întreținut propriile documente

77

36pt}, ar fi fost mai ușor de întreținut propriile documente



HTML 5HTML 5

01.04.2010 Curs Programare Web, anul 4 C5 – Curs 6 78


HTML reminderHTML reminderHTML reminderHTML 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• HTML 3.0 - 1995. Versiunea cuprindea extensii importante, cum ar fi marcaje pentru notaţii matematice, bannere etc.

• HTML 3.2, - Ianuarie 1997, este considerat ca succesorul, ,versiunii 2.0, incorporând o serie de taguri din HTML 3.0.

• HTML 4 - Decembrie 1997 extinde HTML cu mecanisme pentru stylesheets script-uri frame-uri un suport mai mare şipentru stylesheets, script uri, frame uri, un suport mai mare şi îmbunătăţit pentru alinierea textului, tabele mai bogate şi îmbunatăţiri ale formularelor, oferind o accesibilitate mai mare pentru oamenii cu deficit.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 sintaxeprivinta modului de functionare a unor sintaxe.



HTML 5HTML 5HTML 5HTML 5• 2004 Web Hypertext Application Working

Group (WHATWG) au inceput lucrul la noul standard HTML

• 2004 Consortiul W3C se concentrau asupra pdezvoltarii XHTML 2.0 desi HTML 4.01 nu mai fusese actualizat inca din 2000.

• 2007 Specificatiile HTML 5 ale WHATWG au• 2007 Specificatiile HTML 5 ale WHATWG au fost apoi adoptate de catre W3C ca punct de start al noului standard HTMLstart al noului standard HTML.



HTML 5HTML 5HTML 5 HTML 5 • HTML5 este ultima versiune HTML si XHTML.

Standardul incearca sa rezolve problemeleStandardul 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.D i lti i HTML 5 l t d t d• Desi ultima versiune HTML 5 lansata pe data de 22 Februarie 2012 este o „ciorna” (W3C Working Draft) dezvoltatorii browserelor auWorking Draft), dezvoltatorii browserelor au inceput sa implementeze parti din functionalitatile prezente in standardul HTML5.u c o a a e p e e e s a da du 5


De ce HTML5?De ce HTML5?De ce HTML5?De ce HTML5?

Calculatoare performante folosite insuficient

Numarul utilizatorilor de servicii web devine din ce in ce mai mare


• Performantele JavaScript.p


ELEMENTE ELEMENTE SIMPLIFICATESIMPLIFICATE IN IN HTML5HTML5HTML5HTML5


DOCTYPEDOCTYPEDOCTYPEDOCTYPE

• HTML 5<!DOCTYPE html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T iti l//ENTransitional//EN„“http://www.w3.org/TR/xhtml1/DTD/xhtml1-/xhtml1/DTD/xhtml1transitional.dtd">


RadacinaRadacina HTMLHTMLRadacinaRadacina HTMLHTML

ht l • HTML 5<html lang="en">

<html xmlns=http://www.w3.org/1999/xhtml glang="en" xml:lang="en">


CHARSETCHARSETCHARSETCHARSET

• <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

• HTML 5<meta charset="utf-8">


STYLESHEETSTYLESHEETSTYLESHEETSTYLESHEET

• <link rel="stylesheet" href="style-original.css" type="text/css" />

• HTML 5<link rel="stylesheet" href="style-original.css" />


ELEMENTEELEMENTE NOINOI IN HTML5IN HTML5ELEMENTEELEMENTE NOINOI IN HTML5IN HTML5


ElementulElementul BaseBaseElementulElementul BaseBase<head>

<base href=“url” target=" blank" />target _blank /></head>

i d d d b-se introduce adresa de baza.


El tEl t titi dd titiElementeElemente semanticesemantice de de sectionaresectionare

• HTML 4


ElementeElemente semanticesemantice de de sectionaresectionare

• HTML 5


<HEADER><HEADER><HEADER><HEADER>

HTML 4<div id="header">

<h1>M W bl </h1><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><HGROUP><HGROUP><HGROUP>

HTML 4HTML 4<h1>My Weblog</h1><h2>A lot of effort went into making this effortless.</h2>

HTML 5HTML 5<header>

<hgroup>g p<h1>My Weblog</h1> <h2>A lot of effort went into making this ffortless.</h2> </hgroup> …

</header>


ExempluExempluExempluExemplu

<header><hgroup>

h1 h f "/" Mi i A / /h1<h1><a href="/">Mini Apps</a></h1><h2>Web applications for iPhone, Android & other mobile platforms</h2>

</hgroup></header>


<FOOTER><FOOTER><FOOTER><FOOTER>

HTML 4<div id="footer">

<p>§</p> <p>© 2001–9<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><a href= # >Mark Pilgrim</a></p>

</footer>


<SECTION><SECTION>SECTIONSECTION• Sectiune generica de aplicatie sau g p

document

<section><h1>Level 1</h1> <section> <h1>Level 2</h1> <section> <h1>Level 3</h1> </section><section> <h1>Level 3</h1> </section>

</section>


<ARTICLE><ARTICLE><ARTICLE><ARTICLE>

HTML 4<div class="entry">

<p class="post-date">October 22, 2009</p> <h2> <a href="#" rel="bookmark" title="link to this<a href="#" rel="bookmark" title="link to this

post"> Travel day </a> </h2> </div>

HTML 5<article>

<header> <p class="post-date">October 22 2009</p><p class post date >October 22, 2009</p> <h1> <a href="#" rel="bookmark" title="link to

this post"> Travel day </a> </h1> </header> … </article></article>


<ASIDE><ASIDE>ASIDEASIDE

HTML5HTML5<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 f "/2007/07/">J l 2007</ ></li><li><a href="/2007/07/">July 2007</a></li>

</ul>

</aside></aside>


<NAV><NAV><NAV><NAV>

HTML 4

<div id="nav">

HTML 5<nav>

< l><div id= nav > <ul> <li><a

<ul> <li><a

href="#">home</a></li> <li><a

href="#">home</a></li> <li><a

href="#">blog</a></li>

<li><a href="#">blog</a></li>

<li><a href="#">gallery</a></li> # g / /

<li><a href="#">gallery</a></li>

<li><a

<li><a href="#">about</a></li>

</ul><li><a href="#">about</a></li>

</ul>/

</nav>

</div>


<TIME><TIME>TIMETIME

<time datetime "2009 10 22" pubdate>October 22• <time datetime="2009-10-22" pubdate>October 22, 2009</time>

• <time datetime="2009 10 22T13:59:47 04:00" pubdate>• <time datetime= 2009-10-22T13:59:47-04:00 pubdate> October 22, 2009 1:59pm EDT </time>

• <article><article><header>

<time datetime="2009-10-22" pubdate> October 22, 2009 </time>p ,<h1> <a href="#" rel="bookmark" title="link to this post"> Travel day

</a> </h1>

/h d</header><p>Lorem ipsum dolor sit amet…</p>

/ i l</article>


a resolution-dependent bitmap canvas which can be used for rendering graphs, game graphics, or other visual images on the fly

GRAFICAGRAFICA IN HTML5IN HTML5

visual images on the fly.

GRAFICAGRAFICA IN HTML5 IN HTML5 <CANVAS<CANVAS>>


<CANVAS><CANVAS>CANVASCANVAS

Si t• Sintaxa:<canvas id="a" width="300" height="225"></canvas>

• Utilizare cu JavaScript & DOMvar a_canvas = document.getElementById("a");• Desenare• Desenarefunction draw_b() {

var b canvas = document.getElementById("b");_ g y ( )var b_context = b_canvas.getContext("2d");//future 3Db_context.fillRect(50, 25, 150, 100);

}}


<CANVAS><CANVAS>CANVASCANVASDesenarea in Canvas Context:Sunt esentiale functiile:beginPath()beginPath()closePath()stroke()fill()fill()

Proprietati:fillStyle = (CSS color pattern gradient)fillStyle = (CSS color,pattern,gradient)strokeStyle= (CSS color,pattern,gradient)


<CANVAS><CANVAS>CANVASCANVAS• Alte functii de desenare in canvas contexto Desenare dreptunghiuri

• fillRect(x, y, width, height)fillRect(x, y, width, height)• strokeRect(x, y, width, height)• clearRect(x, y, width, height)

D li iio Desenare liniio moveTo(x, y)o lineTo(x y)o lineTo(x, y)


<CANVAS><CANVAS>CANVASCANVASoDesenare arce

• arc(x, y, radius, startAngle, endAngle, anticlockwise)(pentru cerc startAngle=0, endAngle=Math.pi*2)

• quadraticCurveTo(cp1x, cp1y, x, y)bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)• x,y coordonatele punctului de sfarsit• cp1x,cp1y, cp2x,cp2y coordonatele primului si celui de al doilea punct de control.cp1x,cp1y, cp2x,cp2y coordonatele primului si celui de al doilea punct de control.

Desenarea de textoProprietati context:oProprietati 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 de desenareo Context.fillText(text,x,y);o Context.fillText(text,x,y);


<CANVAS><CANVAS>CANVASCANVASo Crearea unui gradientg

– createLinearGradient(x0, y0, x1, y1)createRadialGradient(x0 y0 r0 x1 y1 r1)– 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.fillStyle = my_gradient; context.fillRect(0, 0, 300, 225);


<CANVAS><CANVAS>CANVASCANVAS2. var my_gradient = context.createLinearGradient(0, 0, 0, 225);

my_gradient.addColorStop(0, "black"); y_g pmy_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>CANVASCANVASo Desenarea de imaginig

o drawImage(image, dx, dy)o drawImage(image, dx, dy, dw, dh)o drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)


<CANVAS><CANVAS>CANVASCANVAS• Exemple desenare imaginip g1. <img id="cat" src="images/cat.png" alt="sleeping cat" width="177"

height="113"><canvas id="e" width="177" height="113"></canvas>

i<script>window.onload = function() {var canvas = document.getElementById("e");var context = canvas.getContext("2d");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 context = canvas.getContext( 2d );

var cat = new Image();cat.src = "images/cat.png"; cat.onload = function() { context.drawImage(cat,

0, 0);}; </script>


<CANVAS><CANVAS>CANVASCANVAS• Transformari

– Pentru a retine si a prelua starile “panzei” :• Save();Save();• Restore();

– Starea panzei=transformari, valorile proprietatilorStarea panzei transformari, valorile proprietatilor strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, lineJoin, miterLimit, shadowOffsetX, shadowOffsetY, shadowBlur shadowColorshadowBlur, shadowColor

– Translatarea: translate(x, y)


<CANVAS><CANVAS>CANVASCANVAS– Rotatia: rotate(angle)

– Scalarea: scale(x, y)

• Umbre– Proprietati context:

• ShadowColor• ShadowOffsetX• ShadowOffsetY

Sh d Bl• ShadowBlur


ExempleExemple <CANVAS><CANVAS>ExempleExemple CANVASCANVAS• http://html5demos.com/canvas-gradp g


ExempleExemple <CANVAS><CANVAS>ExempleExemple CANVASCANVAS• First person gifter p g

http://htmlfive.appspot.com/static/gifter.html



HTML5 API VIDEO & AUDIOHTML5 API VIDEO & AUDIO


HTML5 API VIDEO & AUDIOHTML5 API VIDEO & AUDIOHTML5 API VIDEO & AUDIOHTML5 API VIDEO & AUDIO• Continut media fara pluginp g• Multitudine de formate video:

• MPEG4• MPEG4• FLASH VIDEO

OGG• OGG• AUDIO VIDEO INTERLACED

• HTML 4:

<video src="video.ogg"> <object data="videoplayer.swf" type="application/x-shockwave-flash"> j p y yp pp /

<param name="movie" value="video.swf"/> </object>

</video>


HTML5 API VIDEO & AUDIOHTML5 API VIDEO & AUDIOHTML5 API VIDEO & AUDIOHTML5 API VIDEO & AUDIO• HTML5<video src="video.ogg" controls>

Your browser does not support HTML5 video. </video><audio controls<audio controls

src="johann_sebastian_bach_air.ogg"> An audio clip from Johann Sebastian Bach.

</audio>

• Functii media– Load()

<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"'> ()– Play()– Pause()

p ,<source src="pr6.ogv" type='video/ogg;

codecs="theora, vorbis"'></video>

Pause()– canPlayType(type)

<audio controls> <source src="johann_sebastian_bach_air.ogg"> <source src="johann_sebastian_bach_air.mp3">

An audio clip from Johann Sebastian Bach.</audio> /


HTML5 API VIDEO & AUDIOHTML5 API VIDEO & AUDIOHTML5 API VIDEO & AUDIOHTML5 API VIDEO & AUDIO• Atribute ReadOnly

– Duration– Paused– Ended– startTime– Error– currentSrc

• Atribute ce pot fi folosite in JavascriptA t l– Autoplay

– Loop– currentTime– ControlsControls– Volume (0.0-1.0)– Muted– Preload

• Atribute legate de format– Type=formatul containerului (e.g video/mp4);– Codecs=“video codec, audio codec”.


HTML5 APIHTML5 API -- GEOLOCATIEGEOLOCATIEHTML5 API HTML5 API GEOLOCATIEGEOLOCATIEO noua proprietate a obiectului global p p gnavigator:

– 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


HTML5 APIHTML5 API -- GEOLOCATIEGEOLOCATIEHTML5 API HTML5 API GEOLOCATIEGEOLOCATIE• Exemplu de implementare:p pfunction get_location() { navigator.geolocation.getCurrentPosition(show_map);

} //determina afisarea unei bare de informatii ce intreaba utilizatorul daca

doreste sa isi dezvaluie locatia sadoreste sa isi dezvaluie locatia sa. //show_map ->functia de callbackfunction show_map(position) {var latitude = position.coords.latitude; p

var longitude = position.coords.longitude; // let's show a map or do something interesting! }


HTML5 APIHTML5 API -- GEOLOCATIEGEOLOCATIEHTML5 API HTML5 API GEOLOCATIEGEOLOCATIE

Exemplu de tratarea a erorilor: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:_ p p– code short an enumerated value

• PERMISSION_DENIED (1)• POSITION_UNAVAILABLE (2)• TIMEOUT (3)• TIMEOUT (3)• UNKNOWN_ERROR (0)

– message DOMString not intended for end users


ExempluExemplu GeolocatieGeolocatieExempluExemplu GeolocatieGeolocatie• Google Maps g p

http://htmlfive.appspot.com/static/whereami htmlami.html


APLICATIIAPLICATII OFFLINEOFFLINE


APLICATII OFFLINEAPLICATII OFFLINEAPLICATII OFFLINEAPLICATII OFFLINE• O aplicatie web este o lista de URL-uri- HTML,CSS,Javascript,

imagini sau orice alta forma de resursaimagini 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 necesarlocal 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 fl i di d t ti li ffliflag ce va indica daca sunteti online sau offline. – var online = navigator.onLine;

• Acest atribut se modifica in timpul evenimentelor online si offline ce psunt manevrate de obiectul Window.


MANIFESTUL CACHEMANIFESTUL CACHEMANIFESTUL CACHEMANIFESTUL CACHE• O aplicatie web offline este dependenta de fisierul cache manifest.• Manifestul CACHE = lista resurselor de care are nevoie aplicatia web candManifestul 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 MANIFESTCACHE MANIFEST/static/stickies.html/media/deleteButton.png/media/deleteButtonPressed png/media/deleteButtonPressed.png/css/stickies.css/js/stickies.js


BazaBaza de datede dateBazaBaza de datede date• HTML5 asigura un API de baza de date bazat

pe SQL pentru a inmagazina local si structuratpe SQL pentru a inmagazina local si structurat datele.

• API ul interactioneaza cu baza de date in mod• API-ul interactioneaza cu baza de date in mod asincron ceea ce asigura faptul ca interfata utilizator nu se va bloca.utilizator nu se va bloca.

Exemplu de implementareExemplu de implementare//pentru a crea un obiect baza de datevar db = window.openDatabase("NoteTest", "1.0","Example DB",200000);

function renderNote(row) {function renderNote(row) { // renders the note somewhere }

function reportError(source, message) { // report error p}


BazaBaza de datede dateBazaBaza de datede datefunction renderNotes() {

db.transaction(function(tx) {tx executeSql('CREATE TABLE IF NOT EXISTS Notes(title TEXT body TEXT)'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 OFFLINEAPLICATII OFFLINEAPLICATII OFFLINEAPLICATII OFFLINE• Pentru depozitarea simpla si sincrona a p p

informatiilor pentru utilizare offline HTML introduce atributul localStorage al obiectuluiintroduce atributul localStorage al obiectuluiWindows.

localStorage["status"] = "Idling ";localStorage[ status ] = Idling. ;


EXEMPLU APLICATII OFFLINEEXEMPLU APLICATII OFFLINEEXEMPLU APLICATII OFFLINEEXEMPLU APLICATII OFFLINE• Sticky notes y

http://htmlfive.appspot.com/static/stickies htmles.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!

WEB WORKERSWEB WORKERS

NU VOI BLOCA BROWSERUL CU JAVASCRIPT!NU VOI BLOCA BROWSERUL CU JAVASCRIPT!NU VOI BLOCA BROWSERUL CU JAVASCRIPT!

WEB WORKERSWEB WORKERS


WEB WORKERSWEB WORKERSWEB WORKERSWEB WORKERS• Javascript ruleaza pe acelasi fir de executie cu browserul

ceea ce poate face ca acesta din urma sa nu mai poataraspunde la comenzile utilizatoruluiraspunde 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);console.log( Results: + event.data);};</script>

Muncitorii:Muncitorii: function findPrimes() {// ... prime algorithm herepostMessage(nextPrime);}}findPrimes();


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


EXEMPLU WEB WORKERSEXEMPLU WEB WORKERSEXEMPLU WEB WORKERSEXEMPLU WEB WORKERS• http://htmlfive.appspot.com/static/primes-good.html

Good PrimesGood Primes



CeCe maimai oferaofera HTML5?HTML5?CeCe maimai oferaofera HTML5?HTML5?• Trasaturi noi formularelor (validare la

nivelul clientului, date pickers, sliders)

• Socket-uri Web• Web storage• Alte tag uri noi• Alte tag-uri noi• Manipularea istoricului browserului• Drag and Drop


ConcluziiConcluziiConcluziiConcluzii• HTML5 stie unde te afli, stie ce scrii, unde , ,

esti si unde ai fost. • HTML5 este viitorul si desi inca nu a ajuns• HTML5 este viitorul si desi inca nu a ajuns

la un stadiu final (se preconizeaza ca in j l l i 2022) l t fi i l t t ijurul anului 2022) el poate fi implementat si utilizat in cadrul browserelor moderne.


BibliografieBibliografieBibliografieBibliografie• Pro HTML5 Programming - Powerful APIs g g

for Richer Internet Application Development (Peter Lubbers Brian Albers and Frank(Peter Lubbers, Brian Albers and Frank Salim)I t d ti HTML5 (B d N b )• Introduction cu HTML5 (Brad Neuberg)

• W3C HTML 5 Working DraftW3C HTML 5 Working Draft • Dive into HTML5 (Mark Pilgrim)

more on more on webweb..2021. 4. 6. · universitatea politehnica bucuresti - facultatea de...

Documents