Enviar búsqueda
Cargar
Einfuehrung_1C
•
0 recomendaciones
•
288 vistas
T
tutorialsruby
Seguir
Tecnología
Denunciar
Compartir
Denunciar
Compartir
1 de 30
Descargar ahora
Descargar para leer sin conexión
Recomendados
Semantic Web Technologies - SS 2010 - 01 - Einfuehrung
Semantic Web Technologies - SS 2010 - 01 - Einfuehrung
Steffen Schloenvoigt
1 - Einfuehrung
1 - Einfuehrung
Steffen Schloenvoigt
SWT
SWT
Steffen Schloenvoigt
Gs Os El Os For Ilp 10 30 09
Gs Os El Os For Ilp 10 30 09
Esther Grassian
¡La+Liber..
¡La+Liber..
EL DESPERTAR SAI
網路行動/ internet activism
網路行動/ internet activism
Charles Chuang
Explicação dos e books
Explicação dos e books
Van Der Häägen Brazil
Morze pracy[1]poola
Morze pracy[1]poola
Gerd Tarand
Recomendados
Semantic Web Technologies - SS 2010 - 01 - Einfuehrung
Semantic Web Technologies - SS 2010 - 01 - Einfuehrung
Steffen Schloenvoigt
1 - Einfuehrung
1 - Einfuehrung
Steffen Schloenvoigt
SWT
SWT
Steffen Schloenvoigt
Gs Os El Os For Ilp 10 30 09
Gs Os El Os For Ilp 10 30 09
Esther Grassian
¡La+Liber..
¡La+Liber..
EL DESPERTAR SAI
網路行動/ internet activism
網路行動/ internet activism
Charles Chuang
Explicação dos e books
Explicação dos e books
Van Der Häägen Brazil
Morze pracy[1]poola
Morze pracy[1]poola
Gerd Tarand
CRESCIMENTO DORMIR É IMPRESCINDÍVEL NO CRESCER INFANTO JUVENIL
CRESCIMENTO DORMIR É IMPRESCINDÍVEL NO CRESCER INFANTO JUVENIL
Van Der Häägen Brazil
Avanços no Uso do Hormônio do Crescimento Humano HGH
Avanços no Uso do Hormônio do Crescimento Humano HGH
Van Der Häägen Brazil
Desenvolvimento Relevante Embrionário
Desenvolvimento Relevante Embrionário
Van Der Häägen Brazil
Implementing microsoft office share point server 2010
Implementing microsoft office share point server 2010
Alexander Babich
L'escola un dia de vaga
L'escola un dia de vaga
fedacamilcar
Obesidade periférica,obesidade intra abdominal,obesidade visceral no contexto...
Obesidade periférica,obesidade intra abdominal,obesidade visceral no contexto...
Van Der Häägen Brazil
Hinze, Acht Schritte zur Achtsamkeit ISBN 978 3-525-40432-4 Leseprobe
Hinze, Acht Schritte zur Achtsamkeit ISBN 978 3-525-40432-4 Leseprobe
Ich
Lugares lindos del mundo
Lugares lindos del mundo
Carmen María Pérez
Mit Sloan 0807
Mit Sloan 0807
Saul Klein
SoSe 2013 | IT-Zertifikat: AT II - 00_Organisatorisches
SoSe 2013 | IT-Zertifikat: AT II - 00_Organisatorisches
Institute for Digital Humanities, University of Cologne
Einführung XHTML CSS JS // MM 08-11
Einführung XHTML CSS JS // MM 08-11
Noël Bossart
Browserbasiertes computing, RIA
Browserbasiertes computing, RIA
Thomas Christinck
Authoring Management
Authoring Management
vzimmermann
XHTML & CSS Workshop
XHTML & CSS Workshop
holgerrueprich
Machbarkeitsstudie: Innovation Management Tool (BASF, Hochschule Mannheim), 2019
Machbarkeitsstudie: Innovation Management Tool (BASF, Hochschule Mannheim), 2019
Michael Groeschel
Using openArchitectureWare 4.0 in domain "registration"
Using openArchitectureWare 4.0 in domain "registration"
joergreichert
Kevin Hofer
Kevin Hofer
Kevin Hofer
Mediencampus Website Grobkonzept
Mediencampus Website Grobkonzept
Marisa Wollner
Onno Reiners: E-Learning einfach selbst erstellen
Onno Reiners: E-Learning einfach selbst erstellen
lernet
German Aerospace Congress
German Aerospace Congress
Markus Litz
WiSe 2013 | IT-Zertifikat: AMM - 00_Organisatorisches
WiSe 2013 | IT-Zertifikat: AMM - 00_Organisatorisches
Institute for Digital Humanities, University of Cologne
WiSe 2013 | IT-Zertifikat: AWB - 00_Organisatorisches
WiSe 2013 | IT-Zertifikat: AWB - 00_Organisatorisches
Institute for Digital Humanities, University of Cologne
Más contenido relacionado
Destacado
CRESCIMENTO DORMIR É IMPRESCINDÍVEL NO CRESCER INFANTO JUVENIL
CRESCIMENTO DORMIR É IMPRESCINDÍVEL NO CRESCER INFANTO JUVENIL
Van Der Häägen Brazil
Avanços no Uso do Hormônio do Crescimento Humano HGH
Avanços no Uso do Hormônio do Crescimento Humano HGH
Van Der Häägen Brazil
Desenvolvimento Relevante Embrionário
Desenvolvimento Relevante Embrionário
Van Der Häägen Brazil
Implementing microsoft office share point server 2010
Implementing microsoft office share point server 2010
Alexander Babich
L'escola un dia de vaga
L'escola un dia de vaga
fedacamilcar
Obesidade periférica,obesidade intra abdominal,obesidade visceral no contexto...
Obesidade periférica,obesidade intra abdominal,obesidade visceral no contexto...
Van Der Häägen Brazil
Hinze, Acht Schritte zur Achtsamkeit ISBN 978 3-525-40432-4 Leseprobe
Hinze, Acht Schritte zur Achtsamkeit ISBN 978 3-525-40432-4 Leseprobe
Ich
Lugares lindos del mundo
Lugares lindos del mundo
Carmen María Pérez
Mit Sloan 0807
Mit Sloan 0807
Saul Klein
Destacado
(9)
CRESCIMENTO DORMIR É IMPRESCINDÍVEL NO CRESCER INFANTO JUVENIL
CRESCIMENTO DORMIR É IMPRESCINDÍVEL NO CRESCER INFANTO JUVENIL
Avanços no Uso do Hormônio do Crescimento Humano HGH
Avanços no Uso do Hormônio do Crescimento Humano HGH
Desenvolvimento Relevante Embrionário
Desenvolvimento Relevante Embrionário
Implementing microsoft office share point server 2010
Implementing microsoft office share point server 2010
L'escola un dia de vaga
L'escola un dia de vaga
Obesidade periférica,obesidade intra abdominal,obesidade visceral no contexto...
Obesidade periférica,obesidade intra abdominal,obesidade visceral no contexto...
Hinze, Acht Schritte zur Achtsamkeit ISBN 978 3-525-40432-4 Leseprobe
Hinze, Acht Schritte zur Achtsamkeit ISBN 978 3-525-40432-4 Leseprobe
Lugares lindos del mundo
Lugares lindos del mundo
Mit Sloan 0807
Mit Sloan 0807
Similar a Einfuehrung_1C
SoSe 2013 | IT-Zertifikat: AT II - 00_Organisatorisches
SoSe 2013 | IT-Zertifikat: AT II - 00_Organisatorisches
Institute for Digital Humanities, University of Cologne
Einführung XHTML CSS JS // MM 08-11
Einführung XHTML CSS JS // MM 08-11
Noël Bossart
Browserbasiertes computing, RIA
Browserbasiertes computing, RIA
Thomas Christinck
Authoring Management
Authoring Management
vzimmermann
XHTML & CSS Workshop
XHTML & CSS Workshop
holgerrueprich
Machbarkeitsstudie: Innovation Management Tool (BASF, Hochschule Mannheim), 2019
Machbarkeitsstudie: Innovation Management Tool (BASF, Hochschule Mannheim), 2019
Michael Groeschel
Using openArchitectureWare 4.0 in domain "registration"
Using openArchitectureWare 4.0 in domain "registration"
joergreichert
Kevin Hofer
Kevin Hofer
Kevin Hofer
Mediencampus Website Grobkonzept
Mediencampus Website Grobkonzept
Marisa Wollner
Onno Reiners: E-Learning einfach selbst erstellen
Onno Reiners: E-Learning einfach selbst erstellen
lernet
German Aerospace Congress
German Aerospace Congress
Markus Litz
WiSe 2013 | IT-Zertifikat: AMM - 00_Organisatorisches
WiSe 2013 | IT-Zertifikat: AMM - 00_Organisatorisches
Institute for Digital Humanities, University of Cologne
WiSe 2013 | IT-Zertifikat: AWB - 00_Organisatorisches
WiSe 2013 | IT-Zertifikat: AWB - 00_Organisatorisches
Institute for Digital Humanities, University of Cologne
Aufbau einer zentral managebaren IT-Struktur mit Einbindung lokaler Schulserv...
Aufbau einer zentral managebaren IT-Struktur mit Einbindung lokaler Schulserv...
Univention GmbH
2010 | mein!KI.KA – Die Kinderkanal-Community | Drupal Dev Days München
2010 | mein!KI.KA – Die Kinderkanal-Community | Drupal Dev Days München
Jutta Horstmann
Internet und Webdesign (Historisches Dokument)
Internet und Webdesign (Historisches Dokument)
Eric Eggert
2. Technologie-Tag - Frontend Architektur
2. Technologie-Tag - Frontend Architektur
Nico Steiner
WordPress CMS - WebMontag Chemnitz Oktober 2011
WordPress CMS - WebMontag Chemnitz Oktober 2011
David Decker
Präsentation zur Zwischenverteidigung
Präsentation zur Zwischenverteidigung
alexanderdamm
SWT2011 - 01 - Motivation
SWT2011 - 01 - Motivation
Steffen Schloenvoigt
Similar a Einfuehrung_1C
(20)
SoSe 2013 | IT-Zertifikat: AT II - 00_Organisatorisches
SoSe 2013 | IT-Zertifikat: AT II - 00_Organisatorisches
Einführung XHTML CSS JS // MM 08-11
Einführung XHTML CSS JS // MM 08-11
Browserbasiertes computing, RIA
Browserbasiertes computing, RIA
Authoring Management
Authoring Management
XHTML & CSS Workshop
XHTML & CSS Workshop
Machbarkeitsstudie: Innovation Management Tool (BASF, Hochschule Mannheim), 2019
Machbarkeitsstudie: Innovation Management Tool (BASF, Hochschule Mannheim), 2019
Using openArchitectureWare 4.0 in domain "registration"
Using openArchitectureWare 4.0 in domain "registration"
Kevin Hofer
Kevin Hofer
Mediencampus Website Grobkonzept
Mediencampus Website Grobkonzept
Onno Reiners: E-Learning einfach selbst erstellen
Onno Reiners: E-Learning einfach selbst erstellen
German Aerospace Congress
German Aerospace Congress
WiSe 2013 | IT-Zertifikat: AMM - 00_Organisatorisches
WiSe 2013 | IT-Zertifikat: AMM - 00_Organisatorisches
WiSe 2013 | IT-Zertifikat: AWB - 00_Organisatorisches
WiSe 2013 | IT-Zertifikat: AWB - 00_Organisatorisches
Aufbau einer zentral managebaren IT-Struktur mit Einbindung lokaler Schulserv...
Aufbau einer zentral managebaren IT-Struktur mit Einbindung lokaler Schulserv...
2010 | mein!KI.KA – Die Kinderkanal-Community | Drupal Dev Days München
2010 | mein!KI.KA – Die Kinderkanal-Community | Drupal Dev Days München
Internet und Webdesign (Historisches Dokument)
Internet und Webdesign (Historisches Dokument)
2. Technologie-Tag - Frontend Architektur
2. Technologie-Tag - Frontend Architektur
WordPress CMS - WebMontag Chemnitz Oktober 2011
WordPress CMS - WebMontag Chemnitz Oktober 2011
Präsentation zur Zwischenverteidigung
Präsentation zur Zwischenverteidigung
SWT2011 - 01 - Motivation
SWT2011 - 01 - Motivation
Más de tutorialsruby
<img src="../i/r_14.png" />
<img src="../i/r_14.png" />
tutorialsruby
TopStyle Help & <b>Tutorial</b>
TopStyle Help & <b>Tutorial</b>
tutorialsruby
The Art Institute of Atlanta IMD 210 Fundamentals of Scripting <b>...</b>
The Art Institute of Atlanta IMD 210 Fundamentals of Scripting <b>...</b>
tutorialsruby
<img src="../i/r_14.png" />
<img src="../i/r_14.png" />
tutorialsruby
<img src="../i/r_14.png" />
<img src="../i/r_14.png" />
tutorialsruby
Standardization and Knowledge Transfer – INS0
Standardization and Knowledge Transfer – INS0
tutorialsruby
xhtml_basics
xhtml_basics
tutorialsruby
xhtml_basics
xhtml_basics
tutorialsruby
xhtml-documentation
xhtml-documentation
tutorialsruby
xhtml-documentation
xhtml-documentation
tutorialsruby
CSS
CSS
tutorialsruby
CSS
CSS
tutorialsruby
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
tutorialsruby
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
tutorialsruby
HowTo_CSS
HowTo_CSS
tutorialsruby
HowTo_CSS
HowTo_CSS
tutorialsruby
BloggingWithStyle_2008
BloggingWithStyle_2008
tutorialsruby
BloggingWithStyle_2008
BloggingWithStyle_2008
tutorialsruby
cascadingstylesheets
cascadingstylesheets
tutorialsruby
cascadingstylesheets
cascadingstylesheets
tutorialsruby
Más de tutorialsruby
(20)
<img src="../i/r_14.png" />
<img src="../i/r_14.png" />
TopStyle Help & <b>Tutorial</b>
TopStyle Help & <b>Tutorial</b>
The Art Institute of Atlanta IMD 210 Fundamentals of Scripting <b>...</b>
The Art Institute of Atlanta IMD 210 Fundamentals of Scripting <b>...</b>
<img src="../i/r_14.png" />
<img src="../i/r_14.png" />
<img src="../i/r_14.png" />
<img src="../i/r_14.png" />
Standardization and Knowledge Transfer – INS0
Standardization and Knowledge Transfer – INS0
xhtml_basics
xhtml_basics
xhtml_basics
xhtml_basics
xhtml-documentation
xhtml-documentation
xhtml-documentation
xhtml-documentation
CSS
CSS
CSS
CSS
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
0047ecaa6ea3e9ac0a13a2fe96f4de3bfd515c88f5d90c1fae79b956363d7f02c7fa060269
HowTo_CSS
HowTo_CSS
HowTo_CSS
HowTo_CSS
BloggingWithStyle_2008
BloggingWithStyle_2008
BloggingWithStyle_2008
BloggingWithStyle_2008
cascadingstylesheets
cascadingstylesheets
cascadingstylesheets
cascadingstylesheets
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
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.
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
Descargar ahora