HTML5 Mobile

Retina-Display: HTML-Canvas optimieren

Viele HTML-Elemente von mobilen Websites werden automatisch auf Geräten mit Retina-Display optimal dargestellt. Nicht jedoch das canvas-Element.

Das HTML-Element canvas (vom engl. Wort für Leinwand) ist eine Fläche, auf der mit JavaScript gezeichnet werden. So werden beispielweise Grafiken, Linien, Kreise, Bèzierkurven oder Farbverläufe unterstützt. Wie auch Website-Bilder (PNG, JPG) für das Retina-Display optimiert werden müssen, so ist dies auch für canvas-Elemente auf iOS-Geräten erforderlich.

Es folgt ein Überblick, wie man das Canvas-Element für iOS optimiert — und dabei auch bereits die neuen MacBooks mit Retina-Display berücksichtigt.

weiterlesen →

Retina-Display: Unterschiede zwischen CSS-, Bild- und Device-Pixel

Dieser Beitrag erklärt die unterschiedlichen Pixelangaben, um eine optimale Darstellung auf den hochauflösenden Retina-Display zu erreichen.

Im Artikel Website-Bilder für das Retina-Display optimieren hatte ich bereits zwei Methoden vorgestellt, wie die Bildqualität für iPhone, iPad und mittlerweile auch Macbook verbessert werden kann. Ergänzend hierzu noch einmal einige grundlegende Erklärungen.

weiterlesen →

iOS 6: Upload von Bildern und Videos

Mit iOS 6 wird endlich das Hochladen von Bildern und Videos unterstützt.

weiterlesen →

JavaScript-Framework: Einführung in AngularJS

AngularJS ist ein tolles JavaScript-Framework für Web-Apps, das von Google entwickelt wird. Das Open-Source-Projekt adressiert das Problem, dass HTML ursprünglich für statische Seiten entwickelt wurde.

AngularJS verfolgt einen Model-View-Controller-Ansatz (MVC). Die Views werden deklarativ beschrieben, d.h. das normale HTML-Vokabular einfach um einige AngularJS-Attribute erweitert. Kombiniert mit Two-Way-Data-Binding gibt dies eine leicht lesbare und übersichtliche Trennung zwischen Views und Programmcode.

Zahlreiche weitere Features (z.B. Expressions, Filter) runden das Framework ab, von denen ich die interessantesten kurz vorstellen möchte.

weiterlesen →

Mobile Website: Die Wahl der Domain

Das Festlegen einer Domain für die mobile Website scheint ein Detail am Rande zu sein, das oftmals vernachlässigt wird. Ein genauer Blick empfiehlt sich jedoch, da die verschiedenen Varianten durchaus signifikante Vor- und Nachteile haben.

weiterlesen →

Die wichtigsten mobilen User Agents

In manchen Fällen ist es notwendig, mobile Devices anhand ihres User Agents zu erkennen (z.B. serverseitige Weiterleitung auf mobile Website). Im Folgenden ein Überblick über die User Agents der populärsten Devices (iOS, Android, BlackBerry, Kindle, Windows Phone).

weiterlesen →

Website-Bilder für das Retina Display optimieren

Erstellt man Websites und betrachtet sie zum ersten Mal z.B. auf einem iPhone 4/4s, stellt eventuell man fest: Manche Bilder sind irgendwie nicht richtig scharf!

weiterlesen →

Mobile Devices: Viewport richtig einstellen

Zu den absoluten Grundlagen der mobilen Entwicklung gehört das Meta-Element viewport. Diese eine Zeile HTML-Code sorgt für eine korrekte Skalierung der Website beim ersten Aufruf auf dem mobilen Gerät.

weiterlesen →

Googles Android-Font: Kostenlose Schrift Roboto

Die Schrift „Roboto” wurde mit Android 4.0 eingeführt. Sie kann jetzt kostenlos heruntergeladen werden.

Roboto has a dual nature. It has a mechanchical skeleton and the forms are largely geometric. At the same time, the font features friendly and open curves. While some grotesks distort their letterforms to force a rigid rhythm, Roboto doesn’t compromise, allowing letters to be settle in to their natural width. This makes for a more natural reading rhythm more commonly found in humanist sans serifs.

Die Schriftfamilie wurde speziell für Benutzeroberfläche und (mobile) Bildschirme mit hohen Auflösungen erstellt. Google erlaubt die Nutzung der Schrift ohne Einschränkungen. Ich habe sie testweise mit einen Online-Generator als Web-Schrift umgewandelt, so dass man sie auf einer Webseite einbinden kann: Beispiel anschauen (Schriftschnitt Black).

Link: Roboto Font (Android Design – Typography)
Link: Specimen Book (PDF)

HTML5 in immer mehr Online Casinos zu finden

Wer im Internet auf die Suche nach einem Online Casino geht, wird schnell feststellen, dass es eine kaum überschaubare Vielzahl an Optionen gibt. weiterlesen →