Aktuelle Webtechnologien wie HTML5, CSS3 im Überblick.
Zielgruppe: Designer, HTML 4 / XHTML User und mehr.
Was kann ich heute schon nutzen? Wie kann ich HTML5 in meine Webseite einbinden?
45. Probleme mit Internet Explorer 8
IE 8 erlaubt nicht unbekannte Elemente per CSS zu
stylen
HTML5shiv ermöglicht Kompatibilität für die
meisten Browser älter als IE9
Begrüßung und kurze Einführung über mich
Mein Name ist..
Web-Entwickler
Kommen wir zum ersten Teil des Vortrags - HTML 5
Was ist dieses HTML5 überhaupt?Sammlung von neuen Technologien, neuen HTML Elementen und vielen weiteren kleinen Teilen
HTML 5 hat eine bewegte Geschichte, voller Höhen und Tiefen
Primär von Apple, Google und anderen
Web Hypertext Application Technology Working Group
Unzählige Möglihckeiten, immer mehr die dazu kommen
Mobile web Apps
Microsoft erlaubt Windows 10 Apps in HTML 5 und JavaScript zu entwickeln und das schon ein paar Jahre..Warum? Millionen von potenziellen Entwicklern
Webapps, Applikationen die dem Desktop in nichts nachstehen
Games in Kombination mit JavaScript, WebGL, CSS etc.
Woran erkennt man jetzt eine HTMl5 Seite
<!-- HTML 4.01 Strict -->><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"><!-- XHTML 1.0 Strict -->><DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Klarer Fokus von Google und Apple -> Ablösung Flash
Youtube
<track>
Die Steuerung ist auch mit JavaScript und komplett eigenen Buttons und Layouts möglich
MP4, WEBM, OGG
Woran erkennt man jetzt eine HTMl5 Seite
MP3, OGG, WAV
Scalable Vector Graphics
Graphics for the web
W3C recommendation
HTML5 bietet semantische Elemente um verschiedene Stellen der Seite zu definieren
Ersetzt <div class=”header”>
Schon im Body
Andeuten der Navigation
Sollte Sinn für sich selbst machen
Forum, Blog, Newspaper Artikel
Eine thematische Gruppe von Inhalt, typischerweise mit einem heading
<h1>test</h1>
<p test test>
<article kann eine Section enthalten nicht anders rum
Sidebar
Aside nicht vergessen
Schauen wir uns zuerst die neuen Eingabe Elemente / Typen an Früher haben wir immer JavaScript dafür benötigt
Number input type
Wie wir sehen gibt es auch gleich eine Reihe neue Attribute
Anhand der Sprach-Einstellungen des Browsers Betriebssystems
Je nach Browser mit Date-Picker etc.
Datumsformat Ergebnis im IRC
Color-Picker
Anhand der Sprach-Einstellungen des Browsers Betriebssystems
Je nach Browser mit Date-Picker etc.
Datumsformat Ergebnis im IRC
Mindestlänge
Entsprechend dem Browser Validierung der E-Mail
Tastatur auf mobilen Geräten passt sich an
Entsprechend dem Browser Validierung
Entsprechend dem Browser Validierung
Schauen wir uns zuerst die neuen Eingabe Elemente / Typen an Früher haben wir immer JavaScript dafür benötigt
Standardisierung, Vereinfachung der Anwendung, Weniger Fehler
Standardisierung, Vereinfachung der Anwendung, Weniger Fehler
Standardisierung, Vereinfachung der Anwendung, Weniger Fehler
Standardisierung, Vereinfachung der Anwendung, Weniger Fehler
Entsprechend dem Browser Validierung
Valides Markup
CSS verwenden
CSS verwenden
Cookies beachten
JavaScript Fallbacks
Nachrichten bei kein HTML 5 Video etc.
SEO
Ladezeiten
CSS und JS verkleinern und zusammenfassen (minify)
Bilder zu Sprites zusammen fassen
Funktioniert in allen Browsern und erspart und sehr häufig Photoshop
Wir können es auch für jede Ecke angeben, wie bei margin oder padding.
-moz-border-radius
-webkit-border-radius
Werden nicht mehr benötigt
Etwas komplizierter
Gibt auch noch Dinge wie blur, spread, inset (inner shadow) etc.
Flexbox ist eine CSS Technik die einem erlaubt Elemente einfach zu positionieren.
1 Dimensionale Layout
Content first (Content bestimmt die Größe)
Flexbox läuft in allen gängen Browsern
Mit Grid und Box Alignment kann man die Position einfach in einem definierten System positionieren