Hogeschool van Amsterdam - Interactieve Media – Internet Development – Jochem Meuwese - -

Presentatie over: "Hogeschool van Amsterdam - Interactieve Media – Internet Development – Jochem Meuwese - -"— Transcript van de presentatie:

1 Hogeschool van Amsterdam - Interactieve Media – Internet Development – Jochem Meuwese - j.meuwese@interactievemedia.hva.nl - http://oege.ie.hva.nl/~meuwj/ - http://hva.jochem.nl Les 8 : XSLT modulariteit

2 Hogeschool van Amsterdam - Interactieve Media – Internet Development – Jochem Meuwese - j.meuwese@interactievemedia.hva.nl - http://oege.ie.hva.nl/~meuwj/ - http://hva.jochem.nl vandaag  Waar zijn we eigenlijk mee bezig  studiedossier  Korte herhaling van het voorafgaande  XSLT templates versie 1.0  Modulariteit  XSLT templates versie 2.0

3 Hogeschool van Amsterdam - Interactieve Media – Internet Development – Jochem Meuwese - j.meuwese@interactievemedia.hva.nl - http://oege.ie.hva.nl/~meuwj/ - http://hva.jochem.nl StudieDossier  Inhoud coderen in XML ( StudiedossierStandaard )  Vormgeving coderen in XSLT stylesheets Rationale  Scheiding van inhoud en presentatie  Presentatie gemakkelijk aan te passen  Meerdere presentatievormen/selecties mogelijk  Portfolio, flash, PDF  Inhoud gemakkelijk te onderhouden  Scripts voor indexeren van data in het archief

4 Hogeschool van Amsterdam - Interactieve Media – Internet Development – Jochem Meuwese - j.meuwese@interactievemedia.hva.nl - http://oege.ie.hva.nl/~meuwj/ - http://hva.jochem.nl XML codering van het studiedossier: een bouwwerk van standaarden Betekenis: Structuur: Tekst: Digitaal: Unicode XML IAM StudieDossier Bits & Bytes

5 Hogeschool van Amsterdam - Interactieve Media – Internet Development – Jochem Meuwese - j.meuwese@interactievemedia.hva.nl - http://oege.ie.hva.nl/~meuwj/ - http://hva.jochem.nl IAM studiedossier De standaard voor de inhoud bestaat uit:  Directorystructuur waarin de inhouddocumenten geplaatst worden  Documentschema’s voor verschillende type inhouddocumenten  Persoongegevens  CV  Projectinformatie  Etc….. Een kwestie van invullen volgens de xml schema’s.

6 Hogeschool van Amsterdam - Interactieve Media – Internet Development – Jochem Meuwese - j.meuwese@interactievemedia.hva.nl - http://oege.ie.hva.nl/~meuwj/ - http://hva.jochem.nl Studiedossier: Filestructuur  Studiedossier  _stylesheets  _schemas  Profiel  Persoongegevens  Cv  Competenties  Kennis_en_vaardigheden  leerdoelen  Projecten  voorIAM  Project1  project2  IAM-prop  IAM-V1  IAM-V2  IAM-afstuderen index.xml settings.xml

7 Hogeschool van Amsterdam - Interactieve Media – Internet Development – Jochem Meuwese - j.meuwese@interactievemedia.hva.nl - http://oege.ie.hva.nl/~meuwj/ - http://hva.jochem.nl Studiedossier: documentschema’s  Schema verwijzing in XML  Validatie door editor  Gebruik van XHTML / namespaces  Documentatie  groepen  xs:anyType  enumeraties  optioneel/verplicht/aantal

8 Hogeschool van Amsterdam - Interactieve Media – Internet Development – Jochem Meuwese - j.meuwese@interactievemedia.hva.nl - http://oege.ie.hva.nl/~meuwj/ - http://hva.jochem.nl XML schema  Eenmaal een goede structuur voor je document gevonden, kan je die vastleggen in een XML schema.  Verschillende mogelijkheden: DTD, XSD, e.a.  Waarom je dat zou doen?  Input validatie: XMLparsers kunnen automatisch controleren of een bepaald document goed is gesctructureerd.  Editorbesturing: de editor krijgt alleen toegestane optie te zien.  Documentatie: zodat iedereen kan zien wat de bedoeling is.  Valide XML: xml document dat voldoet aan een bepaald schema.

9 Hogeschool van Amsterdam - Interactieve Media – Internet Development – Jochem Meuwese - j.meuwese@interactievemedia.hva.nl - http://oege.ie.hva.nl/~meuwj/ - http://hva.jochem.nl Presentatie van studiedossier met XSLT  XSLT templates voor hoe de inhoud moet worden weergegeven  In webpagina. ( XHTML )  In MS Word document ( OOXML )  In OpenOfice document ( ODF )  In PDF ( FO ) XSLT ‘transformeert’ studiedossier XML naar ander XML formaat ( XHTML, OOXML, ODF, FO )

