2008-12-14 OMG! web output hat ein eigenes Design!

Ich hätte selbst nicht gedacht, daß das nochmal irgendwann passieren würde.

Schon vor über einem Jahr hatte ich eine Design Idee und diese Fireworks gelayoutet. Ein erster HTML-Dummy war schnell gebastelt. Dann schaute ich mir zum ersten mal an wie man in Serendipity (der hier verwendeten Blog-Engine) Templates baut und habe augenblicklich die Lust verloren.

Glücklicherweise war das alte Design so hässlich und der Code noch viel schlimmer als das Design daß mich der regelmäßige Anblick dann doch irgendwann so geschämt hat, daß ich mir den heutigen Sonntag mit Smarty (der Template Engine in Serendipity) vertrieben habe und tadaaaaaaaaaaa:

Das neue Design ist tatsächlich gerade eben online gegangen!

2008-12-13 Der Webkrauts Adventskalender öffnet mein erstes Türchen

Heute ist es soweit! Der erste Teil meines Website Performance Artikels mit dem Titel "Sehr sehr schnelle Seiten" ist aus dem heutigen Webkrauts Adventskalender Türchen gefallen. Viel Spass damit und freut euch auf morgen denn da kommt schon der zweite Teil :-)

Banner: Best Practice im Web

2008-12-11 jQuery-skipnavHighlight - nicely highlighting skip link targets

[deutsche Version dieses Beitrags anzeigen]

When I read about the Skip Links of the recently relaunched Website of City of Stockholm in the "EfA-Laborbericht, Teil 7" (german) I got instantly aware that I want to use this technique from now on as well.

To avoid "jumping" of the highlighted Containers the Developers used the CSS 2 Property outline which does not add up to the width of the Element it's surrounding like border would do. Sadly this Property is only available in the newest Browser Generation which makes the effect entirely invisible in the Internet Explorers.

To work around this Issue I used another approach. My little jQuery Plugin "skipnavHighlight"created an empty DIV and uses it to draw a Border around the link target.

You can find the working Demo here and you can download the Code of skipnavHighlight.jquery here.

2008-12-10 jQuery skipnavHighlight - Skip-Link-Ziele Anschaulich machen

[switch to english Version of this Post]

Als Tomas Caspers in seinem gestrigen "EfA-Laborbericht, Teil 7" auf die Skip-Links der frisch relaunchten Website der Stadt Stockholm verwies war mir klar, daß ich diese einfache und einfach Sinnvolle Technik zukünftig unbedingt ebenfalls nutzen möchte.

Um ein "Springen" der markierten Container zu vermeiden setzten die Entwickler der Webseite auf die CSS2 Eigenschaft: outline die das umrandete Element nicht verbreitert wie es border machen würde. Leider ist diese Eigenschaft nur in der neuesten Browser Generation verfügbar, was das Feature in den Internet Explorern vollständig verschwinden lässt.

Um diesen Makel zu umschiffen habe ich einen anderen Lösungsweg eingeschlagen. Mein kleines jQuery Plugin "skipnavHighlight" erzeugt ein leeres DIV und malt damit einen Rahmen um zu markierende Linkziel.

Eine funktionierende Demo gibt es hier und herunterladen kann man den Code von skipnavHighlight.jquery hier.

2008-12-01 Der Webkrauts Adventskalender 2008 öffnet seine Türchen

Banner: Best Practice im Web

Auch dieses Jahr beglücken die Webkrauts die Webstandards-affinien Web Entwickler wieder mit 24 prächtigen Vorweihnachtsgeschenken. Das diesjährige Thema der Artikelserie ist "Best Practices im Web".

Den Anfang macht dieses Jahr Ansgar Hein mit seinem Bericht "Stadt 2.0: Interaktiv und barrierefrei" in der er seine Erfahrungen bei der Erstellung von barrierefreien Stadtportalen anhand des Beispiel der Stadt Moers teilt.

Meine eigenen 2-3 Artikel werden innerhalb der nächsten 24 Tage folgen :-)

2008-11-19 LogFocus - hilfreiches Bookmarklet beim Testen von Keyboard Accessibility

[switch to english Version of this Post]

Zugänglichkeit für Nutzer ohne Maus zu ermöglichen ist einer der größten und wichtigsten Schritte beim Aufbau einer barrierefreien Webseite. Beim Testen von Keyboard Accessibility findet man sich immer wieder nach dem Drücken der Tabtaste in der Situation: "Wo ist mein Cursor?" bzw. "welches Element hat eigentlich gerade den Focus?". Gerade bei Elementen die Offscreen verschoben wurden tappt/tabt man dann gerne und lang im dunkeln.

Ein Script, daß ich seit langen nutze um Licht in diese Situationen zu kriegen, habe ich nun in ein handliches Bookmarklet gekapselt.

