LexaT

Conditional Comments ohne zusätzliche http requests

LexaT — Fri, 07 Nov 2008 07:14:40 +0000

Wie ich letztlich schon beschrieben habe, werden Conditional Comments oft als Browserweiche benutzt. Mit ihnen ist es möglich browserspezifisch Dateien zu referenzieren und es sind halt oft die speziellen Stylesheets, die für die verschiedenen Versionen des Internet Explorers geladen werden. So weit, so schön. Der Nachteil an der Sache ist, dass dadurch jedesmal auch ein weiterer http request stattfindet. Warum das problematisch sein kann, möchte ich gerne in den nächsten Tagen thematisieren. Zunächst nur einmal soviel: zu viele http requests verlangsamen den Seitenaufbau, weil die Browser nur eine begrenzte Anzahl gleichzeitiger Connections zulassen.
Eine wirklich feine Art, dieses Problem zu umgehen und dabei weiterhin die Vorteile der Conditional Comments als Browserweiche zu nutzen, fand ich bei Paul Hammond:


If you use this HTML:



  


with CSS that looks something like:

div.foo {
    color: inherit;
}
.ie div.foo {
    color: #ff8000;
}

Klasse Sache. Muss ich die Tage hier mal ein wenig umbauen.

Heute sind es 10 Jahre gulli

LexaT — Thu, 06 Nov 2008 09:57:30 +0000

Randolf berichtet auf seinem Blog ausführlich über den 10. Geburtstag von gulli.com. Ich kenne gulli.com seit 9 Jahren und ab 2002 wurde aus dem Hobby mein Beruf. Das es sich seit einem dreiviertel Jahr in anderen Händen befindet ist immer noch ungewohnt und befremdlich. Ich bin nicht der Einzige, dem ganz oft noch ein “Aber da muss man doch ….” auf der Zunge liegt. Klar ist, die Jungs und Mädels von Inqnet gehen anders an gulli.com ran und das ist auch gut so. In meiner gulli-Zeit hat sich die Seite von einer Warezseite, über ein Informationsportal zu einem eigenständigen Nachrichtenmedium mit einer riesengroßen und sehr agilen Community gewandelt. Dabei ist es jedesmal größer geworden, eine Erfahrung, die ich auch den neuen Besitzern sehr gönne.

Von daher: Herzlichen Glückwunsch zum 10. Geburtstag, gulli.com!

Für alle die weitergehende Informationen zu gulli wollen, lege ich die Lektüre unseres Buches ans Herz. Darüber hinaus findet sich einiges an Hintergrundinfo auf Randolfs und Richies Blogs und natürlich auf gulliwars. Da werden wir in Bälde auch noch was schreiben.

Gelungener Webmontag in Dortmund

LexaT — Tue, 04 Nov 2008 08:24:43 +0000

Der erste Webmontag in Dortmund fand im sehr ansprechenden Konferenzraum der itemis AG direkt an de B1 statt. Von Beginn an herrschte eine angenehme und herzliche Atmosphäre unter den 14 Teilnehmern. Die leckere Suppe trug auch dazu bei. Um 20:00 Uhr starteten die 4 Kurz-Präsentationen.

Nicolai Schwarz hielt einen Vortrag mit dem Titel “Herzlich Willkommen”, sprach die automatische E-Mail. Bei dem interessanten Thema ging es um die automatisch verschickten Emails nach einer Registrierung bzw. Abmeldung. Anhand von Beispielen bekam man schnell einen Eindruck davon, wie unterschiedlich (gut) die jeweiligen Portale und Dienste die Emailbenachrichtigungen umsetzten.

Katrin Scheib ist Chefin vom Dienst von “Der Westen”. Sie berichtete über die Erfahrungen ihrer Redaktion mit Twitter.

Sebastian Deutsch von 9elements aus Bochum sprach über den Ruhrstream. Hier twittert man auf einem Portal, welches gänzlich mit serverseitigem Javascript verwirklicht wurde.

Den Abschluss machte Arne Schulenberg mit einem Bericht über seinen Online-Comic Union der Helden, der mittlerweile beachtliche 4000 Leser hat.

