Edirom Summer School 2010



Ähnliche Dokumente
Meine erste Homepage - Beispiele

Scalable Vector Graphics (SVG)

HTML5. Wie funktioniert HTML5? Tags: Attribute:

X-Technologien. Ein Überblick. Ulrike Henny. IDE Summer School 2013, Chemnitz

Erstellen eines HTML-Templates mit externer CSS-Datei

Dokumentation Externe Anzeige von Evento Web Dialogen

SCRIBUS WORKSHOP Handout Gimp

CSS-Grundlagen. Etwas über Browser. Kapitel. Die Vorbereitung

Online-Publishing mit HTML und CSS für Einsteigerinnen

Webseiten und Web-Apps grafisch gestalten mit HTML5 Canvas ohne Flash und sonstige Tools

Schiller-Gymnasium Hof

Errata-Liste zum Kurs: Einführung in XML (2. Auflage)

WEBSEITEN ENTWICKELN MIT ASP.NET

Updatehinweise für die Version forma 5.5.5

Online-Publishing mit HTML und CSS für Einsteigerinnen

GEONET Anleitung für Web-Autoren

... MathML XHTML RDF

HTML Programmierung. Aufgaben

CSS. Cascading Stylesheets

Übungsaufgaben zu XML:

HTML-Grundlagen (X)HTML:

Layoutmodelle. Steffen Schwientek Große Klostergasse Friedberg schwientek@web.de Web :schlaukopp.org

SJ OFFICE - Update 3.0

Proseminar: Website-Managment-System. NetObjects Fusion. von Christoph Feller

OP-LOG

Um ein solches Dokument zu erzeugen, muss eine Serienbriefvorlage in Word erstellt werden, das auf die von BüroWARE erstellte Datei zugreift.

Webdesign-Multimedia HTML und CSS

Webseiten sind keine Gemälde. Webstandards für ein besseres Web. Webstandards für ein besseres Web

BFV Widgets Kurzdokumentation

Im Original veränderbare Word-Dateien

Professionelle Seminare im Bereich MS-Office

Crashkurs Webseitenerstellung mit HTML

Verwalten Sie Ihre Homepage von überall zu jeder Zeit! Angebote und Informationen auf

Für die Verwendung des Wikis wird dringend der Microsoft Internet Explorer Version 7.0 empfohlen!

Universal Dashboard auf ewon Alarmübersicht auf ewon eigener HTML Seite.

Die Formatierungsregeln (die so genannte Wiki-Syntax) für Texte in DokuWiki sind zu großen Teilen die selben, wie in anderen Wiki-Systemen.

Als Lehrende/r oder Mitwirkende/r einer Veranstaltung können Sie das Wiki unter dem Funktionsreiter + aktivieren und deaktivieren.

Die aktuelle Version des SPIEGEL-Bestseller-Widgets können Sie auf unserer Website unter Entwicklertools herunterladen.

XML Tutorium mit Oxygen. Oxygen Version 9.3!!

Design anpassen eine kurze Einführung

Ihr CMS für die eigene Facebook Page - 1

Standard Daten-Backup-Script

Windows 7: Neue Funktionen im praktischen Einsatz - Die neue Taskleiste nutzen

AdOps Technische Spezifikationen

Facebook I-Frame Tabs mit Papoo Plugin erstellen und verwalten

Internet Explorer Version 6

Handbuch. timecard Connector Version: REINER SCT Kartengeräte GmbH & Co. KG Goethestr Furtwangen

Projekte Packen, Kopieren und Versenden

Drägerware.ZMS/FLORIX Hessen

Seite 1. Datum einfügen

Barrierefreie Webseiten erstellen mit TYPO3

LEHRSTUHL FÜR DATENBANKEN

Containerformat Spezifikation

Datenaustauschformate. Datenaustauschformate - FLV

Mit der Maus im Menü links auf den Menüpunkt 'Seiten' gehen und auf 'Erstellen klicken.

Sichere Anleitung Zertifikate / Schlüssel für Kunden der Sparkasse Germersheim-Kandel. Sichere . der

IINFO Storyboard

ACHTUNG: Es können gpx-dateien und mit dem GP7 aufgezeichnete trc-dateien umgewandelt werden.

A361 Web-Server. IKT-Standard. Ausgabedatum: Version: Ersetzt: Genehmigt durch: Informatiksteuerungsorgan Bund, am

Produktschulung WinDachJournal

Herstellen von Symbolen mit Corel Draw ab Version 9

AGROPLUS Buchhaltung. Daten-Server und Sicherheitskopie. Version vom b


Klausurteilnehmer. Wichtige Hinweise. Note: Klausur Informatik Programmierung, Seite 1 von 8 HS OWL, FB 7, Malte Wattenberg.

