Tipps & Tricks

Remote Debugging mit Safari Web Inspector

Wie Sie mit dem Safari-Browser schnell Webseiten und Web-Apps auf iOS debuggen können, zeigen wir Ihnen.

internet, apple, safari, web-apps, ios, remote debugging, tipps, tricks

© Internet Magazin

internet, apple, safari, web-apps, ios, remote debugging, tipps, tricks

Wiederholte Zugriffe auf die Eigenschaften verschachtelter Objekte kostet Geschwindigkeit. So unscheinbarer Code wie

for (var i in App.view.tablet.Viewport) {
console.log(App.view.tablet.Viewport[i]);
}

weist den Webbrowser an, auf das Objekt "App" zuzugreifen, darin die "view"-Referenz zu finden, um auf "tablet" und dann schließlich auf "Viewport" zuzugreifen. Das sind insgesamt fünf Aufrufe (einschließlich der Abfrage von i). Wenn Ihnen die Leistung der Applikation von Bedeutung ist, ist man mit dem folgenden Code weitaus besser bedient:

var vp = Ext.view.tablet.Viewport;
for (var i in vp) {
console.log(vp[i]);
}

Die statischen Elemente der Abfrage werden im Cache erfasst und die Schleife läuft lediglich durch den variablen Anteil der Abfrage durch. Kein Wunder, dass das Ganze deutlich schneller abläuft.

HTML 5: Stilvoller Platzhalter: das placeholder-Attribut

HTML 5 bietet Ihnen die Möglichkeit, Formularelemente ganz leicht mit Platzhaltertext zu befüllen. Alles, was Sie hierzu benötigen, ist das geeignete Attribut, zum Beispiel:

<form action="formular.asp"><input type="text" name="vorname" placeholder="Vorname"
/><br /><input type="text" name="nachname" placeholder="Nachname"
/><br /><input type="submit" value="Abschicken!" /></form>

Browser zeigen das Platzhalterattribut allerdings immer ganz konservativ in hellem Grau an. Wem das konventionelle Design nicht gefällt, der kann den Platzhaltern mit Hilfe von CSS ganz leicht das gewünschte Aussehen verleihen. Im Falle von Webkit-Browsern kommen Pseudoelemente zum Einsatz. Die Unterstützung von Firefox sowie des Internet Explorers 10 erfordert Pseudoklassen. Alle Browser erwarten zudem herstellerspezifische Präfixe, konkret also zum Beispiel:

::-webkit-input-placeholder {
color: #333;
}
:-moz-placeholder {
color: #333;
}
:-ms-input-placeholder {
color: #333;
}

Solange dabei nur textbezogene CSS-Eigenschaften zur Geltung kommen, ist alles in trockenen Tüchern. Der Trick funktioniert mit jedem Platzhalter dieser Art, unabhängig vom Typ des Formularelementes (text, search, url, tel, email und password).

Javascript: Feldabfragen wiederverwendbar machen

Viele Anfragen fördern ziemlich "vergängliche" Resultate zu Tage, die schnell wieder verworfen werden müssen. Dabei können Sie zumindest das Array wiederverwenden, um Zeit zu sparen. Zum Beispiel so:

var foo = [4,5,6];
// die Werte aus foo werden hier genutzt und verworfen
// das Feld bleibt jedoch bestehen; es wird geleert und
mit neuen Werten aufgefuellt
foo.length = 0;
foo.push(5, 6, 7);

In allen Browsern außer Chrome können Sie einen respektablen Leistungssprung erwarten; Chrome kann neue Felder so beeindruckend schnell ins Leben rufen, dass sich hier das Problem der Leistungsengpässe in der Praxis erst gar nicht stellt.

Apple Xcode: Webdesign für iOS-Geräte

Apples Entwicklungsumgebung Xcode eignet sich nicht nur zur Erstellung mobiler Apps für das iPhone oder iPad, sondern kann durchaus - wenn auch mit gewissen Einschränkungen - genutzt werden, um Webseiten auf verschiedenen iOS-Geräten oder im Simulator zu testen. So können Sie Ihre Webseiten auf einem simulierten HiDPI-Display unter die sprichwörtliche Lupe nehmen, auch wenn Sie momentan nicht über ein Gerät mit Apples Retina-Display verfügen. Alles was Sie benötigen, sind ein Entwickler-Account bei Apple und ein Mac.

Schritt 1: Installieren Sie Apples kostenlose Graphics Tools für Xcode auf Ihrem Rechner.

Schritt 2: Starten Sie die Quartz Debug-Applikation und rufen Sie darin den Menüpunkt: "Windows > UI Resolution" auf. Im folgenden Dialog aktivieren Sie die Option "Enable HiDPI display modes".

internet, apple, safari, web-apps, ios, remote debugging, tipps, tricks

© Internet Magazin

Aktivieren der HiDPI-Fähigkeiten eines gewöhnlichen Displays mit Hilfe von Apples Entwicklertools unter OSX.

Schritt 3: Melden Sie sich in dem System ab und wieder an.