Es folgten noch 2 sehr unterhaltsame Stunden und als man gemeinsam gegen 23:00 Uhr den Raum verließ, war klar, dass es allen Spaß gemacht hat und man recht bald eine Wiederholung anstrebt. Es gab auch schon die ersten Ideen für einen zweiten Webmontag Ruhr

Mit oder ohne www?

LexaT — Sun, 02 Nov 2008 19:29:36 +0000

Viele Seiten sind sowohl mit als auch ohne “www” - also unter http://domain.de als auch unter http://www.domain.de erreichbar. Das kann dazu führen, dass eine Suchmaschine die Seiten des Projektes nicht optimal indiziert.
Die Umleitung auf www ist technisch sehr einfach zu realisieren, sofern die Seite auf einem Linux-Server mit Apache Webserver und installiertem mod_rewrite Modul liegt:
Einfach eine Text-Datei mit folgendem Inhalt erstellen, als .htaccess speichern und in das Rootverzeichnis laden. Statt domain.de muss natürlich der eigene Domainnamen verwendet werden.

Umleitung ohne www


RewriteEngine On
RewriteCond %{HTTP_HOST} ^www.domain\.de$ [NC]
RewriteRule ^(.*) http://domain.de/$1 [R=301]

Umleitung mit www


RewriteEngine On
RewriteCond %{HTTP_HOST} !^www\.domain\.de$ [NC]
RewriteRule ^(.*)$ http://www.domain.de/$1 [R=301,L]

Persönlich bin ich der Meinung, dass wir mittlerweile auf das “www” getrost verzichten können. Ich treffe jedoch oft auf Menschen ohne größere Internetaffinität, die felsenfest der Überzeugung sind, ein
“www” gehöre zu einer Internetadresse. Hier werden wir uns wohl noch etwas gedulden müssen, bis das “www” aus den Köpfen der Nutzer ist. Am ehesten geht das über die schlichte Gewöhnung.

Favicon Generatoren

LexaT — Sun, 02 Nov 2008 13:50:20 +0000

Ein Favicon ist ein must have für jede Seite. Dabei geht es nicht einmal nur um den optischen Mehrwert, sondern vor allem auch um den Umstand, dass ein fehlendes Favicon zu einem 404 (file not found) Fehler führt. Bei hightraffic sites und aktivierten Serverlogs kommen da beachtliche Dateigrößen zustande Mit Hilfe von Online-Generatoren gelangt man mittlerweile sehr einfach und unkompliziert an ein Favicon. Die Generatoren unterscheiden sich nach 2 Methoden: man zeichnet die Icons selbst, oder man lädt ein Bild/Foto zur Bearbeitung auf den Server. Ich möchte hier nur auf die Generatoren eingehen, die mindestens das Hochladen eigener Bilder unterstützen - die reinen Editoren kommen evtl. später einmal an die Reihe. Im Laufe der Zeit haben sich in meinen Bookmarks ein paar Links auf entsprechende Online-Generatoren angesammelt, die ich hier einmal vorstellen möchte.

Mein Testbild ist ein 142,26 KB großes JPG in den Abmessungen 800×661 Pixel, aus dem ich mit folgenden Generatoren ein Favicon erzeugt habe:

FavIcon from Pics

Unter html-kit.com präsentiert sich uns eine etwas unordentlich und chaotisch wirkende Seite. Es war der erste Favicon-Generator auf den ich seinerzeit gestoßen bin. Wie der Name Favicon from Pics schon andeutet, werden hier Bilder hochgeladen, skaliert. konvertiert und zum Download angeboten. Auch animierte Favicons werden angeboten. Dazu möchte ich mich allerdings nicht äußern, weil das arg zynisch werden würde. Angaben zur max. Bildgröße finde ich nicht, aber mein 144 KB Testbild wird anstandslos in ein Favicon konvertiert. Sodann erhalte ich eine Vorschau und bekomme die Möglichkeit zum Download und zum Test im Browser. Für den Browsertest wird eine neue Seite generiert, in der das soeben erstellte Favicon referenziert ist. Leider bekommt man hier den Download nicht mehr angeboten, was einen im Endeffekt dazu nötigt, die Prozedur neu zu starten. Der Download selbst besteht aus einem Zip-File, in dem sich das 16×16/32×32 Pixel Favicon (3638 Byte), ein 16×16 Px PNG als Vorschaubild und eine readme.txt befinden. Erwähnenswert ist noch der Favicon-Validator.