10 Hogeschool van Amsterdam - Interactieve Media – Internet Development – Jochem Meuwese - j.meuwese@interactievemedia.hva.nl - http://oege.ie.hva.nl/~meuwj/ - http://hva.jochem.nl XSLT style sheets  Het presenteren van XML data in een XHTML pagina

11 Hogeschool van Amsterdam - Interactieve Media – Internet Development – Jochem Meuwese - j.meuwese@interactievemedia.hva.nl - http://oege.ie.hva.nl/~meuwj/ - http://hva.jochem.nl StudieDossier + XSLT templates XSLT templates versie 1 Les 6  Uitleg XML schema voor studiedossier  Start eenvoudige XSLT voor enkelvoudige pagina Les 7  ‘Regels toepassen’ vs ‘gaten vullen’ ----------------------------------------------------------- Kerstvakantie ----------------------------------------------------------- XSLT templates versie 2 Les 8  Hergebruik van templates’in meerdere pagina’s  Document() functie, tbv navigatie en indexpagina  Complexere Xpath Les 9  Afmaken, problemen oplossen Les 10  inleveren

12 Hogeschool van Amsterdam - Interactieve Media – Internet Development – Jochem Meuwese - j.meuwese@interactievemedia.hva.nl - http://oege.ie.hva.nl/~meuwj/ - http://hva.jochem.nl Studiedossier: te doen XSLT templates versie 1.0  Begin met één profielpagina te vullen  Daarna een projectpagina Versie1: Ga met eenvoudige stylesheets aan de gang Dwz: voor iedere type contentbestand, één XSLT stylesheet

13 Hogeschool van Amsterdam - Interactieve Media – Internet Development – Jochem Meuwese - j.meuwese@interactievemedia.hva.nl - http://oege.ie.hva.nl/~meuwj/ - http://hva.jochem.nl XSLT style sheets  Het presenteren van XML data in een XHTML pagina

14 Hogeschool van Amsterdam - Interactieve Media – Internet Development – Jochem Meuwese - j.meuwese@interactievemedia.hva.nl - http://oege.ie.hva.nl/~meuwj/ - http://hva.jochem.nl Basis XSLT: gaten vullen top element van een xsl stylesheet (overnemen uit voorbeeld) enkele specificaties met betrekking tot het output formaat (overnemen uit voorbeeld) het hoofdtemplate het selecteren van een waarde uit de xml-bron het loopen door een lijst uit de xml-bron

15 Hogeschool van Amsterdam - Interactieve Media – Internet Development – Jochem Meuwese - j.meuwese@interactievemedia.hva.nl - http://oege.ie.hva.nl/~meuwj/ - http://hva.jochem.nl Basic XPath Het selecteren van een element: /sd:student-info/sd:statement /sd:student-info/sd:person-name/sd:full-name Relatieve paden (bijvoorbeeld in een for-each loop): ten opzichte van /sd:student-info/sd:contact/sd:adress sd:street sd:code sd:city Lees ook intranet:XPathVoorBeginners.pdf

16 Hogeschool van Amsterdam - Interactieve Media – Internet Development – Jochem Meuwese - j.meuwese@interactievemedia.hva.nl - http://oege.ie.hva.nl/~meuwj/ - http://hva.jochem.nl XSLT voor beginners  www.w3schools.com

17 Hogeschool van Amsterdam - Interactieve Media – Internet Development – Jochem Meuwese - j.meuwese@interactievemedia.hva.nl - http://oege.ie.hva.nl/~meuwj/ - http://hva.jochem.nl Huiswerk ( templates versie 1 ) 1.Maak eenvoudige vormgeving voor je studiedossier in XHTM/CSS. 2.Vul één of meer profiel bestanden met echte gegevens. 3.Maak eenvoudige XSLT template voor profielbestanden naar de gekozen vormgeving. TIP: begin met ‘persoonsinformatiepagina’

18 Hogeschool van Amsterdam - Interactieve Media – Internet Development – Jochem Meuwese - j.meuwese@interactievemedia.hva.nl - http://oege.ie.hva.nl/~meuwj/ - http://hva.jochem.nl XSLT: regels toepassen  Een andere manier om naar XSLT te kijken  ‘gaten vullen’ en ‘regels toepassen’ worden in combinatie toegepast.

