Today, Apple has introduced the brand new Safari 5 at the Worldwide Developer Conference (WWDC) in San Francisco. Besides a further massive performance increase, one of the main new features is the ability to create and install extensions for Apple’s browser. Extensions are basically collections of HTML, CSS and Javascript files that extend Safari’s features through a special Extension API.

After an hour of digging through the documentation, I’m able to show you my first extension for Safari: Google Reader Styles lets you change the theme of Google Reader without installing GreaseKit or any other Greasemonkey-Plugin. Currently there are only two styles (Helvetireader and the Mac OS X Snow Leopard) available – with more to come in the next few days. The different styles can be selected in the Safari Preferences.

Helvetireader:

Mac OS X Snow Leopard:

UPDATE v1.1 – 2010/06/10

• Added support for .de/.co.uk/.nl/.ch/.at/.fr/.it/.es/.ca/.com.au domains
• Added support for https
• Added two new styles (Lucidica, Simple and Clean)

UPDATE v1.2.1 – 2010/06/11

• Added a “Change Style” function at the bottom left of Google Reader, directly below “Manage Subscriptions”
• Added two new styles (Minimalistic X, Pretty White)
• Added support for .ru domain

UPDATE v1.2.2 – 2010/06/23

• Fixed support for .ru domain
• Added support for .mx domain

Download: Google Reader Styles

Wer gerade versucht eine deutsche (.de) Domain aufzurufen, wird mit größter Wahrscheinlichkeit nicht an sein gewünschtes Ziel geleitet sondern erhält eine plumpe Fehlermeldung, dass der Server nicht erreichbar ist.

Grund für dieses großflächige Problem, das die meisten (oder fast alle) .de-Domains unbrauchbar macht, ist ein Ausfall von 4 der 6 Nameserver bei DENIC, der zentralen Registrierungsstelle von .de-Domains. Hoffen wir, dass die DNS-Probleme bald behoben sind – DENIC arbeitet angeblich schon mit Hochdruck daran. Aktuelle Meldungen und den Fortschritt bekommt man derzeit wohl am besten über Twitter, wo die relevanten Tweets sekündlich eintreffen.

UPDATE (15:00):

Es sind angeblich alle Nameserver ausgefallen, nicht nur vier! Hier eine offizielle Stellungnahme von DENIC:

Liebe Kolleginnen und Kollegen,

derzeit kommt es zu einem Fehlverhalten bei einigen .de-Nameservern. Wir sind aktuell dabei das Problem zu qualifizieren und werden Euch mit Statusmeldungen weiter informieren.

UPDATE (15:10):

Auf Twitter und in meinen Kommentaren (danke, Georg) habe ich einen Tipp gefunden, wie man dem Problem zumindest vorübergehend aus dem Weg geht. Einfach die DNS-Server-Einstellungen im Betriebssystem auf Googles Public DNS (8.8.8.8 und 8.8.4.4) umstellen.

UPDATE (15:30):

Angeblich sind die Server wieder online. Bis sich alles normalisiert, dürfte aber noch ein bisschen Zeit vergehen.

Nearly three years ago, when Apple introduced the iphone, so-called “Web Apps” were the only way to develop and publish self-made applications on Apple’s new and shiny gadget. With the announcement of the SDK and the launch of the App Store, developers started abandoning web applications and began flocking to native development. But this is not the end of web-based applications: Recently Google declared the end of mobile app stores and with Google Voice, Buzz and GMail, the company started to port their entire range of services to the mobile web. Besides that, HTML5 provides the much-needed technologies (offline access, storage, location awareness) to really make web-based applications great and useful.

On of the biggest problems developers are facing with mobile web applications is the user interface/experience. We have to reach the superior quality GUI of native applications together with all the conveniences they are offering to users. The majority of web sites for example are using the plain old on-screen-keyboard for every text input, no matter what characters will be entered. It isn’t really comfortable to enter an email-address when you have to change to the secondary keyboard to enter a “@”. Just the same as having to change it for entering numbers in an input element that is only ment to contain numbers anyway.