Dynamic Drive Favicon Generator

Der Favicon Generator von Dynamicdrive ist ein schnörkelloses, funktionales Upload-Formular. Es werden gif, jpg, png und bmp unterstützt und die einzelne Datei darf eine max. Größe von 150 KB nicht überschreiten. Dynamicdrive bietet neben der Standardgröße von 16×16 Pixeln auch die Ebenen 32×32 Pixel und 48×48 Pixel - letzteres dann als Large XP Desktop Icon. Nach erfolgter Konvertierung bekommt man eine Vorschau auf alle Ebenen des Icons und einen Download-Button präsentiert. Das heruntergeladene Favicon in der 16×16/32×32 Pixel Version hat eine Größe von 4150 Byte.

favicongenerator.com

Auf favicongenerator.com kommt man nicht mit vielen Informationen in Berührung. Das muss ja nicht zwangsläufig schlecht sein. Im Gegenteil: hier geht es einzig und allein darum, ein Favicon aus einem vorhandenen Bild zu generieren und dieses dann in die Webseite zu integrieren. Es fehlen meiner Meinung aber Angaben zu den unterstützten Dateiformaten und zur maximalen Dateigröße. Das Resultat ist ein 16×16 Pixel und 1080 Byte großes Bild, welches nach Angaben meines Photoshop CS3 inkl. installiertem Favicon-Plugin kein reguläres Favicon ist.

Webmaster-Elite Favicon Generator

Eingebettet in ein Portal kommt der Favicon-Generator von Webmaster-Elite ebenfalls als reines Upload-Formular ohne viel Information. Nachdem ich mein Testbild hochgeladen habe, wird mir auf der Ausgabeseite eine Vorschau des Favicons als ico und als animiertes Gif angeboten. Der Download besteht aus einem Zip-Archiv, bestehend aus 2 Vorschaubildern, dem animierten Gif, dem eigentlichen Favicon und einer readme.txt. Das Favicon besteht lediglich aus der 16×16 Pixel Ebene, ist 1150 Byte groß und muss noch umbenannt werden.

Die Favicon Generatoren von favicon.cc

favicon.cc hat sich ganz der Generierung der kleinen Bilder im seltsamen Format verschrieben. Die Seite kommt sehr im web 2.0 Stil rüber und bietet neben einer (obligatorischen) Tag-Cloud auch eine Registrierung, über die ein Ranking verwirklicht wird. Unter Top Rated Icons kann man sowohl sehr ansprechende als auch überaus grässliche Beispiele sehen.
favicon.cc bietet sowohl das Hochladen als auch das Selberpixeln. Über die unterstützten Dateitypen und die maximale Dateigröße wird der Benutzer umfassend informiert. Bemerkenswert hierbei ist, dass man Dateien bis zu 4 MB hochladen kann. Es ist ebenfalls möglich auf die Art des Skalierens Einfluss zu nehmen. Hier kann entweder das Originalformat beibehalten oder auf ein Quadrat geschrumpft werden. Nach dem Upload hat man die Gelegenheit das Favicon manuell zu bearbeiten. Da zu den unterstützten Dateitypen auch das Ico-Format zählt, können hier also auch existierende Favicons optimiert werden. Nach dem Download stand mir das 16×16 Pixel Favicon mit einer Größe von 1406 Byte zur Verfügung.

Converticon

Im Stil eines Apple Apps erlaubt Converticon lediglich den Upload von Dateien im Ico und PNG Format. Nach dem Konvertieren wird zunächst das Originalbild angezeigt. Für mich etwas unverständlich und sinnlos. Nach dem Herunterladen des Icons wird klar, dass es sich bei Converticon nicht um einen Generator zum Erzeugen von Favicons handelt!!! Mein konvertiertes Icon hat 6 Ebenen (16×16 - 256×256 Pixel) und eine satte Dateigröße von 370070 Byte. Wer also die Ladezeit seiner Seiten vervielfachen möchte… Sicher: der Service ist nicht zum Generieren von Favicons gedacht. Andererseits wird das auch an keiner Stelle der Seite erwähnt. So wird converticon.com zum Beispiel bei Mister Wong auch mit Favicon getagged.

