HTML5 & CSS3

HTML5 & CSS3

HTML5CSS3Seminar-Dauer: 5 Tage (Kompakt-Seminar) — Termine & Preise auf Anfrage

Trainer: Nico Keszler
Universelle Webseiten mit HTML5 erstellen

In diesem dreitägigen Seminar lernen Sie, was Ihnen HTML5 für Ihre Projekte bringt und warum es so wichtig ist, sich nun internsiv mit HTML5 zu beschäftigen. Sie lernen die Fähigkeiten von Geolocation und Gerätesensorik kennen, die Semantik, die neuen HTML5 Formulare, die Offline-Fähigkeiten, was sie für Möglichkeiten mit Multimedia im Browser gewinnen, Threads für JavaScript, die File API, Fragen der Kompatibilität und natürlich Canvas. HTML5 wurde mit dem Ansatz ins Leben gerufen, den modernen Anforderungen an das Web gerecht zu werden und gleichzeitig einfach in der Handhabung zu sein. Wie das gelungen ist, wissen Sie am Ende dieses Trainings.

 

Seminarinhalt 

  • HTML5 – Wer, wann und warum?
  • Was genau ist HTML5 und warum sollte es mich interessieren?
  • Was ist die WHATWG? Warum gibt es zwei HTML5-Arbeitsgruppen?
  • Was ist mit XHTML2 passiert?
  • Kann man HTML5 heute schon verwenden?
  • Und was hat es mit dem Jahr 2022 auf sich?
  • Geolocation und Gerätesensorik
  • Bei zunehmender mobile Internetnutzung kommt Geolocation verstärkte Bedeutung zu und da ist es ganz praktisch, dass moderne Browser eine eingebaute API hierfür haben.
  • Auch die Beschleunigungs- und Lagesensoren von modernen Smartphones und Tablet-Computern lassen sich mit HTML und JavaScript problemlos „anzapfen“.
  • HTML5-Einstieg für Fortgeschrittene
  • HTML5 ist eine Erweiterung von bestehenden HTML-Techniken.
  • Die wichtigsten Fakten, die neuen formalen Regeln und einige kleinere Änderungen, die mit wenig Aufwand schon viel bewegen, sind Gegenstand dieses Crashkurses für den geübten HTML-Autor.
  • Semantisches HTML5
  • Die neuen Auszeichnungselemente von HTML5 schaffen Ordnung und bedingen ein anderes Entstehen von Struktur in Websites, in das man sich erst einmal hineindenken muss.
  • Dass des weiteren einige HTML-Elemente beibehalten, aber umdeklariert wurden, hat weiteres Stolperstein-Potenzial, das es zu meistern gilt.
  • HTML5-Formulartechnik
  • Es gibt unüberschaubare viele Formular-Verschönerungs-Scripts und Widget-Bibliotheken, mit denen man Formularvalidierung oder neue Formen von Eingabefeldern umsetzen kann.
  • HTML5 setzt an diesem Wildwuchs die Axt an und bietet von Haus aus alle Formularfeatures, die heute noch mühsam getrickst werden müssen.
  • Offline-Webanwendungen
  • Mit HTML5 ist es möglich, komplette Web-Applikationen offline benutzbar zu machen – vielleicht weniger wichtig für den durchschnittlichen Firmenauftritt, aber sehr nützlich für mobil benutzbare Webapps und alles, was man sonst so im Browser programmiert.
  • Auch für die Optimierung von Performance bieten Web Storage und Co neue Möglichkeiten.
  • Multimedia im Browser
  • Sounds und Videos direkt im Browser abspielen? Möglichst auch ohne Flash, damit die iPhone-Nutzer auch etwas davon haben?
  • Kein Problem mit den HTML5-Elementen „audio“ und „video“! Diese erlauben nicht nur das bequeme Einbetten von handelsüblichen Multimedia-Formaten, sondern sind auch durch eine API programmierbar. Das Jonglieren mit den diversen Browser-Eigenheiten macht das Thema allerdings zu einer ziemlichen Herausforderung.
  • Web Workers – Threads für JavaScript
  • Die diversen neuen HTML5-Features verlangen vom Browser und seiner JavaScript-Engine immer mehr Rechenleistung.
  • Dank Web Workers ist es möglich, lang laufende Scripts zu schreiben die den Browser nicht blockieren oder komplexe Rechenprozesse auf mehrere CPUs zu verteilen.
  • Die File API
  • Mit der File API können im Browser clientseitig Dateien verarbeitet werden. Damit wird es ein Leichtes, Webapplikationen zu schreiben, die zum Beispiel MP3-Tags lesen können oder clientseitig erzeugte Downloads direkt gezippt ausliefern.
  • Polyfills und Vorwärtskompatibilität
  • HTML5 schön und gut, aber was tut man im Internet Explorer 6?
  • Das Zauberwort heißt „Polyfill“ und ist eine Technik für vorwärtskompatible HTML5-Apps.
  • Polyfills können zwar nicht jeden alten Browser in einen modernen HTML5-Champion verwandeln, sind aber dennoch ein wichtiger Baustein für die tägliche HTML5-Arbeit.
  • Das Canvas-Element
  • Wenn es ein Element von HTML5 gibt, das bereits vollends im Entwickler-Mainstream angekommen ist, dann ist es „canvas“.
  • Es erlaubt durch eine Reihe von Zeichenfunktionen die Erstellung frei programmierbarer Zeichenflächen, was vom pixeligen Strichmännchen bis zur hardwarebeschleunigten 3D-Grafik alles möglich macht.
  • Kritik, Kommentare, Ausblick und HTML 6
  • Was bedeuten HTML5 und Co für die Zukunft der Web-Plattform?
  • Ist wirklich alles so toll? Die Kritik und ein Blick in die Zukunft schließen auch ein mögliches HTML 6 ein, das auf der einen Seite bereits angekündigt wurde aber möglicherweise trotzdem nie Realität werden wird.
  • Auch der Beruf des Webentwicklers wird sich verändern.

