FILMSTARTS.de Suchplugin

Wenn ihr wie ich oft Infos zu Filmen im Netz sucht, gibt es dafür diverse Seiten. Der ein oder andere von euch benutzt vielleicht FILMSTARTS.de (im weiteren einfach nur Filmstarts genannt). Und je häufiger ihr die Seite besucht oder nach bestimmten Filmen suchen wollt, desto notwendiger wird ein Suchplugin für Firefox. Da Filmstarts aber sein Design und seine Seitenstruktur geändert hat, funktionieren die bisherigen Suchplugins nicht mehr richtig. Also habe ich mir eines dieser Plugins angepasst und teile es mit euch.

Klickt einfach auf folgenden Link und wählt dann in der Suchleiste von Firefox die neue Suchmaschine aus.

Das wars auch schon, mehr gibts nicht zu tun, viel Spaß beim Suchen.

Update: Es hatte sich noch ein Fehler eingeschlichen, der dazu führte, dass Umlaute in der Anfrage nicht ordentlich kodiert bei Filmstarts angekommen sind. Dieser Fehler ist jetzt behoben!

options verstecken ist gar nicht so einfach, auch nicht mit jQuery

Diese Woche musste ich auf Arbeit im Zusammenhang mit einem Projekt ein Formular umsetzen, dass eine Besonderheit hatte: Es bestand aus zwei Selectboxen, die voneinander abhängig waren. D.h. wenn man mit einer Selectbox etwas ausgewählt hat, sollten sich die Optionen der zweiten Selectbox ändern (wegfallen oder dazu kommen). Ich habe mir daraufhin mit jQuery eine Funktion geschrieben, die das für mich erledigt.

Ohne mir groß etwas dabei zu denken, nutzte ich die hide()-Funktion, die jQuery standardmäßig mitbringt. Alles funktionierte einwandfrei in Firefox und da ich davon ausgegangen bin, dass das JavaScript-Framework Cross-Browser-kompatibel ist, teste ich die Funktion nicht in anderen Browsern und kümmerte mich stattdessen erstmal um das Layout. Als alles fertig war, freute ich mich, rechnete meine Zeit ab und widmete mich anderen Tickets.

Gestern Mittag dann erhielt ich den Hinweis, dass die Auswahl der Selectboxen im IE7 nicht funktioniert. Gut dachte ich mir.. schaust es dir mal an.. und tatsächlich: egal was ausgewählt wurde, die zweite Selectbox blieb mit allen Optionen befüllt, es tat sich nichts.

Verdammter Internet Explorer!

.. schoss mir durch den Kopf. Also öffnete ich Opera, Chrome und Safari und testete das Formular dort – wieder nichts. In keinem Browser (außer Firefox) funktionierte die Auswahl. Langsam wurde ich etwas nervös..

Wie löse ich das Problem jetzt ohne viel Aufwand?!

