Archiv:

Latest photoblog

photoblog

Blog » Webdev

Safari 3 (Beta) für Windows

Der beliebte und eigentlich gar nicht mal schlechte Mac-Browser „Safari“ ist nun auch in Version 3, als Beta für Windows erhältlich. Produktives Arbeiten ist mit dem Ding allerdings bei weitem noch nicht möglich, denn bei der Menge an erheblichen Bugs ist das meiner Meinung nach höchstens eine Pre-Alpha-Version, keine Beta. Wie man (auf deutschen Win-Systemen) wenigstens einige dieser Bugs behebt, beschreibt Hannes im Datenlabyrinth.

Der 8 MB große Download befindet sich für alle Neugierigen unter www.apple.com/safari.

Der Schock am Montag

Da liest man so ganz mir nichts dir nichts seine RSS Feeds am Montagmorgen, und was ist die erste Headline die man um die Ohren geworfen bekommt?

Microsoft experimentiert mit neuem Mobil-Browser. Wenn ich so an die Stunden Tagen Wochen denke die ich damit verbracht habe Seiten im Desktop IE ans laufen zu kriegen, dann könnt ich kotzen bei der Vorstellung das ich dies u.U. demnächst auch für die Mitnehmversion dieser Krankheit tun muss.

Aber wie ein Kollege schonmal treffend sagte: Ohne Microsoft wär unserer Job ein Job wie jeder andere ;)

lemon-lime.de Online!

Ein kleines Projekt von mir ging Anfang der Woche still und heimlich nach unzähligen verworfenen Versionen und Revisionen endlich online. Dabei handelt es sich um die Seite der beiden Dortmunder House-, Electro- und Minimal-DJs Franco Lémon und Micha Limé.

lemonlime.jpg

Die Seite basiert zu 100 % auf einem ziemlich aufgebohrten WordPress welches durch zahlreiche Plugins um einen Eventkalender und eine Bildergalerie erweitert wurde. Gestaltung und technischer Hintergrund entsprangen hier komplett aus meiner Feder. Wenn Ihr also was zu meckern habt, das Kommentarformular gehört Euch! ;)

www.lemon-lime.de

Mobile Web Developers Guide

Ein weiterer Link der unmittelbar mit der SXSW2007-Conference in Zusammenhang steht, führt diesmal zur Präsentation „Everything you always wanted to know about the mobile web“ und vor allem zum dazugehörigen „dotMobi Mobile Web Developers Guide“, welcher von der Agentur „Blue Flavor“ erstellt wurde.

Vieles wird dort gut erklärt und angesprochen, einiges was man sicherlich schon kennt, aber auch vieles was mir persönlich neu war (vor allem was Links zu lesenswerten Artikeln und nützlichen Seiten angeht). Auch Dinge, die man meist nur unbewusst wahrnimmt werden thematisiert.

http://www.blueflavor.com/blog/mobile/sxsw_2007_mobile_web_presentation.php
http://www.blueflavor.com/blog/mobile/dotmobi_mobile_web_developers_guide.php

(via Webstandardsblog)

Neue WordPress Versionen 2.0.9 und 2.1.1

Heut morgen sind zwei neue WordPress Updates erschienen. Zum Einen das Update auf die Version 2.0.9 für die Blogs die noch WP 2.0.x am laufen haben, und zum Anderen das auf Version 2.1.1. für die Blogs die schon auf 2.1 umgestellt haben.

Bei der Gelegenheit werde ich dann auch mal hier updaten von 2.0 auf 2.1. Wenn also heute oder morgen irgendwann was nicht klappt, dann nicht wundern, dann werde ich das Blog wohl abgeschossen haben.

Was aber dank meiner wunderbaren Übersetzung der Upgradeanleitung (von 1.5 auf 2.0) nicht passieren sollte. Soviel hat sich ja zwischen den Versionen nicht verändert beim Updatevorgang …

Internetauftritte für mobile Endgeräte

Viele werden sich bisher nicht mit dem Thema befasst haben, viele werden das vielleicht auch in näherer Zukunft erst einmal nicht tun, doch spätestens seit es UMTS und die ersten einigermaßen vernünftigen Browser für Mobiltelefone und PDAs gibt ist das Thema aktueller denn je: die Optimierung von Internetauftritten für mobile Endgeräte.