This is probably the most common user interface problem and it is also one of the easiest to fix. The HTML5 specification contains an extension to the type attribute of input elements that is perfectly recognized by Mobile Safari. With just a little change, you are able to make your web-based application more convenient to use. And by the way: Browsers that don’t understand the new type attributes will ignore it and keep displaying a normal input element.

It is as simple as the following code snippet:

Text: <input type="text" /> <!-- display a standard keyboard -->
Telephone: <input type="tel" /> <!-- display a telephone keypad -->
URL: <input type="url" /> <!-- display a URL keyboard -->
Email: <input type="email" /> <!-- display an email keyboard -->
Zip Code: <input type="text" pattern="[0-9]*" /> <!-- display a numeric keyboard -->

Just change to type attribute to either “tel”, “url” or “email”. Additionally you can alter use the new pattern attribute to only allow numbers. I’ve set up a demo page which can be accessed with every iPhone and iPod Touch. Please note, that this feature is only supported in iPhone OS 3.1 or newer.

While searching the web for a proper way to track user behaviour, I stumbled upon a very interesting blog post written by Brian Cray. He uses the “power” of Google Analytics’ new Asynchronous Tracking to track all clicked links and get information about how the users behave on his site. This method gives you insights about what elements of the site are really used and how the visitors are navigating through the content. Brian sums it up quite properly:

I dare you to answer the following questions with your current Google Analytics setup:

• Are your users using the main menu to navigate or do they use different means to find content?
• Do your users scroll through your content and click links in the footer?
• Do your users click on an article title or the “continue reading…” link?
• Do your users actually go through the items in my dropdown menu, or are they
• unaware of the dropdown menus?
• Do your users follow your related blog entry suggestions?

As I’ve chosen Mootools as the Javascript-Framework for many of my websites, I couldn’t really copy and paste the code to the <head>-sections. I’ve not only rewritten the code-snippet to utilize Mootools instead of jQuery but also tweaked the functionality which results in better tracking.

Just copy and paste this right under the code of google analytics:

window.addEvent('domready', function() {
	$$('a').addEvent('click', function(event){
	  	var element = $(event.target || event.srcElement);
 
		if(element.get('tag') != 'a'){
			element = element.getParent('a[href]');
		}
 
	  	try{
	  		_gaq.push(['_trackEvent', (element.get('id') || element.getParent('[id]').get('id')), 'clicked', (element.get('text').trim() || ((element.getFirst('img'))?element.getFirst('img').get('alt'):element.get('href'))) || element.get('href')]);
	  	}catch(err){
	  	}	  	
 
	});
});

For more information about how this works and asynchronous tracking in general, please visit Brian’s blog.

In den letzten Monaten hat sich einiges getan im Bezug auf Web-Standards und Technologien. Beispielsweise wurde ein neuer Browser-Wettlauf rund um die HTML5-Spezifikationen entfacht und die Hersteller versuchen jeden noch so kleinen Geschwindigkeitsvorteil aus ihren Software herauszuholen. Was heutzutage mit “stinknormalen” Browsern möglich ist, zeigt Guillermo Esteves auf seinem Blog:

Er hat die berühmte Anfangssequenz von Star Wars – den gelben Lauftext mit dem Weltall im Hintergrund – komplett in HTML und CSS nachgebaut. Leider funktioniert die Animation scheinbar derzeit nur mit Snow Leopard und dem Safari 4.0.4 sowie dem WebKit nightly-Build. Für alle Windows-User gibt’s jedoch netterweise ein Video auf YouTube.

Es ist noch gar nicht so lange her, da musste man beim Web-Design noch auf die kleineren Auflösungen der CRT-Monitore Rücksicht nehmen. 800*600 Pixel war vor ein paar Jahren noch die Bildschirmauflösung von einem nicht zu vernachlässigenden Teil der Website-Besucher, der dementsprechend berücksichtigt werden musste. Ähnliche Probleme entstehen auch jetzt wieder, wenn man mit Netbooks und anderen mobilen Geräten mit geringer Bildschirmgröße auf das Internet zugreift.

