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 4 : toets + studiedossier Toetsbespreking Studiedossier Schema Studiedossier Stylesheet

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 Toetsuitslag 9 = XSLT / Xpath 11 = XSLT toepassingen 12 = programmeermodellen ( de omgekeerde les 4 )

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 Wat is XML: een bouwwerk van standaarden Betekenis: Structuur: Tekst: Digitaal: Unicode XML HTMLRSSVUMLQTI 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 XSLT style sheets  Het presenteren van XML data in een XHTML pagina

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 Les 6  Uitleg XML schema voor studiedossier  Start eenvoudige XSLT Les 7  Hergebruik van templates  Complexere Xpath  Document() functie Les 8  Afmaken, problemen oplossen Les 9  rooster vrij Les 10  inleveren

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 Te doen 1.Content verzamelen, vormgeving bepalen ( XHTML/CSS ) 2.Één profielpagina (studentinfo) coderen, eenvoudige templates maken 3.Meer profielpagina’s en één project coderen, hergebruik van templates 4.Index coderen eenvoudige indexpagina maken 5.Index gebruiken voor navigatie menu’s 6.Index gebruiken voor complete indexpagina

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 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

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 Studiedossier: documentschema’s  Schema verwijzing in XML  Validatie door editor  Gebruik van XHTML / namespaces  Documentatie  groepen  xs:anyType  Enumeraties  Optioneel/verplicht/aantal  Updates ??

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 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.

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: te doen  Begin met één profielpagina te vullen  Daarna een projectpagina Ga dan met eenvoudige stylesheets aan de gang

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: stylesheets  Een stylesheet voor ‘student-info.xml ‘

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 Basic XSLT: gaten vullen 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

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 XSLT voor gevorderden  ‘gatenvullen’ versus regels ‘toepassen’  RTFM: lees de reader !!!!!!!!!

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 Gaten vullen of regels toepassen Gaten vullen  xsl:value-of select=‘xpath’ Regels toepassen  xsl:apply-templates select=‘xpath’  xsl:template match=‘xpath’ Regels toepassen is modulairder, flexibeler

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 Huiswerk 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.