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 : documentontwerp Maar ook:  Theorie (herhalen)  Toets  Keuzeopdracht

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 Maar eerst...  http://stap.iam.hva.nl/~kestf/zoop3

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

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 TEXT : unicode XML HTMLRSSMathML QTI

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 Oplossing met XML eXtensible Markup Language Voor het ontrafelen van de tekst is standaard programmatuur beschikbaar in iedere ontwikkelomgeving! De XML-PARSER!

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 Hoe werkt XML? De XML familie  Verschillende technieken voor verschillende doeleinden

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

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

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 XML document ontwerp Gewoon doen en ervaren. Tegen vragen/problemen aanlopen.

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

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 ‘Goede’ XML wat is ‘goed’ XML documentontwerp.  Formeel: Well-formed XML  Inhoudelijk: bevat het alle relevante informatie  Stijl : ‘fouten’ en ‘keuzen’

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 Goede XML is wellformed  Voldoet aan alle eisen van W3C:  Tags afsluiten  Case-sensitive  Quotes om attribuutwaarden  Nette hierarchie

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 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? 3 kilo aardappelen

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 Opdracht Ontwerp een XML document structuur voor een kookrecept:  Titel  Gegevens: aantal personen, bereidingstijd  Ingrediënten  Benodigdheden  Bereiding

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

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

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

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

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 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, … )

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 Goede XML: stijl ‘keuze’ DATA Format  Elementen:  Groeperen van elementen  Element of Attribuut Wees 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

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

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

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

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 Toets  Basisbegrippen XML  ‘Wellformed’ XML  Document ontwerp beoordelen  Eenvoudige XPath selecties

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 basisbegrippen Onderstaande begrippen kunnen gevraagd worden.  Wellformed XML  Valide XML  Element  Attribuut  Unicode  Schema / DTD  White space  Interoperabiliteit  Platform neutraal  Open standaard  Parser  HTML vs XHTML

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 Literatuur: Introducing XML 1.Introducing XML 2.XML Fundamentals 3.Schema Uses and Development 4.XML as Document Format 5.XML as Data Format

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 Tot zover de theorie Nu nogmaals XPath

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

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

30 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 en Xpath in de praktijk met PHP 1.Laad het XML bestand van een URL 2.Ontrafel de tekst en vorm een boomstructuur 3.Volg een XPath door de boom naar de gewenstte informatie -Download voorbeeld PHP code (php4 of php5) -Bestudeerd XPath reference van bijv www.w3cschools.com www.w3cschools.com -XPath komt terug in XSLT ( deel 2 van het blok)

31 Hogeschool van Amsterdam - Interactieve Media – Internet Development – Jochem Meuwese - j.meuwese@interactievemedia.hva.nl - http://oege.ie.hva.nl/~meuwj/ - http://hva.jochem.nl Keuze opdrachten

32 Hogeschool van Amsterdam - Interactieve Media – Internet Development – Jochem Meuwese - j.meuwese@interactievemedia.hva.nl - http://oege.ie.hva.nl/~meuwj/ - http://hva.jochem.nl keuzeopdrachten  Open content mashup  Shared interest newsfeed  Recipe player Of een project naar keuze:  iets met AJAX ?