Fast jeder kennt das, man ist bei Bekannten, hat ein oder zwei Gläschen Wein (wahlweise auch Bier) getrunken, und möchte nun bald heimfahren. Doch natürlich hat man keine Ahnung wann der ÖPNV Richtung Heimat geht. Der Bekannte hat aber leider gerade nicht die Möglichkeit ins Internet zu schauen. Es wäre also jetzt ein leichtes, mit dem Handy samt eingebauten Browser die elektronische Fahrplanauskunft aufzurufen, und sich bequem den nächsten Bus zu suchen.

Leider spielen auch in Zeiten des WAP 2.0 die wenigsten Internetseiten da mit. Zwar erlauben es moderne Mobilgerätebrowser wie der Opera Mini oder der Minimo mittlerweile auch rein für das Web optimierte Seiten auf Handys etc. anzuzeigen, dennoch sind diese oft aufgrund großer Datenmengen oder vorausgesetztem JavaScript nur mit Einschränkungen benutzbar.

Dabei muss in einen Webauftritt, der für mobile Geräte angepasst werden soll, nicht einmal viel Aufwand gesteckt werden. Der angesehene amerikanische Entwickler Cameron Moll spricht dabei von 4 Methoden:

  1. Nichts tun
  2. Styling von Elementen entfernen und ungestaltetes HTML ausgeben
  3. Angepasste media="handheld"-Stylesheets verwenden
  4. Inhalte, Code und Bilder speziell für Benutzer mobiler Geräte anpassen

All diese Methoden haben Vor- und Nachteile, auf die hier kurz eingegangen werden soll.

Nichts tun und hoffen

Natürlich macht es am wenigsten Aufwand, nämlich ziemlich genau gar keinen, wenn man eine Seite nicht für mobile Browser optimiert, und darauf hofft, dass ein Benutzer von Handys oder PDAs alle relevanten Informationen auch ohne eine spezielle Anpassung findet. Wenn alles gut verläuft, so findet der User sogar genau die Informationen, welche er beim surfen mit dem Webbrowser vorfindet. Die Seite wird somit sozusagen „unverfälscht“ auf dem Handy wiedergegeben. Allerdings wird bei dieser Methode auch am wenigsten auf die Bedürfnisse von eben solchen Benutzern eingegangen. Es werden unter Umständen eine Menge an unnötiger Daten, große Bilder, Stylesheets, aufgeblähter Code und so weiter übertragen. Das verursacht dem Benutzer auch in der heutigen Zeit noch recht hohe Übertragungskosten. Ein wenig freundlicher ist da schon die nächste Methode.

„Rohes“ HTML ausgeben

Bei dieser Methode, bei der die Website im Optimalfall zwischen Inhalt (HTML) und Styling (CSS) trennt, wird auf sämtliche Stylesheets verzichtet, der Handheld-Browser somit dazu gebracht browsereigene Stildefinitionen beim Rendern der Seite zu benutzen. Dies spart zumindest ein wenig Code ein, da keine extra Stylesheets, und somit auch keine möglicherweise definierten, speicherintensiven Hintergrundbilder geladen werden müssen. Doch auch hier besteht die Seite eigentlich aus gewöhnlichem HTML Output, welcher in der Regel für die Ausgabe am Bildschirm erstellt wird.

Handheld-Stylesheets einbinden

Eine bessere Variante ist, ein Stylesheet für Mobilgeräte zu optimieren, und dieses für nur eben solche Geräte, mittels media="handheld"-Attribut mit in die Seite einzubinden. Das bietet uns den Vorteil unnötige Elemente ausblenden zu können oder speicherintensive Bilder gar nicht erst laden zu lassen. Der User muss sich somit auch keine zusätzliche Adresse merken (beispielsweise eine Subdomain wie mobile.google.com oder google.com/mobile) und das Prinzip der Geräteunabhängigkeit von Dokumenten bleibt somit außerdem gewahrt. Dennoch muss man bei dieser Methode beachten, dass das media="handheld"-Attribut teilweise immer noch unzureichend unterstützt wird, und selbst dann auch nur einige wenige CSS-Eigenschaften letztendlich vom Browser korrekt interpretiert werden. Der Entwicklungs- und Wartungsaufwand hält sich aber auch bei dieser Methode noch in Grenzen.

