As anyone probably has noticed, the english version of Wikipedia is offline today. It’s a good move to  protest against SOPA and show the people how important a free internet is, but some people are needing the site anyway.

For those in need of reaching the worlds most important knowledge database, I’ve created a chrome extension which unblocks Wikipedia. You can download it here.

As I’m only using Mac computers at home, I’m used to the amazing and timesaving  multi-touch gestures on my Macbook and the Magic Mouse. Wouldn’t it be nice to use this type of user interaction as a web developer to make your web app more useful?

Today I’ve made an interesting discovery. Safari uses the three-finger swipe gesture for going back and forth in the browser history. That’s the only gesture in the browser, that affects the content of the displayed site directly. With the use of the HTML5 History API it is possible to manipulate the browser history although you aren’t actually leaving the visited site. So let’s say You’ve a gallery page with 5 different photos and You want to swipe through them like it’s possible in iPhoto or on the iPhone. If you’re on a Mac and using Safari, you can check it out here.

The best way to start is to open a new pop-up window, so it doesn’t contain any previous page in the browsing history. Then you have to create a history entry for all items in your gallery and jump back to the very first one right after the page is loaded. If  you’re now swiping with three fingers, you are going one page forward and it’s easy to catch this change with a simple event handler. The rest is just some fancy javascript trickery.

After Google Reader Styles, which even is mentioned on Apple’s Extension Gallery, I’ve finished my second Safari Extension today. It’s called Facebook Chat Sound Changer and changes the annoying new alert sound of the Facebook Chat to the old and familiar “pop” sound. Just download, install and activate the extension and you’re done! The old chat alert will be automatically replaced with the old one. If you want to revert to the new alert, just deactivate the extension.

Download: Facebook Chat Sound Changer

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!