Präsentation herunterladen
Die Präsentation wird geladen. Bitte warten
Veröffentlicht von:Moritz Heidrich Geändert vor über 8 Jahren
1
© 2008 TravelTainment The Amadeus Leisure Group HTML 5 und CSS 3 – Fortschritt oder Hype? Seminarvortrag Henry Ziegelmann 17. Dezember 2010 1. Betreuer: Herr Hon.-Prof. Dr. H. J. Pflug 2. Betreuer: Herr Dipl.-Math. (FH) Uli Schmidt
2
© 2008 TravelTainment The Amadeus Leisure Group 2 Inhalt Motivation Begriffe Historie Hintergründe HTML JS CSS Beispiel Fazit Fragen
3
© 2008 TravelTainment The Amadeus Leisure Group 3 Motivation neue Standards in Entwicklung versprechen Verbesserungen und neue Möglichkeiten dadurch ggfs. Einsparung vieler Arbeitsstunden Ist dem wirklich so? Antwort auf folgenden Folien …
4
© 2008 TravelTainment The Amadeus Leisure Group 4 Wichtige Begriffe HTML HyperText Markup Language Auszeichnungssprache zur textbasierten Strukturierung von Texten, Tabellen, Bildern, uvm. JS JavaScript dient zur Manipulation von Webseiten in einem Browser CSS Cascading Style Sheets deklarierende Stylesheet-Sprache zur Dokumentstrukturierung
5
© 2008 TravelTainment The Amadeus Leisure Group 5 Historie HTML erste Erwähnung 1989 durch Tim Berners-Lee 1991 HTML 1 zunächst nur Textdarstellung und Bildintegration aktuelle Version (4.01) von 1999 11 Jahre alter Standard vs. sich schnell entwickelnde Internet (Web 2.0 z.B.) JS erste Version 1995 aktuelle Version (1.8) von 2008 CSS erste Gedanken 1993 1996 Level 1 aktuelle Level (2.1) von 2002 8 Jahre alter Standard z.T. bis heute nicht in allen Browsern vollständig implementiert
6
© 2008 TravelTainment The Amadeus Leisure Group 6 Hintergründe Was ist HTML 5? Verbund aus HTML selbst, JS und CSS Wer steckt dahinter? Kooperation aus: World Wide Web Consortium (W3C) XHTML 2 Web Hypertext Application Technology Working Group (WHATWG) Web Forms Wie lauten die Ziele? einheitliches Verhalten (Geräteunabhängigkeit) Verzicht auf externe Plugins Aufwandsminimierung (neue Tags, Selektoren, etc.)
7
© 2008 TravelTainment The Amadeus Leisure Group 7 HTML Doctype Festlegung Dokumententyp (Anwendung Spezifikation) bei Version 4.01 drei schwer zu merkende Varianten wie: jetzt:
8
© 2008 TravelTainment The Amadeus Leisure Group 8 HTML II Tags zur Strukturierung statt Div-Container (früher auch Tabellen und Frames) beschreibt Inhalt neue Tags (Auszug): TagBeschreibung Dokumentunterteilung in einzelne Abschnitte Dokumenten-/Sektionsanfang; kann u.a. Überschriften enthalten Kennzeichnet Text, z.B. aus Blog Dokumenten-/Sektionsende; kann z.B. Copyrightinfos enthalten
9
© 2008 TravelTainment The Amadeus Leisure Group 9 HTML III Audio und Video Vermeidung Plugins wie Flash deren Nachteil der fehlenden Verfügbarkeit egalisiert Standard zur Einbindung solcher Medien Codecs zur Wiedergabe werden standardmäßig bereitgestellt Tags: „alte“ Einbindungsweise (z.B. wegen speziellen Codecs) dennoch möglich
10
© 2008 TravelTainment The Amadeus Leisure Group 10 HTML IV Web Forms 2 wesentlicher Teil Neuerungen in HTML 5 Elemente (Auszug): Input-Typen (Auszug): datalistspezifiziert Liste von Optionen für Input-Feld, d.h. definiert Auswahl- bzw. Eingabemöglichkeiten outputElement zur reinen Ausgabe, z.B. nach Berechnungen emailfür E-Mail-Adressen numberfür numerische Werte rangefür Werte aus Zahlenintervall
11
© 2008 TravelTainment The Amadeus Leisure Group 11 HTML V Input-Attribute (Auszug): min, max, stepEinschränkung möglicher Eingabewerte hinsichtlich Gültigkeitsbereich und Schrittweite (nur bei number, range und date) patternbeim Versenden des Formulars wird Eingabe mit vermerkten regulären Ausdruck geprüft placeholderStandardtext innerhalb Eingabefeld (so lange bis dieses editiert wird) requiredverhindert Absenden eines Formulars, wenn entsprechende Eingabefeld nicht ausgefüllt (required="required")
12
© 2008 TravelTainment The Amadeus Leisure Group 12 HTML – Zusammenfassung einfachere DocType-Notation neue Strukturierungsmöglichkeiten weitestgehende Vermeidung Plugins für Medienwiedergabe neue Formularelemente, Eingabeattribute und –Typen
13
© 2008 TravelTainment The Amadeus Leisure Group 13 JS neue Selektoren Auswahl von Elementen mit gleichen Merkmalen document.getElementsByClassName("klassenname") alle Elemente mit übereinstimmender CSS-Klasse document.querySelectorAll("div.klassenname") alle Elemente mit übereinstimmenden Eigenschaften im Beispiel alle Div-Container mit CSS-Klasse „klassenname“ Drag & Drop erstmals native Unterstützung ermöglicht Elemente auf Webseite zu bewegen
14
© 2008 TravelTainment The Amadeus Leisure Group 14 JS II Web Storage clientseitige Datenspeicherung 2 Varianten: localStorage persistente Datenspeicherung sessionStorage Datenspeicherung nur für aktuelle Session bislang Realisierung durch Cookies dabei nur kleine Datenmengen (KB-Bereich) speicherbar werden bei jeder Serveranfrage mitgesendet Performanceverlust Vorteile: ständige Mitsenden bei Web Storage nicht mehr nötig (aber möglich) Vorgehen „crash safe“ (nach Browser-Absturz Daten vorhanden) Nachteile: Daten können überschrieben werden (gleicher Variablenname) Daten müssen an Server gesendet werden, wenn Weiternutzung mit anderem Browser / Rechner gewünscht
15
© 2008 TravelTainment The Amadeus Leisure Group 15 JS III Web SQL Database clientseitige Datenspeicherung Nutzung von Structured Query Language (SQL) damit komplexere Verarbeitung von lokalen Daten möglich z.B. Sortieren Entlastung Server durch lokale Auslagerung der Daten Web Workers multithreaded JS Auslagerung rechenintensiver Aufgaben (insbes. durch JS) kein „Einfrieren“ Browser
16
© 2008 TravelTainment The Amadeus Leisure Group 16 JS - Zusammenfassung neue Selektoren verkürzen JS-Quellcode „bewegliche“ Webseiten Elemente einer Webseite können beliebig angeordnet werden jedem seine Seite lokale Datenspeicherung bringt Serverentlastung SQL-gestützte Operationen multithreaded JS
17
© 2008 TravelTainment The Amadeus Leisure Group 17 CSS Selektoren neue Selektoren (Auszug): z.B.: div:not(.klassenname) { } a[href^="mailto:"] { } SelektorBeschreibung E[foo^="bar"], E[foo$="bar"] selektiert alle Elemente, dessen Attribut ("foo") mit Wert "bar" beginnt ("^") oder endet ("$") E:nth-child(n), E:nth-lastchild(n) wählt n-te Kind-Element aus (Zählung beginnend am Anfang oder Ende) E:not(s)Negation
18
© 2008 TravelTainment The Amadeus Leisure Group 18 CSS II eigene Schriften jeder Browser nutzt Standardschriftarten (Arial, Courier, Times New Roman) nicht vorhandene werden durch ähnliche ersetzt daraus folgen 2 Nachteile: unsaubere Darstellung beim Einsatz Ersatzschriftart (da Webseite nicht für diese optimiert) Einschränkungen hinsichtlich Gestaltungsmöglichkeiten jetzt neu: "@font-face"-Notation Umsetzung: @font-face { src: url("Pfad/zur/Schriftart.ttf"); font-family: meineSchriftart; } Benutzung: font-family: meineSchriftart, Arial;
19
© 2008 TravelTainment The Amadeus Leisure Group 19 CSS III Visualisierung abgerundete Ecken bislang nur mit Bildern für alle Browser einheitlich umsetzbar border-radius Schatten ebenfalls Bilder, aber auch durch gestapelte Div-Container Nachteil: Aufwand text-shadow box-shadow
20
© 2008 TravelTainment The Amadeus Leisure Group 20 CSS IV Spiegelungen ebenfalls durch Bilder box-reflect Transformierungen Elemente rotieren lassen, etc. transform, rotate(), skew()
21
© 2008 TravelTainment The Amadeus Leisure Group 21 CSS - Zusammenfassung einfacherer Selektierung von Elementen gleicher Merkmale Einbindung eigener Schriftarten möglich visuell ansprechendere Designs ohne Mehraufwand (Spiegelungen, Schatten, etc.) neue Gestaltungsmöglichkeiten mittels Transformierungen
22
© 2008 TravelTainment The Amadeus Leisure Group 22 Beispiel Minimalbeispiel zu HTML 5 und CSS 3 Erstellung Bewertungsformular mit Namen, E-Mail, … Warum Formular? Formulare nahezu auf jeder Webseite Web Forms 2 vielversprechende Änderungen
23
© 2008 TravelTainment The Amadeus Leisure Group 23 Beispiel II CSS-Part – layout.css CharacterSet @CHARSET "UTF-8"; eigene Schriftart @font-face { src: url("TrashHand.ttf"); font-family: TrashHand; } body { font-family: TrashHand, Arial; } Div-Container (des Formulars) #border { background: #EEE; border-radius: 20px; box-shadow: 5px 5px 10px #AAA; transform: rotate(-5deg ) skew(-5deg, -5deg); }
24
© 2008 TravelTainment The Amadeus Leisure Group 24 Beispiel III Spiegelung Überschrift header > h1 { box-reflect: below 1px gradient(linear, left top, left bottom, from(transparent), to(rgba(255, 255, 255, 0.2))); } HTML-Part – index.htm DocType Html-Header BEWERTUNGSBOGEN
25
© 2008 TravelTainment The Amadeus Leisure Group 25 Beispiel IV Html-Body Bewertungsbogen Name: E-Mail: Datum: Bewertung: Copyright © by H. Ziegelmann
26
© 2008 TravelTainment The Amadeus Leisure Group 26 Beispiel V Ergebnis: -webkit-box-reflect -webkit-gradient -webkit-box-shadow -webkit-transform Beispiel (Safari) Fazit: nur Minimalbeispiel (ohne Feinheiten) tolle neue Möglichkeiten bei Formularen, einem wichtigen und vielgenutzten Element einer Webseite Anpassungen derzeit nötig noch nicht alltagstauglich
27
© 2008 TravelTainment The Amadeus Leisure Group 27 Fazit Fortschritt oder Hype? viele gute und auch neue Möglichkeiten Einsparung Arbeitsaufwand gegeben bei Listingvergleichen bis zu 90% Codeeinsparung dadurch Wartung deutlich vereinfacht aber: noch kein Standard entsprechend unterschiedlich viele Features aktuell in Browsern umgesetzt dennoch: FORTSCHRITT da Ziele erreichbar / erreicht viele neue Features (nicht einmal alle Features angesprochen)
28
© 2008 TravelTainment The Amadeus Leisure Group 28 Fazit II Ausblick noch nicht alle Features von Browserherstellern implementiert Kniffe nötig für Internet Explorer Framework (Google) noch keine Standards viele Änderungen und Ergänzungen möglich im Skript diverse Listings weitere Ausführungen
29
© 2008 TravelTainment The Amadeus Leisure Group 29 Fragen? auch per E-Mail: ziegelmann@traveltainment.de
30
© 2008 TravelTainment The Amadeus Leisure Group 30 Vielen Dank!
Ähnliche Präsentationen
© 2024 SlidePlayer.org Inc.
All rights reserved.