Microsoft PowerPoint - PW3-Advanced HTML [Compatibility Mode]

Transcriere

1 More on Web. Ciprian Dobre Curs Programare Web, anul 4 C5 Curs 6 1

2 XML extensible Markup Language Programare Web 2

3 HTML şi XML XML = extensible Markup Language HTML este folosit pentru XML este folosit pentru formatarea textului a.î. acesta să formatarea datelor a.î. să fie fie afişat utilizatorilor procesate de calculatoare HTML descrie atât structura (e.g. <p>, <h2>, <em>) cât şi aparenţa (e.g. <br>, <font>, <i>) XML descrie doar conţinut sau sensul l textului tli HTML foloseşte un set fix, nemodificabil de tag-uri În XML se folosesc propriile tag-uri, fără constrângeri Curs Programare Web, anul 4 C5 Curs 7 3

4 HTML şi XML 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 (<, >, &, ", ') Mai exact, HTML este definit în SGML XML este un subset (restrâns) al SGML Curs Programare Web, anul 4 C5 Curs 7 4

5 HTML şi XML HTML este adresat oamenilor HTML descrie pagini web Oamenii nu doresc să vadă mesaje de eroare despre paginile vizitate Browserele ignoră şi/sau corectează 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 programare Versiunile curente ale majorităţii browserelor pot afişa XML Totuşi suportul browserelor pentru XML e destul de redus Curs Programare Web, anul 4 C5 Curs 7 5

6 Tehnologii og înrudite XML DTD (Document Type Definition) şi XML Schemas sunt folosite pentru definirea tag-urilor legale XML şi a atributelor acestora pentru scopuri particulare (metadescrieri) CSS (Cascading Style Sheets) descrie cum sunt afişate HTML şi XML în browser XSLT (extensible Stylesheet Language Transformations) şi XPath sunt folosite pentru translatarea de la o formă de XML la o alta DOM (Document Object Model), SAX (Simple API for XML) și JAXP (Java API for XML Processing) sunt API-uri pentru parsare XML Curs Programare Web, anul 4 C5 Curs 7 6

7 Exemplu de document XML <?xml version="1.0"?> <weatherreport> <date>7/14/97</date> /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> Evening: <evening>clear and Cooler</evening> </weatherreport> Curs Programare Web, anul 4 C5 Curs 7 Sursa: XML: A Primer, de Simon St. Laurent 7

8 Structura 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 singur tag, numit elementul root, ce conţine restul documentului u XML: <weatherreport>... </weatherreport> Curs Programare Web, anul 4 C5 Curs 7 8

9 Elementele e e XML Un document XML mai este construit din: elemente: high în <high scale="f">103</high> tag-uri, în perechi: <high scale="f">103</high> atribute: <high scale="f">103</high> entităţi: <afternoon>sunny & hot</afternoon> date de tip caractere ce pot fi: parsate (procesate ca XML) modalitatea default neparsate (toate caractere sunt de sine stătătoare) Curs Programare Web, anul 4 C5 Curs 7 9

10 Elemente e şi atribute Atributele şi elementele sunt parțial interschimbabile Exemplu folosind doar elemente: <name> <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 închise de tag-uri), nu și tag-uri şi atribute Curs Programare Web, anul 4 C5 Curs 7 10

11 XML bine format Orice elemente trebuie să aibă atât un tag de start, cât şi un tag de terminare, eg: e.g.: <name>... </name> Dar elementele goale pot fi abreviate: <break />. Tag-urile XML sunt case sensitive Tag-urile XML nu pot începe cu literele xml Elementele trebuie să fie corect imbricate, e.g. nu <b><i>bold and italic</b></i> Orice document XML trebuie să aibă unul şi numai un element root Valorile atributelor trebuie să fie încadrate de ghilimele sau apostroafe, e.g. <time unit="days"> Datele caracter nu pot conţine < sau & Curs Programare Web, anul 4 C5 Curs 7 11

12 Exemplu de document bine format <novel> <foreword> <paragraph> This is the great American novel. </paragraph> </foreword> <chapter number="1"> <paragraph> It was a dark and stormy night. </paragraph> <paragraph> Suddenly, a shot rang out! </paragraph> </chapter> </novel> Curs Programare Web, anul 4 C5 Curs 7 12

13 XML ca un arbore Un document XML reprezintă o ierarhie, poate fi reprezentat ca un arbore: novel foreword chapter number="1" paragraph paragraph paragraph This is the great It was a dark Suddenly, a shot American novel. and stormy night. rang out! Curs Programare Web, anul 4 C5 Curs 7 13

14 XML Valid Puteţi crea propriile tag-uri şi atribute XML, dar......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 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 document separat Erorile dintr-un document XML vor opri programele XML Alternative la DTD-uri sunt XML Schemas şi RELAX NG Curs Programare Web, anul 4 C5 Curs 7 14

15 Exemplu Putem să ne imaginăm o modalitate de reprezentare a unor rețete de bucătărie, pe baza unor documente XML: Curs Programare Web, anul 4 C5 Curs 7 15

