praktikum zu wirtschaftsinformatik 1 internet datenbankapplikationen w1321 02 ws 2006 2007 n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Praktikum zu Wirtschaftsinformatik 1: Internet- / Datenbankapplikationen W1321-02 – WS 2006/2007 PowerPoint Presentation
Download Presentation
Praktikum zu Wirtschaftsinformatik 1: Internet- / Datenbankapplikationen W1321-02 – WS 2006/2007

Loading in 2 Seconds...

play fullscreen
1 / 35

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


  • 59 Views
  • Uploaded on

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

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Praktikum zu Wirtschaftsinformatik 1: Internet- / Datenbankapplikationen W1321-02 – WS 2006/2007' - laith-wynn


Download Now 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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
praktikum zu wirtschaftsinformatik 1 internet datenbankapplikationen w1321 02 ws 2006 2007

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

Grundlagen Kommunikationssysteme

HTML/CSS

agenda
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

kommunikationssysteme

Kommunikationssysteme

Einige (wenige) Grundlagen

iso osi referenzmodell
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

iso osi referenzmodell1
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

client server architektur
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

webserver
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

cocoon
Cocoon

Darstellung

Webserver +

ScriptEngine

(z.B. Tomcat)

Logik

Daten

XML

Quelle: Langham, Matthew: Cocoon. Indianapolis, Ind. [u.a.]  : New Riders , 2003

Wirtschaftsinformatik 1

slide9

HTML

Hypertext Markup Language

html definition
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

html definition1
HTML - Definition

Zwei Sichten:

  • Im Browser  Anwendersicht
  • Im Editor  Entwicklersicht

Bsp.: Uni Paderborn

Wirtschaftsinformatik 1

allg aufbau von html seiten
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

syntax einer x html seite
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

aufgabe i
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

weitere html tags
Weitere HTML-Tags

<p>Hier ist ein Absatz.</p>

Textabsatz

<h1></h1>…<h6></h6>

Überschriften von groß bis klein

<br/>

Zeilenumbruch

Wirtschaftsinformatik 1

unsortierte liste
Unsortierte Liste

<ul>

<li>Produkte</li>

<li>Unternehmen</li>

<li>Angebote</li>

</ul>

Wirtschaftsinformatik 1

nummerierte liste
Nummerierte Liste

<ol>

<li>Einkauf</li>

<li>Lagerung</li>

<li>Verkauf</li>

</ol>

Wirtschaftsinformatik 1

weitere html tags ii
Weitere HTML-Tags (II)
  • <b>...</b> fett
  • <i>...</i> kursiv
  • <u>...</u> unterstrichen
  • <i><u>…</u></i> kursiv und unterstrichen

Reihenfolge beachten!

Wirtschaftsinformatik 1

bereich block
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

aufgabe ii
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

tabellen
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

tabellen ii
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

tabellen iii
Tabellen (III)
  • Zellen verbinden
    • spaltenweise über colspan
    • zeilenweise über rowspan
  • Dadurch Möglichkeit zur einfachen Strukturierung einer Webseite

Wirtschaftsinformatik 1

links
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

bilder
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

aufgabe iii
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

html formatangaben
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

slide28

CSS

Cascading Style Sheets

css definition
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

css cascading style sheets
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

css ii
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

arbeitsauftrag
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

webseite bei imt
Webseite bei IMT
  • Über IMT-Benutzerverwaltung Website freischalten
  • Via FTP-Zugang
  • Seite kopieren
  • Seite aufrufen

http://homepages.uni-paderborn.de/user

Wirtschaftsinformatik 1

quellen verweise
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

weitere links
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