Ich überlegte kurz und dann viel mir die Lösung ein, anstatt die option-Tags zu verstecken, musste ich sie nur deaktivieren. Also hab ich die hide()-Funktion mit attr(‘disabled’,'disabled’) ausgetauscht und schon gings. Yay, der Tag war gerettet!

Merke:

Niemals options versuchen zu verstecken, das funktioniert nicht in allen Browsern, einfach nur deaktivieren!

Wieder etwas dazu gelernt!

WP e-Commerce UTF-8 Bug

Wenn man einen Shop in seine WordPress-Installation integrieren will, führt wohl kaum ein Weg an WP e-Commerce vorbei. Trotz zahlreicher Schwächen ist es im Vergleich zu den anderen Plugins in den schier unendlichen Weiten des Plugin Directories das kleinere Übel.

Ein Bug, der mich einiges an Zeit kostete, war die falsche Ausgabe von Adressen mit Umlauten oder “ß” im Namen, was in Deutschland recht häufig der Fall ist (“Straße”). Die Adressen wurden richtig kodiert in die Datenbank gespeichert (darauf achten, dass sie auf UTF-8 gestellt ist) aber es wurden immer komische Zeichen wie ü, ö oder � ausgegeben.

Das Problem des Russen, betrifft alle Zeichen die außerhalb des Ami-Alphabets sind..

Nach einigen Rumgooglen (tolles Wort oder?) fand ich schließlich in einem russischen Forum die Lösung. Großer Dank geht dabei an die Übersetzungkunst von Google .

Der Threadersteller hatte genau das gleiche Kodierungsproblem – die Adressen wurden von WP e-Commerce nicht in UTF-8 ausgegeben. Die dargestellte Lösung behebt das Problem, alles was man tun muss ist eine Zeile im Plugin zu verändern.

In der Datei plugins/wp-e-commerce/wpsc-includes/checkout.class.php die Zeile 348:

1

$saved_form_data = htmlentities(stripslashes($_SESSION['wpsc_checkout_saved_values'][$this->checkout_item->id]), ENT_QUOTES);

mit folgendem Code ersetzen:

1

$saved_form_data = htmlentities(stripslashes($_SESSION['wpsc_checkout_saved_values'][$this->checkout_item->id]), ENT_QUOTES, 'UTF-8');

Und siehe da, die Adressen, Namen und Städte werden ordentlich, d.h. in UTF-8 kodiert, ausgegeben. Hoffe, das hilft einigen weiter.

IE9 Preview

Das ist sie also, die erste offizielle Vorschau auf den IE9. Microsoft hat gestern oder so das Programm zum Download freigegeben und erhofft sich damit viel Feedback, um das Produkt weiter zu verbessern – man hat also dazugelernt.

Mit dem neuen Internet Explorer hat Microsoft etliches vor, endlich will man zu den anderen Browsern aufschließen, sie sogar teilweise überholen. Warum auch nicht, bis der IE9 erscheint, werden sich auch die anderen Browser verbessert haben. Um erste Erfolge vorzuweisen, hat man gleich ein paar Statistiken und Demos auf die Startseite gepackt. Diese sind natürlich mit Vorsicht zu genießen aber im Großen und Ganzen kann man davon ausgehen, dass der Internet Explorer um einiges schneller geworden ist – besonders beim Verarbeiten von JavaScript und im Grafik-Rendering.

Gute Neuigkeiten

Nennen wir doch mal ein paar Fakten:

1. besteht Acid2
2. 55 Punkte in Acid3
3. alle CSS3 Selectoren werden unterstützt
4. Boder-Radius und RGBa wird unterstützt
5. Hardwarebeschleunigung für 2D Animationen
6. schnelles Javascript
7. ein bisschen HTML5 Support
8. Unterstützung für SVG

Das klingt zugegeben alles sehr verlockend und ich freue mich über die CSS3 Unterstützung, je mehr davon im endgültigen Code enthalten ist, desto besser. Hoffen wir, dass die Auflistung nicht die endgültige Feature-List bleiben wird und noch einige Dinge wie z.B. Box-Shadow, Text-Shadow und video-Support in der fertigen Version vorfinden werden.

Qualität der Preview Version

Die (nicht vorhandene) GUI des IE9.

Ich weiß, man sollte an eine frühe Alpha keine hohen Erwartungen stellen aber etwas mehr Mühe hätten sich die Typen aus Redmond schon geben können.. keine Adressleiste, keine Tabs.. Hallo?! Naja vielleicht bin ich auch nur von den Firefox Alphas verwöhnt aber so kann man den IE sicherlich nicht auf seine Alltagstauglichkeit hin testen.

Besonders nervig ist der Wegfall der Adresszeile, will man die Seite wechseln muss man über Page->Open ein Fenster öffnen, in dem man die URL eintragen kann – überflüssig zu sagen, dass das widerlichst und umständlich ist.

Adresszeile mal anders..

Außer dem Aussehen ist mir das Textrendering negativ aufgefallen. Es erinnert mich stark an das von Safari 3: Die Schrift sieht etwas matschig und unleserlich aus. Ich habe keine Ahnung, ob das so gewollt ist oder ob es nur ein böser Nebeneffekt der Hardwareunterstützung ist. Mal sehen, wie sich das weiterentwickelt.

Fazit

Alles ganz lustig und prima aber es bedarf doch noch etwas mehr als das, um bei den großen Jungs mitspielen zu können. Microsoft scheint mir aber auf dem richtigen Weg zu sein. Moderne Standards werden eingebaut und die Schnelligkeit wurde stark verbessert. Das ist aber nicht alles, Sicherheit, Privatsphäre und gute Bedienbarkeit sind mindestens genauso wichtig. Mal sehen, welche Antwort der IE9 zum Thema Erweiterungen parat haben wird.

Auf jeden Fall ist es ein Schritt in die richtige Richtung. Ich denke auch, dass Mircosoft noch viel Zeit in seinen neuen Browser investieren wird und er dadurch ein würdiger Nachfolger zum bereits recht guten IE8 darstellen kann. Wir werden sehen, was die Zeit bringt. Bis dahin viel Spaß mit der Vorabversion.

Strata 3.7 Nightly

Mit der gestern veröffentlichten zweiten Alpha von Firefox 3.7 bringt Mozilla einige Neuerungen ins Programm, dazu zählen unter anderem das placeholder-Attribut (auf das ich später noch genauer eingehen werde), Performance- und Security-Verbesserungen, CSS-Support für -moz-image-rect() sowie Änderungen am User Interface (UI). Letzteres äußert sich im Wegfall eines Navigationsbuttons. Stopp und Neuladen wurden zu einem Button verschmolzen. Browser wie Opera, Safari oder Chrome fahren schon lange auf dieser Schiene, nun zieht Firefox nach.

Neuer Look in Nightly Builds

Wer die täglich aktualisierten Nightly Builds benutzt, kann live miterleben, wie sich das Aussehen des Browsers nach und nach verändert. Das vor langer Zeit angekündigte Re-Design für Version 3.7/4.0 wird derzeit umgesetzt, befindet sich aber noch in einer recht frühen Phase. Im Moment sind die neuen Buttons schon integriert, Adress- und Suchleiste wurden ebenfalls verändert. Hier mal ein Bild zum Vergleich:

Oben: altes Design (3.0 - 3.6), Unten: neues Design (3.7a3pre vom 04.03.2010)

Ich bin gespannt wie es mit deutlich mehr Aero Glass aussehen wird. Wann es soweit sein wird, kann derzeit niemand genau sagen aber die Fortschritte sehen aus meiner Sicht schon ziemlich gut aus.

HTML5: Placeholder Attribut

Vielleicht könnt ihr euch noch an den Artikel jQuery One-Liners erinnern, speziell an den Teil mit dem Suchfeld. Der vorbelegte Inhalt verschwindet sobald man mit der Maus in das Feld klickt, bleibt es leer und man verlässt es wieder, wird das Feld erneut befüllt.

Genau dieses Verhalten wird durch das placeholder-Attribut nachgestellt. Allerdings braucht es dafür kein Javascript mehr, der Browser erledigt es ganz von allein. Hier ein Beispiel (Achtung: funktioniert nur mit Safari, Chrome und Firefox 3.7a2):

Eine ganz nette Sache, die auf meiner Seite zwar invalide ist (habe noch nicht auf HTML5 umgestellt), für die Zukunft aber ein nützliches Attribut darstellt.

Firefox 3.7a1

Dieser Artikel wurde mit der neuen Version verfasst.

Mozilla Developer Preview 3.7 Alpha 1 ist die offizielle Bezeichnung des Programms, das sich ganz ohne Probleme parallel zum “normalen” Firefox installieren und testen lässt. Derzeit ist alles noch auf Englisch und die meisten Add-ons sind wie immer nicht kombatibel. Abhilfe schafft nur der Add-on Compatibility Reporter, der zwar momentan selbst noch nicht kompatibel ist, aber funktioniert, wenn man ihn in Version 3.6 installiert.

Die erste Seite nach dem Start gratuliert uns zu unserer Entscheidung und erklärt kurz, was sich in der Alpha alles geändert hat. Demnach arbeiten die Entwickler an neuen CSS-Features (transition, image-rect) und Techniken wie SVG(-Animations) und WebGL, das es ermöglichen soll 3D-Szenen direkt im Browser rendern zu lassen. Diese Sachen befinden sich aber alle noch in einer frühen Phase und haben noch einen mehr oder weniger langen Weg bis zur vollständigen Implementierung vor sich. Trotz allem steigt die Punktzahl im Acid3-Test um zwei Punkte auf 96 Zähler.

Der Windows 7 – Support ist zurückgekehrt. Sowohl Tabvorschau als auch Jumplists (mit häufig besuchten Internetseiten) funktionieren meistens problemlos.

Über Firefox 3.7a1

Vom neuen Design für alle Betriebssysteme ist bislang noch recht wenig zu sehen, einzige Neuerung: Stop- und Reload-Button sind verschmolzen. Aber das ist nicht weiter verwunderlich, wurden doch erst vor kurzem die dazu nötigen Bugs gefiled. Möglich wäre auch, dass Mozilla bis zur Version 4.0 Anfang-Mitte nächsten Jahres damit wartet.

Social Bookmarks

Da ich kürzlich die Anfrage bekommen habe, wo ich denn meine Social Bookmarks (die kleinen Vierecke unter jedem Artikel) her habe, möchte ich kurz erklären, wie sie entstanden sind. Zuerst habe ich nach Plugins gesucht, die automatisch diese Bookmarks unter die Artikel setzt. Ich war mit keinem so richtig glücklich.. entweder waren die Icons nicht sonderlich hübsch oder der Effekt war nicht der, den ich wollte. Beim Googlen bin ich schließlich auf einen Blog gelandet, auf dem die Links zu bekannten Social Networks in WordPress-Artikel aufgelistet waren.

1
2
3
4
5
6
7
8
9
10
11

<ul id="socialbookmarks">
	<li><a id="delicious" rel="nofollow" href="http://delicious.com/post?url=<?php the_permalink(); ?>&amp;title=<?php echo urlencode(get_the_title($id)); ?>" title="Bookmark this post at Delicious">Delicious</a></li>
	<li><a id="digg" rel="nofollow" href="http://digg.com/submit?phase=2&amp;url=<?php the_permalink(); ?>" title="Submit this post to Digg">Digg</a></li>
	<li><a id="facebook" rel="nofollow" href="http://www.facebook.com/sharer.php?u=<?php the_permalink();?>&amp;t=<?php echo urlencode(get_the_title($id)); ?>" title="Share this post on Facebook">Facebook</a></li>
	<li><a id="furl" rel="nofollow" href="http://furl.net/storeIt.jsp?t=<?php echo urlencode(get_the_title($id)); ?>&amp;u=<?php the_permalink(); ?>" title="Share this post on Furl">Furl</a></li>
	<li><a id="studivz" rel="nofollow" href="http://www.studivz.net/Link/ExternLink/Url/?u=<?php the_permalink();?>&amp;desc=<?php echo urlencode(get_the_title($id)); ?>&amp;prov=<?php bloginfo('name'); ?>" title="Share this post on StudiVZ">StudiVZ</a></li>
	<li><a id="stumbleupon" rel="nofollow" href="http://www.stumbleupon.com/submit?url=<?php the_permalink(); ?>&amp;title=<?php echo urlencode(get_the_title($id)); ?>" title="Share this post at StumbleUpon">StumbleUpon</a></li>
	<li><a id="technorati" rel="nofollow" href="http://technorati.com/faves?add=<?php bloginfo('url'); ?>" title="Add <?php bloginfo('name'); ?> to your Technorati favorites">Technorati</a></li>
	<li><a id="twitter" rel="nofollow" href="http://twitter.com/home?status=<?php echo urlencode("Currently reading: "); ?><?php the_permalink(); ?>" title="Share this article with your Twitter followers">Twitter</a></li>
	<li><a id="reddit" rel="nofollow" href="http://reddit.com/submit?url=<?php the_permalink(); ?>&amp;title=<?php echo urlencode(get_the_title($id)); ?>" title="Share this post on Reddit">Reddit</a></li>
</ul>

Diese hab ich mir dann in die single.php meines Themes kopiert. Die Links waren jetzt da.. es fehlten noch die Icons. Nach einer kurzen Suche auf Iconfinder bin ich fündig geworden: Das Aquaticus Set hat alle wichtigen Social Networks, die ich benötigte. Nur ein einziges war nciht dabei: studiVZ, das Bookmark musste ich mir dann noch schnell selber basteln. Als Vorlage hab ich einfach eines der anderen Icons genommen.

Icons des Aquaticus Sets als CSS Sprite

Die Icons sollten auf den Seiten in schwarz-Weiß dargestellt sein und als Effekt wollte ich, dass sie farbig werden, wenn man mit der Maus drüber fährt. Dazu habe ich alle Icons samt Schwarz-Weiß-Version in eine Grafik gepackt und den Rest mit CSS erledigt (Stichwort: CSS Sprites).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

#socialbookmarks {
	clear:both;
	height:48px;
	list-style:none;
	margin:20px;
}
#socialbookmarks li {
	float:left;
	margin-left:8px;
}
#socialbookmarks a {
	background-image:url(socialbookmarks.png);
	background-repeat:no-repeat;
	display:block;
	height:0;
	outline:none;
	overflow:hidden;
	padding-top:48px;
	width:48px;
}
#delicious {background-position:0 bottom;}
#digg {background-position:-48px bottom;}
#facebook {background-position:-96px bottom;}
#furl {background-position:-144px bottom;}
#studivz {background-position:-192px bottom;}
#stumbleupon {background-position:-240px bottom;}
#technorati {background-position:-288px bottom;}
#twitter {background-position:-336px bottom;}
#reddit {background-position:-384px bottom;}
#delicious:hover {background-position:0 0;}
#digg:hover {background-position:-48px 0;}
#facebook:hover {background-position:-96px 0;}
#furl:hover {background-position:-144px 0;}
#studivz:hover {background-position:-192px 0;}
#stumbleupon:hover {background-position:-240px 0;}
#technorati:hover {background-position:-288px 0;}
#twitter:hover {background-position:-336px 0;}
#reddit:hover {background-position:-384px 0;}

