Für alle, die es noch nicht mitbekommen haben: Seit heute kann man den neuen Mozilla Firefox 3. Mozilla möchte dabei einen neuen Rekord aufstellen. Also mitmachen und die neue Version herunterladen.

Heute bin ich per Zufall auf ein nützliches Addon für den Firefox gestossen. Es nennt sich FxIF und es zeigt in den Eigenschaften eines Bildes die Exif Daten an. Das heisst man kann ein Bild im Firefox rechtsklicken und dann Eigenschaften anwählen. Im nun geöffneten Fenster werden nun zusätzlich noch die Exif Daten des Bildes angezeigt, sofern vorhanden. Ich finde das eine wirklich praktische Sache, denn ich bin schon ab und zu über ein Bild gestolpert bei dem ich mich gefragt habe, wie lange hier die Belichtungszeit war, oder welche Brennweite benutzt wurde.
Und so sieht das dann aus:

Über Falki bin ich wieder auf den Dienst Browsershots gestossen. Jeder, der schon mal eine Homepage erstellt hat kennt das Problem wohl. Man hat das Design fertig gestellt und schaut es dann in einem anderen Browser an. Und es sieht völlig anders aus.
Bei privaten Homepages ist das ja nicht so gravierend, aber Firmen Homepages sollten doch in jedem Browser gleich aussehen. Und valides (X)HTML und CSS garantiert ja auch nicht, dass die Homepage überall gleich aussieht (IE).
Nun kann man ja nicht jeden Browser auf dem Computer installiert haben und zudem gibt es ja auch noch Darstellungs-Unterschiede im Firefox unter Windows und Linux. Nicht zuletzt auch wegen den verschiedenen Schriftarten.

Browsershots ermöglicht es einem zu sehen, wie eine Homepage in verschiedenen Browsern aussieht. Einfach die URL eingeben und die gewünschten Browser auswählen. Alle momentan populären Browser stehe zur Verfügung. IE, Firefox, Opera, Safari und das auch unter Windows, Linux und Mac OS.


Ich habe meine Seite natürlich auch getestet und bin wirklich zufrieden mit dem Ergebnis. Sogar im IE 6, der ja nicht gerade für seine CSS Kompatibilität bekannt ist, sieht die Seite sehr gut aus. Nicht zuletzt dank dem IE 6 CSS hack.


Der einzige Browser, in dem es überhaupt nicht gut aussieht ist der IE 5. Allerdings mache ich da keine grossen Aufwände mehr, damit die Seite auch dort gut aussieht. Sehr viele Benutzer sind mit dem IE 5 ja nicht mehr unterwegs.
Man achte auf die Navigation

Wie schonmal erwähnt arbeite ich momentan an einem neues Design für die Homepage. Das Grunddesign steht momentan und ich bin auch wirklich damit zufrieden. Und auf etwas bin ich besonders stolz. Die Seite sieht im Firefox und Opera unter Linux und Windows genau gleich aus. Eigentlich keine grosse Kunst, aber das besonders schöne: Auch im Internet Explorer 7 wird die Seite korrekt angezeigt. Der Grund warum ich IE 7 und nicht einfach IE schreibe, ist eigentlich der Grund warum ich diesen Beitrag schreibe. Im IE 6 sieht es nicht mehr so rosig aus. Die Seite sollte eigentlich zentriert sein, aber im IE 6 klebt sie schön am linken Rand. IE 6 und CSS verträgt sich leider nicht so gut.

Die neue Seite ist ähnlich aufgebaut, wie die jetzige. Oben ein Header, danach das Menu und dann auf der linken Seite eine Navigation und rechts daneben der Inhalt. Aufs gröbste gekürzt sieht der Code so aus:

<div id="main">
    <div id="navLeft">
        Navigation
    </div>
    <div id="content">
        inhalt
    </div>
</div>

Nur mit HTML kommt man da natürlich nicht so weit, also braucht man auch noch etwas CSS Code:

#main {
    width:                   745px;
    margin-top:              5px;
    margin-bottom:           0px;
    margin-left:             auto;
    margin-right:            auto;
    }

#navLeft {
    margin-left:             0px;
    width:                   160px;
    float:                   left;
    }

#content {
    margin-left:             165px;
    width:                   580px;
    }

Grundsätzlich ist es derselbe Code wie bei dieser Seite, nur hat der Container #main eine feste Breite und ist zentriert, oder sollte es zumindest sein. Wie gesagt funktioniert dieser Code im Firefox, Opera und IE7 wunderbar, nur im IE 6 ist die Seite nicht zentriert. Der Container wird ja mit den Elementen margin-left:auto; und margin-right:auto; zentriert. Nur scheint das im IE 6 nicht zu funktionieren.
Kennt da jemand eine andere, funktionierende Lösung? Idealerweise XHML und CSS valide?

Nun habe ich es endlich geschafft. Am Mittwoch ist die bestellte 160 GB Festplatte für mein Notebook gekommen. Gestern habe ich die alten Daten nochmals gesichert und dann Ubuntu 7.04 Feisty Fawn auf der neuen Platte installiert. Die Installation ist "Bubi einfach" und im Gegensatz zu der Server Version auch etwas grafischer.
Da ich unter Windows auch schon den Firefox und Thunderbird genutzt habe, fällt mir die Umstellung hier nicht schwer. Mails musste ich keine rüber kopieren, IMAP forever.
Kleinere Probleme hatte ich mit der ganzen Multimedia Sache. MP3 kann ich inzwischen hören, auch mein IPod wird von Amarok anstandslos erkannt. Mit MPG und AVI Filmen happert es momentan aber noch. Den Ton höre ich, aber ich habe kein Bild.
Ich bin mir jetzt auch noch nicht sicher, wie ich die Problematik mit dem Windows XP lösen soll. Ich bin immer noch auf einige Programme angewiesen, die auf Windows angewiesen sind. Zum Beispiel SportTracks. Zur Auswahl stehen Dualboot oder VirtualBox. Eigentlich tendiere ich momentan mehr zu VirtualBox, ich weiss aber nicht, wie zuverlässig das läuft. Vor allem auch wenn man dann mal ein Spiel wie GTA San Andreas oder C&C Generals laufen lassen will.

Bisher bin ich mit Ubuntu aber mehr als zufrieden. Das meiste funktioniert ohne Probleme und wenn man XGL noch einschaltet, sieht es noch besser aus als Vista ;) Zum Schluss noch ein Printscreen:

Nun habe ich zuhause auch mal auf den Firefox 2.0 umgestellt. Im Geschäft nutzte ich schon lange die neue Version, zuhause aber noch die alte 1.5er Version. Hauptsächlich wegen Addons die mit der neuen Version nicht funktionieren.
Nun habe ich aber doch die neuer Version installiert und kann nun einige Addons nicht mehr nutzen. Am meisten vermisse ich das Addon Session Saver .2, welches alle Tabs wieder öffnete, die man beim letztes mal offen hatte. Ich fand das sehr praktisch.
Einige Dinge musste ich aber trotzdem noch umstellen. Zum einen funktionierte die Accesskey nur noch mit Shift + Alt + key. Wie man das umstellt habe ich ja schon mal beschrieben.
Zudem will ich nicht bei jedem Tab einen "schliessen" Button. Einmal auf der Rechten Seite reicht aus. Dazu einfach in der about:config die Eigenschaft browser.tabs.closeButtons von 1 auf 3 umstellen.
Schlussendlich gibts noch einen Trick, wie man mehrere Startseiten definieren kann. Ich hab standardmässig immer meine Homepage und den Google Reader offen. Dazu muss man bei der Startseite nur folgendes eingeben:

blog.t-error.ch|google.com/reader/

Mehrere Startseiten werden einfach mit einem | getrennt und jede Seite wird dann in einem eigenen Tab geöffnet.

Dank dem Attribut accesskey kann man HTML Elemente wie Links, Inputfelder usw. ganz einfach über die Tastatur ansteueren. Mit dem Drücken von Alt und dem jeweiligen Buchstaben wird das Element aktiviert. Im Firefox 2.0 kommt werden diese Accesskeys aber vom Menu übersteuert. Mit Alt + H kommt man nicht zum Element mit dem Accesskey H, sondern zur Hilfe.
Nun kann man sich entweder umgewöhnen ohne Alt + Shift + H drücken oder die folgenden Einstellungen im Firefox vornehmen.
In der Adresszeile about:config eingeben.
ui.key.chromeAccess auf 5 und ui.key.contentAccess auf 4 ändern.
Nun kann man das Menu mit Alt + Shift + * ansteuern und die Element auf der Webseite mit Alt + *

Mission erfolgreich.

Dass man zum Suchfeld im Firefox und IE noch zusätzliche Seiten hinzufügen kann ist jas nichts neues. In letzter Zeit haben Markus Baumi und BloggingTom darüber berichtet.
Im Mozilla Development Center findet man eine schöne Anleitung, wie man so ein OpenSeach Plugin erstellt. Man kann es natürlich auch von jemand anderem klauen und anpassen.

Was ich noch interessant finde und was in den oben genanten Beiträgen nicht erwähnt wird, ist dass man, zumdindest im Firefox, "Supporting search suggestions" einblenden kann. Also dasselbe, dass man schon von Google kennt. Wenn man einen Suchbegriff eingibt, werden einem passende Vorschläge angezeigt.
Das zu realisieren ist nicht wirklich schwierig. Im XML File wird eine neue Zeile eingefügt, welche zu einer Datei zeigt, die JSON Daten zurückgibt. Und diese Daten werden vom Firefox dann angezeigt.

Die genannte Zeile sieht so aus:

<Url type="application/x-suggestions+json" template="http://search.t-error.ch/?q={searchTerms}&type=json"/>

Das aufgerufene Script muss nun alle möglichen Vorschläge anzeigen. Ich habe da auf die Tags zurückgegriffen und zeige sie nun sortiert nach der Anzahl an.
Eine Suche nach link zeigt nun das folgende an:

