Tutorial: Poem Publishers, Inc. goes to Web

1. Tutorial: Poem Publishers, Inc. goes to Web Käytännön kokemuksia verkkojulkaisemisesta Anne Honkaranta, Virpi Lyytikäinen, Pasi Tiitinen Jyväskylän yliopisto, Digitaalinen media inSGML-projekti Jyväskylän yliopisto/AHo, VLy, PTi

2. English version • Experiences of using XSLT and DOM http://insgml.it.jyu.fi/www/Runodemo/Experiences.html Jyväskylän yliopisto/AHo, VLy, PTi

3. Sisältö • Runokustannus Oy • Runot • Julkaisuympäristö • Muunnokset • Muunnostekniikat • Muunnokset palvelin/asiakas -ympäristössä • Muunnokset Runokustannus Oy:ssä • Kohdattuja haasteita • Mitä opittiin Jyväskylän yliopisto/AHo, VLy, PTi

4. Runokustannus Oy • Kuvitteellinen yritys • demonstroi muunnosten tarpeellisuutta, muunnostekniikoita, ja työkalujen käyttöä • yksinkertaiset dokumentit • Kustantaa runoja WWW:ssä • Runot kirjoitetetaan XML-muodossa runo.dtd:n mukaisesti • Runoista voidaan muodostaa kokoelmia Jyväskylän yliopisto/AHo, VLy, PTi

5. Yleiskuva julkaisuprosessista • Runojen lukija: • WWW-selain • CSS-tyylisivut • XHTML/HTML DTD • Sisällön tuottaja • XML editori • Runo DTD WWW -palvelin dokumenttien muunnokset Jyväskylän yliopisto/AHo, VLy, PTi

6. Runo.dtd Jyväskylän yliopisto/AHo, VLy, PTi

7. Julkaisuympäristö • Microsoft IIS server v. 5.0 • Jscript, VBScript • ASP 3.0 • DOM II • Internet Explorer 5.5 tai uudempi • CSS Level 2 • MSXML 3.0 Jyväskylän yliopisto/AHo, VLy, PTi

8. Muunnokset • Muunnos voi kohdistua dokumentin • formaattiin • rakenteeseen / tietomääritykseen (skeemaan) • sisältöön • tulostuvaan osaan (suodatetaan osa pois) • kaikiin yllämainittuihin • Muunnos  conversion, filtering, transformation Jyväskylän yliopisto/AHo, VLy, PTi

9. Miksi muunnoksia tarvitaan? • Kirjoittajat/sisällön tuottajat tarvitsevat sisältöorientoituneen DTD:n • Erilaiset päätelaitteet yleistyvät • Dokumentteja hallinnoitaessa tarvitaan optimaalisin prosessoitava muoto dokumentista --> kolmivaiheinen julkaisuprosessi kirjoittaminen -- prosessointi -- tulostus Jyväskylän yliopisto/AHo, VLy, PTi

10. Tapahtumapohjaiset muunnostekniikat Puuperustaiset muunnotekniikat Esimerk-kejä muunnos-kielistä • SAX-Simple API for XML • Omnimark • DOM (document object model) — API • Balise • XSLT language Edut / haitat • nopea, käyttää laskentaresursseja tehokkaasti • tulosdokumentin rakennetta (skeemaa) ei voi kovin hyvin kontrolloida • jäsennyspuun laatiminen vaatii muistitilaa • tulosdokumentin rakennetta voi kontrolloida hyvin • sopii parhaiten monimutkaisiin muunnoksiin Muunnostekniikoita Jyväskylän yliopisto/AHo, VLy, PTi

11. ASP ja XML • IIS 5.0 palvelimessa ”XML-valmius” • ASP-”varuskomponentteja” (esim.) • FileSystemObject, File- Folder-object • Response ja Request object • DOM (MSXML2.DOMDocument) • ParseError ja Error object • Jscript ja Vbscript (Debugger) Jyväskylän yliopisto/AHo, VLy, PTi

12. DOM • Dokumenttipuun solmut ”ajatellaan” olioiksi (object) joilla on rajapinta (Interface) • Rajapintaan (Interface) liittyy ominaisuuksia ja metodeja • Interface vastaa solmua, metodit määrittävät toiminnot, joita voidaan suorittaa • Interfaceja (esim.): • Document Interface (=dokumenttiolio) • Node Interface (=kaikki solmut) • Element Interface • Attr Interface (Dokumentin attribuutit) Jyväskylän yliopisto/AHo, VLy, PTi

