Lektion 3: Dokumente, Vernetzung und Wissen

Transkript

1 Lektion 3: Dokumente, Vernetzung und Wissen Helmar Burkhart Fachbereich Informatik Universität Basel 3-1 Lernziele und Inhalt Lek0on 3 Dokumente im Kontext des Wissenscha3sbetriebs begreifen Werkzeuge für Dokumentverarbeitung anwenden Anwendungen auf Desktop und Cloud sehen 1. Einführung World- Wide Web 2. Hypertext Markup Language HTML 3. WissenschaBliche Dokumente mit L A T E X 4. KollaboraGves Arbeiten: Versionenmanagement 3-2 1

2 Abläufe im Wissenscha>sbetrieb Welche Informatik- Werkzeuge bieten eine Unterstützung? Recherchen Studien Projekte Ideen Erkenntnisse Resultate Druck Web Publikationen Präsentationen 3-3 Klassisches Arbeiten am Personal Computer Seit den 1980er Jahren sind Editoren eine der wichtigsten Anwendungen von Computer. Dokumente werden per Interaktion von Mensch und Maschine verändert. WYSYWYG-Editor (Word, Writer) Dokumentcompiler (L A T E X) Hauptspeicher -puffer Editor Persistenz Lokale Verarbeitung 3-4 2

3 "Büro"- Anwendungen u LibreOffice: Writer, Math, Calc, Draw, Impress, Base hsp://de.libreoffice.org/ h@p://en.wikipedia.org/wiki/libreoffice hsp://en.wikipedia.org/wiki/opendocument u Office 2013: Word, Excel, Powerpoint, Visio, Access, Frontpage, hsp://office.microsob.com/ KOSTEN- PFLICHTIG GRATIS 3-5 Markup-Sprachen to markup = "Wie macht man Seiten?" Markup-Sprachen: Sprachen, die mittels eingestreuter Direktiven die Struktur und das Aussehen eines Dokuments bestimmen. XML extended Markup Language. SVG Scalable Vector Graphics HTML HyperText Markup Language. LATEX Technische Dokumente 3-6 3

4 XML: Eine Meta- Sprache! XML / DTD XSD SVG MathML HTML Definiert Syntax und Grammatik für Dokumente 3-7 Wohlgeformtheit XML Dokumente müssen wohlgeformt (well- formed) sein: Die erste Zeile idengfiziert das Dokument als xml. Es gibt ein äusserstes Element, das alle anderen umschliesst. Reguläre Schachtelung: Jedes Element hat entweder Beginn und Ende oder ist ein "leeres" Element. A5ribute eines Elements sind eindeu8g. A5ributwerte stehen in Anführungszeichen. Gross- Klein Schreibung wird unterschieden.... h@p:// xml/ 3-8 4

5 Desktop- Werkzeug für Mindmap: FreeMind Eine Mindmap ist eine visuelle Darstellung eines Themas bzw. der Gedanken zu einem Thema. u hsp://freemind.sourceforge.net u FreeMind arbeitet mit einem XML- basierten Datenansatz. FreeMind.mm Texteditor 3-9 FreeMind Gramma0k (vereinfacht) MindMap::= <map> [Tree] </map> Tree::= <node [TEXT= NodeDesc] [POSITION=Pos] [FOLDED= "true"] [Tree] </node> Leaf Leaf::= <node [TEXT= NodeDesc] [POSITION=Pos]/> NodeDesc::= "ASCII-Sequence" Pos::= "left" "right" <map> <node TEXT="Tiere"> <node TEXT="Affen"/> <node TEXT="Elefanten"/> </node> </map>

6 Scalable Vector Graphics SVG SVG ist eine XML-basierte Sprache zum Generieren von Grafikelementen. SVG ist ein Vektorformat. SVG kann in HTML eingebettet werden <svg width="400" height="110"> <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width: 3;stroke:rgb(0,0,0)"> </svg> SVG Tutorial mit Beispielen und zum Selberüben: Denken und Arbeiten im Internet Seit den 1990er Jahren haben sich Internet- Anwendungen sprunghab verbreitet: , WWW, Skype,... Mail- Client/ Mailserver bzw. Web- Client / Webserver sind sind am Internet angeschlossene Rechner mit ihren jeweiligen Programmen. Die KommunikaGon erfolgt über standardisierte Protokolle (SMTP, HTTP,...). Internet

7 Der globale Informa0onsverbund bla bla S 1 bla bla R 1 Browser R 0 Internet R i = Router S i = Server alb alb R 2 alb alb Client Server S 2 Interface 3-13 Moderne Nutzung: Anwendungen nach Bedarf

8 Cloudbasiertes Zeichnungsprogramm Cloud- basierte Anwendungssuite

9 Cloudbasierte Mindmap Import von Desktop-Dokumenten: FreeMind, Xmind, Mindjet MindManager,Textdatei mit Leerzeichen oder Tabs eingerückt Cloudbasierte Informa0onsverwaltung Schnelle Ablage Strukturierte Ablage

10 World Wide Web (www) CERN 1991: Tim Berners- Lee entwickelt HTML 1.0 und Browser- Prototyp. Einfacher Zugriff auf Texte, Grafiken und mulgmediale Elemente. Vom Computer zum globalen Verbund. Protokoll: Sprachen HTTP (HyperText Transfer Protocol) HTML (HyperText Markup Language) CSS (Cascading Style Sheet) JavaScript Tim Berners-Lee 3-19 Web Browser

