XML – ćwiczenia 6: Prezentacja XML

Prezentacja dokumentów XML

Dokumenty XML (w ogólności) nie zawierają informacji o tym, jak prezentować ich zawartość. W różnych dokumentach te same nazwy elementów mogą znaczyć co innego, dlatego uniwersalny sposób prezentacji wszystkich dokumentów to co najwyżej wyświetlanie kodu XML lub drzewa dokumentu. Wiele dokumentów XML zawiera jednak dane, które można prezentować w bardziej specyficzny sposób.

Arkusze stylu

Pomysł arkuszy stylu polega na tym, aby umieścić informacje o prezentacji poza dokumentem. Dzięki temu:

  • ten sam arkusz jest dobry dla całej klasy dokumentów,
  • dla jednego dokumentu (bądź całej klasy dokumentów) można zdefiniować wiele arkuszy stylu, aby prezentować ten sam dokument na różne sposoby.

Rozdzielenie treści od jej prezentacji jest jednym z fundamentów „ideologii XMLowej”, zarządzania treścią, standardów promowanych przez organizację W3C.

Przypisywanie arkusza stylu do dokumentu

Istnieje standardowy sposób na zapisanie w dokumencie XML informacji o arkuszu stylu, którego należy użyć do jego prezentacji. Służy do tego instrukcja przetwarzania xml-stylesheet umieszczona w początkowej części dokumentu (przed elementem głównym). Poza podstawowym, można podać także alternatywne style, identyfikowane po nazwie (title).

Przykład 1.

<?xml-stylesheet type="text/xsl" href="styl.xsl"?>
<?xml-stylesheet type="text/css" href="styl.css" title="Domyślny"?>
<?xml-stylesheet type="text/css" href="styl-specjalny.css" title="Specjalny" alternate="yes"?>

Jest to nawet wyspecyfikowane w odpowiedniej rekomendacji :).

CSS – kaskadowe arkusze stylu

Cascading Style Sheets jest dość prostym sposobem zapisania informacji o prezentacji poszczególnych elementów dokumentu. Pozwala dużo powiedzieć o wyglądzie, szeroko stosowany przy (X)HTML, jest (nie idealnie) zaimplementowany we wszystkich liczących się graficznych przeglądarkach internetowych.

Zalety CSS:

  1. Możliwość precyzyjnego określania bardzo wielu aspektów wyglądu.
  2. Duża popularność (głównie przy (X)HTML) i wsparcie w narzędziach (głównie przeglądarkach internetowych). Uwaga – nieco bardziej skomplikowane arkusze bywają różnie interpretowane w różnych przeglądarkach.
  3. Wsparcie dla wielu media types (ekran, druk, dźwięk itp.).

Wady i braki CSS:

  1. Ubogi sposób rozróżniania fragmentów dokumentu (a te które są nie działają w IE).

Budowa arkusza CSS

Arkusz CSS składa się z wyrażeń, którymi mogą być m.in. reguły mówiące jak wyświetlać poszczególne elementy dokumentu. Każda reguła składa się z selektora, na podstawie którego określane jest jakich elementów dotyczy dana reguła, i bloku deklaracji postaci własność: wartość, określających jak dany element wyświetlać.

W (X)HTML można też informację o stylu umieszczać bezpośrednio w dokumencie, w atrybucie style elementu, którego styl ten dotyczy.

Selektory

Selektory to wzorce określające elementy, których dotyczy reguła. Mają intuicyjną składnię i dość dużą siłę wyrazu, mniejszą jednak niż ścieżki XPath występujące w XSLT.

Można określać elementy w oparciu o ich nazwy, zagnieżdżenie w dokumencie, wartości atrybutów. W przypadku wizualizowania HTML specjalne znaczenie mają atrybuty class i id, w arkuszu można zdefiniować styl dla elementów podanej klasy i o podanym identyfikatorze. Więcej o selektorach...

Dlaczego kaskadowe?

CSS pozwala na wielokrotne zdefiniowanie danej własności dla tego samego elementu, potencjalnie z różnymi wartościami. O tym, jaka wartość zostanie przyjęta decydują precyzja selektora (najsilniejsze po ID, najsłabsze z *) oraz kolejność wpisów (późniejsze nadpisują).

Jeśli dla danego elementu pewna własność stylu nie jest jawnie wyspecyfikowana, wówczas zazwyczaj jest przejmowana z nadelementu. Dopiero kiedy na ścieżce do elementu głównego nie ma jawnej definicji, przyjmowana jest wartość domyślna.

