AAJC - Academic Authorized Java Campus in Salzburg Informatik Anwendungen I Christian Eichinger [email protected] Werner Moser [email protected]

AAJC - Academic Authorized Java Campus in Salzburg

Informatik Anwendungen I

Christian [email protected]

Werner Moser [email protected]

Salzburg Research / AAJChttp://www.aajc.at

Page 2 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


26.2. 12:00 13:00 VO26.2. 13:45 17:00 LB A27.2. 10:00 13:30 LB B12.3. 12:00 13:30 VO12.3. 13:45 17:00 LB B13.3. 10:00 13:30 LB A2.4. 12:00 13:30 VO2.4. 13:45 17:00 LB B3.4. 10:00 13:30 LB A16.4. 12:00 13:30 VO16.4. 13:45 17:00 LB B17.4. 10:00 13:30 LB A7.5. 12:00 13:30 VO7.5. 13:45 17:00 LB A8.5. 10:00 13:30 LB B21.5. 12:00 13:30 VO21.5. 13:45 17:00 LB B22.5. 10:00 13:30 LB A4.6. 12:00 13:30 VO4.6. 13:45 17:00 LB B5.6. 10:00 13:30 LB A11.6. 12:00 12:45 VO11.6. 13:45 15:15 LB B11.6. 15:30 17:00 LB A

Organisatorisches Termine Beurteilung

VO mit Klausur LB

Projektarbeit 2er Gruppen

jeweils letzte EH (11.6.)


Inhaltsübersicht

"Advanced" HTML dynamische Web-Sites Kommunikation im Internet XML / XSLT Verwaltung von Web-Inhalten Audio / Video im Web weitere Entwicklungen


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


"Advanced" HTML

HTML, CSS & Javascript


Webtechnologien HTML CSS (Cascading Style-Sheets) Javascript DHTML Flash Plugins CGI / Perl PHP, JSP, ASP, ColdFusion mySQL, postGreSQL, Oracle, DB2


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>


HTML - Grundgerüst

Einfachstes Grundgerüst einer HTML-Datei

<html><head>

<title>Titel</title></head><body>

Hauptteil</body>

</html>


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/">


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


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


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>


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


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-BC80- D3488ABDDC6B" 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>


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


HTML - Formulare

Reines Textformlar per Email<form action=”mailto:[email protected]" method=”post”

enctype=text/plain><input type=‘submit’ value=‘Abschicken’>

</form>

Text-Dokument Formular per PHP <form action=”update.php" method=”post”

enctype=multipart/form-data><input type=‘submit’ value=‘Abschicken’>

</form>


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’>Stimmtsmit 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'>


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


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>


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)


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>


CSS - Pseudoformate

Formate, die sich nicht durch eindeutige HTML Tags ausdrücken lassen(zB ‘besuchter Link’)

häufig verwendete Pseudoformate a:link noch nicht besuchter Link a:visited besuchter Link a:hover Mausrollover über Link

Beispiela {font-size:12pt; color:#cccccc}a:hover {font-size:12pt; color:#ffffff}


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>


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


CSS - Browserprobleme

Leider unterstützt kein Browser alle CSS2.0 Definitionen

Problemfall - Netscape 4.7zB: Grafiken in Tabellen

ab Netscape 6, Opera 5 und IE 5 viel weniger Probleme


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


Javascript - Hello World

Klassiker “Hello World” in Javascript

<html><head><title>Test</title>

<script type="text/javascript"> </script>

</head><body></body></html>


Javascript - Beispiel

<html><head><script type="text/javascript"></script></head><body><form name="Formular" action=""><input type="text" name="Eingabe" size="3"><input type="button" value="Quadrat ” onClick="Quadrat()"></form></body></html>


Javascript - Rollover

Einfach per Dreamweaver


Javascript - Formulare

Dreamweaver


Javascript - Pulldown Menu

Jumpmenu


Referenzen

selfHTMLwww.selfhtml.net

selfPHPwww.selfphp.info

Documents

AAJC - Academic Authorized Java Campus in Salzburg Informatik Anwendungen I Christian Eichinger [email protected] Werner Moser [email protected]