Contentmanagement. Dipl. Inf. Benjamin Bock Topic Maps Lab, Universität Leipzig leipzig.de. Schlüsselqualifika6on 10

Transkript

1 Schlüsselqualifika6on 10 Contentmanagement Dipl. Inf. Benjamin Bock Topic Maps Lab, Universität Leipzig leipzig.de

2 Wiederholung HTML, CSS 2

3 Grundprinzip der Inhalteerstellung Trennung von Layout, Inhalt und Struktur Inhalte Die eigentliche Rohinforma6on abgebildet in Datenelementen Strukturspezifika2on inhaltliche Strukturierung komplexerer Einzelinforma6onen Abfolge / Verschachtelung Layoutspezifikia2on formale Beschreibung zur Repräsenta6on der Inhalte Einheitliche Vorlagen (Stylesheets) Anweisungen für Forma6erung und Posi6onierung des Inhalts Legende (aka Metadaten) Organisatorische Zusatzinforma6onen (z.b. Erstellungsdatum, Autor ) Inhaltliche Zusatzinforma6onen (Bedeutung / Aussagegegenstand 3

4 Grundgerüst einer XHTML Datei Letztes mal nicht ausführlich erwähnt: Kommentare <?xml version="1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head> <title>titel der Seite</title> </head> <body>  </body> </html> 4

5 Elemente zur Seitenstrukturierung Überschrijen: h1 h6 Textabsätze: p Zeilenumbruch: br Listen: ul bzw. ol für Liste, li für list items darin Zitate und Adressen Präforma6erter Text (wie im Editor eingegeben) Logische Auszeichnungen im Text Physische Auszeichnungen im Text Allgemeine Elemente für Textbereiche: div, span Trennlinien: hr Tabellen 5

6 Wiederholung CSS Defini6on Grundsätzlicher Aulau einer CSS Regel Selektor (adressiert Bereich) Deklara2on (definiert Layout des Bereichs) Selektor { Eigenschaft : Wert;} Beispiel: h1 { color:red; font-size:48px; } Nutzung von CSS Regeln separate CSS Datei Defini6on im Koplereich (Header) des HTML Dokuments Defini6on als Anribut eines Elements 6

7 CSS Stylesheets in HTML einbinden Defini6on im HEADER des HTML Dokuments Defini6on als externe Datei (empfohlen) Defini6on als Anribut eines Elements <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <title>das link-element für Stylesheets</title> <meta http-equiv="content-style-type" content="text/css"> <link rel="stylesheet" type="text/css" href="formate.css"> <style type="text/css"> /*... hier sind dateispezifische Formate erlaubt... */ </style> </head> <body> <h1 style="[element-spezifische Formate]">Das style-attribut</h1> </body></html> 7

8 Formate für HTML Elemente definieren <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <title>element-selektor</title> <style type="text/css"> * { color:blue; } h1 { font-size:300%; color:#ff0000; font-style:italic; border-bottom:solid thin black; } p,li { font-size:110%; line-height:140%; font-family:helvetica,arial,sans-serif;} h1 i { color:blue; font-style:normal; } h1.hinterlegt { background-color:#ffff00 } *.hinterlegt { background-color:#00ffff }.extra { background-color:#ff99ff }.extra.hinterlegt { background-color:#ff0000 } #header { color: #999;} </style></head><body> <h1 class="hinterlegt">h1 knallgelb hinterlegt</h1> <h2>h2 ganz normal, <span class="hinterlegt"> türkis <b class="extra">lila</b> hinterlegt</span></h2> <h3 class="extra hinterlegt">h3, rot hinterlegt</h3> <div id="header">xy</div> </body></html> 8

9 Einheiten (Auswahl) absolut / rela6v px: Pixel. Abhängig von der Pixeldichte des Ausgabegeräts, rela6v also von Ausgabegerät zu Ausgabegerät, absolut dagegen auf ein und das selbe Ausgabegerät bezogen. border width:3px; rela6v em: bezogen auf die Schrijgröße des Elements font size:1.2em; ex: Steht für bezogen auf die Höhe des Kleinbuchstaben x in diesem Element. font size:1.3ex; %: Prozent. Je nach CSS Eigenschaj rela6v zur elementeigenen Größe, oder zu der des Elternelements, oder zu einem allgemeineren Kontext. Bei nebenstehendem Beispiel ist die Angabe zur Zeilenhöhe (lineheight) rela6v zur Schrijgröße (font size) zu interpre6eren. 9

10 Das Box Modell 10

11 Publizieren einer HTML Datei 11

12 HTML Datei auf Webserver (sta6sch, ohne Rails) HTML Datei muss auf Webserver publiziert werden wenn Server auf lokalem Rechner: kopieren in den rich6gen Pfad wenn Server enuernter Rechner: hochladen in den rich6gen Pfad mit jp 12

13 SoSe 2007 SQ 10 "Contentmanagement" 13

14 Publizieren mit Rails wird in späterer Veranstaltung behandelt 14

15 XML extensible Markup Language Quelle: 15

16 XML voller Name: Extensible Markup Language deutsch: Erweiterbare Auszeichnungssprache Alterna6ve zu Binärformaten Mo6va6on: Vereinfachter Austausch von Daten zwischen verschiedenen Systemen, vor allem im Internet Menschenles und edi6erbar (zumindest teilweise) inhärente Erweiterungsmöglichkeit des Formats (für neue Versionen) W3C: eine offene, für Mensch und Maschine verständliche Informa6onslandschaj zu schaffen. 16

17 Metasprache und XML Sprachen XML ist allgemein nutzbar Namen der Strukturelemente (Tags) frei wählbar Strukturelle und Inhaltliche Einschränkung mit DTD (Document Type Defini6on) mit XML Schema Durch Einschränkung entstehen neue Sprachen Populäre XML basierte Sprachen: RSS MathML GraphML XHTML Scalable Vector Graphics (SVG) XML Schema mehr: siehe hnp://de.wikipedia.org/wiki/xml#sprachen 17

18 Beispieldokument XML (Quelle: Wikipedia) <?xml version="1.0" encoding="utf 8" standalone="yes"?> <verzeichnis> <6tel>Wikipedia Städteverzeichnis</6tel> <eintrag> <s6chwort>genf</s6chwort> <eintragstext>genf ist der Sitz von...</eintragstext> </eintrag> <eintrag> <s6chwort>köln</s6chwort> <eintragstext>köln ist eine Stadt, die...</eintragstext> </eintrag> </verzeichnis> 18

19 Beispieldokument HTML 4 (kein XML!) <!DOCTYPE HTML PUBLIC " //W3C//DTD HTML 4.01//EN" "hnp:// <head> <6tle>Beispiel</6tle> <h1>beispielseite</h1> <p>ein Absatz <P>Noch ein<br> Absatz <ol> <li>listelement <li>listelement </ol> <p><img src=bild.gif alt="bildmo6v"> 19

20 Beispieldokument XHTML (XML), analog zum HTML Bsp. <?xml version="1.0" encoding="uu 8"?> <!DOCTYPE html PUBLIC " //W3C//DTD XHTML 1.1//EN" "hnp:// <html xmlns="hnp:// xml:lang="de"> <head> <6tle>Beispiel</6tle> </head> <body> <h1>beispielseite</h1> <p>ein Absatz</p> <p>noch ein<br /> Absatz</p> <ol> <li>listelement</li> <li>listelement</li> </ol> <p> <img src="bild.gif" alt="bildmo6v" /> </p> </body></html> 20

21 Beispieldokument RSS (XML) <?xml version="1.0" encoding="uu 8"?> <rss version="2.0 > <channel> <6tle>Titel des Feeds</6tle> <link>url der Webpräsenz</link> <descrip6on>kurze Beschreibung des Feeds</descrip6on> <language>sprache des Feeds (z. B. "de de")</language> <copyright>autor des Feeds</copyright> <pubdate>erstellungsdatum("tue, 8 Jul :43:19")</pubDate> <image> <url>url einer einzubindenden Grafik</url> <6tle>Bild6tel</6tle> <link>url, mit der das Bild verknüpj ist</link> </image> <! Fortsetzung siehe nächste Folie > <item>... </item> </channel></rss> 21

22 Fortsetzung Beispieldokument RSS (XML) <?xml version="1.0" encoding="uu 8"?> <rss version="2.0 > <channel> <6tle>Titel des Feeds</6tle> <!... siehe vorherige Folie > <item> <6tle>Titel des Eintrags</6tle> <descrip6on>kurze Zusammenfassung des Eintrags</descrip6on> <link>link zum vollständigen Eintrag</link> <author>autor des Ar6kels, E Mail Adresse</author> <guid>eindeu6ge Iden6fika6on des Eintrages</guid> <pubdate>datum des Items</pubDate> </item> <item>... </item> </channel> </rss> 22

23 Beispieldokument SVG (XML) <?xml version="1.0" encoding="uu 8"?> <!DOCTYPE svg PUBLIC " //W3C//DTD SVG 1.1//EN" "hnp:// Graphics/SVG/1.1/DTD/svg11.dtd"> <svg xmlns="hnp:// xmlns:xlink="hnp:// xmlns:ev="hnp:// events" version="1.1" baseprofile="full" width="800mm" height="600mm"> <path d="m L C Q " /> <circle cx="100" cy="100" r="50" /> <ellipse cx="100" cy="100" rx="50" ry="20" /> <rect x="100" y="100" width="100" height="200" /> <! usw > </svg> 23

24 Beispiel Binärdatei (kein XML) [extern gezeigt, nicht auf Folie] 24

25 XML: Geschichte und Aulau von XML Dokumenten 25

26 Historie IBM Generalized Markup Language (GML) aus den 60er Jahren, von IBM machte Dokumente les und schreibbar für verschiedene Systeme :h1.erstes Kapitel: Einführung :p.gml unterstützt hierarchische Container, wie etwa :ol :li.geordnete Listen, :li.ungeordnete Listen, :li.definitionslisten :eol. sowie einfache Strukturen. 26

27 Historie SGML Standard Generalized Markup Language deutsch: Normierte Verallgemeinerte Auszeichnungssprache wurde u.a. zur Defini6on von HTML genutzt sieht aus wie XML, erlaubt aber freie Verschachtelung 27

28 Physischer Aulau En6täten erste En6tät ist das Dokument selbst &name; ist eine En6tätenreferenz meist werden nur Zeichenen6täten verwendet ä = ä Ä = Ä " = " In XML wenige definiert für < > " und Angabe mit Nummer &x1234; siehe hnp://de.sel tml.org/html/referenz/zeichen.htm für HTML En6täten XML Deklara6on Dokumennypdefini6on Baumstruktur 28

29 Logischer Aulau Elemente in Baumstruktur bestehend aus Start Tag und End Tag oder aus selbsschließendem Tag (Empty Element Tag) Anribute in Starnag <a b="c" /> Verarbeitungsanweisungen <?ziel parameter?> Kommentare <! kommentar > Text 29

30 DOM Baumstruktur Wird aus Elementen geparsed DOM: Document Objekt Model ist die Baumdarstellung der HTML Seite Baum (Graphentheorie): Graph (Menge von Knoten und Kanten) in Monohierarchie Häufig verwendete Datenstruktur: Verzeichnisstruktur, HTML, XML,... 30

31 Wohlgeformt und Valide Wohlgeformt genau ein Wurzelelement (<html>) alle Elemente besitzen Begin und End Tag oder sind selbstschließend: <x>bla</x> bzw. <x/> Beginn und End Tags sind ebenentreu paarig verschachtelt pro Element darf Anributname nur einmal vorkommen Valide Wohlgeformt und nach Regeln der Gramma6k Gramma6k z.b.: HTML 4 Transi6onal, XHTML 1.0 Strict 31

32 XML: Verarbeitung in Programmen 32

33 Verarbeitungskriterien Drei grundsätzliche Aspekte beim Zugriff: Wie erfolgt der Zugriff auf die XML Datei: sequen6ell wahlfrei Wie ist der Ablauf beim Zugriff auf die XML Daten gestaltet? Push: Ablau ontrolle des Programms liegt beim Parser Pull: Ablau ontrolle im Code, der den Parser aufruj Wie erfolgt das Baumstrukturmanagement der XML Daten hierarchisch verschachtelt 33

34 Programma6scher Zugriff durch XML Prozessor (auch XML Parser genannt) stellt ein API (Applica6on Programming Interface = Programmierschninstelle) zur Verfügung, über das die Anwendung auf das XML Dokument zugreij Drei grundlegende Verarbeitungsmodelle DOM: XML Dokument wird als Baumstruktur repräsen6ert gewährt wahlfreien Zugriff auf die einzelnen Bestandteile der Baumstruktur erlaubt neben dem Lesen auch die Manipula2on der Baumstruktur erlaubt nach Manipula6on auch das Zurückschreiben in ein XML Dokument DOM ist sehr speicherintensiv. SAX: XML Dokument wird als sequen2eller Datenstrom repräsen6ert ruj für Ereignisse Rückruffunk6onen (callback func6on) auf (z.b. element start ) nur lesen, nicht speicherintensiv Pull API: ähnlich SAX, aber Ablau ontrolle im Programm Es gibt noch weitere Verarbeitungsmodelle 34

35 Andere Sprachen zur Verwendung von XML XSLT: Transforma6on von XML Dokumenten XPath: Abfragesprache, um Teile eines XML Dokumentes zu adressieren CSS Selektoren: Abfragesprache, um Teile eines XHTML Dokumentes zu adressieren (wird aber auch manchmal für XML allgemein verwendet) XPointer: Erweiterung von XPath, kodiert XPath in URI XLink: Verlinkt XML Dokumente (wie <a href="pfad >...</a> in HTML) XQuery: Abfragesprache für XML Datenbanken 35

36 Zusammenfassung Allgemeine, erweiterbare Struktursprache Menschen und Maschinenlesbar Vereinfacht Austausch von Daten Allgemeine Metasprache und spezialisierte Sprachen Wohlgeformtheit (allgemeine Struktur ist korrekt) Validierung (Dokument entspricht spezieller Gramma6k) Viele Standards zur Verarbeitung (z.b. XSLT), Adressierung (XPath,XPointer), Abfrage (XQuery) 36