Więcej o ustalaniu obowiązującej wartości dla własności w rekomendacji.

Należy mieć świadomość, że dla elementów HTML wiele własności CSS jest już określonych. Dlatego mimo, że dla body określimy font-weight: normal, nagłówek h1 i tak będzie pogrubiony.

Zgodnie z zaleceniami W3C przeglądarka / użytkownik przeglądarki definiuje swój własny domyślny styl dla HTML, a dopiero po nim aplikowane są style autora strony.

Bardzo krótko o formatowaniu

W modelu wizualnym CSS każdemu elementowi dokumentu odpowiada blok. Zasadniczo dzielą się one na dwa rodzaje: "duże" bloki block i bloki poziomu tekstu inline block. Bloki są zagnieżdżone tak jak elementy w dokumencie. "Duże" bloki są wyświetlane jako prostokątne pudełka jeden pod drugim. Bloki typu inline podlegają normalnemu zawijaniu tekstu.

Domyślne rozmieszczenie bloków może zostać zmodyfikowane dzięki własnościom CSS wpływającym na pozycję i rozmiar.

Oto niektóre własności, za pomocą których można określać wygląd poszczególnych elementów:

  • display (inline, block, list-item, table-column, none, ...)
    podstawowa własność, mówi jaki obiekt wizualny ma odpowiadać temu elementowi (w HTML rzadko używana, bo elementy HTML mają juz przypisaną interpretację);
  • width (rozmiar), min-height (rozmiar), position (static, absolute, relative, ...), float (left, right, none)
    kontrola rozmiaru i pozycji obiektów;
  • margin (rozmiar), padding (rozmiar)
    zewnętrzny i wewnętrzny margines;
  • border-width (rozmiar), border-style (none, solid, dotted, dashed, double, inset, outset, ...), border-color (kolor)
    właściwości obramowania;
  • background-color (kolor), color (kolor), background-image (url)
    kolor tła i tekstu, obrazek tła;
  • font-size (rozmiar), font-family (serif, sans-serif, monospace, ..., 'Arial', ...), font-style (normal, italic, ...), font-weight (normal, bold, ...)
    atrybuty czcionki;
  • text-align (left, center, ...), text-decoration (underline, strike, ...)
    wyrównianie i atrybuty tekstu;

Więcej o CSS

Zadanie 1.

Zapisz przyklad.xml i przyklad.css.

Używając odpowiednich selektorów CSS wyróżnij następujące elementy (jeśli się da):

  1. wyróżnienia,
  2. obiekt o zadanym id,
  3. obiekty parzyste,
  4. obiekty parzyste bez korzystania z atrybutu,
  5. obiekty z nazwami,
  6. obiekty z dodatkami,
  7. obiekty bez nazwy,
  8. obiekty bez opisu,
  9. tylko pierwsze opisy obiektów,
  10. tylko drugie opisy obiektów,
  11. wyróżnienia w dodatkach znajdujących się za opisami,
  12. wyróżnienia w dodatkach i wyróżnienia w opisach,
  13. wyróżnienia w obiektach parzystych,
  14. wyróżnienia w opisach zagnieżdżonych,
  15. wyróżnienia w opisach, ale nie w opisach zagnieżdżonych.

XSL – wizualizacja przy pomocy przekształceń

Przekształcenie jako wizualizacja

Chociaż dokumenty XML zasadniczo niosą w sobie treść bez wizualizacji, istnieją jednak typy dokumentów niosące informacje o wizualizacji. Znanym przykładem jest XHTML.

Sposobem wizualizacji dowolnego dokumentu może więc być przekształcenie dokumentu źródłowego do dokumentu wynikowego, niosącego informacje o formatowaniu, a następnie prezentacja wynikowego dokumentu.

Połączenie idei przekształceń z ideą arkuszy stylu prowadzi do rozwiązania, w którym dla danej klasy dokumentów definiujemy arkusz – przekształcenie, który mówi w jaki sposób przekształcać dokumenty z tej klasy do dokumentów, które służą wizualizacji.

Standard XSL

Powyższe idee zostały zrealizowane w standardzie W3C Extensible Stylesheet Language. Standard ten składa się z dwóch zasadniczych części:

XSL Formatting Objects
typ dokumentów XML służących wyłącznie prezentacji,
XSL Transformations
typ dokumentów XML, w których zapisuje się przekształcenia.

