1 / 35

Praktikum zu Wirtschaftsinformatik 1: Internet- / Datenbankapplikationen W1321-02 – WS 2006/2007

Praktikum zu Wirtschaftsinformatik 1: Internet- / Datenbankapplikationen W1321-02 – WS 2006/2007. Grundlagen Kommunikationssysteme HTML/CSS. Agenda. Kommunikationssysteme OSI-Referenzmodell Client-Server-Architektur Webserver Tomcat/Cocoon HTML Definition Allg. Syntax Spezielle Tags

laith-wynn
Download Presentation

Praktikum zu Wirtschaftsinformatik 1: Internet- / Datenbankapplikationen W1321-02 – WS 2006/2007

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Praktikum zu Wirtschaftsinformatik 1: Internet- / DatenbankapplikationenW1321-02 – WS 2006/2007 Grundlagen Kommunikationssysteme HTML/CSS

  2. Agenda • Kommunikationssysteme • OSI-Referenzmodell • Client-Server-Architektur • Webserver • Tomcat/Cocoon • HTML • Definition • Allg. Syntax • Spezielle Tags • Formatierung • zwischendurch Beispiele • CSS • Definition • Einbindung in HTML Wirtschaftsinformatik 1

  3. Kommunikationssysteme Einige (wenige) Grundlagen

  4. ISO-OSI-Referenzmodell OSI = Open System Interconnection • 7-Schichten-Referenzmodell für herstellerunabhängige Kommunikations-systeme • Jede Schicht stellt darüberliegender Schicht bestimmte Dienste zur Verfügung und nutzt selbst Dienste der darunterliegenden Schicht Wirtschaftsinformatik 1

  5. ISO-OSI-Referenzmodell Protokolle: Anwendungs-orientiert HTTP FTP HTTPS TCP UDP Transport-orientiert IP Ethernet Token Ring Quelle: Abdus Salam International Centre for Theoretical Physics http://www.ictp.trieste.it/~radionet/1998_school/networking_presentation/page6.html • Ablauf Kommunikation • logische, horizontal Verbindung  Protokoll • Physische, vertikale Kommunikation zwischen Schichten Wirtschaftsinformatik 1

  6. Client-Server-Architektur DB [Quelle: Stahlknecht, Hasenkamp: Einführung in die Wirtschaftsinformatik. Springer-Verlag, Berlin et al., 11. Auflage 2005] Einstufig: Server hält Daten und Anwendungen vor Client-Zugriff bzw. eigene Anwendungen und Daten Mehrstufig: Getrennte Server für Daten und Anwendungen Client-Zugriff sowohl auf Daten- als auch auf Anwendungsserver Client und Server müssen nicht notwendigerweise zwei getrennte Maschinen sein. Es handelt sich mehr um Dienste/Prozesse. Wirtschaftsinformatik 1

  7. Statischer Webauftritt: Rückgabe gespeicherter (HTML)-Dokumente Generierter Webauftritt: Rückgabe zum Zeitpunkt der Anfrage erzeugter (HTML)-Dokumente Bsp. Spiegel Online Dynamischer Webauftritt: Rückgabe erzeugter (HTML)-Dokumente zum Zeitpunkt der Anfrage und durch Benutzereingabe Webserver Quelle: Langham, Matthew: Cocoon. Indianapolis, Ind. [u.a.]  : New Riders , 2003 Wirtschaftsinformatik 1

  8. Cocoon Darstellung Webserver + ScriptEngine (z.B. Tomcat) Logik Daten XML Quelle: Langham, Matthew: Cocoon. Indianapolis, Ind. [u.a.]  : New Riders , 2003 Wirtschaftsinformatik 1

  9. HTML Hypertext Markup Language

  10. HTML - Definition „Die Hypertext Markup Language (HTML), oft auch kurz als Hypertext bezeichnet, ist eine textbasierte Auszeichnungssprache zur Darstellung von Inhalten wie Texten, Bildern und Hyperlinks in Dokumenten. HTML-Dokumente sind die Grundlage des World Wide Web und werden von einem Webbrowser dargestellt. (…)“ [Quelle: http://de.wikipedia.org/wiki/Html abgerufen am 2006-10-16] Anmerkung: Wir werden uns im Praktikum an die XHTML 1.0 – Konventionen halten. Größte Unterschiede zu HTML 4.01: alle Tags werden klein geschrieben und in der richtigen Reihenfolge geschlossen. Wirtschaftsinformatik 1

  11. HTML - Definition Zwei Sichten: • Im Browser  Anwendersicht • Im Editor  Entwicklersicht Bsp.: Uni Paderborn Wirtschaftsinformatik 1

  12. Allg. Aufbau von HTML-Seiten Eine gewöhnliche HTML-Datei besteht grundsätzlich aus folgenden Teilen: • Dokumenttyp-Deklaration (Angabe zur verwendeten (X)HTML-Version) • Header (Kopfdaten. z.B. Angaben zu Titel) • Body (anzuzeigender Inhalt, also Text mit Überschriften, Verweisen, Grafikreferenzen usw.) Wirtschaftsinformatik 1

  13. Syntax einer (X)HTML-Seite <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Landhandel online</title> </head> <body> <h1>Kaufen Sie landwirtschaftliche Produkte ein</h1> <p>Hier können Sie in verschiedenen Kategorien nach diversen Produkten des täglichen Landlebens stöbern und in Ihren Warenkorb legen.</p> </body> </html> Body beinhaltet die eigentlichen, sichtbaren Informationen einer Webseite. Wirtschaftsinformatik 1

  14. Aufgabe (I) HTML-Seite erstellen Vorgehensweise: • Start – Ausführen – Notepad • HTML-Grundgerüst erstellen • Titel „Winfo 1-Praktikum“ • Eine Überschrift und zwei Absätze im Body. • Speichern als index.html • Aufruf im Browser Wirtschaftsinformatik 1

  15. Weitere HTML-Tags <p>Hier ist ein Absatz.</p> Textabsatz <h1></h1>…<h6></h6> Überschriften von groß bis klein <br/> Zeilenumbruch Wirtschaftsinformatik 1

  16. Unsortierte Liste <ul> <li>Produkte</li> <li>Unternehmen</li> <li>Angebote</li> </ul> Wirtschaftsinformatik 1

  17. Nummerierte Liste <ol> <li>Einkauf</li> <li>Lagerung</li> <li>Verkauf</li> </ol> Wirtschaftsinformatik 1

  18. Weitere HTML-Tags (II) • <b>...</b> fett • <i>...</i> kursiv • <u>...</u> unterstrichen • <i><u>…</u></i> kursiv und unterstrichen Reihenfolge beachten! Wirtschaftsinformatik 1

  19. Bereich/Block <div align=“right“> <p>Der Absatz gehört</p> <p>zu diesem Absatz</P> <ul> <li>genau</li> <li>wie diese</li> <li>Liste.</li> </ul> </div> Wirtschaftsinformatik 1

  20. Aufgabe (II) HTML-Seite erweitern • index.html wieder in Notepad öffnen • Bereich (<div>) mit • Überschrift 3. Ordnung • darunter wieder einen Textabsatz • eine unsortierte Liste mit vier Einträgen • Textformatierungen fett + kursiv • Speichern und im Browser öffnen Wirtschaftsinformatik 1

  21. Tabellen <table border="1"> <tr> <th>Microsoft</th> <th>Mozilla</th> <th>Opera</th> </tr> <tr> <td>IE 6</td> <td>Firefox</td> <td>Opera</td> </tr> <tr> <td>unsicher</td> <td>sicher</td> <td>sicher</td> </tr> </table> Wirtschaftsinformatik 1

  22. Tabellen (II) <table width="100%" border="1" cellpadding="2" cellspacing="2"> <tr> <td colspan="2" rowspan="1">Hier könnte ein Banner oder ein Logo sein</td> </tr> <tr> <td width="20%">Navigation<br> <u>Link 1</u><br> <u>Link 2</u></td> <td width="80%">Hier wäre der Inhalt denkbar.<br></td> </tr> <tr align="center"> <td width="100%" colspan="2" rowspan="1"> <u>Impressum</u> <u>Kontakt</u> </td> </tr> </table> Wirtschaftsinformatik 1

  23. Tabellen (III) • Zellen verbinden • spaltenweise über colspan • zeilenweise über rowspan • Dadurch Möglichkeit zur einfachen Strukturierung einer Webseite Wirtschaftsinformatik 1

  24. Links Textverweis: <a href="http://www.upb.de/">Uni PB</a> Email-Verweis: <a href="mailto:beispiel@example.org? subject=Test">Email mit Betreff</a> Anker Start Referenz bzw. das Linkziel Linktext im Browser Anker Ende Wirtschaftsinformatik 1

  25. Bilder Referenzieren <img src="logo.gif" /> Rahmen <img src= "logo.gif" width= "50" height= "30" border="4" /> Pfade besser relativ wählen src=“logo.gif“ liegt im gleichen Verzeichnis wie HTML-Datei src=“images/logo.gif“ liegt ein Verzeichnis darunter Wirtschaftsinformatik 1

  26. Aufgabe (III) HTML-Seite erweitern • index.html wieder in Notepad öffnen • Tabelle mit drei Spalten und zwei Reihen einfügen • Linke Spalte je ein Bild (logo.gif) • Rechte Spalte zwei Textlinks und ein E-Maillink Wirtschaftsinformatik 1

  27. HTML-Formatangaben • Hintergrund Farbe: <body bgcolor=“#f5f5f5“> Bild: …background="background.jpg“> • Text <body text=“green“ link=“gold“> und das für jede Seite, jeden Link… Besser: Formatierung auslagern  CSS Wirtschaftsinformatik 1

  28. CSS Cascading Style Sheets

  29. CSS - Definition “Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents.” http://www.w3.org/Style/CSS/ Vorteile • Zentrale Design-Definition und somit schnell änderbar (Formatvorlage) • Einheitliches Design für alle Seiten eines Projektes • Mehr Gestaltungsmöglichkeiten als mit HTML • Vorlagen für verschiedene Ausgabeformate (PC, Handy, PDA,…) Wirtschaftsinformatik 1

  30. CSS – Cascading Style Sheets • Einbindung über Verweis im Head an externe Datei <link rel="stylesheet" type="text/css" href="formate.css"> • oder im Head selbst deklarieren <style type="text/css"> <!-- /* ... Hier werden die Formate definiert ... */ --> </style> • oder in einem HTML-Tag selbst <h1 style="[element-spezifische Formate]">...</h1> Wirtschaftsinformatik 1

  31. CSS (II) • Empfehlungen zum Umgang mit CSS 2.0 und mögliche Formatierungen siehe http://www.w3.org/TR/REC-CSS2/ http://www.w3.org/Style/CSS/ • oder mit Beispielen http://de.selfhtml.org/css/index.htm • Extrem: http://www.csszengarden.com/ Wirtschaftsinformatik 1

  32. Arbeitsauftrag • Ab Mi., 25.10.2006 auf Webseite verfügbar • Abgabe bis 29.10.2006 23:59 h per E-Mail mit Link zur Seite an andre.wickenhoefer@notes.upb.de Wirtschaftsinformatik 1

  33. Webseite bei IMT • Über IMT-Benutzerverwaltung Website freischalten • Via FTP-Zugang • Seite kopieren • Seite aufrufen http://homepages.uni-paderborn.de/user Wirtschaftsinformatik 1

  34. Quellen/Verweise Umfassende Online-Hilfe zu (X)HTML, CSS etc. http://de.selfhtml.org Empfehlung Webeditoren: Texteditor (m. Syntaxhighlighting u.a. HTML, Java, SQL): Notepad2 http://www.flos-freeware.ch/notepad2.html WYSIWYG: NVU http://www.nvu-composer.de/ Wirtschaftsinformatik 1

  35. Weitere Links http://keksdose.netfirms.com/bookmarks.html http://www.4.am/tutorial/Tutorial/CSS_fuer_Schreibfaule:_Schlanke_Webprogrammierung_200510241317.html http://www.webdesign-referenz.de/start.shtml http://www.devlisting.com/ Wirtschaftsinformatik 1

More Related