["link",["linktipps","linkchecker","linkification","links"]]

Im Firefox sieht das dann so aus:


Eine offizielle Anleitung (Englisch) gibt es im MDC

Anmerkung: Meine Suchseite ist noch nicht perfekt. Ich habe sie hauptsächlich erstellt, um die Searchplugins zu testen.

Adblock kennt inzwischen ja eigentlich jeder Firefox User.
Ich möchte hier mal meine Filter-Liste veröffentlichen, vieleicht kann sie jemand anders auch brauchen, oder hat Ergänzungen dazu.

[Adblock]
*/ad/*
*/ads/*
*/banner/*
*adbutler*
*adition.com*
*adition.net*
*adserv*
*adtech*
*annonce*
*banners*
*bs*.gmx.*
*doubleclick*
*ebayrelevancead*
*fastclick*
*fastklick*
*gator*
*googlesyndication*
*indieclick.com*
*mediavantage.de*
*tradedoubler.com*
*tribalfusion.com*
http://ad.adition.net/*
http://adimg.uimserv.net/*
http://image.adition.net/*

Download hier.

Importieren kann man die Listen in den Preferences unter Adblock-Optionen -> Filter importieren

Ich habe eine kurze Beschreibung und einige Bilder von den Firefox Extensions zusammengestellt. Ergänzungen sind natürlich gerne in den Kommentaren willkommen.
Achtung: Die Extensions wurden unter Firefox 1.5 getestet. Die meisten funktionieren ohne Probleme auch im Firefox 2. Ich habe aber noch die Versionsangeben angegeben. Also vor dem Installieren darauf achten.

Eine Übersicht

---

Adblock

Adblock ist die wohl bekannteste Extension für Firefox, die unerwünschte Werbung blockt. Mit einfachen Regeln kann man Banner, JavaScripts usw. blockieren.


Versionen: alle
download

---

del.icio.us

del.icio.us ist ein Dienst mit dem man Bookmarks online speichern kann. Die Extension erlaubt einfaches hinzufügen von Seiten in diese Bookmarks.


Versionen: 1.07 oder neuer
download

---

FireFTP

Ein integrierter FTP-Client im Browser. So kann man, ohne eine zusätzliche Applikation zu starten Dateien auf/von FTP Server kopieren.


Versionen: 1.5 - 2.0.0.* ALL
download

---

GeoURL

Zeigt in der Statusleiste ein kleines Icon an, das aktiviert wird, wenn eine Webseite GeoTags gesetzt hat. Mit einem Klick auf das Icon kann man auswählen, wie man den Ort angezeigt haben will.



Versionen: 1.5 - 2.0.0.* ALL
download

---

Html Validator

Zeigt in der Statusleiste an, ob der Quellcode einer Webseite valide ist. Zudem werden bei der Ansicht des Sourcecodes die Fehler hervorgehoben.



Versionen: 1.0 - 2.0.0.* Linux, Windows
download

---

IE Tab

Ermögloch das wechseln der Browserengine innerhalb des Firefox Fensters. So kann man zum Beispiel mit dem Firefox Windowsupdates machen, oder testen wie die eigene Seite im IE aussieht.


Versionen: .5 - 3.0a2 Windows
download

---

LinkChecker

Mit einem Klick kann man überprüfen, ob die Links auf einer Webseite noch gültig sind oder ins leere führen.


Versionen: ???
download

---

Linkification

Wandelt nicht verlinkte Links automatisch in klickbare Links um. http://www.t-error.ch sieht mit Likification aus wie ein normaler Link.


Versionen: 1.0 - 3.0a2 ALL
download

---

Reveal

Reveal zeigt kleine Screenshots der Webseiten an, wenn man auf Zurück oder Weiter klickt. Dadurch findet man Webseiten, auf denen man schon war viel einfacher.


Versionen: 1.5 - 1.5.0.* ALL
download

---

Searchstatus

Zeigt in der Statusleiste den Googlepagerank und die Wertung von Alexa an.



Versionen: 1.0 - 2.0.0.* ALL
download

---

SessionSaver .2

Stellt alle Tabs wieder so her, wie man den Browser geschlossen hat. Auch bei einem Absturz sind alle Tabs wieder da.


Versionen: 0.9 - 1.6 ALL
download

---

Tails Export

Ermöglich das einfache Exportieren von Microformats auf Homepages.


Versionen: 1.5 - 1.5.0.* Windows
download

---

Layerblock

Neuerdings werden immer öfter Layers verwendet um Werbebotschaten an den Mann und die Frau zu bringen, da man dies nicht so einfach blockieren kann konnte. Mit Layerblock ist das kein Problem mehr. Installieren und man muss sich nicht mehr über die Lästige Layerwerbung ärgern.


Versionen: 1.5 oder neuer
download

---

Web Developer

Mit dieser Extension kann man ganz sich ganz einfach einen Überblick über den Aufbau einer Seite verschaffen. Man kann aber auch Bilder, Styles usw. ausblenden.



Versionen: 1.0 - 2.0.0.* ALL
download