Einfuehrung_1C

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

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

Übersicht Themenkomplexe

  Themenkomplex 1
  1A) Adobe Flash
  1B) Microsoft Silverlight
  1C) XHTML/CSS/JS

  Themenkomplex 2
  2A) XSLT
  2B) JavaServer Faces
  2C) Webservices


Übungswebseite

  Informationen zu den Übungen
http://www-mmt.inf.tu-dresden.de/Lehre/Sommersemester_09/Vo_WME/Uebung/


Terminplan

14.04.09 Einführung (Teilnahme obligatorisch)
21.04.09 Konsultation (Teilnahme freiwillig)
04.05.09 Skypekonsultation (Teilnahme freiwillig)
05.05.09 Abgabe Oberflächenprototyp
18.05.09 Abgabe der Ergebnisse (bis spätestens 13:00 Uhr)
19.05.09 Ergebnispräsentation (Teilnahme obligatorisch)


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!

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!



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



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



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



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



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)



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


Grundlagen - XHTML

  XHTML ist XML-konformes HTML
  Abschlusstags (Absatz , )
  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


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


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)


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;}

Beispiel

  Kaskadierung bei Cascading Stylesheets rot

<td>
td { color: #FF0000;
Dies ist
font-size: 12pt;
ein Test.
font-family: "Arial" }

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


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



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


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)


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



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();



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“



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



Grundlagen – Javascript – Frameworks

  Demo Adobe Spry



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



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



Hinweise

  Kommunikation!

  (Oberflächen-)Prototypen anfertigen

  Zeitmanagement!

  SCM einsetzen (z.B. Assembla)

  Tutor
  Christian Ulbrich, s2642662@inf.tu-dresden.de
  Skype: christianulbrich


Vielen Dank für eure Aufmerksamkeit!


Einfuehrung_1C

Recomendados

Mais conteúdo relacionado

Destaque

Destaque (9)

Semelhante a Einfuehrung_1C

Semelhante a Einfuehrung_1C (20)

Mais de tutorialsruby

Mais de tutorialsruby (20)

Einfuehrung_1C