CSS v XSL. H.S. Haringa. Afstudeerscriptie Informatiekunde. Scriptiebegeleider en eerste lezer: Dr. G.M. Welling Tweede lezer: Dr. E.A.

Transcriptie

1 CSS v XSL Afstudeerscriptie Informatiekunde H.S. Haringa Scriptiebegeleider en eerste lezer: Dr. G.M. Welling Tweede lezer: Dr. E.A. Koster Informatiekunde Rijksuniversiteit Groningen Oktober 2005

2 Voorwoord Voor hun onvoorwaardelijke steun tijdens mijn soms moeizame studieperiode wil ik mijn ouders zeer bedanken. Ook mijn hartelijke dank aan Leonie Bosveld mag hier niet ontbreken, zij heeft mijn studie-carrière weer op de rails gebracht en doen inzien dat, toen nog, Alfa-Informatica, de juiste studie voor mij was. Tenslotte wil ik George Welling dank toe zeggen voor het aandragen van het interessante scriptieonderzoek en de prima scriptiebegeleiding. Harmen Haringa Groningen, november

3 Inhoudsopgave VOORWOORD 3 INHOUDSOPGAVE 4 1 INLEIDING 6 2 BESCHRIJVING MARKUP TALEN HTML INTRODUCTIE VERGELIJKINGSPUNTEN XML INTRODUCTIE VERGELIJKINGSPUNTEN XHTML INTRODUCTIE VERGELIJKINGSPUNTEN 20 3 BESCHRIJVING STYLESHEET TALEN CSS XSL XSLT XPATH XSL-FO 27 4 PRINT PREVIEW INLEIDING PRINT PREVIEW & CSS PRINT PREVIEW & XSL PRINT PREVIEW CONCLUSIE 34 5 PDF PDF &CSS PDF & XSL CONCLUSIE PDF 38 6 CONCLUSIE 39 7 LITERATUURLIJST 42 4

4 A ORIGINELE BESTANDEN 46 A.1 WEBSITE 46 A.2 HTML (CHAP1.HTM & CHAP2.HTM) 48 A.2 HTML (CHAP1.HTM & CHAP2.HTM) 49 A.3 STYLESHEET (DEFAULT.CSS) 52 B PRINT PREVIEW BESTANDEN 55 B.2 PRINT PREVIEW & CSS 55 B.2.1 CSS STYLESHEET (DEFAULT_PP.CSS) 55 B.2.2 PRINT PREVIEW BESTANDEN IN WEBBROWSER (CHAP1_PP_CSS.HTM & CHAP2_PP_CSS.HTM) 58 B.3 PRINT PREVIEW & XSL 59 B.3.1 XHTML BESTANDEN (CHAP1_XHTML.HTM & CHAP2_XHTML.HTM) 59 B.3.2 XSL STYLESHEET (PP_XSL.XSL) 61 B.3.3 HTML PRINT PREVIEW BESTANDEN (CHAP1_PP_XSL.HTM & CHAP2_PP_XSL.HTM) 62 B.3.4 PRINT PREVIEW BESTANDEN IN WEBBROWSER (CHAP1_PP_XSL.HTM & CHAP2_PP_XSL.HTM) 63 C PDF BESTANDEN 64 C.1 PDF &CSS 64 C.1.1 CSS STYLESHEET (DEFAULT_PDF.CSS) 64 C.1.2 PDF BESTANDEN (CHAP1_CSS.PDF & CHAP2_CSS.PDF) 65 C.2 PDF & XSL 66 C.2.1 XSL STYLESHEET (PDF_FO.XSL) 66 C.2.2 PDF BESTANDEN (CHAP1_XSL.PDF & CHAP2_XSL.PDF) 70 5

5 Hoofdstuk 1 Inleiding Het online publiceren van teksten heeft een hoge vlucht genomen. Het World Wide Web is zeer geschikt om publicaties te delen met andere geïnteresseerden. Daarnaast zijn de hyperlinks in een webdocument zeer geschikt om de (inhoud van) teksten te linken met aanverwante artikelen op het Internet. Het raadplegen van deze online documenten heeft daarentegen nadelige kanten. Je bent fysiek gebonden aan het beeldscherm van een computer met een Internetverbinding. En het lezen van een tekst op een beeldscherm is niet prettig vanwege de beperkte ruimte op het scherm en het oogonvriendelijke karakter van een monitor. Om deze nadelen te omzeilen printen veel Internet gebruikers webdocumenten op papier om deze op iedere mogelijke locatie en op het gemak te kunnen lezen. De website From Revolution to Reconstruction 1 is in 1994 online gebracht door George Welling. Deze is in 1994, in samenwerking met een groep studenten, begonnen met dit zogenaamde hypertext project. De website geeft een overzicht van de geschiedenis van de Verenigde Staten van de koloniale periode tot op heden. Als basis voor de website dienen een aantal publicaties van The United States Information Agency (USIA). Aan deze publicaties zijn hyperlinks toegevoegd, die verwijzen naar relevante documenten en Internetpagina s. Deze documenten en verwijzingen naar webpagina s worden aan het project toegevoegd door de projectgroep of door mensen buiten de projectgroep. Op deze manier zal de hoeveelheid gegevens op de website zich constant uitbreiden. De hypertext verwijzingen spelen een grote rol in de communicatie tussen de gegevens van deze immer groeiende website. - 1 Welling, George. From Revolution to Reconstruction

