Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
Nächste SlideShare
Aplicații Firefox OS cu HTML5
Weiter
Herunterladen, um offline zu lesen und im Vollbildmodus anzuzeigen.

3

Teilen

O lectie de anatomie Web. Disectia unui document HTML

Herunterladen, um offline zu lesen

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).

Ähnliche Bücher

Kostenlos mit einer 30-tägigen Testversion von Scribd

Alle anzeigen

Ähnliche Hörbücher

Kostenlos mit einer 30-tägigen Testversion von Scribd

Alle anzeigen

O lectie de anatomie Web. Disectia unui document HTML

  1. 1. O lectie de anatomie Web disectia unui document HTML Dr. Sabin Buraga Facultatea 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 JavaScript https://developer.mozilla.org/en/JavaScript/
  7. 7. Inainte de a efectua disectia, ce-ar fi sa trasam zonele de interes?
  8. 8. solutie utilizarea 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 + ul ul 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 href a carui valoare se termina cu sirul specificat a[href*="twitter"] elementul a are atributul href a 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. exemplu section[id*="week"] li:nth-child(odd) { border: 3px solid red; }
  16. 16. exemplu
  17. 17. exemplu nav > 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. solutie inspectarea 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 abstracte a documentelor HTML/XML (arborele DOM)
  23. 23. Document Element Characters
  24. 24. expresia XPath evaluarea se realizeaza in functie de context: un nod – element, atribut,... – al documentului pozitie o functie de biblioteca
  25. 25. expresia XPath in 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 XPath descendent / traversare recursiva // substitutor (wildcard) * nodul curent . nodul parinte .. atribut @ filtru/index []
  27. 27. /html/body/*/section evaluarea de expresii XPath via extensia FirePath pentru Firebug – Firefox
  28. 28. operatori XPath pentru 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 XPath nodul curent (context node) self nodul parinte parent nodurile copil child nodurile descendente descendant nodurile de tip atribut attribute nodurile ascendente ancestor
  31. 31. axe XPath self  . parent  .. attribute  @ namespace  :
  32. 32. //div/descendant::a //div/descendant::* Ce returneaza fiecare expresie XPath?
  33. 33. functii XPath noduri: 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 – functii specificati 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” expresii regulate
  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 XPath orice 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 public http://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 White alte resurse grafice preluate de la flickriver.com & phetch.blogspot.com
  • SimionIon

    Sep. 11, 2013
  • MARIABUFNEA

    Aug. 30, 2012
  • georgechetreanu

    Aug. 3, 2012

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).

Aufrufe

Aufrufe insgesamt

2.713

Auf Slideshare

0

Aus Einbettungen

0

Anzahl der Einbettungen

50

Befehle

Downloads

29

Geteilt

0

Kommentare

0

Likes

3

×