Wenn euch das hier zuviel ist, könnt ihr euch auch einfach eine ZIP mit den ganzen Daten runterladen: social_bookmarks.zip

Wie es im Live-Betrieb aussieht, seht ihr ja gleich etwas weiter unten..

Mitunter kann man sich an einige Ereignisse, die auf einer Seite im Laufe der Zeit passieren, erinnern. Je mehr man schreibt und veröffentlicht, desto wahrscheinlicher ist es allerdings, dass man den Überblick verliert und irgendwann nicht mehr weiß, wann welcher Artikel welchen Ausschlag auf dem Google Analytics Graphen zu verantworten hatte.

Damit dieser Fall nicht mehr eintritt, hat Google nach und nach alle Analytics Accounts mit dem neuen Annotation-Feature ausgestattet. Das erlaubt jedem Nutzer, für jeden Tag auf dem Graphen eine kleine Notiz zu verfassen.

Google Analytics erlaubt nun Anmerkungen zu verfassen

Für viele sicherlich ein nützliches Feature.

Endlich ist es soweit, Mozilla gibt den Firefox 3.6 für alle frei.

Firefox 3.6, Codename Namoroka, bringt viele Neuerungen, die uns dabei helfen schneller, sicherer und schöner durchs Web zu surfen. Mozilla gibt an, dass 3.6 im Bereich der Javascript-Verarbeitung noch einmal ca. 20% schneller als die Vorgängerversion 3.5 geworden ist. Außerdem wurden Lade- und Reaktionszeiten verkürzt, die sich im direkten Vergleich zu 3.5 deutlich bemerkbar machen (hab hier nen Dualcore mit Win7 und ich merk den Unterschied).