6 De gegevens zijn geschikt gemaakt voor webpublicatie door gebruik te maken van HTML (Hypertext Markup Language). Dit is de meest gebruikte taal op het World Wide Web (WWW). Een zeer belangrijke eigenschap van deze taal is de mogelijkheid tot communicatie met pagina s binnen de eigen webpagina of met andere webpagina s op het World Wide Web. De HTML implementatie is in de loop der jaren aangepast en verbeterd door gebruik te maken van een stylesheet en een scripting taal. De publicaties zijn omgezet naar HTML om deze beschikbaar te maken voor de Internet gebruiker en vanwege de uitstekende navigatiemogelijkheden door middel van de hyperlinks. Een naam van een president in een tekst kan bijvoorbeeld worden gelinkt naar een pagina van de website met daarop de persoonlijke gegevens van deze president en de publicaties van zijn hand. Naast deze voordelige aspecten van online publicatie met behulp van HTML komen ook in het geval van deze website de nadelen naar voren van webpublicatie ten opzichte van een papieren versie van de documenten. Een specifiek nadeel van het online raadplegen van de website From Revolution to Reconstruction is de grote lengte van de teksten. Het lezen van lange teksten is vrij lastig, omdat je als lezer steeds gebruik moet maken van de scrollbar. Om deze algemene en specifieke nadelen te omzeilen zullen veel gebruikers van de website de teksten willen afdrukken op papier. Op dit moment bestaat er de mogelijkheid om de webpagina s af te drukken met behulp van de print functie van de webbrowser. Een nadeel van zo n afdruk is dat de extra visuele elementen, te denken valt aan de menubalk en de header, ook op het papier verschijnen. Deze onderdelen van de webpagina zijn zeer geschikt, en meestal noodzakelijk, voor een goede raadpleging van de webpagina s online. Maar voor een papieren versie van de documenten zijn ze onbruikbaar en zelfs storend. Ook beperken ze de ruimte op het papier die beschikbaar is voor de tekst. Vanwege de wens van de gebruikers van de website From Revolution to Reconstruction om de documenten elders te kunnen raadplegen en vanwege de grote lengte van de documenten wil ik hun de mogelijkheid bieden om de publicaties te kunnen afdrukken op een printvriendelijke manier. Hiervoor maken we van iedere webpagina een nieuwe pagina met een opgeschoonde opmaak geschikt voor print, 7

7 een zogenaamde print preview (afdrukvoorbeeld). Daarnaast bieden we de gebruiker de mogelijkheid om de publicaties in een bestand met PDF formaat te kunnen downloaden. Een print preview van een webdocument bestaat uit de gegevens van dit document die op papier van nut zijn. Dus alleen de tekst en eventueel afbeeldingen, maar geen menubalken, headers, footers, hyperlinks ed. Een print preview is als het ware een nieuwe, opgeschoonde versie van het originele document geschikt gemaakt voor afdruk. Een print preview is, evenals het origineel, een webdocument. Het raadplegen en afdrukken van het afdrukvoorbeeld gebeurt met behulp van een Internet browser. PDF (Portable Document Format) is een bestandsformaat dat de exacte weergave van een document beschrijft. Deze lay-out kan zeer summier of tot in het kleinste detail worden beschreven. Een PDF bestand is onafhankelijk. Dit wil zeggen dat de document weergave gelijk is ongeacht het apparaat gebruikt voor raadpleging (PC, GSM, papier etc.). Dit in tegenstelling tot documenten beschreven in een markup taal (bijvoorbeeld onze print preview in HTML opmaak) die op verschillende manieren worden geïnterpreteerd door de verschillende webbrowsers. In een bestand met PDF formaat kan de definitieve inhoud en lay-out van een document worden vastgelegd zonder dat een webbrowser, of enig ander device, er invloed op kan uitoefenen. Voor het realiseren van zowel de print preview versie van de webpagina s als de PDF bestanden maken we gebruik van de stylesheet talen CSS (Cascading StyleSheets) en XSL (extensible Stylesheet Language). We zullen het gebruik en het resultaat van gebruik van CSS en XSL vergelijken. Dit leidt tot de volgende onderzoeksvragen: Welke stylesheet taal, CSS of XSL, is het meest geschikt om een print preview versie te maken van de webpagina s Beknopt overzicht der Amerikaans geschiedenis (1954) op de website From Revolution to Reconstruction? 8

8 Welke stylesheet taal, CSS of XSL, is het meest geschikt om een bestand in PDF formaat te maken van de webpagina s Beknopt overzicht der Amerikaans geschiedenis (1954) op de website From Revolution to Reconstruction? Welke stylesheet taal, CSS of XSL, is na het beantwoorden van bovenstaande vragen het meest geschikt om een printvriendelijke versie te maken van de webpagina s Beknopt overzicht der Amerikaans geschiedenis (1954) op de website From Revolution to Reconstruction? Om deze vragen te kunnen beantwoorden beschrijf ik in hoofdstuk 2 de gebruikte markup talen (HTML, XML en XHTML) en in hoofdstuk 3 de gebruikte stylesheet talen (CSS en XSL). In hoofdstuk 4 vindt u mijn resultaten van het maken van een print preview versie van de webpagina s met gebruik van CSS en XSL, en een vergelijking tussen het gebruik van beide stylesheet talen. In hoofdstuk 5 worden de resultaten beschreven en vergeleken van het maken van een PDF bestand van de webpagina s met behulp van CSS en XSL. In hoofdstuk 6 trek ik een conclusie, naar aanleiding van mijn werkzaamheden aan de print previews en PDF bestanden, over de vraag welke stylesheet taal het meest geschikt is voor het maken van een printvriendelijke versie van de webpagina s op de website From Revolution to Reconstruction. 9

9 Hoofdstuk 2 Beschrijving Markup Talen Om de deelvragen van deze scriptie te kunnen beantwoorden zal ik gebruik van een drietal zogenaamde markup talen: HTML, XML en XHTML. Deze markup talen worden gebruikt om de structuur en verschijning van een (web)document te beschrijven. Bepaalde symbolen (tags en elementen) worden door een programma geïnterpreteerd (bijvoorbeeld een webbrowser) en dit programma zorgt dan voor een juiste weergave van de tekst. De markup in een webdocument kan bijvoorbeeld gegevens bevatten over het lettertype en de positionering van de tekst. Naast de hieronder beschreven markup talen voor webpublicatie bestaan er o.a. ook talen voor teksten en formules. 2 Ik vergelijk de 3 gebruikte markup talen aan de hand van een aantal punten, hieronder vindt u een toelichting. De gebruikte vergelijkingspunten: - beschikbaarheid: is een taal gratis te verkrijgen en te gebruiken, en bestaat de mogelijkheid om de onderliggende structuur van de taal aan te passen - gebruikersgemak: zijn de coderingsregels van de taal eenvoudig te leren en zijn er editors beschikbaar - performance: de snelheid waarmee een webpagina in een browser wordt geopend - structurering content: zijn de inhoudelijke gegevens gescheiden van de visualisatie gegevens - codering: zijn de coderingsregels van de taal strikt en bestaat de mogelijkheid om de syntax van de taal aan te passen - functionaliteit: het aantal functies beschikbaar binnen een taal of beschikbaar via import 2 Wikipedia, the free encyclopedia