Version 3.2 vom

Was ist SVG? Inhalt: Allgemeines zu SVG Besondere Merkmale Vor- und Nachteile Dateiformat Standardobjekte Koordinatensystem Beispiele Links

Vererbung in der OOP

TechNote. Produkt: TWINFAX 7.0 (ab CD_24), TWINFAX 6.0 Modul: SMTP, T611, R3 Kurzbeschreibung: Briefpapier- und Mailbodyunterstützung

Einfügen von Bildern innerhalb eines Beitrages

Professionelle Seminare im Bereich MS-Office

PowerPoint vertonen. by H.Schönbauer 1

Installationsanleitung CLX.PayMaker Office (3PC)

ITF2XML. Transferservice. Version 1.1. Tel.: 044 / Fax: 044 / CH-8005 Zürich

Inhalte mit DNN Modul HTML bearbeiten

Installation und Dokumentation juris Smarttags 1.0

Wichtige Information zur Verwendung von CS-TING Version 9 für Microsoft Word 2000 (und höher)

Microsoft Access 2013 Navigationsformular (Musterlösung)

Dokumentation von Ük Modul 302

BEDIENUNGSANLEITUNG: EINREICH-TOOL

Verknüpfung zum Angebotsassistenten erstellen

Webseitenintegration. Dokumentation. v1.0

Tutorial. In diesem Tutorial möchte ich die Möglichkeiten einer mehrspracheigen Web-Site erläutern.

HTML Teil 2. So kann man HTML-Seiten mit <div> und CSS gestalten. So sehen einfache Formulare aus

modern - sharp - elegant

In dieser Anleitung wird beschrieben, wie Sie eine HTML-Seite in Macromedia Dreamweaver mit blinden Tabellen strukturieren können.

YouTube: Video-Untertitel übersetzen

Netzwerkeinstellungen unter Mac OS X

Kapitel 3 Frames Seite 1

EnergyDataView. Benutzerhandbuch. Version Thüga AG MeteringService

Datensicherung und Wiederherstellung

Vermeiden Sie es sich bei einer deutlich erfahreneren Person "dranzuhängen", Sie sind persönlich verantwortlich für Ihren Lernerfolg.

Maturaarbeit: Formatieren mit Word 2010

ACDSee 2009 Tutorials: Rote-Augen-Korrektur

Die Beschreibung bezieht sich auf die Version Dreamweaver 4.0. In der Version MX ist die Sitedefinition leicht geändert worden.

Eine Anwendung mit InstantRails 1.7

Es gibt zwei Wege die elektronischen Daten aus Navision zu exportieren.

Die Entwicklung eines Glossars (oder eines kontrollierten Vokabulars) für ein Unternehmen geht üblicherweise in 3 Schritten vor sich:

Anwendungsprotokolle: HTTP, POP, SMTP

Transkript:

Edirom Summer School 2010 Workshop: XML und XML-Technologien 21.-24. November 2010

Anwendungen von XML Eine Anwendung von XML ist kein konkretes Programm, sondern ein Vokabular für einen beschränkten Aufgabenbereich. Beispiele : TEI (Text Encoding Initiative) MEI (Music Encoding Initiative) DocX (Textverarbeitung Microsoft) SVG (Scalable Vector Graphics) XHTML (extensible HyperText Markup Language) CSS (Cascading StyleSheets) Java /.NET (De-)Serialisierung

Bedingungen beim Einsatz von XML Eine Anwendung von XML löst eine Problemstellung mit den Methoden von XML zu den Bedingungen ( Kosten ), unter denen XML operiert: Keine Binärdaten (werden gekapselt oder extern gehalten) Keine Verschlüsselung (des Datencontainers) Geringer Kompressionsgrad (XML Dokumente sind geschwätzig ) Höherer Aufwand zum Parsing (als ASCII Textdateien) Änderungen brauchen Aufwand (als ASCII Textdateien) Ob Einsatz von XML sinnvoll ist, erfordert Kosten/Nutzen Abwägung

TEI (Text Encoding Initiative) TEI ist ein Textformat für Kodierung und Austausch von Texten De-facto Standard in den Geisteswissenschaften Spezialgebiete: Editionswissenschaften und Linguistik Ausgerichtet auf wiss. Arbeit (im Gegensatz zur Freizeitlektüre) Das Schema für TEI ist verfasst in der Metasprache ODD, aus dem ein Schema in XSD, DTD oder RelaxNG abgeleitet werden kann Dateiendung:.tei Weitere Infos Summer School Workshop TEI (ab 27.10.2010)