Google hat jetzt ein brauchbares Tool herausgebracht, dass einem Vieles erleichtern soll. Mit Browser Size spürt man gezielt Usability-Probleme im Zusammenhang mit zu kleinen Auflösungen auf und kann seine Internetseiten entsprechend verändern. Über die eigentliche Website wird ein halbtransparentes Overlay gelegt, anhand dessen man anschließend leicht den prozentuell sichtbaren Bereich erkennen kann.

Bei wem also wiedermal ein Website-Redesign ansteht, der sollte sich das kleine Helferlein im Hinterkopf behalten …

Google hat bereits vor einiger Zeit mit Chrome Experiments eine Plattform für allerlei Javascript-Spielereien und Experimente ins Leben gerufen auf der es sich immer wieder einmal vorbeizuschauen lohnt. Da Googles Browser – genauso wie Apples Safari – die Webkit-Engine zu Grunde liegt, lassen sich die meisten Projekte auch mit anderen Browsern aufrufen. Auch mit dem Firefox kann man bei dem ein oder anderen Experiment ein Glück haben, immerhin werden nur offene Standards verwendet.

Besonders lustig finde ich Browser Ball, das beliebig viele Browserfenster zu einem großen Spielfeld zusammenfügt und man einen Ball über verschiedene Windows werfen kann. Schaut’s euch mal an – es ist beeindruckend!

Im offiziellen Entwicklerblog von Macrabbit, die sich auch für den ausgezeichneten CSS-Editor CSSEdit verantwortlich zeigen, wurde heute der Startschuss von Espresso 1.0 verkündet. Ganz im Stile von CSSEdit folgt auch der große Bruder den bekannten Grundregel der belgischen Entwickler:

“power editing, blazingly fast publishing, previewing and much more — all wrapped in a slick interface”

Eine wirklich hervorragende Idee ist die Möglichkeit, die Webentwicklungs-Suite durch verschiedene Plug-Ins, so genannte Sugars, erweitern zu können. Diese XML-Dateien können die zusätzliche Script- und Programmiersprachen in Espress einbinden und machen das Programm noch flexibler. Im Coffee House oder dem offiziellen Forum gibt es bereits einige Sugars zum kostenlosen Download, die Zahl wird sich hoffentlich bald um ein vielfaches steigern. Falls die gewünschte Erweiterung noch nicht verfügbar ist, kann diese einfach mit dem Sugar Development Kit selbst erstellt werden.

Im Grunde stellt Espresso eigentlich nur die Grundfunktionen zur Verfügung. Diese Aufgabe haben die Entwickler wunderbar erfüllt und bieten eine ansprechende und intuitive Oberfläche. Weitere Funktionen können mit dem ausgereiften Plug-In System nach Belieben hinzugefügt werden. Ich werde das Programm jedenfalls erst einmal 15 Tage testen und dann kann ich mir hoffentlich ein Bild darüber machen, ob es gegen Coda, dem direkten Konkurrenten, eine Chance hat.

Ein weiteres mal hat mich ein Twitter-User auf eine ganz nette Initiative aufmerksam gemacht: Peter Höflehner berichtet in seinem Tweet über die norwegische Website Finn.no, die Benutzern des veralteten Internet Explorer 6 den Kampf angesagt hat. Besucht man den Online-Anzeigenmarkt mit dem fast schon sieben Jahre alten Browser, bekommt man eine grüne Box zu sehen, die auf den verwendeten Browser hinweist und Alternativen vorschlägt.

Es gibt bereits eine Gruppe von Web-Entwicklern, die ähnliche Warnmeldungen auf ihren Webseiten platziert, um die Verbreitung des Internet Explorers zu dezimieren. Zur Besseren Kommunikation und Koordination der Aktion wurde ein Wiki eingerichtet.

Ich kann diese Aktion nur unterstützen und werde in den kommenden Tagen auch so eine Box hier einbauen. Ich denke, dass die Zeit gekommen ist, den Internet Explorer 6 schön langsam zu Grabe zu tragen und damit auch die zahlreichen Sicherheitslücken und Inkompatibilitäten ein für allemal aus dem Weg zu schaffen. Leider gibt es, vor allem im Business-Sektor, viele Anwender, die nicht von heute auf morgen den Browser wechseln können. Deswegen ist es wichtig, die Erreichbarkeit für diese Leute trotzdem noch zu gewährleisten aber trotzdem einen Hinweis für die Anwender anzuzeigen.