10 - stylesheet gebruik: de mogelijkheid om een stylesheet te gebruiken voor de visualisatie eigenschappen van een document - platform compatibiliteit: de mogelijkheid tot gebruik van een taal op de verschillende platformen / besturingssystemen - browser compatibiliteit: de mogelijkheid om een document geschreven in een bepaalde taal in de beschikbare webbrowsers te openen 2.1 HTML Introductie HTML (Hypertext Markup Language) is gebaseerd op SGML (Standard Generalized Markup Language) 3. HTML is door het gemak van gebruik de meest gebruikte markup taal op het web. Een HTML bestand (met extensie.htm of.html) is een simpel tekstbestand, dat kleine markup tags bevat 4. Deze tags vertellen de webbrowser hoe de structuur van de webpagina weer te geven. De weergave van de pagina (bijvoorbeeld kleur en lettertype) wordt beschreven in de attributen van de tags of kan worden geïmplementeerd in een stylesheet, een apart document dat de weergave van de elementen beschrijft. Naast de opmaak van de intradocument structuur schenkt HTML ook veel aandacht aan de communicatie met andere documenten (webpagina s) op het World Wide Web. Hiervoor gebruikt men in HTML links om te verwijzen naar andere pagina s. Op deze manier wordt een web van links (WWW) gecreëerd, dat soms wordt vergeleken met het menselijke brein 5. De versie van HTML die we hier behandelen is HTML Vergelijkingspunten Beschikbaarheid HTML is vrij te gebruiken voor iedereen die op het World Wide Web wil publiceren. De Document Type Definition (DTD) 6 van HTML, geschreven in SGML, die de te 3 Graham, Ian. Introduction to HTML W3schools. Introduction to HTML Castro, E. HTML for the World Wide Web, (Berkeley: Peachpit Press, 2000), Een schematische voorstelling van de eigenschappen van de elementen in een markup document

11 gebruiken tags en attributen beschrijft is beschikbaar op het WWW 7 maar deze kan niet aangepast worden. Gebruikersgemak De regels voor het gebruik van HTML zijn vrij simpel. Een HTML bestand kan worden gemaakt door middel van een text editor (bijvoorbeeld Notepad), maar er zijn ook WYSIWYG 8 programma s beschikbaar (bijvoorbeeld Microsoft Frontpage) 9. Performance De performance van een HTML webpagina is afhankelijk van de netheid van de codering. Een pagina gecodeerd volgens de juiste regels en gebruikmakend van een stylesheet zal een stuk beter presteren dan een pagina die niet geheel volgens de regels is gecodeerd en die de visualisatie eigenschappen van de pagina met behulp van attributen aangeeft. Een stylesheet biedt namelijk de mogelijkheid om redundante gegevens te verwijderen, bijvoorbeeld de font-eigenschappen van iedere paragraaf. Structurering Content In een HTML document bevinden zich zowel de inhoud van de pagina (in de vorm van elementen) als de visualisatie eigenschappen van deze elementen (in de vorm van tags en attributen). Al was dit oorspronkelijk niet de bedoeling van de ontwikkelaars van HTML (zie ook 3.1). Door gebruik te maken van één of meerder stylesheets is het mogelijk om een scheiding tussen de inhoud en de weergave van deze inhoud te maken. Codering De syntax van de codering van een HTML bestand is niet zeer strikt. Dit zorgt er voor dat webbrowsers of andere user agents in de problemen kunnen komen 10. De browsers volgen niet allemaal dezelfde regels voor interpretatie van de gegevens, de 7 Beschikbaar via 8 Staat voor What You See Is What You Get. Een WYSIWYG programma biedt de mogelijkheid om veranderingen in de opmaak direct te tonen op het scherm. Beschikbaar via 9 W3schools, Castro,

12 ene browser is een stuk strikter dan de andere. Het weglaten van een eind-tag kan bijvoorbeeld door de verschillende webbrowsers verschillend worden geïnterpreteerd en kan zo zorgen voor verschillende weergaven van dezelfde pagina. De te gebruiken tags in HTML zijn vaststaand. De gebruiker heeft niet de mogelijkheid om nieuwe tags aan te maken, omdat de DTD niet aan valt te passen. Dit kan in bepaalde situaties voor problemen zorgen, omdat een beperkt aantal tags maar voor een beperkt aantal doeleinden kan worden gebruikt. Er bestaat wel de mogelijkheid om tags uniek te maken door het gebruik van het class attribuut. Men kan deze classes iedere waarde geven en deze kunnen vervolgens voor een unieke weergave van het element zorgen door middel van codering in het stylesheet. Functionaliteit De functionaliteit van HTML is niet zeer groot. Door gebruik te maken van scripts (bijvoorbeeld JavaScript 11 ) kan deze wel worden uitgebreid. Stylesheet Gebruik Het W3C consortium 12 (een samenwerkingsverband van alle belanghebbenden in het bevorderen van het gebruik van het WWW) heeft een stylesheet ontwikkeld voor HTML: CSS (Cascading Stylesheets). Hier dient te worden bij opgemerkt dat het gebruik van andere stylesheet talen ook mogelijk is. HTML documenten kunnen zelf stylesheet regels bevatten of kunnen gebruik maken van een extern stylesheet bestand 13. Het externe gebruik van stylesheets heeft de voorkeur, omdat een verandering in de stylesheet dan geen verandering in het HTML document vergt. 11 W3Schools Beschikbaar via 13 World Wide Web Consortium,

13 Platform Compatibiliteit HTML is op alle bestaande platformen te gebruiken vanwege het feit dat een HTML document een plain text 14 document is. Browser Compatibiliteit Alle bestaande browsers kunnen een HTML bestand aan de webgebruiker tonen. Door de verschillende manieren van interpretatie van de HTML codering door de browsers kan het wel voorkomen dat een pagina op verschillende browsers ook verschillend wordt getoond. 14 Tekstuele gegevens in ASCII formaat, ondersteund door vrijwel iedere applicatie. Beschikbaar via 14