13. Element Attribute Attribute DOM-objektimalli -dokumentti-interface DOCUMENT Document- Type Comment Processing- Instruction Huom! vain 1 elementti- dokumentin juuri Jyväskylän yliopisto/AHo, VLy, PTi

14. Element Attribute Attribute Entity- Reference Element Attribute Attribute CDATASection Text Comment Processing- Instruction Dom-objektimalli - elementInterface Jyväskylän yliopisto/AHo, VLy, PTi

15. aseta dok.muuttuja.attribuutti Document.Element var rootEl=myDoc.DocumentElement; DOM; Document Interface • Attribuutit: doctype, implementation ja documentElement • Metodeja, mm. • createElement • createDocumentFragment • createTextNode, createComment • createCDATASection, createAttribute • getElementsByTagName Jyväskylän yliopisto/AHo, VLy, PTi

16. Jäsennyspuu Alla on runo.dtd -ELM-rakennekaavio Huomaa: dtd-kuvaus kertoo mitä elementtejä runossa voi tai saa olla Jyväskylän yliopisto/AHo, VLy, PTi

17. RUNO TEKIJA SAKEISTO OTSIKKO NIMI Tasapää RIVI RIVI ETUNIMI SUKUNIMI Älä kasva enempää Aulis Ankka Tillin tallin tasapää Jäsennyspuu Jäsentäjän laatima jäsennyspuu kuvaa yksittäisen (runo-dokumentti-instanssin) rakenteen. Erään runo.xml-dokumentin jäsennyspuun kaaviokuva näyttää tältä: Jyväskylän yliopisto/AHo, VLy, PTi

18. Muunnokset palvelin/asiakas –ympäristössä (XSLT/DOM) • Vaihtoehtoja: • käytetään PI:tä (Processing Instruction) XML-lähdedokumentissa (a) (PI voidaan kirjoittaa lähdedokumenttiin WWW-palvelimella) • DOM-rajapintaa ja DOM-objekteja käytetään XML-lähdedokumentin ja XSLT:n lataamiseen (p/a) • käytetään DOM-rajapintaa + skriptikieliä (Vbscript, Jscript) tai Javaa Jyväskylän yliopisto/AHo, VLy, PTi

19. Lähde XML- dok. Tulos- dok. + linkki CSS:ään XSLT dok. CSS dok. Palvelin/Asiakas Asiakas Muunnosketju (esimerkki) Tulos HTML/ XHTML-dok. rendered CSS-muotoiltuna Jyväskylän yliopisto/AHo, VLy, PTi

20. <?xml version="1.0"?> <?xml-stylesheet type="text/xsl" href=”poem_html.xsl" ?> <!DOCTYPE POEM SYSTEM "Poem1.dtd"> ... <xsl:stylesheet..... <html> <head><meta> <LINK rel="stylesheet” type="text/css” href="runo_htm.css" > </LINK> Esimerkki: PI XML-lähdedokumentissa Jyväskylän yliopisto/AHo, VLy, PTi

21. <HTML><BODY><HEAD></HEAD> <SCRIPT LANGUAGE=VBSCRIPT> Dim objDocument, objXSL, strXML Set objDoc = CreateObject("MSXML2.DOMDocument") Set objXSL = CreateObject ("MSXML2.DOMDocument") objDoc.async=false objXSL.async=false objDoc.Load "../Runot/Pinkku1.xml" objXSL.Load "runo1_htmlksi2.xsl" strXML=objDoc.transformNode(objXSL) Document.Write strXML </SCRIPT> </BODY></HTML> Esimerkki: DOM-objektit+XSLT Jyväskylän yliopisto/AHo, VLy, PTi

22. <HTML><HEAD><TITLE>Inspect nodes of poem</TITLE></HEAD> <BODY> <SCRIPT LANGUAGE="VBSCRIPT" CODEPAGE="iso-8859-1" LCID="1033"> Dim root, xmlDoc, child Set xmlDoc = CreateObject("Msxml2.DOMDocument") xmlDoc.async = False xmlDoc.load("Runot/Pinkku1.xml") 'Walk from the document to each of its child nodes: For Each child In xmlDoc.childNodes document.write ”type of node:" & child.nodeType & " | " document.write ”name of node:" & child.nodeName & " | " document.write ”content of node:" & child.text & "<BR>" Next </SCRIPT></BODY></HTML> Esimerkki: VBscript+DOM Jyväskylän yliopisto/AHo, VLy, PTi