Favicontool

Das Uploadformular auf Favicontool befindet sich recht weit unten auf der ansonsten recht modern gestalteten Seite. Das Script wird im Übrigen auch für 19,99$ zum Verkauf angeboten. Laut eigenen Angaben kann man ein Bild jeder Größe zum Konvertieren hochladen. Wer möchte kann sich einen scrollenden Text erstellen lassen. Aus meinem Testbild wurde das Favicon, 2 Vorschaubilder und ein animiertes Gif erzeugt. Zusammen mit einer Textdatei werden die Bilder in einem Archiv zum Download angeboten. Das 32×32 Pixel Favicon ist 4268 Byte groß.

DeGraeve Favicon Generator

Steven DeGraeve bastelt seit 1999 Webtools. Dazu gehört auch sein Favicon Editor, mit dem sowohl über Bilderupload als auch über den Editor Favicons erstellt bzw. konvertiert werden können. Es können alle Dateitypen in allen Größen hochgeladen werden. Nach dem Upload bekommt man zunächst die Möglichkeit das Orginalbild zurecht zu schneiden. Aus dem Ausschnitt kann das Favicon konvertiert werden, das sodann in den Editor zur weiteren Bearbeitung geladen wird. Der Download geschieht dann über das Bild speichern unter… des Kontextmenüs. Das 16×16 Pixel Favicon hat eine Größe von 1406 Byte.

Favicon/Icon Generator und Online Editor

