1 / 33

Informatik Anwendungen I

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 -

deanna
Download Presentation

Informatik Anwendungen I

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Informatik Anwendungen I Christian Eichinger christian.eichinger@salzburgresearch.at Werner Moser werner.moser@salzburgresearch.at Salzburg Research / AAJC http://www.aajc.at

  2. Ziele der LVA • Am Ende dieser Lehrveranstaltung werden sie • dynamische - • interaktive - • multimediale - Web-Seiten • erstellen und • verwalten können

  3. Organisatorisches • Beurteilung • VO mit Klausur • LB • Projektarbeit • 2er Gruppen • jeweils letzte EH (11.6.) • Termine

  4. Inhaltsübersicht • "Advanced" HTML • dynamische Web-Sites • Kommunikation im Internet • XML / XSLT • Verwaltung von Web-Inhalten • Audio / Video im Web • weitere Entwicklungen

  5. 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

  6. "Advanced" HTMLHTML, CSS & Javascript

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

  8. 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>

  9. HTML - Grundgerüst • Einfachstes Grundgerüst einer HTML-Datei<html> <head> <title>Titel</title> </head> <body> Hauptteil </body></html>

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

  11. 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

  12. 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

  13. 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>

  14. 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

  15. 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>

  16. 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

  17. 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>

  18. 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'>

  19. 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

  20. 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>

  21. 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)

  22. CSS - Untergruppen • Untergruppen von HTML-Tags definieren: • Stylesheet Definitionp {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>

  23. 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}

  24. 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 erweitertp {font-family:verdana, sans-serif; font-size:30pt;}<p style="color:#ff00cc; font-size:24pt;> Paddle the Tekno</p>

  25. 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

  26. 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

  27. 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

  28. 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>

  29. 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>

  30. Javascript - Rollover • Einfach per Dreamweaver

  31. Javascript - Formulare • Dreamweaver

  32. Javascript - Pulldown Menu • Jumpmenu

  33. Referenzen • selfHTMLwww.selfhtml.net • selfPHPwww.selfphp.info

More Related