19 Hogeschool van Amsterdam - Interactieve Media – Internet Development – Jochem Meuwese - j.meuwese@interactievemedia.hva.nl - http://oege.ie.hva.nl/~meuwj/ - http://hva.jochem.nl Gaten vullen vs regels toepassen Gaten vullen:  Template = een brok outputcode ( XHTML ) met ‘gaten’ die gevuld worden uit de XML bron. Regels toepassen:  Match-patronen ( selectors ) bepalen welk template wordt toegepast op delen van de XML bron....

20 Hogeschool van Amsterdam - Interactieve Media – Internet Development – Jochem Meuwese - j.meuwese@interactievemedia.hva.nl - http://oege.ie.hva.nl/~meuwj/ - http://hva.jochem.nl voorbeeld  Een voorbeeld ter illustratie van de werking van regelgestuurde methode  Download voorbeeld  En bestudeer de logica

21 Hogeschool van Amsterdam - Interactieve Media – Internet Development – Jochem Meuwese - j.meuwese@interactievemedia.hva.nl - http://oege.ie.hva.nl/~meuwj/ - http://hva.jochem.nl Match patronen Speciaal geval: Dit is altijd het eerste template dat wordt toegepast

22 Hogeschool van Amsterdam - Interactieve Media – Internet Development – Jochem Meuwese - j.meuwese@interactievemedia.hva.nl - http://oege.ie.hva.nl/~meuwj/ - http://hva.jochem.nl Conflict resolutie Het is mogelijk dat meerder templates van toepassing zouden kunnen zijn. De XSLT engine kiest op basis van ‘prioriteit’ Laagste prioriteit: wild character * match = ‘*’ match = ‘ht:*’ Normale prioriteit: elementnaam of attribuutnaam match = ‘sd:project’ match = ‘@rating’ Hoogste prioriteit: element of attribuut met predicaat match = ‘sd:project-info [ sd:metadata/sd:type = ‘groepsopdracht’]’

23 Hogeschool van Amsterdam - Interactieve Media – Internet Development – Jochem Meuwese - j.meuwese@interactievemedia.hva.nl - http://oege.ie.hva.nl/~meuwj/ - http://hva.jochem.nl Ingebouwde default templates Zorgt ervoor dat het gehele brondocument automatisch afgelopen wordt Zorgt ervoor dat tekst binnen elementen wordt weergegeven

24 Hogeschool van Amsterdam - Interactieve Media – Internet Development – Jochem Meuwese - j.meuwese@interactievemedia.hva.nl - http://oege.ie.hva.nl/~meuwj/ - http://hva.jochem.nl Voordelen regel gestuurd  Zeer flexibel  Gemakkelijk ( als je eenmaal door hebt hoe het werkt) “Declaratief programmeren” Lees de reader !

25 Hogeschool van Amsterdam - Interactieve Media – Internet Development – Jochem Meuwese - j.meuwese@interactievemedia.hva.nl - http://oege.ie.hva.nl/~meuwj/ - http://hva.jochem.nl Modulariteit in XSLT Modulariteit = herbruikbare onderdelen  Gemeenschappelijk templates  Navigatiestructuur op iedere pagina xslt stylesheets versie 2.0

26 Hogeschool van Amsterdam - Interactieve Media – Internet Development – Jochem Meuwese - j.meuwese@interactievemedia.hva.nl - http://oege.ie.hva.nl/~meuwj/ - http://hva.jochem.nl Gemeenschappelijke templates  Zet gemeenschappelijk templates in één bestand ( general.xsl )  ‘include’ dit bestand in iedere xslt Zie voorbeelden

27 Hogeschool van Amsterdam - Interactieve Media – Internet Development – Jochem Meuwese - j.meuwese@interactievemedia.hva.nl - http://oege.ie.hva.nl/~meuwj/ - http://hva.jochem.nl Navigatie op iedere pagina Probleem:  De navigatie in de XSLT opnemen in tegen het principe van scheiding van vorm en inhoud.  De informatie die nodig is, staat niet in de xml bron maar in index.xml. Oplossing:  De index.xml ‘inladen’ in een ‘variabele’  Vervolgens templates maken voor deze informatie. Zie voorbeelden

28 Hogeschool van Amsterdam - Interactieve Media – Internet Development – Jochem Meuwese - j.meuwese@interactievemedia.hva.nl - http://oege.ie.hva.nl/~meuwj/ - http://hva.jochem.nl En verder  Er valt nog veel meer te leren met XSLT

29 Hogeschool van Amsterdam - Interactieve Media – Internet Development – Jochem Meuwese - j.meuwese@interactievemedia.hva.nl - http://oege.ie.hva.nl/~meuwj/ - http://hva.jochem.nl Volgende week  Iedereen laat zijn werk zien  Problemen zijn er om op te lossen