O lectie de anatomie Web. Disectia unui document HTML

O lectie de anatomie Web disectia unui document HTML Dr. Sabin BuragaFacultatea de Informatica, UAIC Iasi, Romania www.purl.org/net/busaco

utili-zator(i) dezvol- tator Web “morbid” document 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 JavaScripthttps://developer.mozilla.org/en/JavaScript/

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

solutieutilizarea 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 + ulul 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 hrefa carui valoare se termina cu sirul specificat a[href*="twitter"] elementul a are atributul hrefa 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

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

exemplu

exemplunav > 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?

solutieinspectarea 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 abstractea documentelor HTML/XML (arborele DOM)

Document Element Characters

expresia XPathevaluarea se realizeaza in functie de context:un nod – element, atribut,... – al documentului pozitie o functie de biblioteca

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

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

/html/body/*/section evaluarea de expresii XPathvia extensia FirePath pentru Firebug – Firefox

operatori XPathpentru booleeni si numere pot fi folositi operatorii uzuali: or and = != <= < >= > + - * div mod

xsl: xpath – operatori//*[@class="tools" or @class="presentation"]

axe XPathnodul curent (context node) selfnodul parinte parentnodurile copil childnodurile descendente descendantnodurile de tip atribut attributenodurile ascendente ancestor

axe XPathself  .parent  ..attribute  @namespace  :

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

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

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 – functiispecificati 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”expresiiregulate

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 XPathorice 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 publichttp://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 Whitealte resurse grafice preluate de la flickriver.com & phetch.blogspot.com

O lectie de anatomie Web. Disectia unui document HTML

by Sabin Buraga on Jul 26, 2012

Accessibility

Categories

Upload Details

Usage Rights

2 Embeds 4

Statistics

O lectie de anatomie Web. Disectia unui document HTML Presentation Transcript

https://si0.twimg.com	3
https://twimg0-a.akamaihd.net	1