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 , , | 5 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

HTML5 Video Tag

Eine wunderschöne Verbesserung beschert uns HTML5 auch durch die Einführung des Video Tags. Vorbei sind die Zeiten, als man Videos sicher und browserübergreifend nur mit Flash abspielen konnte.
Diese Zeit sind insbesondere seit dem enormen Erfolg von Apples iPhone und iPad vorbei, weil auf diesen Geräten überhaupt keine Flash Inhalte angezeigt werden. Daher ist es umso wichtiger, Videos jetzt über das neue HTML5 Element einzubinden, um damit die Verfügbarkeit des Videos auf einer größtmöglichen Zahl von Endgeräte/Browserkombinationen zu gewährleisten.
In diesem Tutorial wird erklärt, wie das Video Tag eingebunden werden kann, welche Formate untersützt werden und wie es mit der Browserkompatibilität aussieht. Weiterlesen

Veröffentlicht unter HTML5 | Verschlagwortet mit , , , , | 3 Kommentare

CSS3 Transitions: Texte transformieren mit ’scale‘

CSS3 bietet etwas, das bisher nur mit JavaScript möglich war: Animation.
Bisher musste eine Animation, also eine graduelle Änderung von Eigenschaften über einen festgelegten Zeitraum, relativ mühsam per JavaScript programmiert werden.
Mit CSS3 gibt es jetzt die einfache und elegante Lösung: CSS3 Transitions.
Weiterlesen

Veröffentlicht unter CSS3 | Verschlagwortet mit , , , , , | 1 Kommentar

HTML5 Diagramme mit Online Generator selbst erstellen

Wir bekommen regelmäßig Rückfragen zu unseren Artikeln zum Programmieren von HTML5 Säulen- und Tortendiagrammen. Obwohl die Codes der Diagramme kommentiert vorliegen, erfordert die Erstellung der Diagramme einige Einarbeitung, insbesondere in die JavaScript Schleifen. Daher haben wir einen Online Generator programmiert, mit dem es viel einfacher geht:


Mit unserem Online Generator für HTML5 Diagramme können Sie jetzt mit ein paar Klicks Ihr eigenes Diagramm erstellen. Das Diagramm kann danach einfach per „iframe“ auf Ihrer Website verwendet werden.

  • Einfachste Erstellung über Formular
  • Eigene Daten einfach in Textfelder eingeben
  • Animierte Balken für beste Aufmerksamkeit
  • Zahlreiche Templates für schnelles Design

Jetzt HTML5 Diagramm Generator testen

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

Die 10 besten HTML5 Websites

Was ist nun eigentlich eine HTML5 Seite in diesem Sinne?

Bei der Auswahl der besten HTML5 Websites haben wir darauf geachtet, dass auch tatsächlich HTML5 Techniken zum Einsatz kommen. Nicht ausreichend ist für uns dabei die bloßen Anwendung von HTML5 Elementen zur Auszeichnung, also den Header, Section, Article Tags. Weiterlesen

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

Cut the rope als HTML5 Version

Für alle, die bisher noch am Potential von HTML5 gezweifelt haben, gibt es jetzt den ultimativen Augenöffner. „Cut the Rope“, vielen als knuffiges App mit sensationellen 16 Mio. Downloads bekannt, wurde von den Entwicklern jetzt in HTML5 umgesetzt.
Der Titel ist zwar vom technischen Anspruch her kein 3D Shooter, aber aufgrund der sehr liebevollen Gestaltung und der zum Einstz kommenden Physik dennoch eine gewaltige Herausforderung, die in vor-HTML5 Zeiten nicht denkbar gewesen wäre.

Weiterlesen

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

7. Ein Icon für den Homescreen (Web Clip Icon)

Von einer App erwartet man, dass Sie mit einem individuellen Icon vom Home Screen aus gestartet werden kann. Auch unsere HTML5 Web App soll da nicht nachstehen.
Weiterlesen

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

6. App Programmierung mit HTML5 – Meta Tags für Full Screen Mode

In den bisherigen Kapiteln haben wir gelernt, wie man eine Website so gestaltet, dass der Inhalt im Browser wie eine native App aussieht.
Jetzt machen wir einen großen Schritt nach vorne, indem wir den lästigen Overhead des Browsers in Form der Adresszeile und die Statusbar verschwinden lasssen. Damit gewinnt unsere HTML5 Web App deutlich mehr Platz und ist von ablenkendem Ballast befreit.
Weiterlesen

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