Kplus InfoSpaces - Building the Information Infrastructure
Download
Report
Transcript Kplus InfoSpaces - Building the Information Infrastructure
Informatik Anwendungen I
Christian Eichinger
[email protected]
Werner Moser
[email protected]
Salzburg Research / AAJC
http://www.aajc.at
AAJC - Academic Authorized Java Campus in Salzburg
Ziele der LVA
Am Ende dieser Lehrveranstaltung werden sie
dynamische interaktive multimediale - Web-Seiten
erstellen und
verwalten können
AAJC - Academic Authorized Java Campus in Salzburg
Page 2
Organisatorisches
Termine
26.2.
26.2.
27.2.
12.3.
12.3.
13.3.
2.4.
2.4.
3.4.
16.4.
16.4.
17.4.
7.5.
7.5.
8.5.
21.5.
21.5.
22.5.
4.6.
4.6.
5.6.
11.6.
11.6.
11.6.
12:00
13:45
10:00
12:00
13:45
10:00
12:00
13:45
10:00
12:00
13:45
10:00
12:00
13:45
10:00
12:00
13:45
10:00
12:00
13:45
10:00
12:00
13:45
15:30
13:00
17:00
13:30
13:30
17:00
13:30
13:30
17:00
13:30
13:30
17:00
13:30
13:30
17:00
13:30
13:30
17:00
13:30
13:30
17:00
13:30
12:45
15:15
17:00
VO
LB A
LB B
VO
LB B
LB A
VO
LB B
LB A
VO
LB B
LB A
VO
LB A
LB B
VO
LB B
LB A
VO
LB B
LB A
VO
LB B
LB A
Beurteilung
VO mit Klausur
LB
Projektarbeit
2er Gruppen
jeweils letzte EH (11.6.)
AAJC - Academic Authorized Java Campus in Salzburg
Page 3
Inhaltsübersicht
"Advanced" HTML
dynamische Web-Sites
Kommunikation im Internet
XML / XSLT
Verwaltung von Web-Inhalten
Audio / Video im Web
weitere Entwicklungen
AAJC - Academic Authorized Java Campus in Salzburg
Page 4
Zielsetzung - LB
Das Endprodukt soll ein Webauftritt zum
WellFitTV sein
online Programm basierend auf Java & XML
Clips mit
Textbeschreibung
Metainformationen zum Video
Video
Suchfunktion für Clips
Diskussionsforum und/oder Chat
Allgemeine Informationen zum Channel
AAJC - Academic Authorized Java Campus in Salzburg
Page 5
"Advanced" HTML
HTML, CSS & Javascript
AAJC - Academic Authorized Java Campus in Salzburg
Page 6
Webtechnologien
HTML
CSS (Cascading Style-Sheets)
Javascript
DHTML
Flash
Plugins
CGI / Perl
PHP, JSP, ASP, ColdFusion
mySQL, postGreSQL, Oracle, DB2
AAJC - Academic Authorized Java Campus in Salzburg
Page 7
HTML Basics
HTML - HyperText Markup Language
Seitenbeschreibungssprache für Texte,
Grafiken, eingebundene Elemente (Video,
Musik, Flash)
Schema
<Befehl> Inhalt </Befehl>
Beispiel:
<h1>Überschrift</h1>
<h1 align=center><i>HTML</i> & WWW</h1>
AAJC - Academic Authorized Java Campus in Salzburg
Page 8
HTML - Grundgerüst
Einfachstes Grundgerüst einer HTML-Datei
<html>
<head>
<title>Titel</title>
</head>
<body>
Hauptteil
</body>
</html>
AAJC - Academic Authorized Java Campus in Salzburg
Page 9
HTML - Metatags
Metainformationen einer HTML-Datei
<html>
<head>
<meta name="description" content=”Kurzbeschreibung">
<meta name="author" content=”Autor”>
<meta name="keywords" content=”Stichwörter zur Page">
<title>Titel</title>
</head>
<body>
Hauptteil
</body>
</html>
andere nützliche Metatags
<meta http-equiv="refresh”
content="5;URL=http://www.google.com/">
AAJC - Academic Authorized Java Campus in Salzburg
Page 10
HTML - Texte & Grafik
Textformatierungen
nur Grundtypen (<h1>,<p>,<li>, ...) verwenden
Schriftformatierungen mittels Cascading Style Sheets
Bilder
immer ALT-Tag, width & height angeben
<img src=‘bild.jpg’ width=200 height=80 alt=‘info’>
Links
Email
<a href=‘[email protected]’>[email protected]</a>
WWW
<a ref=‘http://www.gmx.at’
target=‘_blank’>www.gmx.at</a>
_blank
neues Fenster
_self
um Inhalt im aktuellen Fenster zu öffnen
_parent, _top
für Frames
AAJC - Academic Authorized Java Campus in Salzburg
Page 11
HTML - Frames
Vorteil
Die Navigation scrollt nicht weg
Gleichzeitige Anzeige um zB Testberichte
nebeneinander darzustellen
Nachteil
Probleme mit einigen Browsern
Problem falls kleine Auflösung (Scrollbars)
Suchmaschinen zeigen auf Unterseiten
Gesetzliche Probleme falls andere Page in Frame
eingelinkt wird
AAJC - Academic Authorized Java Campus in Salzburg
Page 12
HTML - Frameset
Frameset Definition
<html> <head> <title>Titel</title> </head>
<frameset cols="40%,60%">
<frame src=”navigation.html" name="Navigation">
<frameset rows="20%,80%">
<frame src=”top.html" name=”Kopf">
<frame src=”main.html" name=”Main">
</frameset>
</frameset>
<noframes>
Ihr Browser kann diese Seite leider nicht anzeigen!
</noframes>
</html>
AAJC - Academic Authorized Java Campus in Salzburg
Page 13
HTML - Tabellen
Werkzeug um Webdesigns sinnvoll zu
realisieren
Tabellenbeispiel
<table border=0 cellpadding=3 width=95% align=center>
<tr>
<td valign=top align=left width=1%>
<img src=‘bild.gif’></td>
<td>Inhalt 2</td>
</tr>
</table>
bei Bildern mit CSS: valign und align bei <td>
verwenden sonst Netscape4.7 Problem
width=1% -> kleinstmögliche Tabledata
cellpadding/cellspacing sowie border für
Tabellenformatierung
AAJC - Academic Authorized Java Campus in Salzburg
Page 14
HTML - Video
Einfach: einfach ein Link auf Video setzen
<a href=‘video.mov’>Click to view Video</a>
Komplexer: Video in Page integrieren
<OBJECT CLASSID="clsid:02BF25D5-8C17-4B23-BC80D3488ABDDC6B" WIDTH="160"HEIGHT="144"
CODEBASE="http://www.apple.com/qtactivex/qtplugin.cab">
<PARAM name="SRC" VALUE="sample.mov">
<PARAM name="AUTOPLAY" VALUE="true">
<PARAM name="CONTROLLER" VALUE="false">
<EMBED SRC="sample.mov" WIDTH="160" HEIGHT="144"
AUTOPLAY="true" CONTROLLER="false" PLUGINSPAGE=“
http://www.apple.com/quicktime/download/">
</EMBED>
</OBJECT>
AAJC - Academic Authorized Java Campus in Salzburg
Page 15
HTML - SWF einbinden
SWF einbinden
<object classid="CLSID:D27CDB6E-AE6D-11cf-96B8-444553540000”
codebase=”FlashDownload" width="600" height="400">
<param name="movie" VALUE="nibbles.swf">
<param name="quality" value="high">
<param name="scale" value="exactfit">
<param name="menu" value="true">
<param name="bgcolor" value="#000040">
<embed src="nibbles.swf" quality="high" scale="exactfit”menu="false"
bgcolor="#000000" width="600" height="400”
swLiveConnect="false"
type="application/x-shockwave-flash"
pluginspage="http://FlashDownload">
</embed>
</object>
<object> -> Netscape6.x, IE
<embed> -> Netscape 4.7
AAJC - Academic Authorized Java Campus in Salzburg
Page 16
HTML - Formulare
Reines Textformlar per Email
<form action=”mailto:[email protected]" method=”post”
enctype=text/plain>
<!-- hier folgen die Formularelemente -->
<input type=‘submit’ value=‘Abschicken’>
</form>
Text-Dokument Formular per PHP
<form action=”update.php" method=”post”
enctype=multipart/form-data>
<!-- hier folgen die Formularelemente -->
<input type=‘submit’ value=‘Abschicken’>
</form>
AAJC - Academic Authorized Java Campus in Salzburg
Page 17
HTML - Formulartypen
Die wichtigsten Formulartypen
<input name="vorname" type="text" size="30"
value=“Name”>
<textarea name=“information” cols=‘20’ rows=‘10’>
Hier kann Text, der im Formular erscheinen
soll</textarea>
<input type=‘checkbox’ name=‘stimmt’ value=‘ja’>Stimmts
mit checked standartmässig aktiviert
<select name=‘hobbies’ multiple>
<option value=‘1’ selected>
Kayak</option>
<option value=‘2’>
Snowboard</option>
</select>
<input type='hidden' name='MAX_FILE_SIZE' value='2000'>
<input type='file' name='doc'>
AAJC - Academic Authorized Java Campus in Salzburg
Page 18
Cascading Style Sheets - CSS
CSS ist Erweiterung für HTML
viel mehr Möglichkeiten der
Schriftformatierung als HTML
Möglichkeit, die Formatierungen auf der ganze
Website zu verwenden
kein aktueller Browser hat vollständige CSS2.0
Implementierung
AAJC - Academic Authorized Java Campus in Salzburg
Page 19
CSS - Intern vs Extern
Inline CSS
<head> <title>Titel der Datei</title>
<style type="text/css">
FORMATDEFINITIONEN
</style>
</head>
Externe CSS
eigenes Textfile (style.css)
Link im HTML-Dokument auf style.css
<head> <title>Titel der Datei</title>
<link rel="stylesheet" type="text/css"
href="formate.css">
<style type="text/css">
Hier können Dateispezifische Erweiterungen stehen
</style>
</head>
AAJC - Academic Authorized Java Campus in Salzburg
Page 20
CSS - Formate definieren
HTML-Tags definieren
h1 { color:#ff0000; font-size:36pt; }
p {font-size:10pt; line-height:11pt;}
Typische CSS-Angaben
font-family: Helvetica, Verdana, Clean, sans-serif;
font-size:8pt
font-style:italic; (oblique, normal)
line-height:12pt;
color:#0000ff;
background-color:#FFFFCC;
margin:10px; margin-left:10px; margin-top:10px;
vertical-align:top; (middle, bottom)
AAJC - Academic Authorized Java Campus in Salzburg
Page 21
CSS - Untergruppen
Untergruppen von HTML-Tags definieren:
Stylesheet Definition
p {font-family:Verdana, sans-serif; font-size:12pt;}
p.kontakt {font-size:10pt;}
Verwendung im HTML Dokument
<p>Normaler Absatz</p>
<p class=‘kontakt’>Absatz der Klasse KONTAKT</p>
AAJC - Academic Authorized Java Campus in Salzburg
Page 22
CSS - Pseudoformate
Formate, die sich nicht durch eindeutige HTML
Tags ausdrücken lassen
(zB ‘besuchter Link’)
häufig verwendete Pseudoformate
a:link
a:visited
a:hover
noch nicht besuchter Link
besuchter Link
Mausrollover über Link
Beispiel
a
a:hover
{font-size:12pt; color:#cccccc}
{font-size:12pt; color:#ffffff}
AAJC - Academic Authorized Java Campus in Salzburg
Page 23
CSS - Direkte Formatierung
Bei jedem HTML-Tag kann eine zusätzliche
CSS-Formatierung durchgeführt werden
Dabei gilt die zentrale CSS-Formatierung weiterhin.
Nur für diese Instanz wird sie um die style
Anweisungen erweitert
p {font-family:verdana, sans-serif; font-size:30pt;}
<p style="color:#ff00cc; font-size:24pt;>
Paddle the Tekno
</p>
AAJC - Academic Authorized Java Campus in Salzburg
Page 24
CSS - Farben & Fonts
Farbdefinitionen:
color:#FF00FF;
color:rgb(50,0,180);
color:rgb(60%,100%,40%)
Immer mehrere Schriftarten angeben sowie
allgemeinen Schrifttyp angeben
zB: Verdana, Helvetica, sans-serif
Schriftgrößenproblem
die Schriften erscheinen auf versch.
Betriebssystemen in versch. Größe
AAJC - Academic Authorized Java Campus in Salzburg
Page 25
CSS - Browserprobleme
Leider unterstützt kein Browser alle CSS2.0
Definitionen
Problemfall - Netscape 4.7
zB: Grafiken in Tabellen
ab Netscape 6, Opera 5 und IE 5 viel weniger
Probleme
AAJC - Academic Authorized Java Campus in Salzburg
Page 26
Javascript
kein HTML Bestandteil, sondern Ergänzung
Eigene Programmiersprache
wird während der Laufzeit interpretiert
entweder Inlinecode oder in externer Datei
aber für HTML Autoren optimiert, um Websites
zu erweitern:
Rollover Effekte
Formularkontrolle
Pulldownmenus ohne GO-Button
kleine Spiele & Programme
etc
AAJC - Academic Authorized Java Campus in Salzburg
Page 27
Javascript - Hello World
Klassiker “Hello World” in Javascript
<html>
<head><title>Test</title>
<script type="text/javascript">
<!-alert(”Hello World!");
//-->
</script>
</head>
<body>
</body>
</html>
AAJC - Academic Authorized Java Campus in Salzburg
Page 28
Javascript - Beispiel
<html>
<head>
<script type="text/javascript">
<!-function Quadrat() {
var Ergebnis = document.Formular.Eingabe.value *
document.Formular.Eingabe.value;
alert("Quadrat = " + Ergebnis);
}
//-->
</script>
</head>
<body>
<form name="Formular" action="">
<input type="text" name="Eingabe" size="3">
<input type="button" value="Quadrat ” onClick="Quadrat()">
</form>
</body>
</html>
AAJC - Academic Authorized Java Campus in Salzburg
Page 29
Javascript - Rollover
Einfach per Dreamweaver
AAJC - Academic Authorized Java Campus in Salzburg
Page 30
Javascript - Formulare
Dreamweaver
AAJC - Academic Authorized Java Campus in Salzburg
Page 31
Javascript - Pulldown Menu
Jumpmenu
AAJC - Academic Authorized Java Campus in Salzburg
Page 32
Referenzen
selfHTML
www.selfhtml.net
selfPHP
www.selfphp.info
AAJC - Academic Authorized Java Campus in Salzburg
Page 33