Eigenen Content, Code und Bilder für mobile Geräte

Die vierte und somit auch letzte Methode ist wohl die, mit meisten Vor- aber auch Nachteilen. Nämlich die Bereitstellung von eigenen Inhalten speziell für Handhelds. Hierbei wird der Code von allen, für die mobile Darstellung irrelevanten Seitenelementen bereinigt. Beispielsweise werden wohl kaum „Seite drucken“ Links, Bilder in hoher Auflösung und dergleichen auf kleinen Handydisplays benötigt. Der Aufwand ist bei dieser Methode wohl am höchsten, da der Entwickler hierbei für gewöhnlich 2 verschiedene Seiten entwickeln muss. Dies widerspricht außerdem dem Prinzip der geräteunabhängigen Erstellung von Dokumenten für das Web. Weiter muss eine solche Seitenversion meist unter einer separaten Adresse aufgerufen werden, was nicht immer für Jedermann logisch und ersichtlich ist. Ein Aufwand der eines Tages umsonst gewesen sein könnte, wenn Mobile Endgeräte später einmal so leistungsfähig wie Desktop PCs sind. Doch bis dahin sollte wohl noch einiges an Zeit vergehen.

Eine kurze Anleitung wie man einen ersten Schritt in die letzte genannte Methode gehen kann, beschreibt Mike Davidson in seinem Artikel „Make your Site Mobile-Friendly in Two Minutes“ (englisch). Dort wird darauf eingegangen wie man mittels eigener Subdomain, binnen 2 Minuten, eine Seite von unnötigen Elementen bereinigen, und den Code durch entfernen von Leerzeilen verkleinern kann.

Das Ergebnis rechtfertigt den Aufwand

Lohnt sich ein solcher Aufwand für eine verschwindend kleine Minderheit an Benutzern, die unterwegs ins Internet gehen möchten? Das bisher nur wenige Benutzer vom Handy gebrauch machen um ins Internet zu gehen, dürfte momentan jedoch primär daran liegen, dass sich viele Entwickler die gleiche Frage stellen.

  • Der Benutzer hat stets die volle Kontrolle darüber wo er die Inhalte einer Website lesen möchte. Im Bus auf dem Weg zur Arbeit, zuhause auf dem Sofa oder heimlich im stinklangweiligen Seminar.
  • Anbieter von Klingeltönen haben es erfolgreich vorgemacht, schon 12-jährige geben jeden Monat viel Geld für Klingeltöne und Handyvideos aus. Das Handy ist längst als neues Medium neben Internet, TV, Radio und Print anerkannt. Wieso sollte man einem Markt, für vergleichsweise so geringen Aufwand so wenig Beachtung schenken? Nach der Kamera wird auch das Internet in Handys von immer mehr Leuten benutzt. Wieso nicht einfach einmal einer der ersten sein, der diesen Markt für sich erschließt?
  • GPS macht es heute bereits möglich durch fremde Orte und Städte zu navigieren. In Zukunft wird noch viel mehr mit dem Handy in Verbindung mit dem Internet möglich sein. Beispielsweise eine GPS-gesteuerte Suche nach dem nächsten Restaurant in der Umgebung. Ein Handy ist standortunabhängig und kann auch heute schon als Navigationsgerät benutzt werden, entsprechende Software vorausgesetzt.
  • Durch so genannten Semacode ist es möglich, beispielsweise Informationen mit Wikipedia Artikeln zu verknüpfen. Semapedia ist nur ein praktisches Beispiel wie man die Außenwelt über das Handy mit dem Internet in Verbindung bringen kann. Durch Semapedia ist es z. B. möglich, Sehenswürdigkeiten oder interessante Bauwerke mit einem Aufkleber zu bekleben welcher so genannten Semacode enthält (zu finden übrigens auch auf jeder Handyrechnung zur leichteren Auffindung von Kundendaten). Fotografiert man nun mit seiner Handykamera diesen Sticker ist es (ähnlich wie beim EAN-Barcode) möglich, durch diesen auf den entsprechenden Wikipedia-Artikel oder andere Zusatzinformationen geleitet zu werden.
  • Neben dem Internet hat in letzter Zeit vor allem das Handy unsere Welt verändert wie kaum etwas anderes. Mittlerweile ist es möglich nicht mehr nur beides separat zu benutzen, die Übergänge sind mittlerweile fließend. Über Dienste wie Skype oder Jajah ist es möglich über das Internet mit dem Handy zu telefonieren. Mit jedem modernen Handy kommt man problemlos ins Internet. Eine Technologie die sich in den nächsten Jahren mit hoher Wahrscheinlichkeit noch viel weiter entwickeln wird.

