Informatik Anwendungen I Christian Eichinger christian.eichinger@salzburgresearch.at Werner Moser werner.moser@salzburgresearch.at Salzburg Research / AAJC http://www.aajc.at
Ziele der LVA Am Ende dieser Lehrveranstaltung werden sie dynamische - interaktive - multimediale - Web-Seiten erstellen und verwalten können
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 Übersetzung durch COMPILER (für jede Zielmaschine notwendig) VT: leichteres lesen, portieren, programmieren NT:evtl. langsamer
Webtechnologien HTML CSS (Cascading Style-Sheets) Javascript DHTML Flash Plugins CGI / Perl PHP, JSP, ASP, ColdFusion mySQL, postGreSQL, Oracle, DB2 Software nicht mehr als "Kunst" sondern als industrielle Produktion technische und organisatorische Probleme sind gleichsam zu meistern
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 Bilder Links 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
HTML - Frames Vorteil Nachteil 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: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>
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'>
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 Beispiel a {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.7 zB: 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"> <!-- alert(”Hello World!"); //--> </script> </head> <body> </body> </html>
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>
Javascript - Rollover Einfach per Dreamweaver
Javascript - Formulare Dreamweaver
Javascript - Pulldown Menu Jumpmenu
Referenzen selfHTML www.selfhtml.net selfPHP www.selfphp.info