Workshop für HTML5 und CSS3 mit Dreamweaver

HTML5 und CSS3: Die neuen Webstandards professionell einsetzen

Sie möchten Ihren Website Besuchern ein besseres Erlebnis bieten. Mit HTML5 und CSS3 stehen Ihnen als Webdesigner neue Werkzeuge für die Gestaltung, die Anwendungsentwicklung, eine verbesserte Struktur und die Darstellung auf unterschiedlichen Bildschirmgrößen zur Verfügung. Wie Sie diese neuen Möglichkeiten ausschöpfen, gleichzeitig Rücksicht auf ältere Browser nehmen und damit erfolgreiche Webseiten entwickeln lernen Sie in diesem Workshop.

Diese Ziele erreichen Sie im HTML5 und CSS3 Workshop

Sie erstellen eigene Webseiten mit den neuen Gestaltungs- und Strukturierungsfunktionen und stellen gleichzeitig sicher, dass diese auch in älteren Browsern dargestellt werden können. Verschaffen Sie sich einen Einblick in die verbesserten Möglichkeiten von HTML5 mit neuen Elementen, nativer Videounterstützung, verbesserten Formularfeldern, neuen JavaScript Funktionen für die Anwendungsentwicklung. Am Ende des Seminars haben Sie eine eigene Webseite fertiggestellt, mit der Sie die neuen Technologien ausprobiert haben.

Die Workshop-Agenda

Tag 1: HTML5 Markup und CSS3 Gestaltungsfunktionen

• HTML5
  • Vereinfachte Syntax und Doctype von HTML5
  • Verbesserte Semantik mit den neuen HTML5 Elementen
  • Die neuen Struktur-Tags sinnvoll einsetzen (header, nav, footer, aside, article, section, hgroup, )
  • Neue HTML Tags für die Anwendungsentwicklung und Textauszeichnung (time, meter, mark, figure, figcaption, summary, menu, details, datalist, keygen, output, progress)
  • Strukturelle Änderungen bei Überschriften und Abschnitten
  • Stand der Dinge: Was können die einzelnen Browser
  • Alternativen für ältere Browser anbieten – Graceful Degradation und Progressive Enhancement Strategien
  • Native Video- und Audiounterstützung mit HTML5
• CSS3 Übersicht und neue Gestaltungsmerkmale
  • Neue CSS Selektoren (Erweiterte Attribut Selektoren, Struktur-Pseudoklassen und Sibling Kombinatoren)
  • Multiscreen Publishing mit Media Queries: verschiedene Stylesheets für Desktop-, Tablet- und Mobile-Auflösungen
  • Native Transparenzen mit RGBa Farbangaben
  • Schlagschatten für Text und Boxelemente
  • Abgerundete Kanten für Elemente – Buttons ohne Bilder erstellen
  • Hintergrundverläufe und mehrere Hintergrundbilder
  • Perspektive und Reflektionen
  • Transformationen, Animationen und Übergänge
  • Neue Gestaltungsmöglichkeiten mit mehreren Spalten

Tag 2: Neue HTML5 Webtechnologien und neue JavaScript APIs

• HTML5 Formulare
  • Neue Formularfeldtypen
  • Eingebaute Validierungsfunktionen
• Neue JavaScript APIs
  • Offline Webanwendungen durch Datencaching
  • Online/Offline Events und Abfragen des Netzwerkstatus
  • Die Geolocation API
  • JavaScript API für native Videoinhalte
  • Die Drag und Drop API – Datentransfer mit der Maus
  • Einblick in das Canvas Element
• Mehr Vielfalt bei Schriften durch Webfonts und @font-face

Tag 3 (Optional): Einstieg in jQuery

• Das JavaScript Framework jQuery und jQuery UI einsetzen
• Native Anwendungen für mobile Geräte und Tablets mit jQuery Mobile und PhoneGap entwickeln