View
109
Download
1
Category
Preview:
Citation preview
AAJC - Academic Authorized Java Campus in Salzburg
Informatik Anwendungen I
Christian Eichingerchristian.eichinger@salzburgresearch.at
Werner Moser werner.moser@salzburgresearch.at
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
Page 3 AAJC - Academic Authorized Java Campus in Salzburg
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.)
Page 4 AAJC - Academic Authorized Java Campus in Salzburg
Inhaltsübersicht
"Advanced" HTML dynamische Web-Sites Kommunikation im Internet XML / XSLT Verwaltung von Web-Inhalten Audio / Video im Web weitere Entwicklungen
Page 5 AAJC - Academic Authorized Java Campus in Salzburg
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
Page 6 AAJC - Academic Authorized Java Campus in Salzburg
"Advanced" HTML
HTML, CSS & Javascript
Page 7 AAJC - Academic Authorized Java Campus in Salzburg
Webtechnologien HTML CSS (Cascading Style-Sheets) Javascript DHTML Flash Plugins CGI / Perl PHP, JSP, ASP, ColdFusion mySQL, postGreSQL, Oracle, DB2
Page 8 AAJC - Academic Authorized Java Campus in Salzburg
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>
Page 9 AAJC - Academic Authorized Java Campus in Salzburg
HTML - Grundgerüst
Einfachstes Grundgerüst einer HTML-Datei
<html><head>
<title>Titel</title></head><body>
Hauptteil</body>
</html>
Page 10 AAJC - Academic Authorized Java Campus in Salzburg
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/">
Page 11 AAJC - Academic Authorized Java Campus in Salzburg
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=‘wmoser@newmedia.at’>wmoser@newmedia.at</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
Page 12 AAJC - Academic Authorized Java Campus in Salzburg
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
Page 13 AAJC - Academic Authorized Java Campus in Salzburg
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>
Page 14 AAJC - Academic Authorized Java Campus in Salzburg
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
Page 15 AAJC - Academic Authorized Java Campus in Salzburg
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>
Page 16 AAJC - Academic Authorized Java Campus in Salzburg
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
Page 17 AAJC - Academic Authorized Java Campus in Salzburg
HTML - Formulare
Reines Textformlar per Email<form action=”mailto:wmoser@newmedia.at" 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>
Page 18 AAJC - Academic Authorized Java Campus in Salzburg
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'>
Page 19 AAJC - Academic Authorized Java Campus in Salzburg
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
Page 20 AAJC - Academic Authorized Java Campus in Salzburg
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>
Page 21 AAJC - Academic Authorized Java Campus in Salzburg
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)
Page 22 AAJC - Academic Authorized Java Campus in Salzburg
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>
Page 23 AAJC - Academic Authorized Java Campus in Salzburg
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}
Page 24 AAJC - Academic Authorized Java Campus in Salzburg
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>
Page 25 AAJC - Academic Authorized Java Campus in Salzburg
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
Page 26 AAJC - Academic Authorized Java Campus in Salzburg
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
Page 27 AAJC - Academic Authorized Java Campus in Salzburg
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
Page 28 AAJC - Academic Authorized Java Campus in Salzburg
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>
Page 29 AAJC - Academic Authorized Java Campus in Salzburg
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>
Page 30 AAJC - Academic Authorized Java Campus in Salzburg
Javascript - Rollover
Einfach per Dreamweaver
Page 31 AAJC - Academic Authorized Java Campus in Salzburg
Javascript - Formulare
Dreamweaver
Page 32 AAJC - Academic Authorized Java Campus in Salzburg
Javascript - Pulldown Menu
Jumpmenu
Page 33 AAJC - Academic Authorized Java Campus in Salzburg
Referenzen
selfHTMLwww.selfhtml.net
selfPHPwww.selfphp.info
Recommended