iPhone WebApp mit jQueryMobile

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

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

Tortendiagramm mit HTML5 und Canvas

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

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

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

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

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

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

HTML5 overview video

Sehr informatives Video [engl.], das einen guten Überblick über HTML5 gibt. Dabei geht es mehr um das Verständnis übergeordneter Zusammenhänge als um technische Details:

Introduction to HTML 5 from Brad Neuberg on Vimeo.

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

3. Apps Programmieren – Das iPhone-Stylesheet

Das klassische Look von Apps auf dem iPhone lässt sich mit HTML und einer Prise CSS ganz leicht herstellen.

Die CCS-Styles:
Weiterlesen

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