Les 3 : documentontwerp

1. Les 3 : documentontwerp ( i.p.v. geplande gastpresentatie QTI ) Maar ook: Enkele voorbeelden uit de praktijk Hogeschool van Amsterdam - Interactieve Media – Internet Development – Jochem Meuwese - j.meuwese@interactievemedia.hva.nl - http://oege.ie.hva.nl/~meuwj/ - http://hva.jochem.nl

2. Wat is XML? • een standaard manier om markup-talen te definieren. OPEN STANDAARDEN • Enkele voorbeelden van open standaarden die gebaseerd zijn op XML • (X)HTML • MathML • SOAP • IMS QTI • OpenDocument Hogeschool van Amsterdam - Interactieve Media – Internet Development – Jochem Meuwese - j.meuwese@interactievemedia.hva.nl - http://oege.ie.hva.nl/~meuwj/ - http://hva.jochem.nl

3. Waarvoor dient XML? Toepassingen: • Scheiding van structuur en vorm • Bijv artikel, recensie, recept, documentatie • Uitwisselen van informatie tussen systemen • Bijv nieuws, bestellingen Meer abstract: • XML maakt het relatief eenvoudig om een nieuwe talen/formaten te definieren ! • XML maakt het relatief eenvoudig om verschillende talen/formaten te combineren ! Hogeschool van Amsterdam - Interactieve Media – Internet Development – Jochem Meuwese - j.meuwese@interactievemedia.hva.nl - http://oege.ie.hva.nl/~meuwj/ - http://hva.jochem.nl

4. Wat is XML • (internationale) afspraken op afspraken. HTML RSS MathML QTI XML TEXT : unicode Hogeschool van Amsterdam - Interactieve Media – Internet Development – Jochem Meuwese - j.meuwese@interactievemedia.hva.nl - http://oege.ie.hva.nl/~meuwj/ - http://hva.jochem.nl

5. Oplossing met XML eXtensible Markup Language Voor het ontrafelen van de tekst is standaard programmatuur beschikbaar in iedere ontwikkelomgeving! De XML-PARSER! Hogeschool van Amsterdam - Interactieve Media – Internet Development – Jochem Meuwese - j.meuwese@interactievemedia.hva.nl - http://oege.ie.hva.nl/~meuwj/ - http://hva.jochem.nl

6. Hoe werkt XML? De XML familie • Verschillende technieken voor verschillende doeleinden Hogeschool van Amsterdam - Interactieve Media – Internet Development – Jochem Meuwese - j.meuwese@interactievemedia.hva.nl - http://oege.ie.hva.nl/~meuwj/ - http://hva.jochem.nl

7. voorbeeld • DOM en XPath in PHP. • voorbeeldcode Hogeschool van Amsterdam - Interactieve Media – Internet Development – Jochem Meuwese - j.meuwese@interactievemedia.hva.nl - http://oege.ie.hva.nl/~meuwj/ - http://hva.jochem.nl

8. XPath • SQL voor database • XPath voor XML • Een manier om data uit een XML bestand te seleceteren. • Eigenlijk:met XPath beschrijf je een pad door een XML bestand naar de gewenstte data. Hogeschool van Amsterdam - Interactieve Media – Internet Development – Jochem Meuwese - j.meuwese@interactievemedia.hva.nl - http://oege.ie.hva.nl/~meuwj/ - http://hva.jochem.nl

