Webdesign
Konzept, Design, Umsetzung

HTML5 Standard

Warum Webdesign bereits jetzt mit HTML5?

Der technische Fortschritt hat alte HTML Spezifikationen längst hinter sich gelassen. Zahlreiche Browser-Plug-Ins füllen die immer größer werdende Lücke, die durch HTML5 geschlossen werden soll. Soll? Obwohl sich einige Bereiche der Spezifikation noch im Entwurfsstadium befinden, haben dennoch haben große Teile von HTML5 und der damit verbundenen Technologien bereits einen hohen Reifegrad erreicht und werden von allen modernen Browsern unterstützt (siehe HTML5 Test).

Langlebige Seiten für unsere Kunden

Wir haben uns entschlossen unsere Webseiten ausschließlich nach dem neuen Standard zu erstellen, damit wir unseren Kunden technologisch richtungsweisende und langlebige Internetauftritte bieten können. Die Neuerungen und Vorteile von HTML5 sind (auszugsweise):
  • Semantische Tags
    Semantische Tags geben den von ihnen eingeschlossenen Inhalt eine Bedeutung, dienen also nicht nur der optischen sondern auch der logischen Strukturierung einer Seite. Das erleichtert die maschinelle Verarbeitung einer Seite, Programme können ohne menschliche Hilfestellung Inhalt und Struktur eines Dokuments verstehen und interpretieren. So zeigt das <nav> Tag an, dass es sich um einen Navigationsbereich handelt, während das <article> Tag einen Textabschnitt als in sich geschlossenen Beitrag auszeichnet, der überdies mit dem Tag <date> zeitlich zugeordnet werden kann. Richtig verwendet bringen die neuen semantischen Tags noch nicht absehbare Vorteile im Bereich der Suchmaschinenoptimierung.
  • Audio und Video Tags
    Das Einbetten von Audio und Video wird durch die neuen Tags <audio> und <video> enorm vereifacht, was bei der Entwicklung entsprechender Seiten Zeit und Kosten spart.
  • Grafik
    Das <canvas> Element erlaubt die dynamische Darstellung von Pixel- oder Vektorgrafiken mittels JavaScript, was zweifelsohne nicht nur Online-Gamer erfreuen wird, praktische Anwendungen wie Charts und andere Geschäftsgrafiken lassen sich nun einfacher integrieren und umsetzen.

HTML5 - ein Beispiel

Zum besseren Verständnis des <canvas> Elements wird hier eine einfache Grafik erstellt. Die Komplexität ist zugegebenermaßen bescheiden doch sollte es zur Veranschaulichung reichen.

Schritt 1: Rechteck
Schritt 2: Bogen
HTML5 macht Dinge einfach einfacher!

HTML5 Features im Test

Viele Browser unterstützen HTML5 bereits in weiten Bereichen. Hier können Sie überprüfen, welche Funktionen Ihr Browser bereits unterstützt.

Test starten

Features

HTML5 FeatureBeschreibungErgebnis
applicationCacheSchnittstelle für Offline-Zugriff
CanvasDynamisches zeichnen von Grafiken
Canvas TextCanvas Text API
Drag and DropKennen wir aus Windows...
hashchange EventFunktion für Browserverlauf
History ManagementBrowserverlauf API
Audio & Video
HTML5 AudioBrowser Audio ohne Plugin
HTML5 VideoBrowser Video ohne Plugin
Speicher
IndexedDBIm Browser gehostete Webdatenbanken
localStorageDaten für Offlinebetrieb speichern
sessionStorageAlternative zu den bisherigen Cookies
Web SQL DatabaseClientseitige Datenbank (Auslaufmodell?)
Web WorkersAufgaben Hintergrund ausführen
Grafik
SVGDynamisch Skalierbare Vektorgrafiken
Inline SVGSVG im Browser nativ dargestellen
SVG Clip PathsBildmaskierung mit dem Canvas-Element
Verschiedenes
SMILSynchronized Multimedia Integration Language
Web SocketsVoll-Duplex für z.B. Chat aus dem Browser
Cross-window MessagingTextnachrichten in andere Browserfenster
GeolocationBestimmung des Aufenthaltsorts

Input Elemente

HTML5 InputelementeBeschreibungErgebnis
searchEingabefeld Suche
telEingabefeld Telefonnummern
urlEingabefeld Web-Adressen mit Prüfung
emailEingabefeld E-Mail mit Prüfung
datetimeAuswahlfeld Datum/Uhrzeit
dateAuswahlfeld Datum
monthAuswahlfeld Monat
weekAuswahlfeld Woche
timeAuswahlfeld Zeit
datetime-localAttribut Lokalzeit
numberEingabefeld numerisch mit Prüfung
rangeSlider mit den Attributen min, max und step
colorAuswahlfeld Farbe