TEI Beispiel <?xml version="1.0" encoding="utf-8"?> <TEI xmlns="http://www.tei-c.org/ns/1.0"> <teiheader> <filedesc> <titlestmt> <title>hallo Welt!</title> </titlestmt> <publicationstmt> <p>demo für Wikipedia</p> </publicationstmt> <sourcedesc> <p>originales Werk, keine Vorlage</p> </sourcedesc> </filedesc> </teiheader> <text> <body> <p>hallo Welt!</p> </body> </text> </TEI>

MEI (Music Encoding Initiative) Verwandt mit TEI, jedoch optimiert für wissenschaftliche Musiknotation Neben reiner Notation auch geeignet für nichtgrafische Arbeit Alleinstellungsmerkmal Nichteindeutigkeit (Varianten) Open-Source Konkurrenz zu MusicXML und proprietären Binärformaten Dateiendung:.mei Weitere Infos Summer School Workshop MEI (ab 30.10.2010)

MEI Beispiel <?xml version="1.0" encoding="utf-8"?> <meixmlns='http://www.music-encoding.org/ns/mei' xmlns:xsi='http://www.w3.org/2001/xmlschema-instance' xsi:schemalocation="http://music-encoding.org/mei/schemata/2010-05/xsd/mei-all.xsd" /> <meihead> <filedesc> <titlestmt> <title>tonleiter</title> </titlestmt> <pubstmt/> <sourcedesc> <source xml:id="tonleiter.mei_src.2"/> </sourcedesc> </filedesc> <encodingdesc/> </meihead> <music> <body> <mdiv> <score> <scoredef meter.unit="4" meter.count="4" key.sig="2s" key.mode="major"> <staffgrp> <staffdef n="1" midi.div="1" label.full="sopran" key.sig="2s" key.mode="major" clef.shape="g" clef.line="2"/> <staffdef n="2" midi.div="1" label.full="alt" key.sig="2s" key.mode="major" clef.shape="f" clef.line="2"/> </staffgrp>

DocX (Textverarbeitung Microsoft) Das Open Office XML Format (DocX) ist von Microsoft konzipiert, um ab Word 2007 (endlich) das alte Doc-Format abzulösen. Prinzipiell reine Auszeichnungssprache wie HTML Interne Struktur: ZIP-komprimierte Hülle, XML Inhalte Microsoft Konkurrenz zu ODF (XML Format von Open Office :) Mehrere Ausprägungen: Textdokument, Präsentation und Tabellen Dateiendung:.docx,.pptx,.xlsx

Übung: DocX entpacken Die Containerstruktur von DocX Dateien lässt sich öffnen, um den Dokumentinhalt manuell zu lesen: sample.docx umbenennen in sample.zip Im Verzeichnis befindet sich eine Ordnerstruktur mit einer Definitionsdatei: [Content_Types].xml Im Unterverzeichnis word suchen nach document.xml Diese Datei im Editor öffnen Wer mit Word arbeitet, verändert diese komplexe Dateistruktur, ohne das zu bemerken: Transparenz in der Informatik

DocX Beispiel: document.xml in sample.docx <?xml version="1.0" encoding="utf-8" standalone="yes"?> <w:worddocument xmlns:ve=" http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:o="urn:schemas-microsoft-com:office:office" [ ] > <w:body> <w:p w:rsidr="00ea68dc" w:rsidrpr="00c703ac" w:rsidrdefault="00ea68dc" w:rsidp="00ea68dc"> <w:ppr> <w:rpr> <w:lang w:val="es-es-ts"/> </w:rpr> Der Textinhalt </w:ppr> <w:r> <w:t xml:space="preserve">hallo Welt!</w:t> </w:r> </w:p> <w:sectpr w:rsidr="001a6335" w:rsidsect="001a6335"> [...] </w:sectpr> </w:body> </w:worddocument>

SVG (Scalable Vector Graphics) SVG spezifiziert statische und dynamische 2D Vektorgrafiken. Vektorgrafiken sind i.d.r enorm platzsparend im Vergleich zu Bitmap Grafiken, da sie gesamte Inhaltsbereiche beschreiben Vektorgrafiken können beliebig vergrössert werden, ohne dass Artefakte sichtbar werden (Klötzchenbildung) Darstellbar durch alle aktuellen Webbrowser (bis auf IE vor v.9) Dateiendung:.svg

SVG (Scalable Vector Graphics) Unterschied zu sog. Rastergrafiken: Vektorgrafik ist aus grafischen Primitiven aufgebaut: Pfad, Kreis, Ellipse, Rechteck, Linie, Polygon & Text Diese Primitiven ergeben im Zusammenspiel ein komplexeres Bild Auch beim Vergrössern bleiben diese Strukturen zueinander im Verhältnis, anders als bei den Pixeln einer Rastergrafik

