XML – ćwiczenia 5: Wizualizacja XML

Wizualizacja 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 wizualizacji. Służy do tego instrukcja przetwarzania xml-stylesheet umieszczona w początkowej części dokumentu (przed elementem głównym).

Przykład 1.

<?xml-stylesheet type="text/css" href="styl.css"?>

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. Wysoka 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. Niestety prowadzi to do używania IE-standardu zamiast standardu W3C.
  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. W dodatku bardziej zaawansowane jego fragmenty nie działają w IE.

Przykład 2. Wypisywanie wartości atrybutu

Popełniłem błąd pisząc, że w CSS nie da się wypisać wartości atrybutu, przepraszam. Oto przykład, w którym wypisuje się wartość atrybutu nazwa elementu obiekt, za każdym elementem obiekt:

obiekt:after {
	content: attr(nazwa)
}

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ż wzorce 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 ma atrybut class, w arkuszu można zdefiniować styl dla elementów podanej klasy. 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 do niego aplikowane są style autora strony. W praktyce wyświetlanie poszczególnych elementów HTML bywa wbudowane w przeglądarkę.

Bardzo krótko o wizualizacji

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 nieuż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, ...), text-decoration (underline, strike, ...)
    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. obiekty parzyste,
  2. obiekt o zadanym id,
  3. wyróżnienia,
  4. obiekty bez nazwy,
  5. obiekty bez opisu,
  6. obiekty z dodatkami,
  7. tylko drugie opisy obiektów,
  8. wyróżnienia w dodatkach znajdujących się za opisami,
  9. wyróżnienia w dodatkach i (osobno) wyróżnienia w opisach,
  10. wyróżnienia w obiektach parzystych,
  11. wyróżnienia w opisach zagnieżdżonych,
  12. 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 Trnsformations
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 (rekomendacje kandydujące) 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 profesjonalnych 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.

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. Ustalono, że nie będzie kolejnej „dużej” wersji HTML, a rozwijane jest nowe wcielenie HTMLa – XHTML.

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. CITE, 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).

Niedokończony jeszcze standard XHTML 2.0 kontynuuje ścieżkę "modularyzacji", przy czym niektóre fragmenty pochodzące z HTML zostaną zastąpione nowymi standardami (np. XForms zamiast formularzy HTML). Ogólnie ma być bardziej "semantycznie" i "strukturalnie".


Valid XHTML 1.1Valid CSS