QR-Codes, Webseiten für Retina-Displays und mehr

Wer die Leistung einer Applikation ermitteln möchte, braucht keine Skripte zu schreiben, sondern kann einen der zahlreichen Online-Dienste einspannen. Ein besonders interessantes Angebot dieser Art finden Sie unter der Adresse blitz.io

Mit Blitz.io können Sie die tatsächliche Leistung eines Servers, einer Website, einer API oder einer mobilen App für iOS oder Android austesten und die obere Grenze der Belastbarkeit in Erfahrung bringen. Blitz unterstützt zwei Arten von Tests: kurzzeitige Sprints und Dauerbelastung (Codename Rush).

Ein Test vom Type Sprint gewährt Ihnen einen Einblick in den HTTP-Header und liefert die ersten Hinweise auf die mögliche obere Grenze der Belastbarkeit der getesteten Webapplikation. Ein so genannter Rush-Auftrag könnte allerdings als eine DoS-Attacke ausgelegt werden.

Um Missbrauch dieser Art zu verhindern, verlangt der Anbieter, dass Sie sich als berechtigter Administrator des betreffenden Servers authentifizieren, bevor Sie einen Rush-Auftrag losschicken können. Dies können Sie zum Beispiel dadurch bewerkstelligen, dass Sie auf dem betreffenden Webserver eine vorgegebene URL-Adresse erzeugen.

Ratgeber: 80 clevere Freeware-Tools

Der großzügig bemessene kostenlose Account unterstützt eine uneingeschränkte Anzahl von Rush-Tests mit bis zu 250 gleichzeitigen (simulierten) Benutzerzugriffen über eine Laufzeit von jeweils einer Minute. Mit einem bezahlten Account können Sie auf das gewünschte Ziel bis zu 50.000 gleichzeitige Zugriffe während einer Laufzeit von maximal einem Monat ununterbrochen abfeuern.

Allerdings sind Sie gut beraten, die AGBs Ihres Webhosters zu überprüfen, um zu ermitteln, ob und eventuell welche Belastungstests zugelassen sind. Es ist in Ihrem Interesse, die Richtlinien Ihres Anbieters strengstens zu befolgen, denn der Bruch der Hausregeln kann zum Teil scharfe Sanktionen zur Folge haben.

Alleine aus diesem Grunde sollten Sie etwaige Tests nur in kurzen Zeitabschnitten und nur zu berechtigten Zwecken wie beispielsweise im Rahmen von Wartungsarbeiten (Optimierungen der Konfiguration) durchführen, jedoch niemals mit der Absicht, die Dienstbereitschaft des Webhosters zu unterbrechen.

Mobiles Web

QR-Codes in jede Website einbinden

Wer mobilen Besuchern die Navigation zu einer bestimmten URL im Rahmen seiner Website erleichtern möchte, kann jede betreffende Website mit einem so genannten QR-Code ausstatten.

Ein QR-Code (Quick Response Code) ist eine Art Barcode, der sich auf einem Mobilgerät mit Hilfe einer App und der eingebauten Kamera einlesen und nutzen lässt. Indem Sie einen solchen Code auf einer Website anbringen, verschaffen Sie Ihren Besuchern die Möglichkeit, mit Hilfe der Kamera in ihrem Smartphone oder Tablet die URL-Adresse zu erfassen, um direkt zu der gewünschten Seite zu navigieren oder ein Lesezeichen anzulegen.

Ihre Besucher benötigen lediglich eine mobile App zum Lesen von QR-Codes; diese Applikationen sind oft vorinstalliert oder kostenlos erhältlich (etwa Barcode Scanner für Android oder ScanLife Barcode Reader für iOS). Ein QR-Code kann nicht nur eine URL, sondern praktisch einen beliebigen Text, SMS-Anweisungen, Kontaktinformationen oder andere Informationen beinhalten.

Benutzer von Joomla können ihr CMS mit Hilfe kostenloser Plug-ins wie QR Plug, Page QR-Code oder Simple QR Code Generator erweitern. Für Websites ohne CMS-Unterbau sowie für CMS ohne geeignete Plug-ins können Sie einen Online-Generator von QR-Codes nutzen. Zu den interessantesten kostenlosen Diensten zählen goqr.me  und qrstuff.com.

Beide Dienste unterstützen neben einer gewöhnlichen Website-URL auch eine Telefonnummer und andere Kontaktdaten wie eine E-Mail-Adresse oder eine vCard. Für besonders lange URLs können Sie optional einen URL-Kürzungsdienst wie j.mp oder qrs.ly einspannen, um die Kompatibilität langer URLs mit älteren Handys zu erhöhen.

