Informatik Anwendungen I

Informatik Anwendungen I
Christian Eichinger Werner Moser Salzburg Research / AAJC

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=

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 <a WWW <a ref=‘ target=‘_blank’> _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-BC D3488ABDDC6B" WIDTH="160"HEIGHT="144" CODEBASE=" <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=“ </EMBED> </OBJECT>

HTML - SWF einbinden SWF einbinden <object classid="CLSID:D27CDB6E-AE6D-11cf-96B ” 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=" </embed> </object> <object> -> Netscape6.x, IE <embed> -> Netscape 4.7

HTML - Formulare Reines Textformlar per Email
<form 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>

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

Informatik Anwendungen I

Ähnliche Präsentationen

Präsentation zum Thema: "Informatik Anwendungen I"— Präsentation transkript:

Ähnliche Präsentationen

Über Projekt

Feedback

Anmelden

Anmeldung über soziales Netzwerk:

Informatik Anwendungen I

Ähnliche Präsentationen

Präsentation zum Thema: "Informatik Anwendungen I"— Präsentation transkript:

Ähnliche Präsentationen

Über Projekt

Feedback