Zum Thema Sicherheit gibts neben den üblichen Bugfixes einen Sicherheitscheck für Plugins. Auf der Plugin Check – Seite von Mozilla werden die installierten Plugins durchleuchtet und auf Updates geprüft. Steht ein solches zur Verfügung, wird einem direkt ein Downloadlink angeboten. Weiterhin schreibt es Firefox Drittanwendern nun vor, wohin Plugins zu installieren sind. Frühere Probleme mit Microsoft-Plugins, die sich nicht deinstallieren ließen, führten zu diesem Schritt.

Firefox 3.6 mit ausgeblendeter Menüleiste und Bienchen-Personas

Durch Personas, ehemals ein Plugin von Mozilla Labs, kommt ein Hauch von Individualismus auf jeden Rechner. Personas erlaubt es, mit nur einem einzigen Klick, kleine Themes zu installieren. Mittlerweile gibt es schon über 30.000 Personas zu allen möglichen Themengebieten, da ist sicher für jeden etwas dabei.

Auch an die Webentwickler hat man gedacht. Neben den eher unbedeutenden Webfont-Format WOFF, unterstützt Firefox 3.6 jetzt noch mehr neue CSS3-Anweisungen. Allen voran background-size, background-gradient und multiple backgrounds, die ich demnächst mal testen werde. Das mit HTML5 kommende video-Tag wurde erweitert und erlaubt nun die Wiedergabe in Vollbild und das Einbinden eines Vorschaubildes.