16 Exemplu 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 poate fi simplu sau compus Un ingredient simplu are un nume,, o cantitate (posibil chiar nespecificată) și o unitate de măsură (totuși sunt și cazuri când nu se specifică și unitate) Un ingredient compus este specificat recursiv ca o rețetă având ingrediente și modalitate de pregătire Un exemplu de document XMLcespecifică cinci astfel de rețete: <?xml version="1.0" encoding="utf-8"?> <collection> <description> Some recipes used for the XML lesson. </description> <recipe> <title>beef Parmesan with Garlic Angel Hair Pasta</title> <ingredient name="beef cube steak" amount="1.5" unit="pound"/>... <preparation> <step> Preheat oven to 350 degrees F (175 degrees C). </step>... </preparation> <comment> Make the meat ahead of time, and refrigerate over night, the acid in the tomato sauce will tenderize the meat even more. If you do this, save the mozzarella till the last minute. </comment> <nutrition calories="1167" fat="23" carbohydrates="45" protein="32"/> </recipe>... </collection> Curs Programare Web, anul 4 C5 Curs 7 16

17 Un exemplu de document DTD pentru rețetele noastre arată astfel: Prin inserarea: <!DOCTYPE collection SYSTEM "recipes.dtd"> specificăm că dorim că documentul nostru ce conține rețete trebuie să fie conform cu acest DTD Putem defini și local regulile DTD cu: <!DOCTYPE collection [... ]> Exemplu <!ELEMENT collection (description,recipe*)> <!ELEMENT EN description ANY> <!ELEMENT recipe (title,ingredient*,preparation,comment?,nutrition)> <!ELEMENT title (#PCDATA)> <!ELEMENT ingredient (ingredient*,preparation)?> <!ATTLIST ingredient name CDATA #REQUIRED amount CDATA #IMPLIED unit CDATA #IMPLIED> <!ELEMENT preparation (step*)> <!ELEMENT step (#PCDATA)> <!ELEMENT comment (#PCDATA)> <!ELEMENT nutrition EMPTY> <!ATTLIST nutrition protein CDATA #REQUIRED carbohydrates CDATA #REQUIRED fat CDATA #REQUIRED calories CDATA #REQUIRED alcohol CDATA #IMPLIED> Curs Programare Web, anul 4 C5 Curs 7 17

18 Scop XML 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şa documente XML 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, XML este proiectat pentru a fi folosit Curs Programare Web, anul 4 C5 Curs 7 18

19 Standarde de extinse de documente Puteţi să vă definiţi propriile tag-uri XML, dar există seturi deja disponibile: XHTML: HTML redefinit pentru XML SMIL: Synchronized Multimedia Integration Language MathML: Mathematical Markup Language SVG: Scalable Vector Graphics DrawML: Drawing MetaLanguage ICE: Information and Content Exchange ebxml: Electronic Business with XML cxml: Commerce XML CBL: Common Business Library Curs Programare Web, anul 4 C5 Curs 7 19

20 XHTML Curs Programare Web, anul 4 C5 Curs 7 20

21 Cuvânt Înainte: Origini Curs Programare Web, anul 4 C5 Curs 7 21

22 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 aplicație a SGML, standardul ISO oferea suport pentru documente structurate Pentru a face din HTML un standard, Berners-Lee avea nevoie de o implementare reală a unei aplicații care să ă suporte astfel de documente S-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 USA Amenințare la adresa supremației Microsoft* * Curs Programare Web, anul 4 C5 Curs 7 22

23 Origini Când standardul devine popular, se pune problema controlului asupra acestuia: IETF formează HTML Working Group cu scopul de a începe lucrul la HTML 2.0 Berners-Lee crează World Wide Web Consortium (W3C) scop: promovarea tehnologii Web IETF 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 În 1995, W3C scoate HTML 3.0 ca o modalitate de formalizare a unor funcții precum suportul pentru documente științifice și matematice Curs Programare Web, anul 4 C5 Curs 7 23

24 Origini Războiul dezvoltatorilor de browsere continuă 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 controale bogate (dar care rulează doar pe Windows) Netscape vine cu propria implementare de ActiveX și adaugă limbajul de scripting JavaScript IE nu se lasă mai prejos și propune Jscript În încercarea de a învinge, apar dispute cu privire la ce și cum ar trebui standardizat în HTML: Netscape propune tag-ul BLINK Microsoft vine cu MARQUEE Curs Programare Web, anul 4 C5 Curs 7 24

25 Mediatorul e tot W3C Origini În standard nu intră nici BLINK, nici MARQUEE Suportul pentru prezentare din Netscape e deprecated în loc se propune folosirea CSS ca formă de separare a elementelor HTML de cele de formatare/stil HTML 4.0 lansat în 1997 (HTML 4.01 în 1999) Pe lângă ă separare conținut de prezentare, HTML 4 standadizează di ă și 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 înspre strictețea t ț 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 standardului, d utilizatorul t l ar putea veni cu tag-uri idefinite it într-o bibliotecă ă externă ă pentru reprezentări particulare (e.g., pentru matematică se poate folosi MathML) Curs Programare Web, anul 4 C5 Curs 7 25

26 Temă pentru acasă Tema 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, 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. Referințe. Reguli de trimitere: Se acceptă doar documente în format PDF 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 , ora Nu se acceptă întârzieri: temele trimise după această dată nu sunt luate în considerare. Curs Programare Web, anul 4 C5 Curs 7 26

27 Dar la noi? a apărut în 1997, conținea elemente minimale de HTML 3.2 Curs Programare Web, anul 4 C5 Curs 7 27

28 HTML 4 HTML 4 extinde HTML cu mecanisme adecvate pentru:* Elemente de style sheet, Limbaje de scripting, Frame-uri, Obiecte embedded, Suport îmbunătățit pentru text reprezentat de la dreapta la stânga Elemente mai bogate de prezentare a tabelelor Îmbunătățiri pentru reprezentarea formularelor, oferirea de suport pentru persoane cu disabilități. ț * Curs Programare Web, anul 4 C5 Curs 7 28

29 Ce este XHTML? 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 mai curată a HTML XHTML este HTML redefinit ca o aplicaţie XML XHTML este o punte între HTML şi XML Curs Programare Web, anul 4 C5 Curs 7 29

30 Problema cu HTML HTML a fost conceput ca o modalitate de a descrie structura unui document, cu tag-uri pentru a indica headere, paragrafe, etc. Apare nevoia de control asupra aparenţei documentelor, motiv pentru care HTML a fost îmbogăţit cu tag-uri pentru controlul font-urilor, aliniatelor, etc. Curs Programare Web, anul 4 C5 Curs 7 30

31 HTML vs. XML XML arată mult ca HTML, dar: HTML foloseşte un set fix de În XML puteţi folosi propriile tag-uri tag-uri (şi defini ce reprezintă ele într-un document separat) HTML este proiectat pentru afişarea datelor în formă umană Browser-ele sunt foarte tolerante cu erorile în HTML Toate browserele pot afişa ş HTML XML este proiectat pentru descrierea datelor pentru computere Documentele XML trebuie să fie bine formate (corect sintactic) Toate browserele moderne afişează ş XML, dar în diverse moduri Curs Programare Web, anul 4 C5 Curs 7 31

32 Codificarea documentelor o XML 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 o ierarhie arborescentă <person> <firstname>ion</firstname> <lastname>popescu</lastname> <age>30</age> <ssn> </ssn> </person> Curs Programare Web, anul 4 C5 Curs 7 32

33 Documente XML bine formate Reminder: document XML bine format = un document corect din punctul de vedere al regulilor sintactice generale XML: are exact un element rădăcină fiecare element are un tag de sfârşit elementele sunt imbricate corect valorile atributelor sunt între ghilimele Curs Programare Web, anul 4 C5 Curs 7 33

34 Documente XML: Valide XML Schema Document XML Valid : un document care respectă reguli impuse structurii Metode de specificare formală a structurii unui document XML: XML DTD (Data Type Definition): XML Schema (XSD): un limbaj ce impune constrângeri asupra structurii documentelor XML Pentru o clasă de documente XML se pot impune reguli privitoare la: Ce tag-uri sunt permise, în ce ordine pot sa apară, de câte ori, ce atribute pot să aibă, de ce tipuri, etc. Parserele XML cu validare verifică respectarea constrângerilor impuse de o schemă specificată XML Schema Tutorial: Curs Programare Web, anul 4 C5 Curs 7 34

35 Exemplu - XML Schema Pentru reprezentarea unui set de puncte în plan se stabilesc următoarele reguli: Elementul rădăcină este dots <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 alte elemente <xs:complextype> Conţine 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" /> Curs Programare Web, anul 4 C5 Curs 7 35

36 dots.xsd Exemplu XML Schema <?xml version="1.0"?> <xs:schema xmlns:xs= <xs:element name="dots"> <xs:complextype> pe> <xs:sequence> <xs:element name="dot" maxoccurs="unbounded"> <xs:complextype> <xs:attribute name="x" type="xs:integer" use="required"/> <xs:attribute name="y" type="xs:integer" use="required"/> </xs:complextype> </xs:element> </xs:sequence> </xs:complextype> </xs:element> </xs:schema> Curs Programare Web, anul 4 C5 Curs 7

37 Exemplu: document XML cu schema dots.xml <?xml version="1.0" encoding="utf-8"?> <dots xmlns:xsi=" instance" xsi:nonamespaceschemalocation="dots.xsd">> <dot x="32" y="100" /> <dot x="17" y="14" /> <dot x="18" y="58" > </dot> </dots> Curs Programare Web, anul 4 C5 Curs 7

38 De la HTML la XHTML, I 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" /> Curs Programare Web, anul 4 C5 Curs 7 38

39 De la HTML la XHTML, II Numele de atribute trebuie să fie lower case Exemplu: <table width="100%"> Valorile atributelor trebuie să fie încadrate de Exemplu: <table width= "100%"> Minimizarea atributelor este interzisă Exemplu: <frame noresize="noresize">, i " nu poate fi abreviată prin <frame noresize> Atributul id înlocuieşte atributul name Greşit: <img src="picture.gif" name="picture1" /> Corect: <img src="picture.gif" id="picture1" /> Cel mai bine: <img src="picture.gif" name="picture1" id="picture1" /> Curs Programare Web, anul 4 C5 Curs 7 39

40 XHTML și DTD-uri HTML, XHTML, XML şi multe alte limbaje de markup ce suportă DTD-uri DTD ( Document Type Definition ) descrie sintaxa ce trebuie folosită pentru un anumit document, folosirea unui DTD fiind o regulă în cazul documentelor XHTML Există trei tipuri diferite de DTD-uri pentru XHTML puteţi lucra cu oricare Ele sunt publice pe web Documentul XHTML trebuie să înceapă cu o referinţă la unul dintre aceste DTD-uri Curs Programare Web, anul 4 C5 Curs 7 40

41 Declaraţia ţ DOCTYPE Orice document XHTML trebuie să înceapă cu o declaraţie DOCTYPE (ce specifică ă DTD-ul curent folosit): 1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " 2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " 3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" " Curs Programare Web, anul 4 C5 Curs 7 41

42 Declaraţia ţ DOCTYPE Cele trei tipuri de DTD-uri sunt: 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 documentului. Transitional Folosit cu HTML standard şi/sau cu CSS. Permite introducerea de elemente HTML depricated (tag-uri <center>, <embed>, <font>, <i>, <u> sau atribute <align>, <background>, <color>, <height>, <size>, etc). Frameset Folosit dacă documentul include frame-uri HTML Curs Programare Web, anul 4 C5 Curs 7 42

43 Exemplu de document XHTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " strict.dtd"> <html> <head> <title>a simple document</title> </head> <body> </html> <p>a simple paragraph.</p> </body> Curs Programare Web, anul 4 C5 Curs 7 43

44 Instrumente te utile Dave Raggett's HTML TIDY este un instrument free UNIX pentru verificarea şi curăţarea paginilor HTML W3C HTML Validation Tool este un formular HTML pentru verificarea (dar nu şi corectarea) documentelor HTML şi XHTML Curs Programare Web, anul 4 C5 Curs 7 44

45 Reminder: Vocabular SGML: Standard Generalized Markup Language HTML: Hypertext Markup Language XHTML: extensible Hypertext Markup Language XML: extensible Markup Language DTD: Document Type Definition Curs Programare Web, anul 4 C5 Curs 7 45

46 Quiz 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 întrehtmlşi XHTML. Curs Programare Web, anul 4 C5 Curs 7 46

47 CSS (Cascading Style Sheet ) Curs Programare Web, anul 4 C5 Curs 7 47

48 Problema cu HTML HTML a fost de la început conceput pentru a descrie conținutul unui document Autorii de pagini web nu aveau nevoie să descrie layout-ul -- browserul avea grijă de acest aspect Aceasta reprezintă o abordare inginerească corectă, însă nu satisface nevoile stiliștilor și artiștilor 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 multe 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 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ă Curs Programare Web, anul 4 C5 Curs 7 48

49 Cascading Style Sheets Cascading Style Sheet (CSS) este o modalitate de separare a elementelor de prezentare de elementele de date Practic modul de prezentare al unei pagini HTML se poate descrie mai curat, într-un document separat, rezultând în independență între formă și conținut CSS are câteva avantaje: Permite separarea conținutului de prezentare Permite definirea prezentării și a layout-ului 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 În funcție de dimensiune, i documentele CSS externe pot crește timpul de încărcare a paginilor Curs Programare Web, anul 4 C5 Curs 7 49

50 Sintaxa a CSS Sintaxa CSS este compusă dintr-o listă de selectori (pentru alegerea tag-urilor) și descriptori (pentru a specifica ce dorim să facem cu respectivele tag-uri): Exemplu: h1 {color: green; font-family: Verdana} specifică că orice text inclus în tag-uri h1 (HTML heading level 1) trebuie afișat folosind font de tip Verdana și colorat în verde Un fișier CSS reprezintă o listă de astfel de perechi selector/descriptor ecto Selectorii pot fi simple tag-uri HTML sau XML CSS permite de asemenea definirea altor moduri de combinare a tag-urilor Descriptorii sunt definiți chiar în CSS Curs Programare Web, anul 4 C5 Curs 7 50

51 Sintaxa generala este: Sintaxa a CSS selector { property: value } sau selector,,...,, selector { property: value;... property: value } unde selector reprezintă tag-ul afectat de stil (selectorul este case- sensitive dacă și numai dacă limbajul de descriere a documentului este case-sensitive). property ș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 property:value, dar după ă ultima pereche punct și i virgulă devine caracter opțional. Curs Programare Web, anul 4 C5 Curs 7 51

52 /* Acesta este un comentariu */ Exemplu de CSS h1,h2,h3 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 */ margin-left: 15pt; /* indentare */ } p, li, th, td {font-size: 80%;} /* 80% din dimensiunea elemenului ce îl conţine */ th {background-color:#faebd7} /* culorile pot fi specificate în hexa */ body y{ background-color: #ffffff;} 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 ul trece deasupra elementului */ Curs Programare Web, anul 4 C5 Curs 7 52

53 Selectori Un tag XML sau HTML poate fi folosit ca un simplu element selector: body { background-color: #ffffff } Putem însă folosi și selectori multipli: em, i {color: red} Putem repeta selectorii: h1, h2, h3 {font-family: Verdana; color: red} h1, h3 {font-weight: bold; color: pink} Atunci când valorile nu coincid, ultima declarație suprascrie declarațiile anterioare 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) Curs Programare Web, anul 4 C5 Curs 7 53

54 Exemplu de suprascriere Curs Programare Web, anul 4 C5 Curs 7 54

55 Selectori 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 } selectează un em doar dacă părintele imediat este h3 Un selector adiacent alege un element ce imediat urmează altuia: b + i { font-size: 8pt } Exemplu: <b>i'm bold and</b> <i>i'm italic</i> Rezultatul va arata astfel: I'm bold and I'm italic Curs Programare Web, anul 4 C5 Curs 7 55

56 Selectori ecto Un selector simplu de atribut permite alegerea elementelor ce au un anumit atribut, indiferent de valoarea acestuia: Sintaxa: element[atribut] {... } Exemplu: table[border] {... } Un selector de atribut valoare permite alegerea elementelor ce au un anumit atribut având o anumită valoare: Sintaxa: element[atribut="valoare"] {... } Exemplu: table[border="0"] {... } Curs Programare Web, anul 4 C5 Curs 7 56

57 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 pentru orice, dacă 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;} Aceasta înseamnă că trebuie pus un border în jurul elementelor section; acesta trebuie să fie subțire și solidă și albastră Curs Programare Web, anul 4 C5 Curs 7 57