14 2.2 XML Introductie XML (extensible Markup Language) is evenals HTML gebaseerd op SGML. In tegenstelling tot HTML legt XML de nadruk op de beschrijving van gegevens en hun eigenschappen en niet op de weergave van gegevens 15. Een XML document is net als een HTML document een tekstbestand. In een XML document worden evenals bij HTML tags gebruikt om de structuur van de pagina aan te geven. De begin- en eind tag samen met de data tussen deze tags wordt een element genoemd. Een groot verschil met HTML is dat deze tags door de gebruiker worden gedefinieerd, dus niet vaststaan. De structuur van het document wordt gedefinieerd in een DTD (Document Type Definition) (of XML schema). In de DTD worden de legale elementen beschreven en binnen de DTD kan ook een hiërarchie van de elementen worden gedefinieerd. Er zijn standaard DTD s beschikbaar die kunnen worden gebruikt om binnenkomende gegevens te valideren. 16 Als men een plain XML bestand in een browser opent zal men niets anders zien dan de XML code in het document, de browser herkent de eigengemaakte tags niet. Om een goede weergave van de structuur te kunnen krijgen zal men gebruik moeten maken van een stylesheet. Dit stylesheet zal er voor zorgen dat de data opgeslagen in XML zal worden weergegeven met behulp van (X)HTML. Dit is de voornaamste eigenschap van XML: een scheiding wordt aangebracht tussen de data en zijn eigenschappen (in het XML document en de DTD) en de weergave van deze data (door middel van een stylesheet). 17 Een verandering in de data zal geen aanpassing vergen aan de dataweergave en vice versa Vergelijkingspunten Beschikbaarheid 15 W3schools, Beschikbaar via 17 Castro,

15 XML is vrij beschikbaar en de DTD van een XML document kan door de gebruiker worden gedefinieerd. Ook is het mogelijk om standaard DTD s naar eigen inzicht aan te passen. Gebruikersgemak De coderingsregels van XML zijn simpel, maar strikt. Hierdoor kan een gebruiker die eerder gebruik heeft gemaakt van het minder strikte HTML enige problemen ondervinden. XML is als tekstbestand te bewerken met programma s als Notepad, maar deze herkennen een XML document niet als zodanig. Een XML editor biedt de mogelijkheid om de code te vergelijken met de DTD en kan als gevolg daarvan de legale elementen tonen. Door het World Wide Web Consortium wordt gebruik van XMLSpy 18 aangeraden. Performance Al sinds zijn ontstaan wordt van XML gezegd dat deze voor performance problemen zorgt. Hier zijn een aantal redenen voor 19 : 1. XML is te groot: door zijn breedsprakige karakter (denk aan de eigengemaakte tags) kan XML voor problemen zorgen voor applicaties met een zeer kleine bandbreedte. 2. XML is te duur: het genereren en parsen van een XML document kan voor performance problemen zorgen, doordat een XML document van nature complex, dynamisch en text-based is. 3. XML staat geen binaire data toe: XML is een tekstgebaseerde markup taal. Als gevolg hiervan is het gebruiken van binaire data zeer moeilijk. Binaire data is alleen toegestaan in base64 of hexadecimale codering, dit zorgt weer voor de problemen beschreven bij 1 en XML is niet random access: voor een goede validatie van een XML document dient het gehele bestand beschikbaar te zijn. Dit voorkomt bijvoorbeeld een snelle update van de data. 18 Altova Nottingham, M. Orchard, D., BinaryXMLWS.pdf,

16 Structurering Content De gegevens van een webpagina (inhoudelijk en visueel) worden door XML gescheiden in een XML document en DTD enerzijds, en een stylesheet anderzijds. XML is ontworpen om de structurering van een webpagina te verbeteren. Codering Aan de ene kant zijn de coderingsregels van XML zeer strikt 20. Dit voorkomt problemen voor webbrowsers en zorgt er voor dat XML betrouwbaar is om gegevens uit te wisselen, aangezien alle documenten uniform zijn in codering. Aan de andere kant is XML ook zeer flexibel in het gebruik. Zo zijn de tags niet vaststaand, maar worden deze door de gebruiker gemaakt. Op deze manier kunnen de tags door middel van hun naam hun functie duidelijk omschrijven binnen de context. De eigenschappen van de tags worden in de DTD beschreven. Functionaliteit De functionaliteit van XML is niet groot 21. XML is ontwikkeld voor een goede opslag en beschrijving van gegevens, de weergave van de gegevens wordt overgelaten aan bijvoorbeeld HTML. Wel wordt XML veelvuldig gebruikt als basis voor andere toegepaste markup talen in de vorm van modules, bijvoorbeeld Mathematical Markup Language (MathML) 22. XML wordt hiervoor gebruikt vanwege de mogelijkheid om de codering goed gedocumenteerd en overzichtelijk te implementeren. Stylesheet Gebruik Door het simpele feit dat XML geen vaststaande tags heeft is het gebruik van CSS niet aan te raden. Vandaar dat het W3C een stylesheet taal heeft ontwikkeld op basis van XML 23. Deze heet XSL, extensible Stylesheet Language. XSL bestaat uit drie delen: - XSLT: een taal om XML documenten te transformeren - XPath: een taal om delen in een XML document te navigeren 20 Castro, W3schools, W3schools, W3schools,

17 - XSL-FO: een taal om XML documenten te formatteren, bijvoorbeeld voor output naar verschillende media (beeldscherm, mobiele telefoon en papier) In een volgende hoofdstuk vindt u een uitgebreide beschrijving van XSL en zijn onderdelen. Platform Compatibiliteit XML is op alle bestaande platformen te gebruiken vanwege het feit dat een XML document een plain text document is. Browser Compatibiliteit De browser compatibiliteit voor pure XML documenten is niet volledig. Deze zijn dan ook niet ontwikkeld om te zorgen voor de weergave van een document in een webbrowser. Ook het gebruik van een stylesheet (XSLT) is niet bij alle browsers mogelijk (bijvoorbeeld de oudere versies van Internet Explorer en Netscape) Castro,

18 Figuur 1 Verhoudingen tussen een XML document, zijn DTD en een XSL stylesheet XHTML Introductie XHTML (extensible Hypertext Markup Language) is ontworpen door het W3C als een combinatie van de goede structuur van XML documenten en de (browser)toegankelijkheid van HTML documenten. Het is een herformulering van HTML in XML. Vandaar dat het een XML application wordt genoemd. Het verschil met HTML zit in de rigidere syntax van de tags en attributen 26 en de mogelijkheid tot het combineren met XML gebaseerde functionaliteiten Michael Näf, W3schools, World Wide Web Consortium,

