informatik anwendungen i
DESCRIPTION
Informatik Anwendungen I. Christian Eichinger [email protected] Werner Moser [email protected] Salzburg Research / AAJC http://www.aajc.at. Ziele der LVA. Am Ende dieser Lehrveranstaltung werden sie dynamische - interaktive - - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Informatik Anwendungen I](https://reader035.vdocuments.net/reader035/viewer/2022062315/568150c5550346895dbee82b/html5/thumbnails/1.jpg)
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: Informatik Anwendungen I](https://reader035.vdocuments.net/reader035/viewer/2022062315/568150c5550346895dbee82b/html5/thumbnails/2.jpg)
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: Informatik Anwendungen I](https://reader035.vdocuments.net/reader035/viewer/2022062315/568150c5550346895dbee82b/html5/thumbnails/3.jpg)
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: Informatik Anwendungen I](https://reader035.vdocuments.net/reader035/viewer/2022062315/568150c5550346895dbee82b/html5/thumbnails/4.jpg)
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: Informatik Anwendungen I](https://reader035.vdocuments.net/reader035/viewer/2022062315/568150c5550346895dbee82b/html5/thumbnails/5.jpg)
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: Informatik Anwendungen I](https://reader035.vdocuments.net/reader035/viewer/2022062315/568150c5550346895dbee82b/html5/thumbnails/6.jpg)
Page 6 AAJC - Academic Authorized Java Campus in Salzburg
"Advanced" HTML
HTML, CSS & Javascript
![Page 7: Informatik Anwendungen I](https://reader035.vdocuments.net/reader035/viewer/2022062315/568150c5550346895dbee82b/html5/thumbnails/7.jpg)
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: Informatik Anwendungen I](https://reader035.vdocuments.net/reader035/viewer/2022062315/568150c5550346895dbee82b/html5/thumbnails/8.jpg)
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: Informatik Anwendungen I](https://reader035.vdocuments.net/reader035/viewer/2022062315/568150c5550346895dbee82b/html5/thumbnails/9.jpg)
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: Informatik Anwendungen I](https://reader035.vdocuments.net/reader035/viewer/2022062315/568150c5550346895dbee82b/html5/thumbnails/10.jpg)
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: Informatik Anwendungen I](https://reader035.vdocuments.net/reader035/viewer/2022062315/568150c5550346895dbee82b/html5/thumbnails/11.jpg)
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=‘[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
![Page 12: Informatik Anwendungen I](https://reader035.vdocuments.net/reader035/viewer/2022062315/568150c5550346895dbee82b/html5/thumbnails/12.jpg)
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: Informatik Anwendungen I](https://reader035.vdocuments.net/reader035/viewer/2022062315/568150c5550346895dbee82b/html5/thumbnails/13.jpg)
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: Informatik Anwendungen I](https://reader035.vdocuments.net/reader035/viewer/2022062315/568150c5550346895dbee82b/html5/thumbnails/14.jpg)
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: Informatik Anwendungen I](https://reader035.vdocuments.net/reader035/viewer/2022062315/568150c5550346895dbee82b/html5/thumbnails/15.jpg)
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: Informatik Anwendungen I](https://reader035.vdocuments.net/reader035/viewer/2022062315/568150c5550346895dbee82b/html5/thumbnails/16.jpg)
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: Informatik Anwendungen I](https://reader035.vdocuments.net/reader035/viewer/2022062315/568150c5550346895dbee82b/html5/thumbnails/17.jpg)
Page 17 AAJC - Academic Authorized Java Campus in Salzburg
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>
![Page 18: Informatik Anwendungen I](https://reader035.vdocuments.net/reader035/viewer/2022062315/568150c5550346895dbee82b/html5/thumbnails/18.jpg)
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: Informatik Anwendungen I](https://reader035.vdocuments.net/reader035/viewer/2022062315/568150c5550346895dbee82b/html5/thumbnails/19.jpg)
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: Informatik Anwendungen I](https://reader035.vdocuments.net/reader035/viewer/2022062315/568150c5550346895dbee82b/html5/thumbnails/20.jpg)
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: Informatik Anwendungen I](https://reader035.vdocuments.net/reader035/viewer/2022062315/568150c5550346895dbee82b/html5/thumbnails/21.jpg)
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: Informatik Anwendungen I](https://reader035.vdocuments.net/reader035/viewer/2022062315/568150c5550346895dbee82b/html5/thumbnails/22.jpg)
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: Informatik Anwendungen I](https://reader035.vdocuments.net/reader035/viewer/2022062315/568150c5550346895dbee82b/html5/thumbnails/23.jpg)
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: Informatik Anwendungen I](https://reader035.vdocuments.net/reader035/viewer/2022062315/568150c5550346895dbee82b/html5/thumbnails/24.jpg)
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: Informatik Anwendungen I](https://reader035.vdocuments.net/reader035/viewer/2022062315/568150c5550346895dbee82b/html5/thumbnails/25.jpg)
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: Informatik Anwendungen I](https://reader035.vdocuments.net/reader035/viewer/2022062315/568150c5550346895dbee82b/html5/thumbnails/26.jpg)
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: Informatik Anwendungen I](https://reader035.vdocuments.net/reader035/viewer/2022062315/568150c5550346895dbee82b/html5/thumbnails/27.jpg)
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: Informatik Anwendungen I](https://reader035.vdocuments.net/reader035/viewer/2022062315/568150c5550346895dbee82b/html5/thumbnails/28.jpg)
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: Informatik Anwendungen I](https://reader035.vdocuments.net/reader035/viewer/2022062315/568150c5550346895dbee82b/html5/thumbnails/29.jpg)
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: Informatik Anwendungen I](https://reader035.vdocuments.net/reader035/viewer/2022062315/568150c5550346895dbee82b/html5/thumbnails/30.jpg)
Page 30 AAJC - Academic Authorized Java Campus in Salzburg
Javascript - Rollover
Einfach per Dreamweaver
![Page 31: Informatik Anwendungen I](https://reader035.vdocuments.net/reader035/viewer/2022062315/568150c5550346895dbee82b/html5/thumbnails/31.jpg)
Page 31 AAJC - Academic Authorized Java Campus in Salzburg
Javascript - Formulare
Dreamweaver
![Page 32: Informatik Anwendungen I](https://reader035.vdocuments.net/reader035/viewer/2022062315/568150c5550346895dbee82b/html5/thumbnails/32.jpg)
Page 32 AAJC - Academic Authorized Java Campus in Salzburg
Javascript - Pulldown Menu
Jumpmenu
![Page 33: Informatik Anwendungen I](https://reader035.vdocuments.net/reader035/viewer/2022062315/568150c5550346895dbee82b/html5/thumbnails/33.jpg)
Page 33 AAJC - Academic Authorized Java Campus in Salzburg
Referenzen
selfHTMLwww.selfhtml.net
selfPHPwww.selfphp.info