Archiv für HTML5

Was ist eigentlich Modernizr?

Für Responsive Design-Projekte setzen wir ein paar Hilfsmittel ein, um das Responsive Design über alle Browser hinweg zugänglich zu machen. Eines davon ist Modernizr.
Modernizr ist eine JavaScript-Bibliothek, mit deren Hilfe man HTML5/CSS3 einsetzen kann ohne in Kauf nehmen zu müssen, dass die Website in älteren Browsern nicht richtig funktioniert.

Modernizr überprüft jeden anfragenden Browser gezielt danach, was er leisten kann und was nicht. Das Ergebnis dieser Prüfung wird in einem eigens erzeugten JavaScript-Objekt gespeichert.
Zusätzlich ergänzt Modernizr das HTML-Element um Klassen, die erklären, welche Features unterstützt werden und welche nicht.

(weiterlesen …)

02. April 2012 von Elisabeth
Kategorien: HTML CSS, Tools | Schlagwörter: , , | Schreibe einen Kommentar

SVG: Vektorgrafiken in WordPress einbauen

In der Druckproduktion werden Logos und Icons in einem Vektorformat abgespeichert. Damit wird das Bild zur Zeichnung, die stufenlos skalierbar ist. Mit dem Format SVG und HTML5 halten Vektorgrafiken jetzt auch Einzug ins Webdesign. Und mit einem Trick auch in WordPress.

Ein pixelbasiertes Format, wie zum Beispiel ein jpeg-Bild, ist an eine Größe gebunden. Das gepixelte Bild kann man zwar verkleinern, aber nicht vergrößern. Dazu müsste man Pixel dazudichten und so etwas können nur die CSI-Spezialisten im Kino.

Seit Firefox 4 und Internet Explorer 9 wird SVG (Scalable Vector Graphics) von allen Browsern unterstützt. Opera, Chrome und Safari sind auch mit dabei. Für ältere IE-Versionen gibt es Javascript Workarounds, zum Beipiel die Raphael-Bibliothek. Einen Überblick über Möglichkeiten und Funktionen von SVG gibt es bei Wikipedia (deutsch) und im Blog von Microsoft (englisch).

SVG und WordPress

In WordPress lassen sich SVG-Formate noch nicht ganz rumpelfrei einbinden. Versucht man, eine SVG-Datei über die Mediathek hochzuladen, bekommt man eine Fehlermeldung. Und der HTML-Editor zerlegt <svg>-Code liebevoll in alle Einzelteile.

Das Problem kann man mit ein wenig Gebastel lösen.
(weiterlesen …)

20. Dezember 2011 von Kirsten
Kategorien: Webdesign, WordPress | Schlagwörter: , | Schreibe einen Kommentar

E-Book Schnelleinstieg HTML5 & WordPress

Dieses E-Book ist die überarbeitete und erweiterte Fassung der Artikelserie hier im Blog.

Das Buch wendet sich an Webdesigner, Blogger und WordPress-Nutzer, die sich schnell einen Überblick über die Funktionsweise von HTML5 verschaffen möchten.

Das E-Book könnt Ihr kostenlos herunterladen (pdf 102 KB).

Aus dem Inhalt

  • Sinn und Zweck von HTML5
  • Der Aufbau einer Webseite
  • Bessere Orientierung über eindeutige Elemente
  • Smarte Formulare
  • Struktur eines Blog-Artikels
  • Die Startseite im Blog
  • Übersicht Browser-Kompatibilität
  • Nachhilfe für den IE
  • Stylesheet anpassen
  • Ein sehr übersichtlicher Doctype
  • Post Formats ins Theme einbinden
  • WordPress-Themes für den Einstz mit HTML5
  • Themes für Entwickler
  • Was HTML5 sonst noch so kanns
  • Schnitstellen (API)
  • Glossar Die neuen HTML5-Tags

Umfang: 20 Seiten

29. Juni 2011 von Kirsten
Kategorien: E-Books | Schlagwörter: | Schreibe einen Kommentar

Einführung in HTML5 (4): WordPress-Themes

Einführung in HTML5In dieser Artikelserie möchte ich Euch einen Überblick über die Funktionsweise von HTML5 geben. In der ersten Folge habe ich erklärt, worum es bei HTML5 grundsätzlich geht. In der zweiten Folge habe ich den Aufbau eines Blog-Artikels betrachtet und in der dritten Folge war die Unterstützung der Browser das Thema. Zum Abschluss stelle ich einige Themes vor, die HTML5 nutzen.

A. Fertige HTML5 Themes

Mit diesen Themes kann man gleich loslegen. Sie sind relativ neu auf dem Markt und “können” alle HTML5. (weiterlesen …)

29. Juni 2011 von Kirsten
Kategorien: Themes, Tutorials, WordPress | Schlagwörter: | Schreibe einen Kommentar

Einführung in HTML5 (3): Die Browser

Einführung in HTML5In dieser Artikelserie möchte ich Euch einen Überblick über die Funktionsweise von HTML5 geben. In der ersten Folge habe ich erklärt, worum es bei HTML5 grundsätzlich geht. In der zweiten Folge habe ich den Aufbau eines Blog-Artikels betrachtet und in der dritten Folge geht es darum, wie die Browser mit HTML5 umgehen.

Die gute Nachricht: Alle modernen Browser unterstützen das Format. Firefox, Opera, Safari und Chrome sind mit im Boot. Eine Ausnahme macht der Internet-Explorer. Bis inklusive der Version 8 ist der Internet Explorer aussen vor, mit der Version 9 wird es ein bisschen besser, aber noch nicht perfekt.

Aber es gibt Workarounds über Javascript, mit denen man den Internet Explorer dazu bringen kann, HTML5 zu verstehen.
(weiterlesen …)

20. Juni 2011 von Kirsten
Kategorien: HTML CSS, Tutorials | Schlagwörter: | Schreibe einen Kommentar

Einführung in HTML5 (2) – Aufbau Blogpost

Einführung in HTML5In dieser Artikelserie möchte ich Euch einen Überblick über die Funktionsweise von HTML5 geben. In der ersten Folge habe ich erklärt, worum es bei HTML5 grundsätzlich geht. In der zweiten Folge schaue ich mir den Aufbau eines Blog-Artikels (Blogpost) an.

HTML5 bringt eine Reihe von neuen Elementen mit. Eine Navigations-Leiste wird beispielsweise nicht mehr von einem <div> umschlossen, sondern sie bekommt ihr eigenes Tag: <nav>. Dasselbe gilt für den Header einer Seite und für eine Reihe von anderen Bereichen.

Der Aufbau eines Blog-Artikels

Diese Abschnitte in einem Blog-Artikel werden mit neuen Tags strukturiert:

  • Die Überschrift
  • Das Erscheinungs-Datum
  • Den eigentlichen Artikeltext
  • Anmerkungen, Verweise, Metaangaben

(weiterlesen …)

14. Juni 2011 von Kirsten
Kategorien: Tutorials, Webdesign | Schlagwörter: | Schreibe einen Kommentar

← Ältere Artikel