19 2.3.2 Vergelijkingspunten Beschikbaarheid XHTML is vrij beschikbaar via het World Wide Web Consortium. De DTD van deze markup taal is gespecificeerd in SGML, er zijn 3 mogelijkheden 28 : - Strict, te gebruiken bij een strikte scheiding tussen visuele en data markup. Visualisatie door middel van een stylesheet. - Transitional, kleine aanpassingen aan de visualisatie buiten de stylesheet om zijn mogelijk. Dit in verband met oudere browsers, incompatibel met een stylesheet. - Frameset, gelijk aan de transitional DTD, maar staat het gebruik van HTML frames in een webpagina toe. Gebruikersgemak De coderingsregels van XHTML zijn vrij simpel en vergelijkbaar met HTML. Alleen is de codering een strikter, voornamelijk op het gebied van de syntax van de tags en attributen. Bestaande HTML bestanden kunnen met behulp van het programma HTML Tidy worden omgezet naar XHTML 29. Het bewerken van een XHTML document kan gebeuren met behulp van een tekstverwerkingsprogramma of een (HTML) editor. Performance Het gebruik van XHTML Strict zal zorgen voor een correcte scheiding van de data en de weergave van de gegevens. Als XML Application is XHTML dan ook easier to process and easier to maintain. 30 Structurering Content De data en de weergave hiervan kan in XHTML worden gescheiden door gebruik te maken van een (externe) stylesheet. Codering 28 W3schools, W3schools, World Wide Web Consortium,

20 De coderingsregels van XHTML zijn strikter dan die van HTML. Dit is met opzet gedaan om de problemen van de browsers met het lakse HTML te voorkomen. XHTML mist de grote flexibiliteit van XML op het gebied van de tagging, omdat het gebruik maakt van HTML tags beschreven in een op SGML gebaseerde en vaststaande DTD. Functionaliteit XHTML maakt gebruik van XML modules, dit maakt het mogelijk om XHTML te simplificeren (bijvoorbeeld voor gebruik op handheld devices) door het aantal elementen te beperken of om de functionaliteit uit te breiden met behulp van XML standaarden (bijvoorbeeld MathML, een module voor wiskundige toepassingen). Stylesheet Gebruik Het gebruik van CSS samen met XHTML is zeer goed mogelijk. Er kunnen alleen problemen optreden bij gebruik met oudere browsers. Vandaar de mogelijkheid om van een transitional DTD gebruik te maken. Ook is het mogelijk om de, op XML gebaseerde, XHTML documenten te bewerken met behulp van XSL. Platform Compatibiliteit XHTML is op alle bestaande platformen te gebruiken vanwege het feit dat een XHTML document een plain text document is. Browser Compatibiliteit XHTML is compatibel met alle nieuwe browsers. XHTML kan alleen niet als text/html naar een browser worden gezonden, vanwege zijn XML eigenschappen. XHTML documenten worden als application/xhtml+xml naar de browser gezonden. 31 XHTML documenten kunnen ook worden gelezen door alle XML enabled toepassingen, zoals mobiele telefoons. 31 World Wide Web Consortium,

21 Hoofdstuk 3 Beschrijving Stylesheet Talen Een stylesheet taal beschrijft de visuele weergave van elementen in een document geschreven in een markup taal (XML, (X)HTML). 32 Door gebruik te maken van een stylesheet wordt de inhoud van een webpagina gescheiden van de visuele presentatie van de elementen. Dit resulteert in een overzichtelijker codering van het markup bestand en een efficiënter beheer van de visuele weergave van de elementen door het stylesheet. Een update van of een verandering aan de visuele presentatie van alle webpagina s kan nu in één keer worden toegepast, namelijk in het stylesheet. 33 De stylesheets die ik heb gebruikt voor het maken van de afdrukvoorbeelden en de PDF bestanden van de webpagina s zijn: CSS (Cascading StyleSheets) en XSL (extensible Stylesheet Language). 3.1 CSS 34 De tags in een HTML bestand waren oorspronkelijk bedoeld om de inhoud van een document te definiëren. Bijvoorbeeld <p> voor een paragraaf en <table> voor een tabel. De visuele weergave van de inhoud kwam voor rekening van de webbrowsers, zonder gebruik te maken van HTML tags voor de definitie van de weergave. Maar de twee belangrijkste browsers (Netscape en Internet Explorer) voegden steeds meer nieuwe tags en attributen toe aan de originele HTML specificatie. En dan met name tags en attributen gericht op de lay-out van een webpagina. Bijvoorbeeld de font tag voor het definiëren van een lettertype van een element. Hierdoor werd het steeds moeilijker om een scheiding aan te brengen tussen de inhoud van een webdocument en de visuele lay-out van de gegevens. Om deze 32 Wikipedia, the free encyclopedia Intensivstation W3schools

