Aktueller Standard
HTML4.1 / CSS2 / JavaScript 1.8 (ECMA Script)
Validatoren HTML5
WHATWG
AG aus großen Unternehmen entwickeln HTML5: Google, Apple, Microsoft… -> Interessengemeinschaft zur Entwicklung von HTML5 und Vorlage beim W3C
- HTML5
- Web Forms 2.0
- Web Control 1.0
API
“application programming interface”
Schnittstelle zur Anwendungsprogrammierung
http://de.wikipedia.org/wiki/Programmierschnittstelle
HTML5 und XHTML2.0
HTML5 wird es in Zukunft nicht geben, nur HTML
XHMTL hat XML als Basis und folgt den Regeln von XML -> erweiterbar mit eigenen, nicht definierten Tags
HTML hat als Basis SGML -> definierter Befehlssatz
Ziele von HTML5
Trennung Dokumentenstruktur, Gestaltung und Logik
In HTML4 übernahm die Sprache zunehmend gestalterische Aufgaben -> Verwässerung der Trennung
- Beschreiben des Dokument mit HTML
- Gestalten mit CSS
- Logik durch JSS (Server oder Client)
HTML5 Sprachelemente
http://www.html5test.com -> wieviel HTML5 kann der Browser ->gibt einen guten Überblick
HTML5 wird nicht mehr zwingend abwärtskompatibel sein! Einige Elemente werden eliminiert. HTML5 ersetzt nicht HTML4.
Vorteile von HTML5
- HTML5 hat weniger Regeln
- HTML5 bringt Barrierefreiheit
- Suchmaschinenoptimierung
- Wartbarkeit und Lesbarkeit Code
- Wiederverwendbarkeit des Codes
Wozu führt schlechter HTML-Code
Alles was nicht Standard ist, interpretiert der Browser selbst: http://de.wikipedia.org/wiki/Quirks-Modus
Dreckiges HTML wird verschiedenen Interpretiert: Im Quirksmode beschäftigen wir den Browser mit rendern ->
- ressourcenunfreundlich
- Interpretationsspielräume
HTML5 Content-Model
alte:
<div id="header"> <div id="navigation">
neu mit Strukturelementen:
<header> <nav>
Neue Elemente / nicht mehr unterstützte Elemente
Nicht mehr unterstützte:
- Frames ganz eliminiert
- Acronym -> abbr
- Apple CSV nutzen noch Java-Applets (speziell NaWi) -> object
- dir -> ul
- Font
- Strong wird zur semantischen Hervorhebung weiter benutzt
- Regel: alles was mit Layout zu tun hat, fliegt raus
Neue Elemente (Beispiele)
Nur noch ein Doctype
<!DOCTYPE html>
- audio
<audio controls="controls"> <source src="song.ogg" type="audio/ogg" /> <source src="song.mp3" type="audio/mp3" /> Your browser does not support the audio element. </audio>
Problem: Bowserspezifisch -> jeder Browser unterstützt andere Formate
- video
<video width="320" height="240" controls="controls"> <source src="movie.mp4" type="video/mp4" /> <source src="movie.ogg" type="video/ogg" /> Your browser does not support the video tag. </video>
Problem: Bowserspezifisch -> jeder Browser unterstützt andere Formate
-> benötigen dementsprechend Fallback-Lösungen
- track
Untertitel, wir nicht oder kaum unterstützt
- embed
Mulditmediaelemente wie Flash
Strukturelemente
- figure -> geschlossene Einheit in einem Artikel, z. B. Grafik
- figcaption -> Bildunterschrift
- footer -> Strukturelement in verschiedenen Szenarien
- header -> Strukturelement in verschiedenen Szenarien
- meter (Messergebnisse)
- mark -> Markierung
- nav (Navigation) -> für die Hauptnavigation
- article (sollte inhaltlich geschlossen sein)
- aside -> Zusatzinformationen zum Inhalt
- hgroup -> Überschriften grupieren (h1 – h6 Elemente gruppieren)
Wird visualisiert
- details -> Details im Dokument
- summary -> Artikelzusammenfassung
- progress -> Progressbar
- ruby -> ausprache von Chinesischen Schriftzeichen
- datalist -> Vorschlagliste für Eingabefeld -> gutes Feature
… und etliche andere
Zum lernen: http://www.w3schools.com/html5/
http://gsnedders.html5.org -> Outline Test
Beispiele:
Überschrift für Artikel
<header>
<h1>...</h1>
<h2>...</h2> </header>
Datalist -> gutes Feature
<form action="demo_form.asp" method="get"> <input list="browsers" name="browser" /> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist> <input type="submit" /> </form>
Neue Attribute / nicht mehr Unterstützte Attribute
Nicht mehr unterstützt wird alles was mit Layout zu tun hat. Entsprechungen in CSS existieren schon mit HTML4
Video-Element / JavaScript
Canvas-Element
canvase -> Leinwand für z. B. Javascript
Ist immer ein Bitmap + Lässt sich als Image speichern
Alternative: SVG (http://de.wikipedia.org/wiki/Scalable_Vector_Graphics) -> Browser können das, kann direkt in den HTML-Code eingebaut werden
Web Forms 2.0
Native Validierung von Formularfeldern anhand einer spezifischen ID -> z. Z. nur Opera
Formularelemente außerhalb eines Formulars einsetzbar
- Autocomplete
- Placeholder
- Autofocus
- Required
- Min, Max, Step
- Pattern -> regular Expressions für Eingabe
- Multiple -> mehrere Eingaben
Verschiedenes
Das a-Element darf andere Elemente umschließen
Trennen mit <wbr>-> Trennsymbol nur mit CSS
CSS3
Standardwert des Type-Attributes ist gesetzt
Selektoren
Selektoren ermöglichen den Zugriff auf ein bestimmtes Element
<h1 id="selektorenID" class="selektorenklasse">Selektoren</h1> <div id="kind">Kind</div>
Elementselektor -> Alle h1
ID-Selektor -> Spezifisch über die ID
Klassenselektoren -> alle Elemente der Klasse
Kindselektoren -> Unterzweig
Neue Selektoren
http://www.css-cafe.de/all_selectors.php
Atrribut-Selektoren
Ermöglichen den Zugriff auf bestimmte Elemente
a[href$=".pdf"]
{ background-image: url(images/ic_pdf.gif);
background-repeat: no-repeat;
background-position: 0 50%;
padding: 0 0 0 25px;
white-space: nowrap; }Pseudoklassen
Pseudoklassen gestatten eine Auswahl nach Kriterien, die so dem Quelltext nicht zu entnehmen sind. Sie können auch auf Aktionen des Anwenders eingehen, zum Beispiel aktivierte Checkboxen und ähnliche.
Beispiel:
input[type="text"]:enabled { background:#cfc; }
Hintergrundfarbe für Formelemente mit dem Status „enabled”
Allgemein Selektoren
http://www.w3.org/TR/selectors/
Media Queries
Formatierungen für Medientypen ermöglichen über Media Queries
http://www.w3.org/TR/css3-mediaqueries/
CSS3 Eigenschaften
http://meiert.com/de/publications/indices/css-properties/
Schöne Beispiele
Webfonts mit CSS3
In CSS3 lassen sich mit @font-face Regel eigene Schriften im TTF-Format einbinden
Geplant ist die Realisierung des Standard über WOFF (http://de.wikipedia.org/wiki/Web_Open_Font_Format) -> geht nur vom eigenen Server (analog AJAX)
Google hat einen eigenen Web Font Server http://www.google.com/webfonts
Transformationen mit transform
Ermöglicht lineare Transformationen beliebiger Seitenelemente
CSS3 Transitions
Fliessend animierte Übergänge wie Slide-Effekte bei Webseiten-Elementen
Beispiel:
<style type="text/css">
div
{
width:100px;
height:100px;
background:red;
transition:width 2s, height 2s;
-moz-transition:width 2s, height 2s, -moz-transform 2s; /* Firefox 4 */
-webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* Safari and Chrome */
-o-transition:width 2s, height 2s, -o-transform 2s; /* Opera */
}
div:hover
{
width:200px;
height:200px;
transform:rotate(180deg);
-moz-transform:rotate(180deg); /* Firefox 4 */
-webkit-transform:rotate(180deg); /* Safari and Chrome */
-o-transform:rotate(180deg); /* Opera */
}
</style>
http://www.w3schools.com/css3/tryit.asp?filename=trycss3_transition2
Einige JavaScript APIs
Geolocation
Geolocation ist eine API zur Unterstützung “location aware webservices”
http://de.wikipedia.org/wiki/W3C_Geolocation_API
Es gibt jetzt Opt-Out zu austragen aus der Google DB.
Web Worker
Auslagern von JS in einen extra Thread
https://developer.mozilla.org/En/Using_web_workers
Web Storage
- Key/Value Storage
- Strukturierte Datenbanken
- Application Cache
Wichtiges Feature für das Vorhalten und synchronisieren von Daten
http://sixrevisions.com/html/introduction-web-storage/
http://www.w3.org/TR/webstorage/
WebSocket. Anwendungsbereiche Echtzeit
z. B. Finanzanwendungen, Chat or whatever Echtzeit braucht…
Ist vollduplex-> bidirektionale Kommunikation Server/Browser
Besteht aus API + Netzprotokoll
Application Cache und Cache Manifest
http://www.html5rocks.com/de/tutorials/appcache/beginner/
http://manifest-validator.com/
navigator.onLine
Unterscheidung Online und Offline für z. B. synchronisation von online/offline Storage
http://html5demos.com/nav-online
File-API
Auslesen von lokalen Dateien
Unterstützen nicht alle Browser
Frameworks, Vorlagen, Techniken, Workarounds
Frameworks für HTML5
Es gibt nicht DAS Framework, sondern verschiedene Fokusse
Framework Vergleich
http://www.markus-falk.com/mobile-frameworks-comparison-chart/
HTML5 vs. Flash
Ausblick
- HTML-Seiten ohne JavaScript wird es nicht mehr geben
- JS wird die wichtigste Sprache werden: WEBGL -> http://webglsamples.googlecode.com/hg/aquarium/aquarium.html
Buzzwords -> weiterführend
- JSON (http://www.json.org/js.html)
- IETester -> Testen von IE-Versionen
- Widgets Bsp.: <div id=”pwidget”>
- Tryit Editor (http://www.w3schools.com/html/tryit.asp?filename=tryhtml_basic)
