O lectie de anatomie Web. Disectia unui document HTML
50
O lectie de anatomie Web disectia unui document HTML Dr. Sabin Buraga Facultatea de Informatica, UAIC Iasi, Romania www.purl.org/net/busaco
-
Upload
sabin-buraga -
Category
Technology
-
view
2.228 -
download
3
description
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).
Transcript of 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
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>
CSS
interactiune Web via JavaScript https://developer.mozilla.org/en/JavaScript/
<head>
<body>
Java Script
CSS
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
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
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”
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");
selector CSS
obiect jQuery
metoda (func-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