Wer QR-Codes im großen Maßstab einsetzt, kann einen QR-Manager wie den kostenlosen Dienst QReateBUZZ nutzen, um den Erfolg seiner Codes zu messen. Neben der Erstellung von QR-Codes bietet Ihnen dieser Dienst zudem die Möglichkeit, die Codes an einer zentralen Stelle zu verwalten und den Erfolg Ihrer QR-Code-Kampagnen zu analysieren. Nach einer Registrierung unter der Adresse qreatebuzz.com/ können Sie sofort Ihre erste Kampagne erstellen.

Ratgeber: Software-Grundausstattung für jeden PC

Anders als rein kommerzielle Angebote wie Smartytags (www.smartytags.com ) handelt es sich auch bei diesem Angebot um einen kostenfreien Dienst.

CSS, Javascript

Für Retina-Displays optimieren

Webkit-Browser (einschließlich Chrome und Safari auf iOS und Android OS) rechnen in logischen Pixeln und einem gerätespezifischen Pixelverhältnis. Ein iPhone 4G oder ein aktuelles iPad benötigen daher eine entsprechende Anweisung, die das gerätespezifische Pixelverhältnis festlegt, um ein Bild korrekt darstellen zu können.

Unter Angabe eines gerätespezifischen Pixelverhältnisses von 2 handhabt Safari auf einem iPhone etwa ein 640 x 960 großes Bild als ein Bild mit einer Auflösung von 320 x 480 Pixeln. Wurde das gerätespezifische Pixelverhältnis nicht angegeben, wird das betreffende Bild auf einer doppelt so großen Fläche dargestellt. Das Resultat sieht dann entsprechend nach einer Panne aus.

Zum Optimieren von Websites für Displays in einer hohen Auflösung empfiehlt es sich, Bilder mit Hilfe der CSS-Eigenschaften background oder background-image zu referenzieren und die Bildgröße unter Verwendung der Eigenschaft background-size zu übergeben. Im Falle von Sprites kommt zusätzlich die Eigenschaft background-position zum Einsatz.

Mit Hilfe von @media-Anfragen können Sie dann Geräte mit einem ganz konkreten Pixelverhältnis mit eigenen Stylesheets beliefern. Zum Beispiel so:

oder eben so:

iOS-Geräte weisen entweder ein Pixelverhältnis von 1x oder 2x auf. Android OS-Geräte können ein Pixelverhältnis von 0,75x, 1x, 1,5x oder 2x aufweisen. Falls Sie Android-Geräte adressieren, kommen Sie am einfachsten mit den CSS-Selektoren

ans Ziel. In Javascript können Sie dem Pixelverhältnis mittels window.devicePixelRatio auf die Spur kommen (diese Funktion liefert als Rückgabewert 1 oder 1,5 oder 2 und so weiter).

CSS, Javascript

Bilder austauschen

Die hohe Bildschärfe von Retina-Displays hat für Webdesigner eine neue Herausforderung mit sich gebracht: Die Notwendigkeit der Bereitstellung von Websites mit Bildern in Retina-Qualität. Diese Aufgabe lässt sich mit Hilfe einer quelloffenen Javascript-Bibliothek namens Retina.js besonders elegant bewerkstelligen.

Das Skript ersetzt jedes Bild, welches in Standardauflösung vorliegt (etwa /Bilder/Foto.png), durch eine Version in Retina-Auflösung (/Bilder/Foto@2x.png), falls eine entsprechend benannte Datei im betreffenden Pfad auf dem Server vorliegt.

Webdesigner, die sich zur Senkung der Anzahl von Anfragen auf Sprites verlassen, können die Anpassung ihrer Websites an Retina-Displays auch gerne in die eigenen Hände nehmen.

CSS

Sprites für Retina-Qualität

Um ein Webdesign für Displays in Retina-Qualität zu optimieren, kann man nicht einfach die Auflösung aller Bilder erhöhen, denn dies würde auch bei Benutzern konventioneller Displays unnötig viel wertvolle Bandbreite konsumieren, möglicherweise noch via Mobilfunk. Diese Benutzer könnten höhere Bildschärfe nicht wahrnehmen, müssten aber für die Übertragung der Daten trotzdem bezahlen.

Wer Benutzern von Geräten mit Displays in Retina-Qualität dennoch die höhere Bildschärfe gönnen möchte, muss eine andere Lösung bemühen: die Bereitstellung optimierter alternativer Stylesheets mittels @media-Abfragen.

Jede @media-Abfrage referenziert die benötigten Bilder in der passenden Auflösung. Also für jedes Bild in normaler Auflösung muss man ein Bild beispielsweise in doppelter Auflösung bereitstellen. Dadurch verdoppelt sich die Anzahl der referenzierten Bilder und somit wiederum die Anzahl der zugehörigen Selektoren. Durch den Einsatz von CSS-Sprites können Sie dies durch geschicktes Referenzieren der Retina-Version der Bilddatei vereinfachen: