HTML5, CSS2 und CSS3, Canvas, SVG, Javascript, jQuery, JSON, Ajax und andere aktuelle Techniken im Überblick

Ein grober thematischer Überblick als Einführung in die Planung und Programmierung von Frontends für "Webseiten von "Responsive Web Design" über UI Elements, Datenaustausch zwischen Clients und Servern bis Semantik oder 3D.

Ein jeder, der im Webdesign oder im weitesten Sinne der Programmierung von Oberflächen für "Webseiten" tätig ist, wird eines längst wissen: Es gibt eigentlich ständig irgendwelche Neuerungen. Neue Sprachbestandteile, die (endlich!) alle Browser verstehen. Neue mobile Endgeräte, die berücksichtigt werden sollen und nun irgendwelche Dinge doch nicht beherrschen oder eine so langsame Internetanbindung haben, dass man Webseiten anders planen muss. Man sollte nicht versuchen, jedes Thema, jedes Detail und jeden Trick "aktiv können" zu wollen. Das Primärziel sollte darin bestehen, von den verschiedenen Themen, Tricks und Ansätzen schon einmal etwas gehört zu haben.

Die nachfolgende Liste beinhaltet einen groben Überblick über die Themen in Webdesign und Frontend-Programmierung mit Blick auf HTML5, CSS3, jQuery, JSON, Audio, Video, Online-Formulare, Datenaustausch zwischen Client und Server, 2D- und 3D-Grafik, Animation, Typographie, SEO bis Serialisierung, Performance oder Semantik.

HTML5 Einführung

HTML5 Einführung

Einführung

• DOM: Das DOM Document Object Model
• XML: Die XML Syntax verstehen
• HTML5: Überblick über neue Sprachelemente

HTML5 / Access Keys

• Tabs: Springen im Inhalt über Tabulator
• Access Keys: Springen im Inhalt über Tastaturkürzel

HTML5 / Video

• VIDEO: Das neue Video-Tag von HTML5
• Referenzieren von Videos 
• Das unvermeidbare Thema Video-Formate 
• Konvertierung von Videos
• Javascript-Funktionen für das Video-Tag

HTML5 / Audio

• AUDIO: Soundeffekte, Background Sounds, Loops
• Referenzieren von Audio-Files
• Cross-Browser: Audio-Datei-Formate
• Konvertierung von Audio-Daten-Formaten
• Javascript-Funktkionen für Audio/Ton/Effekte

HTML5 und CSS3: Responsive Web Design (RWD)

HTML5 und CSS3: Responsive Web Design (RWD)

Einführung: Wie HTML/CSS-basierte Frontends entwickelt werden können

• Überblick: Die Vielzahl der Endgeräte und Display-Größen
• Typische Problemstellungen bei bestehenden CMS-basierten Webseiten
• Die übliche Alternativen, um Webseiten für verschiedene Endgeräte und Displays zu optimieren
• Vorteile und Nachteil der Varianten mit Blick auf Suchmaschinenoptimierung / SEO, Performance, Datenübertragung, Latenz

Responsive Web Design (RWD)

• RWD mit CSS3 Media Queries
• Funktionsweise
• Vor- und Nachteile
• Floats

Beispiele, Sonderfälle und Problemfälle

• Beliebte responsive Layouts
• Komplexere Layouts der Desktop-Zeit "responsive" programmieren
• Menüs und Navigationskonzepte
• Tabellen und Responsive Web Design: Ansätze und Grenzen

HTML5 Canvas: Grafik und Animation in Echtzeit

HTML5 Canvas: Grafik und Animation in Echtzeit

HTML5 Canvas ermöglicht es, dass grafische Operationen in Verbindungen mit Javascript in Echtzeit im Browser berechnet werden können. 

• Überblick über grafische Funktionen
• Derzeitige technische Möglicheiten
• Ansätze zur Programmierung von Animationen
• Programmierung von Spielen: Das Thema Performance
• Programmierung von Animationen für Webseiten

SVG: Interaktive Vektorgrafiken in Echtzeit animieren

SVG: Interaktive Vektorgrafiken in Echtzeit animieren

• SVG: Das Vektorgrafik-Format gem. W3C
• Vorteile und Nachteile
• SVG als Alternative zu Canvas
• SVG und CSS
• SVG mit Javascript im DOM
• Interaktive SVG Grafiken
• SVG Grafiken zur Laufzeit im Browser animieren

Responsive Web Design: Eigene UI Elemente programmieren

Responsive Web Design: Eigene UI Elemente programmieren

HTML5/CSS2/CSS3 Layouts mit Media Queries

