Responsive Webdesign, Web Frontend Engineering mit HTML 5, CSS 3, Javascript und jQuery

HTML 5 & FRIENDS.

Flexibilität. Kompatibilität. Interoperabilität.

HTML 5 ist in aller Munde. Ein Hype? Keineswegs! HTML 5 ist die Grundlage für moderne, flexible, kompatible und interoperable Websites und Web-Anwendungen.

HTML 5 - ein Begriff, zwei Bedeutungen.

Der Begriff "HTML 5" wird synonym für zwei Dinge verwendet.

Im verbreiteten, erweiterten Sinn des Begriffs meint man mit HTML 5 eine ganze Ansammlung von Web-Technologien: HTML 5 als Sprachstandard, CSS 3 zur Umsetzung der Gestaltung, Javascript um Verhalten abzubilden und dynamische Aspekte umzusetzen, sowie WebGL um hardwarebeschleunigte 3D-Grafik im Browser darzustellen.

Im engeren Sinne ist es der Name des neuen Standards der Sprache des WWW, die HyperText Markup Language. Sie dient der semantischen Strukturierung von Dokumenten, so dass Web-Browser sie darstellen, und Suchmaschinen sie interpretieren, auswerten und gewichten können. HTML 5 bringt hier gegenüber seinen historischen Vorgängern HTML 4 und XHTML 1.0 eine ganze Reihe von Neuerungen mit.

Neuerungen in HTML 5.

So können mit den neuen <audio>- und <video>-Elementen Audio- und Video-Bestandteile ohne Plugins wie Adobe Flash oder Microsoft Silverlight eingebunden werden. Die Dokumente können besser semantisch strukturiert werden durch neue Tags wie beispielsweise <header>, <footer>, <nav>, <article> und <section>. HTML 5 führt mit data-[...] ein neues General-Attribut ein, um Daten im DOM abzulegen. Weiterhin bringt HTML 5 einige Neuerungen bei Formularelementen, z.B. neue Eingabefeld-Typen wie <input type="email">, <input type="date">, die z.B. zur browserseitigen Formularvalidierung genutzt werden können.

Mithilfe des neuen <canvas>-Elements und Javascript können direkt im Browser 2D-Grafiken gezeichnet und animiert werden. LocalStorage macht Web Apps für die Offline-Nutzung fit. Auch eine lokale SQL-Datenbank, die im Browser läuft, dient diesem Zweck.

CSS 3 & Webfonts.

CSS 3 bringt gegenüber seinem Vorgänger CSS 2.1 eine riesige Menge an neuen Design-Möglichkeiten, für die früher stets ladezeitintensive Grafiken verwendet werden mussten:

Lineare und radiale Farbverläufe.
Abgerundete Ecken.
Schlagschatten und innere Schatten.
Webfonts. Ihre Hausschriftart endlich direkt in Ihrer Seite!
Mehrfache und/oder skalierbare Hintergründe.
Neue Pseudoklassen und -selektoren, z.B.:
- :nth-of-type()
- :first-of-type und :last-of-type
- ::selection
- ::checked, :enabled, :disabled
Skalierung, Drehung, Verschiebung von Elementen.
Transitionen - animierte Zustandsübergänge.
Animationen.

Bei weitem nicht alle Features von CSS 3 sind derzeit in allen Browsern implementiert. Die gelisteten Möglichkeiten finden jedoch in allen modernen Browsern (Firefox, Chrome, Safari, Opera, Android Browser, Internet Explorer 10+) weitestgehend identische Unterstützung.

Fallback-Lösungen für veraltete Browser IEs.

Bei gewünschter identischer Darstellung in Microsoft Internet Explorer 8/9 finden sogenannte Polyfills Anwendung. Je nach CSS-Feature kann das Implementieren einer solchen Fallbacklösung jedoch recht aufwändig sein.

LESS/SCSS.

LESS und SASS/SCSS sind ein Prä-Prozessoren für CSS, und erweitern CSS um vieles, was

die Wartbarkeit erhöht,
die Produktivität steigert
und lange vermisste Funktionalität bietet.

Dazu gehören Mixins (vererb- und parametrisierbare CSS-Klassen), Variablen (z.B. im gesamten Stylesheet immer wieder genutzte Farben oder Schriftgrößen) und Berechnungen/Funktionen. Über Mixins können z.B. typische CSS-Features wie abgerundete Ecken, Schlagschatten, Farbverläufe etc. gekapselt werden, so dass der Stylesheet-Autor nicht immer wieder ein lange Liste von Vendor-spezifischen Prefixes im Stylesheet schreiben muss.

Ein Präprozessor generiert aus den LESS/SCSS-Dateien native CSS-Files. Diese Generierung kann

als Teil des Frontend-Workflows über Node.js-basierte Build-Tools wie gulp.js oder Grunt
durch Software (mit diversen Tools wie z.B. Koala),
clientseitig (via Javascript),

erfolgen.

Javascript, jQuery & Knockout.js.

Javascript ermöglicht, was HTML und CSS alleine nicht können: Die Umsetzung von Interaktion mit dem Nutzer der Website/-App. Dazu gehören simple Dinge wie dynamische Layoutbeeiflussung (z.B. verstecken/anzeigen von Containern nach Klick, Höhenberechnung von Elementen, etc.pp.), client-seitige Vorab-Formular-Überprüfung, aber die wichtigste Rolle kommt Javascript heute über AJAX zu. AJAX ermöglicht asynchrone Kommunikation mit dem Server, d.h. Veränderung von Seitenzuständen und angezeigten Informationen ohne die gesamte Seite neu laden zu müssen.

jQuery vereinfacht viele Standard-Javascript-Aufgaben und kapselt zudem unterschiedliche Javascript-Implementierungen der verschiedenen Browser. Event Handling, DOM-Manipulation, Selektion von DOM-Knoten über CSS-Selektoren, Event Bubbling & Delegation - die Einsatzmöglichkeiten für jQuery sind schier grenzenlos.

Häufig verwendete dynamische Widgets existieren in zahllosen jQuery-Plugins, darunter Slideshows, Tooltips, Tabs, Lightboxen, stylebare Formular-Ersatzelemente u.v.m.

Noch Fragen?

Alles Weitere lässt sich am besten im persönlichen Gespräch klären. Rufen Sie einfach an!