11 Prinzip des Webzugriff Web-Browser (Client) Benutzerschnittstelle Browser Engine Rendering Engine <html> <head> <title>erstes Beispiel</title> </head> <body> <h1>herzlich willkommen</h1> Haben Sie schon Ihre eigene Homepage? </body> </html> Web-Server 3-21 Webzugriff technisch Browser und Webserver interagieren durch Request / Response AkGonen (hsp- Protokoll). Es gibt Browser- Plugins um dies zu visualisieren. Bsp. Chrome: Anzeigen > Entwickler > Entwickler- Tools > Network

12 HTML Markup- Sprache u HTML (HyperText Markup- Language) ist eine Klasse von Beschreibungs- sprachen für Webdokumente. u Aktuell: HTML 5. u Inhalt HTML Dokumentsicht Layout CSS 3-23 HTML 5 Hello World <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>hello World in HTML5</title> </head> <body> <p>hello World!</p> </body> </html>

13 Informa0onsquellen Beispiele und Tutorials fürs Selbststudium: Refcard CoreHTML (Ablage im Probinder). W3C Spezifikationen: HTML Edi0erwerkzeug Es gibt heute zahlreiche Editoren welche die Erstellung von Webseiten und Websites unterstützen. Für erste Experimente reicht ein kleiner Übungseditor, der frei verfügbar und konfigurierbar ist (Ablage im Probinder). Quelle:

14 Elemente von Webseiten Es gibt zahlreiche Elemente und ASribute zum Aujau von Webseiten: Text ÜberschriBen Aufzählungen Hyperlinks Tabellen Bilder, Audio und Video. Quelle: Aufzählungen Listen sind vom Fliesstext getrennte Absätze für Aufzählungen: Bulletlisten sind unnummeriert und werden durch <ul>... </ul> definiert. Nummerierte Listen werden misels Ziffern oder Buchstaben gekennzeichnet und sind durch <ol>... </ol> definiert. Bei beiden Listentypen werden die Einträge misels <li>... </li> definiert

15 Hyperlinks u Ein Hyperlink (kurz Link, dt. Verknüpfung) ist eine Verbindung zwischen Webdokumenten. Die Verbindung erfolgt dabei misels Angabe eines Ankers (z. B. Angabe einer URL). <a>...</a> definiert den Anker. href = URL definiert das Ziel. Link zur <a href=" Home Page der Uni Basel</a> 3-29 Pixelgrafiken einbinden HTML erlaubt das einfache Einbinden von Bilder in Webdokumente: <img src="quelle" width="breite" height="höhe"> Grössenangaben sind in Pixel Pixelgrafik: PNG: Portable Network Graphics (.png) GIF: Graphics Interchange Format (.gif) JPEG: Joint Photographic Experts Group (.jpg)

16 Vektorgrafik SVG einbinden <!DOCTYPE html> <html> <body> <svg height="210" width="500"> <polygon points="100,10 40, ,78 10,78 160,198" style="fill:lime;stroke:purple;stroke-width: 5;fill-rule:nonzero;"/> Sorry, your browser does not support inline SVG. </svg> </body> </html> 3-31 Bildanordnung Alles was detaillierten Layout betrifft, kann und soll in Stylesheets (CSS) spezifiziert werden. The align attribute of <img> is not supported in HTML5. Use CSS instead. Hamburger Photographen Erich Andres. <img src="car.gif" width="320" height="240" style="float:left"> Käfer bitten zur Vernissage: In unserer Galerie finden Sie CSS behandeln wir hier nur am Rande. Informationen und Beispiele:

17 Tabellen Tabellen dienen zur Darstellung von InformaGon in Zeilen und Kolonnen. Die Tabellenelemente heissen Zellen. <table>...</table> Kolonne Überschrift <caption>...</caption> Überschriftszelle <th>...</th> Datenzelle <td>...</td> Zeile <tr>...</tr> 3-33 Tabellenbeispiel <table> <caption>kinderspiel</caption> <tr> <th>buchstabe</th><th>stadt</th><th>land</th><th>fluss</th> </tr> <tr> <td>a</td><td>aarau</td><td>albanien</td><td>aare</td> </tr> <tr> <td>l</td><td>london</td><td>liberia</td><td>limmat</td> </tr> <tr> <td>z</td><td>zeiningen</td><td>zaire</td><td></td> </tr> </table>

18 Reihen- /Kolonnenüberspannung rowspan definiert eine Reihenüberspannung. colspan definiert eine Kolonnenüberspannung. <tr><td colspan=3>zelle A <td rowspan=3>zelle B</tr> <tr><td rowspan=2>zelle C <td colspan=2>zelle D</tr> <tr><td>zelle E <td>zelle F</tr> <tr><td colspan=4>zelle G</tr> 3-35 Prüfwerkzeug: W3C Validierer u hsp://validator.w3.org/ ist ein Validierungsdienst für HTML- Seiten. u Der Dienst ist ähnlich der Syntaxüberprüfung eines Compilers. u Überprüfung einer URL, Datei- Upload oder direkte Eingabe in einem Fenster. u Ebenfalls vorhanden: Link- Checker