AWWW-1st3 6-w02 Tresc-1 1kolor

Aplikacje WWW
Interfejs uytkownika I
Wykad prowadzi: Marek Wojciechowski
Interfejs uytkownika I
Aplikacje WWW
Plan wykadu
Formatowanie HTML za pomoc arkuszy stylw CSS Jzyk XML oglna struktura dokumentw opis struktury za pomoc DTD przestrzenie nazw Jzyk XHTML Formatowanie i transformacja dokumentw XML za pomoc arkuszy stylw XSL transformacje XSLT obiekty formatujce XSL-FO
Interfejs uytkownika I (2)
Celem tego i kolejnego wykadu jest przedstawienie podstawowych technologii, ktre oprcz jzyka HTML su do tworzenia interfejsu uytkownika w aplikacjach internetowych. W ramach niniejszego wykadu w pierwszej kolejnoci omwione bd arkusze stylw CSS i ich wykorzystanie do formatowania dokumentw HTML. Nastpnie, w podstawowym zakresie, przedstawiony bdzie jzyk XML z uwzgldnieniem oglnej struktury dokumentu, opisu struktury za pomoc DTD i przestrzeni nazw. Kolejne zagadnienie to jzyk XHTML, bdcy wersj HTML dostosowan do regu jzyka XML. Na zakoczenie wykadu przedstawiony bdzie jzyk XSL sucy do transformowania i formatowania dokumentw XML. Omwione zostan zarwno cz XSL dotyczca transformacji dokumentw (XSLT) jak i cz dotyczca opisu sposobu formatowania (XSL-FO).
Aplikacje WWW
Cascading Style Sheets (CSS)

Preferowany mechanizm do definiowania stylu prezentacji dokumentw w Internecie Mechanizm oparty o arkusze stylw w postaci listy regu Uatwia spjne formatowanie zbioru dokumentw Umoliwia dokadniejsz kontrol sposobu wywietlania elementw ni znaczniki HTML Mimo powszechnego wsparcia, cigle drobne rnice midzy przegldarkami
Kaskadowe arkusze stylw (ang. Cascading Style Sheets, CSS) to mechanizm (a jednoczenie jzyk) sucy do definiowania stylu prezentacji dokumentw w Internecie. CSS moe by wykorzystany do formatowania dokumentw HTML, XML i XHTML. Od wersji 4.0 specyfikacji jzyka HTML, CSS jest preferowanym sposobem opisu formy prezentacji dokumentw HTML, a wykorzystywanie do tego celu znacznikw HTML i ich atrybutw jest zdecydowanie niezalecane. Jzyk HTML powinien by wykorzystany do zdefiniowania struktury dokumentu, a formatowanie poszczeglnych elementw powinno by okrelone za pomoc CSS. Formatowanie definiowane jest w tzw. arkuszu stylw (ang. style sheet), majcym posta listy regu stylistycznych (kolejno regu ma znaczenie). Arkusz stylw moe by zawarty w formatowanym dokumencie lub zapisany w odrbnym pliku. Podstawow zalet arkuszy stylw w odrbnych plikach jest moliwo zwizania ich z wieloma dokumentami. Dziki temu atwo jest zdefiniowa, a nastpnie w sposb spjny modyfikowa formatowanie zbioru dokumentw. CSS pozwala na specyfikacj czcionek, stylu tekstu, kolorw, marginesw, obramowania, stylu linii, pooenia elementw, itd. Naley podkreli, e CSS umoliwia znacznie dokadniejsz kontrol sposobu wywietlania elementw, anieli sam HTML. Standard CSS jest cigle rozwijany. Obecnie (wiosna 2006) obowizuje wersja CSS2 bdca rozszerzeniem starszej specyfikacji CSS1 (z drobnymi modyfikacjami). Niestety, nie wszystkie mechanizmy CSS1/CSS2 s zaimplementowane w dostpnych obecnie przegldarkach, a do tego cigle zdarzaj si drobne rnice midzy przegldarkami w sposobie interpretacji regu CSS. Finalizowane s prace nad CSS2.1 okrojon wersj CSS2, pozbawion opcji niezaimplementowanych w aktualnych przegldarkach, np. dwikowej interpretacji dokumentw (uwzgldnionej w powstajcym CSS3).
Aplikacje WWW
Doczanie regu do dokumentu HTML

Reguy stylistyczne w oddzielnym pliku, wskazanym znacznikiem <LINK REL="stylesheet"> Reguy stylistyczne zagniedone w dokumencie za pomoc znacznika <STYLE> w sekcji HEAD Atrybut STYLE elementw w sekcji BODY, np. <P STYLE='{color: blue}'>
Istniej trzy sposoby doczania regu formatujcych CSS do dokumentu HTML. Pierwszy ze sposobw to przygotowanie arkusza stylw w zewntrznym pliku, a nastpnie zwizanie go z dokumentem HTML poprzez umieszczenie w nim odpowiedniego znacznika <LINK>. W tym wypadku ten sam arkusz stylw moe by wykorzystany przez wiele dokumentw HTML. Drugi, mniej zalecany sposb polega na zawarciu arkusza stylw wewntrz dokumentu HTML za pomoc elementu <STYLE> w nagwku dokumentu (<HEAD>). Trzeci sposb to zawarcie reguy formatujcej w definicji elementu za pomoc atrybutu STYLE. Sposb ten mona wykorzysta do okrelania sposobu specyficznego formatowania konkretnego elementu, w uzupenieniu do oglnego arkusza stylw zwizanego z dokumentem.
Aplikacje WWW
HTML + CSS Przykad 1

<HTML> <HEAD> <TITLE>CSS homepage</TITLE> <STYLE type="text/css"> H1 { color: blue } BODY { font-family: "Times"; font-size: 12pt; margin: 3em } </STYLE> </HEAD> <BODY> <H1 style='font-family: "Helvetica"'> Cascading Style Sheets</H1> <H2>Preface</H2> <P> A CSS rule consists of two main parts: selector and declaration. </P> </BODY></HTML>
Slajd pokazuje przykad dokumentu HTML z arkuszem stylw CSS zawartym w dokumencie (w elemencie <STYLE> w nagwku dokumentu). Arkusz stylw okrela, e elementy <H1> maj mie kolor niebieski, a zawarto ciaa dokumentu ma by przedstawiona czcionk z rodziny Times o rozmiarze 12 punktw z marginesem o rozmiarze trzech znakw. W ciele dokumentu dla elementu <H1> z tekstem Cascading Style Sheets w jego atrybucie STYLE zostaa umieszczona regua, ktra nadpisuje ustawienie domylnego kroju czcionki dla dokumentu, wskazujc, e ten konkretny element ma by wywietlony przy uyciu czcionki z rodziny Helvetica.
Aplikacje WWW
HTML + CSS Przykad 2

<HTML> <HEAD> <TITLE>CSS homepage</TITLE> <LINK rel="stylesheet" href="styl.css" type="text/css"> </HEAD> <BODY> <H1 style='font-family: "Helvetica"'> Cascading Style Sheets</H1> <H2>Preface</H2> <P> A CSS rule consists of two main parts: selector and declaration. </P> </BODY></HTML> styl.css H1 { color: blue } BODY { font-family: "Times"; font-size: 12pt; margin: 3em }
Przykad na slajdzie ilustruje sposb wykorzystania arkusza stylw zapisanego w zewntrznym pliku. Sam dokument HTML i arkusz stylw s takie same jak w poprzednim przykadzie. Tym razem arkusz jest umieszczony w pliku styl.css, a dokument HTML odwouje si do niego poprzez element <LINK> w nagwku. Znaczenie kolejnych atrybutw elementu <LINK> jest nastpujce: REL informacja o tym e <LINK> wskazuje arkusz stylw, zgodnie z ktrym sformatowany ma by dokument, HREF adres dokumentu (nazwa pliku jeli arkusz na tym samym serwerze w tym samym katalogu), TYPE typ MIME arkusza stylw (obecnie dla HTML zawsze text/css).
Aplikacje WWW
Format regu CSS (1/2)