Fazit

Auch wenn viele Stimmen, aus teilweise berechtigten Gründen, gegen die .mobi Top-Level-Domain sind: Die bereits abgeschlossene Einführung einer Domain speziell für Mobile Geräte ist ein weiterer Punkt in einer Liste, welche verdeutlichen soll, welchen Stellenwert die Anpassung von Internetseiten für portable Geräte in Zukunft haben wird. Das Internet wird viele neue Möglichkeiten bieten welche mit dem Handy genutzt werden können. Jemand der im Internet Erfolg haben möchte, sollte nicht davor zurückschrecken zumindest einmal einen Blick auf das „mobile Web“ zu wagen.

Weiterführende Links

Dieser Artikel erschien am 22.12.2006 im Webkrauts-Adventskalender

Zugänglichere Captchas

Eine Überlegung die mir gerade kam als ich mal wieder ein recht einfaches Captcha sah … Wenn man einmal darüber nachdenkt, dass Spambots sehr oft Formular-Eingabefelder willkürlich ausfüllen (so hatte ich z. B. schon mehr als häufig eMail-Adressen oder URLs im normalen Adressfeld stehen), so sollte es kein großes Problem für seine Captcha Spamschutz-Routine sein, Captcha-Bilder mit einem entsprechenden Alt-Attribut zu auszuzeichnen.

Da bisher, und auch in Zukunft wie ich denke, noch die allerwenigsten Bots mit einer OCR-Funktion ausgestattet sind um ihren Bullshit auf die Welt loszulassen, würde es, da bin ich mir fast sicher, sicherlich eine ganze Weile funktionieren, wenn man Captcha-Bildchen wie gesagt einfach mit einem dem Captcha-Text entsprechenden alt-Attribut auszeichnet.

Denn alt-Attribut auslesen und in ein entsprechendes Feld eintragen halte ich für einen Bot nicht unbedingt für viel einfacher als 1+1 zusammen zu zählen (meine Spamschutz-Methode im Photoblog). Und die Variante hat bisher jedem Spamangriff stand gehalten. Denn, solange das Captcha-Eingabefeld nicht unbedingt den Namen „captcha“ trägt, sollte ein Bot nicht ohne weiteres erkennen, dass es sich dabei um einen Captcha-Code handelt.

Hier könnte ich mir vorstellen, dass eine Bezeichnung „mail“ für das Captchafeld, und „email“ für das eigentliche E-Mail-Feld selbst für nicht vollkommen verblödete Bots schon eine Schwierigkeit darstellen und für Abhilfe sorgen könnte.

Ideen? Meinungen? Vorschläge?

Bravo 1Live!

Gestern um 5:00 Uhr ging das lang angekündigte „neue Einslive“ online, bzw. on air.

Nun, Geschmäcker sind verschieden, so hab ich schon manch Negatives über die neue Seite gehört. Kann ich persönlich aber nicht nachvollziehen, ich finde die Seite schick, modern — vielleicht einen kleinen Ticken zu modern, aber zielgruppengerecht und immernoch schön — und das vorbildlichste an der Sache: die Entwickler nutzen (weitestgehend, wie ich beim Überfliegen des Codes gesehen habe) semantisches Markup und „This Page Is Valid XHTML 1.0 Strict!“. Daran kann sich z.B. die Süddeutsche (und noch einige Weitere [die aber mittlerweile einigermaßen gelernt haben]) ein Beispiel nehmen.

Dazu sage ich Daumen hoch, Chapeau! Von mir eine glatte Einslive Krone für das neue Einslive! Mögen sich andere Entwickler ein Beispiel daran nehmen.

http://www.einslive.de