HTML5 Tags im Überblick

Noch keinen genauen Überblick, was HTML5 für Elemente beinhaltet? Und welches der vielen Elemente gehört wohin?
Der praktische, interaktive und ultimative Überblick dazu mit Tag-Klassifikation ist auf der Seite “HTML5 Tag Systematik” angekommen
Übersicht über alle HTML5 Tags / Elemente

Veröffentlicht unter HTML5 | 1 Kommentar

HTML5 Formulare mit Validierung und Platzhalter

Auch für Formulare bietet HTML5 einige ungeheuer praktische Features, mit denen sich der Web-Entwickler das Leben nicht nur leichter, sondern die Web-Applikation auch sicherer machen kann.

Besonders praktisch ist, dass man nicht daran denken muss, JavaScripts für die Validierung einzubinden und den Elementen die korrekten Classes zuzuweisen, um die Validierung zu bewirken, sondern alle Funktionen sind bereits im HTML5 Kern enthalten. Besonders Bonbon ist, dass die Validierungs-Nachricht automatisch in der Sprache des Betriebssystems – und damit der bevorzugten Sprache des Users – ausgegeben wird; eine erhebliche Erleichterung bei der Lokalisierung von Inhalten.

Wir stellen die wichtigsten Mittel vor, die man zur Validierung und Gestaltung von HTML5 Formularen verwenden kann

Weiterlesen

Veröffentlicht unter HTML5 | Hinterlasse einen Kommentar

Standort im Browser ermitteln per HTML5 Geolocation API

Alle Browser, die nicht mehr aus der digitalen Steinzeit stammen (Internet Explorer 9, Firefox 3.5 und Google Chrome), sind in der Lage, über die offiziell von der W3C zur Verfügung gestellte Geolocation API eine Angabe dazu zu machen, an welchem Standort sich der User befindet.

Wie wird der Standort per Geolocation API ermittelt?

Die Standortermittlung per HTML5 ist relativ komplex und ausgereift und durchläuft eine Reihe von Schritten zur Ermittlung mit absteigender Genauigkeit:
Weiterlesen

Veröffentlicht unter HTML5 | Hinterlasse einen Kommentar

HTML5 Video und die Browserkompatibilität inkl. iOS und Android

Grafik: longtrailvideo.com

Der HTML5 Video Tag macht es deutlich einfacher, Videos ins Netz zu stellen. Er spielt eine ganze Menge verschiedener Formate ohne Plugins ab und ist sehr gut über JavaScript zu steuern.
Vor dem Einsatz des HTML5 Video Tags fragt sich jeder verantwortungsbewußte Entwickler aber, wie es mit der Browserkompatibilität aussieht und auch das Thema mobile will behandelt werden: welche Einschränkungen gibt es für das Video Tag auf iOS und Android?
Nachfolgend klären wir anhand Statistik und Auswertungen, dass die Zeit für HTML5 Video gekommen ist:

Weiterlesen

Veröffentlicht unter HTML5 Videos | Verschlagwortet mit , , , , | Hinterlasse einen Kommentar

Accordion Boxen mit CSS3

Es gibt dank CSS3 einen fast schon unfassbar einfachen Weg, um dynamisch animierte Accordion Menus bzw. Boxen zu erstellen, die beim Anklicken des Titels sich gemächlich (natürlich nach genauer Vorgabe des Schöpfers) auseinanderfalten.

Nachfolgend dazu ein Beispiel:
Weiterlesen
Veröffentlicht unter CSS3 | Verschlagwortet mit , , | Hinterlasse einen Kommentar

Box-Shadow Generator

box-shadow CSS 3 code generator

Generieren Sie schnell und einfach Code für box-shadow


Box-Shadow Parameter

-
+
-
+
-
+
-
+
  #


box-shadow Generator



box-shadow styles

Schlagschatten
weich
Licht von Oben
reduziert
inset
glow (benötigt dunklen Hintergrund)


CSS3 Code für box-Shadow generieren

Mit CSS3 ist es möglich geworden, Elementen einen Schatten zuzuweisen, ohne diesen als Grafik anlegen zu müssen. Da das box-Shadow Attribut bis zu 5 Parameter bietet (siehe box-shadow in CSS3) ist es allerdings nicht ganz leicht, die Parameter zu durchschauen und das Erscheinungsbild vorherzusehen.

Mit diesem Generator können Sie die Werte manuell einstellen und sehen das Ergebnis direkt angezeigt.

Nutzen Sie auch dan "Surprise-Me" Werte Generator, um dem Box-Shadow Zufallswerte zuzuweisen.
Schließlich können Sie auch über die vordefinierten Styles von beliebten box-shadow Parametern inspirieren lassen.

Weiterlesen
Veröffentlicht unter CSS3 | Verschlagwortet mit , , , | Hinterlasse einen Kommentar

Box-Shadow in CSS3

Mit CSS3 sind die Zeiten vorbei, als Schattenwurf dem Programmierer den Angstschweißt auf die Stirn getrieben hat. Jede erdenkliche Form von Schatten ist mit dem box-shadow möglich, wenn man nur weiß, wie.
Vom Schlagschatten bis hin zu feinen und diffusen, richtungsungebundenen Schattenwürfen hat der Programmierer mit box-Shadows alle Möglichkeiten, einen Schatten realistisch nachzubauen, ohne ein Grafikprogramm bemühen zu müssen. Weiterlesen

Veröffentlicht unter CSS3 | Verschlagwortet mit , | Hinterlasse einen Kommentar

Farbverläufe (Gradients) mit CSS3

Farbverläufe machen die Welt schöner. Zumindest, wenn ein feinfühliger Designer damit hantiert und keine Regenbogenleuchthintergründe entstehen. Gradienten eignen sich für eine Vielzahl von Einsatzmöglichkeiten und schaffen Realismus, auch ohne Grafiken verwenden zu müssen. In der “echten” Welt gibt es durch den Lichteinfall für das Auge des Betrachters keine Fläche, die ganz einfarbig ist. Es gibt immer einen Farbverlauf von heller zu dunkeler und so sind Gradients unverzichtbar für realistisch wirkende Designs.
Auch die beliebten gläsernen Buttons lassen sich durch Farbverläufe erstellen.

Das Zauberwort dafür heit in CSS3 “linear-gradient“. Weiterlesen

Veröffentlicht unter CSS3 | 1 Kommentar

8. Offline Datenspeicherung per localStorage

Einsetzbar ab FireFox 3.5, Safari 4, Internet Explorer 8 und Chrome

Wenn man in einer Web-Anwendung Daten dauerhaft speichern will, löst man dies auf dem Server in einer Datenbank.  Um die Daten an den Server schicken zu können, ist jedoch eine Internetverbindung notwendig.

Apps sollten jedoch grundsätzlich Daten jederzeit an jedem Ort und ohne online zu sein, speichern können.
Für den Programmierer von Web Apps gab es da bisher nur die Möglichkeit, das über Cookies zu erledigen, was allerdings große Einschränkungen in Bezug auf Datenmenge und Sicherheit aufwies. Mit HTML5 ist es möglich, Daten “Client-Side” also auf dem Endgerät auch offline zu speichern. Weiterlesen

Veröffentlicht unter Apps programmieren | Verschlagwortet mit , , | 4 Kommentare

10 praktische CSS3 DIV Boxen Designs

Gutes Design lebt von den Details. Schöne Headerbilder sind toll, aber gefällige Strukturierung gerade auch des Contents erst macht den Unterschied zwischen einer amateurhaften und einer professionellen Website aus.

Wir stellen hier eine Reihe von Boxen vor, die gänzlich ohne zusätzliche Grafiken auskommen, sondern lediglich durch CSS3 formatiert sind. Das spart nicht nur Datenvolumen sondern dem Programmierer auch Zeit und Nerven.

Weiterlesen

Veröffentlicht unter CSS3 | Verschlagwortet mit , , , , , | 6 Kommentare

SVG Files Toolbox

SVG Files sind “scalable vector graphics”, also Grafiken, die nicht in Pixelform vorliegen, wie etwa ein GIF oder JPEG, sondern die einfach ausgedrückt “gezeichnet” werden.
Dazu ist nicht mehr nötig, als die Koordinaten des Startpunktes und des Endpunktes, sowie ein Füllfarbe und eine Strichstärke und schon hat man eine Strecke gezeichnet.
Genauso funktioniert es mit Rechtecken, Kreisen, Ellipsen und allen anderen geometrischen Formen, die beliebig transformiert und kombiniert werden können.
Weiterlesen

Veröffentlicht unter HTML5 | Verschlagwortet mit , , , , | Hinterlasse einen Kommentar