SVG Beispiel <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/graphics/svg/1.1/dtd/svg11.dtd"> <svg width="100%" height="100%" version="1.1" Vektorpunkt: X,Y xmlns="http://www.w3.org/2000/svg"> <polygon points="220,100 300,210 170,250" style="fill:#cccccc;stroke:#000000;stroke-width:1"/> </svg> Füllfarbe: hellgrau Rendern

Block 5: Anwendungen Übung: SVG benutzen Nutzen Sie einen Editor sowie den Firefox Browser, um die folgenden geometrischen Formen zu zeichnen und anzusehen: Blaues Dreieck (Blau: #0000FF) Rotes Quadrat (Rot: #FF0000) Grünes Fünfeck (Grün: #00FF00) Lila Trapez (Lila: #??????)

XHTML (extensible HyperText Markup Language) Textbasierte Auszeichnungssprache, Neuformulierung von HTML in XML Als Grundlage XML statt komplizierterem SGML XML-konforme Tags: Anstatt von <br> (HTML) verwende <br/> (XHTML) Namespaces (Einbettung anderer XML-Segmente möglich) X(HT)ML Parser sind strikt, HTML Parser dagegen fehlertolerant Diese Fehlertoleranz macht Probleme bei automatischer DV Visuelle Gestaltung von XHTML-Elementen ab XHTML Version 2.0 nur noch über externes CSS Dateiendung:.xhtml

XHTML Beispiel Vergleich HTML(links) mit XHTML (rechts) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/strict.dtd"> <html> <head> <title>beispiel</title> </head> <body> <h1>beispielseite</h1> <p>ein Absatz <P>Noch ein<br> Absatz <ol> <li>listelement <li>listelement </ol> <p> <img src=bild.gif alt="bildmotiv"> </body> </html> <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/tr/xhtml11/dtd/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de"> <head> <title>beispiel</title> </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="bildmotiv" /> </p> </body> </html>

CSS (Cascading StyleSheets) - Kein XML! Deklarative Stylesheet ( Formatvorlage ) Sprache für visuelles Layout Sprache ist kein Dialekt von XML, wird aber häufig in Verbindung mit XML Dateien zur Präsentation von Daten eingesetzt Konkurrenz zur XML Formatierungssprache XSL-FO Syntax: Hierarchisch geschachtelte Blöcke von Deklarationen Anwendung: Zu präsentierendes Datenobjekt, meist (X)HMTL oder XML Datei, enthält entweder Verweis auf externe CSS Datei oder CSS Inhalt wird in Datendatei eingefügt Vorteil: Trennung von Inhalt und Design Weitverbreiteter de-facto-standard im Internet Dateiendung:.css

CSS Beispiel Deklaration im CSS note { position: relative; left: 15%; width: 80%; padding: 30px; padding-bottom: 45px; border: 0px solid black; line-height: 1.5em; color: black; font-weight: bold; text-align: justify; background-color: #eeeeee; } Einbindung im XHTML <p class="note"> Dies ist ein kleiner Testabsatz. </p> Browser Visuelle Präsentation

Übung: CSS benutzen Benutzen Sie CSS für visuelle Präsentation Finden Sie die beiden Dateien css_xhtml_testdatei.xhtml und css_testdatei.css Öffnen Sie die XHTML Datei im Firefox, die CSS Datei im Editor Verändern Sie nur die CSS Datei, und erwirken Sie die folgenden Änderungen: Überschrift weiss auf blauem Hintergrund Note schwarz auf rotem Hintergrund Text blau auf weissem Hintergrund Sobald fertig: Freies Experimentieren ist erwünscht

Block 5: Anwendungen Möglichkeiten von CSS Was mit CSS alles möglich ist, wird durch den CSS Zen Garten veranschaulicht: Beim Wechseln des Designs bleibt die HTML-Seite gleicht, nur das Stylesheet ändert sich trotzdem wirkt die Seite total verändert Link: http://www.csszengarden.com/

Java /.NET (De-)Serialisierung Moderne Programmiersprachen bieten Konzepte, die das Programmieren vereinfachen, auch unter Zuhilfenahme von XML. Dazu zählen: Modellierung (Planung von Programm-Architektur) Nachrichtentausch (Austausch zwischen Programmteilen) Persistenz (Längerfristige Speicherung von Programmdaten) Hier wird kurz die Persistenz durch Serialisierung beleuchtet. Die Idee ist es, XML Strukturen direkt mit Programmcode zu verknüpfen, um damit schnell und zuverlässig korrekten Programmcode zu produzieren

Java /.NET (De-)Serialisierung Beispiel: Serialisierung mit Java JAXB XSD XML Java Klassen

Ende des Blocks 5