Login Pop-up

+ 49(0)6407) 905691 Login
Fehler
  • JUser: :_load: Fehler beim Laden des Benutzers mit der ID: 54
Dienstag, Januar 23, 2018

HTML5 – Ist das der Adobe Flash und Microsoft Silverlight Killer?

by / Donnerstag, 30 August 2012 / Schreiben Sie den ersten Kommentar!

google fall in love with html5

HTML5 ist angekommen und alle modernen Browser unterstützen diesen neuen, plattformübergreifenden Standard.  XHTML, als quasi Erweiterung von HTML4, ist damit obsolet. Microsoft und Adobe haben inzwischen auf HTML5 reagiert. Während Microsoft lapidar betont sich mit Silverlight mehr auf das Browser-externe AHA Erlebnis konzentrieren zu wollen, hat Adobe die Weiterentwicklung des Flash Players auf den Prüfstand gestellt. Und tatsächlich, die multimedialen Fähigkeiten von HTML5 bringen den ambitionierten Webdesigner ins Schwärmen, denn HTML5  ist ein vollständiges Framework, dessen Anwendungen auf allen gängigen Systemen laufen. Auch die Safari-gebeutelten Apple  / iPhone User kommen nun in den Genuss von Animationen die Ihnen Apple mit dem Ausschluss von Flash bisher verwehrt. Das Einbinden von Video und Audio in Webseiten wird nun mit einfachen Tags zum Kinderspiel.  HTML5 und CSS3 sind das Gespann der Zukunft wenn es um moderne Webseiten geht.

DIV- und Klassen-Elemente wird es, gerade bei den CMS-Systemen, weiterhin geben. Die Zukunft gehört aber den neuen semantischen Gliederungstags von HTML5.

Die wichtigsten, neu eingeführten Elemente / Tags lassen sich im Prinzip in 4 Kategorien einteilen.

 

1. Die Multimedia Elemente von HTML5

Mit den Multimedia Elementen gehört das von den Suchmaschinen wenig geliebte Adobe Flash, in Webseiten, der Vergangenheit an. Audio und Video einbinden ist so einfach und W3C konform wie noch nie.

 <canvas></canvas>

Mit dem Canvas-Element wird eine rechteckige Zeichenfläche definiert, die statische oder dynamische Grafiken enthalten kann.

<video></video>

Wie der Name schon sagt. Videos einbinden auf einfache Weise.

<audio></audio>

Das Tag um Audiofiles wiederzugeben.

 

2. Die Gruppierungselemente von HTML5

Mit den Gruppierungselementen wird die Webseite in Bereiche gegliedert. Verschachtelte DIV-Strukturen gehören bei konsequenter Anwendung der Vergangenheit an.

<header></header>

Der header-Tag umschließt den Kopfbereich. In den Kopfbereich gehören zum Beispiel das Logo und horizontale Navigation.

<nav></nav>

Die Hauptnavigation wird mit dem nav-Tag gekapselt

<figure></figure>

Das figure-Element vereinfacht die Auszeichnung von Inhalten wie Bildern und Grafiken mit Unterschriften.

<article></article>

Im article-Element werden ganze Artikeltexte gekapselt und hervorgehoben. Die Gliederung geschieht durch das section-Element.

<section></section>

Dieses Tag entspricht prinzipiell dem Absatz (<p></p>) und kann daher auch mehrfach als Gliederungselement auftreten.

<aside></aside>

Mit aside kann man auf einfache Weise eine Sidebar erstellen, die auch unabhängig vom Seiteninhalt sein kann.

<details></details>

Das details-Tag enthält in aller Regel weitere Informationen, die mit Klick ein- und ausgeblendet werden können.

<footer></footer>

Querverweise, Autor- und andere Informationen gehören in den Fußbereich der Webseite.

 

3. Die Formularelemente von HTML5

Das Erstellen von Formularen wird in HTML5 nicht nur einfacher sondern auch Grafisch ansprechender ohne großartig mit Cascading Stylesheets arbeiten zu müssen.

<input></input>

Schlicht und einfach das neue Eingabefeld das mit Telefonnummern, Zahlen, URL- und Email-Adressen, Datums und Zeitangaben umgehen kann.

<datalist></datalist>

Mit dem datalist-Element können Vervollständigungsvorschläge angezeigt werden.

<output></output>

Ergebnisse von Berechnungen werden mit dem output-Tag zurückgegeben.

<progress></progress> und <meter></meter>

Diese beiden Elemente zeigen den Fortschritt und den IST Zustand einer Aktion an. Prozent und Sekunden Angaben bilden dabei die Basis.

<source></source>

Mit source werden die Quellen für Medien angeben.

 

4. Die Textauszeichnungselemente von HTML5

Horvorhebungen werden Suchmaschinenfreundlich mit den Textauszeichnungselementen

<time></time>

Mit dem time-Element werden Zeitangaben in die Seite integriert. Diese sind lokalisiert Formatiert und können bequem ausgelesen werden.

<mark></mark>

Textabschnitte und einzelne Wörter werden mit mark hervorgehoben und für die Suche favorisiert.

 

Die Vorteile von HTML5

HTML5 beinhaltet semantische Elemente, die aus Google Sicht und damit auch aus SEO Sicht das identifizieren wichtigen Contents erleichtert. Auch die Barrierefreiheit wird mit entsprechenden Screenreadern verbessert. Die mobile Webentwicklung wird mit HTML5 plattformübergreifend einfacher. Die leidige Versions Entwicklung bei Apps für Windows, Android oder iOS gehört der Vergangenheit an, wenn auf HTML5 gesetzt wird. CSS3 kann in Verbindung mit HTML5 auf unterschiedliche Plattformbedingungen „intelligent“ reagieren. Alles in allem sind dies Merkmale einer ausgewachsenen Programmiersprache. Es wird spannend für den professionellen Webdesigner.

Die komplette HTML5 Referenz finden Sie hier.

Schreibe einen Kommentar

Achten Sie darauf, die erforderlichen Informationen einzugeben (mit Stern * gekennzeichnet).
HTML-Code ist nicht erlaubt.

Referenzen

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
Prev Next

Petra-Lorenz.com

30.01.2014 Hits:3178 Referenzen

Petra-Lorenz.com

Eine Landingpage zur Optimierung der Suchergebnisse zu den Dienstleistungen freie Hochezeitsrede der Moderatorin Petra Lorenz ( ... ehemals Petra Sanchez).  Das Projekt korrespondiert mit der Agentur für Atemberaubende Akzente. Diese...

Read more

Nordstrand-Urlaub.de

22.01.2013 Hits:3212 Referenzen

Nordstrand-Urlaub.de

Ein Projekt zur Optimierung der Suchergebnisse des korrespondierenden Projektes Nordsee-Meerurlaub.de. Diese zusätzliche Landingpage mit den wichtigen Keywords Nordstrand und Urlaub im Domainnamen erhöht die Präsenz in den Suchergebnissen und führt...

Read more

biomedis | Mobile Homepage

26.09.2012 Hits:3872 Referenzen

biomedis | Mobile Homepage

Bei der  Zahl der Aufrufe von Webseiten über mobile Endgeräte ist in Deutschland ein rasantes Wachstum zu verzeichnen. Dementsprechend erfährt auch die Nachfrage nach mobilen Webseiten derzeit ein stetiges Wachstum....

Read more

BST-Systemtechnik.de

22.05.2012 Hits:2275 Referenzen

BST-Systemtechnik.de

Auch die BST Systemtechnik setzt seit Jahren auf Joomla. Im Hintergrund werkelt die überaus robuste und bewährte Version 1.5. Als Eyecatcher kommt eine, nicht vom Wesentlichen ablenkende, dezente Flash-Animation zum...

Read more

DMFIN.com

22.05.2012 Hits:2485 Referenzen

DMFIN.com

Ein interessantes Projekt war die Neukonzeption des Webauftritts der Deutschen Mittelstandsfinanz in Frankfurt Main.  Nach dem Relaunch präsentiert sich die Webseite im neuen, modernen Look. Neben der optischen Aufwertung bietet...

Read more

Petra-Sanchez.de

01.05.2012 Hits:2396 Referenzen

Petra-Sanchez.de

Moderatoren mögen Joomla. So auch Moderatorin Petra Sanchez - Ein Medien-Profi aus der Wetterau mit extrem positiver, mitreisender Ausstrahlung und einem riesigen Portfolio an Event-Erfahrung.

Read more

Arnold-Margolf.de

26.04.2012 Hits:2276 Referenzen

Arnold-Margolf.de

Eine schlichte und einfache Web-Visitenkarte, die sich auf das Wesentliche beschränkt. 4 Klicks und alles ist gesagt.

Read more

Atemberaubende-Akzente.de

23.04.2012 Hits:2150 Referenzen

Atemberaubende-Akzente.de

Beim Relaunch der Webseite der Event-Agentur Atemberaubende Akzente kam Joomla zum Einsatz. Ein Fullscreen-Slider setzt Traumtänzer, Harlekine, Künstler und Akrobaten perfekt in Szene. Die Anbindung an Youtube und die sozialen...

Read more

Nordsee-Meerurlaub.de

23.03.2012 Hits:2317 Referenzen

Nordsee-Meerurlaub.de

Ein Projekt der etwas anderen Art war Nordsee-Meerurlaub.de. Galt es doch den Spagat zwischen professionellem Design und privatem Ambiente zu wagen. Auch hier war Joomla erste Wahl beim Präsentieren zweier...

Read more

Lehberger.com

23.05.2011 Hits:1955 Referenzen

Lehberger.com

Joomla eignet sich auch für den Elektromaschinenbau. Der Relaunch der Webseite der Lehberger Elekromaschinenbau GmbH aus Kelsterbach wurde mit Joomla umgesetzt. Die Anpassung des Layouts an das Corporate Design gestaltete...

Read more
Wichtiges zum Schluss

The Internet? We are not interested in it!

Bill Gates, 1993

Zufriedene Kunden kommen wieder. Begeisterte Kunden bringen ihre Freunde mit.

Prof. Dr. Thomas K. Stauffert

640K ought to be enough for anybody.

Bill Gates, 1981

Je planmäßiger ein Mensch googelt, desto wirksamer vermag ihn die Werbung zu treffen.

Unbekannter Author
TWEET | PLUS | LIKE
Anmelden

Anmelden

Benutzername: *
Passwort: *
Angemeldet bleiben
Scroll to top