Regua = selektor + deklaracja
H1 { color: blue } selektor deklaracja
Selektor zawiera: nazwy elementw (np. H1) nazwy klas (np. .parzysty) identyfikatory (np. #txt15) czniki (odstp, >, +)
Reguy stylistyczne CSS skadaj si z dwch czci. Pierwsz jest selektor wskazujcy elementy dokumentu, ktre maj by sformatowane zgodnie z dan regu. Gdy wszystkie warunki selektora s spenione dla danego elementu, mwimy, e element spenia (ang. matches) selektor. Drug czci reguy jest deklaracja opisujca formatowanie. Selektory zbudowane s z nazw elementw, nazw klas i identyfikatorw, opcjonalnie poczonych cznikami. Dostpne czniki to odstp (spacja) oraz znaki > i +.
Aplikacje WWW
Format regu CSS (2/2)

Deklaracja = nazwa waciwoci: warto Grupowanie selektorw
H1, H2 { color: blue }
Grupowanie deklaracji
H1 { color: blue; font-style: italic }
Druga cz reguy stylistycznej deklaracja, obejmuje nazw waciwoci np. color i warto np. blue. Dla kadej z waciwoci standard CSS okrela dopuszczalne wartoci. W przypadku, gdy kilka regu posiada tak sam deklaracj, mona zapisa je skrtowo korzystajc z moliwoci grupowania selektorw, oddzielajc je przecinkami w definicji zgrupowanej reguy. Podobnie zgrupowane mog by deklaracje w przypadku kilku regu posiadajcych taki sam selektor. W takim wypadku deklaracje s oddzielone od siebie rednikami we wsplnych nawiasach klamrowych.
Aplikacje WWW
Selektory (1/2)
* - kady element E - kady element E (np. BODY) E F - kady element F zagniedony wewntrz elementu E E > F - kady element F zagniedony bezporednio wewntrz elementu E E + F - kady element F, ktry nastpuje bezporednio za elementem E A:link - kady link <A>, ktry nie zosta jeszcze odwiedzony A:visited - kady link <A>, ktry zosta ju odwiedzony
Ten i nastpny slajd przedstawiaj znaczenie najwaniejszych konstrukcji selektorw: * - speniony przez kady element, E - speniony przez kady element E (np. BODY), E F - speniony przez kady element F zagniedony wewntrz elementu E, E > F - speniony przez kady element F zagniedony bezporednio wewntrz elementu E, E + F - speniony przez kady element F, ktry nastpuje bezporednio za elementem E, A:link - speniony przez kady link <A>, ktry nie zosta jeszcze odwiedzony, A:visited - speniony przez kady link <A>, ktry zosta ju odwiedzony,
Aplikacje WWW
Selektory (2/2)
E:active - element E wanie naciskany myszk E:hover - element E, nad ktrym wanie znajduje si wskanik myszki E[atr] - elementy E, ktre posiadaj ustawion (dowoln) warto atrybutu atr E[atr="val"] - elementy E, ktre posiadaj atrybut atr o wartoci val E[atr~="val"] - elementy E, ktrych wartoci atrybutu atr jest lista sw, zawierajca val E.val - elementy E, ktre posiadaj atrybut CLASS o wartoci val (skrt dla E[class~="val"]) E#val - elementy E, posiadajce atrybut ID o wartoci val
E:active - speniony przez kady element E, ktry jest wanie naciskany myszk, E:hover - speniony przez kady element E, nad ktrym wanie znajduje si wskanik myszki, E[atr] - speniony przez te elementy E, ktre posiadaj ustawion (dowoln) warto atrybutu atr, E[atr="val"] - speniony przez te elementy E, ktre posiadaj atrybut atr o wartoci val, E[atr~="val"] - speniony przez te elementy E, ktrych wartoci atrybutu atr jest lista sw, zawierajca val, E.val - speniony przez te elementy E, ktre posiadaj atrybut CLASS o wartoci val (skrt dla E[class~="val"]), E#val - speniony przez te elementy E, ktre posiadaj atrybut ID o wartoci val . W przypadku gdy dwa ostatnie typy selektorw maj by stosowane do wszystkich rodzajw elementw z konkretnej klasy lub o konkretnym identyfikatorze, stosowana jest notacja: *.val i *#val, ktr mona jeszcze uproci do postaci .val i #val. Gdy element ma mie przypisane jednoczenie dwie lub wicej klas stosowana jest notacja .klasa1.klasa2.
10
Aplikacje WWW
Waciwoci: czcionka, tekst, kolory i to

Waciwoci czcionki: font, styl, wariant, grubo, szeroko, rozmiar Waciwoci tekstu: wcicie, wyrwnanie, dekoracja, cie, odstpy, transformacja wielkoci liter Waciwoci koloru i ta: kolor pierwszego planu, kolor ta, obrazek jako to
BODY { font-family: helvetica, sans-serif; text-align: justify; text-decoration: underline; color: blue; background-color: yellow; }
Waciwoci czcionki w CSS to: (a) rodzina czcionek (font-family); np. serif, sans-serif, konkretne nazwy fontw; (b) styl (font-style); wartoci: normal, italic, oblique; (c) wariant (font-variant); np. normal, small-caps; (d) grubo (font-weight); np. normal, bold, 100, 200, 300, itd.; (e) szeroko (font-stretch); np. condensed, normal, expanded; (f) rozmiar (font-size); np. small, medium, large, bezwzgldny lub wzgldny rozmiar czcionki. Waciwoci tekstu w CSS to: (a) wcicie (text-indent); np. 3em (em to rozmiar znaku dla aktualnie wybranej czcionki); (b) wyrwnanie (text-align); wartoci: left, right, center, justify; (c) dekoracja (text-decoration); wartoci: none, underline, overline, line-through, blink; (d) cie (text-shadow); np. 0.2em 0.2em; (e) odstpy midzy literami (letter-spacing) i wyrazami (word-spacing); np. 0.1em, 1em; (f) transformacja wielkoci liter (text-transform); wartoci: capitalize, uppercase, lowercase; Waciwoci koloru i ta w CSS to: (a) kolor pierwszego planu (color) i ta (background-color); np. red, rgb(255,0,0), #ff0000; (b) obrazek w tle (background-image, background-repeat, background-attachment, background-position, background); np. background-image: url("marble.gif"); Przykadowa regua na slajdzie mwi, e ciao dokumentu ma by wywietlone czcionk helvetica lub inn bezszeryfow, tekst ma by wyrwnany do lewej i prawej oraz podkrelony, w kolorze niebieskim na tym tle.
11
Aplikacje WWW
Waciwoci: Box model

Dotyczy formatowania prostomargines zewntrzny ktw wyznaczonych przez: obramowanie zawarto margines wewn. margines wewntrzny zawarto obramowanie margines zewntrzny Formatowanie rozmiaru marginesw, gruboci, stylu i koloru obramowania
P { padding: 3px; margin: 1em 2em border-style: solid; border-color: blue; border-width: medium; }
Model formatowania CSS wie z kadym elementem jeden lub wiele zagniedonych prostoktw (std angielska nazwa Box model). W modelu tym, prostokt reprezentujcy zawarto jest opcjonalnie otoczony: (a) marginesem wewntrznym (ang. padding), (b) obramowaniem (ang. border), (c) przezroczystym marginesem zewntrznym (ang. margin). Dla marginesw (waciwoci: padding, margin) CSS pozwala na wyspecyfikowanie ich rozmiaru (bezwzgldnego lub w procentach wzgldem elementu otaczajcego). Dla obramowania mona wskaza grubo linii, jej kolor oraz styl (waciwoci: border-width, border-color, border-style). Istnieje moliwo okrelenia rnego formatowania dla marginesw i obramowania z poszczeglnych stron. Pierwszym sposobem jest podanie od 2 do 4 wartoci dla danej waciwoci w kolejnoci: top, right, bottom, left (gdy podane s 2 lub 3 wartoci brakujca warto jest taka sama jak dla przeciwlegej strony). Drugim sposobem jest wykorzystanie wariantw waciwoci, ktre sw nazw wskazuj konkretn stron np. padding-top, padding-right, padding-bottom, padding-left. Przykadowa regua przedstawiona na slajdzie mwi, e akapit powinien posiada z kadej strony margines wewntrzny o szerokoci trzech pikseli, margines zewntrzny grny i dolny o szerokoci jednego znaku, margines zewntrzny prawy i lewy o szerokoci dwch znakw, a obramowanie lini cig w kolorze niebieskim o redniej gruboci.
12
Aplikacje WWW
Waciwoci: pozycjonowanie elementw

Trzy schematy pozycjonowania: Normal flow Floats Absolute positioning Algorytm pozycjonowania uwzgldnia waciwoci: position (static, relative, absolute, fixed) float (left, right, none)
CSS oferuje trzy schematy pozycjonowania: Normal flow normalne, domylne, pozycja kolejnego elementu jest determinowana pooeniem poprzedniego; Floats przesunicie elementu do lewej/prawej z moliwoci opywania go zawartoci kolejnych elementw; Absolute positioning pooenie wskazane poprzez bezwzgldne wsprzdne (tak naprawd wzgldem otaczajcego pozycjonowanego elementu). Algorytm pozycjonowania prostoktw zwizanych z elementami uwzgldnia waciwoci position i float. Dostpne wartoci dla waciwoci position to: static warto domylna, wybiera normalne pozycjonowanie (normal flow); relative pozycja wyznaczana jak w normal flow, a nastpnie prostokt przesuwany wzgldem tej pozycji; absolute pozycja wskazana poprzez podanie wsprzdnych wewntrz otaczajcego elementu; fixed ustalona pozycja wskazana poprzez podanie wsprzdnych wewntrz okna w przegldarce (ang. viewport). Dostpne wartoci dla waciwoci float to: left przesunicie elementu do lewej, zawarto opywa go z prawej strony; right przesunicie elementu do prawej, zawarto opywa go z lewej strony; none domylnie, brak opywania. W przypadku korzystania z waciwoci float konieczne jest wskazanie szerokoci elementu waciwoci width.
13
Aplikacje WWW
Uwagi o pozycjonowaniu elementw

Pozycjonowanie poprzez CSS a nie tabelki i ramki HTML tabelki dla danych tabelarycznych ramki niezalecane, ale zastpujce je mechanizmy CSS sabo wspierane przez przegldarki
Wykorzystanie CSS jest zalecan technik wymuszania wzajemnego pooenia elementw na stronie wzgldem siebie. Przed pojawieniem si CSS twrcy stron czsto wymuszali konkretne uoenie elementw na stronie za pomoc tabelek HTML. Obecnie nie jest to zalecane. Tabelki powinny suy do przedstawiania danych w postaci tabelarycznej. Uycie ich do pozycjonowania komplikuje struktur dokumentu, a take moe powodowa problemy z prezentowaniem stron na urzdzeniach o maym ekranie (np. telefonach czy PDA) Pozycjonowanie CSS stanowi te alternatyw dla ramek HTML. Jednym z podstawowych zastosowa ramek byo wywietlanie menu obok zawartoci w taki sposb, aby menu pozostawao na swoim miejscu gdy uytkownik przewija ramk z zawartoci. Ten sam efekt mona uzyska poprzez ustalone pozycjonowanie bloku tekstu zawierajcego menu. Niestety w chwili obecnej (wiosna 2006) niewiele przegldarek obsuguje ten mechanizm.
14
Aplikacje WWW
Pozycjonowanie w CSS Przykad

<HTML> <HEAD> <TITLE>CSS homepage</TITLE> <LINK rel="stylesheet" href="styl.css" type="text/css"> </HEAD> <BODY> <DIV class='normalny'> Block of text with normal flow. </DIV> <DIV class='absolutny'> Block of text with absolute positioning. </DIV> </BODY></HTML> styl.css DIV { border: solid } DIV.absolutny { position: absolute; top: 50 px; left: 100 px; width: 10 em }
Przykad na slajdzie ilustruje absolutne pozycjonowanie elementw za pomoc CSS. Przykadowy dokument HTML zawiera dwa bloki tekstu (elementy <DIV>). Pierwszemu z nich przypisano klas normalny, a drugiemu absolutny. Arkusz stylw okrela, e wszystkie elementy DIV maj mie widoczne obramowanie. Ponadto, dla blokw tekstu DIV o klasie absolutny specyfikuje si ich pooenie poprzez podanie wsprzdnych lewego grnego naronika w pikselach oraz szeroko w znakach.
15
Aplikacje WWW
Dziedziczenie regu
Dziedziczenie waciwoci z elementw nadrzdnych
Dokument HTML <H1>Oto przykad <EM>dziedziczenia</EM></H1> Arkusz stylw H1 { color: blue }
Wartoci niektrych waciwoci s dziedziczone z elementu nadrzdnego w strukturze dokumentu, w przypadku, gdy nie zostay podane jawnie. Specyfikacja CSS okrela, dla ktrych waciwoci wartoci powinny by dziedziczone, a dla ktrych nie. W przypadku, gdy autor arkusza stylw chce podkreli, e warto danej waciwoci ma by odziedziczona lub wskaza, e odziedziczona ma by warto waciwoci, ktra normalnie nie podlega dziedziczeniu, moe poda inherit jako warto waciwoci. Przykad na slajdzie ilustruje dziedziczenie wartoci waciwoci koloru pierwszego planu, ktra standardowo podlega dziedziczeniu. W dokumencie HTML element <EM> jest zawarty w elemencie <H1>. Arkusz stylw specyfikuje jedynie, e element <H1> ma by zaprezentowany niebieskim tekstem, a nie ma reguy dotyczcej koloru elementu <EM>. Zatem, element <EM> dziedziczy kolor z elementu <H1> go otaczajcego.
16
Aplikacje WWW
Kaskada
Kaskada regu z trzech rde: autor uytkownik Przegldarka Wane reguy
H1 { color: blue ! important}
Importowanie regu
@import url("ogolny.css")
Rozwinicie skrtu CSS to kaskadowe arkusze stylw. Termin kaskada dotyczy wzajemnej interakcji regu stylistycznych pochodzcych z trzech moliwych rde: 1. reguy autora zdefiniowane w dokumencie lub arkuszu stylw, do ktrego dokument si odwouje; 2. reguy uytkownika w zalenoci od przegldarki dostarczane przez uytkownika w formie pliku lub poprzez interaktywne ustawienie preferencji stylu wywietlania; 3. reguy przegldarki wbudowane w przegldark, zgodne z zaleceniami CSS odnonie domylnego formatowania elementw. Oglna zasada mwi, e reguy autora maj wiksz wag ni reguy uytkownika, a te z kolei maj wiksz wag ni reguy przegldarki. Zarwno autorzy jak i uytkownicy mog wzmacnia si swoich regu wskazujc je jako wane (ang. important). Reguy wane maj wiksz wag ni reguy normalne z tego samego rda. Wana regua uytkownika ma wiksz wag ni wana regua autora (od CSS2). Arkusze stylw mog importowa reguy z innych arkuszy za pomoc sowa kluczowego @import, po ktrym nastpuje adres URL wskazujcy importowany arkusz. Mechanizm ten pozwala na strukturalizacj zoonych arkuszy stylw.
17
Aplikacje WWW
Algorytm kaskady
Znajd wszystkie deklaracje odnoszce si do elementu Sortuj wg oznaczenia wanoci i pochodzenia deklaracje przegldarki normalne deklaracje uytkownika normalne deklaracje autora waga wane deklaracje autora wane deklaracje uytkownika Sortuj wg specyficznoci selektorw regu Sortuj wg kolejnoci wystpienia
Slajd przedstawia kompletny algorytm kaskady determinujcy ostateczn warto waciwoci danego elementu. W pierwszym kroku znajdowane s wszystkie deklaracje odnoszce si do elementu. Nastpnie znalezione deklaracje s sortowane wg oznaczenia wanoci i pochodzenia. W rosncym porzdku nastpuj po sobie kolejno: deklaracje przegldarki, normalne deklaracje uytkownika, normalne deklaracje autora, wane deklaracje autora, wane deklaracje uytkownika. W kroku trzecim reguy o tej samej wanoci i tym samym pochodzeniu s sortowane wg wspczynnika specyficznoci. Ide stojc za wspczynnikiem specyficznoci jest preferowanie regu, ktrych selektory w sposb bardziej szczegowy wskazuj dany element (szczegowy sposb wyznaczania wartoci wspczynnika na nastpnym slajdzie). Ostatecznie, jeli dwie deklaracje maj jednakowe pochodzenie, wano i specyficzno, decyduje kolejno regu. Wygrywa regua wyspecyfikowana jako ostatnia, przy czym przyjmuje si, e reguy z zaimportowanych arkuszy poprzedzaj reguy z biecego arkusza.
18
Aplikacje WWW
Specyficzno regu
Wspczynnik specyficznoci (ang. specificity) wyznaczany dla selektora reguy uwzgldnia: (a) czy do wskazania elementu wykorzystany jest selektor czy atrybut style (b) liczb identyfikatorw w selektorze (c) liczb innych atrybutw i pseudo-klas w selektorze (d) liczb nazw elementw i pseudo-elementw w selektorze Wspczynnik ma posta liczby (a)(b)(c)(d) UL OL LI.red {...} /* a=0 b=0 c=1 d=3 -> specificity = 13 */
Wspczynnik specyficznoci (ang. specificity) wyznaczany jest dla selektora reguy i uwzgldnia: (a) czy do wskazania elementu wykorzystany jest selektor czy atrybut STYLE, (b) liczb identyfikatorw w selektorze, (c) liczb innych atrybutw i pseudo-klas w selektorze, (d) liczb nazw elementw i pseudo-elementw w selektorze. Wspczynnik ma posta liczby (a)(b)(c)(d) w systemie o odpowiednio duej podstawie. U dou slajdu pokazany zosta przykad wyznaczenia wartoci wspczynnika specyficznoci dla zoonego selektora reguy. Poniewa przykadowy selektor zawiera trzy nazwy elementw i jedn nazw klasy, jego wspczynnik specyficznoci wynosi 13.
19
Aplikacje WWW
Extensible Markup Language (XML)

Prosty, elastyczny format tekstowy Wywiedziony z jzyka SGML Opisuje obiekty nazywane dokumentami XML, na ktre skadaj si dane i znaczniki Zaoenia: format uyteczny w Internecie format atwy w przetwarzaniu maszynowym format zrozumiay dla czowieka atwo tworzenia dokumentw
XML (ang. Extensible Markup Language) to prosty, elastyczny format tekstowy. Formalnie, XML stanowi podzbir jzyka Standard Generalized Markup Language (SGML) (ISO 8879:1986). Nie jest wic pomysem nowym, ale w przeciwiestwie do SGML szybko sta si bardzo popularny i powszechnie wykorzystywany ze wzgldu na znaczce uproszczenie w porwnaniu z SGML i zorientowanie na Internet. XML opisuje klas obiektw (ang. data objects) nazywanych dokumentami XML. Dokumenty XML zawieraj dane i znaczniki. S wic podobne do dokumentw HTML, ale midzy HTML i XML istniej fundamentalne rnice. Znaczniki w XML su do reprezentacji struktury i znaczenia danych i nie s z nimi zwizane domylne reguy prezentacji i formatowania danych (jak w HTML). XML, w przeciwiestwie do HTML, nie posiada predefiniowanego zestawu znacznikw o okrelonym znaczeniu. Pierwszym zaoeniem twrcw XML byo to, aby format by odpowiedni do wykorzystania w Internecie. Kolejne istotne zaoenia to atwo w przetwarzaniu maszynowym, czytelno dla czowieka i atwo tworzenia dokumentw. Wymienione zaoenia XML z ca pewnoci spenia. W poczeniu z XSL umoliwia przygotowanie danych do publikacji w Internecie z moliwoci automatycznej transformacji do rnych formatw prezentacji. XML jest atwy do przetwarzania w aplikacjach, ze wzgldu do bogactwo bibliotek parserw dla popularnych jzykw programowania. Jako prosty format tekstowy oparty o znaczniki opisujce znaczenie danych i struktur dokumentu, jest to format zrozumiay dla czowieka. Tworzenie dokumentw XML jest atwe zarwno za pomoc edytorw tekstowych (zwykych i zorientowanych na wsparcie XML) jak i programowo z poziomu aplikacji. Dodatkowo istniej narzdzia i standardy dotyczce eksportu danych w formacie XML np. z relacyjnych baz danych. W poczeniu z atwoci parsowania, czyni to z XML idealny format wymiany danych.
20
Aplikacje WWW
Zastosowania XML
rdowy format do publikowania informacji Format wymiany danych Format skadowania danych w bazach danych Format plikw konfiguracyjnych
Pierwszym planowanym zastosowaniem XML byo publikowanie danych w Internecie. XML spenia to zadanie w poczeniu z jzykiem XSL, dotyczcym transformacji i formatowania dokumentw XML. XML nie jest w stanie wyprze jzyka HTML, ale jest dobrym rozwizaniem gdy te same dane maj by publikowane na wiele sposobw, w tym w Internecie, w postaci dokumentw HTML. W tym wypadku dane do publikacji mog by przygotowane w formie dokumentw XML, a sposb ich prezentacji w rnej formie moe by opisany w jzyku XSL. Najwaniejszym obecnie zastosowaniem XML jest jednak wymiana danych midzy systemami i aplikacjami. XML ze wzgldu na atwo programowego generowania dokumentw oraz pniej ich parsowania w aplikacji jest wrcz idealnym formatem wymiany danych i w zwizku z tym w duym stopniu wypar z rynku inne, konkurencyjne w tym zakresie rozwizania. XML jest wykorzystywany zarwno do wymiany danych midzy aplikacjami poprzez sie Internet jak i off-line na zasadzie eksportu danych do pliku i nastpnie importowania go do innego systemu. Zyskujcym na znaczeniu w ostatnich latach zastosowaniem formatu XML jest wykorzystanie go jako formatu skadowania danych w bazach danych. Po pierwsze, XML umoliwia reprezentacj danych o strukturze okrelonej nie tak cile jak wymagaj tego relacyjne i obiektowe bazy danych (tzw. danych semistrukturalnych). Po drugie, powszechno istniejcych dokumentw XML stworzya zapotrzebowanie na skadowanie i przeszukiwanie kolekcji dokumentw XML. Skadowanie danych XML w postaci XML pozwala unikn kosztu transformacji danych XML przy wstawianiu ich i pobieraniu do/z bazy danych. Mwic o zastosowaniach XML nie mona zapomnie o jego powszechnym wykorzystaniu jako formatu plikw konfiguracyjnych rnego rodzaju aplikacji i narzdzi. Zalety XML w tym obszarze zastosowa to czytelno dla czowieka i atwo parsowania w aplikacji.
21
Aplikacje WWW
Struktura dokumentu XML

Prolog (opcjonalny) + ciao
<?xml version="1.0" encoding="ISO-8859-1"?> <company> <department symbol="M"> <dname>Marketing</dname> <employees> <employee>Jones</employee> <employee>Smith</employee> </employees> </department> </company>
Kady dokument XML posiada ciao w postaci odpowiednio zagniedonych elementw. Elementy definiowane s za pomoc znacznikw (otwierajcych i zamykajcych). Elementy mog posiada zawarto i atrybuty. Cae ciao dokumentu musi by zawarte w jednym elemencie najwyszego poziomu. W przykadzie na slajdzie takim elementem jest <company>. Ciao dokumentu moe by poprzedzone prologiem. Prolog moe zawiera nastpujce, opcjonalne konstrukcje: (a) deklaracja XML (zawsze w pierwszym wierszu dokumentu) okrelajca wersj XML (version) i opcjonalnie kodowanie znakw (encoding); (b) deklaracja typu dokumentu (ang. Document Type Declaration - DTD), opisujca uyte znaczniki oraz ich gramatyk; (c) instrukcje przetwarzania np. instrukcja wskazujca arkusz stylw, zgodnie z ktrym ma by sformatowany dokument. Przykadowy dokument na slajdzie zawiera prolog, w ktrym obecna jest jedynie deklaracja XML informujca o tym, e dokument jest w wersji XML 1.0, a jego kodowanie znakw to ISO-8859-1. Obowizujce wersje XML to 1.0 i 1.1. Wersja 1.1 rni si od 1.0 obsug Unicode, nie polegajc na konkretnej wersji Unicode, ale zawsze umoliwiajc wykorzystanie najwieszej. Zalecane jest tworzenie i generowanie dokumentw w wersji 1.0 jeli nie korzysta si z waciwoci 1.1. W przypadku gdy dokument XML nie zawiera deklaracji XML, przyjmuje si e jest on w wersji 1.0. Domylne kodowanie znakw dla XML to UTF-8.
22
Aplikacje WWW
Dokumenty poprawne i dobrze sformuowane
Dokument XML jest poprawny (ang. valid) jeli posiada DTD i jest z nim zgodny Alternatyw dla DTD jest XML Schema Jeli dokument nie posiada DTD, mona jedynie sprawdzi czy jest poprawnie sformuowany (ang. well-formed) poprawne sformuowanie jest warunkiem bycia dokumentem XML
Dokument jest poprawny (ang. valid) jeli posiada DTD i jest z nim zgodny. DTD jest sposobem opisu struktury dokumentw (gramatyki jzyka), obejmujcym dopuszczalne znaczniki, ich atrybuty oraz sposb ich zagniedania. DTD jest odpowiedni do definiowania struktury dokumentw tekstowych, gdy nie posiada penoprawnego systemu typw danych, pozwalajcego np. na rozrnienie midzy tekstami, liczbami i datami. Alternatywnym, nowszym i bardziej elastycznym sposobem opisu struktury dokumentw XML s schematy XML (XML Schema). Standard XML Schema jest wykorzystywany przede wszystkim w bazodanowych zastosowaniach XML-a. Podobnie jak w przypadku DTD, jeli dokument posiada schemat XML Schema, mona stwierdzi czy dokument jest poprawny w kontekcie tego schematu czy nie. Jeli z dokumentem nie zosta zwizany opis jego struktury (w postaci DTD i/lub XML Schema), mona jedynie stwierdzi czy dokument XML jest poprawnie sformuowany (ang. well-formed). Poprawne sformuowanie wg regu XML jest tak naprawd warunkiem koniecznym, aby dokument tekstowy ze znacznikami by dokumentem XML. Reguy poprawnego sformuowania dla formatu XML to: (a) wszystkie znaczniki zamknite (np. <P>...</P>). Dla elementw pustych dopuszczalny specjalny skrcony zapis np. <BR/>; (b) elementy prawidowo zagniedone np. <B> one <I> two </B> three </I> jest niepoprawne; (c) nazwy znacznikw otwierajcych i zamykajcych zgodne pod wzgldem wielkoci liter np. <B><i> one </I></B> jest niepoprawne; (d) wartoci atrybutw w apostrofach/cudzysowach, nawet gdy warto jest liczb np. <IMG SRC=icon.gif WIDTH=10 HEIGHT=20>; (e) dokument zawiera dokadnie jeden gwny element (niezawarty w innym elemencie).
23
Aplikacje WWW
Document Type Declaration (DTD)

company.xml <?xml version="1.0" encoding="ISO-8859-2"?> <!DOCTYPE company SYSTEM "company.dtd"> <company> +: 1 lub wicej <department symbol="M"> *: 0 lub wicej <dname>Marketing</dname> ?: 0 lub 1 <employees> <employee>Jones</employee> <employee>Smith</employee> company.dtd </employees> <!ELEMENT company (department)+> </department> <!ELEMENT department (dname, employees)> <department symbol="S"> <!ELEMENT dname (#PCDATA)> ... <!ELEMENT employees (employee)+> </department> </company> <!ELEMENT employee (#PCDATA)> <!ATTLIST department symbol CDATA #REQUIRED>
Slajd przedstawia przykadowy DTD oraz dokument XML, ktry si do niego odwouje i jest w jego kontekcie poprawny. DTD znajduje si w oddzielnym pliku, ktry w dokumencie jest wskazany jako zewntrzny DTD poprzez jego lokalizacj w dyrektywie !DOCTYPE. Znaczenie poszczeglnych wierszy przykadowego DTD przedstawionego na slajdzie jest nastpujce: 1. Element <company> zawiera jeden lub wicej elementw <department> (+ 1 lub wicej wystpie elementu, * 0 lub wicej wystpie, a ? 0 lub 1 wystpienie). 2. Element <department> zawiera nastpujce po sobie elementy <dname> i <employees> (kolejno ma znaczenie). 3. Element <dname> ma zawarto tekstow. 4. Element <employees> zawiera jeden lub wicej elementw <employee>. 5. Element <employee> ma zawarto tekstow. 6. Element <department> posiada jeden atrybut symbol, typu tekstowego, obowizkowy. Przykad na slajdzie pokazuje DTD zewntrzny w stosunku do dokumentu. Alternatyw jest zawarcie caego DTD wewntrz dokumentu XML lub wykorzystanie poczenia zewntrznego i wewntrznego DTD.
24
Aplikacje WWW
Przestrzenie nazw (XML Namespaces)

Rozwizanie problemu konfliktu nazw znacznikw
<html xmlns="http://www.w3.org/HTML/1998/html4" xmlns:emp="http://mysite.com/employees"> <head><title>Employees</title></head> <body> <emp:list> <emp:head>Employees</emp:head> <table> <tr><td><emp:lastname>Scott</emp:lastname></td> <td><emp:salary>2300</emp:salary></td></tr> </table> </emp:list> </body> </html>
Format XML nie zawiera predefiniowanego zestawu znacznikw. Nazwy znacznikw i ich znaczenie s ustalane przez twrcw dokumentw i aplikacji. Powstaje wiele sownikw dziedzinowych w postaci zbiorw znacznikw. Autorzy dokumentw powinni mc korzysta w jednym dokumencie z wielu sownikw i dodawa wasne. W takim wypadku pojawia si ryzyko konfliktw nazw znacznikw. Rozwizaniem problemu potencjalnych konfliktw nazw znacznikw s przestrzenie nazw (XML Namespaces). W przypadku wykorzystywania w dokumencie kilku definiowanych niezalenie zbiorw znacznikw, z kadym zbiorem zwizana jest przestrze nazw okrelajca ich pochodzenie. Z przestrzeniami nazw wykorzystywanymi w dokumencie wizane s prefiksy, ktrymi nastpnie poprzedzane s nazwy znacznikw. Jedna przestrze nazw moe by wskazana jako domylna znaczniki z niej pochodzce nie bd poprzedzane prefiksem. Definiowanie przestrzeni nazw odbywa si przez podanie specjalnego atrybutu xmlns:prefiks_przestrzeni. Wartoci atrybutu jest URI przestrzeni nazw (nazwa przestrzeni). Przestrze zdefiniowana w elemencie nadrzdnym moe by wykorzystywana w podrzdnych. Slajd przedstawia przykad dokumentu XML wykorzystujcego znaczniki z dwch przestrzeni nazw. Przestrzeni domyln (bez prefiksu) jest "http://www.w3.org/HTML/1998/html4". Druga przestrze to "http://mysite.com/employees" z odpowiadajcym jej prefiksem emp. Obie przestrzenie definiuj znacznik <head> przypisujc mu inne znaczenie. Dziki przestrzeniom nazw i odpowiadajcym im prefiksom moliwe jest jednoczesne wykorzystanie obu znacznikw <head> w sposb umoliwiajcy ich rozrnienie aplikacji, ktra bdzie przetwarza dokument.
25
Aplikacje WWW
Extensible HyperText Markup Language (XHTML)
HTML sformuowany jako XML Nastpca HTML 4.01 czy si HTML 4 z moc XML atwo przetwarzania maszynowego zagniedanie MathML, SMIL, SVG XHTML Basic rozszerzalny podzbir XHTML opracowany dla urzdze takich jak telefony, PDA Rnice w skadni midzy HTML i XHTML
Extensible HyperText Markup Language (XHTML) to HTML sformuowany jako XML, w pewnych obszarach okrojony, a w innych rozszerzony. Rekomendacja (W3C) XHTML 1.0 moe by traktowana jako nastpca HTML 4.01 (HTML4 jest aplikacj SGML, ale nie XML!). XHTML czy si HTML 4 z moc XML. HTML 4 jest sprawdzonym jzykiem do publikacji treci w Internecie. Z kolei niekwestionowan zalet XML jest bardziej uporzdkowana skadnia i w konsekwencji atwo przetwarzania maszynowego. Ponadto, dziki dostosowaniu skadni do regu XML, XHTML w przeciwiestwie do HTML daje autorom moliwo rwnoczesnego wykorzystania w dokumencie innych jzykw znacznikw opartych o XML, np. MathML do reprezentacji wyrae matematycznych; SMIL do tworzenia interaktywnych prezentacji audiowizualnych; SVG do grafiki wektorowej. Jzyk XHTML jest bardzo wany z punktu widzenia aplikacji dla urzdze mobilnych typu telefony komrkowe czy PDA. W ramach jzyka XHTML wyrniono jego podzbir: XHTML Basic, ktry ma stanowi baz dla rozszerze zorientowanych na poszczeglne typy specjalistycznych urzdze. Rozszerzenie o nazwie XHTML-MP (Mobile Profile) ma szans sta si nastpc jzyka WML, wykorzystywanego w aplikacjach dla urzdze mobilnych. Dokument XHTML musi by poprawnie sformuowanym dokumentem XML, std szereg rnic skadniowych midzy HTML a XHTML. Przykadowo, poniewa w XML wielko liter ma znaczenie przyjto, e w XHTML nazwy elementw i atrybutw s pisane maymi literami.
26
Aplikacje WWW
XHTML - Przykad
1 2 3
<?xml version="1.0" encoding="windows-1250"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl">
4 5 6
<head><title>Przykad XHTML</title></head> <body> <p> Wybierz kolor: <br/><br/> <select name="kolor"> <option selected="selected">Czerwony</option> <option>Biay</option><option>Zielony</option> </select> </p> </body> </html>
Na slajdzie pokazano przykad dokumentu XHTML, ilustrujcy rnice skadniowe midzy HTML a XHTML. Rnice podkrelone w przykadzie to: 1. Deklaracja XML (dokumenty XHTML s dokumentami XML). 2. Deklaracja typu dokumentu (z odwoaniem do publicznego DTD opisujcego gramatyk XHTML, opublikowanego przez W3C). 3. Wskazanie przestrzeni nazw dla znacznikw XHTML (potencjalnie umoliwia uycie w dokumencie znacznikw innych jzykw opartych o XML, z innych przestrzeni nazw). 4. Notacja skrcona dla znacznika bez zawartoci. 5. Atrybut w XML musi mie podan warto. 6. Jeli pojawi si znacznik otwierajcy element, musi pojawi si rwnie znacznik zamykajcy ten element. Elementy w dokumencie musz by poprawnie zagniedone.
27
Aplikacje WWW
Formatowanie dokumentw XML

Znaczniki XML opisuj struktur i semantyk danych Nie ma w XML predefiniowanych znacznikw opisujcych formatowanie brak domylnego sposobu prezentacji Sposb prezentacji dokumentu XML okrela doczony arkusz stylw CSS Cascading Style Sheets XSL Extensible Stylesheet Language
W jzyku XML znaczniki opisuj struktur i semantyk danych, a nie sposb ich prezentacji. Nie ma w XML predefiniowanych znacznikw opisujcych formatowanie dokumentu. Ze znacznikami XML nie jest te zwizany aden domylny sposb prezentacji. Edytor czy przegldarka, w ktrej zostanie otwarty dokument XML, zaprezentuje jego rdo w niezmienionej postaci, ewentualnie wykorzystujc rne kolory do podkrelenia skadni XML. Przykad dokumentu XML ogldanego w przegldarce Microsoft Internet Explorer zosta pokazany na slajdzie. Microsoft Internet Explorer prezentuje dokument XML, uwypuklajc skadni kolorami, a ponadto umoliwiajc zwijanie i rozwijanie poszczeglnych elementw, co uatwia nawigowanie po duych dokumentach. Podany sposb prezentacji dokumentu XML okrela si poprzez doczenie do dokumentu arkusza stylw. Arkusze stylw dla XML mona wprawdzie tworzy w omawianym wczeniej jzyku CSS, ale lepszym rozwizaniem jest wykorzystanie do tego celu opracowanego specjalnie dla XML jzyka XSL. Podstawow przewag XSL nad CSS jest to, e umoliwia on nie tylko wskazanie sposobu formatowania elementw rdowego dokumentu XML, ale rwnie transformacj jego struktury na potrzeby prezentacji.
28
Aplikacje WWW
Extensible Stylesheet Language (XSL)

Standard do definiowania transformacji i prezentacji dokumentw XML Skada si z 3 czci: XSL Transformations (XSLT) jzyk opisu transformacji dokumentw XML Path Language (XPath) jzyk wyrae do wskazywania poszczeglnych czci dokumentu XSL Formatting Objects (XSL-FO) - sownik znacznikw do opisu formatowania Arkusze stylw XSL s dokumentami XML
XSL (ang. Extensible Stylesheet Language) to standard do definiowania transformacji i prezentacji dokumentw XML. XSL skada si z 3 czci: 1. jzyka opisu transformacji dokumentw - XSL Transformations (XSLT), 2. jzyka wyrae do wskazywania poszczeglnych czci dokumentu - XML Path Language (XPath), 3. sownika znacznikw do opisu formatowania XSL Formatting Objects (XSL-FO). Arkusze stylw s tworzone w jzyku XSLT i opisuj transformacj dokumentu rdowego w dokument z zawartymi informacjami o jego formatowaniu. Formatowanie dokumentu wynikowego moe by zrealizowane poprzez umieszczenie w nim (w wyniku transformacji) znacznikw XSL-FO. XPath peni rol usugow i jest wykorzystywany w konstrukcjach XSLT do adresowania (wyszukiwania) poszczeglnych czci dokumentu rdowego. XPath jako jzyk wyrae jest wykorzystywany nie tylko w ramach XSL. Sta on si podstaw dla jzyka zapyta dla danych XML o nazwie XQuery. Arkusze stylw XSL s dokumentami XML, a wic dokument rdowy ma ten sam format co arkusz opisujcy sposb jego prezentacji (inaczej ni w przypadku HTML i CSS!).
29
Aplikacje WWW
Transformacje XSLT
1
Dokument
XML
Arkusz stylw
Procesor XSLT
XSL-FO
Procesor XSL-FO
PDF
XSLT
2
Dokument
XML
Arkusz stylw
Procesor XSLT
Dokument
HTML
XSLT
Arkusz stylw
CSS
Sposoby transformacji dokumentw XML s definiowane w jzyku XSLT w formie arkuszy stylw. Transformacja realizowana jest przez tzw. procesory XSLT, ktre wczytuj dokument XML oraz arkusz stylw XSLT i generuj wyjciowy dokument XML, HTML lub zwyky dokument tekstowy. Na slajdzie przedstawione s dwa typowe scenariusze transformacji XSLT: 1. Pierwszy scenariusz to transformacja w peni wykorzystujca moliwoci standardu XSL w oparciu o wspprac XSLT i XSL-FO. W tym wypadku wynikiem transformacji XSLT rdowego dokumentu jest dokument XML zawierajcy znaczniki formatujce XSL-FO. Dokument XSL-FO musi by nastpnie przetworzony procesorem XSL-FO. Wynikiem dziaania procesora XSL-FO moe by wizualizacja dokumentu na ekranie, wydruk na drukarce lub plik w formacie odpowiednim do druku, typowo PDF. 2. Scenariusz alternatywny to transformacja XSLT do postaci dokumentu HTML. Wygenerowany dokument HTML moe odwoywa si do dostarczonego niezalenie arkusza stylw CSS. Jest to wygodna metoda definiowania sposobu prezentacji dokumentw XML w Internecie. Czsto zamiast HTML generowany jest XHTML, gdy nie wszystkie procesory XSLT musz obsugiwa HTML jako format wyjciowy. Okrelajc ten drugi scenariusz jako alternatywny, naley przyzna, e historycznie by on wykorzystywany wczeniej ni scenariusz pierwszy i jest do dzi bardziej powszechny. Powodem takiego stanu rzeczy jest fakt, e specyfikacja XSLT i narzdzia j wspierajce byy dostpne kilka lat wczeniej ni zostaa zatwierdzona specyfikacja XSL-FO. Rwnie dzi wsparcie dla XSLT jest o wiele bardziej powszechne ni dla XSL-FO. Dostpnych jest wiele procesorw XSLT, zarwno komercyjnych jak i open source. Procesory XSLT s implementowane jako biblioteki dla rnych jzykw programowania i systemw operacyjnych np. Xalan dla Javy i C++, SAXON dla Javy, MSXML dla systemu Microsoft Windows (dostpny na platformie .NET). Procesory XSLT s rwnie wbudowane w popularne przegldarki internetowe (Internet Explorer, Mozilla, Opera).
30
Aplikacje WWW
Co widzi procesor XSLT?

Procesor XSLT widzi drzewo dokumentu XML
<company> symbol="M <department>
<company> <department symbol="M"> <dname>Sales</dname> <employees> <employee>Jones</employee> <employee>Smith</employee> </employees> </department> </company>
<dname>
<employees>
Sales <employee> Jones <employee> Smith
Dokument XML, ze wzgldu na ograniczenia dotyczce poprawnego zagniedania elementw, moe by przedstawiony w formie drzewa. Podstawowa metoda parsowania dokumentu XML generuje w pamici odpowiadajc mu struktur drzewiast. Drzewo zawiera rnego rodzaju wzy, w tym wzy elementw, wzy atrybutw i wzy tekstowe. Na slajdzie pokazano przykadowy dokument XML i odpowiadajce mu drzewo bdce wynikiem parsowania dokumentu. Procesory XSLT s wykorzystywane w poczeniu z parserami XML w taki sposb, e procesor XSLT otrzymuje na wejciu drzewo rdowego dokumentu XML i drzewo arkusza stylw. Wynikiem transformacji XSLT jest pocztkowo drzewo dokumentu wynikowego, ktre nastpnie jest wysyane na wyjcie w formie tekstowej.
31
Aplikacje WWW
XSLT Przykad (1/3)

<?xml version="1.0" encoding="windows-1250" ?> <?xml-stylesheet type="text/xsl" href="produkty.xsl"?> <cennik> <produkt> <nazwa>Antena dachowa</nazwa> <symbol>1709765</symbol> <cena>85</cena> </produkt> <produkt> <nazwa>Radioodtwarzacz CAR 2001</nazwa> <symbol>3209765</symbol> <cena>525</cena> </produkt> ... </cennik>
Slajd przedstawia przykadowy dokument XML, zawierajcy cennik akcesoriw samochodowych oraz docelowy efekt prezentacji dokumentu w przegldarce Microsoft Internet Explorer. Formatowanie zostao zrealizowane poprzez transformacj XSLT do HTML zdefiniowan w arkuszu stylw umieszczonym w pliku produkty.xsl. Generowany dokument HTML jest w postaci poprawnie sformuowanego dokumentu XML (XHTML). Wyrniony fragment dokumentu to instrukcja przetwarzania, wica z dokumentem arkusz stylw XSL, ktry ma by wykorzystany do jego transformacji. Atrybut type wskazuje typ arkusza stylw. Wg specyfikacji XSL jego wartoci powinien by text/xml, Internet Explorer spodziewa si jednak niestandardowego typu text/xsl. Atrybut href wskazuje lokalizacj arkusza stylw w formie adresu URL. Jeli, tak jak w przykadzie, arkusz stylw znajduje si w tym samym folderze/katalogu co formatowany dokument, wystarczy poda sam nazw pliku.
32
Aplikacje WWW
XSLT Przykad (2/3)
2 3
<?xml version="1.0" encoding="windows-1250"?> <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"> <xsl:template match="cennik"> <HTML><BODY><H1>Cennik akcesoriw</H1> <xsl:apply-templates/></BODY></HTML> </xsl:template> <xsl:template match="produkt"> <xsl:apply-templates/><BR/> </xsl:template> ...
Slajd przedstawia pierwsz cz arkusza stylw zawierajcego definicj transformacji XSLT. Jzyk XSLT jest jzykiem deklaratywnym, cho zawiera pewne konstrukcje proceduralne (instrukcj ptli FOR). Zalecanym stylem definiowania transformacji XSLT jest styl deklaratywny, w ktrym opis transformacji ma posta zbioru regu. Regua jest definiowana za pomoc elementu <xsl:template>, ktrego atrybut match zawiera wyraenie XPath, wybierajce przetwarzane elementy. W przedstawionym na slajdzie arkuszu stylw wykorzystywane s tylko najprostsze wyraenia XPath, wybierajce wzy elementw dzieci i wzy tekstowe. Znaczenie poszczeglnych fragmentw przykadowego arkusza stylw jest nastpujce: 1. Element gwny arkusza <xsl:stylesheet> deklarujcy przestrze nazw dla znacznikw XSLT. Zwyczajowy prefiks przestrzeni nazw XSLT to xsl. 2. Regua mwica, e kade wystpienie elementu <cennik> ma by zastpione przez: <HTML><BODY><H1>Cennik akcesoriw</H1>*</BODY></HTML>, gdzie w miejscu *, ma by umieszczona zawarto bdca wynikiem dopasowania regu arkusza do zawartoci elementu <cennik>. 3. Regua mwica, e kade wystpienie elementu <produkt> ma by zastpione przez: *<BR/>, gdzie w miejscu *, ma by umieszczona zawarto bdca wynikiem dopasowania regu arkusza do zawartoci elementu <produkt>.
33
Aplikacje WWW
XSLT Przykad (3/3)
4 5 6
... <xsl:template match="nazwa"> <B><xsl:value-of select="text()"/></B> </xsl:template> <xsl:template match="symbol"> </xsl:template> <xsl:template match="cena"> <I><xsl:value-of select="text()"/></I> PLN </xsl:template> </xsl:stylesheet>
Slajd przedstawia pozosta cz arkusza stylw, ktrego pocztek zosta przedstawiony na poprzednim slajdzie. Znaczenie poszczeglnych fragmentw arkusza stylw jest nastpujce: 4. Regua mwica, e kade wystpienie elementu <nazwa> ma by zastpione przez: <B>*</B> -, gdzie w miejscu *, ma by umieszczona zawarto tekstowa elementu <nazwa>. 5. Regua mwica, e wystpienia elementu <symbol> maj nie wpywa na zawarto dokumentu wynikowego. Taka regua bez ciaa jest niezbdna w celu pominicia w wynikowym dokumencie zawartoci elementw <symbol>, ze wzgldu na istnienie domylnych regu XSLT, z ktrych jedna mwi, e zawarto elementw, do ktrych nie pasuje adna regua jawnie zdefiniowana w arkuszu, ma w formie tekstowej by wyprowadzona na wyjcie. 6. Regua mwica, e kade wystpienie elementu <cena> ma by zastpione przez: <I>*</I> PLN, gdzie w miejscu *, ma by umieszczona zawarto tekstowa elementu <cena>.
34
Aplikacje WWW
Obiekty formatujce XSL-FO

Jzyk opisu wygldu (prezentacji) dokumentw XML Wiele rozwiza wsplnych z CSS2 W praktyce wykorzystywany w poczeniu z XSLT Obecnie uywany gwnie do przygotowywania dokumentw XML do druku (w tym konwersji do PS, PDF) Znacznie mniej popularny ni XSLT
Obiekty formatujce XSL-FO (ang. XSL Formatting Objects) to jzyk znacznikw XML sucy do opisu sposobu prezentacji dokumentw XML. XSL-FO wykazuje w zakresie moliwoci formatowania duo podobiestw do CSS (w wersji 2.0 i wyszych), cho skadnia obu jzykw jest zupenie inna. W porwnaniu z CSS, XSL-FO umoliwia bardziej szczegowe zdefiniowanie formatu dla dokumentw przygotowywanych do druku dziki konstrukcjom do opisu paginacji, ukadu poszczeglnych stron, itp. Skadnia XSL-FO jest do skomplikowana, a przy tym niezbyt oszczdna. W zwizku z tym dokumenty XSL-FO s nieco rozdmuchane i trudno si je tworzy rcznie. Dokumenty XSL-FO wg twrcw standardu XSL maj by generowane automatycznie w wyniku transformacji XSLT i taka jest te praktyka. Obecnie XSL-FO jest uywany gwnie do przygotowywania dokumentw XML do druku, poprzez konwersj do formatu PDF lub PostScript. Na potrzeby publikacji dokumentw XML w Internecie wykorzystywana jest transformacja XSLT do HTML. XSL-FO jest zdecydowanie mniej popularny ni XSLT. Specyfikacja XSL-FO powstaa znacznie pniej ni XSLT i wolniej te pojawiaj si narzdzia obsugujce XSL-FO. W zwizku z ma popularnoci XSL-FO pojawiaj si nawet pytania, czy ten jzyk jest w ogle potrzebny, skoro do przygotowywania dokumentw tekstowych do druku w oparciu o format tekstowy (cho nie XML) s inne, od lat doskonalone, narzdzia jak np. TeX. Narzdzi do przetwarzania XSL-FO jest zaledwie kilka, dwa najpopularniejsze to: XEP (RenderX) narzdzie komercyjne (http://www.renderx.com/); FOP (Apache) narzdzie open source (http://xmlgraphics.apache.org/fop/).
35
Aplikacje WWW
XSL-FO Przykad (1/2)

xsl-fo.fo
<?xml version="1.0" encoding="iso-8859-1"?>
1 2
<fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format"> <fo:layout-master-set> <fo:simple-page-master master-name="slowniczek"> <fo:region-body margin="2in"/> </fo:simple-page-master> </fo:layout-master-set> <fo:page-sequence master-reference="slowniczek"> <fo:flow flow-name="xsl-region-body"> <fo:block font-family="Helvetica" font-size="16pt" font-weight="bold" color="blue" text-align="left" space-after="8pt"> XSL-FO </fo:block> ... Interfejs uytkownika I (36)
3 4 5
Slajd przedstawia przykad dokumentu XSL-FO. Jest to prosty dokument zawierajcy nagwek i jeden krtki akapit tekstu. Ze wzgldu na rozmiar dokumentu, jego zakoczenie zostanie przedstawione i omwione na kolejnym slajdzie. Znaczenie poszczeglnych fragmentw kodu jest nastpujce: 1. Element gwny dokumentu z deklaracj przestrzeni nazw XSL Formatting Objects, wic j z prefiksem fo. 2. Element <fo:layout-master-set> zawiera definicje ukadw stron wykorzystywanych w dokumencie. W tym wypadku zdefiniowany elementem <fo:simple-page-master> jest tylko jeden ukad strony o nazwie slowniczek. Jest to prosty ukad strony, zawierajcy tylko jeden region ciao (element <fo:region-body>). Region ten ze wszystkich stron ma by otoczony marginesem o szerokoci 2 cali. 3. Sekwencja stron (<fo:page-sequence>), dla ktrych ma obowizywa zdefiniowany wyej ukad o nazwie slowniczek. 4. Element <fo:flow> stanowicy kontener dla tekstu w dokumencie. W tym wypadku wskazuje, e tekst ma znale si w regionie ciaa. 5. Pierwszy blok tekstu dokumentu (element <fo:block>), zawierajcy w tym wypadku nagwek z hasem. Tekst ma by przedstawiony czcionk Helvetica o rozmiarze 16 punktw, pogrubion, w kolorze niebieskim. Tekst ma by wyrwnany do lewej, odstp po nim ma wynosi 8 punktw. (cig dalszy dokumentu na nastpnym slajdzie)
36
Aplikacje WWW
XSL-FO Przykad (2/2)

xsl-fo.fo
...
<fo:block font-family="Times" font-size="12pt" font-weight="normal" color="black" text-align="justify"> XSL Formatting Objects (XSL-FO) is an XML vocabulary for specifying formatting semantics in XML documents. </fo:block> </fo:flow> </fo:page-sequence> </fo:root>
fop xsl-fo.fo xsl-fo.pdf xsl-fo.pdf
Slajd przedstawia dokoczenie treci dokumentu XSL-FO z poprzedniego slajdu oraz ilustruje sposb jego przetworzenia do formatu odpowiedniego do druku. Znaczenie wyrnionego fragmentu dokumentu jest nastpujce: 6. Drugi blok tekstu dokumentu (element <fo:block>), zawierajcy w tym wypadku akapit tekstu z objanieniem hasa. Tekst ma by przedstawiony czcionk Times o rozmiarze 12 punktw, normalnej gruboci, w kolorze czarnym. Tekst ma by wyrwnany do lewej i do prawej. Przykadowy dokument zosta zawarty w pliku o nazwie xsl-fo.fo. Przygotowanie go do druku, polegajce na konwersji do formatu PDF, zostao zrealizowane za pomoc narzdzia FOP. FOP jest uruchamiany w trybie tekstowym z linii polece systemu operacyjnego. Pierwszym parametrem jego wywoania jest nazwa rdowego pliku XSLFO, a drugim dana nazwa wynikowego pliku PDF. Efekt transformacji przykadowego dokumentu XSL-FO do postaci PDF zosta przedstawiony u dou slajdu.
37
Aplikacje WWW
Podsumowanie
CSS jest preferowanym mechanizmem formatowania dokumentw HTML XML jest tekstowym formatem oglnego przeznaczenia format publikacji danych w Internecie format wymiany i skadowania danych XHTML to wersja HTML dostosowana do regu XML XSL jest jzykiem do formatowania dokumentw XML XSLT transformacja dokumentu XSL-FO sownik znacznikw opisujcych formatowanie
Jzyk CSS jest preferowanym mechanizmem formatowania dokumentw HTML. Jzyk HTML powinien by wykorzystywany do opisu struktury dokumentu, a wszelki opis sposobu prezentacji dokumentu powinien by realizowany poprzez arkusze stylw CSS. XML jest tekstowym formatem oglnego przeznaczenia, opartym o znaczniki opisujce zawarto dokumentu. XML jest najczciej wykorzystywany jako format publikacji danych w Internecie oraz format wymiany i skadowania danych. XHTML to wersja HTML dostosowana do regu XML. Dokumenty XHTML s poprawnymi dokumentami XML, dziki czemu s atwiejsze w przetwarzaniu. XSL jest jzykiem do formatowania dokumentw XML. XSL obejmuje trzy czci: XSLT, XSL-FO i pomocnicz XPath. XSLT suy do opisu automatycznej transformacji dokumentu XML do dokumentu o innej strukturze. XSL-FO to sownik znacznikw opisujcych formatowanie. XSL-FO funkcjonalnie przypomina CSS, ale jest bardziej zorientowany na przygotowywanie dokumentw do druku.
38
Aplikacje WWW
Materiay dodatkowe
Cascading Style Sheets Home Page, http://www.w3.org/Style/CSS/ Extensible Markup Language (XML), http://www.w3.org/XML/ XHTML 1.0 The Extensible HyperText Markup Language (Second Edition), http://www.w3.org/TR/xhtml1/ The Extensible Stylesheet Language Family (XSL), http://www.w3.org/Style/XSL/
Cascading Style Sheets Home Page, http://www.w3.org/Style/CSS/ Extensible Markup Language (XML), http://www.w3.org/XML/ XHTML 1.0 The Extensible HyperText Markup Language (Second Edition), http://www.w3.org/TR/xhtml1/ The Extensible Stylesheet Language Family (XSL), http://www.w3.org/Style/XSL/
39

AWWW-1st3 6-w02 Tresc-1 1kolor

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

AWWW-1st3 6-w02 Tresc-1 1kolor

Uploaded by

Copyright:

Available Formats

Aplikacje WWW

Wykad prowadzi: Marek Wojciechowski

Cascading Style Sheets (CSS)

Interfejs uytkownika I (3)

Doczanie regu do dokumentu HTML

Interfejs uytkownika I (4)

HTML + CSS Przykad 1

HTML + CSS Przykad 2

Format regu CSS (1/2)

Format regu CSS (2/2)

Interfejs uytkownika I (8)

Interfejs uytkownika I (9)

Waciwoci: czcionka, tekst, kolory i to

Waciwoci: Box model

Waciwoci: pozycjonowanie elementw

Interfejs uytkownika I (13)

Uwagi o pozycjonowaniu elementw

Interfejs uytkownika I (14)

Pozycjonowanie w CSS Przykad

Interfejs uytkownika I (16)

Interfejs uytkownika I (18)

Extensible Markup Language (XML)

Interfejs uytkownika I (20)

Interfejs uytkownika I (21)

Struktura dokumentu XML

Interfejs uytkownika I (22)

Dokumenty poprawne i dobrze sformuowane

Interfejs uytkownika I (23)

Document Type Declaration (DTD)

Przestrzenie nazw (XML Namespaces)

Extensible HyperText Markup Language (XHTML)

Interfejs uytkownika I (26)

Formatowanie dokumentw XML

Interfejs uytkownika I (28)

Extensible Stylesheet Language (XSL)

Interfejs uytkownika I (29)

Co widzi procesor XSLT?

Sales <employee> Jones <employee> Smith

Interfejs uytkownika I (31)

XSLT Przykad (1/3)

XSLT Przykad (2/3)

Interfejs uytkownika I (33)

XSLT Przykad (3/3)

Interfejs uytkownika I (34)

Obiekty formatujce XSL-FO

Interfejs uytkownika I (35)

XSL-FO Przykad (1/2)

XSL-FO Przykad (2/2)

fop xsl-fo.fo xsl-fo.pdf xsl-fo.pdf

Interfejs uytkownika I (37)

Interfejs uytkownika I (38)

Interfejs uytkownika I (39)

You might also like