Schritt 4: In den "Systemeinstellungen..." navigieren Sie jetzt zur Systemerweiterung "Monitore". Verfügt Ihr Mac über mehrere Displays, wählen Sie den betreffenden Bildschirm aus, auf dem Sie den HiDPI-Modus simulieren möchten.

Schritt 5: Im Abschnitt "Auflösung" auf der Registerkarte "Monitor" wählen Sie nun die Einstellung "Skaliert" und geben die gewünschte Auflösung an. Es ist darauf zu achten, dass die Bezeichnung des aktiven Eintrags zwingend auf "(HiDPI)" enden muss.

Schritt 6: Ihr Bildschirm läuft nun im HiDPI-Modus und simuliert Apples Retina-Display. Abschließend noch ein wichtiger Hinweis: Wer eine perfekte Simulation eines HiDPI-Displays auf einem gewöhnlichen Bildschirm erwartet, wird sicherlich enttäuscht sein.

internet, apple, safari, web-apps, ios, remote debugging, tipps, tricks

© Internet Magazin

Simulieren eines Retina-Displays: Mit Hilfe von Graphics Tools für Xcode können Sie die HiDPI-Fähigkeiten eines gewöhnlichen Displays freischalten.

Insgesamt ist die vorgestellte Lösung lediglich als Behelf gedacht, der dem Entwickler ermöglichen soll, die Retina-Displays der neuesten iPad-Generationen zu simulieren und Ihre Projekte trotzdem zu verwirklichen. Genau diese Aufgabe erfüllt dieser Workaround durchaus.

Javascript: Ereignisauswertung beschleunigen

Die Stärken von Javascript im Hinblick auf die Ereignisauswertung können einer Webapplikation auch zum Verhängnis werden, vornehmlich dann, wenn man diese nicht minimiert. Probleme treten etwa bei einem Markup eines Navigationsmenüs wie diesem

<ul id="menu"><li id="home">Home</li><li id="produkte">Produkte</li><li id="portfolio">Portfolio</li><li id="shop">Shop</li><li id="ueberuns">Ueber Uns</li><li id="anmelden">Anmelden</li><li id="kontakte">Kontakte</li></ul>

oder mit diesem Javascript-Code auf:

document.getElementById(,home').addEventListener
(,click',goHome);
document.getElementById(,produkte').addEventListener
(,click',goProdukte);
// ...
document.getElementById(,kontakte').addEventListener
(,click',goKontakte);

In diesem Beispiel wurde an jedes Listenelement des Menüs ein Ereignis-Listener angehängt. Sieben Ereignis-Listener kümmern sich nur um ein einziges Navigationsmenü - das ist alles andere als effizient. Man könnte es aber auch anders lösen:

var menuHandler = function(event) {
event = event || window.event;
var target = event.target || event.srcElement;
if (target.id === ,home') {
// gehe zu Home
}
// andernfalls ...
}
document.getElementById(,menu').addEventListener
(,click',menuHandler);

Hier überwacht genau ein einziger Ereignis-Listener das ganze Menü und delegiert Anweisungen an die jeweiligen Kind-Elemente. Das resultiert, wie gewünscht, in einer deutlich höheren Leistung.

internet, apple, safari, web-apps, ios, remote debugging, tipps, tricks

© Internet Magazin

Die deutsche Edition von Wall Street Journal begrüßt den Webbesucher bereits mit einem smarten Web-App-Banner; da die zugehörige mobile App bereits installiert ist, lässt sie sich aus dem Banner heraus komfortabel ausführen.

Web-Apps für iOS: Smarte App-Banner in iOS

Wer eine mobile App für iOS möglichst vielen Nutzern zur Verfügung stellen möchte, der kann seine Website mit seiner mobilen App über einen Banner verbinden. Apple spricht hierbei von "Smart App Banners".

Ein "smarter" Web-App-Banner informiert die Besucher einer Website über die Verfügbarkeit der App, sofern diese mit dem betreffenden iOS-Gerät kompatibel und im betreffenden Land verfügbar ist. Der Banner prüft außerdem, ob der Besucher die App möglicherweise bereits installiert hat.

Der Besucher kann die App mit Hilfe des smarten Banners herunterladen oder - falls diese bereits installiert sein sollte - sofort starten und nutzen.

Um einen smarten App-Banner zu erstellen, fügen Sie dem <head>-Abschnitt der App ein Metatag mit den Eigenschaften name="apple-itunes-app", content und app-argument zu. Als Wert der content-Eigenschaft tragen Sie die AppStoreID der App ein, um sie eindeutig zu identifizieren. Innerhalb der optionalen Eigenschaft app-argument können Sie zudem eine URL-Adresse übergeben, um innerhalb der App die gewünschten Inhalte zu präsentieren. Konkret sieht das Ganze so aus:

<meta name="apple-itunes-app" content="app-id=
IhreAppStoreID" "app-argument=dieAppURL">

Der Banner nimmt die Höhe von 156 beziehungsweise 312 Pixeln (auf HiDPI-Geräten) in Anspruch, und lässt sich durch den Besucher bei Bedarf schließen.

Chrome, Javascript: Javascript-Snippets in Chrome ausführen

Wenn Sie einen Schnipsel Javascript ausprobieren möchten, können Sie das auch ohne eine große Entwicklungsumgebung tun, mit dem Entwicklungswerkzeuge von Chrome nämlich. Klicken Sie hierzu in Chrome innerhalb des Dokumentfensters mit der rechten Maustaste und wählen Sie aus dem nun aufgeklappten Menü den Befehl "Inspect element" aus, um Zugriff auf die eingebauten Entwicklungstools zu bekommen. Hier wechseln Sie auf die Registerkarte "Console", tragen Ihren Code in die Kommandozeile ein und führen diesen aus.

CSS: Overflow:Hidden oder wie Sie Floats mit Eleganz abschließen

Bei Layoutkonstruktionen auf Basis der float-Eigenschaft muss man dem Browser bekannterweise klar Grenzen aufzeigen, indem man die Floats abschließt. Wer die ultimative semantische Reinheit des Markups anstrebt, kann sich mit der Eigenschaft overflow behelfen. Indem Sie einem Element die Eigenschaft

overflow:hidden;

oder

overflow:auto;

zuweisen, schließen Sie nicht nur die Float-Konstruktion wirkungsvoll ab, sondern bringen den Inhalt des aktuellen Elementes dazu, elegant entlang seiner inneren Konturen zu fließen. Mit Hilfe der Eigenschaft

overflow:auto;

stellen Sie zudem sicher, dass der Inhalt des aktuellen Container-Elementes um benachbarte float-Elemente nicht umbricht. Allerdings hat diese Lösung auch ihre Tücken: Wenn Sie nicht richtig aufpassen, bekommt das betreffende Element möglicherweise Scrollbalken. Der Effekt trifft dann auf, wenn die Inhalte - beispielweise eine lange URL oder ein überdimensioniertes Bild - den verfügbaren Rahmen des Containers sprengen. Im Fall von Textinhalten beheben das Problem, indem Sie dem Container-Element die Eigenschaft

word-wrap:break;

hinzufügen. Um auch Bilder in den Griff zu bekommen, können Sie sich die Eigenschaften

max-width: 100%;
height: auto;

zu Nutze machen. Das Problem mit den unerwünschten Scrollbalken tritt nicht auf, wenn Sie anstelle der Eigenschaft

overflow:auto;

die Eigenschaft

overflow:hidden;

nutzen; in diesem Fall müssen Sie allerdings damit rechnen, dass überschüssige Inhalte im Nichts verschwinden, wenn sie die Grenzen des übergeordneten Containers überschreiten.

Website-Branding: Favicons schnell erstellt

Aufgabe dieser Miniatursymbols ist es, Ihre Website unter anderem in der Adressleiste des Browsers zu schmücken. Wer die Gestaltung eines Favicons immer auf die lange Bank geschoben hat, der kann nun endlich aufatmen. Mit einem kostenlosen Online-Editor namens Xiconeditor gelingt die Erstellung von Favicons in allen benötigten Größen von 16x16 bis 64x64 Pixeln durch den Import einer Bilddatei sowie den Einsatz einiger intuitiver Werkzeuge direkt im Browser. Das Highlight dieses Dienstes ist die Vorschaufunktion.

Anhand der Vorschau lässt sich das resultierende Icon unter anderem im Kontext einer typischen Browseradressleiste sowie innerhalb der Windows-Taskleiste begutachten. So können Sie überprüfen, ob Ihr aktuelles Design bereits brauchbar ist oder doch noch Verbesserungsbedarf bestehen könnte. Die Exportfunktion schreibt natürlich das Dateiformat .ico.

Internet Explorer: Entwicklungswerkzeuge

Nicht nur Chrome und Firefox halten Entwicklungswerkzeuge bereit. Im Internet Explorer 9 und 10 können Sie eine ähnliche Funktion mit der Taste F12 aktivieren. Sie können hier unter anderem HTML und CSS bearbeiten, die UA-Kennung des Browsers bearbeiten, um zum Beispiel mobile Websites zu testen, und auf der Registerkarte "Netzwerk" die Netzwerkaktivitäten des Browsers inspizieren.

Mehr zum Thema

Frontend-Tools für jeden Einsatz
Webdesign

Wir haben uns für Sie auf dem Markt der Frontend-Tools umgesehen und präsentieren Werkzeuge für jede Anforderung.
internet, webdesign, responsive webdesign, Performance, optimierung
Responsives Webdesign

Trotz aller Verzüge gibt es auch einen Schwachpunkt beim Responsive Webdesign: Die Performance ist oft schlecht, da dieselben Ressourcen für…
internet, webdesign, adobe,  Illustrator, CS6
Webdesign

Adobe Illustrator wird im Webdesign immer beliebter. Wie Sie das Tool richtig einsetzen, erfahren Sie hier.
Facebook stellte die neue Suche
Facebook

Was sind die Implikationen für Unternehmen und Endanwender bei Facebooks neuer Suche Graph Search?
Der BGH erklärt das Internet zur Lebensgrundlage.
Online-Recht

Allgemeine Geschäftsbedingungen liest sich niemand gerne durch. Sie sind jedoch notwendig und äußerst sinnvoll. Worauf sie achten sollten.