Wollt ihr diese Aktion unterstützen? Dazu genügt es, folgenden HTML-Code an passender Stelle in eure Seite einzubauen. Der benutzte Browser wird automatisch erkannt und Benutzer von modernen Browsern bekommen die Meldung nie zu sehen:

<!--[if lte IE 6]>
<mce :style type="text/css">< !
#ie6msg{border:3px solid #090; margin:8px 0; background:#cfc; color:#000;}
#ie6msg h4{margin:8px; padding:0;}
#ie6msg p{margin:8px; padding:0;}
#ie6msg p a.getie7{font-weight:bold; color:#006;}
#ie6msg p a.ie6expl{font-weight:normal; color:#006;}
-->
<div id="ie6msg">
<h4>Wussten Sie dass Ihr Browser (Internet Explorer) veraltet ist?</h4>
Um das beste Ergebnis und den vollen Nutzungsumfang unseres Internetauftrittes nutzen zu können, aktualisieren Sie bitte ihren Browser.
Die aktuelle Version ist der <a href="http://www.microsoft.com/windows/downloads/ie/getitnow.mspx">Internet Explorer 7</a> und der <a href="http://www.microsoft.com/windows/Internet-explorer/beta/default.aspx">Internet Explorer 8</a> ist bereits als beta verfügbar.
Die Aktualisierung ist kostenlos. Sollten sie einen Computer am Arbeitsplatz benutzen, wenden Sie sich bitte an den Administrator/Informatiker.
 
Sie können auch andere Internet Browser probieren, wie die kostenlosen <a href="http://www.opera.com">Opera</a>, <a href="http://mozilla.com">FireFox</a> oder <a href="http://www.apple.com/safari/download/">Safari</a></div>
&lt; ![endif]--&gt;</mce>

Noch bequemer geht es natürlich mit diesem Wordpress-Plugin!

In den vergangenen Minuten waren die Timelines auf Twitter prall gefüllt mit “Don’t Click” Statusupdates, die alle auf diese Seite verweisen. Auch mich hat es natürlich erwischt und ich hab mal nachgeforscht, wie die Technik des kleinen Hacks funktioniert. Nach kurzer Analyse gibts auch schon die Erklärung: Hinter dem Scherz steht keine Sicherheitslücke oder andere bedrohliche Dinge, sondern ein geschickter Einsatz von HTML und CSS.

Betrachtet man den Quelltext der Seite genauer, so findet man gleich am Anfang einen Iframe mit der URL “http://twitter.com/home?status=Don’t Click: http://tinyurl.com/amgzs6″. Dieser ruft eine ganz normale Twitter-Startseite auf, bei der das gewünschte Statusupdate bereits in das Eingabefeld eingegeben ist. Diese Technik benützten viele Twitter-Mashups und Dienste um keine API-Zugriffe zu benötigen. Doch wie funktioniert das Absenden des Tweets?

Ganz einfach sogar! Der Iframe wurde vollständig transparent gemacht und genau soweit über den Browserrand nach links geschoben, dass sich der “update”-Button der Twitterseite über dem “Don’t click”-Button der eigentlichen Seite befindet. Man klickt also nicht wirklich auf den sichtbaren Button sondern bestätigt unwissentlich den unsichtbaren Button der Twitterseite. Über diese Weise wird das Statusupdate dann auf Twitter gepostet.

Ich hab den Code nochmal ein wenig verändert, um das Ganze deutlicher zu machen:

Iframe mit reduzierter Transparenz:

Iframe komplett im Bild mit reduzierter Transparenz:

UPDATE: Twitter hat mitlerweile das Clickjacking-Lücke gefixt. Probleme dieser Art sollten in Zukunft nicht mehr auftreten. Falls ihr noch Interesse an dem Sourcecode habt, diesen findet ihr auf Pastie.