W XSLT wykorzystywany jest standard XPath – język wyrażeń, w którym łatwo odwoływać się do fragmentów dokumentu XML. Z XSLT 2.0 i XPath 2.0 wiąże się jeszcze standard XQuery 1.0 – język zapytań nad dokumentami XML. Wszystkie te standardy będziemy poznawać na kolejnych zajęciach.

Zgodnie z ideą XSL należy pisać arkusze mówiące jak przekształcać dokumenty źródłowe do dokumentów XSL-FO, które to będą następnie wyświetlane lub w inny sposób prezentowane. XSL-FO jest wykorzystywane w zastosowaniach związanych z publikacją (książek, gazet itp.). Natomiast w zastosowaniach Webowych dla prezentacji częściej definiuje się przekształcenia do (X)HTML. XSLT stosuje się także do innych celów niż prezentacja.

Zadanie 2. Uruchomienie Apache FOP

Zainstaluj na koncie użytkownika pod Linuksem (lub zdalnie na students) Apache-FOP i uruchom dla przykładowego przekształcenia. Na przykład tak:

cd
wget http://www.idg.pl/mirrors/apache//xmlgraphics/fop/binaries/fop-1.0-bin.zip
unzip fop-1.0-bin.zip
chmod a+x fop-1.0/fop
mkdir -p przyklady_fo
cd przyklady_fo
wget http://www.mimuw.edu.pl/~czarnik/xml/xsl/pracownicy/pracownicy.xml
wget http://www.mimuw.edu.pl/~czarnik/xml/xsl/pracownicy/fo-bloki.xsl
~/fop-1.0/fop -xml pracownicy.xml -xsl fo-bloki.xsl -pdf out.pdf

Zadanie 3. Proste przekształcenia do XSL-FO

Zmodyfikuj przykładowy arkusz. Postaraj się wykonać m.in. następujące rzeczy:

  1. email kursywą,
  2. wyświetlanie numerów komórek innym kolorem,
  3. wyrównywanie numerów telefonów tak, aby kończyły się równo jeden pod drugim,
  4. powtarzający się na każdej stronie nagłówek (np. z nazwą firmy),
  5. nie łamanie strony w środku wizytówki.

HTML i XHTML

HTML

Hypertext Markup Language jest podstawowym językiem służącym do publikowania treści w Internecie. Najnowszą wersją jest HTML 4.01. Obecnie rozwijane jest nowe wcielenie HTML-a: XHTML. Ponadto rozpoczęto prace nad HTML 5.

HTML jest zastosowaniem SGML, dzięki temu możliwe są w nim pewne (niedopuszczalne w XML) skróty składniowe, jak np. pomijanie niektórych znaczników zamykających, a nawet otwierających. Ma to ułatwiać ręczną edycję dokumentów.

HTML zawiera bogaty zestaw elementów i atrybutów służących różnym celom. Wśród elementów występują zarówno „semantyczne” – mówiące jakie znaczenie ma fragment tekstu (np. Q, DFN), jak i służące wyłącznie do formatowania (np. B, I). Niektóre elementy i atrybuty są w HTML 4 uznane za niezalecane deprecated, a zamiast nich należy używać styli zapisanych np. w CSS.

Wiele elementów służy do zapisywania takich struktur jak listy czy tablice. Ważnym składnikiem HTML są odnośniki i formularze.

XHTML

Extensible Hypertext Markup Language jest nową generacją języków opartych o HTML, służących do publikowania treści w Internecie. Główne idee przyświecające przejściu z HTML do XHTML:

  • XML zamiast SGML,
  • możliwość dodawania nowych elementów (także przez autorów dokumentów),
  • modularyzacja, możliwość wyboru niektórych modułów.

XHTML 1.0 jest po prostu przeformułowaniem standardu HTML 4 jako zastosowania XML. Dokument XHTML jest jednocześnie dokumentem XML, w związku z tym składnia musi być w pełni rozwinięta i jednoznaczna.

XHTML 1.1 wraz ze standardem XHTML Modularization definiują XHTML jako zbiór modułów takich jak Text Module, List Module czy Forms Module. Określony jest domyślny zestaw modułów, jakiego można używać, ale autor dokumentu XHTML może dołączyć dodatkowe moduły (a także zawęzić ich zestaw) poprzez odpowiednie wpisy w DTD (lub definiując swój własny schemat XML Schema includujący wybrane moduły).


Valid XHTML 1.1Valid CSS