O lectie de anatomie Web. Disectia unui document HTML

transcript

O lectie de anatomie Web disectia unui document HTML

Dr. Sabin Buraga

Facultatea de Informatica, UAIC Iasi, Romania

www.purl.org/net/busaco

docu-ment HTML

dezvol-tator Web “morbid”

utili-zator(i)

Aha, delicios… Cum disec o pagina Web?

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

<head>

<body>

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

<head>

<body>

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

<head>

<body>

Java Script

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

utilizarea selectorilor CSS – nivelul 3

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

recomandare W3C (septembrie 2011)

solutie

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

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

exemplu

Pseudo-clase privind interactiunea:

:active :hover :focus

:target

:enabled :disabled :checked

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

inspectarea continutului via expresii XPath

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

recomandari W3C (1999, 2007)

solutie

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

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

exemplu

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”

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

selector CSS

obiect jQuery

metoda (func-tionali-

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

Technology