LogFocus arbeitet in allen Browsern die eine Konsole zur Verfügung stellen. Im Firefox ist hierfür Firebug notwendig. Im Safari, bzw. WebKit, muss das "Develop" Menü aktiviert sein. Für Internet Explorer empfehle ich das Plugin Companion.JS. In Opera wird die eingebaute Konsole in Dragonfly genutzt.

Um das Bookmarklet zu installieren zieht man einfach den folgenden Link in die eigenen Bookmarks.

LogFocus

Von dort aus kann es dann einfach per Klick in jeder Seite ausgeführt werden.

2008-11-19 LogFocus - handy Bookmarklet for Keyboard Accessibility testing

[deutsche Version dieses Beitrags anzeigen]

Offering usability for Users without Mouse is one of the biggest and most important Steps when building accessible Websites. While testing for Keyboard Accessibility you might find yourself very often in Situations like "Where is my Cursor?" or "What Element has the Focus right now?". Especially when Elements get moved offscreen things might end up confusing.

A Script, I've been using for a while to solve situations like this, I have now converted into a handy Bookmarklet.

LogFocus works in all Browsers that offer a Console. In Firefox you need Firebug. In Safari/WebKit you need to activate the "develop" Menue. For Internet Explorer I recommend using Companion.JS. In Opera the build in Console in Dragonfly is used.

To install the Bookmarklet simply drag the following Link into your Bookmarks.

LogFocus

From there you can run it on every Page by simply clicking on it.

2008-09-28 Accessible Javascript using Frameworks - Barcamp London 5

Barcamp London 5 rocked!

thanks to the excellent wifi I was able to twitter all day so here are my 2 days of twitter logs:

  1. is getting ready for Barcamp London 5 - feels very very tired and not too excited though... 07:44 AM September 27, 2008
  2. is at the beautiful ebay offices in Richmond for Barcamp London 5 and successfully entered the probably longest wifi password ever... 10:21 AM September 27, 2008
  3. just reasilzed that the 'squash' in 'fruit and squash' tastes ugly... 10:45 AM September 27, 2008
  4. welcome talk is coming up... 11:08 AM September 27, 2008
  5. 15 minutes to Noms... 11:47 AM September 27, 2008
  6. learned how to hack moo and is now getting ready for his own talk... 01:37 PM September 27, 2008
  7. is trying to figure out how to get this Display working with my MacBook... 01:55 PM September 27, 2008
  8. got it working! yay! the VGA Adaptor sucked... 01:58 PM September 27, 2008
  9. successfully finished his own talk and now learns the ancient art of stabbing people ... 03:03 PM September 27, 2008
  10. this is very funny in a very disturbing way... 03:09 PM September 27, 2008
  11. can't really decide what to see next. open gl in javascript, developing an iphone app and xul firefox extension development are on - hm... 03:52 PM September 27, 2008
  12. decided to see the xul school for firefox extension talk just because it's in the bean bag room... 04:03 PM September 27, 2008
  13. is now listening to caz to learn how to do better photographs 05:06 PM September 27, 2008
  14. is now waiting for @cbetta to show me how he does his cool HDR Photos... 06:06 PM September 27, 2008
  15. is having great fun playing mario kart on wii! 07:27 PM September 27, 2008
  16. that what she said... 08:01 PM September 27, 2008
  17. @TheMarco this sounds super awesome! have a lot of fun and show us the results! :-) 07:29 AM September 28, 2008 in reply to TheMarco
  18. is now getting ready for Barcamp London day 2 - tired... 07:32 AM September 28, 2008
  19. @georgebrock would you mind moving your session to another Slot? I'd love to see @cathyma's calligraphy session as well as your mac session. 07:58 AM September 28, 2008 in reply to georgebrock
  20. is listening to @simonwillison scaring us again with his XSS talk from @media ajax... about 23 hours ago
  21. is listening to @natbat telling us how to build nice, clean and maintainable CSS wishing he could use conditional comments again - sigh... about 22 hours ago
  22. seen a lot of lightning talks during lunch and is now fascinated by @cathyma's calligraphy... about 21 hours ago
  23. after total calligraphy relaxation it's now time for @workingwithme's talk about how to suck data out of wikipedia... about 20 hours ago
  24. last talk coming up. @georgebrock teaching web devs how to code osx apps - thanks again for moving the talk :-) about 19 hours ago
  25. had a great Barcamp London 5 and is now happy being at home :-) about 16 hours ago

The Slide of my own talk can be found here:

2008-09-25 Accessible Javascript - Best of Accessibility Symposium 2008

Das Best of Accessibility Symposium 2008 war wirklich erstklassig!

Das ganz klare Highlight für mich war die WAI ARIA Präsentation von Martin Kliehm und Marco Zehe. Die beiden zeigten sehr praxisnah wie schon heute jede Rich internet Application mit WAI ARIA sehr einfach zugänglicher gemacht werden kann.

Die Slides zu meinem eigenen Vortrag "Accessible Javascript mit Hilfe von Frameworks" gibt es bei Slideshare: