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

Publiziert am 23. Januar 2012 von admin

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

Publiziert am 23. Januar 2012 von admin

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

iPhone WebApp mit jQueryMobile

Publiziert am 6. Dezember 2011 von admin

Ganz frisch reingekommen: jQueryMobile 1.0.
Das beliebte JavaScript Framework gibt es jetzt auch in einer mobilen Fassung, die insbesondere die von Smartphones lieb gewonnene Touch- und Gesten-Funktionalität umsetzt.
Zweiter Grund zur vorweihnachtlichen Freude ist der ThemeRoller: ein recht praktisches Tool, wenn man ein iPhone bzw. Smartphone-Interface gestalten möchte, ohne das Rad und die CSS Dateien jedes mal neu erfinden zu müssen.
In Kombination lassen sich damit schnell WebApps entwerfen, die sich anfühlen, wie native iPhone Apps aber doch auf HTML5 und JavaScript zurückgreifen. Weiterlesen →

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

Das finden Sie bei selfhtml5

Publiziert am 15. August 2011 von admin

Veröffentlicht unter Über selfhtml5.org | Verschlagwortet mit | Hinterlasse einen Kommentar

Tortendiagramm mit HTML5 und Canvas

Publiziert am 23. Mai 2011 von admin

canvas-tortendiagramm
Wie wir schon im Artikel Säulendiagramme mit Canvas gesehen haben, eignet sich HTML5 vorzüglich, um Daten zu visualisieren.
Nicht immer ist jedoch ein Säulendiagramm die beste Wahl; deswegen möchten wir in diesem Tutorial vorstellen, wie man ein dynamisches Tortendiagramm mit JavaScript und Canvas in HTML5 umsetzt.
Zum dynamischen Beispiel in Action
Weiterlesen →

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

Dynamische Säulendiagramme mit Canvas

Publiziert am 6. Dezember 2010 von admin
Bilder - und Säulendiagramme im Speziellen - sagen mehr als 1000 Worte. Schön, dass es mit HTML5 jetzt die Möglichkeit gibt, schnell und einfach Daten von einer schnöden Tabelle in ein ansehnliches und informatives Säulendiagramm zu verwandeln. In diesem Tutorial lernen Sie, wie man aus Daten per JavaScript ein Säulendiagramm auf einem Canvas erzeugt. Weiterlesen →
Veröffentlicht unter HTML5 | Hinterlasse einen Kommentar

TrueType Fonts und Text-Transformation mit rotate

Publiziert am 15. September 2010 von admin

Leicht einzubauen, einfach zu verstehen und beeindruckende Effekte: so wünscht man sich CSS Effekte. @font-face ist hier ganz vorne in der Hitliste der auffallensstarken und griffigen Schätze aus der CSS 3 Trickkiste zu nennen.
Wie wäre es etwa mit der Typo „Lobster“ als Überschrift:

CSS3 mit TrueType Schrift

Weiterlesen →

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

HTML5 Tags im Überblick

Publiziert am 14. September 2010 von admin

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

4. Apps Programmieren – Look and Feel des iPhones umsetzen

Publiziert am 14. August 2010 von admin

Nachdem wir das Stylesheet erstellt und eingebunden haben kümmern wir uns um ein paar gestalterische Details:

Hintergrundgradient


#header h1 a {
     text-shadow: 1px 1px 0px #EEE;
     background-image: -webkit-gradient
           (linear, left top, left bottom, from(#ccc), to(#999));
}

Weiterlesen →

Veröffentlicht unter Apps programmieren | 7 Kommentare

Canvas mit Bezier Curve

Publiziert am 30. Juli 2010 von admin

Lediglich 32 Codezeilen lang ist der Code zum erzeugen dieser spassigen „leuchten Linien im Dunklen“ – incl. HTML-Canvas. Es wird dafür mithilfe einiger Zufallszahlen alle 50ms eine neue Kurve erzeugt (bezierCurve) die verblasst indem sich über den canvas in jeder Schleife ein schwarzes rectangle (mit alpha 0.1) legt. Der „glow“ um die Kurve wird durch einen Schatten mit weißer Farbe erzeugt. Beeindruckt?



Weiterlesen →

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