Föreläsning i webbdesign Strukturering med XML och DTD Rune Körnefors Medieteknik 1 2012 Rune Körnefors rune.kornefors@lnu.se
PresentaCon SCl Layout OrganisaCon/struktur InformaConsobjekt Länkar Innehåll/data Text, bilder, ljud, Separering av innehåll och presenta8on Från föreläsning F4 HTML & CSS Webbläsaren HTML CSS Externa filer för bilder, etc. XML Webbläsaren CSS, XSLT, JavaScript, XML Externa filer för bilder, etc. Informa8on och u=ormning av presenta8on är sammanblandat. Informa8onens innehåll framgår ej av strukturen. Strukturen beskriver istället layouten. Strukturen beskriver innehållet. Presenta8on ingår ej i strukturdokumentet 2
Strukturering av informa8on Layoutmässig struktur Skapa en layout för presentaconen T.ex. rubriker, brödtext, tabeller, listor, Layouten fungerar som en mall som fylls med ey innehåll InformaConens innehåll har ingen betydelse Innehållsmässig struktur Organisera innehållet och gruppera/strukturera deya InformaConens semanck (tolkning) har stor betydelse Ingen hänsyn tas Cll hur informaconen ska presenteras 3
Exempel: Layoutmässig struktur Rubrik Underrubrik Textstycke Horisontell linje Rubrik Lista Listelement Listelement Listelement Horisontell linje Lista Listelement Listelement Horisontell linje 4
Exempel: Informa8onsanalys IdenCfiera informaconens innehåll Tentamen" Kurskod" Ämne" Specifikation" Datum" Tid" Lärare" Nr" Titel" Uppgift" Deluppgift" Delnr" Beskrivning" Poäng" Redundant informacon som ej ingår i innehållet: - Texter som Tentamen i, i kursen, Datum:, Tid:, Lärare:, Uppgib - Enheten p - Horisontella linjer - Placering och i viss mån ordning av texterna 5
Exempel: Innehållsmässig struktur Tentamen Ämne Kurskod SpecifikaCon Datum Tid Lärare Uppgib Nr Titel Deluppgib Delnr Poäng Beskrivning Deluppgib Uppgib tentamen ämne kurskod specifikation uppgift+ + betyder att elementet kan upprepas en eller flera gånger datum tid lärare nr titel deluppgift+ delnr beskrivning poäng 6
Exempel: Innehållsmässig struktur Strukturering Inför egna taggar för de olika elementen i strukturen Märk upp informaconen med dessa taggar Exempel: <tentamen> <amne>medieteknik</amne> <kurskod>1me101</kurskod> <uppgib> <nr>1</nr> <Ctel>Användarcentrerad design</ctel> </uppgib> </tentamen> 7
Språk för strukturen DTD (Document Type DefiniCon) Definierar elementens ordning och struktur, namn på taggar och ayribut samt hur de kan förekomma och upprepas i strukturen. XML = extensible Markup Language Man skapar egna element för ay märka upp informaconen Standardiserades av W3C år 1998 Friare strukturering än HTML innehållsmässig eller layoutmässig Syntaxregler som HTML, fast lite striktare. Bl.a. följande: taggar måste avslutas <abc> </abc> eller <xyz/> ayribut inom citaconstecken <tagg ayribut= värde > skiljer på gemana och versala bokstäver Well formed XML Följer XML:s regler Valid XML Följer också en specifikacon i DTD 8
Varför XML? En bäyre struktur som beskriver innehållet Separera strukturering av informaconen från presentacon av den UnderläYa automacsk bearbetning LäYare ay göra olika urval och sorteringar UnderläYa utbyte av informacon 9
XML är mycket mer än webbsidor 10
Exempel: FirstClass Meddelanden i FirstClass <?xml version="1.0"?>" <firstclass>" <FCFORMSHEADER>" "<fcobject objtype="omessage" formid="141" objname="enur Srofenrà k">" " "<field id="3" index="0" type="number">-862158940</field>" " "<subject index="0" >Om projektet</subject>" " "<tonames index="0" >Enur Srofenrà k</tonames>" "</fcobject>" </FCFORMSHEADER>" <body>" Hej " " Kan vi boka in ett mã te imorgon kl. 10? " " /Rune" </body>" </firstclass>" 11
Validering Webbpublicering XML-Schema XHTML XSLT Exempel på 8llämpningar av XML RDF RSS Webbloggs, nyhetsflöden, etc. Atom SMIL Synkroniserad multimedia XML applicacons XML- språk XML- dialekter SOAP XML SVG Skalbar vektorgrafik Webbtjänster XML-RPC FirstClass MathML Matematik CML Kemi Internt filformat... och mycket mer... 12
Exempel: Bostadsbeskrivning En uthyrare av semesterbostäder vill lagra informacon om varje objekt i en XML- fil InformaConsanalys è object type (apartment coyage) size descripcon image address price 13
Exempel: Bostadsbeskrivning En uthyrare av semesterbostäder vill lagra informacon om varje objekt i en XML- fil InformaConsanalys è object type (apartment coyage) size nr_of_rooms area descripcon image url text address town country price unit 14
Exempel: Bostadsbeskrivning En uthyrare av semesterbostäder vill lagra informacon om varje objekt i en XML- fil InformaConsanalys è object ayr: type (apartment coyage) size nr_of_rooms area descripcon image ayr: url ayr: text address town country price ayr: unit 15
Exempel: Bostadsbeskrivning En uthyrare av semesterbostäder vill lagra informacon om varje objekt i en XML- fil InformaConsanalys è object ayr: type (apartment coyage) size nr_of_rooms area? descripcon image* ayr: url ayr: text? address town country price ayr: unit 16
Exempel: Bostadsbeskrivning En uthyrare av semesterbostäder vill lagra informacon om varje objekt i en XML- fil InformaConsanalys è vacation.dtd" vaccon_rentals object+ ayr: type (apartment coyage) size nr_of_rooms area? descripcon image* address price ayr: url ayr: text? town country ayr: unit vacation.xml" 17
Referens 8ll DTD DTD:n kan inkluderas i XML- filen <?xml version="1.0 encoding= UTF- 8" standalone= yes"?> <!DOCTYPE rotelement [ dtd- specifika8on ]> <rotelement> </rotelement> eller DTD:n finns i separat dokument som kan hiyas av systemet I XML- filen refererar man Cll DTD:n i en DOCTYPE- tagg <?xml version="1.0 encoding= UTF- 8" standalone="no"?> <!DOCTYPE rotelement SYSTEM referens Cll dtd- fil"> <rotelement> </rotelement> 18
Delar i XML som ska beskrivas i DTD:n Element med innehåll" <tagg attr= värde >innehåll</tagg>" Attribut" Tagg" Tomt element" <tagg attr= värde />" Attribut" Tagg" #PCDATA, parsed character data" Text som tolkas av webbläsaren" CDATA, character data" Text som ej tolkas av webbläsaren" x > 2" Entitet" 19
Specifika8on i en DTD Exempel på element- definiconer: <!ELEMENT elem (e1, e2, e3)> elem har underelementen e1, e2 och e3 i den ordningen <!ELEMENT elem (e1, (e2 e3))> e1 och sedan e2 eller e3 <!ELEMENT elem (e1, e2?)> e1 och sedan e2 en eller ingen gång <!ELEMENT elem (e1, e2*)> e1 och sedan upprepas e2 noll eller flera gånger <!ELEMENT elem (e1, e2+)> e1 och sedan upprepas e2 en eller flera gånger <!ELEMENT elem (e1, (e2 e3)*)> e1 och sedan upprepas e2 eller e3 valfriy noll eller flera gånger (t.ex. e1e2e3e3e3e2e3) <!ELEMENT elem EMPTY> element utan sluyagg <!ELEMENT elem (#PCDATA)> valfri text som innehåll mellan start- och sluyagg Exempel på ayributdefiniconer: <!ATTLIST elem ayr CDATA #REQUIRED> taggen elem har ayributet ayr med valfri text ayributet måste finnas med <!ATTLIST elem ayr CDATA #IMPLIED> ayributet kan uteslutas 20
Validera mot en DTD För ay validera XML- koden mot en DTD kan man använda en validator, t.ex.: hyp://www.validome.org/xml/validate/ Då man har en färdig DTD använder man den för ay kontrollera ay XML- koden är korrekt. Om man använder en separat DTD- fil måste den ligga så ay validatorn kan läsa in den. Bäst är då ay lägga den på en webbserver och i XML- filens DOCTYPE- tagg referera Cll den med fullständig URL. Under utveckling av DTD:n har man också nyya av validatorn, för ay testa ay man beskriver XML- koden korrekt. Då är det enklast ay lägga DTD- koden i samma fil som XML- koden och låta filen ligga lokalt på den egna datorn. Då kan man läy växla mellan ay editera filen och testa ay validera den. 21