Weitere Informationen 

Zielgruppe

Marketingverantwortliche, Designer, Mitarbeiter aus Unternehmen, die für die Erstellung von innovativen Webcontent verantwortlich sind und sich mit einer HTML5 Schulung eine fundierte Basis schaffen wollen.

Voraussetzungen

Vorkenntnisse in HTML4 und CSS sollten vorhanden sein.

 

CSS3:

In dieser zweitägigen Schulung lernen Sie die faszinierenden Möglichkeiten von CSS3 kennen, mit denen Sie völlig neue Möglichkeiten der Gestaltung erhalten. Sie Lernen in dieser Schulung die Hintergründe von CSS3 kennen und lernen den Umgang mit CSS3-Selektoren, Transformationen, Boxen und Rahmen, Farben und Farbverläufe, Schrifteinbettung und -gestaltung und mit Effekten und Animationen kennen. Es werden CSS3-Tools vorgestellt. Die Teilnehmer erhalten zwei Tage geballtes Wissen zu Cascading Stylesheets und modernem Layout. CSS3 bringt viel Neues und kann das Web wieder etwas dynamischer und „schöner“ machen. Ob dieser Anspruch erfüllt wird, wissen Sie am Ende dieses Trainings.

 

Seminarinhalt 

  • Überblick und Hintergründe von CSS3
  • Ähnlich wie HTML5 hat CSS3 eine bewegte Geschichte hinter sich – so ist CSS3 nicht etwa die dritte Ausfertigung des CSS-Standards, sondern die vierte.
  • Des weiteren zeigen viele Tendenzen in modernem CSS eindeutig in die Vergangenheit und vieles ist gar nicht so neu, wie es den Anschein hat.
  • CSS3-Selektoren
  • Heutiges HTML-Markup ist häufig von sogenannter „Classitis“ geplagt, also einer Vielzahl von Klassen, die einfach nur als Hooks für das Design dienen.
  • Classitis verletzt die Trennung von Markup und Design und macht die Wartung von Webseiten unnötig schwer.
  • Die Lösung für dieses Problem sind die neuen CSS3-Selektoren, die ganz neue Möglichkeiten für die gezielte Ansprache von DOMElementen bieten.
  • Transformationen
  • Auch mit CSS3 besteht Webdesign im wesentlichen aus lauter kleinen Boxen, doch dank Transformationen lassen sich diese Boxen erstmals transformieren.
  • Neben 2D-Transformationen (verschieben, verzerren, rotieren) öffnet sich für CSS-Autoren in modernen Browsern auch die dritte Dimension.
  • Boxen und Rahmen
  • Abgerundete Ecken von Boxen sind das Vorzeige-Feature von CSS3, allerdings bei weitem nicht das einzige, was CSS in Zukunft für die Gestaltung von Boxen und Rahmen bereit hält – auch skalierbare Hintergründe, Sprite-Borders und vieles mehr stehen auf dem Programm.
  • Farben und Farbverläufe
  • Neben einer handvoll neuer Farbmodelle führt CSS3 auch Farbverläufe ein.
  • Dieses in jedem Fall nützliche, aber auf den ersten Blick etwas unspektakuläre Feature bietet mehr als man meinen möchte, denn neben einfachen Farbübergängen kann man aus CSS3-Farbverläufen auch komplexe Texturen zaubern.
  • Schrifteinbettung und -gestaltung
  • Schrifteinbettung mit @font-face wird oft zu CSS3 gezählt, ob wohl die Technologie eigentlich steinalt ist und selbst im Internet Explorer 6 funktioniert.
  • Ungeachtet dessen gibt es allerlei Fußangeln, die bei der Einbettung zu beachten sind und CSS3 bringt für die Schriftgestaltung durchaus auch eine oder andere wirklich neue Feature mit.
  • Effekte und Animationen
  • Animationen werden heutzutage meist per jQuery und andere JavaScript-Bibliotheken umgesetzt.
  • Da dies langsame JavaScript-Engines und das noch langsamere DOM nutzt, sind diese Animationen langsam und ineffizient – ganz anders als die einfachen und vor allem sehr schnellen CSS3- Animationen und -Transitionen.
  • CSS3-Tools
  • Als wäre CSS3 an sich nicht komplex genug, verkomplizieren Vendor-Prefixes, alte Browser und die Notwendigkeit von kreativen Hacks die Umsetzung von Webdesigns zunehmend.
  • Abhilfe können hier nur die richtigen Tools schaffen, die vom einfachen, webbasierten Code-Generator über JavaScript bis hin zum CSS-Compiler reichen.
  • Media Queries und Responsive Design
  • CSS3 und vor allem HTML5 werden wahre Wunderdinge für die mobile Webentwicklung nachgesagt und Media Queries halten dieses Versprechen.
  • Mit nur wenigen Zeilen CSS-Code lassen sich Regeln ganz gezielt je nach Art und Formfaktor des Ausgabegeräts anwenden.
  • Wichtig ist dies für responsive design, polyvalentes Webdesign, das Nomal- Tablet- und Handy-Layout auf einmal ist.
  • CSS3-Layout
  • Heutiges Webseiten-Layout – egal ob es Tabellen, Floats, oder andere Techniken einsetzt – besteht nur aus Notbehelfen.
  • Echte Layout-Techniken werden nämlich erstmals mit CSS3 eingeführt.
  • Egal ob Mehrspaltigkeit oder Grid-Layout – am Ende fragt man sich, wie man je ohne CSS3-Layouts arbeiten konnte.
  • Ausblick
  • Obwohl manche Browser bis heute CSS3 nicht voll unterstützen, ist bereits CSS4 in Arbeit.
  • Erste Spezifikationen für CSS4-Selektoren, Variablen werden bereits geschrieben und auch jenseits der W3C-Gremen tut sich einiges.
  • Präprozessoren verwandeln CSS in ein reines Compiler-Ziel und die stetig wachsende Komplexität wird auch den Beruf der Webdesigner und -entwickler verändern.

Zielgruppe

Webdesigner, die mit HTML5 arbeiten möchten und die wesentlich Möglichkeiten der Webseitengestaltung mit CSS3 effektiv nutzen wollen.

Voraussetzungen

Kenntnisse in HTML5, idealerweise Besuch der HTML5 Schulung

Ihre Buchungsanfrage

BACK
iTT X1
Skills
NEXT
Adobe
AfterEffects
Dream-
weaver
Adobe
Animate
Adobe Edge Animate
Adobe
Illustrator
Adobe
Indesign
Adobe
Photoshop
Adobe
Premiere

Ihre Buchungsanfrage