Nada

2D1525, Programmering för interaktiva medier
Laboration 2: CSS och XSLT
Laborationspäng: 8-15

 

Förberedelser 

Föreläsningsanteckningarna om CSS och XSLT, samt motsvarande kapitel i boken är lämpliga att läsa. Dessutom kapitel 19 och 20 som är av mer referenskaraktär. Bra tutorials finns på http://www.w3schools.com/". En CSS-tutorial finns här och en för XSLT finns här. Observera dock att den senare är gjord för att fungera med IE5 som använder en tidigare version av XSLT.

Poäng 

CSS-delen och den första XSLT-delen är obligatorisk. De övriga är valfria men ger bonuspoäng.
Om laborationen redovisas senast 2001-10-04 erhålles 2 ytterligare bonuspoäng.
 

Del 1: CSS (4 p) 

I den första delen av laborationen ska du öva dig att skriva CSS som opererar på XML-strukturer. Den enda läsare som i dagsläget stöder CSS på XML-strukturer är Opera. Det första du ska göra är alltså att ladda hem och installera Opera vilket kan göras härifrån för Mac och från http://www.opera.no/  för diverse andra plattformar.

Logga nu in på pub.gt.kth.se (som tidigare hette datan.gt.kth.se).

Skapa en mapp som heter "lab2" i din public_html/2D1525-katalog

pub>mkdir ~/public_html/2D1525/lab2
Kopiera över innehållet i /home0/courses/2D1525/lab2 till denna mapp med kommandot
pub>cp /home0/courses/2D1525/lab2/* ~/public_html/2D1525/lab2
De två filer är relevanta för denna del av laboratioen: midsummerdream.xml vilket är pjäsen "A Midsummer Night's Dream" av William Shakespeare samt play.css vilket är ett nästan tomt CSS-dokument som du ska modifiera för att efterlikna layouten som visas på skärmdumparna nedan. 

Öppna  till att börja med urlen http://pub.gt.kth.se/~ditt-användarnamn/2D1525/lab2/midsummerdream.xml i Opera. Du bör se en lång radda text. Den enda regeln i stylesheetet är nämligen att <LINE>-element ska visas som block.
 
 
 
 
1. Modifiera nu play.css tills dokumentet ser ut exakt som på skärmdumparna.

Det är viktigt att allt faktiskt ser ut exakt som på skärmdumparna, exempelvis indrag och fontstorlek. En linjal kan vara att rekommendera.

Observera att du INTE får ändra i själva XML-dokumentet, endast i CSS-dokumentet.

Momentet är färdigt när layouten matchar skärmdumparna.

 

 
 
 
 
 


 

Del 2: XSLT (5 p) 


I denna del av laborationen kommer du att få lära dig att göra XSL stylesheets för att översätta en XML-struktur som beskriver en mängd nyheter, till en HTML-struktur som är anpassad för mottagarens webb-läsare eller wap-läsare. 

Öppna netscape och gå in på adressen http://pub.gt.kth.se:8888/pim01/ditt-användarnamn/2D1525/lab2/nyheter.xml

(du ska givetvis ändra "ditt-användarnamn" till ditt användarnamn). Om allt gått rätt till ska du nu få upp ett fönster som ser ut så här:

Starta därefter lynx i ditt telnetfönster med kommandot

pub>lynx http://pub.gt.kth.se:8888/pim01/ditt-user-namn/2D1525/lab2/nyheter.xml

Du bör nu få upp samma sida i text-browsern lynx, fast med texten "lynx lynx lynx" i stället för "bla bla bla".

Du är nu redo att börja själva laborationen. I denna del av laborationen ska du modifiera innehållet i filerna nyheter.xsl och nyheter.text.xsl. Detta görs förslagsvis via emacs.

För att verifiera att allt verkligen fungerar som det är tänkt bör du nu öppna stylesheetet nyheter.xsl i din emacs och ändra texten "bla bla bla" till "hej hej hej". Ladda nu om sidan i Netscape. Om texten nu lyder "hej hej hej" är allt som det ska.

Ööhh... va, vad händer egentligen

På port 8888 kör en annan webserver än den vanliga apache-webservern. Den är konfigurerad så att alla filer som slutar på ".xml", eller rättare sagt alla resultat vars MIMEtyp är text/xml, först körs via en XSLT-processor (Xalan i detta fall) innan den levereras till klienten.
 
 
 
2.
  • Rita upp ett diagram över nyheter.xml, enligt modellen som finns angiven i föreläsningsanteckningarna om XSLT.
  • Modifiera filen nyheter.text.xsl för att resultatet från lynx ska bli likadant som filen nyheter.text.html i din katalog. Du bör ta säkerhetskopior OFTA och försöka göra endast en sak i taget eftersom ett litet misstag kan leda till att ingen text returneras över huvud taget, vilket kan vara svårt att debugga. Det kan då vara läge att börja på nytt från en tidigare sparad version

  • Observera att det inte går att få någon snyggt indenterad text med hjälp av Cocoon och stylesheets. Om du vill få en klarare bild av den html-kod som genererats kan du välja att skriva ett "d" i lynx (download file) vilket sparar filen på disk (i den katalog du startade lynx ifrån). Du kan sedan klippa in filen i BBEdit och välja menyvalet Extensions->HTML Debugging->Format för att få en snyggt indenterad text.
     

  • När allt ser bra ut ska du göra snygga transformer för grafiska webbläsare. Modifiera filen nyheter.xsl för att resultatet i Netscape (Obs! Inte Explorer eller Opera, se nedan) ska bli likadant som filen nyheter.html i din webbkatalog

  • Samma tips som ovan gäller här.


     
     

    Del 3: XSLT -> WML (4 p, frivillig uppgift) 

  • Som bonusuppgift ska du göra så att presentationen genererar WML-kod. WML är märkspråket som används i WAP-enheter, t.ex. telfoner.
  • Öppna URLen http://pub.gt.kth.se:8888/pim01/ditt-användarnamn/2D1525/lab2/nyheter.xml i Opera.

  • Förhoppningsvis bör du få upp en bild som ser ut ungefär så här

     
     

  • XML-dokumentet har länkat media=explorer till stylesheetet nyheter.wap.wml som genererar wml-kod. Eftesom Opera anger att den är media=explorer kommer Cocoon generera wml-kod vilken förstås av Opera men inte av Explorer eller Netscape.

  •  

     
    3. Nu är det "bara" att producera ett i ert tycke lämpligt wml-dokument med hjälp av XSLT-transformer av dokumetet nyheter.wap.xsl. Lämpligt är att ha ett ingångskort där alla rubriker finns listade med länkar till kort innehållande själva "brödtexten". Notera att ni inte kan dela upp resultatet på flera decks, utan att allt måste ligga i ett och samma deck. Resultatet bör se ut som filen nyheter.wml som ligger i katalogen ni kopierade över.

    Validering: Observera att ni kan (och ska) validera den resulterade wml-koden. Detta kan göras från en valing valideringstjänst (t.ex. http://www.stg.brown.edu/service/xmlvalid). I detta läge vill ni ju validera output från transformen, inte xml-dokumentet i sig självt. Av en lycklig slump anger dock valideringstjänsten att den är just media=explorer varför den kommer få ett wml-dokument som går att validera!
     

    Examination

    Redovisas på labbtillfälle. För bonuspoäng (2 poäng) krävs att den redovisas senast torsdagen den 4:e oktober. 
     


    ^ Upp till Nadas kurser.
    Sidansvarig: <bjornh@kth.se>
    Senast ändrad 19 september 2001

    Valid XHTML 1.0!