O lectie de anatomie Web. Disectia unui document HTML

2,439 views
2,355 views

Published on

A presentation -- prepared for InfoEducatie 2012, a national IT contest for high-school students -- regarding the main methods to access (and process) parts of a HTML document by using CSS, XPath, and JavaScript (jQuery).

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,439
On SlideShare
0
From Embeds
0
Number of Embeds
48
Actions
Shares
0
Downloads
25
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

O lectie de anatomie Web. Disectia unui document HTML

  1. 1. O lectie de anatomie Web disectia unui document HTML Dr. Sabin BuragaFacultatea de Informatica, UAIC Iasi, Romania www.purl.org/net/busaco
  2. 2. utili-zator(i) dezvol- tator Web “morbid” docu- ment HTML
  3. 3. Aha, delicios… Cum disec o pagina Web?
  4. 4. <head> <body>structurarea continutului via HTML http://www.w3.org/html/
  5. 5. <head>CSS <body>strate (“skin-uri”) de prezentare pe baza CSS http://www.w3.org/Style/CSS/
  6. 6. <head> CSS <body> Java Script interactiune Web via JavaScripthttps://developer.mozilla.org/en/JavaScript/
  7. 7. Inainte de a efectua disectia,ce-ar fi sa trasam zonele de interes?
  8. 8. solutieutilizarea selectorilor CSS – nivelul 3 www.w3.org/TR/css3-selectors/ recomandare W3C (septembrie 2011)
  9. 9. p ul ul este descendent al elementului p p > ul ul este element-copil al lui p p + ulul este precedat imediat de elementul p p ~ ul ul este precedat de un element p
  10. 10. img[style]elementul img include atributul style img[class="photo"] img poseda atributul class avand valoarea specificata img[class~="photo"]img are atributul class ai carui lista de valori include valoarea specificata
  11. 11. a[href^="http:"] elementul a are atributul href a 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. 12. exemplu a[title$=".zip"] { background-color: pink; } a[href*="REST"] { font-size: 130%; text-decoration: none; }
  13. 13. exemplu extensia Firebug
  14. 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. 15. exemplusection[id*="week"] li:nth-child(odd) { border: 3px solid red;}
  16. 16. exemplu
  17. 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. 18. exemplu
  19. 19. Pseudo-clase privind interactiunea: :active :hover :focus :target :enabled :disabled :checked
  20. 20. Cum putem “palpa”zonele de interes ale documentului HTML?
  21. 21. solutieinspectarea continutului via expresii XPath www.w3.org/TR/xpath www.w3.org/TR/xpath20 recomandari W3C (1999, 2007)
  22. 22. adreseaza parti dintr-un document opereaza la nivelul structurii abstractea documentelor HTML/XML (arborele DOM)
  23. 23. Document Element Characters
  24. 24. expresia XPathevaluarea se realizeaza in functie de context:un nod – element, atribut,... – al documentului pozitie o functie de biblioteca
  25. 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. 26. operatori XPathdescendent /traversare recursiva //substitutor (wildcard) *nodul curent .nodul parinte ..atribut @filtru/index []
  27. 27. /html/body/*/section evaluarea de expresii XPathvia extensia FirePath pentru Firebug – Firefox
  28. 28. operatori XPathpentru booleeni si numere pot fi folositi operatorii uzuali: or and = != <= < >= > + - * div mod
  29. 29. xsl: xpath – operatori//*[@class="tools" or @class="presentation"]
  30. 30. axe XPathnodul curent (context node) selfnodul parinte parentnodurile copil childnodurile descendente descendantnodurile de tip atribut attributenodurile ascendente ancestor
  31. 31. axe XPathself  .parent  ..attribute  @namespace  :
  32. 32. //div/descendant::a //div/descendant::*Ce returneaza fiecare expresie XPath?
  33. 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. 34. exemplu count(//a[@href]) = count(//a)true toate elementele a includ atributul href
  35. 35. exemplu count(//li[@class]) = count(//li)false exista elemente li care nu au specificat atributul class
  36. 36. xsl: xpath – functiispecificati semnificatia expresiei XPath: //nav/*/li[position() mod 2 = 1]
  37. 37. xsl: xpath – operatori //*[contains(text(), "XML")]oferirea tuturor nodurilor ce contin sirul "XML"
  38. 38. Dar am dori sa “operam”… Putem folosi selectorii CSS si expresiile XPath in programele noastre?
  39. 39. solutie“naiva”expresiiregulate
  40. 40. solutie“clasica”& “grea” DOM
  41. 41. solutie mai“avansata” (facila) jQuery
  42. 42. “chirurgie” HTML via selectori jQuery http://docs.jquery.com/Selectors
  43. 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"); metoda obiect selector (func- jQuery CSS tionali- tate)
  44. 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. 45. …si alte resurse de studiat?
  46. 46. resursele online aferente cursului Tehnologii Web http://tinyurl.com/tehnologii-web
  47. 47. o suita de prezentari disponibile publichttp://slideshare.net/busaco/presentations
  48. 48. adrese Web de interes structurate pe domenii (Delicious stacks) https://delicious.com/stacks/busaco
  49. 49. O lectie de anatomie Web disectia unui document HTML continut 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

×