22 scheiding toch mogelijk te maken lanceerde het World Wide Web Consortium (W3C) in 1996 CSS voor gebruik bij HTML 4.0. De visuele representatie kan op verschillende manieren worden gespecificeerd met behulp van CSS: - Inline Style: binnen een HTML element - Internal Style Sheet: in de head tag van een HTML bestand - External Style Sheet: in een apart stylesheet bestand - Browser Default: de originele situatie waarbij de browser de visualisatie regelt Van deze heeft de inline style de hoogste en de browser default de laagste prioriteit. Op een document kunnen verschillende stijlen van toepassing zijn, deze vallen als een waterval (cascade is Engels voor waterval) ineen tot een nieuwe stylesheet. Waarbij de stijl met de hoogste prioriteit de visualisatie voor zijn rekening neemt. Het gebruik van een externe stylesheet valt aan te raden, omdat veranderingen aan de lay-out dan alleen in het CSS bestand hoeven worden toegepast. Een uitzondering op het globale externe stylesheet kan worden toegepast door gebruik te maken van een inline style of een internal stylesheet, deze hebben immers een hogere prioriteit. De syntax van CSS bestaat uit drie delen: een selector, een property (eigenschap) en een value (waarde). De selector bestaat uit het HTML element waarvan u de weergave eigenschappen wilt definiëren, de property het attribuut dat u wilt veranderen (bijvoorbeeld font) en value is de waarde die u aan de property wilt geven. Met het onderstaande geeft u bijvoorbeeld aan dat het lettertype in een paragraaf sans serif moet zijn. p {font-family: "sans serif" Als u voor hetzelfde element verschillende stijlen wilt definiëren kunt u gebruik maken van de class selector: p.right {text-align: right p.center {text-align: center 23

23 In het HTML document maakt u gebruik van het class attribute om de juiste stijl te selecteren: <p class="right"> This paragraph will be right-aligned. </p> <p class="center"> This paragraph will be center-aligned. </p> Met behulp van de id selector kunt u dezelfde stijl definiëren voor verschillende elementen: #green {color: green <h1 id="green">some text</h1> <p id="green">some text</p> Het aantal properties dat door middel van CSS kan worden meegegeven aan een HTML element is groot 35, van het declareren van een lettertype tot een gedetailleerde opmaak van een tabel. Voor het maken van een CSS bestand kan gebruik gemaakt worden van een simpel tekstbewerkingsprogramma (bijvoorbeeld Notepad), maar het gebruik van een gespecialiseerd programma valt aan te raden. Een dergelijk programma (bijvoorbeeld Style Master CSS Editor 36 ) biedt een goed overzicht van alle properties en values, en extra s als wizards 37 en templates. Ik heb gebruik gemaakt van HTML-Kit 38 met een CSS module. 35 W3Schools WESTCIV Een programma onderdeel dat u stap voor stap helpt het gewenste resultaat te bereiken. 38 Chami.com

24 3.2 XSL 39 Het W3C begon met de ontwikkeling van XSL in Het eerder uitgegeven CSS werkte namelijk prima met HTML, maar was vrijwel nutteloos voor gebruik met XML. Dit komt doordat de tags in XML niet vastliggen, maar door de gebruiker worden gemaakt. Een browser herkent bijvoorbeeld de XML tag <customer> niet, omdat deze niet gelijk is aan één van de (vaststaande) HTML tags. Het definiëren van de stijl van deze tag met behulp van CSS is dan ook niet mogelijk. XSL bestaat uit drie delen: - XSLT: een taal om XML documenten te transformeren - XPath: een taal om in een XML documenten te kunnen navigeren - XSL-FO: een taal om XML documenten te formatteren Ik heb al deze componenten gebruikt: XSLT voor de transformatie van de HTML bronbestanden naar een opgeschoond afdrukvoorbeeld, XPath voor het selecteren van de juiste elementen en XSL-FO voor het formatteren van de elementen voor het PDF bestand XSLT XSLT kan een XML document, of een XML application zoals XHTML, transformeren naar een ander XML document, maar ook naar een document met een HTML of XHTML opmaak. De belangrijkste transformaties zijn: het verwijderen / toevoegen van elementen (en hun attributen), het sorteren van elementen en het verplaatsen van elementen. Daarnaast zijn er nog talloze andere transformaties mogelijk 41. XSLT is de belangrijkste component van XSL, vandaar dat een XSL stylesheet voornamelijk bestaat uit XSLT codering. Een XSLT bestand bestaat uit één of meer templates (sjablonen). Deze bevatten een aantal transformatie regels die op een bepaald element moeten worden toegepast. 39 W3Schools Perfectxml.com W3Schools

25 Het element in het bronbestand dat moet worden aangepast staat aangegeven in het match attribuut van de template. Deze match gebruikt een XPath expressie om het juiste element te definiëren. Elementen in het bronbestand die niet worden gematched komen niet meer voor in het output bestand. Een verwijzing naar een XSL stylesheet kan worden opgenomen in het bronbestand, zodat de transformatie voor rekening komt van de browser. Dit valt niet aan te raden, omdat niet alle browsers XSL compatible zijn. Het is verstandiger om het bronbestand serverside te transformeren en dan het resulterende bestand naar de browser te sturen. Deze transformatie kan worden uitgevoerd door middel van een ASP 42 script, maar ik heb gebruik gemaakt van de transformatie functie in het programma Altova XMLSpy 43. Zo verkreeg ik na de transformatie van het bronbestand, door middel van een XSL stylesheet, een nieuw bestand met de juiste opmaak XPath XPath maakt gebruik van zogenaamde path expressies om informatie in een gestructureerd XML of XHTML document te vinden. Zoals eerder vermeld wordt XPath gebruikt binnen XSLT om de juiste elementen te vinden voor de transformatie. Een XML-based document bestaat uit een hiërarchische boomstructuur van nodes (knopen). Voorbeelden van deze nodes zijn: elementen, attributen en tekst. De relaties tussen de knopen worden in XPath beschreven als familierelaties (parents, children, siblings). Met behulp van deze relaties kan zeer specifiek worden gezocht naar een bepaalde knoop. De expressie bestaat uit een pad naar het gewenste element. De hiërarchische boomstructuur van het document wordt doorlopen beginnend bij de root. In het onderstaande voorbeeld loopt het pad via de boekwinkel naar het boek met het titel attribuut Catch22. Catch22 ] 42 Microsoft Altova

26 De expressies kunnen worden uitgebreid met functies 44, bijvoorbeeld voor bewerking van strings, numerieke waarden en booleans XSL-FO XSL-FO geeft een beschrijving van de opmaak van XML gegevens voor de output naar het scherm, papier of andere media. Deze beschrijving bevat naast gegevens over de opmaak (format) van de XML data ook een beschrijving van de inhoud (content). Een XSL-FO bestand (.fo) bestaat uit de volgende onderdelen: - fo:root: dit is het allesomvattende XSL-FO element. In dit element wordt ook de XSL-FO namespace vastgelegd o fo:layout-master-set: deze bevat één of meerdere pagina sjablonen (templates) fo:simple-page-master: ieder van deze elementen beschrijft het sjabloon van een enkele pagina o fo:page-sequence: een beschrijving van de pagina inhoud, het masterreference attribuut van dit element verwijst naar het te gebruiken simple-page-master sjabloon. Deze pagina bevat verschillende regions: region-body (de body van de pagina) region-before (de header of kop) region-after (de footer of voetnoot) region-start (de linker zijbalk) region-end (de rechter zijbalk) de inhoud van de pagina wordt gedefinieerd binnen een flow element. Deze inhoud kan bestaan uit: blocks, bijvoorbeeld een paragraaf, tabel of lijst. een line: deze beschrijft de tekstregels in een block 44 W3Schools

27 een inline: dit element definieert de inhoud van de lines: letters, afbeeldingen ed. De zodanig beschreven formatting objects 45 hebben properties waarin de juiste opmaak wordt beschreven. Deze eigenschappen zijn zeer talrijk en daardoor zijn de formatteer mogelijkheden bijna eindeloos. Een uitgebreide beschrijving van de formatting objects en hun properties vindt u op het volgende adres: Hieronder vindt u voor alle duidelijkheid een voorbeeld van een formatting object (block) met twee lettertype eigenschappen: font-size en font-family. <fo:block font-size="12pt" font-family="sans-serif"> This block of output will be written in a 12pt sans-serif font. </fo:block> XSL-FO is gemaakt voor gebruik bij XML-based documenten, vandaar dat de ingebouwde opmaak van HTML tags (bijvoorbeeld headers) niet wordt herkend. Deze moeten opnieuw worden gedefinieerd met behulp van XSL-FO. In het onderstaande voorbeeld ziet u hoe ik gebruik maak van de drie componenten van XSL om de opmaak van een <h1> HTML tag opnieuw te definiëren. Een XSLT template beschrijft de transformatie die moeten worden toegepast op het door een XPath expressie gematchde XHTML element h1. De inhoud van de template bestaat uit een beschrijving in XSL-FO van de juiste opmaak van het element. Het h1 element wordt vervangen door het formatting object block met bepaalde font eigenschappen. Deze eigenschappen zijn gelijk aan die van een h1 element in een HTML document. Het xsl:apply-templates element geeft aan dat de regels moeten worden toegepast op de tekstuele inhoud van de huidige node (xhtml:h1). <xsl:template match="xhtml:h1"> 45 W3Schools

28 <fo:block font-size="16pt" line-height="20pt" weight="bold" space-after="22pt" font-family="verdana"> <xsl:apply-templates select="* text()"/> </fo:block> </xsl:template> 29

29 Hoofdstuk 4 Print Preview 4.1 Inleiding Een print preview (afdrukvoorbeeld) van een webpagina bestaat uit het originele document ontdaan van een aantal elementen. Dit zijn voornamelijk die elementen in een webpagina die specifiek zijn bedoeld voor de navigatie binnen en buiten de webpagina en zijn website. Deze navigatie hulpmiddelen (bijvoorbeeld hyperlinks) zijn zeer praktisch voor gebruik op het Internet of binnen een ander netwerk, maar in een papieren versie van het document zijn ze nutteloos en storend. In het geval van onze website (FRTR) en webpagina s (Beknopt overzicht der Amerikaanse Geschiedenis, versie 1954) gaat het om de volgende elementen die mijns inziens op een geprinte versie misstaan: - de header van de website, bestaande uit een afbeelding en een hyperlink - het linker navigatiemenu van de website - de balk aan de rechterkant van het scherm met daarin de logo s van sponsoren - hyperlinks binnen ieder afzonderlijke webpagina, waaronder de zogenaamde trails Binnen de door mij behandelde webpagina s ben ik geen andere print onvriendelijke elementen tegengekomen, zodanig dat deze in de print preview zouden moeten misstaan. Voorbeelden van mogelijk storende elementen zijn gekleurde tekst en overbodige afbeeldingen. Bij het maken van de afdrukvoorbeelden van de pagina s heb ik gebruik gemaakt van de stylesheet talen CSS en XSL. Aan het einde van dit hoofdstuk vindt u een vergelijking tussen CSS en XSL voor het maken van een print preview in dit specifieke geval. 30

30 4.2 Print Preview & CSS Bij het maken van de afdrukvoorbeelden heb ik me voorgenomen om de codering van het brondocument niet te veranderen, met uitzondering van enkele verwijzingen. Dit om de mogelijkheden van het stylesheet niet tekort te doen en vanwege de voorkeur voor automatisering boven handwerk De veranderingen moeten worden bewerkstelligd door middel van de stylesheet taal. In het geval van CSS heb ik gebruik gemaakt van het originele stylesheet document (default.css) en heb daar enkele veranderingen in aangebracht. Van dit nieuwe stylesheet (default_pp.css) vindt u een becommentarieerde versie in de bijlagen. Bij het aanpassen van het stylesheet om deze geschikt te maken voor een print preview webpagina ben ik een aantal problemen tegengekomen. Maar ik zal eerst de succesvolle aanpassingen beschrijven. Zo zijn de navigatie trails in de webpagina s verwijderd door de CSS class die betrekking heeft op deze elementen aan te passen. Het gaat om de font classes met de id s trail en small. Omdat het in CSS niet mogelijk is om HTML elementen te verwijderen heb ik gebruik gemaakt van de property display om de trails uit het afdrukvoorbeeld te verwijderen. Ik heb de originele properties van deze 2 font classes verwijderd en heb deze vervangen door de nieuwe property display met de value none. Deze tags met hun elementen staan dus nog wel in de HTML codering, maar zijn niet meer zichtbaar. Bij deze verandering van het stylesheet kwam het eerste probleem om de hoek kijken. De font class met het id small wordt namelijk niet alleen gebruikt voor de kleine trails in de webpagina maar ook voor het onderschrift bij een afbeelding. Om het verwijderen van de onderschriften te voorkomen heb ik een nieuwe font class aangemaakt met het id smallimage en heb ik de class verwijzingen bij een onderschrift in het HTML brondocument moeten wijzigen. Bij het weghalen van overige hyperlinks in de documenten kon ik geen gebruik maken van de display: none eigenschap. Van deze anchors willen we namelijk wel de hyperlink eigenschappen verwijderen (verkleuring, onderstreping), maar niet de als anchors aangeduide tekst. Als oplossing hiervoor heb ik alle bestaande anchor 31

31 classes (A) in het CSS bestand verwijderd en deze vervangen door een enkele anchor selector met de properties text-decoration met id none, en color met id black. Op deze manier bestaat de hyperlink nog steeds, maar is deze niet meer als zodanig zichtbaar in het afdrukvoorbeeld. De header, het navigatiemenu en de sponsor balk van de website worden gegenereerd door middel van javascripts. Het grote probleem is nu dat CSS niet de mogelijkheid biedt om javascript tags te verwijderen, zoals we dat bij de trails hebben gezien. Om deze storende elementen te verwijderen zullen we veranderingen moeten toepassen op het brondocument, bijvoorbeeld het handmatig verwijderen van de javascripts. 4.3 Print Preview & XSL De afdrukvoorbeelden die worden gemaakt met behulp van XSL moeten gelijk zijn aan de CSS print previews. Vandaar dat de te verwijderen elementen gelijk zijn. Bij CSS hebben we gezien dat deze stylesheet taal niet in staat is om elementen uit een HTML brondocument te verwijderen, of enig andere handling taak (bijvoorbeeld toevoegen, aanpassen van gegevens). XSL heeft daarentegen een zeer geschikt onderdeel in zijn pakket voor dergelijke taken: XSL Transform (XSLT). Een XSLT bestand bestaat uit één of meer sets of rules, deze worden templates genoemd. De regels binnen zo n sjabloon worden toegepast als een bepaalde knoop, een element, in het brondocument wordt gematcht. Het bestaande CSS bestand (default.css) laat ik staan voor de juiste weergave van de elementen. Het XSL stylesheet neemt de noodzakelijke transformaties van de elementen voor zijn rekening. XSLT is alleen toepasbaar op xml-based documenten zoals XML en XHTML. Voordat ik de juiste templates kon gaan maken was het dus noodzakelijk om het HTML brondocument om te zetten naar een xml-based formaat. Ik heb gekozen voor XHTML, omdat deze markup taal zeer veel overeenkomsten heeft met HTML. XHTML is eigenlijk gelijk aan HTML, alleen zijn de strikte syntax regels van XML van 32

32 toepassing. Voor de conversie heb ik gebruik gemaakt van het programma HTML Tidy 46. De veranderingen aan het brondocument zijn dan: - een nieuwe DOCTYPE definitie - alle tag namen zijn nu in lower case - eventuele onafgesloten elementen in HTML worden nu gesloten, bijvoorbeeld <br/> in plaats van een onafgesloten <BR> Zoals u kunt zien zijn deze veranderingen voornamelijk aanpassingen van het HTML aan de striktere regels van X(HT)ML. Nu de brondocumenten zijn geconverteerd naar XHTML kunnen we gaan beginnen met het opstellen van de templates en hun regels. De eerste match template in het XSL bestand (pp_xsl.xsl) zorgt ervoor dat de gegevens uit het (aangepaste) brondocument worden gekopieerd naar het nieuwe print preview document. De overige templates zorgen ervoor dat de storende elementen uit het bronbestand worden verwijderd. In XSL wordt dit bewerkstelligd door een zogenaamde lege match. Dit wil zeggen dat de te verwijderen knopen worden gematcht (bijvoorbeeld de script tag) met behulp van een XPath expressie, maar daarna worden geen verdere regels opgesteld om toe te passen op de geselecteerde knoop. De expressies in Xpath kunnen zeer selectief worden gemaakt, zodat we het probleem met de font class met het id small kunnen omzeilen. De kleine trails hebben namelijk nog een extra attribuut: color met de waarde red. Ik heb dit attribuut toegevoegd aan de Xpath expressie in het sjabloon, zodat de kleine trails wel worden verwijderd maar de onderschriften bij een afbeelding niet. Naaste de lege match templates heb ik ook een sjabloon gemaakt met daarin een eenvoudige extra regel. De extra regel in de anchor template zorgt ervoor dat de hyperlink eigenschappen van de knoop worden verwijderd, maar dat de inhoud van de node blijft staan. 46 Worldwide Web Consortium. 33

33 Na het opstellen van deze template regels in een XSL bestand heb ik gebruik gemaakt van het programma Altova XMLSpy om het XHTML brondocument te transformeren tot het nieuwe HTML print preview document. U vindt een becommentarieerde versie van het XSL bestand (pp_xsl.xsl) en de resulterende print preview bestanden in de bijlagen. 4.4 Print Preview Conclusie Concluderend kunnen we zeggen dat CSS niet de meest aangewezen stylesheet taal is om een print preview van een webpagina te maken. CSS is zeer geschikt om de visuele lay-out van een website te implementeren, maar voor het maken van een print preview is het ontbreken van een verwijdermogelijkheid zeer nadelig. Zonder gebruik te maken van handmatige aanpassingen zou het maken van een afdrukvoorbeeld, zoals ik dat voor ogen heb, niet eens mogelijk zijn. XSL, en dan met name XSLT, biedt daarentegen alle mogelijkheden om onze brondocumenten succesvol te transformeren naar print preview documenten. De conversie van de brondocumenten naar XHTML is wel een extra handeling die nodig is om gebruik te kunnen maken van XSL. Ook de vrij ingewikkelde syntax van de XSL codering (vooral de XPath uitdrukkingen) spreekt in het nadeel van XSL. En toch gaat mijn voorkeur bij het maken van print preview documenten uit naar XSL (en zijn componenten). Simpelweg omdat met behulp XSL de taak zeer efficiënt en nauwkeurig kan worden aangepakt, in tegenstelling tot CSS dat niet de juiste mogelijkheden heeft. 34

34 Hoofdstuk 5 PDF Naast de mogelijkheid van een print preview van een webpagina willen we de bezoekers van de website ook de mogelijkheid bieden om een PDF bestand met daarin de inhoud van de pagina te downloaden. PDF (Portable Document Format) is een bestandsformaat dat is ontwikkeld door Adobe Systems voor de representatie van documenten onafhankelijk van de originele applicatie software, hardware en het besturingssysteem. Een PDF bestand beschrijft een document (tekst, afbeeldingen ed.) op een device en resolution independent wijze. Dit wil zeggen dat in een PDF bestand de exacte lay-out van een document kan worden vastgelegd, zodanig dat deze op ieder apparaat (PC, GSM, papier etc.) met verschillende resoluties gelijk zal zijn. Dit in tegenstelling tot markup talen die wel afhankelijk zijn van verschillende devices, voornamelijk browsers. Een webpagina geschreven in een markup taal geeft een webbrowser namelijk de bevoegdheid om de visuele representatie van de pagina naar eigen wil in te vullen. Dit resulteert erin dat dezelfde webpagina in verschillende browsers en op verschillende media er verschillend uit zal zien. 47 PDF is ontwikkeld door Adobe Systems 48 en de meest gebruikte PDF reader heet dan ook Adobe Reader. Dit programma is gratis te downloaden van de Adobe website. Ook verschillende open source PDF softwaretoepassingen zijn via het Internet verkrijgbaar. Een PDF bestand bevat de inhoud van de webpagina geschikt gemaakt voor afdruk op papier. De opmaak van een document voor afdruk doeleinden is een stuk lastiger dan die voor een document bedoeld voor representatie in een webbrowser 49. Er komen nu dingen om de hoek kijken als paginanummering, paginamarges en verschillende marges voor rechter en linker pagina s. 47 Wikipedia Adobe Systems, 49 Xml.com