Das deutsch- und englischsprachige Online Tool www.favicon-generator.de funktioniert Im Grunde genau wie der zuvor beschriebene DeGraeve Generator. Es fehlt allerdings die Möglichkeit einen Bildausschnitt bestimmen zu können. Dafür wird hier in der Anleitung zum Erstellen der Referenz neben Link-Type (rel=”shorticon icon”) und Uri (href=”") auch der Content-Type (type=”image/x-icon”) angegeben. Das fehlt bei den anderen hier beschriebenen Generatoren. Mein 16×16 Pixel Favicon von Favicon-Generator ist 1150 Byte groß.

genfavicon

genfavicon ist ein Service in englischer, spanischer und portugiesischer Sprache. Möglich ist sowohl der Upload von einer vorgegebenen Url als auch von der eigenen Platte. Nach dem Upload wird der Bildausschnitt und die Größe festgelegt, wobei über ein Dropdown-Menü 16×16, 32×32, 48×48, 64×64 und 128×128 wählbar sind.
Das generierte 32×32 Pixel Favicon ist 4286 Byte groß.

favikon

Im Großen und Ganzen besteht kein großer Unterschied zum Service von genfavicon. Bei favikon verzichtet man allerdings auf die Auswahlmöglichkeit der Bildgröße und ist auf ein 16×16 Pixel Favicon beschränkt. In meinem Fall hatte das 1406 Byte. In 3 Schritten kommt der Besucher zu seinem Favicon und kann sich zudem den notwendigen Link-Tag (inkl. Angabe des Content-Types) für den Seitenheader kopieren.

Fazit

Bis auf die Ausnahmen Converticon und favicongenerator.com können mit allen der hier vorgestellten Generatoren einfach und schnell Favicons aus Bildern und Fotos von der eigenen Platte erstellt werden. Benutzer, die Favicons mit mehreren Ebenen konvertiert haben möchten, sind bei html-kit.com und Dynamicdrive an der richtigen Adresse. Wer im Nachhinein noch das ein oder andere Pixel verändern möchte ist mit www.favicon-generator.de und favicon.cc gut bedient. Animierte Favicons werden von vielen der Generatoren angeboten. Die 16×16 Pixel Favicons hatten eine Größe von 1 - 1,5 KB, die Favicons mit 2 Ebenen (16×16 und 32×32) waren zwischen 3,5 und 4,5 KB groß. Für eine hightraffic site macht das schon das ein oder andere Gigabyte Unterschied in der monatlichen Abrechnung.
Der Service von Converticon ist für Favicons aufgrund der dateigröße nicht zu empfehlen und bei favicongenerator.com scheint etwas schief zu laufen, weil das Icon kein ICO zu sein scheint.

Ein Jammer für Bochum

LexaT — Mon, 27 Oct 2008 15:35:06 +0000

Kürzlich im Skype-Chat:

F. P.
11:10 ohje
11:10 die baeume waren optisch das geilste ueberhaupt am 3eck
11:10 leute, die sowas entscheiden, sollten gehaengt werden. am letzten baum.

Dem ist an sich nix hinzuzufügen.

Das Mensch-Maschine-System

LexaT — Sun, 26 Oct 2008 05:23:19 +0000

Beim Stöbern in iPhoto stieß ich auf dieses Musterbeispiel an Produktergonomie. Früher waren die Dinge einfach übersichtlicher.

Conditional Comments

LexaT — Sun, 26 Oct 2008 02:23:19 +0000

Conditional Comments (CC) sind eine prima Sache, wenn es darum geht schnelle und flexible Browserweichen zu erstellen. Uns Webbastler stehen dazu einige Werte und Operatoren zur Verfügung. An Werten nutzen wir die verschiedenen Versionsbezeichnungen des Internet Explorers (IE 5, IE 5.0, IE 5.5, IE 6, IE 7).

Die Operatoren lassen zum Teil auch komplexere Ausdrücke zu:

Operator	Beispiel	Beschreibung
!	[if !IE]	NOT - der Nicht-Operator. Kehrt den nachfolgenden Ausdruck um. Das Beispiel schließt alle Versionen des Internet Explorers aus.
lt	[if lt IE 5.5]	Less Then - der Kleiner als Operator. Das Beispiel lässt nur den IE 5.0 zu.
lte	[if lte IE 5.5]	Less Then Equal- der Kleiner oder Gleich Operator. Das Beispiel lässt den IE 5.0 und den IE 5.5 zu.
gt	[if gt IE 5.5]	Greater Then - der Größer als Operator. Das Beispiel lässt den IE 6 und den IE 7 zu und schließt den IE 5.0 und IE 5.5 aus.
gte	[if gte IE 5.5]	Greater Then Equal - der Größer oder Gleich Operator. Das Beispiel lässt den IE 5.5, IE 6 und IE 7 zu. Lediglich der IE 5.0 wird ausgeschlossen.
()	[if !(IE 5.5)]	Subexpression Operator - Operator innerhalb eines Operators. Damit sind komplexere booleanische Ausdrücke möglich.
&	[if (gt IE 5.0)&(lt IE 7)]	AND - Der Und Operator. Das Beispiel lässt den IE 5.5 und den IE 6 zu.
\|	[if (lte IE 5.5)\|(IE 7)]	OR - Der Oder Operator. Das Beispiel schließt den IE 6 aus.
true	[if true]	Lässt immer durch.
false	[if false]	Schließt immer aus.

Es wird zwischen downlevel-hidden und downlevel-revealed unterschieden.

downlevel-hidden


Syntax: 	
Beispiel:

Während wir die downlevel-hidden Comments gerne einsetzen, um den verschiedenen Internet Explorer Versionen ein eigenes- meist zuätzliches - Stylesheet anzubieten, gibt es für die downlevel-revealed Comments nicht ganz so offensichtliche Einsatzmöglichkeiten. Hierbei geht es eben darum etwas vor dem Internet Explorer zu verbergen.

downlevel-revealed

Die nachfolgende Syntax ist nicht valide!


Syntax: 	 Kommentar/Anweisung 
Beispiel:	 nix für IEs

Die valide Syntax lautet:


Syntax: 	 Kommentar/Anweisung 
Beispiel:	 nix für IEs

Top 10 meiner meistgenutzten Mac Programme

LexaT — Fri, 24 Oct 2008 16:23:19 +0000

Mail

Ohne Email geht es nicht, obwohl ich mir das manchmal sehr wünsche. Seitdem ich vor 4 Jahren beruflich und privat fast ausschließlich Macs benutze, ist Mail das Programm meiner Wahl. Ich bin an sich sehr zufrieden, obwohl ich mit den Pre-Leopard-Versionen und auf dem Powerbook z.T. Performanceprobleme und Abstürze hatte.
iCal

Ohne digitalen Kalender, den ich nach Belieben synchronisieren kann, wäre ich aktuell ziemlich aufgeschmissen. Wichtig hierbei auch das Zusatzprogramm Spanning Sync, das mir das Führen von Teamkalendern (z.B. Firmentermine, Urlaubs- und Geburtstagskalender) ermögicht.
Skype

Mittlerweile der wichtigste Messenger für mich. Hat in der Teamarbeit echte Stärken, weil man die Kommunikation auch dann noch verfolgen kann, wenn man gar nicht online gewesen ist. Die Telefonfunktion nutze ich derzeit nicht so oft, aber das kann sich jederzeit ändern. Sehr nachteilig sind die Verzögerungen (Lag), die immer mal wieder vorkommen.
Firefox

Seit Leopard nutze ich Firefox wieder häufiger als Safari. Davor war das aufgrund der absolut unterirdischen Performance anders. Ich nutze möglichst wenige Plugins, aber Web Developer, Firebug, Search Status und Live HTTP Headers machen mir den Firefox erst so wertvoll.
Textmate

Wenn Textmate FTP-Funktionalität und Auto-Vervollständigung beherrschen würde, wäre es der perfekte Editor für mich. So ist er nicht ganz perfekt, aber je mehr ich mich in seine Möglichkeiten einarbeite, desto lieber wird er mir. Ganz selten mal, dass Textmate auf meinem Mac nicht läuft.
Vorschau

Ich bekomme viele PDF-Dokumente. Ich nutze deshalb Vorschau. Ich bin glücklich.
Office 2008 für Mac

Das funktioniert für meine nicht allzu gehobenen Ansprüche ganz gut. Ich beschäftige mich erst seit kurzer Zeit mit iWork und denke, dass es das Officepaket von Microsoft schon bald mehr oder minder aus meiner Top 10 verdrängen wird.
1Password

Mir tun all die leid, denen dieser absolut geniale Password-Manager nicht zur Verfügung steht. Bei der großen Anzahl meiner Passwörter kann ich mir kein unkomplizierteres Tool wünschen.
NetNewsWire

Ich habe Mail und Firefox und etliche andere Standalone-Programme als Feedreader versucht, bin aber schlussendlich immer wieder bei NetNewsWire gelandet. Ist mir einfach am sympathischsten.
iTunes

Ich höre beim Arbeiten eigentlich laufend Musik. Ich scrobble natürlich auch.

Die Bochumer Polizei kündigt an

LexaT — Wed, 22 Oct 2008 14:23:19 +0000

Am 24. und 25. Oktober wird hier in Bochum eine angemeldete Demonstration der NPD stattfinden. Selbstverständlich wird es zu diesem Anlass auch zahlreiche Gegenaktionen geben und selbstverständlich werden sich die Ordnungshüter auch wieder um das Grundrecht der Versammlungs- und Meinungsfreiheit verdient machen. Zudem müssen die Unbeteiligten beschützt werden und damit meint die Bochumer Polizei leider nicht den Schutz vor faschistischer Propaganda und offenem Aufruf zu Fremdenhass.

Neu ist für mich die Ankündigung der polizeilichen Maßnahmen per Postwurfsendung. Dank der Vernichtung von Baumbestand in der Kortumstraße war das auch die einzige Post, die uns heute erreicht hat. Es wird von Sperr- und Kontrollstellen sowie von der Einrichtung von Parkverboten geschrieben. Das alles beginnt natürlich schon am Freitag und die Polizei empfiehlt die öffentlichen Verkehrsmittel zu nutzen. Fein. Da muss ich mich also darum bemühen meine Arbeitsstelle zu erreichen, weil ein paar Rechtsradikale dem deutschen Volke ihre Meinung demonstrieren werden.

Ich bin nur froh, dass ich nicht so einen Mist genehmigen muss, weil der Politik bislang das Rückgrat fehlte, ein lange fälliges Verbot auszusprechen.

Wer mag: Hier die polizeiliche Ankündigung als PDF.