Contenu connexe
Similaire à Einfuehrung_1C
Similaire à Einfuehrung_1C (20)
Plus de tutorialsruby (20)
Einfuehrung_1C
- 1. Christian Ulbrich
Technische Universität Dresden
Fakultät Informatik
Institut für Software- und Multimediatechnik
Lehrstuhl für Multimediatechnik
© LMMT ‘Übung: Web- und Multimedia-Engineering’ 14.04.2009 / Christian Ulbrich
- 2. Organisatorisches, Aufgabenstellung, Einführung, XHTML, CSS,
Javascript, Materialien
Gliederung
Organisatorisches
Aufgabenstellung
Einführung
XHTML
CSS
Javascript
Materialien
© LMMT ‘Übung: Web- und Multimedia-Engineering’ 14.04.2009 / Christian Ulbrich 2 / 30
- 3. Organisatorisches, Aufgabenstellung, Einführung, XHTML, CSS,
Javascript, Materialien
Übersicht Themenkomplexe
Themenkomplex 1
1A) Adobe Flash
1B) Microsoft Silverlight
1C) XHTML/CSS/JS
Themenkomplex 2
2A) XSLT
2B) JavaServer Faces
2C) Webservices
© LMMT ‘Übung: Web- und Multimedia-Engineering’ 14.04.2009 / Christian Ulbrich 3 / 30
- 4. Organisatorisches, Aufgabenstellung, Einführung, XHTML, CSS,
Javascript, Materialien
Übungswebseite
Informationen zu den Übungen
http://www-mmt.inf.tu-dresden.de/Lehre/Sommersemester_09/Vo_WME/Uebung/
© LMMT ‘Übung: Web- und Multimedia-Engineering’ 14.04.2009 / Christian Ulbrich 4 / 30
- 5. Organisatorisches, Aufgabenstellung, Einführung, XHTML, CSS,
Javascript, Materialien
Terminplan
14.04.09 Einführung (Teilnahme obligatorisch)
21.04.09 Konsultation (Teilnahme freiwillig)
28.04.09 Konsultation (Teilnahme freiwillig)
04.05.09 Skypekonsultation (Teilnahme freiwillig)
05.05.09 Abgabe Oberflächenprototyp
12.05.09 Konsultation (Teilnahme freiwillig)
18.05.09 Abgabe der Ergebnisse (bis spätestens 13:00 Uhr)
19.05.09 Ergebnispräsentation (Teilnahme obligatorisch)
© LMMT ‘Übung: Web- und Multimedia-Engineering’ 14.04.2009 / Christian Ulbrich 5 / 30
- 6. Organisatorisches, Aufgabenstellung, Einführung, XHTML, CSS,
Javascript, Materialien
Zugriff auf Verzeichnisse
Aufgabenmaterialien, Dokumentationen zu den Werkzeugen:
nas2wmeAufgaben_und_Materialienaufgaben1C
Ablage der Ergebnisse unter:
nas2wmeErgebnisse_1_CGruppeXX
Login = FRZ-Login (z.B. pcpool02s111111)
SSH-Zugriff:
Servername:serv9.inf.tu-dresden.de
Verzeichnis: /zbv/WME/Ergebnisse_1_C/GruppeXX/
Verwenden Sie für Dateinamen keine Umlaute! Wenn Sie Ihre
Lösungsverzeichnisse mit SSH anlegen, müssen Sie noch das
Leserecht für alle Nutzer deaktivieren, jedoch nicht für Eigentümer und
Gruppe (Permission Mode 750)!
Ändern Sie nie Rechte über die Windowsfreigabe!
© LMMT ‘Übung: Web- und Multimedia-Engineering’ 14.04.2009 / Christian Ulbrich 6 / 30
- 7. Organisatorisches, Aufgabenstellung, Einführung, XHTML, CSS,
Javascript, Materialien
Ergebnisabgabe
Abgabetermine beachten: 18.05.09, 13:00 Uhr!
Nach Ablauf der Bearbeitungszeit werden die Verzeichnisse
gesperrt
Jede Gruppe hat eine eigenständige Lösung abzugeben
Überprüfen von Verzeichnisnamen und Übungsgruppe
Ergebnispräsentation erfolgt anhand der Folien durch die
Gruppe
Dauer: 8 Minuten!
© LMMT ‘Übung: Web- und Multimedia-Engineering’ 14.04.2009 / Christian Ulbrich 7 / 30
- 8. Organisatorisches, Aufgabenstellung, Einführung, XHTML, CSS,
Javascript, Materialien
Aufgabenstellung
Themenkomplex 1C
Innerhalb der Beispielanwendung PhotonPainter soll der Benutzer
durch die vorhandenen Fotos browsen können
Aufgabe: Entwurf einer Weboberfläche mit der man die Bilder
durchforsten kann und jeweils ein Bild angezeigt wird mitsamt den
Metadaten
Die Bilder werden vom Server mittels einer XML-Schnittstelle
bereitgestellt
Sämtliche Daten sollen mittels AJAX dynamisch nachgeladen
werden
© LMMT ‘Übung: Web- und Multimedia-Engineering’ 14.04.2009 / Christian Ulbrich 8 / 30
- 9. Organisatorisches, Aufgabenstellung, Einführung, XHTML, CSS,
Javascript, Materialien
Materialien
Materialien
data.xml
– XML-Datei welche Metadaten zu den Bildern enthält
photonpainter.xsd
– XML-Schema zum Validieren von Photonpainter-XML-Dateien für z.B. selbst
generierte XML-Dateien
– kann zum Verständnis der XML-Struktur genutzt werden
© LMMT ‘Übung: Web- und Multimedia-Engineering’ 14.04.2009 / Christian Ulbrich 9 / 30
- 10. Organisatorisches, Aufgabenstellung, Einführung, XHTML, CSS,
Javascript, Materialien
Anforderungen
funktionale Anforderungen für die Webanwendung:
maximaler Platz 900x700 Pixel
auszuliefernde Dateien/Daten (ohne Fotos) maximal 300 kB
Zugriff auf Bilder über Tags
die Anwendung muss beliebige valide XML-Daten verarbeiten können
(beliebig viele Bilder, beliebig groß)
XHTML – konform
Javascriptcode muss in Firefox 3 und Internet Explorer 7 lauffähig sein
alle verwendeten Assets müssen entweder Public Domain sein oder die
erforderlichen Nutzungsrechte müssen schriftlich vorliegen
verwendete Frameworks müssen lizenzkompatibel sein (GPL, ...)
© LMMT ‘Übung: Web- und Multimedia-Engineering’ 14.04.2009 / Christian Ulbrich 10 / 30
- 11. Organisatorisches, Aufgabenstellung, Einführung, XHTML, CSS,
Javascript, Materialien
Anforderungen
nicht-funktionale Anforderungen für die Webanwendung:
angemessene Bedienung und Verwendung von Standard-UI Techniken
eindeutige Navigation und der Benutzer sollte zur Interaktion animiert
werden
Roundtrips sollten optimiert werden
Kür:
– barriere-arm
– zusätzlich lauffähig auf Chrome, Safari
© LMMT ‘Übung: Web- und Multimedia-Engineering’ 14.04.2009 / Christian Ulbrich 11 / 30
- 12. Organisatorisches, Aufgabenstellung, Einführung, XHTML, CSS,
Javascript, Materialien
Abgabe
Abzugeben sind:
Quellcode (index.html, browse.html, detail.html, CSS-Dateien im Ordner
css, Javascript-Dateien im Ordner js sowie verwendete Medienobjekte
im Ordner assets
kleine Dokumentation des Ergebnisses (dokumentation.pdf)
die Folien für die Ergebnispräsentation (praesentation.pdf)
© LMMT ‘Übung: Web- und Multimedia-Engineering’ 14.04.2009 / Christian Ulbrich 12 / 30
- 13. Organisatorisches, Aufgabenstellung, Einführung, XHTML, CSS,
Javascript, Materialien
Einführung
Warum überhaupt Webanwendungen?
einfache Vernetzung
hohe Portabilität
leichtes Deployment
ortsunabhängig
Nachteile?
oft ständige Verbindung erforderlich
schwierigerer Entwurfsprozess der Benutzeroberfläche
© LMMT ‘Übung: Web- und Multimedia-Engineering’ 14.04.2009 / Christian Ulbrich 13 / 30
- 14. Organisatorisches, Aufgabenstellung, Einführung, XHTML, CSS,
Javascript, Materialien
Grundlagen - XHTML
XHTML ist XML-konformes HTML
Abschlusstags (<p>Absatz</p> , <br/>)
Kleinschreibung
Attribute müssen Werte haben (<option selected=„selected“>)
DTD-Auszeichnung ist obligatorisch
Weiterentwicklungen
XHTML 1.1: modularisiertes XHTML
XHTML 2.0: Entfernung sämtlicher Präsentationselemente
© LMMT ‘Übung: Web- und Multimedia-Engineering’ 14.04.2009 / Christian Ulbrich 14 / 30
- 15. Organisatorisches, Aufgabenstellung, Einführung, XHTML, CSS,
Javascript, Materialien
Grundlagen - CSS
Cascading Style Sheets
Sprache zur Layoutauszeichnung von XML-Dokumenten (insbesondere XHTML)
ermöglicht komplette Trennung von Daten und Layout
eine Datei für komplettes Layout einer Webseite
ermöglicht verschiedene Ausgabemedien (Bildschirm, Drucker, Braille)
Layoutmöglichkeiten:
absolute und relative Positionierung
Rahmen, umfangreiche Textauszeichnung (Schriftarten, Schriftfamilien)
Textfluss, Tabellenformatierungen
Standards
CSS (Level) 1: nahezu vollständige Umsetzung in Browsern
CSS 2.1: aktuelle Browser unterstützen es ausreichend (Firefox 3, IE 8.0,
WebKit)
CSS 3: Modularisierung
© LMMT ‘Übung: Web- und Multimedia-Engineering’ 14.04.2009 / Christian Ulbrich 15 / 30
- 16. Organisatorisches, Aufgabenstellung, Einführung, XHTML, CSS,
Javascript, Materialien
Grundlagen – CSS - Konzepte
Einbindung von CSS über Link-Tag im head-Bereich
<link rel=„stylesheet“ „type=„text/css“ href=„/css/standard.css“ />
Auszeichnung mittels Selektoren
jedem XHTML-Tag können Styleinformationen zugewiesen werden
pro Selektor gibt es Formatklassen (z.B: zwei Klassen für Absätze)
spezielle XHTML-Tags die nur zum Auszeichnen vorhanden sind (div,
span)
Auszeichnung mittels ids
ermöglicht verschiedene Ausgabemedien (Bildschirm, Drucker, Braille)
Kaskadierung von Auszeichnungen
verschachtelte Tags mit verschiedenen Auszeichnungen ergänzen sich / werden
vererbt
Numerische Angaben
in pt, pc (=12pt), inch, mm, cm (alle absolut) oder em, ex, % (relativ)
© LMMT ‘Übung: Web- und Multimedia-Engineering’ 14.04.2009 / Christian Ulbrich 16 / 30
- 17. Organisatorisches, Aufgabenstellung, Einführung, XHTML, CSS,
Javascript, Materialien
Beispiel
Beispiele:
Unterstreichung des Verweistextes
A {text-decoration:
unterdrücken none;
color: #000000;
font-weight: normal;
font-size: 15px;
font-family: "Trebuchet MS", "Arial", "sans-serif";
margin-top: 0px; }
H1{color: #1F706B;
margin-top: 3px;
margin-bottom: 4px;
font-size: 19pt;
font-family: "Trebuchet MS", "Arial", "sans-serif";
letter-spacing: 0.5px;
font-weight: bold;}
© LMMT ‘Übung: Web- und Multimedia-Engineering’ 14.04.2009 / Christian Ulbrich 17 / 30
- 18. Organisatorisches, Aufgabenstellung, Einführung, XHTML, CSS,
Javascript, Materialien
Beispiel
Kaskadierung bei Cascading Stylesheets rot
<td>
td { color: #FF0000;
<p>Dies ist
font-size: 12pt;
<em>ein Test</em>.
font-family: "Arial" }
</p>
Ende.
p { color: #00FFFF; } aqua
</td>
HTML-Beschreibung em { font-weight: bold;
color: #00FF00; }
Dies ist ein Test. p { color: #0000FF; }
Ende
Browser-Ausgabe CSS-Definition
blau grün
© LMMT ‘Übung: Web- und Multimedia-Engineering’ 14.04.2009 / Christian Ulbrich 18 / 30
- 19. Organisatorisches, Aufgabenstellung, Einführung, XHTML, CSS,
Javascript, Materialien
Grundlagen – CSS - Boxmodell
Box-Modell zur Positionierung
definiert die Berechnung der Breite und Höhe von Elementen
Gesamtbreite errechnet sich aus Breite des Elementinhalts (width),
Innenabstand (padding), Rahmenstärke (border-width) und
Außenabstand (margin)
analog für die Höhe
© LMMT ‘Übung: Web- und Multimedia-Engineering’ 14.04.2009 / Christian Ulbrich 19 / 30
- 20. Organisatorisches, Aufgabenstellung, Einführung, XHTML, CSS,
Javascript, Materialien
Grundlagen – CSS - Showcase
verschiedene zentrale Layouts
verschiedene Designs mittels Wechseln des Stylesheets
http://www.csszengarden.com/
Acid2 Test
Test zur Kompatibilität des Browsers mit CSS 2
http://www.webstandards.org/files/acid2/test.html
CSS komplex
Diashow komplett mit CSS realisiert
http://www.cssplay.co.uk/menu/slide_show
© LMMT ‘Übung: Web- und Multimedia-Engineering’ 14.04.2009 / Christian Ulbrich 20 / 30
- 21. Organisatorisches, Aufgabenstellung, Einführung, XHTML, CSS,
Javascript, Materialien
Grundlagen – Javascript
(client-seitige) interpretierte Programmiersprache
seit 1997 als ECMAScript standardisiert
Sprachsyntax im Wesentlich wie in C, Stringverknüpfung mittels „+“
prototypen-basierte, dynamisch typisierte Programmiersprache
direkt in XHTML eingebettet (mittels <script>) oder in externer Datei
zunehmende auch Verwendung in anderen Anwendungen (Adobe
Acrobat, Spielen, Shellskripte)
© LMMT ‘Übung: Web- und Multimedia-Engineering’ 14.04.2009 / Christian Ulbrich 21 / 30
- 22. Organisatorisches, Aufgabenstellung, Einführung, XHTML, CSS,
Javascript, Materialien
Grundlagen – Javascript – objektorientierte Programmierung
prototypen-basiert, Vererbung mittels Klonen vom Prototyp
ermöglicht Mehrfachvererbung, Mixins
Funktionen können als Parameter übergeben werden
dynamisch generiertes Javascript
dynamische Metaprogrammierung
dynamische Metaprogrammierung mit nachladenden modifizierten
Code
© LMMT ‘Übung: Web- und Multimedia-Engineering’ 14.04.2009 / Christian Ulbrich 22 / 30
- 23. Organisatorisches, Aufgabenstellung, Einführung, XHTML, CSS,
Javascript, Materialien
Grundlagen – Javascript – objektorientierte Programmierung
Beispiel Vererbung
function car()
{
this.accelerate=function() {
print("Go baby, go!");
};
this.brake=function() {
print("Stop me right now.");
};
this.race=function() {
this.accelerate();
this.brake();
};
}
var trabbi = new car();
var porsche = new car();
© LMMT ‘Übung: Web- und Multimedia-Engineering’ 14.04.2009 / Christian Ulbrich 23 / 30
- 24. Organisatorisches, Aufgabenstellung, Einführung, XHTML, CSS,
Javascript, Materialien
Grundlagen – Javascript – Standardobjekte
Mächtigkeit von Javascript beruht auf Standardobjekten
window (Wurzelobjekt)
Zugriff auf Eigenschaften des Browserfenster (Größe, Statusleisten,
Scrollbalken)
Methoden für Browseraktionen („vor“ , „zurück“, „drucken“)
window.document
Zugriff auf Elemente des aktuellen Dokumentes mittels DOM
Zugriff auf Elemente des aktuellen Dokumentes über weitere Unterobjekte
(images, forms, links)
XMLHttpRequest
ursprünglich von Microsoft eingeführt
heute in jedem Browser verfügbar
ermöglicht asynchrone Kommunikation mit dem Server ohne „Neuladen“
© LMMT ‘Übung: Web- und Multimedia-Engineering’ 14.04.2009 / Christian Ulbrich 24 / 30
- 25. Organisatorisches, Aufgabenstellung, Einführung, XHTML, CSS,
Javascript, Materialien
Grundlagen – Javascript – Frameworks
AJAX – Prinzip sehr erfolgreich
Zusammenfassung benötigter Routinen + Techniken in Frameworks
Klassifikation
datenorientierte Frameworks
– Manipulation von Daten, Austausch mit dem Server, vereinfachter Elementzugriff
– jQuery, Prototype
oberflächenorientierte Frameworks
– gefällige visuelle Effekte, Drag‘n‘Drop
– extJS, script.aculo.us
fette, rich internet application – orientierte Frameworks
– Dojo, qooxdoo
© LMMT ‘Übung: Web- und Multimedia-Engineering’ 14.04.2009 / Christian Ulbrich 25 / 30
- 27. Organisatorisches, Aufgabenstellung, Einführung, XHTML, CSS,
Javascript, Materialien
Links
CSS
Tutorial: http://www.thestyleworks.de/index.shtml
XHTML / DOM
Selfhtml: http://de.selfhtml.org
Javascript
Wikipedia: http://de.wikipedia.org/wiki/JavaScript
The World's Most Misunderstood Programming Language:
http://www.crockford.com/javascript/javascript.html
© LMMT ‘Übung: Web- und Multimedia-Engineering’ 14.04.2009 / Christian Ulbrich 27 / 30
- 28. Organisatorisches, Aufgabenstellung, Einführung, XHTML, CSS,
Javascript, Materialien
Links
spezifische Programmierfragen
stackoverflow: http://www.stackoverflow.com
freies Subversionrepository
Assembla: http://www.assembla.com
Tutor
Christian Ulbrich, s2642662@inf.tu-dresden.de
Skype: christianulbrich
© LMMT ‘Übung: Web- und Multimedia-Engineering’ 14.04.2009 / Christian Ulbrich 28 / 30
- 29. Organisatorisches, Aufgabenstellung, Einführung, XHTML, CSS,
Javascript, Materialien
Hinweise
Kommunikation!
(Oberflächen-)Prototypen anfertigen
Zeitmanagement!
SCM einsetzen (z.B. Assembla)
Tutor
Christian Ulbrich, s2642662@inf.tu-dresden.de
Skype: christianulbrich
© LMMT ‘Übung: Web- und Multimedia-Engineering’ 14.04.2009 / Christian Ulbrich 29 / 30
- 30. Vielen Dank für eure Aufmerksamkeit!
© LMMT ‘Übung: Web- und Multimedia-Engineering’ 14.04.2009 / Christian Ulbrich 30 / 30