9. Wat is XPath? voorbeelden artikel/titel ( de titel van een artikel ) artikel/@bron ( het bron-attribuut van een artikel ) artikel/tekst/* ( alle elementen in de tekst van een artikel ) //plaatje ( alle plaatjes in het document ) artikel/tekst/alinea[1] ( de eerste alinea van de tekst van een artikel ) /artikel/tekst/alinea[ //citaat/@geciteerde="jochem"] ( de alinea’s aarin jochem wordt geciteerd ) w3schools.org Hogeschool van Amsterdam - Interactieve Media – Internet Development – Jochem Meuwese - j.meuwese@interactievemedia.hva.nl - http://oege.ie.hva.nl/~meuwj/ - http://hva.jochem.nl

10. DOM + XPath • extendedDOM is een uitbreiding van de standaard PHP DOM met Xpath functionaliteit( php 5.2 of hoger ) • $domnode->selectSingleNode( $xpath )$domnode->selectNodes( $xpath ) • Lijkt op de DOM zoals microsoft die aanbiedt • Niet echt anders dan de standaard PHP DOM, wel een klein beetje gemakkelijker. Hogeschool van Amsterdam - Interactieve Media – Internet Development – Jochem Meuwese - j.meuwese@interactievemedia.hva.nl - http://oege.ie.hva.nl/~meuwj/ - http://hva.jochem.nl

11. Voordelen van XML boven andere bestandsformaten • Leesbaar voor mens en machiene • Uitbreidbaar tbv van vele toepassingen • Transporteerbaar als text bestand over HTTP • Rijke structuur , hierarchie, attributen • Standaard ! • Dus ondersteuning met diverse gereedschappen op vele platforms Hogeschool van Amsterdam - Interactieve Media – Internet Development – Jochem Meuwese - j.meuwese@interactievemedia.hva.nl - http://oege.ie.hva.nl/~meuwj/ - http://hva.jochem.nl

12. Praktijk voorbeelden Oorspronkelijke presentatie Matthe Stet Hogeschool van Amsterdam - Interactieve Media – Internet Development – Jochem Meuwese - j.meuwese@interactievemedia.hva.nl - http://oege.ie.hva.nl/~meuwj/ - http://hva.jochem.nl

13. XML document ontwerp Gewoon doen en ervaren. Tegen vragen/problemen aanlopen. Hogeschool van Amsterdam - Interactieve Media – Internet Development – Jochem Meuwese - j.meuwese@interactievemedia.hva.nl - http://oege.ie.hva.nl/~meuwj/ - http://hva.jochem.nl

14. Well formed XML Correct gevormde xml Hogeschool van Amsterdam - Interactieve Media – Internet Development – Jochem Meuwese - j.meuwese@interactievemedia.hva.nl - http://oege.ie.hva.nl/~meuwj/ - http://hva.jochem.nl

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

16. XML Bouwblokken Over elementen, attributen en tekst Hogeschool van Amsterdam - Interactieve Media – Internet Development – Jochem Meuwese - j.meuwese@interactievemedia.hva.nl - http://oege.ie.hva.nl/~meuwj/ - http://hva.jochem.nl

17. XML bouwblokken Belangrijkste bouwblokken • Elementen • Attributen • Tekst Hogeschool van Amsterdam - Interactieve Media – Internet Development – Jochem Meuwese - j.meuwese@interactievemedia.hva.nl - http://oege.ie.hva.nl/~meuwj/ - http://hva.jochem.nl

18. element Element • Naam • Attributen • Kinderen: • Elementen • Tekst Opentag, sluittag met naam In de opentag staan attributen Tussen de open- en sluittage staat de inhoud Hogeschool van Amsterdam - Interactieve Media – Internet Development – Jochem Meuwese - j.meuwese@interactievemedia.hva.nl - http://oege.ie.hva.nl/~meuwj/ - http://hva.jochem.nl

19. Inhoud van een xml-element Een element kan bevatten: • Leeg • Tekst • Elementen • Combinatie tekst en elementen Hogeschool van Amsterdam - Interactieve Media – Internet Development – Jochem Meuwese - j.meuwese@interactievemedia.hva.nl - http://oege.ie.hva.nl/~meuwj/ - http://hva.jochem.nl

20. attribuut Attribuut • Naam • Waarde: tekst In de opentag Volgorde is niet van belang Hogeschool van Amsterdam - Interactieve Media – Internet Development – Jochem Meuwese - j.meuwese@interactievemedia.hva.nl - http://oege.ie.hva.nl/~meuwj/ - http://hva.jochem.nl

21. tekst Tekst • Karakterset ( unicode ) • Witruimte • Entiteiten : Speciale xml-karakters ( < & ‘ “ > )&lt; &amp; &apos; &quot; &gt; Hogeschool van Amsterdam - Interactieve Media – Internet Development – Jochem Meuwese - j.meuwese@interactievemedia.hva.nl - http://oege.ie.hva.nl/~meuwj/ - http://hva.jochem.nl

22. XML bouwblokken • Element • Naam • Attributen • Kinderen • Elementen • Tekst • Attribuut • Naam • Waarde: tekst • Tekst • Karakters ( unicode ) • Witruimte • Speciale karakters: &lt; &amp; &apos; &quot; &gt; Hogeschool van Amsterdam - Interactieve Media – Internet Development – Jochem Meuwese - j.meuwese@interactievemedia.hva.nl - http://oege.ie.hva.nl/~meuwj/ - http://hva.jochem.nl

23. XML bouwblokken • Elementen • Attributen • Tekst • Is dit nieuw? Dit wist je het eigenlijk al van HTML? Hogeschool van Amsterdam - Interactieve Media – Internet Development – Jochem Meuwese - j.meuwese@interactievemedia.hva.nl - http://oege.ie.hva.nl/~meuwj/ - http://hva.jochem.nl

24. Geschiedenis: XML opvolger van SGML • 1986: SGMLStandard Generalized Markup Language • 1998: XMLeXtensible Markup Language XML is een vereenvoudiging van SGML Hogeschool van Amsterdam - Interactieve Media – Internet Development – Jochem Meuwese - j.meuwese@interactievemedia.hva.nl - http://oege.ie.hva.nl/~meuwj/ - http://hva.jochem.nl

25. 1986: SGMLStandard Generalized Markup Language 1998: XMLeXtensible Markup Language SGML --> HTML XML --> XHTML Er zijn kleine doch belangrijke verschillen tussen SGML en XML ! XML is een vereenvoudiging van SGML SGML vs XML = HTML vs XHTML Hogeschool van Amsterdam - Interactieve Media – Internet Development – Jochem Meuwese - j.meuwese@interactievemedia.hva.nl - http://oege.ie.hva.nl/~meuwj/ - http://hva.jochem.nl

26. XML = streng XML die voldoet aan alle strengere XML normen • Case sensitive • Aanhalingstekens om • Tags afsluiten ------ • Stricte hierarchie “wellformed XML” Hogeschool van Amsterdam - Interactieve Media – Internet Development – Jochem Meuwese - j.meuwese@interactievemedia.hva.nl - http://oege.ie.hva.nl/~meuwj/ - http://hva.jochem.nl

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

28. Tot zover de basics van “wellformed XML” • Bouwstenen: • Element • Attribuut • Tekst ( karakters, witruimte, entiteiten ) • XMLdata vormt een boomstructuur • Parser analyseert de tekst volgens de XML grammatica • Well-formed XML voldoet aan strenge regels van W3C Hogeschool van Amsterdam - Interactieve Media – Internet Development – Jochem Meuwese - j.meuwese@interactievemedia.hva.nl - http://oege.ie.hva.nl/~meuwj/ - http://hva.jochem.nl

29. documentontwerp • Scheiding van inhoud en presentatie • XML document bevat gestructureerde inhoud zonder presentatie • Vgl: semantische (X)HMTL XML gaat nog een stap verder: • i.p.v. html-elementen een class-attribuut te geven, bedenken we element-namen met meer betekenis • XML kan worden gepresenteerd met een stylesheet ( CSS of XSLT ) Hogeschool van Amsterdam - Interactieve Media – Internet Development – Jochem Meuwese - j.meuwese@interactievemedia.hva.nl - http://oege.ie.hva.nl/~meuwj/ - http://hva.jochem.nl

30. oefeningen • Oefening 1: • Maak het voorbeeld xml document ‘well-formed’ • Oefening 2: • Ontwerp zelf een XML schema voor de boek recensies van het parool. • www.parool.nl/???? • Oefening 3: • Ontwerp een XML schema voor een kookrecept. • Titel, aantal personen, bereidingstijd, Ingrediënten, benodigdheden, bereiding, … Hogeschool van Amsterdam - Interactieve Media – Internet Development – Jochem Meuwese - j.meuwese@interactievemedia.hva.nl - http://oege.ie.hva.nl/~meuwj/ - http://hva.jochem.nl

31. Een goede xml-editor • NotePad++ ( met XML-tools plugin ) • XML SPY ( niet gratis ) • Dreamweaver Eigenschappen goede editor: • Kleurcodering • Tags sluiten • Check well-formedness • Automatisch inspringen • Validatie Hogeschool van Amsterdam - Interactieve Media – Internet Development – Jochem Meuwese - j.meuwese@interactievemedia.hva.nl - http://oege.ie.hva.nl/~meuwj/ - http://hva.jochem.nl

32. ‘Goede’ XML wat is ‘goed’ XML documentontwerp. • Formeel: Well-formed XML • Inhoudelijk: bevat het alle relevante informatie • Stijl : ‘fouten’ en ‘keuzen’ Hogeschool van Amsterdam - Interactieve Media – Internet Development – Jochem Meuwese - j.meuwese@interactievemedia.hva.nl - http://oege.ie.hva.nl/~meuwj/ - http://hva.jochem.nl

33. Goede XML bevat en markeert alle benodigde informatie • Is sterk afhankelijk van het doel waarvoor je de documenten wilt gebruiken: • Moet het leesbaar zijn voor mensen • Moet het in een geautomatiseerd proces • Inhoeverre moeten alle informatieblokjes expliciet gemarkeerd worden? <ingredient>3 kilo aardappelen</ingredient> <ingredient product=“aardappel” eenheid=“kilo” aantal=“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

34. Goede XML , stijl ‘fouten’ Wel wellformed XML, maar je mist het punt: • Non-xml Structuur in tekstelementen • Nummers in elementnamen • Variabiliteit in element- of attribuutnaam • Tekst én elementen in datageorienteerde XML • Niet groeperen van elementen Bestudeer document ‘goed en foute ontwerppatronen’ Hogeschool van Amsterdam - Interactieve Media – Internet Development – Jochem Meuwese - j.meuwese@interactievemedia.hva.nl - http://oege.ie.hva.nl/~meuwj/ - http://hva.jochem.nl

35. Goede XML stijl • Er zijn vele gelijkwaardige mogelijkheden om dezelfde informatie in een XML bestand te zetten. • Attributen of elementen • Hoe elementen te groeperen • Abstractie niveau’s • Belangrijk is: • Consistentie • Volledigheid • Eenvoud • ‘Goede’ namen Hogeschool van Amsterdam - Interactieve Media – Internet Development – Jochem Meuwese - j.meuwese@interactievemedia.hva.nl - http://oege.ie.hva.nl/~meuwj/ - http://hva.jochem.nl

36. Goede XML: stijl ‘keuze’ Attributen of elementen Groeperen Abstractieniveau Stijlkeuze afhankelijk van het soort XML • Data Format ( automatische verwerking ) • Document Format (door mensen te lezen ) Hogeschool van Amsterdam - Interactieve Media – Internet Development – Jochem Meuwese - j.meuwese@interactievemedia.hva.nl - http://oege.ie.hva.nl/~meuwj/ - http://hva.jochem.nl

37. DATA-Format vs DOCUMENT-Format DataFormat • Door machine te verwerken • Uitwisselen van data tussen applicaties ( interoperabiliteit ) • Datatabellen • Bijv.: bankafschrift, adressenbestand DocumentFormat • Door mensen te lezen • Scheiding van vorm en inhoud • Teksten • Bijv.: filmrecensie, webpagina Mengvormen • Bijv.: kookrecept Hogeschool van Amsterdam - Interactieve Media – Internet Development – Jochem Meuwese - j.meuwese@interactievemedia.hva.nl - http://oege.ie.hva.nl/~meuwj/ - http://hva.jochem.nl

38. Goede XML: stijl ‘keuze’ Document Format • Elementen • Groeperen van elementen • Elementen: • Tekst die de lezer moet lezen om het document te begrijpen. • Attributen: • Alles wat niet ‘noodzakelijk’ is om het document te begrijpen • Opmaakattributen ( align, color, … ) • Stuurattributen ( href , onClick, … ) • Metadata ( auteur, datum, … ) • Id/idref ( id, idref, … ) Hogeschool van Amsterdam - Interactieve Media – Internet Development – Jochem Meuwese - j.meuwese@interactievemedia.hva.nl - http://oege.ie.hva.nl/~meuwj/ - http://hva.jochem.nl

39. Goede XML: stijl ‘keuze’ DATA Format • Elementen: • Groeperen van elementen • Element of AttribuutWees consequent: Altijd elementen of altijd attributen • Voordelen van attributen: • Weinig ruimte, makkelijk typen • Voordelen van elementen: • Gemakkelijke uitbreidbaar • Voorkeur van Fons • Elementen • Attributen voor ID en IDREF Hogeschool van Amsterdam - Interactieve Media – Internet Development – Jochem Meuwese - j.meuwese@interactievemedia.hva.nl - http://oege.ie.hva.nl/~meuwj/ - http://hva.jochem.nl

40. XML documentontwerp-stijl Vervelend nadeel van XML: • Er zijn vele verschillende manieren om hetzelfde te doen. • Het is niet eenvoudig om de ‘juiste’ manier te vinden. Hogeschool van Amsterdam - Interactieve Media – Internet Development – Jochem Meuwese - j.meuwese@interactievemedia.hva.nl - http://oege.ie.hva.nl/~meuwj/ - http://hva.jochem.nl

41. 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. Hogeschool van Amsterdam - Interactieve Media – Internet Development – Jochem Meuwese - j.meuwese@interactievemedia.hva.nl - http://oege.ie.hva.nl/~meuwj/ - http://hva.jochem.nl

42. ‘well-formed’ versus ‘valide’ Twee belangrijke begrippen die je moet kennen. • Well-formed XML:voldoet aan de algemene regels van XML • Valide XML:voldoet aan specifieke regels voor een bepaalde documenttype, die zijn vastgelegd in een xml schema Hogeschool van Amsterdam - Interactieve Media – Internet Development – Jochem Meuwese - j.meuwese@interactievemedia.hva.nl - http://oege.ie.hva.nl/~meuwj/ - http://hva.jochem.nl

43. Literatuur: Introducing XML • Introducing XML • XML Fundamentals • Schema Uses and Development • XML as Document Format • XML as Data Format Hogeschool van Amsterdam - Interactieve Media – Internet Development – Jochem Meuwese - j.meuwese@interactievemedia.hva.nl - http://oege.ie.hva.nl/~meuwj/ - http://hva.jochem.nl