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.
Wiederholte Zugriffe auf die Eigenschaften verschachtelter Objekte kostet Geschwindigkeit. So unscheinbarer Code wie...
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".
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.
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.
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.