58 Atributul class 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> Pentru definirea unui selector ce se aplică oricărui element având o anumită clasă se omite numele tag-ului (dar se păstrează punctul):.fineprint i {font-size: 8pt} Curs Programare Web, anul 4 C5 Curs 7 58

59 Atributul id Atributul id este definit similar atributului class, dar folosește # in loc de. În fișierul ș style sheet: p#important {font-style: italic} # important {font-style: italic} În documentul HTML: <p id="important"> sau classși id pot fi ambele folosite și nu e obligatoriu să aibă nume diferite: <p class="important" id="important"> Curs Programare Web, anul 4 C5 Curs 7 59

60 div și span div și span sunt elemente HTML ce au ca scop introducerea de informații de prezentare a elementelor pe baza regulilor CSS div asigură existența unei linii noi înainte și după (similar unui paragraf); span nu Exemplu: CSS: div {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> Curs Programare Web, anul 4 C5 Curs 7 60

61 Rezultat: <html xmlns=" <head> <link REL="STYLESHEET" TYPE="text/css" HREF="stil.css"/> </head> <body> Text inainte. i <div>this div is treated like a paragraph, but <span class="color">this span</span> is not.</div> Text dupa. </body> </html> Curs Programare Web, anul 4 C5 Curs 7 61

62 Alt exemplu Elementele <div> sunt cel mai adesea folosite pentru poziționare: #container { position: relative } #navigation { position: absolute; left: 30px; top: 5px } <div id="container"><div id="navigation">text</div></div> Curs Programare Web, anul 4 C5 Curs 7 62

63 Folosirea oos eaee elementelor ee e teo CSS Sunt trei moduri de folosire a unui CSS: 1. 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 Formălimitată de sintaxă CSS Curs Programare Web, anul 4 C5 Curs 7 63

64 External style sheet Toate elementele CSS se definesc într-un fișier extern Pentru a folosi elementele definite în fișierul extern, se adaugă în HTML, în interiorul elementului l <head> sintaxa: <link REL="STYLESHEET" TYPE="text/css" HREF="Style Sheet URL"> > Sau în prologul unui document XML se poate adăuga sintaxa: <?xml-stylesheet href="style Sheet URL" type="text/css"?> t/ "? Curs Programare Web, anul 4 C5 Curs 7 64

65 Embedded style sheet Elementele CSS se definesc în interiorul documentului HTML, în interiorul elementului <head>: <style TYPE="text/css">  </style> Notă: Încapsularea style sheet-ului într-un comentariu reprezintă un artificiu de ascundere a informației de browsere mai vechi ce nu înțeleg sintaxa CSS. Curs Programare Web, anul 4 C5 Curs 7 65

66 Inline style sheet Atributul STYLE poate fi adăugat oricărui element HTML: <html-tag STYLE="property: value"> <html-tag STYLE="property: value; property: value;...; property: value"> Avantaj: sau Folositor dacă dorim doar o mică modificare de stil Dezavantaje: Mix de informații de prezentare în cadrul HTML Ascunde și îngreunează vizibilitatea codului HTML Nu se pot folosi toate elementele CSS Curs Programare Web, anul 4 C5 Curs 7 66

67 Ordinea de cascadare Stilurile vor fi aplicate unui document HTML în ordinea următoare: 1. Stilul implicit al browser-ului 2. External style sheet 3. Internal style sheet (în interiorul tag-ului <head>) ) 4.Inline style (în interiorul altor elemente, cele mai din afară mai întâi) Când elementele de stil ajung să fie în conflict, cel mai apropiat p (mai recent aplicat) stil câștigăș Curs Programare Web, anul 4 C5 Curs 7 67

68 Exemplu de ordine de cascadare External style sheet: Internal style sheet: Atributele rezultante: h3 { } h3 { } color: red; text-align: left; font-size: 8pt text-align: right; font-size: 20pt color: red; text-align: right; font-size: 20pt Curs Programare Web, anul 4 C5 Curs 7 68

69 Alt exemplu Considerăm documentul HTML: <p class="pclass" id="pid"><span class="sclass" id="sid">text</span></p> Cazurile considerate de CSS: span#sid { color: red; } #pid span { color: green; } #pid { color: blue; font-size: 10px; } #pid span { color: red!important;} p #sid { color: green; font-size: 150%; } Textul va fi afișat verde Cum va fi afișat textul? 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) Curs Programare Web, anul 4 C5 Curs 7 69

70 Un exemplu XML <?xml version="1.0" standalone="no"?> <!DOCTYPE novel SYSTEM "novel.dtd"> <?xml-stylesheet href="styles.css" type="text/css"?> <novel> <foreword> <paragraph>this is the great American novel.</paragraph> </foreword> <chapter> <paragraph>it was a dark and stormy night.</paragraph> <paragraph>suddenly, a shot rang out!</paragraph> </chapter> </novel> CSS: chapter {font-family: "Papyrus", fantasy} foreword > paragraph {border: solid red; padding: 10px} novel > foreword {font-family: Impact; color: blue} chapter {display: block} chapter:first-letter {font-size: 200%; float: left} paragraph {display: block} chapter:before {content: "New chapter: "} Curs Programare Web, anul 4 C5 Curs 7 70

71 Rezultatul Rezultat afișat de Firefox 4: Rezultat afișat de IE Curs Programare Web, anul 4 C5 Curs 7 71

72 Câteva pop proprietăţ ăţi şi valori ao pentru font font-family: inherit it (la fel ca fontul elementului l parent, moștenire) Verdana, "Courier New",... (dacă fontul este instalat în browser) serif sans-serif serif cursive fantasy monospace (fonturi generice: browser-ul decide ce font să folosească) font-size: inherit smaller larger xx-small x-small small medium large x-large xx-large 12pt font-weight: normal bold bolder lighter font-style: normal italic oblique Curs Programare Web, anul 4 C5 Curs 7 72

73 Forma prescurtată de specificare a proprietăţilor Adesea mai multe proprietăţi pot fi combinate, acest aspect ajutând la o scriere mai rapidă a specificațiilor de prezentare De exemplu, dacă considerăm construcția CSS: h2 { font-weight: bold; font-variant: small-caps; fontsize: 12pt; line-height: 14pt; font-family: sans-serif } Ea poate fi scrisă sub forma prescurtată: h2 { font: bold small-caps 12pt/14pt sans-serif serif } Curs Programare Web, anul 4 C5 Curs 7 73

74 Culori și lungimi color: și background-color: aqua black blue fuchsia gray green lime maroon navy olive purple red silver teal white #FF0000 #F00 rgb(255, 0, 0) Alte nume recunoscute de browser (nu se recomandă) Acestea sunt elemente folosite pentru unitățile de măsură: em, ex, px, % Dimensiunea fontului, înălțimea pe x, pixeli, procent din dimensiunea moștenită in, cm, mm, pt, pc inci, centimetri, milimetri, puncte (1/72 dintr-un inch), picas (1 pica = 12 puncte), relative la valoarea moștenită Curs Programare Web, anul 4 C5 Curs 7 74

75 Câteva pop proprietăț ăți și valori ao pentru text t text-align: left right center justify text-decoration: none underline overline line-through text-transform: transform: none capitalize uppercase lowercase text-indent length 10% (indentarea primei linii a textului) white-space: normal pre nowrap Curs Programare Web, anul 4 C5 Curs 7 75

76 Pseudo-clase case Pseudo-clasele sunt elemente ale căror stare (și mod de aparitie) poate varia în timp Sintaxa: element:pseudo-class {...} :link Un link ce nu a fost vizitat :visited Un link ce a fost vizitat :active Un link pe care tocmai se execută un click :hover Un link peste care este poziționat cursorul mouseului Pseudo-clasele sunt permise oriunde în cadrul selectorilor CSS Curs Programare Web, anul 4 C5 Curs 7 76

77 Alegerea ea numelor 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 stil Exemplu: Să presupunem că definiți span.huge {font-size: 36pt} și folosiți <span class="huge"> în cadrul mai multor documente Ulterior descoperiți ț că utilizatorii dezagrează stilul acesta, deci modificați CSS-ul în span.huge {font-color: red} Numele este incorect ales; încercați să îl redenumiți în 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 Curs Programare Web, anul 4 C5 Curs 7 77

78 HTML Curs Programare Web, anul 4 C5 Curs 6 78

79 HTML reminder HTML 1.0 şi HTML+ 1990, respectiv HTML , a fost prima versiune standardizată, (49 taguri). HTML 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 şi îmbunătăţit pentru alinierea textului, tabele mai bogate şi îmbunatăţiri ale formularelor, oferind o accesibilitate mai mare pentru oamenii cu deficit. HTML 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 Curs Programare Web, anul 4 C5 Curs 6 79

80 HTML Web Hypertext Application Working Group (WHATWG) au inceput lucrul la noul standard HTML 2004 Consortiul W3C se concentrau asupra dezvoltarii XHTML 2.0 desi HTML 4.01 nu mai fusese actualizat inca din Specificatiile HTML 5 ale WHATWG au fost apoi adoptate de catre W3C ca punct de start al noului standard HTML Curs Programare Web, anul 4 C5 Curs 6 80

81 HTML 5 HTML5 este ultima versiune HTML si XHTML. Standardul incearca sa rezolve problemele intalnite in versiunile anterioare HTML si se adreseaza nevoii de APLICATII WEB, un domeniu ce nu a fost acoperit de catre HTML pana in acest moment. Desi ultima versiune HTML 5 lansata pe data de 22 Februarie 2012 este o ciorna (W3C Working Draft), dezvoltatorii browserelor au inceput sa implementeze parti din functionalitatile a prezente e e in standardul du HTML5.

82 De ce HTML5? Calculatoare performante folosite insuficient Numarul utilizatorilor de servicii web devine din ce in ce mai mare

83 Performantele JavaScript.

84 ELEMENTE SIMPLIFICATE IN HTML5

85 DOCTYPE <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN /xhtml1/dtd/xhtml1- transitional.dtd"> HTML 5 <!DOCTYPE html>

86 Radacina HTML <html xmlns= html lang="en" xml:lang="en"> HTML 5 <html lang="en">

87 CHARSET <meta http-equiv="content-type" content="text/html; charset=utf- 8"> HTML 5 <meta charset="utf-8">

88 STYLESHEET <link rel="stylesheet" href="styleoriginal.css" type="text/css" /> HTML 5 <link rel="stylesheet" href="style-original.css" />

89 ELEMENTE NOI IN HTML5

90 Elementul Base <head> <base href= url target=" _blank blank" /> </head> -se introduce adresa de baza.

91 Elemente semantice de sectionare HTML 4

92 HTML 5 Elemente semantice de sectionare

93 <HEADER> HTML 4 <div id="header"> <h1>my Weblog</h1> <p class="tagline">a lot of effort went into making this effortless.</p> </div> HTML 5 <header> <h1>my Weblog</h1> <p class="tagline">a lot of effort went into making this effortless.</p> </header>

94 HTML 4 <h1>my Weblog</h1> <HGROUP> <h2>a lot of effort went into making this effortless.</h2> HTML 5 <header> <hgroup> <h1>my Weblog</h1> <h2>a lot of effort went into making this ffortless.</h2> </hgroup> </header>

95 Exemplu <header> <hgroup> <h1><a href="/">mini i Apps</a></h1> /h1 <h2>web applications for iphone, Android & other mobile platforms</h2> </hgroup> </header>

96 <FOOTER> HTML 4 <div id="footer"> <p> </p> <p> <a href="#">mark Pilgrim</a></p> </div> HTML 5 <footer> <p> </p> <p> <a href="#">mark Pilgrim</a> </p> </footer>

97 <SECTION> Sectiune generica de aplicatie sau document <section> <h1>level 1</h1> <section> <h1>level 2</h1> <section> <h1>level 3</h1> </section> </section>

98 <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> HTML 5 <article> <header> <p class="post-date">october 22, 2009</p> <h1> <a href="#" rel="bookmark" title="link to this post"> Travel day </a> </h1> </header> </article>

99 <ASIDE> HTML5 <aside> <h1>archives</h1> <ul> <li><a href="/2007/09/">september 2007</a></li> <li><a href="/2007/08/">august 2007</a></li> <li><a href="/2007/07/">july 2007</a></li> </ul> </aside>

100 <NAV> HTML 4 <div id="nav"> <ul> <li><a href="#">home</a></li> <li><a href="#">blog</a></li> / <li><a href="#">gallery</a></li> <li><a href="#">about</a></li> </ul> </div> HTML 5 <nav> <ul> <li><a href="#">home</a></li> <li><a href="#">blog</a></li> <li><a href="#">gallery</a></li> <li><a href="#">about</a></li> </ul> </nav>

101 <TIME> <time datetime=" " 22" pubdate>october 22, 2009</time> <time datetime=" T13:59:47-04:00 22T13:59:47 04:00" pubdate> October 22, :59pm EDT </time> <article> <header> <time datetime=" " pubdate> October 22, 2009 </time> <h1> <a href="#" rel="bookmark" title="link to this post"> Travel day </a> </h1> </header> <p>lorem ipsum dolor sit amet </p> </article>

102 a resolution-dependent bitmap canvas which can be used for rendering graphs, game graphics, or other visual images on the fly. GRAFICA IN HTML5 <CANVAS>

103 <CANVAS> Sintaxa: <canvas id="a" width="300" height="225"></canvas> Utilizare cu JavaScript & DOM var a_canvas = document.getelementbyid("a"); Desenare function draw_b() { var b_ canvas = document.getelementbyid("b"); var b_context = b_canvas.getcontext("2d");//future 3D b_context.fillrect(50, 25, 150, 100); }

104 <CANVAS> Desenarea in Canvas Context: Sunt esentiale functiile: beginpath() closepath() stroke() fill() Proprietati: fillstyle = (CSS color,pattern,gradient) strokestyle= (CSS color,pattern,gradient)

105 <CANVAS> Alte functii de desenare in canvas context o Desenare dreptunghiuri fillrect(x, y, width, height) strokerect(x, y, width, height) clearrect(x, y, width, height) o Desenare linii o moveto(x, y) o lineto(x, y)

106 o Desenare arce <CANVAS> 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. Desenarea de text o Proprietati context: Context.font= {font} Context.textAlign={start,end,left,right,center}; Context.textBaseline={top,hanging,middle,alphabetic,ideographic,bottom}; textbaseline={top alphabetic ideographic bottom}; ofunctia de desenare o Context.fillText(text,x,y);

107 <CANVAS> o Crearea unui gradient createlineargradient(x0, y0, x1, y1) createradialgradient(x0, y0, r0, x1, y1, r1) Exemple gradient: 1. var my_gradient = context.createlineargradient(0, 0, 300, 0); my_gradient.addcolorstop(0, "black"); my_gradient.addcolorstop(1, "white"); context.fillstyle = my_gradient; context.fillrect(0, 0, 300, 225);

108 <CANVAS> 2. var my_gradient = context.createlineargradient(0, 0, 0, 225); my_gradient.addcolorstop(0, "black"); 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);

109 <CANVAS> o Desenarea de imagini o drawimage(image, dx, dy) o drawimage(image, dx, dy, dw, dh) o drawimage(image, sx, sy, sw, sh, dx, dy, dw, dh)

