<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Norman&#039;s Blog &#187; Erweiterung</title>
	<atom:link href="http://www.normansblog.de/tag/erweiterung/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.normansblog.de</link>
	<description>News über CSS, jQuery, Firefox und andere Browser sowie aktuelle Kinofilme.</description>
	<lastBuildDate>Fri, 21 Sep 2018 13:18:54 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.1.4</generator>
		<item>
		<title>Firefox 4 &#8211; Was hat sich geändert?</title>
		<link>http://www.normansblog.de/firefox-4-was-hat-sich-geaendert/</link>
		<comments>http://www.normansblog.de/firefox-4-was-hat-sich-geaendert/#comments</comments>
		<pubDate>Wed, 23 Mar 2011 19:53:38 +0000</pubDate>
		<dc:creator>Norman</dc:creator>
				<category><![CDATA[Web]]></category>
		<category><![CDATA[Browser]]></category>
		<category><![CDATA[Erweiterung]]></category>
		<category><![CDATA[Firebug]]></category>
		<category><![CDATA[Firefox]]></category>
		<category><![CDATA[Mozilla]]></category>
		<category><![CDATA[Update]]></category>

		<guid isPermaLink="false">http://www.normansblog.de/?p=2808</guid>
		<description><![CDATA[Firefox 4 ist endlich da! Hurra! Nach über einem Jahr Alpha- und Beta-Phase hat Mozilla gestern erfolgreich seinen längst überfälligen Firefox 4 released! Das Äußere wurde komplett umgekrempelt, unter der Haube hat sich einiges getan und die Featureliste ist lang. Ich will euch zeigen, was genau man als ausgefuchster Langzeitnutzer (Wortspiel har har) oder Neuein- [...]]]></description>
			<content:encoded><![CDATA[<p>Firefox 4 ist endlich da! Hurra! <img src='http://www.normansblog.de/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
<p><a href="http://www.normansblog.de/firefox-4-was-hat-sich-geaendert/"><img src="http://www.normansblog.de/wp-content/uploads/2011/03/firefox_4_logo.png" alt="Firefox 4 Logo" title="Firefox 4 Logo" width="150" height="188" class="alignright size-full wp-image-3324" /></a> Nach über einem Jahr Alpha- und Beta-Phase hat Mozilla gestern erfolgreich seinen längst überfälligen <a href="http://blog.mozilla.com/blog/2011/03/22/mozilla-launches-firefox-4-and-delivers-a-fast-sleek-and-customizable-browsing-experience-to-more-than-400-million-users-worldwide-2/trackback/">Firefox 4 released</a>! Das Äußere wurde komplett umgekrempelt, unter der Haube hat sich einiges getan und <a href="http://www.mozilla.com/en-US/firefox/features/">die Featureliste ist lang</a>. Ich will euch zeigen, was genau man als ausgefuchster Langzeitnutzer (Wortspiel har har) oder Neuein- bzw. Umsteiger von der neuen Version so zu erwarten hat und welche Auswirkungen sie speziell für erfahrene Nutzer hat.</p>
<p><span id="more-2808"></span></p>
<p>Die Jungs und Mädchen von Mozilla haben sich einiges einfallen lassen, um so einen großen Release auch gebührend zu feiern. Unter anderem hat man einen <a href="http://glow.mozilla.org/">schönen Download-Zähler</a> gebaut, der anzeigt wie viel Downloads pro Minute und von welchem Fleck auf der Erde diese getätigt werden.</p>
<div id="attachment_3328" class="wp-caption aligncenter" style="width: 520px"><img src="http://www.normansblog.de/wp-content/uploads/2011/03/mosaik.jpg" alt="Firefox Mosaik" title="Firefox Mosaik" width="500" height="189" class="size-full wp-image-3328" /><p class="wp-caption-text">Firefox Mosaik</p></div>
<p>Auch für Twitter hat man etwas ganz Spezielles gebaut. Jeder, der den Hashtag <code>#fx4</code> tweetet, wird kurzfristig als eine Kachel in einem großen Firefox-Mosaik dargestellt. Man kann nach sich und anderen suchen und bekommt dann die jeweilige Kachel mit dem Tweet angezeigt &#8211; lustige Idee. <img src='http://www.normansblog.de/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
<h3>Geschwindigkeit</h3>
<p>Ein großer Punkt auf der Agenda war die Geschwindigkeit in allen Bereichen zu verbessern. Dazu hat man bspw. an der Startzeit geschraubt, die bei mir bei 8s (kalt) und und ca. 1,5s (warm) liegt. Das ist etwas mehr als doppelt soviel wie Chrome. Hier hat Firefox noch Potential nach oben und Mozilla weiß das auch, Geschwindigkeit und Leichtigkeit bleiben die wichtigsten Punkte für die Zukunft. Weiterhin werkelt neben Gecko 2.0, dem ein schneller HTML5-Parser verabreicht wurde, noch die blitzschnelle JavaScript Engine <a href="http://blog.mozilla.com/dmandelin/2010/09/08/presenting-jagermonkey/">JägerMonkey</a>. Besonders auf JavaScript-lastigen Seiten wie Twitter und Facebook ist ein spürbarer Unterschied auszumachen. Wer Bock auf Benchmarks hat, kann sich auf <a href="http://www.mozilla.com/en-US/firefox/performance/">firefox.com/performance</a> den Unterschied zur 3.6 anschauen.</p>
<p>Außerdem gibt es noch die Hardwarebeschleunigung, die ähnlich wie im IE9 und Chrome 10 Webinhalte unter Benutzung der GPU auf die Sprünge helfen soll. Vorrangig geht es dabei um Canvas-Inhalte (Spiele), Scrollen von Webseiten und dem Anschauen von Videos. Damit einher geht auch das veränderte Schriftbild, das den meisten am Anfang etwas seltsam vorkommen wird. Ohne jetzt zu sehr in die Tiefe gehen zu wollen, verweise ich euch auf diesen <a href="http://www.zdnet.de/software_programme_loesungen_fuer_unternehmen_unscharfe_fonts_im_browser_die_probleme_von_directwrite_story-20000001-41539288-1.htm">Artikel über DirectWrite</a> (5&nbsp;Seiten), der schön erklärt, warum wieso und überhaupt. Nur soviel sei gesagt: Es ist nicht schlecht und man gewöhnt sich relativ schnell daran. Microsoft arbeitet wohl auch an Verbesserungen dahingehend.</p>
<h3>User Interface + Customize = User Experience!</h3>
<p>Der zweite große Punkt ist die Frage, wie man Firefox um sinnvolle Funktionen erweitern kann, um den Nutzern ein bestmögliches Surferlebnis zu gewährleisten. Dazu hat man sich ALLERHAND lustige Sachen ausgedacht, ich werde mal einige vorstellen und zu jedem einen kleinen Kommentar verfassen..</p>
<h4>Tab Management</h4>
<p>Alle Tabs befinden sich jetzt <em>oberhalb der Lesezeichen- und Adresstoolbar</em>. Unter Windows Vista und 7 schließen sie dadurch (wenn das Fenster maximiert ist) bündig mit dem Fensterrand ab. Unter Windows XP, Mac OS und Linux ist das nicht immer der Fall. Zwar sind auch hier die Tabs oben, es ist aber immer noch eine Titelleiste vorhanden. Vorteil ist, dass man Tabs besser trifft, wenn man die Maus einfach nur schnell nach oben schiebt. Kleiner Nachteil besteht für Leute, die neue Tabs durch einen Doppelklick im Tabstrip geöffnet haben. Diese Funktion gibt es nicht mehr, es ist jedoch möglich mit dem Neuen-Tab-Button (Tab mit dem großen &#8220;Plus&#8221; drauf) ODER über Mittelklick, also einen Klick auf das Mausrad, neue Tabs zu erstellen.</p>
<div id="attachment_3331" class="wp-caption aligncenter" style="width: 514px"><a href="http://www.normansblog.de/wp-content/uploads/2011/03/app_tabs.jpg"><img src="http://www.normansblog.de/wp-content/uploads/2011/03/app_tabs.jpg" alt="App-Tabs, Tabs On Top" title="App-Tabs, Tabs On Top" width="494" height="139" class="size-full wp-image-3331" /></a><p class="wp-caption-text">App-Tabs und Tabs On Top im Einsatz (Windows 7)</p></div>
<p>Dazugekommen sind sogenannte <em>App-Tabs</em>, das sind bis auf ihr Favicon geschrumpfte Tabs, die immer offen bleiben. Um einen App-Tab zu erstellen reicht ein Rechtsklick auf einen Tab und das Auswählen von &#8220;Als App-Tab anpinnen&#8221;. Werden innerhalb von App-Tabs externe Links angeklickt, so werden sie in einem neuen Tab geöffnet. Sie können außerdem nicht per <code>STRG + W</code> geschlossen werden (Shortcut zum Schließen von Tabs, in allen Browsern übrigens..).</p>
<p>Für Leute mit vielen gleichzeitig geöffneten Tabs, gibt es jetzt <em>Panorama</em>. Damit lassen sich Tabs sehr bequem per Drag &amp; Drop gruppieren, wobei dann immer nur eine Gruppe aktiv sein kann. Die Funktion wird entweder über <code>STRG+Umschalt+E</code> oder den Panorama Button geöffnet oder geschlossen. App-Tabs bleiben übrigens in allen Gruppen erhalten.</p>
<div id="attachment_3330" class="wp-caption aligncenter" style="width: 520px"><a href="http://www.normansblog.de/wp-content/uploads/2011/03/panorama.jpg"><img src="http://www.normansblog.de/wp-content/uploads/2011/03/panorama-500x298.jpg" alt="Panorama" title="Panorama" width="500" height="298" class="size-large wp-image-3330" /></a><p class="wp-caption-text">Panorama - sehr intuitiv gelöst</p></div>
<p>Einige Verbesserungen wie dem <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=455694">verzögerten Wachstum der Tabs</a>, wenn andere Tabs geschlossen werden oder den <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=465086">neuen Animationen der Tab-Sortierung</a> (beides wie in Chrome, Opera oder IE), haben es leider nicht mehr in dieses Release geschafft.</p>
<h4>Änderungen an den Toolbars</h4>
<p>Wer sich fragt, wo denn der Home-Button sowie der Stop- und der Reload-Button hin sind, der sollte mal einen Blick nach rechts werfen. Dort finden sich alle Elemente wieder. Der Home-Button ist rüber gewandert und Stop, Go und Reload wurden zu einem einzigen Button verschmolzen, der sich sehr elegant in die Adresszeile einfügt.</p>
<div id="attachment_3334" class="wp-caption aligncenter" style="width: 353px"><a href="http://www.normansblog.de/wp-content/uploads/2011/03/toolbar.jpg"><img src="http://www.normansblog.de/wp-content/uploads/2011/03/toolbar.jpg" alt="Bäumchen wechsle dich!" title="Bäumchen wechsle dich!" width="333" height="87" class="size-full wp-image-3334" /></a><p class="wp-caption-text">Bäumchen wechsle dich!</p></div>
<p>Es gibt außerdem jetzt die Möglichkeit von <em>Paste &amp; Go</em> bzw. <em>Paste &amp; Search</em>, wobei URLs oder Begriffe in der Zwischenablage direkt eingefügt und danach sofort die Aktion der Adress- bzw. Suchleiste in Gang gesetzt wird. Leider habe ich dafür noch keine Shortcuts entdecken können, sonst würde ich das sicherlich öfter benutzen.</p>
<p>Übrigens ist die Lesezeichenleiste standardmäßig versteckt. Der Button ganz rechts mit dem Stern kann jedoch dazu genutzt werden die geliebte Leiste wieder einzublenden und fungiert darüber hinaus als Lesezeichen-Menü/-Manager.</p>
<div id="attachment_3336" class="wp-caption aligncenter" style="width: 385px"><a href="http://www.normansblog.de/wp-content/uploads/2011/03/addon_toolbar.jpg"><img src="http://www.normansblog.de/wp-content/uploads/2011/03/addon_toolbar.jpg" alt="Addon Toolbar" title="Addon Toolbar" width="365" height="40" class="size-full wp-image-3336" /></a><p class="wp-caption-text">Die neue Addon Toolbar</p></div>
<p>Viele Leute stören sich auch an der fehlenden Statusbar. Ich vermisse das hässliche Ding bisher keine Minute. Ziellinks werden in der unteren Ecke angezeigt, für Addons gibt es die neue Addon-Bar, die schnell mit <code>STRG+Umschalt+7</code> ein- und ausgeblendet werden kann, und für laufende Downloads nutzt man entweder ein gutes Addon oder die Windows 7 Integration mitsamt Download-Fortschrittsanzeige in der Taskleiste (Tabvorschau und Jumplists funktionieren natürlich auch). <img src='http://www.normansblog.de/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
<p>Ein weiterer Punkt ist der neue Firefox-Button oben links. Der erscheint, wenn man die Menüleiste ausblendet und vereint alle wichtigen Menüeinträge zu einem Super-Menü. Von hier aus kommt man in die Optionen, den Addon-Manager, dem About/Update-Dialog und allen anderen Punkten, die einem das klassische Menü auch geliefert hat.</p>
<div id="attachment_3342" class="wp-caption aligncenter" style="width: 520px"><a href="http://www.normansblog.de/wp-content/uploads/2011/03/firefox_button.jpg"><img src="http://www.normansblog.de/wp-content/uploads/2011/03/firefox_button-500x239.jpg" alt="Firefox Button" title="Firefox Button" width="500" height="239" class="size-large wp-image-3342" /></a><p class="wp-caption-text">Firefox Button mit ausgeklappten Menü</p></div>
<p>Mir persönlich ist der Button etwas zu sperrig, deshalb nutze ich Movable Firefox Button (veraltet), ein Addon, dass es mir erlaubt den Button als wesentlich kleinere Version irgendwo in eine der Toolbars zu packen. So haben meine Tabs mehr platz und ich bin das klobige Ding los ohne an Funktionalität zu verlieren.</p>
<div id="attachment_3343" class="wp-caption aligncenter" style="width: 520px"><a href="http://www.normansblog.de/wp-content/uploads/2011/03/movable_button.jpg"><img src="http://www.normansblog.de/wp-content/uploads/2011/03/movable_button-500x276.jpg" alt="Movable Firefox Button" title="Movable Firefox Button" width="500" height="276" class="size-large wp-image-3343" /></a><p class="wp-caption-text">Movable Firefox Button - toll!</p></div>
<h4>Addon Manager</h4>
<p>Komplett überholt wurde der Addon Manager, der jetzt mit <code>STRG+Umschalt+A</code> aufgerufen werden kann. Innerhalb des Managers verschwinden alle unrelevanten Toolbars. Erweiterungen, Plugins, Themes, hier findet sich alles schön sortiert und farbliche angenehm hervorgehoben. Addons werden auch weiterhin automatisch im Hintergrund geupdated, man bekommt jetzt aber keine Benachrichtigung mehr wann das passiert &#8211; Stichwort: Silent Update.</p>
<div id="attachment_3341" class="wp-caption aligncenter" style="width: 520px"><a href="http://www.normansblog.de/wp-content/uploads/2011/03/addons.jpg"><img src="http://www.normansblog.de/wp-content/uploads/2011/03/addons-500x336.jpg" alt="Addon Manager" title="Addon Manager" width="500" height="336" class="size-large wp-image-3341" /></a><p class="wp-caption-text">Der überarbeitete Addon Manager</p></div>
<h4>Link: Rechtsklick -> Im neuen Tab öffnen??</h4>
<p>Ja, das ist jetzt nicht mehr an zweiter Stelle im Context-Menü sondern gleich an erster.. hat mich auch 2-3 Tage gebraucht, bis das wieder richtig funktioniert hat. Hintergrund ist, dass <em>Öffnen im neuen Tab</em> viel öfter benutzt wird als <em>Öffnen im neuen Fenster</em> und nach dem Motto &#8220;Wichtige Dinge kommen zuerst&#8221; wurden die beiden einfach vertauscht, so dass jetzt das wichtigere an erster Stelle steht.</p>
<div id="attachment_3345" class="wp-caption aligncenter" style="width: 289px"><a href="http://www.normansblog.de/wp-content/uploads/2011/03/open_in_new_tab.jpg"><img src="http://www.normansblog.de/wp-content/uploads/2011/03/open_in_new_tab.jpg" alt="Öffnen in neuem Tab" title="Öffnen in neuem Tab" width="269" height="112" class="size-full wp-image-3345" /></a><p class="wp-caption-text">Öffnen in neuem Tab steht jetzt oben</p></div>
<p>Übrigens! Firefox erkennt jetzt nicht-verlinkte Links auch als Links und offeriert uns gerade genannte Context-Einträge nachdem wir den Link markiert haben. Oftmals sieht man sowas in Foren oder z. B. auf Twitter, wenn jemand vergessen hat ein <code>http://</code> vor die URL zu setzen. Finde ich eine recht nützliche Sache.</p>
<h4>Firefox Sync</h4>
<p><img src="http://www.normansblog.de/wp-content/uploads/2011/03/sync-header-150x150.png" alt="Firefox Sync" title="Firefox Sync" width="150" height="150" class="alignright size-thumbnail wp-image-3351" />Synchronisation ist derzeit ein großes Thema, das Schlagwort <em>Cloud</em> ist in aller Munde. Speziell für Browser scheint daher im Moment kein Weg an Sync-Lösungen vorbei zu gehen. Mozilla hat einen eigenen Dienst entwickelt, der Lesezeichen, Passwörter, Einstellungen, Chroniken und Tabs auf mehreren Rechnern und sogar auf Mobilgeräten (auf denen <a href="http://www.mozilla.com/de/mobile/">Firefox oder Firefox Home</a> läuft) zu synchronisieren. Dabei verschlüsselt Firefox die zu übertragenen Daten, sodass sie für keinen einsehbar auf den Mozilla-Servern liegen. Wem das trotzdem zu unsicher ist, kann sich auch einen eigenen Server einrichten. Ich nutze das, um Daten zwischen Zuhause und meinem Rechner auf Arbeit zu syncen, so habe ich meine gewohnte Surf-Umgebung bei mir, egal wo ich mich befinde. In späteren Versionen sollen auch Addons und deren Einstellungen synchronisiert werden können.</p>
<h3>Fazit</h3>
<p>Mozilla macht einen großen Schritt nach vorn. Das war äußerst wichtig, hat man doch zuletzt viele Nutzer zurecht an Chrome verloren. Man kann vielleicht noch nicht in jeder Hinsicht mit dem Primus in Sachen Geschwindigkeit gleichziehen aber dafür den Vorsprung um einiges wieder verkürzen. Firefox 4 war ein immens großes Projekt, das eigentlich schon hätte Ende letzten Jahres fertig sein müssen. <a href="https://wiki.mozilla.org/Firefox/Roadmap">Jetzt stellt Mozilla den Entwicklungszyklus um</a> und erhofft sich dadurch noch schneller und flexibler zu werden. Die Konkurrenz bleibt natürlich auch nicht stehen, IE9 hatte letzte Woche seinen großen Auftritt und von Googles Chrome gibts mittlerweile auch schon die Nummer 10. Es stehen uns also noch viele interessante Neuerungen für die Zukunft ins Haus, es ist so spannend wie nie! <img src='http://www.normansblog.de/wp-includes/images/smilies/icon_wink.gif' alt=';)' class='wp-smiley' /> </p>
<div class="demolink"><a href="http://www.firefox.com">Download Firefox 4</a></div>
<h3>PS</h3>
<div id="attachment_3349" class="wp-caption alignright" style="width: 170px"><a href="http://www.normansblog.de/wp-content/uploads/2011/03/customize_1.jpg"><img src="http://www.normansblog.de/wp-content/uploads/2011/03/customize_1-150x138.jpg" alt="Toolbars anpassen" title="Toolbars anpassen" width="150" height="138" class="size-thumbnail wp-image-3349" /></a><p class="wp-caption-text">Toolbars anpassen</p></div>
<p>An alle, die sich an das neue Aussehen von Firefox nicht gewöhnen können oder wollen: Es gibt extra die Möglichkeit alles so zu verändern, bis es einem gefällt. Gerade was die Anordnung von Icons oder Toolbars angeht.. einfach mal Rechtsklick auf eine Toolbar und den Punkt &#8220;Anpassen&#8230;&#8221; wählen. Jetzt könnt ihr Elemente auf den Toolbars per Drag &amp; Drop verschieben, hinzufügen oder entfernen &#8211; es ist wirklich einfach, probiert es aus!</p>
]]></content:encoded>
			<wfw:commentRss>http://www.normansblog.de/firefox-4-was-hat-sich-geaendert/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>Filmstarts.de Suchplugin</title>
		<link>http://www.normansblog.de/filmstarts-de-suchplugin/</link>
		<comments>http://www.normansblog.de/filmstarts-de-suchplugin/#comments</comments>
		<pubDate>Fri, 21 May 2010 20:52:24 +0000</pubDate>
		<dc:creator>Norman</dc:creator>
				<category><![CDATA[Kino]]></category>
		<category><![CDATA[Web]]></category>
		<category><![CDATA[Browser]]></category>
		<category><![CDATA[Erweiterung]]></category>

		<guid isPermaLink="false">http://www.normansblog.de/?p=2507</guid>
		<description><![CDATA[An alle Filmfans und Besucher von FILMSTARTS.de 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 [...]]]></description>
			<content:encoded><![CDATA[<p>An alle Filmfans und Besucher von FILMSTARTS.de</p>
<div id="attachment_2509" class="wp-caption alignright" style="width: 220px"><a href="http://www.normansblog.de/filmstarts-de-suchplugin/"><img src="http://www.normansblog.de/wp-content/uploads/2010/05/filmstarts_logo-300x52.jpg" alt="filmstarts_logo" title="filmstarts_logo" width="200" class="size-medium wp-image-2509" /></a><p class="wp-caption-text">FILMSTARTS.de Suchplugin</p></div>
<p>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 <a href="http://www.filmstarts.de/">FILMSTARTS.de</a> (im weiteren einfach nur <em>Filmstarts</em> 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 <a href="http://mycroft.mozdev.org/search-engines.html?name=filmstarts">die bisherigen Suchplugins</a> nicht mehr richtig. Also habe ich mir eines dieser Plugins angepasst und teile es mit euch. <img src='http://www.normansblog.de/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
<p><span id="more-2507"></span></p>
<p>Klickt einfach auf folgenden Link und wählt dann in der Suchleiste von Firefox die neue Suchmaschine aus.</p>
<div class="demolink"><a href="http://www.normansblog.de/demos/filmstarts.html">Filmstarts Suchplugin</a></div>
<p>Das wars auch schon, mehr gibts nicht zu tun, viel Spaß beim Suchen. <img src='http://www.normansblog.de/wp-includes/images/smilies/icon_wink.gif' alt=';)' class='wp-smiley' /> </p>
<p><strong>Update:</strong> 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! <img src='http://www.normansblog.de/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
]]></content:encoded>
			<wfw:commentRss>http://www.normansblog.de/filmstarts-de-suchplugin/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>Social Bookmarks selbstgemacht</title>
		<link>http://www.normansblog.de/social-bookmarks-selbstgemacht/</link>
		<comments>http://www.normansblog.de/social-bookmarks-selbstgemacht/#comments</comments>
		<pubDate>Wed, 10 Feb 2010 20:22:46 +0000</pubDate>
		<dc:creator>Norman</dc:creator>
				<category><![CDATA[Web]]></category>
		<category><![CDATA[Erweiterung]]></category>
		<category><![CDATA[Theme]]></category>
		<category><![CDATA[WordPress]]></category>

		<guid isPermaLink="false">http://www.normansblog.de/?p=2050</guid>
		<description><![CDATA[Howdy 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 [...]]]></description>
			<content:encoded><![CDATA[<p>Howdy</p>
<div id="attachment_2052" class="wp-caption alignright" style="width: 170px"><a href="http://www.normansblog.de/social-bookmarks-selbstgemacht/"><img src="http://www.normansblog.de/wp-content/uploads/2010/02/socialbookmarks-150x33.png" alt="Social Bookmarks" title="socialbookmarks" width="150" height="33" class="size-thumbnail wp-image-2052" /></a><p class="wp-caption-text">Social Bookmarks</p></div>
<p>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 <a href="http://wordpress.org/extend/plugins/search.php?q=social+bookmarks&#038;sort=">nach Plugins gesucht</a>, 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.</p>
<p><span id="more-2050"></span></p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
</pre></td><td class="code"><pre class="html4strict" style="font-family:monospace;"><span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">ul</span> <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;socialbookmarks&quot;</span>&gt;</span>
	<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;delicious&quot;</span> <span style="color: #000066;">rel</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;nofollow&quot;</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;http://delicious.com/post?url=&lt;?php the_permalink(); ?&gt;</span></span><span style="color: #ddbb00;">&amp;amp;</span>title=<span style="color: #009900;">&lt;?php echo urlencode<span style="color: #66cc66;">&#40;</span>get_the_title<span style="color: #66cc66;">&#40;</span>$id<span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#41;</span>; ?&gt;</span>&quot; title=&quot;Bookmark this post at Delicious&quot;&gt;Delicious<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span>
	<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;digg&quot;</span> <span style="color: #000066;">rel</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;nofollow&quot;</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;http://digg.com/submit?phase=2&amp;amp;url=&lt;?php the_permalink(); ?&gt;</span></span>&quot; title=&quot;Submit this post to Digg&quot;&gt;Digg<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span>
	<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;facebook&quot;</span> <span style="color: #000066;">rel</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;nofollow&quot;</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;http://www.facebook.com/sharer.php?u=&lt;?php the_permalink();?&gt;</span></span><span style="color: #ddbb00;">&amp;amp;</span>t=<span style="color: #009900;">&lt;?php echo urlencode<span style="color: #66cc66;">&#40;</span>get_the_title<span style="color: #66cc66;">&#40;</span>$id<span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#41;</span>; ?&gt;</span>&quot; title=&quot;Share this post on Facebook&quot;&gt;Facebook<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span>
	<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;furl&quot;</span> <span style="color: #000066;">rel</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;nofollow&quot;</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;http://furl.net/storeIt.jsp?t=&lt;?php echo urlencode(get_the_title($id)); ?&gt;</span></span><span style="color: #ddbb00;">&amp;amp;</span>u=<span style="color: #009900;">&lt;?php the_permalink<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>; ?&gt;</span>&quot; title=&quot;Share this post on Furl&quot;&gt;Furl<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span>
	<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;studivz&quot;</span> <span style="color: #000066;">rel</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;nofollow&quot;</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;http://www.studivz.net/Link/ExternLink/Url/?u=&lt;?php the_permalink();?&gt;</span></span><span style="color: #ddbb00;">&amp;amp;</span>desc=<span style="color: #009900;">&lt;?php echo urlencode<span style="color: #66cc66;">&#40;</span>get_the_title<span style="color: #66cc66;">&#40;</span>$id<span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#41;</span>; ?&gt;</span><span style="color: #ddbb00;">&amp;amp;</span>prov=<span style="color: #009900;">&lt;?php bloginfo<span style="color: #66cc66;">&#40;</span><span style="color: #ff0000;">'name'</span><span style="color: #66cc66;">&#41;</span>; ?&gt;</span>&quot; title=&quot;Share this post on StudiVZ&quot;&gt;StudiVZ<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span>
	<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;stumbleupon&quot;</span> <span style="color: #000066;">rel</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;nofollow&quot;</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;http://www.stumbleupon.com/submit?url=&lt;?php the_permalink(); ?&gt;</span></span><span style="color: #ddbb00;">&amp;amp;</span>title=<span style="color: #009900;">&lt;?php echo urlencode<span style="color: #66cc66;">&#40;</span>get_the_title<span style="color: #66cc66;">&#40;</span>$id<span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#41;</span>; ?&gt;</span>&quot; title=&quot;Share this post at StumbleUpon&quot;&gt;StumbleUpon<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span>
	<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;technorati&quot;</span> <span style="color: #000066;">rel</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;nofollow&quot;</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;http://technorati.com/faves?add=&lt;?php bloginfo('url'); ?&gt;</span></span>&quot; title=&quot;Add <span style="color: #009900;">&lt;?php bloginfo<span style="color: #66cc66;">&#40;</span><span style="color: #ff0000;">'name'</span><span style="color: #66cc66;">&#41;</span>; ?&gt;</span> to your Technorati favorites&quot;&gt;Technorati<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span>
	<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;twitter&quot;</span> <span style="color: #000066;">rel</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;nofollow&quot;</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;http://twitter.com/home?status=&lt;?php echo urlencode(&quot;</span>Currently reading: <span style="color: #ff0000;">&quot;); ?&gt;&lt;?php the_permalink(); ?&gt;</span></span>&quot; title=&quot;Share this article with your Twitter followers&quot;&gt;Twitter<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span>
	<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">li</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;reddit&quot;</span> <span style="color: #000066;">rel</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;nofollow&quot;</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;http://reddit.com/submit?url=&lt;?php the_permalink(); ?&gt;</span></span><span style="color: #ddbb00;">&amp;amp;</span>title=<span style="color: #009900;">&lt;?php echo urlencode<span style="color: #66cc66;">&#40;</span>get_the_title<span style="color: #66cc66;">&#40;</span>$id<span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#41;</span>; ?&gt;</span>&quot; title=&quot;Share this post on Reddit&quot;&gt;Reddit<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">li</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">ul</span>&gt;</span></pre></td></tr></table></div>

<p>Diese hab ich mir dann in die <code>single.php</code> meines Themes kopiert. Die Links waren jetzt da.. es fehlten noch die Icons. Nach einer kurzen Suche auf <a href="http://www.iconfinder.net/">Iconfinder</a> bin ich fündig geworden: Das <a href="http://www.iconfinder.net/search/?q=iconset%3Aaquaticus">Aquaticus Set</a> 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.</p>
<div id="attachment_2052" class="wp-caption aligncenter" style="width: 452px"><img src="http://www.normansblog.de/wp-content/uploads/2010/02/socialbookmarks.png" alt="Social Bookmarks" title="socialbookmarks" width="432" height="96" class="size-full wp-image-2052" /><p class="wp-caption-text">Icons des Aquaticus Sets als CSS Sprite</p></div>
<p>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: <a href="http://www.google.de/#hl=de&#038;safe=off&#038;q=CSS+Sprites">CSS Sprites</a>).</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>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
</pre></td><td class="code"><pre class="css" style="font-family:monospace;"><span style="color: #cc00cc;">#socialbookmarks</span> <span style="color: #00AA00;">&#123;</span>
	<span style="color: #000000; font-weight: bold;">clear</span><span style="color: #00AA00;">:</span><span style="color: #993333;">both</span><span style="color: #00AA00;">;</span>
	<span style="color: #000000; font-weight: bold;">height</span><span style="color: #00AA00;">:</span><span style="color: #933;">48px</span><span style="color: #00AA00;">;</span>
	<span style="color: #000000; font-weight: bold;">list-style</span><span style="color: #00AA00;">:</span><span style="color: #993333;">none</span><span style="color: #00AA00;">;</span>
	<span style="color: #000000; font-weight: bold;">margin</span><span style="color: #00AA00;">:</span><span style="color: #933;">20px</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span>
<span style="color: #cc00cc;">#socialbookmarks</span> li <span style="color: #00AA00;">&#123;</span>
	<span style="color: #000000; font-weight: bold;">float</span><span style="color: #00AA00;">:</span><span style="color: #000000; font-weight: bold;">left</span><span style="color: #00AA00;">;</span>
	<span style="color: #000000; font-weight: bold;">margin-left</span><span style="color: #00AA00;">:</span><span style="color: #933;">8px</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span>
<span style="color: #cc00cc;">#socialbookmarks</span> a <span style="color: #00AA00;">&#123;</span>
	<span style="color: #000000; font-weight: bold;">background-image</span><span style="color: #00AA00;">:</span><span style="color: #993333;">url</span><span style="color: #00AA00;">&#40;</span><span style="color: #ff0000; font-style: italic;">socialbookmarks.png</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">;</span>
	<span style="color: #000000; font-weight: bold;">background-repeat</span><span style="color: #00AA00;">:</span><span style="color: #993333;">no-repeat</span><span style="color: #00AA00;">;</span>
	<span style="color: #000000; font-weight: bold;">display</span><span style="color: #00AA00;">:</span><span style="color: #993333;">block</span><span style="color: #00AA00;">;</span>
	<span style="color: #000000; font-weight: bold;">height</span><span style="color: #00AA00;">:</span><span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span>
	<span style="color: #000000; font-weight: bold;">outline</span><span style="color: #00AA00;">:</span><span style="color: #993333;">none</span><span style="color: #00AA00;">;</span>
	<span style="color: #000000; font-weight: bold;">overflow</span><span style="color: #00AA00;">:</span><span style="color: #993333;">hidden</span><span style="color: #00AA00;">;</span>
	<span style="color: #000000; font-weight: bold;">padding-top</span><span style="color: #00AA00;">:</span><span style="color: #933;">48px</span><span style="color: #00AA00;">;</span>
	<span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span><span style="color: #933;">48px</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span>
<span style="color: #cc00cc;">#delicious</span> <span style="color: #00AA00;">&#123;</span><span style="color: #000000; font-weight: bold;">background-position</span><span style="color: #00AA00;">:</span><span style="color: #cc66cc;">0</span> <span style="color: #000000; font-weight: bold;">bottom</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
<span style="color: #cc00cc;">#digg</span> <span style="color: #00AA00;">&#123;</span><span style="color: #000000; font-weight: bold;">background-position</span><span style="color: #3333ff;">:<span style="color: #933;">-48px</span> </span><span style="color: #000000; font-weight: bold;">bottom</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
<span style="color: #cc00cc;">#facebook</span> <span style="color: #00AA00;">&#123;</span><span style="color: #000000; font-weight: bold;">background-position</span><span style="color: #3333ff;">:<span style="color: #933;">-96px</span> </span><span style="color: #000000; font-weight: bold;">bottom</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
<span style="color: #cc00cc;">#furl</span> <span style="color: #00AA00;">&#123;</span><span style="color: #000000; font-weight: bold;">background-position</span><span style="color: #3333ff;">:<span style="color: #933;">-144px</span> </span><span style="color: #000000; font-weight: bold;">bottom</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
<span style="color: #cc00cc;">#studivz</span> <span style="color: #00AA00;">&#123;</span><span style="color: #000000; font-weight: bold;">background-position</span><span style="color: #3333ff;">:<span style="color: #933;">-192px</span> </span><span style="color: #000000; font-weight: bold;">bottom</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
<span style="color: #cc00cc;">#stumbleupon</span> <span style="color: #00AA00;">&#123;</span><span style="color: #000000; font-weight: bold;">background-position</span><span style="color: #3333ff;">:<span style="color: #933;">-240px</span> </span><span style="color: #000000; font-weight: bold;">bottom</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
<span style="color: #cc00cc;">#technorati</span> <span style="color: #00AA00;">&#123;</span><span style="color: #000000; font-weight: bold;">background-position</span><span style="color: #3333ff;">:<span style="color: #933;">-288px</span> </span><span style="color: #000000; font-weight: bold;">bottom</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
<span style="color: #cc00cc;">#twitter</span> <span style="color: #00AA00;">&#123;</span><span style="color: #000000; font-weight: bold;">background-position</span><span style="color: #3333ff;">:<span style="color: #933;">-336px</span> </span><span style="color: #000000; font-weight: bold;">bottom</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
<span style="color: #cc00cc;">#reddit</span> <span style="color: #00AA00;">&#123;</span><span style="color: #000000; font-weight: bold;">background-position</span><span style="color: #3333ff;">:<span style="color: #933;">-384px</span> </span><span style="color: #000000; font-weight: bold;">bottom</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
<span style="color: #cc00cc;">#delicious</span><span style="color: #3333ff;">:hover </span><span style="color: #00AA00;">&#123;</span><span style="color: #000000; font-weight: bold;">background-position</span><span style="color: #00AA00;">:</span><span style="color: #cc66cc;">0</span> <span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
<span style="color: #cc00cc;">#digg</span><span style="color: #3333ff;">:hover </span><span style="color: #00AA00;">&#123;</span><span style="color: #000000; font-weight: bold;">background-position</span><span style="color: #00AA00;">:</span><span style="color: #933;">-48px</span> <span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
<span style="color: #cc00cc;">#facebook</span><span style="color: #3333ff;">:hover </span><span style="color: #00AA00;">&#123;</span><span style="color: #000000; font-weight: bold;">background-position</span><span style="color: #00AA00;">:</span><span style="color: #933;">-96px</span> <span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
<span style="color: #cc00cc;">#furl</span><span style="color: #3333ff;">:hover </span><span style="color: #00AA00;">&#123;</span><span style="color: #000000; font-weight: bold;">background-position</span><span style="color: #00AA00;">:</span><span style="color: #933;">-144px</span> <span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
<span style="color: #cc00cc;">#studivz</span><span style="color: #3333ff;">:hover </span><span style="color: #00AA00;">&#123;</span><span style="color: #000000; font-weight: bold;">background-position</span><span style="color: #00AA00;">:</span><span style="color: #933;">-192px</span> <span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
<span style="color: #cc00cc;">#stumbleupon</span><span style="color: #3333ff;">:hover </span><span style="color: #00AA00;">&#123;</span><span style="color: #000000; font-weight: bold;">background-position</span><span style="color: #00AA00;">:</span><span style="color: #933;">-240px</span> <span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
<span style="color: #cc00cc;">#technorati</span><span style="color: #3333ff;">:hover </span><span style="color: #00AA00;">&#123;</span><span style="color: #000000; font-weight: bold;">background-position</span><span style="color: #00AA00;">:</span><span style="color: #933;">-288px</span> <span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
<span style="color: #cc00cc;">#twitter</span><span style="color: #3333ff;">:hover </span><span style="color: #00AA00;">&#123;</span><span style="color: #000000; font-weight: bold;">background-position</span><span style="color: #00AA00;">:</span><span style="color: #933;">-336px</span> <span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span>
<span style="color: #cc00cc;">#reddit</span><span style="color: #3333ff;">:hover </span><span style="color: #00AA00;">&#123;</span><span style="color: #000000; font-weight: bold;">background-position</span><span style="color: #00AA00;">:</span><span style="color: #933;">-384px</span> <span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span><span style="color: #00AA00;">&#125;</span></pre></td></tr></table></div>

<p>Wenn euch das hier zuviel ist, könnt ihr euch auch einfach eine ZIP mit den ganzen Daten runterladen: <a class="download" href="http://www.normansblog.de/wp-content/uploads/plugins/social_bookmarks.zip">social_bookmarks.zip</a></p>
<p>Wie es im Live-Betrieb aussieht, seht ihr ja gleich etwas weiter unten.. <img src='http://www.normansblog.de/wp-includes/images/smilies/icon_wink.gif' alt=';)' class='wp-smiley' /> </p>
]]></content:encoded>
			<wfw:commentRss>http://www.normansblog.de/social-bookmarks-selbstgemacht/feed/</wfw:commentRss>
		<slash:comments>16</slash:comments>
		</item>
		<item>
		<title>Firebug 1.5</title>
		<link>http://www.normansblog.de/firebug-1-5/</link>
		<comments>http://www.normansblog.de/firebug-1-5/#comments</comments>
		<pubDate>Sun, 17 Jan 2010 01:50:13 +0000</pubDate>
		<dc:creator>Norman</dc:creator>
				<category><![CDATA[Web]]></category>
		<category><![CDATA[Erweiterung]]></category>
		<category><![CDATA[Firebug]]></category>
		<category><![CDATA[Firefox]]></category>
		<category><![CDATA[Update]]></category>

		<guid isPermaLink="false">http://www.normansblog.de/?p=1568</guid>
		<description><![CDATA[Howdy, 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 [...]]]></description>
			<content:encoded><![CDATA[<p>Howdy,</p>
<p><a href="http://www.normansblog.de/firebug-1-5/"><img src="http://www.normansblog.de/wp-content/uploads/2010/01/firebug-large-150x119.png" alt="" title="firebug-large" width="150" height="119" class="alignright size-thumbnail wp-image-1886" /></a>Wie heute Abend <a href="http://blog.getfirebug.com/2010/01/15/firebug-1-5-0/">bekannt gegeben</a> wurde, ist ab sofort die Version 1.5 des beliebten Entwicklertools <a href="http://www.getfirebug.com">Firebug</a> zum Download freigegeben. Firebug ist seit seiner Entstehung <em>das</em> Werkzeug für jeden Webentwickler. Die neue Version verspricht mehr Stabilität, neue Features, weniger Bugs und funktioniert ab <a href="http://www.firefox.com">Firefox 3.5</a>.</p>
<p>Laut <a href="http://home.comcast.net/~johnjbarton/">John J. Barton</a>, 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 <a href="https://addons.mozilla.org/de/firefox/">Add-on-Verzeichnis von Mozilla</a> wird erst ab nächster Woche möglich sein. Alle die <em>jetzt</em> schon die 1.5 probieren wollen, klicken auf folgenden Link.</p>
<p class="center"><a href="http://getfirebug.com/releases/firebug/1.5X/firebug-1.5.0.xpi" class="download">Firebug 1.5 Installieren</a></p>
<p><span id="more-1568"></span></p>
<p>Zu den Neuerungen gehören unter anderen:</p>
<ul>
<li>verbesserter Inspector: höhere Zuverlässigkeit, Quick Info Box, Image Map Inspector </li>
<li>neuer Tab &#8220;Berechnet&#8221;, zeigt berechnetes CSS in einer Übersicht an</li>
<li><code>:hover</code> und <code>:active</code> Pseudoklassen werden besser unterstützt</li>
<li>DOM Knoten im HTML-Tab können mit Doppelklick geöffnet/geschlossen werden</li>
<li>Umschalten zwischen kurzer und ausführlicher Schreibweise von CSS Code</li>
<li><em>Break on Mutate</em>, Haltepunkte für HTML</li>
<li><a href="https://wiki.mozilla.org/Firebug/MarchOfTheFirebugs">diverse Bugfixes</a></li>
</ul>
<div id="attachment_1822" class="wp-caption aligncenter" style="width: 520px"><a href="http://www.normansblog.de/wp-content/uploads/2009/12/firebug_window.jpg"><img src="http://www.normansblog.de/wp-content/uploads/2009/12/firebug_window-500x231.jpg" alt="Firebug Window" title="firebug_window" width="500" height="231" class="size-large wp-image-1822" /></a><p class="wp-caption-text">Firebug in einem neuen Fenster geöffnet</p></div>
<p>Seit knapp zwei Wochen ist auch die Enwicklung an der nächsten Version (1.6) im Gange. Im Moment kann man sich die <a href="http://getfirebug.com/releases/firebug/1.6X/">dritte Alpha herunterladen</a> und testen. Solltet ihr Bugs finden, meldet sie doch am besten im <a href="http://code.google.com/p/fbug/issues/list">Bugtracker</a>.</p>
<p><strong>Update:</strong> Sieht so aus, als hätte der <a href="http://www.getfirebug.com">Webauftritt von Firebug</a> ein neues Design spendiert bekommen.</p>
<p>Viel Spaß beim Entwickeln und Debuggen! <img src='http://www.normansblog.de/wp-includes/images/smilies/icon_wink.gif' alt=';)' class='wp-smiley' /> </p>
]]></content:encoded>
			<wfw:commentRss>http://www.normansblog.de/firebug-1-5/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Automatische Silbentrennung</title>
		<link>http://www.normansblog.de/automatische-silbentrennung/</link>
		<comments>http://www.normansblog.de/automatische-silbentrennung/#comments</comments>
		<pubDate>Wed, 04 Nov 2009 01:05:53 +0000</pubDate>
		<dc:creator>Norman</dc:creator>
				<category><![CDATA[Web]]></category>
		<category><![CDATA[Erweiterung]]></category>
		<category><![CDATA[WordPress]]></category>

		<guid isPermaLink="false">http://www.normansblog.de/?p=1415</guid>
		<description><![CDATA[Hat es schon jemand gemerkt? Blocksatz ist eher was für die Leute im analogen Lager, Printbereich (Drucken) und dergleichen. Für Texte im Internet wird die Art des Textsatzes nicht verwendet, weil dadurch große Lücken im Text entstehen können. Hier ein Beispiel: Um das zu verhindern, gibt es nur einen Weg: Silbentrennung. Nun könnte man sich [...]]]></description>
			<content:encoded><![CDATA[<p>Hat es schon jemand gemerkt?</p>
<p>Blocksatz ist eher was für die Leute im analogen Lager, Printbereich (Drucken) und dergleichen. Für Texte im Internet wird die Art des Textsatzes nicht verwendet, weil dadurch große Lücken im Text entstehen können. Hier ein Beispiel:</p>
<div id="attachment_1436" class="wp-caption aligncenter" style="width: 408px"><a href="http://www.normansblog.de/wp-content/uploads/2009/11/silbentrennung_vorher.jpg"><img src="http://www.normansblog.de/wp-content/uploads/2009/11/silbentrennung_vorher.jpg" alt="Lücken mit Rot hervorgehoben" title="silbentrennung_vorher" width="388" height="130" class="size-full wp-image-1436" /></a><p class="wp-caption-text">Lücken mit Rot hervorgehoben</p></div>
<p>Um das zu verhindern, gibt es nur einen Weg: <em>Silbentrennung</em>.</p>
<p><span id="more-1415"></span></p>
<p>Nun könnte man sich hinsetzen und die Wörter selber trennen.. aber mal ehrlich, das ist ziemlich bescheuert. Das dachten sich auch die Entwickler von <a href="http://www.bebl.eu/zeug/hyphenator">Hyphenator</a>, einem <a href="http://wordpress.org/extend/plugins/hyphenator/">Plugin für WordPress</a>, das die Worttrennung ganz automatisch durchführt. Bisher funktioniert es reibungslos und Wörter werden fehlerfrei getrennt, der Duden wäre stolz. <img src='http://www.normansblog.de/wp-includes/images/smilies/icon_wink.gif' alt=';)' class='wp-smiley' /> </p>
<div id="attachment_1438" class="wp-caption aligncenter" style="width: 408px"><a href="http://www.normansblog.de/wp-content/uploads/2009/11/silbentrennung_nachher.jpg"><img src="http://www.normansblog.de/wp-content/uploads/2009/11/silbentrennung_nachher.jpg" alt="Keine Lücken mehr dank Silbentrennung." title="silbentrennung_nachher" width="388" height="130" class="size-full wp-image-1438" /></a><p class="wp-caption-text">Keine Lücken mehr dank Silbentrennung.</p></div>
<p>Hyphenator greift dabei aber keineswegs in den Text selbst ein. Stattdessen wird nach dem Laden der Seite ein Javascript gestartet, das die Silbentrennung durchführt. (Der Effekt tritt also nicht ein, wenn Besucher Javascript deaktiviert haben.)</p>
<p>Auf jeden Fall eine sehr nützliche Sache, wie ich finde. <img src='http://www.normansblog.de/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
]]></content:encoded>
			<wfw:commentRss>http://www.normansblog.de/automatische-silbentrennung/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Firefox + BitTorrent = Fail</title>
		<link>http://www.normansblog.de/firefox-bittorrent-fail/</link>
		<comments>http://www.normansblog.de/firefox-bittorrent-fail/#comments</comments>
		<pubDate>Fri, 24 Jul 2009 20:32:00 +0000</pubDate>
		<dc:creator>Norman</dc:creator>
				<category><![CDATA[Web]]></category>
		<category><![CDATA[Erweiterung]]></category>
		<category><![CDATA[Firefox]]></category>

		<guid isPermaLink="false">http://www.normansblog.de/?p=1009</guid>
		<description><![CDATA[Hi, Schon seit Langem hab ich ein komisches Problem: Firefox besteht den Acid2 Test nicht und im Acid3 Test hatte ich immer 1-2 Punkte weniger als es eigentlich der Fall sein sollte. Heute habe ich herausgefunden, was das Problem verursacht. Das BitTorrent 1.0.0.1 Plugin ist der Übeltäter. Erst dachte ich, es liegt an mir und [...]]]></description>
			<content:encoded><![CDATA[<p>Hi,</p>
<div id="attachment_1015" class="wp-caption alignright" style="width: 170px"><a href="http://www.normansblog.de/firefox-bittorrent-fail/"><img src="http://www.normansblog.de/wp-content/uploads/2009/07/firefox_bittorrent_plugin-150x133.png" alt="BitTorrent Plugin macht Probleme" title="firefox_bittorrent_plugin" width="150" height="133" class="size-thumbnail wp-image-1015" /></a><p class="wp-caption-text">BitTorrent Plugin macht Probleme</p></div>
<p>Schon seit Langem hab ich ein komisches Problem: Firefox besteht den <a href="http://www.webstandards.org/action/acid2/">Acid2</a> Test nicht und im <a href="http://www.webstandards.org/action/acid3/">Acid3</a> Test hatte ich immer 1-2 Punkte weniger als es eigentlich der Fall sein sollte. Heute habe ich herausgefunden, was das Problem verursacht. Das <strong>BitTorrent 1.0.0.1 Plugin</strong> ist der Übeltäter.</p>
<p>Erst dachte ich, es liegt an mir und meinen Addons oder Profileinstellungen. Also hab ich einmal alle Addons deaktiviert, keine Änderung. Dann hab ich eine <a href="http://www.firefox-browser.de/wiki/Profile">neues Profil erstellt</a>, keine Änderung. Erst dann hatte ich die Idee, mal alle Plugins zu deaktivieren.</p>
<p><span id="more-1009"></span></p>
<p>Und siehe da &#8211; alles Perfekt. Danach musste ich nur noch herausfinden, welches der ganzen Plugins der Verursacher ist. Nach schnellem Durchtesten hat sich herausgestellt, dass es BitTorrent war. Eigentlich ist es höchst seltsam, dass Addons solchen Einfluss auf die Darstellung haben (es scheint besonders <code>object</code> Tags zu betreffen) aber seht selbst.</p>
<h3>Acid2</h3>
<div id="attachment_1019" class="wp-caption aligncenter" style="width: 270px"><img src="http://www.normansblog.de/wp-content/uploads/2009/07/acid2_fail.jpg" alt="BitTorrent aktiv, Acid2 nicht bestanden" title="acid2_fail" width="250" height="300" class="size-full wp-image-1019" /><p class="wp-caption-text">BitTorrent aktiv, Acid2 nicht bestanden</p></div><br />
<div id="attachment_1020" class="wp-caption aligncenter" style="width: 270px"><img src="http://www.normansblog.de/wp-content/uploads/2009/07/acid2_pass.jpg" alt="BitTorrent inaktiv, Acid2 bestanden" title="acid2_pass" width="250" height="300" class="size-full wp-image-1020" /><p class="wp-caption-text">BitTorrent inaktiv, Acid2 bestanden</p></div>
<h3>Acid3</h3>
<div id="attachment_1022" class="wp-caption aligncenter" style="width: 520px"><a href="http://www.normansblog.de/wp-content/uploads/2009/07/acid3_fail.jpg"><img src="http://www.normansblog.de/wp-content/uploads/2009/07/acid3_fail-500x345.jpg" alt="BitTorrent aktiv, Acid3 mit 91 Punkten" title="acid3_fail" width="500" height="345" class="size-large wp-image-1022" /></a><p class="wp-caption-text">BitTorrent aktiv, Acid3 mit 91 Punkten</p></div><br />
<div id="attachment_1023" class="wp-caption aligncenter" style="width: 520px"><a href="http://www.normansblog.de/wp-content/uploads/2009/07/acid3_still_fail_but_better.jpg"><img src="http://www.normansblog.de/wp-content/uploads/2009/07/acid3_still_fail_but_better-500x345.jpg" alt="BitTorrent inaktiv, Acid3 mit 93 Punkten" title="acid3_still_fail_but_better" width="500" height="345" class="size-large wp-image-1023" /></a><p class="wp-caption-text">BitTorrent inaktiv, Acid3 mit 93 Punkten</p></div>
<p style="text-align:center;">(Firefox 3.5.1 schafft derzeit &#8220;nur&#8221; 93 Punkte im Acid3 Test)</p>
<p>Solltet ihr also auch ein derartiges Problem haben und wisst nicht, wo der Fehler liegt, schaut doch mal nach, ob nicht vielleicht das BitTorrent Plugin installiert ist und <a href="http://www.normansblog.de/wp-content/uploads/2009/07/firefox_bittorrent_plugin.png">deaktiviert es einfach</a> oder entfernt es, indem ihr die entsprechende Datei aus dem <code>Programme\Mozilla Firefox\plugins</code> Ordner löscht. <img src='http://www.normansblog.de/wp-includes/images/smilies/icon_wink.gif' alt=';)' class='wp-smiley' /> </p>
]]></content:encoded>
			<wfw:commentRss>http://www.normansblog.de/firefox-bittorrent-fail/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>N wie &#8220;Neue Features&#8221;</title>
		<link>http://www.normansblog.de/n-like-new-features/</link>
		<comments>http://www.normansblog.de/n-like-new-features/#comments</comments>
		<pubDate>Sun, 03 May 2009 20:50:06 +0000</pubDate>
		<dc:creator>Norman</dc:creator>
				<category><![CDATA[Web]]></category>
		<category><![CDATA[Erweiterung]]></category>
		<category><![CDATA[Flash]]></category>
		<category><![CDATA[News]]></category>
		<category><![CDATA[WordPress]]></category>

		<guid isPermaLink="false">http://www.normansblog.de/?p=713</guid>
		<description><![CDATA[Willkommen zur nächsten Update-Runde! Ach ich liebe es, dauernd an meinem Blog zu basteln und hier und da etwas zu verbessern. Im Laufe der letzten Tage ist diesbezüglich einiges passiert und diese Neuerungen möchte ich euch natürlich nicht vorenthalten: Suchen auf Norman&#8217;s Blog Neue Tagcloud &#8220;Song of the Day&#8221;-Widget Online To-Do-Liste Suchen auf Norman&#8217;s Blog [...]]]></description>
			<content:encoded><![CDATA[<p>Willkommen zur nächsten Update-Runde!</p>
<div id="attachment_716" class="wp-caption alignright" style="width: 120px"><a href="http://www.normansblog.de/n-like-new-features/"><img src="http://www.normansblog.de/wp-content/uploads/2009/05/n.jpg" alt="Neu Neu Neu!" title="New Features" width="100" height="100" class="size-full wp-image-716" /></a><p class="wp-caption-text">Neu Neu Neu!</p></div>
<p>Ach ich liebe es, dauernd an meinem Blog zu basteln und hier und da etwas zu verbessern. Im Laufe der letzten Tage ist diesbezüglich einiges passiert und diese Neuerungen möchte ich euch natürlich nicht vorenthalten:</p>
<ol>
<li><a href="#psearch">Suchen auf Norman&#8217;s Blog</a></li>
<li><a href="#tcloud">Neue Tagcloud</a></li>
<li><a href="#wpsotd">&#8220;Song of the Day&#8221;-Widget</a></li>
<li><a href="#todo">Online To-Do-Liste</a></li>
</ol>
<p><span id="more-713"></span></p>
<h3 id="psearch">Suchen auf Norman&#8217;s Blog</h3>
<hr/>
<p>Als ich letztens mal so rumgesurft bin und hin und wieder etwas bei Google oder Wikipedia gesucht habe, ist mir aufgefallen, wie nützliche doch diese Suchplugins für Firefox sind und haben mich gefragt, ob ich nicht sowas auch für meinen Blog erstellen kann. Fündig geworden bin ich bei <a href="http://www.mozilla.com/">Mozilla</a>. In deren Developerbereich steht <a href="https://developer.mozilla.org/en/Creating_OpenSearch_plugins_for_Firefox">was man machen muss</a>. Im Grunde legt man eine kleine XML Datei an (<a href="http://de.wikipedia.org/wiki/Opensearch">OpenSearch</a>), in der steht, auf welcher Seite gesucht werden soll und welches Icon die Suchmaschine nutzen soll. Dann verlinkt man die XML im Header des Blogs und schon funktioniert es.</p>
<p>In wenigen Schritten möchte ich nun erklären, wie man das Plugin hinzufügt und benutzt.</p>
<ol>
<li>
<p>Auf meinen Blog gehen. Oben rechts leuchtet nun der Dropdown-Pfeil in der Suchleiste auf.</p>
<div id="attachment_730" class="wp-caption aligncenter" style="width: 321px"><img src="http://www.normansblog.de/wp-content/uploads/2009/05/search_plugin_1.jpg" alt="Liste der Suchmaschinen" title="search_plugin_1" width="301" height="367" class="size-full wp-image-730" /><p class="wp-caption-text">Liste der Suchmaschinen</p></div>
<p>Draufklicken und auf &#8220;Norman&#8217;s Blog hinzufügen&#8221; klicken &#8211; Das Plugin ist somit installiert und einsatzbereit.</p>
</li>
<li>
<p>Nochmals die Dropdown-Liste aufmachen und &#8220;Norman&#8217;s Blog&#8221; auswählen.</p>
<p><div id="attachment_737" class="wp-caption aligncenter" style="width: 321px"><img src="http://www.normansblog.de/wp-content/uploads/2009/05/search_plugin_2.jpg" alt="Suchmaschine auswählen." title="search_plugin_2" width="301" height="36" class="size-full wp-image-737" /><p class="wp-caption-text">Suchmaschine auswählen.</p></div></li>
<li>
<p>Jetzt die Suchbegriffe eingeben, nach denen ihr auf meinem Blog suchen wollt.</p>
<p><div id="attachment_735" class="wp-caption aligncenter" style="width: 320px"><img src="http://www.normansblog.de/wp-content/uploads/2009/05/search_plugin_3.jpg" alt="Auf Norman&#039;s Blog suchen, egal wo ihr seid." title="search_plugin_3" width="300" height="134" class="size-full wp-image-735" /><p class="wp-caption-text">Auf Norman's Blog suchen, egal wo ihr seid.</p></div></li>
<li>
<p>Ihr werden auf meine Seite weitergeleitet und die entsprechenden Suchergebnisse werden euch angezeigt.</p>
<p><div id="attachment_736" class="wp-caption aligncenter" style="width: 420px"><img src="http://www.normansblog.de/wp-content/uploads/2009/05/search_plugin_4-600x440.jpg" alt="Ergebnisse bestaunen." title="search_plugin_4" width="400" class="size-large wp-image-736" /><p class="wp-caption-text">Ergebnisse bestaunen.</p></div>
</li>
</ol>
<h3 id="tcloud">Neue Tagcloud</h3>
<hr/>
<div id="attachment_740" class="wp-caption alignright" style="width: 120px"><a href="http://wordpress.org/extend/plugins/wp-cumulus/"><img src="http://www.normansblog.de/wp-content/uploads/2009/05/wp_cumulus-150x150.jpg" alt="WP-Cumulus" title="wp_cumulus" width="100" height="100" class="size-thumbnail wp-image-740" /></a><p class="wp-caption-text">WP-Cumulus</p></div>
<p>Letztens bin ich auf einer Seite (weiß leider nicht mehr welche es war) über eine sehr coole Tagcloud gestolpert. Sie gefiel mir sogut, dass ich gleich in den Quelltext geschaut habe, um nachzusehen, wie das Teil heißt. <a href="http://wordpress.org/extend/plugins/wp-cumulus/">WP-Cumulus</a> ist der Name eines kleinen Plugins, welches aus eurer eher langweiligen 08/15 Tagcloud eine echte <em>interaktive</em> Wolke aus Links macht.</p>
<p>Definitiv ein Hingucker.</p>
<h3 id="wpsotd">&#8220;Song of the Day&#8221;-Widget</h3>
<hr/>
<div id="attachment_744" class="wp-caption alignright" style="width: 261px"><img src="http://www.normansblog.de/wp-content/uploads/2009/05/wp_sotd_fe.jpg" alt="Frontend Ausgabe" title="wp_sotd_fe" width="241" height="94" class="size-full wp-image-744" /><p class="wp-caption-text">Frontend Ausgabe</p></div></p>
<p>Oben genanntes Plugin diente übrigens meinem ersten Plugin als Vorlage. Ich habe das Grundgerüst übernommen und an mein &#8220;Song of the Day&#8221; &#8211; Plugin angepasst. Mein tägliches Lieblingslied wird ja schon länger hier angezeigt aber es ging mir ehrlich gesagt auf den Sack jedes mal das Textwidget dafür zu missbrauchen. Daher entschloss ich mich, eine geeignete Eingabemaske zu erstellen.</p>
<p>Einiges ist hier einstellbar, z.B. Albumcover, Verlinkung auf ein Video oder Wikiartikel, Größe des Albumcovers etc. Das Plugin lässt sich derzeit auf der Plugin-Seite meines Blogs runterladen. Ich hoffe ich kann es bis nächste Woche auch noch ins WordPress SVN hochladen. Viel Spaß damit! <img src='http://www.normansblog.de/wp-includes/images/smilies/icon_wink.gif' alt=';)' class='wp-smiley' /> </p>
<p><span class="download">Download: <a href="http://www.normansblog.de/wp-content/uploads/plugins/wp-songoftheday_1.0.zip">WP-SongoftheDay</a></span></p>
<h3 id="todo">Online To-Do-Liste</h3>
<hr/>
<p>Und nun noch ein kleines aber feines Tool, das vielleicht für den einen oder anderen nützlich sein könnte: eine To-Do-Liste!</p>
<p>Das Teil nennt sich &#8220;<a href="http://www.pozdeev.com/mytinytodo/">myTinyTodo</a>&#8220;, arbeitet auf einer MySQL Datenbank, ist völlig kostenlos und steht unter der GPL. Es gibt auch eine <a href="http://www.pozdeev.com/mytinytodo/demo/">Live-Demo</a> der aktuellen Version. Alles ist einfach und übersichtlich gehalten (bei einer To-Do-Liste ist ja auch eigentlich nichts weiter dran), die Einträge werden per AJAX ohne Neuladen der Seite eingefügt und können dann bearbeitet werden. So kann man z.B. die Priorität ändern, Notizen hinzufügen oder die Reihenfolge per Drag&#038;Drop ändern &#8211; alles ohne die Seite neuladen zu müssen. <img src='http://www.normansblog.de/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
<p>Ich hab das Script und das Stylesheet noch verändert, damit alles zu meinem Blog passt.</p>
<div id="attachment_745" class="wp-caption aligncenter" style="width: 320px"><a class="shutterset_" href="http://www.normansblog.de/wp-content/uploads/2009/05/todo_1.jpg"><img src="http://www.normansblog.de/wp-content/uploads/2009/05/todo_1-300x145.jpg" alt="Aus der normalen Version wird kurzerhand..." title="todo_1" width="300" height="145" class="size-medium wp-image-745" /></a><p class="wp-caption-text">Aus der normalen Version wird kurzerhand...</p></div> <div id="attachment_746" class="wp-caption aligncenter" style="width: 320px"><a class="shutterset_" href="http://www.normansblog.de/wp-content/uploads/2009/05/todo_2.jpg"><img src="http://www.normansblog.de/wp-content/uploads/2009/05/todo_2-300x207.jpg" alt="... eine angepasste Version." title="todo_2" width="300" height="207" class="size-medium wp-image-746" /></a><p class="wp-caption-text">... eine angepasste Version.</p></div>
<hr/>
<p>Puh, das war mal wieder eine ganze Menge zu schreiben. Hoffentlich war es nicht langweilig, bis später. <img src='http://www.normansblog.de/wp-includes/images/smilies/icon_wink.gif' alt=';)' class='wp-smiley' /> </p>
]]></content:encoded>
			<wfw:commentRss>http://www.normansblog.de/n-like-new-features/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
