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

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