1 CSS v XSL Afstudeerscriptie Informatiekunde H.S. Haringa Scriptiebegeleider en eerste lezer: Dr. G.M. Welling Tweede lezer: Dr. E.A. Koster Informat...
H.S. Haringa Scriptiebegeleider en eerste lezer: Dr. G.M. Welling Tweede lezer: Dr. E.A. Koster
Informatiekunde Rijksuniversiteit Groningen Oktober 2005
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 2005
3
Inhoudsopgave VOORWOORD
3
INHOUDSOPGAVE
4
1 INLEIDING
6
2 BESCHRIJVING MARKUP TALEN
10
2.1 HTML 2.1.1 INTRODUCTIE 2.1.2 VERGELIJKINGSPUNTEN 2.2 XML 2.2.1 INTRODUCTIE 2.2.2 VERGELIJKINGSPUNTEN 2.3 XHTML 2.3.1 INTRODUCTIE 2.3.2 VERGELIJKINGSPUNTEN
C.1 PDF &CSS C.1.1 CSS STYLESHEET (DEFAULT_PDF.CSS) C.1.2 PDF BESTANDEN (CHAP1_CSS.PDF & CHAP2_CSS.PDF) C.2 PDF & XSL C.2.1 XSL STYLESHEET (PDF_FO.XSL) C.2.2 PDF BESTANDEN (CHAP1_XSL.PDF & CHAP2_XSL.PDF)
64 64 65 66 66 70
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’. http://odur.let.rug.nl/~usa/index.htm. 14-3-2005.
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
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
“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
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. http://en.wikipedia.org/wiki/Markup_%28computing%29. 30-82005.
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 2.1.1 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 bevat4. 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 brein5. De versie van HTML die we hier behandelen is HTML 4.01.
2.1.2 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’. http://www.utoronto.ca/webdocs/HTMLdocs/NewHTML/html_intro.html. 8-1-2005. 4 W3schools. ‘Introduction to HTML’. http://www.w3schools.com/html/html_intro.asp. 8-1-2005. 5 Castro, E. HTML for the World Wide Web, (Berkeley: Peachpit Press, 2000), 12. 6 Een schematische voorstelling van de eigenschappen van de elementen in een markup document. http://nl.wikipedia.org/wiki/DTD. 16-9-2005.
11
gebruiken tags en attributen beschrijft is beschikbaar op het WWW7 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 WYSIWYG8 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 komen10. De browsers volgen niet allemaal dezelfde regels voor interpretatie van de gegevens, de 7
Beschikbaar via http://www.w3.org/TR/REC-html40/sgml/dtd.html . 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 http://www.webopedia.com/ . 9 W3schools, http://www.w3schools.com/html/html_intro.asp. 8-1-2005. 10 Castro, 13. 8
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 JavaScript11) kan deze wel worden uitgebreid.
Stylesheet Gebruik Het W3C consortium12 (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 bestand13. Het externe gebruik van stylesheets heeft de voorkeur, omdat een verandering in de stylesheet dan geen verandering in het HTML document vergt.
11
W3Schools. http://www.w3schools.com/js/default.asp. 16-9-2005. Beschikbaar via http://www.w3.org/ . 13 World Wide Web Consortium, http://www.w3.org/TR/REC-html40/present/styles.html#idxaccessibility , 8-1-2005. 12
13
Platform Compatibiliteit HTML is op alle bestaande platformen te gebruiken vanwege het feit dat een HTML document een plain text14 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 http://www.webopedia.com/ .
14
2.2 XML
2.2.1 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 gegevens15. 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.
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 XMLSpy18 aangeraden.
Performance Al sinds zijn ontstaan wordt van XML gezegd dat deze voor performance problemen zorgt. Hier zijn een aantal redenen voor19:
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 2. 4. 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. http://www.altova.com/. Nottingham, M. Orchard, D., http://www.w3.org/2003/08/binary-interchange-workshop/26-beaBinaryXMLWS.pdf , 1-2. 9-1-2005.
19
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 strikt20. 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 groot21. 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 XML23. 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
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)24.
24
Castro, 19.
18
Figuur 1 Verhoudingen tussen een XML document, zijn DTD en een XSL stylesheet
25
2.3 XHTML
2.3.1 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 4.0.1 in XML. Vandaar dat het een XML application wordt genoemd. Het verschil met HTML zit in de rigidere syntax van de tags en attributen26 en de mogelijkheid tot het combineren met XML gebaseerde functionaliteiten.27
25
Michael Näf, http://www.internet-kompetenz.ch/xml/einfuehrung/ , 22-3-2005. W3schools, http://www.w3schools.com/xhtml/xhtml_intro.asp , 9-1-2005. 27 World Wide Web Consortium, http://www.w3.org/MarkUp/#recommendations , 22-3-2005. 26
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 mogelijkheden28: -
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 XHTML29. 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, http://www.w3schools.com/xhtml/xhtml_intro.asp , 9-1-2005. W3schools, http://www.w3schools.com/xhtml/xhtml_howto.asp , 9-1-2005. 30 World Wide Web Consortium, http://www.w3.org/MarkUp/#recommendations , 22-3-2005. 29
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, http://www.w3.org/MarkUp/#recommendations, 22-3-2005.
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 CSS34 De tags in een HTML bestand waren oorspronkelijk bedoeld om de inhoud van een document te definiëren. Bijvoorbeeld
voor een paragraaf en
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
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
In het HTML document maakt u gebruik van het class attribute om de juiste stijl te selecteren:
This paragraph will be right-aligned.
This paragraph will be center-aligned.
Met behulp van de id selector kunt u dezelfde stijl definiëren voor verschillende elementen: #green {color: green}
Some text
Some text
Het aantal properties dat door middel van CSS kan worden meegegeven aan een HTML element is groot35, 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 Editor36) biedt een goed overzicht van alle properties en values, en extra’s als wizards37 en templates. Ik heb gebruik gemaakt van HTML-Kit38 met een CSS module.
35
W3Schools. http://www.w3schools.com/css/css_reference.asp. 12-9-2005. WESTCIV. http://www.westciv.com/style_master/. 12-9-2005. 37 Een programma onderdeel dat u stap voor stap helpt het gewenste resultaat te bereiken. 38 Chami.com. http://www.chami.com/html-kit/. 12-9-2005. 36
24
3.2 XSL39 Het W3C begon met de ontwikkeling van XSL in 199740. 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.
3.2.1 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 mogelijk41.
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
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 ASP42 script, maar ik heb gebruik gemaakt van de transformatie functie in het programma Altova XMLSpy43. Zo verkreeg ik na de transformatie van het bronbestand, door middel van een XSL stylesheet, een nieuw bestand met de juiste opmaak.
3.2.2 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. /boekwinkel/boek[@title=’Catch22’]
De expressies kunnen worden uitgebreid met functies44, bijvoorbeeld voor bewerking van strings, numerieke waarden en booleans.
3.2.3 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:
44
blocks, bijvoorbeeld een paragraaf, tabel of lijst.
een line: deze beschrijft de tekstregels in een block
een inline: dit element definieert de inhoud van de lines: letters, afbeeldingen ed.
De zodanig beschreven formatting objects45 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: http://www.w3schools.com/xslfo/xslfo_reference.asp.
Hieronder vindt u voor alle duidelijkheid een voorbeeld van een formatting object (block) met twee lettertype eigenschappen: font-size en font-family.
This block of output will be written in a 12pt sans-serif font.
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
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).
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
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
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
toepassing. Voor de conversie heb ik gebruik gemaakt van het programma HTML Tidy46. 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 in plaats van een onafgesloten
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. http://www.w3.org/People/Raggett/tidy/.
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
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 Systems48 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 webbrowser49. Er komen nu dingen om de hoek kijken als paginanummering, paginamarges en verschillende marges voor rechter en linker pagina’s.
Ik heb gebruik gemaakt van zowel CSS en XSL om onze webpagina’s om te zetten naar een PDF bestand, hieronder vindt u de resultaten en een vergelijking.
5.1 PDF &CSS De opmaak mogelijkheden voor een PDF bestand zijn talrijk, ik heb besloten om me te beperken tot een document dat in feite gelijk is aan de eerder gemaakte print preview met daaraan toegevoegd paginanummering en de verschillende marges die nodig zijn voor afdruk op papier.
Voor het omzetten van onze webpagina’s naar PDF met behulp van CSS heb ik gebruik gemaakt van het programma Prince50. Dit programma is zeer geschikt voor de taak en wordt door de experts aangeraden51. Een nadeel van dit programma is dat het alleen werkt met op XML gebaseerde markup talen. Nu wil het feit dat we bij het maken van print previews met XSL onze HTML documenten al hebben omgezet naar XHTML. Deze gaan we dan ook gebruiken, maar er moeten een paar kleine aanpassingen worden gedaan. Om de onderschriften bij de afbeeldingen te kunnen behouden zal hun font id moeten worden veranderd naar smallimage, zoals we dat eerder al hebben gedaan bij het maken van een afdrukvoorbeeld met behulp van CSS. Daarnaast moet een XML stylesheet verwijzing worden toegevoegd, het programma voert de taak anders niet goed uit. De (X)HTML stylesheet verwijzing moet worden verwijderd om conflicten te voorkomen.
Een “voordeel” van deze XHTML bestanden is dat de javascripts, die we met behulp van CSS niet konden verwijderen, in een dergelijk bestand niet werken. Dit wil niet zeggen dat ze daadwerkelijk verdwenen of uitgeschakeld zijn.
We maken wat betreft de CSS gebruik van het print preview stylesheet (default_pp.css) met daaraan enkele lijnen code toegevoegd, zodat het document geschikt kan worden gemaakt voor een PDF bestand. U kunt dit nieuwe CSS bestand (default_pdf.css) vinden in de bijlage voorzien van commentaar. Waar het 50 51
kort gezegd op neer komt is dat met toevoeging van 11 lijnen code het nieuwe bestand geschikt is om onze webpagina’s om te zetten naar een PDF bestand binnen de juiste pagina marges en met paginanummering.
5.2 PDF & XSL Zoals eerder vermeld bestaat XSL (Extensible Stylesheet Language) uit drie delen: -
XSLT
-
XPath
-
XSL-FO
Bij het maken van een PDF bestand van de webpagina’s gaan we voor het eerst gebruik maken van XSL-FO (Extensible Stylesheet Language Formatting Objects).
Bij het maken van het PDF bestand met behulp van XSL(-FO) heb ik de XHTML bestanden gebruikt die we ook hebben gebruikt bij de print previews door middel van XSL (XSL-FO maakt ook enkel gebruik van XML bestanden). De stylesheet bestaat uit het print preview bestand (pp_xsl.xsl) met een vrij groot aantal toevoegingen.
De belangrijkste toevoeging is het fo:root element met daarin een pagina sjabloon en een beschrijving van de pagina inhoud. Deze beschrijving bestaat uit een definitie van de paginanummering (xsl-region-after) en een template voor het lettertype en de lettergrootte van de body van het document. Door middel van het xsl:apply-templates element binnen het lettertype element wordt de tekstuele inhoud van ons bronbestand automatisch gegenereerd.
De overige toevoegingen in het bestand zijn match templates waarin de (X)HTML tags opnieuw moeten worden gedefinieerd binnen XSL-FO. Dit is nodig omdat XSLFO is ontwikkeld voor gebruik bij XML bestanden. XML kent geen vaststaande elementen (tags) zoals HTML, de elementen in XML zijn user defined. Dit kent vele voordelen, maar betekent wel dat bij het gebruik van XSL-FO voor het formatteren van een HTML naar een PDF bestand alle HTML tags opnieuw moeten worden gedefinieerd. U vindt het nieuwe stylesheet bestand (pdf_fo.xsl) met uitgebreid commentaar in de bijlagen.
37
5.3 Conclusie PDF Bij een vergelijking van de twee stylesheet talen voor het maken van een “papieren” versie van de webpagina’s in PDF formaat gaat mijn voorkeur uit naar CSS.
Deze taal is allereerst eenvoudiger dan XSL(-FO): de syntax is simpel en CSS heeft weinig code nodig om iets vrij ingewikkelds te programmeren. XSL-FO biedt veel meer mogelijkheden voor het definiëren van de lay-out van een printversie van de webpagina’s, maar is daardoor een stuk gecompliceerder en inefficiënter wat betreft de hoeveelheid code.
Het grootste voordeel van het gebruik van CSS is het feit dat deze geschikt is voor zowel styling van webdocumenten in een browser als het definiëren van een lay-out op papier. Een kleine aanpassing aan de stylesheet voor de webdocumenten is voldoende. Bij het gebruik van XSL-FO moeten de visuele eigenschappen van de tags in het bronbestand opnieuw worden opgesteld, iets dat zeer veel tijd kost en door de syntax ook nog eens zeer lastig is.
Een nadeel van CSS is het gebrek aan een transformatie mogelijkheid met als het beste voorbeeld de scripts die in de code blijven staan. XSL biedt deze mogelijkheid wel in de vorm van XSLT. Zoals hierboven vermeld zijn de mogelijkheden van het XSL pakket een stuk groter dan die van CSS. Maar voor gebruik in dit geval zijn de mogelijkheden van CSS toereikend.
38
Hoofdstuk 6 Conclusie Een artikel52 op de website van het World Wide Web Consortium wordt op de volgende manier samengevat:
“Use CSS when you can, use XSL when you must.”
Als reden voor deze uitspraak geven ze het gemak waarmee CSS kan worden geleerd, gebruikt en onderhouden in tegenstelling tot het vrij ingewikkelde XSL. Ook zijn er meer en betere editors beschikbaar voor CSS dan voor XSL. Het gebruik van XSL wordt alleen dan aangeraden als er transformaties moeten worden gedaan. Het simplistische CSS heeft veel voordelen, maar schiet in dit geval tekort.
Mijn poging om printvriendelijke versies te leveren van de overzichtsdocumenten, in de vorm van een print preview en PDF bestand, is een goed voorbeeld waarbij het noodzakelijke gebruik van XSL van toepassing is.
Bij het maken van de print preview versies van de originele documenten kwam de keuze voor XSL het duidelijkst naar voren. XSL Transformations was zeer geschikt om de storende visuele elementen in de brondocumenten te verwijderen of aan te passen. CSS daarentegen biedt niet de mogelijkheid om een volledig correcte print preview versie te maken. Om het gewenste resultaat te bereiken zullen er extra handmatige aanpassingen moeten worden gedaan aan de codering van de documenten. De aanpassingen die wel konden worden gedaan met CSS zijn effectief, maar mijn inziens toch een soort lapmiddelen.
In mijn conclusie van hoofdstuk 5 gaf ik mijn voorkeur aan CSS voor het maken van de PDF bestanden van de originele documenten. Het gebruik van CSS was een stuk efficiënter en effectiever dan het gebruik van XSL(-FO), waarbij de HTML tags opnieuw moesten worden gedefinieerd. Het is belangrijk hierbij op te merken dat
52
Worldwide Web Consortium. http://www.w3.org/Style/CSS-vs-XSL. 3-10-2005.
39
CSS nog steeds niet alle elementen op de juiste manier weet te verwijderen of aan te passen: handmatige aanpassingen zijn nog steeds nodig en het “verdwijnen” van de javascript elementen valt ook niet toe te schrijven aan CSS. CSS wint door zijn eenvoud niet door zijn volledigheid.
Mijn afsluitende antwoord op de vraag welke stylesheet taal, CSS of XSL, het meest geschikt is om een printvriendelijke versie te maken van de webpagina’s “Beknopt overzicht der Amerikaans geschiedenis (1954)” op de website “From Revolution to Reconstruction” is tweeledig. Voor het maken van een print preview versie van de pagina’s is XSL(T) mijn eerste keus, vanwege de volledige en correcte transformaties die mogelijk zijn. In het geval van de PDF bestanden kan ik niet om CSS heen, maar toch blijft de manier waar op het resultaat is bereikt niet bevredigend. Vandaar dat ik een gecombineerd gebruik van CSS en XSL voorstel voor het maken van de PDF bestanden. XSL zou kunnen worden ingezet voor de transformatie van het bronbestand naar een opgeschoond (print preview) webdocument. Voor de verdere conversie naar een PDF bestand zou het eenvoudige maar efficiënte CSS zeer geschikt zijn.
Bij het maken van de print previews met behulp van XSL heb ik van ieder webdocument een nieuwe printvriendelijke versie gemaakt. Dit houdt in dat het aantal documenten dat beheert dient te worden in feite wordt verdubbeld. Om het beheer van de website zo efficiënt mogelijk te houden bestaat er ook de mogelijkheid om de afdrukvoorbeelden automatisch te laten genereren in het browser venster. Dit kan door een XSL stylesheet verwijzing op te nemen in het XHTML bestand of door gebruik te maken van scripttalen. De eerste oplossing valt niet aan te raden omdat er nog steeds browsers zijn die geen XSL ondersteunen. De scripttalen kunnen zowel aan de client side als de server side worden gebruikt. Waarbij het gebruik aan de client side opnieuw afhankelijk is van een browser met XSL ondersteuning. De beste oplossing is in mijn ogen dan ook het gebruik van ASP code53 aan de server side die automatisch de print preview in het browser venster zal doen verschijnen. De originele bestanden zullen bij gebruik van XSL wel altijd moeten worden omgezet naar XHTML.
53
World Wide Web Consortium. http://www.w3schools.com/xsl/xsl_server.asp. 3-11-2005.
40
Toekomstig onderzoek op het terrein van het printvriendelijker maken van webpagina’s zou kunnen bestaan uit het maken van een printer friendly functie in een webbrowser. Deze functie zou door het herkennen van tags en code patronen in een willekeurige webpagina een aantal storende elementen in de webpagina kunnen verwijderen. Het herkennen en verwijderen van specifieke elementen in de codering (bijvoorbeeld anchor tags) zou mijn inziens zeer goed mogelijk zijn. Maar naar aanleiding van mijn onderzoek durf ik te zeggen dat een perfecte aanpassing van een webdocument onmogelijk is door de verschillende manieren waarop de storende elementen in de codering worden opgenomen. Er zullen altijd verkeerde elementen worden verwijderd en storende elementen blijven bestaan.
41
Hoofdstuk 7 Literatuurlijst -
Welling, George. ‘From Revolution to Reconstruction … and what happened afterwards’. (2004). [webpagina]. Geraadpleegd 14 maart 2005. Beschikbaar via http://odur.let.rug.nl/~usa/index.htm .
-
Wikipedia, the free encyclopedia. ‘Markup (computing)’. (2005): 1pars. [webpagina]. Geraadpleegd 30 augustus 2005. Beschikbaar via http://en.wikipedia.org/wiki/Markup_%28computing%29.
-
Graham, Ian. ‘Introduction to HTML’. ‘Introduction to HTML’. (1998): 4 pars. [webpagina]. Geraadpleegd 8 januari 2005. Beschikbaar via http://www.utoronto.ca/webdocs/HTMLdocs/NewHTML/html_intro.html.
-
W3schools, ‘Introduction to HTML’. ‘HTML Tutorial’. (1995-2005): 1 pars. [online tutorial]. Geraadpleegd 8 januari 2005. Beschikbaar via http://www.w3schools.com/html/html_intro.asp.
-
Castro, E. HTML for the World Wide Web. 4e druk. Berkeley: Peachpit Press, 2000.
-
Wikipedia, the free encyclopedia. ‘Document Type Definition’. (2005): 3 pars. [webpagina]. Geraadpleegd 16 september 2005. Beschikbaar via http://nl.wikipedia.org/wiki/DTD.
-
World Wide Web Consortium. ‘Introduction to HTML 4’. (1995-2005): 1 pag. [online tutorial]. Geraadpleegd 8 januari 2005. Beschikbaar via http://www.w3.org/TR/REC-html40/present/styles.html#idx-accessibility.
-
Webopedia. The #1 online encyclopedia dedicated to computer technology. ‘WYSIWYG’. (2005): 3 pars. [webpagina]. Geraadpleegd 8 januari 2005. Beschikbaar via http://www.webopedia.com/TERM/W/WYSIWYG.html.
-
World Wide Web Consortium. ‘JavaScript Tutorial’. (1995-2005). [online tutorial]. Geraadpleegd op 16 september 2005. Beschikbaar via http://www.w3schools.com/js/default.asp.
-
World Wide Web Consortium. ‘W3C Recommendation. Stylesheets.’ (19952005): 2 pars. [webpagina]. Geraadpleegd op 8 januari 2005. Beschikbaar via http://www.w3.org/TR/REC-html40/present/styles.html#idx-accessibility. 42
-
Webopedia. The #1 online encyclopedia dedicated to computer technology. ‘plain text’. (2005): 1 pars. [webpagina]. Geraadpleegd op 8 januari 2005. Beschikbaar via http://www.webopedia.com/TERM/p/plain_text.html.
-
World Wide Web Consortium. ‘XML Tutorial’. (1995-2005). [online tutorial]. Geraadpleegd op 8 januari 2005. Beschikbaar via http://www.w3schools.com/xml/.
-
Nottingham, M. Orchard, D. ‘On XML Optimization’. ‘BEA Systems Position Paper, Binary Interchange`of XML Workshop’. 5 pag. [online PDF bestand]. Geraadpleegd 9 januari 2005. Beschikbaar via http://www.w3.org/2003/08/binary-interchange-workshop/26-beaBinaryXMLWS.pdf.
-
World Wide Web Consortium. ‘XML Tutorial’. (1995-2005): 1 pars. [online tutorial]. Geraadpleegd 2 februari 2005. Beschikbaar via http://www.w3schools.com/xml/xml_whatis.asp/.
-
World Wide Web Consortium. ‘W3C Tutorial’. (1995-2005): 1 pars. [online tutorial]. Geraadpleegd op 14 maart 2005. Beschikbaar via http://www.w3schools.com/w3c/w3c_other.asp.
-
World Wide Web Consortium. ‘XSLT Tutorial’ (1995-2005). [online tutorial]. Geraadpleegd op 9 januari 2005. Beschikbaar via http://www.w3schools.com/xsl/default.asp/.
-
Näf, M. ‘Internet Kompetenz’. ‘Einführung in XML, DTD und XSL’. 1 afb. [online afbeelding]. Geraadpleegd 22 maart 2005. Beschikbaar via http://www.internet-kompetenz.ch/xml/einfuehrung/.
-
World Wide Web Consortium. ‘XHTML Tutorial’. (1995-2005): 1 pars. [online tutorial]. Geraadpleegd op 9 januari 2005. Beschikbaar via http://www.w3schools.com/xhtml/xhtml_intro.asp.
-
World Wide Web Consortium. ‘Hypertext Markup Language (HTML) Home Page’. (1995-2005): 1 pars. [webpagina]. Geraadpleegd op 22 maart 2005. Beschikbaar via http://www.w3.org/MarkUp/#recommendations.
-
World Wide Web Consortium. ‘XHTML Tutorial’. (1995-2005): 1 pars. [online tutorial]. Geraadpleegd op 9 januari 2005. Beschikbaar via http://www.w3schools.com/xhtml/xhtml_howto.asp.
43
-
Wikipedia, the free encyclopedia. ‘Stylesheet language’. (2005): 1 pars. [webpagina]. Geraadpleegd op 5 september 2005. Beschikbaar via http://en.wikipedia.org/wiki/Stylesheet.
-
Intensivstation. ‘CSS HOW-TO’. 2 pars. [webpagina]. Geraadpleegd op 5 september 2005. Beschikbaar via http://www.intensivstation.ch/en/css/1.html.
-
World Wide Web Consortium. ‘CSS Basic’. (1995-2005). [online tutorial]. Geraadpleegd op 5 september 2005. Beschikbaar via http://www.w3schools.com/css/css_intro.asp.
-
Wrox Press Limited. ‘XSLT Programmers Reference’. (1999): 1pars. [webpagina]. Geraadpleegd op 12 september 2005. Beschikbaar via http://www.perfectxml.com/wp/3129/31290105.htm.
-
World Wide Web Consortium. ‘XPath Tutorial’. (1995-2005). [online tutorial]. Geraadpleegd op 12 september 2005. Beschikbaar via http://www.w3schools.com/xpath/xpath_functions.asp.
-
World Wide Web Consortium. ‘XSLFO Tutorial’. (1995-2005). [online tutorial]. Geraadpleegd op 12 september 2005. Beschikbaar via http://www.w3schools.com/xslfo/xslfo_reference.asp.
-
Wikipedia, the free encyclopedia. ‘Portable Document Format’. (2005): 5 pars. [webpagina]. Geraadpleegd op 28 augustus 2005. Beschikbaar via http://en.wikipedia.org/wiki/Pdf.
-
Wium Lie, Hakon. Day, Michael. ‘Printing XML: Why CSS Is Better Than XSL’. (2005): 2 pars. [webpagina]. Geraadpleegd op 28 augustus 2005. Beschikbaar via ://www.xml.com/pub/a/2005/01/19/print.html.
-
Wold Wide Web Consortium. ‘CSS & XSL’. (1999): 1 pars. [webpagina]. Geraadpleegd op 3 oktober 2005. Beschikbaar via http://www.w3.org/Style/CSS-vs-XSL.
-
Hull, S. ‘PHP and ASP.NET Go Head-to-Head’. 1 pag. [online artikel]. Geraadpleegd 10 januari 2005. Beschikbaar via http://www.oracle.com/technology/pub/articles/hull_asp.html.
-
WRENSOFT. ‘PHP vs ASP vs JavaScript vs CGI’. 1 pag. [online artikel]. Geraadpleegd 22 maart 2005. Beschikbaar via http://www.wrensoft.com/zoom/benchmarks.html.
-
Zimmerman, S. Evans, T. ‘Understanding Web Technologies’. Building an Intranet with Windows NT 4. 1 afb. [online afbeelding]. Geraadpleegd op 22 44
maart 2005. Beschikbaar via http://www.vanwijk.com/%3D%20Bookz%20%3D/Building%20An%20Intranet%20With%20Windows%20Nt%204/f1-4.gif . -
World Wide Web Consortium. ‘XSLT Tutorial’. (1995-2005). [online tutorial]. Geraadpleegd op 3 november 2005. Beschikbaar via http://www.w3schools.com/xsl/xsl_server.asp.
45
Bijlage A Originele bestanden De HTML bestanden zijn door de grote hoeveelheid tekst te lang om volledig in de bijlagen op te nemen. Ik heb die delen van de HTML bestanden opgenomen die van belang zijn voor dit onderzoek. Ook zult u niet alle hoofdstukken van het overzicht terugvinden in de bijlagen. Ik heb ervoor gekozen om slechts de eerste twee hoofdstukken en aanverwante bestanden te tonen, omdat aan de hand van deze hoofdstukken alle mogelijke problemen en oplossingen kunnen worden getoond.
A.1 Website Hieronder vindt u een afbeelding van de website “From Revolution to Reconstruction” met bovenaan de header in de vorm van een afbeelding, links de menubalk en rechts op het scherm een sponsorbalk. Andere karakteristieke elementen voor het onderzoek zijn de trails boven en onder de titel van het overzicht en hoofdstuk.
46
Een afbeelding op de webpagina van hoofdstuk 1 met onderschrift.
47
De footer van de pagina met daarboven een trail.
De anchors in hoofdstuk 2 die moeten worden aangepast.
48
A.2 HTML (chap1.htm & chap2.htm) Hieronder vindt u de elementen van de HTML codering van het bestand chap1.htm die van belang zijn voor het onderzoek. De becommentariëring in het bestand is van de hand van de originele makers. De dikgedrukte HTML codering genereert de visuele elementen in de webpagina die in de print preview en het PDF bestand niet wenselijk zijn. <SCRIPT LANGUAGE="Javascript" SRC="../../java/framebuster.js"> <META NAME="description" CONTENT="USA-project, outlines-area, Beknopt overzicht der Amerikaanse Geschiedenis by the United States Information Agency"> <META NAME="keywords" CONTENT="USA-project, education, American History"> From Revolution to Reconstruction: Outlines: Amerikaanse Geschiedenis (1954): Het Koloniale Tijdperk (1/7)
Hieronder vindt u de elementen van de HTML codering van het bestand chap2.htm die van belang zijn voor het onderzoek. De becommentariëring in het bestand is van de hand van de originele makers. De dikgedrukte HTML codering genereert de visuele elementen in de webpagina die in de print preview en het PDF bestand niet wenselijk zijn. In het geval van hoofdstuk 2 zijn dit de hyperlinks in de tekst. De javascipts en trails zijn gelijk aan die in het bestand chap1.htm.
<SCRIPT LANGUAGE="Javascript" SRC="../../java/framebuster.js"> <META NAME="description" CONTENT="USA-project, outlines-area, Beknopt overzicht der Amerikaanse Geschiedenis by the United States Information Agency"> <META NAME="keywords" CONTENT="USA-project, education, American History"> From Revolution to Reconstruction: Outlines: Amerikaanse Geschiedenis (1954): De Strijd om de Onafhankelijkheid (2/7)
"Wij achten het een onbetwistbaar feit dat alle mensen gelijk geschapen zijn, dat zij door hun Schepper met bepaalde, onvervreemdbare rechten begiftigd zijn en dat hiertoe o.a. het recht op het eigen leven, vrijheid en het nastreven van geluk behoren."
John Adams, de tweede President van de Verenigde Staten, bereikte die rijpe leeftijd waarop men zich gaarne overgeeft aan wijsgerige overpeinzingen over wat in de bloei van het leven daaraan kleur pleegt te geven.
Bijlage B Print Preview bestanden B.2 Print Preview & CSS Ik voeg geen bijlagen van de HTML documenten gebruikt bij de constructie van de print preview. Deze zijn namelijk gelijk op enkele aangepaste verwijzingen en twee veranderingen van class naam (smallimage) in hoofdstuk 1 na. De dikgedrukte codering bestaat uit aangepaste of toegevoegde code en becommentariëring van mijn hand.
B.2.1 CSS Stylesheet (default_pp.css) BODY { FONT-SIZE: 11pt; FONT-FAMILY: Verdana, Arial, Helvetica, Sans-Serif; BACKGROUND-COLOR: white } IMG { MARGIN-TOP: 7px; MARGIN-BOTTOM: 7px; MARGIN-RIGHT: 10px } /* Alle anchor tags uit het originele bestand zijn verwijderd en vervangen door een enkele anchor selector met de properties TEXT-DECORATION: none; COLOR: black. De link eigenschappen van een anchor blijven wel bestaan, maar zijn niet zichtbaar in een print preview. */ A { TEXT-DECORATION: none; COLOR: black } H1 { FONT-WEIGHT: bold; FONT-SIZE: 16pt; COLOR: black; FONT-FAMILY: Verdana, Arial, Helvetica, Sans-Serif } H2 { FONT-WEIGHT: bold; FONT-SIZE: 14pt; COLOR: #555555; FONT-FAMILY: Verdana, Arial, Helvetica, Sans-Serif } H3 { FONT-SIZE: 13pt; COLOR: black; FONT-FAMILY: Verdana, Arial, Helvetica, Sans-Serif } .pres-head { DISPLAY: inline; FONT-FAMILY: Verdana, Arial, Helvetica, Sans-Serif } TD { FONT-SIZE: 11pt; VERTICAL-ALIGN: top; COLOR: black; FONT-FAMILY: Verdana, Arial, Helvetica, Sans-Serif } TABLE { BORDER-RIGHT: medium none; BORDER-TOP: medium none; VERTICAL-ALIGN: top; BORDER-LEFT: medium none; COLOR: black; BORDER-BOTTOM: medium none;
55
FONT-FAMILY: Verdana, Arial, Helvetica, Sans-Serif } .main { BORDER-RIGHT: medium none; BORDER-TOP: medium none; VERTICAL-ALIGN: top; BORDER-LEFT: medium none; WIDTH: 718px; COLOR: black; BORDER-BOTTOM: medium none; FONT-FAMILY: Verdana, Arial, Helvetica, Sans-Serif } /* De trail en small classes van font halen we uit de print preview door middel van DISPLAY: none. */ .trail { DISPLAY: none } .small { DISPLAY: none } /* De smallimage class is aangemaakt om een bijschrift bij een afbeelding te kunnen tonen. Eerder werd dit gedaan door de font class small, maar deze hebben we als het ware uitgezet. De juiste instanties van class small moeten in het HTML documenten worden veranderd naar class smallimage. */ .smallimage { FONT-SIZE: 8pt; FONT-FAMILY: Verdana, Arial, Helvetica, Sans-Serif } .normal { FONT-SIZE: 11pt; FONT-FAMILY: Verdana, Arial, Helvetica, Sans-Serif } LI { FONT-SIZE: 10pt; COLOR: black; FONT-FAMILY: Verdana, Arial, Helvetica, Sans-Serif; TEXT-ALIGN: justify } .linklist { FONT-SIZE: 10pt; LIST-STYLE-IMAGE: url(../icons/extern.jpg); FONTFAMILY: Verdana, Arial, Helvetica, Sans-Serif } .right { TEXT-ALIGN: right } PRE { FONT-SIZE: 10pt; FONT-FAMILY: Courier, monospace } SELECT { FONT-WEIGHT: normal; FONT-SIZE: 10px } INPUT { FONT-WEIGHT: normal; FONT-SIZE: 11px } P { TEXT-ALIGN: justify } .text { TEXT-ALIGN: justify } .versions { FONT-SIZE: 10pt; COLOR: blue; FONT-FAMILY: Verdana, Arial, Helvetica, Sans-Serif } .next { FONT-SIZE: 8pt; COLOR: red; FONT-FAMILY: Verdana, Arial, Helvetica, Sans-Serif }
B.2.2 Print Preview Bestanden in Webbrowser (chap1_pp_css.htm & chap2_pp_css.htm) Van de resulterende print preview bestanden voeg ik alleen afbeeldingen toe die de veranderingen tonen ten opzichte van het originele bestand. Deze veranderingen houden in dat de trails en anchors zijn verdwenen. De visuele elementen gegenereerd door de javascripts zijn niet zichtbaar, maar zijn wel degelijk nog steeds aanwezig, de witte balk links is daar een voorbeeld van.
58
Ook de anchors in hoofdstuk 2 zijn niet meer zichtbaar, maar nog wel degelijk aanwezig. De onderlijning en verkleuring van de hyperlink tekst is verdwenen.
B.3 Print Preview & XSL Van de XHTML bestanden gemaakt met behulp van HTML Tidy geef ik alleen het eerste deel van hoofdstuk 1. De veranderingen ten opzichte van het originele HTML document zijn daar het meest duidelijk. Van de print preview bestanden toon ik ook alleen de meest interessante delen van de HTML codering en van de verschijning in het browser venster. Opnieuw zijn de meest interessante delen van de codering dikgedrukt.
<script type="text/javascript" language="Javascript" src="framebuster.js"> <meta name="description" content="USA-project, outlines-area, Beknopt overzicht der Amerikaanse Geschiedenis by the United States Information Agency" /> <meta name="keywords" content="USA-project, education, American History" />
59
From Revolution to Reconstruction: Outlines: Amerikaanse Geschiedenis (1954): Het Koloniale Tijdperk (1/7) <script type="text/javascript" language="JavaScript" src="nheader.js"> FRtR > Outlines > Amerikaanse Geschiedenis (1954) > Het Koloniale Tijdperk
Beknopt overzicht der Amerikaanse Geschiedenis (1954)
B.3.3 HTML Print Preview Bestanden (chap1_pp_xsl.htm & chap2_pp_xsl.htm) In vergelijking met het XHTML bestand van B.3.1 zijn de dikgedrukte “storende” elementen in hoofdstuk 1 verwijderd door middel van het XSL stylesheet. <meta name="description" content="USA-project, outlines-area, Beknopt overzicht der Amerikaanse Geschiedenis by the United States Information Agency"> <meta name="keywords" content="USA-project, education, American History">From Revolution to Reconstruction: Outlines: Amerikaanse Geschiedenis (1954): Het Koloniale Tijdperk (1/7)
Beknopt overzicht der Amerikaanse Geschiedenis (1954)
1/7 Het Koloniale Tijdperk
"Nimmer tevoren hebben hemel en aarde er in zo grote harmonie naar gestreefd de mens een woon te scheppen."
Ook de anchor tags in hoofdstuk 2 rond “De Onafhankelijkheidsverklaring” en “John Adams” zijn verwijderd.
De Onafhankelijkheidsverklaring 4 juli, 1776
John Adams, de tweede President van de Verenigde Staten,
62
B.3.4 Print Preview Bestanden in Webbrowser (chap1_pp_xsl.htm & chap2_pp_xsl.htm) Alle storende visuele elementen uit het originele bestand zijn verwijderd in het print preview bestand van hoofdstuk 1.
De anchors in hoofdstuk 2 zijn uit de codering en dus ook van het scherm gehaald.
63
Bijlage C PDF Bestanden De XHTML bestanden die worden gebruikt bij zowel CSS en XSL zijn vrijwel gelijk aan die van B.3.1. De enige verandering is bij het gebruik van CSS waar de class “small” bij een onderschrift van een afbeelding zijn veranderd naar de class “smallimage”.
C.1 PDF &CSS C.1.1 CSS Stylesheet (default_pdf.css) U vindt hieronder alleen het eerste deel van het stylesheet waar de nieuwe code is toegevoegd. Toevoegingen zijn dikgedrukt. Deze zorgen voor de juiste block weergave en paginanummering. body { display: block; page: main; counter-reset: page 1 } @page main { @bottom-right-corner { content: counter(page) } } body { font-size: 11pt; font-family: verdana, arial, helvetica, sans-serif; background-color: white } img { margin-top: 7px; margin-bottom: 7px; margin-right: 10px } a { text-decoration: none; color: black }
64
C.1.2 PDF bestanden (chap1_css.pdf & chap2_css.pdf) Hieronder vindt u een afbeelding van de eerste pagina van hoofdstuk 1 gemaakt met behulp van CSS en Prince. De blokweergave en paginanummering (rechtsonder) is duidelijk zichtbaar. Linksonder staat de naam van het shareware programma Prince.
65
C.2 PDF & XSL C.2.1 XSL Stylesheet (pdf_fo.xsl) Het commentaar staat in de codering. <xsl:stylesheet version="2.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" :xhtml="http://www.w3.org/1999/xhtml" xmlns:fo="http://www.w3.org/1999/XSL/Format">
C.2.2 PDF Bestanden (chap1_xsl.pdf & chap2_xsl.pdf) Hieronder vindt u een afbeelding van de eerste pagina van hoofdstuk 1 gemaakt met behulp van XSL(-FO) en XSL Formatter. De paginanummering (middenonder) en pagina-indeling is duidelijk zichtbaar, ondanks de storende elementen van het shareware programma XSL Formatter.