• Typischer Aufbau des Quellcodes
• Beliebte Ansätze für "responsive" Layouts
• Die Grenzen des Machbaren im Falle HTML und CSS
• Mediaqueries und Performance-Probleme im Browser

jQuery: Eine der derzeit beliebtesten Javascript-Bibliotheken

jQuery: Eine der derzeit beliebtesten Javascript-Bibliotheken

Überblick

• jQuery: jQuery ist und bleibt Javascript.
• jQuery: Typische Einsatzzwecke
• jQuery: Verschiedene Versionen von jQuery

jQuery einsetzen

• Einbinden von jQuery im HTML-Code
• Document Ready

jQuery und Javascript

• Gliederung des eigenen Quellcodes
• Namespaces in Javascript definieren
• Öffentliche und private Eigenschaften
• Kollisionen von $ vermeiden

jQuery UI Elements

• Beliebte User Interface Elemente
• Akkordeon
• Navigation
• Responsive Tabellen
• etc.

jQuery Mobile jQM

• Einbinden von jQuery Mobile
• Gliederung des HTML-Codes
• jQuery Mobile UI Elemente
• Layers, Panels, Buttons
• Asynchrones Nachladen von Inhalten
• Unique IDs für Anchor Elements

jQuery und Ajax

• Die Ajax-Funktionalität von jQuery

jQuery und Javascript

• DOM Elemente in Javascript und jQuery referenzieren / austauschen
• Objekte, Arrays und Werte zwischen Javascript und jQuery austauschen

jQuery Sprachelemente

• Selektieren von DOM Elementen, Attributen, Text und Daten 
• Einfügen von DOM Elementen, Attributen, Texten und Daten
• Durchlaufen von Selects in Schleifen

jQuery Animation

• Beliebte Funktionen für einfache Animationen

jQuery für interaktive Oberflächen

• Ereignisse von Maus, Tastatur, Touchpad, Bewegung und Orientierung des Endgeräts erfassen und darauf reagieren

jQuery, JSON, Ajax und die Serverseite (hier: PHP)

jQuery, JSON, Ajax und die Serverseite (hier: PHP)

• Ajax: Was ist Ajax und wozu dient es?
• JSON: Was ist JSON und wozu dient es?
• jQuery Ajax Funktionen
• Senden von Daten an den Server
• Abrufen von Daten vom Server
• Serialisierung von Objekten in Javascript
• Deserialisierung von Objekten in Javascript
• Serialisierung von Objekten in PHP
• Deserialisierung von Objekten in PHP

HTML5 Online-Formulare: Daten erfassen und validieren

HTML5 Online-Formulare: Daten erfassen und validieren

• HTML5 Formularelemente
• Ereignisse/Events für Javascript
• Validierung von Formulardaten über Javascript
• Datenaustausch: AJAX, GET, POST, UTF8, Sonderzeichen
• Datenaustausch: File-Upload(s)

HTML5 Semantik, Metadaten, Code Snippets, Schema

HTML5 Semantik, Metadaten, Code Snippets, Schema

• Ergänzung des HTML-Codes um Zusatzinformationen
• Semantische Informationen für die Seitenstruktur von Webseiten
• Semantische Informationen: Schema
• Semantische Informationen: DC
• Semantische Informationen: Open Graph Protocol

Webdesign und Typographie: Schriften im Web

Webdesign und Typographie: Schriften im Web

• HTML/CSS-Standards und was der Browser daraus macht
• Image Replacement Techniken
• Cufon
• Webfonts
• Google Webfront Project
• Lizenzfragen
• Datenschutz

Navigation: Zustände von Menü-Einträgen am Beispiel TYPO3

Navigation: Zustände von Menü-Einträgen am Beispiel TYPO3

Menüvarianten

• Separated Linear
• Partial Separated
• Trees
• Layers
• Drill Down Menü Konzepte für 3 bis 10 Gliederungsebenen

Navigationszustände

• NO
• ACT
• ACTIS
• CUR
• CURIS

Positionszustände

• FST
• MDL
• LST
• etc.

Nutzungszustand

• normal
• hover
• active
• visited

ThreeJS: 3-dimensionale Programmierung und 3D-Rendering

ThreeJS: 3-dimensionale Programmierung und 3D-Rendering

Ausblick: Mit Javascript im Browser 3D-Rendering und 3D-Programmierung ermöglichen.

• ThreeJS: Die Javascript-Bibliothek für 3-dimensionale Elemente im Web
• Grundlagen des Aufbaus und der Modellierung von 3-dimensionalen Objekten
• 3D-Rendering im Browser mit und ohne WebGL
• Hardware-Beschleunigung für 3D-Berechnungen