Christian Ulbrich

 Technische Universität Dresden
 Fakultät Informatik
 Institut für Software- und Multimediatechnik
 Leh...
Organisatorisches, Aufgabenstellung, Einführung, XHTML, CSS,
                                Javascript, Materialien
     ...
Organisatorisches, Aufgabenstellung, Einführung, XHTML, CSS,
                                Javascript, Materialien
     ...
Organisatorisches, Aufgabenstellung, Einführung, XHTML, CSS,
                                Javascript, Materialien
     ...
Organisatorisches, Aufgabenstellung, Einführung, XHTML, CSS,
                                Javascript, Materialien
     ...
Organisatorisches, Aufgabenstellung, Einführung, XHTML, CSS,
                                Javascript, Materialien
     ...
Organisatorisches, Aufgabenstellung, Einführung, XHTML, CSS,
                                Javascript, Materialien
     ...
Organisatorisches, Aufgabenstellung, Einführung, XHTML, CSS,
                                Javascript, Materialien

    ...
Organisatorisches, Aufgabenstellung, Einführung, XHTML, CSS,
                                Javascript, Materialien

    ...
Organisatorisches, Aufgabenstellung, Einführung, XHTML, CSS,
                                Javascript, Materialien

    ...
Organisatorisches, Aufgabenstellung, Einführung, XHTML, CSS,
                                Javascript, Materialien

    ...
Organisatorisches, Aufgabenstellung, Einführung, XHTML, CSS,
                                Javascript, Materialien

    ...
Organisatorisches, Aufgabenstellung, Einführung, XHTML, CSS,
                                Javascript, Materialien

    ...
Organisatorisches, Aufgabenstellung, Einführung, XHTML, CSS,
                                Javascript, Materialien

    ...
Organisatorisches, Aufgabenstellung, Einführung, XHTML, CSS,
                                Javascript, Materialien

    ...
Organisatorisches, Aufgabenstellung, Einführung, XHTML, CSS,
                                Javascript, Materialien

    ...
Organisatorisches, Aufgabenstellung, Einführung, XHTML, CSS,
                                Javascript, Materialien

    ...
Organisatorisches, Aufgabenstellung, Einführung, XHTML, CSS,
                                Javascript, Materialien

    ...
Organisatorisches, Aufgabenstellung, Einführung, XHTML, CSS,
                                Javascript, Materialien

    ...
Organisatorisches, Aufgabenstellung, Einführung, XHTML, CSS,
                                Javascript, Materialien

    ...
Organisatorisches, Aufgabenstellung, Einführung, XHTML, CSS,
                                Javascript, Materialien

    ...
Organisatorisches, Aufgabenstellung, Einführung, XHTML, CSS,
                                Javascript, Materialien

    ...
Organisatorisches, Aufgabenstellung, Einführung, XHTML, CSS,
                                Javascript, Materialien

    ...
Organisatorisches, Aufgabenstellung, Einführung, XHTML, CSS,
                                Javascript, Materialien

    ...
Organisatorisches, Aufgabenstellung, Einführung, XHTML, CSS,
                                Javascript, Materialien

    ...
Organisatorisches, Aufgabenstellung, Einführung, XHTML, CSS,
                                Javascript, Materialien

    ...
Organisatorisches, Aufgabenstellung, Einführung, XHTML, CSS,
                                Javascript, Materialien

    ...
Organisatorisches, Aufgabenstellung, Einführung, XHTML, CSS,
                                Javascript, Materialien

    ...
Organisatorisches, Aufgabenstellung, Einführung, XHTML, CSS,
                                Javascript, Materialien

    ...
Vielen Dank für eure Aufmerksamkeit!




© LMMT ‘Übung: Web- und Multimedia-Engineering’ 14.04.2009 / Christian Ulbrich   ...
Upcoming SlideShare
Loading in...5
×

Einfuehrung_1C

440

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
440
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Einfuehrung_1C"

  1. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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
  26. 26. Organisatorisches, Aufgabenstellung, Einführung, XHTML, CSS, Javascript, Materialien Grundlagen – Javascript – Frameworks   Demo Adobe Spry © LMMT ‘Übung: Web- und Multimedia-Engineering’ 14.04.2009 / Christian Ulbrich 26 / 66
  27. 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. 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. 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. 30. Vielen Dank für eure Aufmerksamkeit! © LMMT ‘Übung: Web- und Multimedia-Engineering’ 14.04.2009 / Christian Ulbrich 30 / 30
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×