O lectie de anatomie Web. Disectia unui document HTML

O lectie de anatomie Web
disectia unui document HTML

Dr. Sabin Buraga
Facultatea de Informatica, UAIC Iasi, Romania
www.purl.org/net/busaco

utili-
zator(i) dezvol-
tator Web
“morbid”

docu-
ment
HTML

Aha, delicios… Cum disec o pagina Web?

<head>

<body>

structurarea continutului via HTML
http://www.w3.org/html/

<head>

CSS

<body>

strate (“skin-uri”) de prezentare pe baza CSS
http://www.w3.org/Style/CSS/

<head>

CSS

<body>
Java
Script

interactiune Web via JavaScript
https://developer.mozilla.org/en/JavaScript/

Inainte de a efectua disectia,
ce-ar fi sa trasam zonele de interes?

solutie

utilizarea selectorilor CSS – nivelul 3

www.w3.org/TR/css3-selectors/

recomandare W3C (septembrie 2011)

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

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

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

exemplu

a[title$=".zip"] {
background-color: pink;
}
a[href*="REST"] {
font-size: 130%;
text-decoration: none;
}

exemplu

extensia Firebug

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

exemplu

section[id*="week"] li:nth-child(odd) {
border: 3px solid red;
}

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 ;)";
}

Pseudo-clase privind interactiunea:

:active
:hover
:focus

:target

:enabled
:disabled
:checked

Cum putem “palpa”
zonele de interes ale documentului HTML?

solutie

inspectarea continutului via expresii XPath

www.w3.org/TR/xpath
www.w3.org/TR/xpath20

recomandari W3C (1999, 2007)

adreseaza parti dintr-un document

opereaza la nivelul structurii abstracte
a documentelor HTML/XML (arborele DOM)

Document

Element

Characters

expresia XPath

evaluarea se realizeaza in functie de context:

un nod – element, atribut,... – al documentului

pozitie

o functie de biblioteca

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

operatori XPath

descendent /
traversare recursiva //
substitutor (wildcard) *
nodul curent .
nodul parinte ..
atribut @
filtru/index []

/html/body/*/section

evaluarea de expresii XPath
via extensia FirePath pentru Firebug – Firefox

operatori XPath

pentru booleeni si numere pot fi folositi
operatorii uzuali:

or and = != <= < >= >

+ - * div mod

xsl: xpath – operatori

//*[@class="tools" or @class="presentation"]

axe XPath

nodul curent (context node) self
nodul parinte parent
nodurile copil child
nodurile descendente descendant
nodurile de tip atribut attribute
nodurile ascendente ancestor

axe XPath

self  .
parent  ..
attribute  @
namespace  :

//div/descendant::a
//div/descendant::*
Ce returneaza fiecare expresie XPath?

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

exemplu

count(//a[@href]) = count(//a)true

toate elementele a includ atributul href

exemplu

count(//li[@class]) = count(//li)false

exista elemente li
care nu au specificat atributul class

xsl: xpath – functii

specificati semnificatia expresiei XPath:
//nav/*/li[position() mod 2 = 1]

xsl: xpath – operatori

//*[contains(text(), "XML")]
oferirea tuturor nodurilor ce contin sirul "XML"

Dar am dori sa “operam”… Putem folosi selectorii
CSS si expresiile XPath in programele noastre?

solutie
“naiva”

expresii
regulate

solutie
“clasica”
& “grea”

DOM

solutie mai
“avansata”
(facila)

jQuery

“chirurgie” HTML via selectori jQuery

http://docs.jquery.com/Selectors

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

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

…si alte resurse de studiat?

resursele online aferente cursului Tehnologii Web

http://tinyurl.com/tehnologii-web

o suita de prezentari disponibile public

http://slideshare.net/busaco/presentations

adrese Web de interes structurate pe domenii
(Delicious stacks)

https://delicious.com/stacks/busaco

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

O lectie de anatomie Web. Disectia unui document HTML

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (6)

Similaire à O lectie de anatomie Web. Disectia unui document HTML

Similaire à O lectie de anatomie Web. Disectia unui document HTML (20)

Plus de Sabin Buraga

Plus de Sabin Buraga (20)

O lectie de anatomie Web. Disectia unui document HTML