23. Runokustannus Oy:ssä testatut muunnostyypit • XML-to-XML • XML-to-HTML • XML-to-XHTML Jyväskylän yliopisto/AHo, VLy, PTi

24. Runokustannus Oy:n muunnostarpeet • Useamman lähdedokumentin yhdistäminen yhdeksi tulosdokumentiksi (runo+ylä- tai alatunniste, runolista, metatiedot runoista) • Useamman lähdedokumentin yhdistäminen yhdeksi (runokokoelma) • XSLT-muunnosdokumenttien yhdistäminen (runo+alatunniste) Jyväskylän yliopisto/AHo, VLy, PTi

25. Esimerkki: XSLT-muunnossivujen yhdistäminen <?xml version=”1.0” encoding=”iso-8859-1”?> <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/1999/REC-html401"> <xsl:import href="header.xsl"/> <xsl:output method="html" encoding="ISO-8859-1" /> <?xml version=”1.0” encoding=”iso-8859-1”?> !-- Filename: header.xsl --> <xsl:stylesheet xmlns:xsl= "http://www.w3.org/1999/XSL/Transform" version="1.0" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/1999/REC-html401"> <xsl:output method="html" encoding="ISO-8859-1" /> <xsl:template match="/" name="header"> Jyväskylän yliopisto/AHo, VLy, PTi

26. Apuohjelmia • MSTools for validating XML and viewing XSLT output • MS Jscript/Vbscript Debugger • MSXSL command line tool Jyväskylän yliopisto/AHo, VLy, PTi

27. Kohdattuja haasteita • Ongelmien syitä • jäsentimet ja niiden eri versiot • merkkien koodaus • kuvat ja linkit • ”liian paljon” työkaluja, kieliä ja ohjelmia Jyväskylän yliopisto/AHo, VLy, PTi

28. Esimerkki: Merkkien koodaus ja jäsennin • MSXML TULOS- Dok. MSXML 3.0 LÄHDE- Dok. • lähdedokumentin koodaus • saatettu käyttää merkki-entiteettejä • entiteetit muutetaan oikeiksi merkkikoodeiksi muunnoksessa • käyttää UTF-16:ta • tunnistaa tulosteen koodauksen PI:stä jos oikeaa load/save –metodiaon käytetty • muutoin tulostaa UTF-16:ta • jotain koodausta käytetty • sisältää koodaus-määrityksen • jompikumpi on ”väärä” Jyväskylän yliopisto/AHo, VLy, PTi

29. Encoding, MSXML ja ASP • loadXML (UCS-2/UTF-16) • load • ->http-header • ->2-byte BOM ->UTF-16 • ->4-byte BOM ->UTF-32 • ->UTF-8 (paitsi jos on encoding attribuutti XML-deklaraatiossa) • ResponseXML - samat kuin Load:ssa • ResponseText ->UTF-8 • ResponseStream->IStream Jyväskylän yliopisto/AHo, VLy, PTi

30. Mahdollisuuksia • Voit käyttää XSLT-tyylimäärityksiä komponentteina ja yhdistellä niitä • Tyylisivu voidaan nähdä uudelleen käytettävänä komponenttina palvelimella • Muunnoksia voi myös ketjuttaa • Muunnosten avulla voit säilyttää tietoa sisältöorientoituneessa muodossa ja tulostaa sen tarvittavia tyylimäärityksiä käyttäen • Ongelma: DTD:eiden, muunnoskomponenttien ja versioiden hallinta Jyväskylän yliopisto/AHo, VLy, PTi

31. Mitä opittiin • Käytä samaa merkkikoodausta lähdedokumenteissa ja muunnossivuissa • Sisällön tuottajalle on hyvä tarjota sisältöorientoitunut DTD; muunnoksia tarvitaan joka tapauksessa! • Selaimet tukevat CSS:ää, XSLT:ä ja XML:ää vaihtelevasti • XML-pohjaisen julkaisuympäristön rakentamiseen on olemassa työkaluja: varaa aikaa mahdollisten ongelmien ratkaisemiseksi • Moninaiset taidot ovat tarpeen julkaisuympäristöä pystytettäessä, XML:n tunteminen ei riitä! Jyväskylän yliopisto/AHo, VLy, PTi

32. Lisää tietoa: inSGML-projekti http://haades.it.jyu.fi/inSGML/ Jyväskylän yliopisto/AHo, VLy, PTi