Man kann viel über das aktuelle Release sagen, aber bestimmt nicht, dass es schlecht ist. Über die Personas-Funktion kann man sich zwar streiten aber ich glaube der Code dafür war minimal und fällt nicht ins Gewicht. Außerdem soll mit Version 3.7 ein weiteres Mozilla Labs Projekt den Weg in den Core finden, die Rede ist natürlich von Weave (ich benutzte es jetzt schon und muss sagen, es läuft ganz gut). Mozilla hat auf jeden Fall ein sehr solides und schnelles Tool zum Arbeiten und Spaß haben herausgebracht und ich glaube das allein, verdient Anerkennung (besonders, da der Browser auch noch kostenlos ist).

Aber genug geredet, downloadet, testet und beurteilt selbst!

PS: Ach ja, man kann jetzt die Menüleiste ausblenden und neue Tabs öffnen sich neben dem Ursprungs-Tab.

Wie heute Abend bekannt gegeben wurde, ist ab sofort die Version 1.5 des beliebten Entwicklertools Firebug zum Download freigegeben. Firebug ist seit seiner Entstehung das Werkzeug für jeden Webentwickler. Die neue Version verspricht mehr Stabilität, neue Features, weniger Bugs und funktioniert ab Firefox 3.5.

Laut John J. Barton, Mitarbeiter bei IBM und derzeitiger Chefentwickler von Firebug, hat das Team diesmal besonderes Augenmerk auf die Qualität gerichtet. Neue Features und Usability-Verbesserungen wurden in insgesamt 36 Alphas und Betas getestet, sodass nahezu alle Bugs beseitigt werden konnten. Der offizielle Downloadweg über das Add-on-Verzeichnis von Mozilla wird erst ab nächster Woche möglich sein. Alle die jetzt schon die 1.5 probieren wollen, klicken auf folgenden Link.

Firebug 1.5 Installieren

Zu den Neuerungen gehören unter anderen:

• verbesserter Inspector: höhere Zuverlässigkeit, Quick Info Box, Image Map Inspector
• neuer Tab “Berechnet”, zeigt berechnetes CSS in einer Übersicht an
• :hover und :active Pseudoklassen werden besser unterstützt
• DOM Knoten im HTML-Tab können mit Doppelklick geöffnet/geschlossen werden
• Umschalten zwischen kurzer und ausführlicher Schreibweise von CSS Code
• Break on Mutate, Haltepunkte für HTML
• diverse Bugfixes

Firebug in einem neuen Fenster geöffnet

Seit knapp zwei Wochen ist auch die Enwicklung an der nächsten Version (1.6) im Gange. Im Moment kann man sich die dritte Alpha herunterladen und testen. Solltet ihr Bugs finden, meldet sie doch am besten im Bugtracker.

Update: Sieht so aus, als hätte der Webauftritt von Firebug ein neues Design spendiert bekommen.

Viel Spaß beim Entwickeln und Debuggen!