Tipps & Tricks: HTML, CSS, Javascript & PHP

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

Wir stellen Ihnen den Online-Dienst blitz.io vor, zeigen Ihnen wie Sie QR-Codes in Ihre Website einbinden und Ihren Online-Auftritt für Retina-Displays optimieren.

Die besten HTML5-Tipps

© Internet Magazin

Internet, Webprogrammierung, Software, Scripting, Skripte, HTML

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

internet, webdesign, blitz.io, tipps, tricks

© Internet Magazin

Belastbarkeitstest mit Blitz.io: Die durchschnittliche Zugriffsrate von 33 Hits pro Sekunde entspricht einer oberen theoretischen Leistungsgrenze von 2.916.314 Hits pro Tag.

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.

internet, webdesign, blitz.io, tipps, tricks

© Internet Magazin

Der Dienst goqr.me unterstützt einige sehr hilfreiche Optionen wie eine eingebaute Fehlerprüfsumme und zwei verschiedene Zeichenkodierungen.

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:

<link rel="stylesheet" href="1x.css" media="only screen
and (-webkit-device-pixel-ratio: 1)" /><link rel="stylesheet" href="2x.css" media="only screen
and (-webkit-device-pixel-ratio: 2)" />

oder eben so:

@media only screen and (-webkit-device-pixel-ratio: 1){
.bild{ ... }
}
@media only screen and (-webkit-device-pixel-ratio: 2){
.bild{ ... }
}

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

-webkit-min-device-pixel-ratio
-webkit-max-device-pixel-ratio

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.

internet, webdesign, blitz.io, tipps, tricks

© Internet Magazin

Mit Retina.js können Sie Bilder in Standardauflösung ganz einfach durch Retina-optimierte Bilder ersetzen.

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:

div.spritesegment1 {
background: url(sprite.png) no-repeat 0 0;
}
div.spritesegment2 {
background: url(sprite.png) no-repeat -100px 0;
}
div.spritesegment3 {
background: url(sprite.png) no-repeat -100px -100px;
}
.content a.fav-link {
background: url(sprite.png) no-repeat 0 -100px;
}
@media only screen and (-webkit-min-device-pixel-ratio:
2),
only screen and (min-device-pixel-ratio: 2) {
div.spritesegment1,
div.spritesegment2,
div.spritesegment3,
div.spritesegment4 {
/* das Sprite in @2x -Aufloesung fuer Retina
referenzieren */
background-image: url(sprite@2x.png);
/* Zuruecksetzen der Dimensionen des @2x-Sprite fuer
Retina */
background-size: 200px 200px;

Mehr zum Thema

Fritzbox Telefonie
7 Tipps

Die FritzBox bietet Telefoniefunktionen, die vielen Profi-Telefonanlagen in nichts nachstehen. Wir zeigen, wie Sie sie optimal nutzen.
IT-Symbolbild
Anonym surfen

Wenn Sie im Internet surfen, dann hinterlassen Sie Spuren. Wir zeigen, wie Sie im Netz anonym und unsichtbar bleiben.
gesetze
Vorsicht Abmahnungen

Man sieht einen lustigen Film im Netz, will ihn Freunden zeigen und klickt auf "Teilen". Doch aufgepasst: Nicht immer ist das erlaubt. Gleiches gilt…
Weblog
Blog selbst erstellen

Wir zeigen, wie Sie gratis Ihren eigenen Blog selbst erstellen. Zum Starten brauchen Sie mit WordPress nicht einmal fünf Minuten.
Den Internetanbieter zu wechseln bringt oft Probleme und Ärger
DSL, Telefon und Co.

DSL, Telefon & Co: Wenn Kunden ihre Telefon-und Internetanbieter wechseln, gibt es oft Probleme. Wir erklären, wie Sie Ärger vermeiden.