110 <CANVAS> Exemple desenare imagini 1. <img id="cat" src="images/cat.png" alt="sleeping cat" width="177" height="113"> <canvas id="e" width="177" height="113"></canvas> <script> window.onload = function() { var canvas = document.getelementbyid("e"); var context = canvas.getcontext("2d"); var cat = document.getelementbyid("cat"); context.drawimage(cat, 0, 0); }; </script> 2. <canvas id="e" width="177" height="113"></canvas> <script> var canvas = document.getelementbyid("e"); var context = canvas.getcontext( getcontext("2d"); var cat = new Image(); cat.src = "images/cat.png"; cat.onload = function() { context.drawimage(cat, 0, 0); }; </script>

111 Transformari <CANVAS> Pentru a retine si a prelua starile panzei : Save(); Restore(); Starea panzei=transformari, valorile proprietatilor strokestyle, fillstyle, globalalpha, linewidth, linecap, linejoin, miterlimit, shadowoffsetx, shadowoffsety, shadowblur, shadowcolor Translatarea: translate(x, y)

112 Rotatia: rotate(angle) <CANVAS> Scalarea: scale(x, y) Umbre Proprietati context: ShadowColor ShadowOffsetX ShadowOffsetY ShadowBlur

113 Exemple <CANVAS>

114 Exemple <CANVAS> First person gifter Curs Programare Web, anul 4 C5 Curs 6 114

115 HTML5 API VIDEO & AUDIO

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

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

118 HTML5 API VIDEO & AUDIO Atribute ReadOnly Duration Paused Ended starttime Error currentsrc Atribute ce pot fi folosite in Javascript Autoplay Loop currenttime Controls Volume ( ) Muted Preload Atribute legate de format Type=formatul containerului (e.g video/mp4); Codecs= video codec, audio codec.

119 HTML5 API - GEOLOCATIE O noua proprietate p a obiectului global navigator: Navigator.geoLocationgeoLocation Detecteaza locatia utilizatorului curent utilizand urmatoarele informatii: -Adresa IP -Conexiunile la retele wireless -Turnul de comunicatii cu care comunica telefonul -hardware GPS

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

121 HTML5 API - GEOLOCATIE 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 code short an enumerated value PERMISSION_DENIED (1) POSITION_UNAVAILABLE (2) TIMEOUT (3) UNKNOWN_ERROR (0) message DOMString not intended for end users

122 Exemplu Geolocatie Google Maps ami.html

123 APLICATII OFFLINE

124 APLICATII OFFLINE O aplicatie web este o lista de URL-uri- HTML,CSS,Javascript, imagini sau orice alta forma de resursa. Homepage-ul unei aplicatii offline ne directioneaza catre aceasta lista (fisier manifest) ceea ce este doar un fisier text de pe server. Un Browser ce implementeaza aplicatii offline HTML5 citeste aceeasta lista, downloadeaza resursele indicate si le inmagazineaza local actualizandu-le le doar cand este necesar. Cand veti accesa aplicatia web fara a avea acces la internet, browserul web va aduce copiile locale. De asemeni exista in DOM un flag ce va indica daca sunteti ti online sau offline. var online = navigator.online; Acest atribut se modifica in timpul evenimentelor online si offline ce p sunt manevrate de obiectul Window.

125 MANIFESTUL CACHE O aplicatie web offline este dependenta de fisierul cache manifest. Manifestul CACHE = lista resurselor de care are nevoie aplicatia web cand este deconectata de la retea. Utilizarea fisierului cache manifest <!DOCTYPE HTML> <html manifest="/cache.manifest"> <body>... </body> </html> Fisierul manifest se poate regasi oriunde pe server dar trebuie servit clientului avand Content-Type: text/cache.manifest. Exemplu Manifest Cache de pe server: CACHE MANIFEST /static/stickies.html /media/deletebutton.png /media/deletebuttonpressed.png /css/stickies.css /js/stickies.js

126 Baza de date HTML5 asigura un API de baza de date bazat pe SQL pentru a inmagazina local si structurat datele. API-ul interactioneaza cu baza de date in mod asincron ceea ce asigura faptul ca interfata utilizator nu se va bloca. Exemplu de implementare //pentru a crea un obiect baza de date var db = window.opendatabase("notetest", "1.0","Example DB",200000); function rendernote(row) { // renders the note somewhere } function reporterror(source, message) { // report error }

127 Baza de date function rendernotes() { db.transaction(function(tx) { tx.executesql( 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); });

128 APLICATII OFFLINE Pentru depozitarea simpla si sincrona a informatiilor pentru utilizare offline HTML introduce atributul localstorage al obiectului Windows. localstorage["status"] = "Idling Idling. ";

129 EXEMPLU APLICATII OFFLINE Sticky notes es.html

130 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

131 WEB WORKERS Javascript ruleaza pe acelasi fir de executie cu browserul ceea ce poate face ca acesta din urma sa nu mai poata raspunde la comenzile utilizatorului. Muncitorii Web definesc un API ce ruleaza scripturile in background.! muncitorii trebuie sa se afle intr-un script extern. Exemplu de implementare <script> var worker = new Worker('worker.js'); worker.onmessage = function (event) { console.log( log('results: ' + event.data); }; </script> Muncitorii: function findprimes() { //... prime algorithm here postmessage(nextprime); } findprimes();

132 EXEMPLU WEB WORKERS Motion tracker

133 EXEMPLU WEB WORKERS Good Primes Curs Programare Web, anul 4 C5 Curs 6 133

134 Ce mai ofera HTML5? Trasaturi noi formularelor (validare la nivelul clientului, date pickers, sliders) Socket-uri Web Web storage Alte tag-uri noi Manipularea istoricului browserului Drag and Drop

Vezi mai mult