1. O lectie de anatomie Webdisectia unui document HTMLDr. Sabin BuragaFacultatea de Informatica, UAIC Iasi, Romania www.purl.org/net/busaco

2. utili-zator(i) dezvol-tator Webmorbiddocu-mentHTML 3. Aha, delicios Cum disec o pagina Web? 4. structurarea continutului via HTMLhttp://www.w3.org/html/ 5. CSS strate (skin-uri) de prezentare pe baza CSShttp://www.w3.org/Style/CSS/ 6. CSS Java Scriptinteractiune Web via JavaScripthttps://developer.mozilla.org/en/JavaScript/ 7. Inainte de a efectua disectia,ce-ar fi sa trasam zonele de interes? 8. solutieutilizarea selectorilor CSS nivelul 3www.w3.org/TR/css3-selectors/recomandare W3C (septembrie 2011) 9. p ulul este descendent al elementului pp > ul ul este element-copil al lui pp + ulul este precedat imediat de elementul pp ~ ul ul este precedat de un element p 10. img[style]elementul img include atributul style img[class="photo"]img poseda atributul class avand valoarea specificataimg[class~="photo"]img are atributul class ai carui lista devalori include valoarea specificata 11. a[href^="http:"] elementul a are atributul hrefa carui valoare incepe cu sirul specificat a[href$=".html"] elementul a poseda atributul hrefa carui valoare se termina cu sirul specificat a[href*="twitter"]elementul a are atributul hrefa carui valoare contine sub-sirul specificat 12. exemplua[title$=".zip"] {background-color: pink;}a[href*="REST"] {font-size: 130%;text-decoration: none;} 13. exempluextensia Firebug 14. Pseudo-clase vizand structura documentului::first-child :last-child:first-of-type :last-of-type :only-child :only-of-type :nth-child(numar):nth-last-child(numar):nth-of-type(numar) :empty 15. exemplusection[id*="week"] li:nth-child(odd) { border: 3px solid red;} 16. exemplu 17. exemplunav > ul.list >li:not(:nth-child(3n))::after {background: darkred;color: #FFF;font-family: sans-serif;text-transform: uppercase;float: right;content: "bisturiu ;)";} 18. exemplu 19. Pseudo-clase privind interactiunea: :active:hover:focus :target:enabled :disabled:checked 20. Cum putem palpazonele de interes ale documentului HTML? 21. solutieinspectarea continutului via expresii XPathwww.w3.org/TR/xpath www.w3.org/TR/xpath20 recomandari W3C (1999, 2007) 22. adreseaza parti dintr-un documentopereaza la nivelul structurii abstractea documentelor HTML/XML (arborele DOM) 23. DocumentElement Characters 24. expresia XPathevaluarea se realizeaza in functie de context:un nod element, atribut,... al documentului pozitieo functie de biblioteca 25. expresia XPathin urma evaluarii expresiei, e oferit un obiect: o multime de noduri (node-set) o valoare logica true/false un numar (float)un sir de caractere 26. operatori XPathdescendent /traversare recursiva //substitutor (wildcard) *nodul curent .nodul parinte..atribut@filtru/index [] 27. /html/body/*/section evaluarea de expresii XPathvia extensia FirePath pentru Firebug Firefox 28. operatori XPathpentru booleeni si numere pot fi folositi operatorii uzuali: or and = != = > + - * div mod 29. xsl: xpath operatori//*[@class="tools" or @class="presentation"] 30. axe XPathnodul curent (context node)selfnodul parinteparentnodurile copil childnodurile descendente descendantnodurile de tip atributattributenodurile ascendenteancestor 31. axe XPathself .parent ..attribute @namespace : 32. //div/descendant::a//div/descendant::*Ce returneaza fiecare expresie XPath? 33. functii XPathnoduri:id() position() count() name( ) last()siruri:concat() starts-with() contains() substring() string-length() translate()numere:sum() round() floor() number()booleeni: not() true() false() 34. exemplu count(//a[@href]) = count(//a)truetoate elementele a includ atributul href 35. exemplucount(//li[@class]) = count(//li)false exista elemente licare nu au specificat atributul class 36. xsl: xpath functiispecificati semnificatia expresiei XPath: //nav/*/li[position() mod 2 = 1] 37. xsl: xpath operatori//*[contains(text(), "XML")]oferirea tuturor nodurilor ce contin sirul "XML" 38. Dar am dori sa operam Putem folosi selectorii CSS si expresiile XPath in programele noastre? 39. solutienaivaexpresiiregulate 40. solutieclasica& grea DOM 41. solutie maiavansata(facila) jQuery 42. chirurgie HTML via selectori jQuery http://docs.jquery.com/Selectors 43. // liniile de tabel de pe pozitii pare vor fi redate// via proprietatile de stil CSS din clasa fundal$("table tr:nth-child(even)").addClass("fundal");metodaobiect selector(func-jQuery CSStionali-tate) 44. suport pentru XPathorice procesor XSLT (XML Transformations)libxslt (C cu numeroase portari)Sablotron (C portari pentru Perl, PHP,)Saxon (C#, Java) TrAX (Java)XslCompiledTransform (.NET) 45. si alte resurse de studiat? 46. resursele online aferente cursului Tehnologii Web http://tinyurl.com/tehnologii-web 47. o suita de prezentari disponibile publichttp://slideshare.net/busaco/presentations 48. adrese Web de interes structurate pe domenii (Delicious stacks)https://delicious.com/stacks/busaco 49. O lectie de anatomie Web disectia unui document HTMLcontinut vizual datorat artistilor Thomas Eakins, Nathaniel Gold, Sarah Goodreau, Michiel Jansz. van Mierevelt, Barney Reid,Rembrandt van Rijn, Hillary Whitealte resurse grafice preluate de la flickriver.com & phetch.blogspot.com