kulturbanause blog » Plugins

Navigationen für die mobile Ansicht in Select-Listen umwandeln: TinyNav.js

Jonas Hellwig — Mon, 30 Jan 2012 08:01:00 +0000

Umfangreiche Navigationen auf Smartphones benutzerfreundlich darzustellen ist gar nicht so einfach. Zwar ist es normalerweise problemlos möglich die Darstellung für den kleinen Bildschirm anzupassen - beispielsweise indem man alle Links untereinander abbildet - dann muss der Besucher aber erst über eine lange Liste an Links hinwegscrollen um den Content zu erreichen. Insbesondere bei Blogs will der Besucher aber häufig den neuesten Artikel lesen und nicht erst die Navigation sehen.
Das winzige jQuery-Plugin TinyNav wandelt ausgewählte Listen in Select-Listen um. Die sparen Platz und lassen sich auch auf Smartphones einfach bedienen.

Geringe Dateigröße, einfache Handhabung

Das Plugin ist gerade einmal 304 Bytes groß und lässt sich kinderleicht in die Website integrieren. Nachdem jQuery und TinyNav.js geladen wurden, muss die gewünschten Liste (ul oder ol) mit einer ID ausgezeichnet werden. Anschließend wird die ID an das Plugin übergeben und die Liste kann wie gewohnt per CSS gestaltet werden.

Das Plugin selbst nutzt die Klasse .tinynav, die ebenfalls über CSS angesprochen werden kann, und mit Hilfe von Media Queries ein- und ausgeblendet wird.

TinyNav funktioniert laut Entwickler in folgenden Browsern: Internet Explorer 6,7,8,9, Firefox 6,8, Safari 5, Chrome 15, Opera 11.5, iOS Safari, Opera Mobile 10.1, Opera Mini for iOS, IE7 Mobile, Firefox Mobile, Android browser, Kindle browser

tinynav.viljamis.com

Ein vergleichbares, allerdings etwas größeres Script ist übrigens "Responsive-Menu". Solltet ihr mit TinyNav nicht zurecht kommen, lohnt es sich auch diese Lösung einmal anzuschauen.

github.com/mattkersley/Responsive-Menu

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Responsive Image Replacement mit Breakpoints: Doubletake

Jonas Hellwig — Thu, 26 Jan 2012 18:31:50 +0000

Im Responsive Webdesign werden Bilder häufig proportional verkleinert um sie auch auf kleinen Displays noch ansehnlich darstellen zu können. Auch auf dieser Seite nutze ich diese Technik; sobald der Inhaltsbereich zu schmal wird, werden die Bilder prozentual zur Gesamtbreite des Inhalts abgebildet.
Diese Variante ist zwar sehr komfortabel - leider werden aber deutlich größere Bilddaten geladen als es für Smartphones überhaupt notwendig ist. Um die Ladezeiten und den Traffic für Besucher mit mobilen Endgeräten gering zu halten, kann es sich daher lohnen verschiedene Bilder für verschiedene Auflösungen anzubieten. Das jQuery-Plugin Doubletake vereinfacht diese Technik.

Breakpoints und Regular Expressions

Das Plugin arbeitet mit Breakpoints für verschiedene Browsergrößen. Sobald ein Breakpoint erreicht wird, kann über ein Regular Expression Muster der Pfad zum Bild ausgetauscht werden.

$('#container').doubletake({
'breakpoints':[480,960],
'pattern':'/images/foobar.jpg?width=([0-9]+)'
});

Um verschiedene Bildgrößen laden zu können müssen auch verschiedene Bilder auf dem Server abgelegt werden. In WordPress könnt ihr sehr einfach über das Theme verschiedene Abmessungen definieren, die dann automatisch beim Upload in die Mediathek generiert werden. Alternativ zu einer On-The-Fly-Optimierung, können die Bilder auch manuell erstellt und anschließend hochgeladen werden.

grahambird.co.uk/lab/doubletake

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

WordPress Custom Post Types um Sticky-Funktion erweitern

Jonas Hellwig — Sat, 05 Nov 2011 10:12:24 +0000

Normalerweise ist es in WordPress möglich, Artikel auf "sticky" zu setzen und somit im Loop oben zu halten. In der deutschen Version nennt sich die Funktion "auf der Startseite halten" und wird im Editor in der rechten Seitenleiste im Bereich "Status" angezeigt.
Wenn ihr allerdings WordPress um Custom Post Types erweitert habt, fehlt dort die Sticky-Funktion. Es gibt verschiedene Wege, sie nachzurüsten.

Sticky Custom Post Types Plugin

Die einfachste Lösung um die Sticky-Funktion auch für Custom Post Types nachzuinstallieren, ist die Verwendung des gleichnamigen Plugins. Das Plugin hat vor allem den Vorteil, dass es einfach wieder deinstalliert werden kann, sobald das Feature in der offiziellen WordPress-Installation integriert wurde. Wann das passiert, ist allerdings nicht klar - ein Report mit wechselndem Status zu diesem Feature existiert jedoch bereits. core.trac.wordpress.org/ticket/12702

Das Plugin funktioniert wunderbar, kann allerdings zu Problemen führen, wenn ihr andere Plugins im Einsatz habt, die ebenfalls von Custom Post Types Gebrauch machen. Das bekannte Meteor Slideshow-Plugin hat bei mir beispielsweise plötzlich nichtmehr wie gewünscht gearbeitet.

Sticky Custom Post Types Plugin

Nachdem Ihr das Plugin installiert und aktiviert habt, findet ihr die Einstellungen dazu übrigens unter "Einstellungen → Lesen".

Benutzerdefinierte Felder verwenden

Je nachdem wie ihr geplant habt die Sticky-Funktion zu verwenden, bietet es sich auch an, Benutzerdefinierte Felder einzusetzen. Ein mögliches Beispiel: Mal angenommen ihr möchtet ein Portfolio aufbauen und dort bestimmte "Top-Referenzen" immer vor allen anderen anzeigen. Zu diesem Zweck könnt ihr ein Benutzerdefiniertes Feld, im Idealfall eine Checkbox, namens "Top" anlegen und anschließend abfragen ob der Wert dieses Feldes true oder false ist.
Im Template gebt ihr dann zwei Custom Loops hintereinander aus. Der erste zeigt nur Top-Refenzen, der zweite alle Referenzen die nicht "Top" sind. Dazu könnt ihr die Benutzerdefinierten Felder im Query auslesen.

Das folgende Beispiel zeigt einen Query in dem der Custom Post Type "Referenzen" mit dem Benutzerdefinierten Feld "Top" und den Value "Ja" berücksichtigt wird.

 'referenzen',
  'posts_per_page' => -1, // = alle Beiträge anzeigen
  'meta_key' => 'top',
  'meta_value' => 'Ja'
);

query_posts( $args );
while ( have_posts() ) : the_post();

// Inhalt des Loops

endwhile;
wp_reset_query();
?>

Um Benutzerdefinierte Felder zu verwalten lohnt sich übrigens ein Blick auf das Plugin "More Fields".

Natürlich besteht auch die Möglichkeit den WordPress-Core zu "hacken" um die Funktion zu ermöglichen. Da ihr WordPress dann jedoch nicht mehr ohne Weiteres updaten könnt, halte ich diese Variante für unbrauchbar.

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Responsive Webdesign: Media Queries auch im IE6, IE7, IE8 … nutzen

Jonas Hellwig — Mon, 12 Sep 2011 06:37:35 +0000

Der Begriff des "Responsive Webdesign" beschreibt die Technik über CSS3 Media Queries eine Website für verschiedene Displaygrößen oder Bildschirmauflösungen zu optimieren. Wie das im Detail funktioniert habe ich bereits in einem Tutorial ausführlich erklärt. Leider unterstützt der Internet Explorer 6-8 keine Media Queries; folglich wird die optimierte Version der Website auch nicht angezeigt wenn der Besucher mit einem veralteten Internet Explorer unterwegs ist.
Nun könnte man einwenden, dass Media Queries in erster Linie für die Optimierung auf Smartphones genutzt werden und die Optimierung auf Desktop-Rechnern nicht so wichtig ist. Sicher ist die Optimierung für Handys und Tablets wichtiger - aber auch Desktop-Rechner und Notebooks unterscheiden sich in der Displaygröße mittlerweile deutlich und sollten bei der Konzeption entsprechend beachtet werden. Ein kleines JavaScript namens "respond.js" rüstet die fehlende Interpretation von Media Queries im Internet Explorer nach.

respond.js

Das Script liegt in der Quellversion sowie in einer komprimierten Version auf GitHub bereit. Darüber hinaus existiert auch ein WordPress-Plugin das ich der Vollständigkeit halber auch erwähnen möchte. Ob es sinnvoll ist eine solche Funktion per Plugin nachzurüsten sollte jeder selbst entscheiden. Ich bin der Meinung die Funktion gehört direkt ins Theme.

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Maximale Bildkompression: JPEGmini vs. Smush.it vs. PunyPNG

Jonas Hellwig — Tue, 06 Sep 2011 21:33:41 +0000

Geringe Dateigrößen sind nach wie vor ein wichtiger Anhaltspunkt um die Qualität einer Website zu beurteilen. Zwar wird das lokale Internet immer schneller und verkraftet auch größere Dateien, doch das mobile Web erreicht diese Übertragungsgeschwindigkeiten längst nicht. Und auch die Suchmaschinen berücksichtigen die Ladezeit einer Website und listen schnelle Seiten weiter vorne.
Eine von vielen Möglichkeit um die Ladezeit zu reduzieren, sind optimal komprimierte Grafiken. Wer jetzt glaubt, der "Für Web speichern"-Dialog von Photoshop würde ausreichen, der irrt. Photoshop erzeugt außergewöhnlich große Dateien und ist selbst innerhalb der Creative Suite nicht die erste Wahl. Fireworks komprimiert Bilder bei identischen Exporteinstellungen deutlich besser.
Wer Fireworks nicht besitzt, oder wem der Umweg vom Photoshop-Layout über den Fireworks-Export zu lästig ist, kann auf Online-Tools zur Bildkompression zurückgreifen. Ich habe mir drei gängige Dienste angeschaut und möchte euch zeigen welches Tool für welches Bild am besten geeignet ist.

Wie wurde getestet?

Ich habe mir für meinen Test drei prominente Dienste ausgesucht: JPEGmini, PunyPNG und Yahoo Smush.it. Bei allen Diensten habe ich mir die Standard-Funktionalität ohne Benutzeraccount angeschaut. Es ging mir in erster Linie darum, die Dateigröße der optimierten Grafik zu beurteilen. Erweitere Funktionen wie die Verwaltung von Alben, der Upload zu Online-Bilddatenbanken etc. waren für mich nebensächlich.

Ich habe für meinen Test vier JPG-Dateien und drei PNGs erstellt und bei allen Diensten hochgeladen. Bei diesen Dateien handelt es sich um typische Grafiken die ich im Web verwende. GIF-Dateien kommen aufgrund ihrer schlechten Kompression generell nicht in Frage.

Das Ergebnis: JPEGmini für JPGs, Smush.it als Allrounder

Das Ergebnis hat mich ehrlich gesagt selbst überrascht. JPEGmini erzeugte bei JPG-Grafiken die mit Abstand kleinsten Dateien. Allerdings muss erwähnt werden, dass bei JPEGmini sehr geringe optische Unterschiede erkennbar sind. Diese sichtbare Kompression ist vor allem bei scharfen Kanten erkennbar - kann meiner Meinung nach allerdings vernachlässig werden.
PunyPNG und Smush.it erzeugten bei der JPG-Kompression etwa gleich große Dateien. Ein großer Nachteil von PunyPNG ist jedoch die Upload-Begrenzung auf 150KB. Mit einem Pro-Account kann die erlaubte Dateigröße auf 500KB erhöht werden.

Bei der Kompression von PNG-Files scheidet JPEGmini aus. Hier können nur JPG-Dateien komprimiert werden. PunyPNG und Smush.it erlauben die Kompression von PNG und erzeugten erneut vergleichbare Ergebnisse. Ärgerlich ist allerdings auch hier der geringe Upload von PunyPNG.

Ausgangsbild	JPEGmini	PunyPNG	Smush.it
336 KB (*.jpg)	119 KB	Upload nur bis 150 KB	324 KB
270 KB (*.jpg)	57 KB	Upload nur bis 150 KB	258 KB
78 KB (*.jpg)	23 KB	71 KB	69 KB
115 KB (*.jpg)	25 KB	106 KB	106 KB
561 KB (*.png)	Upload nur von JPG-Dateien	Upload nur bis 150 KB	516 KB
147 KB (*.png)	Upload nur von JPG-Dateien	135 KB	135 KB
49 KB (*.png)	Upload nur von JPG-Dateien	45 KB	45 KB

Benutzerfreundlichkeit

Neben der reinen Qualität der Ergebnisse spielt auch die Benutzerfreundlichkeit eines Dienstes eine große Rolle.

Bei PunyPNG und bei Smush.it können auch ohne Benutzeraccount mehrere Dateien parallel hochgeladen und komprimiert werden. PunyPNG begrenzt diese Zahl jedoch auf 15 Dateien. JPEGmini erlaubt ohne Account nur den Upload von einzelnen Dateien, was den Workflow durchaus behindert.

Der Download der komprimierten Dateien sieht ebenfalls sehr unterschiedlich aus. Sofern nur eine Datei hochgeladen wird, stellt PunyPNG die Datei unter dem Original-Dateinamen zur Verfügung. Die Ursprungsdateien können also einfach überschrieben werden. Smush.it stellt immer ein ZIP-Dokument zur Verfügung und JPEGmini ergänzt den Dateinamen um den Suffix "_mini". Insbesondere der Suffix ist natürlich sehr unpraktisch, da die Dokumente manuell umbenannt werden müssen.

Fazit

Tja - welcher Dienst soll es nun sein? PunyPNG scheidet für mich ganz klar aus. Zwar war ich bisher ein großer Fan dieses Dienstes, habe aber jetzt die Grenzen kennengelernt. PunyPNG schränkt den Benutzer einfach an zu vielen Stellen ein: Maximal 15 Dateien im Upload bei maximal 150 KB Dateigröße sind zu schwach. Vor allem, da die optimierten Dateien ähnlich groß sind wie bei Smush.it.

Smush.it lässt sich hingegen optimal in meinen Workflow integrieren. Es können beliebige Grafikformate hochgeladen werden, es existiert keine wirkliche Begrenzung in der Upload-Größe und es ist auch möglich mehrere Dateien parallel hochzuladen. Die Ausgabe erfolgt zwar als ZIP-Archiv, innerhalb des Archivs werden allerdings die ursprünglichen Dateinamen beibehalten. Für Smush.it existiert sogar ein WordPress-Plugin das Dokumente beim Upload in die Mediathek automatisch komprimiert. Praktischer geht es kaum noch.
JPEGmini hat mich überrascht. Zwar ist das Tool nicht besonders komfortabel, die Dateigröße ist allerdings unschlagbar gering. Ich werde mit Sicherheit in Zukunft meine JPG-Layout-Grafiken mit JPEGmini manuell komprimieren.

Update: Fehlerhafte Skalierung im Responsive Webdesign

Ich habe noch einen schweren Bug im mobilen Safari entdeckt. Nachdem ich die Hintergrundgrafik meiner Seite mit JPEGmini komprimiert hatte, wurde die dem body zugewiesene Grafik auf dem iPad falsch skaliert. Ich gehe davon aus, dass es mit dem nach der Kompression fehlenden Datei-Header und dem im Responsive Design festgelegten Skalierungsfaktor zu tun hat. Ihr solltet diesen Fehler im Hinterkopf behalten und nach einer Optimierung kontrollieren. Bei Elementen mit einer zugewiesenen Breite (wie dem Footer-div) trat dieses Problem nicht auf.

Artikelbild von iconfinder.com/icondetails/9040/128/compressed_image_svg%2Bxml_icon

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

WebP-Grafiken mit Photoshop-Plugin erstellen

Jonas Hellwig — Mon, 30 May 2011 04:30:07 +0000

"Let's make the web faster". Unter diesem Leitspruch entwickelt Google unzählige Tools, Programme und Techniken um sowohl für Entwickler als auch für Anwender die Arbeit mit dem Internet so angenehm wie möglich zu gestalten. Angefangen beim hauseigenen Browser Chrome, über die Relevanz der Website-Ladezeiten für die Suchmaschinen-Platzierung, bis hin zu Webfont-Bibliotheken: die Performance einer Website wird immer wichtiger. Vor einiger Zeit wurden die Entwickler von Google beauftragt, eine neue Dateikompression für Grafiken zu erarbeiten. Die neue Bilddatei sollte mindestens der Qualität von JPG entsprechen, jedoch deutlich kleinere Dateien erzeugen. Das Ergebnis dieser Entwicklung ist das neue Grafikformat WebP (gesprochen "Weppy"). Doch leider kennt Photoshop das Format noch nicht.

Vor- und Nachteile von WebP

Das WebP-Dateiformat erzeugt bei JPG-ähnlicher Qualität knapp 40% kleinere Dateien. Das ist natürlich einiges und könnte so manche Website deutlich beschleunigen bzw. den Server entlasten. Google demonstriert und vergleicht das neue Dateiformat in einer kleinen Galerie.

WebP-Gallery

Der größte Nachteil an WebP ist der spärliche Browser-Support. Aktuell unterstützen nur Google Chrome und Opera das Dateiformat. Um WebP effektiv in Websites einsetzen zu können, müssten jedoch alle großen Browserhersteller das Dateiformat unterstützen. Auch Photoshop unterstützt in der neusten Version nach wie vor kein WebP. Das ist mir persönlich unerklärlich, da vor kurzem erst Updates erschienen sind. Glücklicherweise kann die Funktion per Plugin nachinstalliert werden.

WebP für Photoshop nachrüsten

Zunächst müsst ihr das Download-Paket von telegraphics.com.au/sw/product/WebPFormat herunterladen. Das Plugin steht für die Photoshop-Versionen CS2, CS3, CS4 und CS5 zur Verfügung.

Öffnet die Photoshop-Installation auf eurer Festplatte und sucht dort den Ordner "Plug-ins". Innerhalb dieses Ordners erstellt ihr einen neuen Ordner namens "WebP" und kopiert die Plugin-Datei WebPFormat.plugin in diesen Ordner. Anschließend startet ihr Photoshop einmal neu.

WebP in Photoshop nutzen

Innerhalb von Photoshop steht euch nun unter "Speichern" WebP als zusätzliches Dateiformat zur Verfügung. Das Dateiformat wurde jedoch nicht in den "Für Web und Geräte speichern"-Dialog integriert.

Wenn ihr WebP als Dateiformat ausgewählt habt, so habt ihr im darauffolgenden Dialog die Möglichkeit einige Qualitäts-Einstellungen vorzunehmen. Ähnlich wie bei JPG könnt ihr hier die Qualität in Prozent festlegen. Darüber hinaus lässt sich eine Rauschreduzierung und Bildschärfung einstellen.

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

WordPress-Backups automatisch in die Dropbox speichern

Jonas Hellwig — Tue, 10 May 2011 04:00:40 +0000

Spätestens wenn der Server ausfällt, wissen wir alle wie wichtig es ist ein funktionierendes, aktuelles und vollständiges Backup der WordPress-Installation zur Hand zu haben. Da manuelle Backups viel zu häufig vergessen werden, sollte das Backup vollautomatisch in regelmäßigen Abständen durchgeführt werden. Ich selbst lasse mir beispielsweise morgens und abends Sicherungskopien erstellen und in der Cloud abspeichern. So habe ich immer Zugriff auf das Backup - egal wo ich mich befinde.
Ein neues WordPress-Plugin ermöglicht es nun ein zeitgesteuertes Backup aller Dateien und der Datenbank anzufertigen und gezippt in der Dropbox abzulegen.

Dropbox-Account einrichten und das Plugin installieren

Um das Plugin verwenden zu können benötigt Ihr natürlich einen Dropbox-Account. 2GB Online-Speicherplatz bietet Dropbox gratis an. Wer Freunde einlädt kann den kostenlosen Speicher auch noch erhöhen. Solltet Ihr also noch keinen Dropbox-Account haben, so meldet euch doch bitte über folgenden Link an - dann kann ich mein Volumen noch ein wenig erweitern. ;)

Dropbox-Partnerlink

Ladet euch von wordpress.org/extend/plugins/wordpress-backup-to-dropbox das Plugin herunter, entzippt es und verschiebt es in die Plugin-Directory (wp-content/plugins) auf eurem Webspace. Anschließend aktiviert ihr das Plugin wie gewohnt.
Beachtet bitte auch die Systemvoraussetzungen: PHP 5.2 mit ZIP-Support.

WordPress mit der Dropbox verknüpfen

Nach der Installation des Plugins werdet ihr aufgefordert die Dropbox zu verknüpfen. Dazu müsst ihr die Zugangsdaten der Dropbox eingeben.

Backup planen

In den Einstellungen des Plugins könnt ihr nun festlegen wann ein Backup erstellt werden soll und in welchen Ordner, innerhalb eurer Dropbox, es gespeichert werden soll.
Ihr seht auch wieviel Speicherplatz euch noch insgesamt zur Verfügung steht und könnt sogar festlegen wieviele Backups in der Dropbox gespeichert bleiben sollen. So müsst ihr nicht einmal ältere Backups manuell löschen um Speicherplatz freizugeben.

Nachdem ihr das Plugin konfiguriert habt, müsst ihr lediglich warten bis das erste geplante Backup in die Dropbox gespeichert wird.

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

WordPress 3.2 Mindestvoraussetzungen prüfen

Jonas Hellwig — Fri, 01 Apr 2011 10:05:41 +0000

WordPress 3.2 wird deutlich höhere Mindestvoraussetzungen an Euren Server stellen als das bisher bei WordPress der Fall war. So wird beispielsweise eine neuere PHP-Version benötigt.
Insbesondere bei kleineren Websites und Webspace-Paketen weiss der Blog-Betreiber häufig gar nicht welche Leistungen der eigene Server bietet und ob diese den Ansprüchen von WordPress 3.2 genügen. Abhilfe schafft das Plugin "WordPress Requirements Check".

Plugin herunterladen, installieren, löschen

Alles was Ihr tun müsst ist das Plugin installieren und aktivieren. Anschließend wird Euch direkt in der Plugin-Oberfläche angezeigt ob der Server die Voraussetzungen erfüllt oder ob Ihr Upgraden müsst.

Anschließend könnt Ihr das Plugin eigentlich auch direkt wieder löschen.

WordPress Requirements Check

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

WebM-Videos im Internet Explorer 9 abspielen

Jonas Hellwig — Mon, 21 Mar 2011 10:45:58 +0000

Bei WebM handelt es sich um einen recht neuen Video-Standard der unter anderem von Google entwickelt wurde aber auch seitens Mozilla und Opera gestützt wird. Der Vorteil liegt laut Google in einer besseren Performance und einem angenehmeren Lizenzmodell. In den drei entsprechenden Browsern Chrome, Firefox und Opera können WebM Videos nativ abgespielt werden. Microsoft und Apple hingegen benötigen in den aktuellen Browserversionen (noch?) ein entsprechendes Plugin um WebM-Videos abspielen zu können. Für den erst kürzlich veröffentlichten Internet Explorer 9 hat Google nun das entsprechende Plugin veröffentlicht.

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Microsofts IE6 Countdown inkl. WordPress Plugin

Jonas Hellwig — Tue, 15 Mar 2011 16:43:45 +0000

Vor kurzem hat Microsoft mit IE6Countdown eine eigene Seite zur „Ausrottung“ des Internet Explorer 6 veröffentlicht. Das Ziel dieser Seite besteht darin aufzuklären warum der IE6 nichtmehr zeitgemäß ist und wie Internet-User auf einen modernen Browser updaten können. Angeboten wird hier als Alternative natürlich die moderne Version des Internet Explorers 9.
Webdesigner können die Aktion mit der eigenen Website unterstützen. Über ein Code-Snippet oder das WordPress-Plugin.

Browser-Update in Website integrieren

Wenn Ihr die Aktion unterstützen möchtet, so könnt Ihr ein Code-Snippet in Eure HTML-Seite einbinden. Über einen Conditional Comment wird allen Besuchern mit älteren IE-Versionen ein Update angeboten.

Dienste dieser Art gibt es natürlich verschiedene – ich persönlich bevorzuge eine Methode die dem Besucher eine große Auswahl an verschiedenen, empfehlenswerten Browsern vorstellt.

Code-Snippet des IE6 Countdown

Alternativ könnt Ihr auch ein WordPress-Plugin verwenden. Allerdings integriert sich das Plugin nach der Installation nicht selbstständig in Euer Blog sondern muss über ein neues Template-Tag eingebunden werden. Hier stellt sich mir die Frage ob Ihr Euch durch das Plugin überhaupt Arbeit erspart – denn auch der Conditional Comment muss manuell eingebunden werden.

Das WordPress-Plugin findet Ihr in der offiziellen Plugin-Directory

IE6 Countdown WordPress-Plugin

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Jetpack für WordPress

Jonas Hellwig — Tue, 15 Mar 2011 16:12:54 +0000

Automattic hat ein vergangene Woche mit Jetpack ein umfangreiches Plugin für Benutzer einer selbstgehosteten WordPress-Version veröffentlicht.
Jetpack erweitert hierbei die Standard-Installation um Funktionen die bisher nur Nutzern von WordPress.com vorbehalten waren. Somit stehen jetzt beispielsweise die Gravatar Hovercards oder das Korrektur-Plugin „After The Deadline“ zur Verfügung. Weitere Features sollen folgen.

Einfache Installation

Jetpack lässt sich installieren wie jedes gewöhnliche Plugin. Während der Installation deaktiviert Jetpack dann automatisch überflüssig gewordene Plugins. Allerdings wird für Jetpack ein WordPress.com-Account benötigt. Solltet Ihr also noch kein Benutzerkonto haben, so müsst Ihr Euch nach der Installation registrieren.

Eine vollständige Liste aller in Jetpack enthaltener Features findet Ihr auf der offiziellen Website.

Jetpack

via: WP Magazin

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

WordPress-Plugin: User Submitted Posts

Jonas Hellwig — Mon, 28 Feb 2011 21:29:03 +0000

Ab und zu mag es vorkommen, dass Ihr Besuchern das selbstständige Hinzufügen von Content ermöglichen wollt. Auf Anhieb fallen mir hierfür drei Szenarien ein: Ein Online-Showcase auf dem User Ihre eigene Website anmelden und über einen Screenshot bewerben können, das Schreiben von Gastartikeln und die Möglichkeit Links, Tipps etc. zu veröffentlichen. Sicher habt Ihr noch viel mehr Ideen.
Bei all diesen Lösungen ist es sinnvoll den neuen Inhalt nicht automatisch zu publizieren sondern zunächst in die Warteschleife zu legen. Nachdem der Beitrag von einem Administrator überprüft worden ist wird er dann veröffentlicht. Für genau diese Lösungen gibt es jetzt ein WordPress-Plugin.

Plugin-Funktionen

Das Plugin ermöglicht es Euch einige wichtige Optionen festzulegen. So solltet Ihr zunächst die gewünschten Eingabemöglichkeiten bestimmen. Hierbei habt Ihr die Wahl zwischen Titel, URL, Name, Tags, Kategorie, Inhalt und eventuellen Bilduploads. Anschließend kann das Plugin wahlweise per Template-Tag oder Shortcode in das Template (z.B. sidebar.php, single.php) oder den Artikel eingebunden werden. An der entsprechenden Stelle erschein dann ein Formular mit den zuvor festgelegten Eingabefeldern.

Neben dem Umfang des Formulars könnt Ihr auch festlegen welchem Benutzer der neue Artikel zugewiesen werden soll, ob der Artikel sofort veröffentlicht wird oder ob der Beitrags als Entwurf gespeichert werden soll. Auch die minimale oder maximale Anzahl an Bilduploads, Dateigrößen oder Dimensionen kann ebenso bestimmt werden wie die Kategorie in welcher der Inhalt abgelegt wird. Sogar eine Weiterleitung nach Absenden des Formulars oder die Fehlermeldung lassen sich individuell anpassen.

WordPress-Plugin: User Submitted Posts

via perishable press

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

WordPress-Editor für Facebook-iFrame-Tabs nutzen

Jonas Hellwig — Mon, 21 Feb 2011 13:29:29 +0000

Mit den neuen iFrame-Tabs von Facebook haben Webdesigner jetzt die Möglichkeit noch einfacher individuellen Code zu Fan-Pages hinzuzufügen. Und kaum sind die neuen Seiten veröffentlicht gibt es auch schon ein entsprechendes WordPress-Plugin dazu.
Mit dem WordPress-Plugin "Facebook Tab Manager" könnt Ihr den WordPress-Editor und das WordPress-Backend verwenden um die Inhalte für Euer Facebook-iFrame-Tab zu verwalten.
Nach der Plugin-Installation könnt Ihr im WP-Backend Facebook-Tabs so verwalten wie dies auch mit normalen Seiten und Artikeln geht. Der Vorteil ist, dass Ihr die Facebook-Inhalte schön strukturieren könnt und, dass innerhalb des Editors noch weitere Einstellungen zur Verfügung stehen die für Facebook-iFrame-Tabs nötig sind.

Innerhalb des Editors könnt Ihr sowohl alle Facebook-Inhalte komfortabel verfassen und editieren als auch den zur Gestaltung des iFrame-Tabs nötigen CSS-Code schreiben. Auch WordPress-Filter können eingesetzt werden und individuell aktiviert bzw. deaktiviert werden um Fehldarstellungen - z.B. durch Plugins - zu vermeiden.

Um das Plugin nutzen zu können solltet Ihr mit der Integration von iFrame-Apps in Facebook vertraut sein. Wie das geht habt ich in einem vorherigen Beitrag bereits erklärt.

Was haltet Ihr von diesem Plugin? Würdet Ihr es selbst einsetzen oder haltet Ihr es für überflüssig? Würdet Ihr das Plugin für Kunden-Websites mit Facebook-Anbindung verwenden um den Kunden die Arbeit zu erleichtern?

Facebook-Tab-Manager für WordPress

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Firefox-Plugin: WordPress Helper

Jonas Hellwig — Mon, 31 Jan 2011 13:38:25 +0000

Das Plugin WordPress-Helper erweitert den Firefox um nützliche und praktische Tools rund um WordPress. Neben beschleunigter Navigation innerhalb des Admin-Bereichs und der WordPress Dokumentation wird man beispielsweise auch über Updates informiert, kann durch automatisch ausgefüllte Formulare schneller Kommentare schreiben, erhält Linktipps zum Thema, kann Website-Profile anlegen, erkennt ob die aktuell aufgerufene Website WordPress nutzt uvm.

Kennt jemand eine vergleichbare Extention für Chrome oder Safari?

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

WordPress-Plugin: Scroll-To-Top

Jonas Hellwig — Mon, 17 Jan 2011 11:16:47 +0000

Ihr kennt sicher das Problem: Man befindet sich auf einer sehr langen Website weit unten im Artikel und möchte zurück nach oben. Leider hat der Webdesigner keinen "Zurück nach oben"-Button in die Seite integriert (wie auch ich hier ... ). Nun muss kräftig gescrolled werden.
Selbstverständlich ist es technisch nicht aufwändig einen solchen Button in die Seite zu integrieren. Das folgende WordPress-Plugin erledigt die Sache aber denkbar einfach und hat darüber hinaus ein paar schöne Einstellungsmöglichkeiten die dann doch nicht ganz so einfach umzusetzen sind.

Das Plugin fügt der Seite einen simplen "Scroll-To-Top"-Button auf jQuery-Basis hinzu. Achtet darauf, dass das Plugin schreibrechte auf den Plugin-Ordner bekommt, sonst funktioniert es leider nicht. Nach der Aktivierung können dann verschiedene Einstellungen vorgenommen werden:
Zunächst kann gewählt werden wo auf der Seite der Button erscheinen soll. Also oben rechts, oben links, unten rechts oder unten links. Auch der Pixel genaue Abstand zum Rand kann eingestellt werden.
Um den Button optisch an die Seite anzupassen kann aus einer Reihe von vordefinierten Buttons gewählt werden. Wem das nicht gefällt der lädt einfach eine eigene Grafik hoch.

Besonders schön finde ich die Möglichkeit den Button erst dann einzublenden wenn der Besucher beginnt die Seite zu scrollen. Insbesondere diese Funktion dürfte für Blogger die mehr auf den Inhalt der Website als auf die Technik fixiert sind eine große Arbeitserleichterung darstellen.

Das Plugin kann in der Plugin-Directory heruntergeladen werden:

ScrollToTop-WordPress-Plugin

via: WPMU

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Gravatar Hovercards Plugin für Self Hosted WP Blogs

Jonas Hellwig — Thu, 28 Oct 2010 08:02:02 +0000

Vor einigen Tagen habe ich ja das neue Feature "Hovercard" vorgestellt und in diesem Zuge auch erwähnt, dass es bis dato nur für auf wordpress.com gehosteten Blogs zur Verfügung steht. Nun ist ein erstes Plugin erschienen was Gravatar Hovercards auch auf Self Hosted Blogs ermöglicht. Ich hatte bisher leider keine Zeit das Plugin zu testen. Über erste Erfahrungsberichte bin ich also sehr dankbar!

WordPress Plugin Directore: Gravatar Hovercards

Wenn Ihr wissen wollt wie Ihr Hovercards unter BuddyPress aktiviert, so hilft Euch sicher folgendes Mini-Tutorial weiter.

Add Gravatar Hovercard to BuddyPress member profile pages

via wpmu.org

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

WordPress-Plugins auf Bestellung: Pluginize

Jonas Hellwig — Sat, 04 Sep 2010 11:30:45 +0000

Es gibt unzählige WordPress-Plugins mit denen Ihr Eure Standard-Installation Euren Ansprüchen entsprechend anpassen könnt. Allein in der offiziellen Plugin-Directory von WordPress stehen über 11.000 Plugins zur Verfügung; dazu kommt noch eine unbekannte Zahl an im Web auf privaten Seiten versteckten Downloads. Doch was ist wenn es das gewünschte Plugin ganz einfach nicht gibt und Ihr auch keine Möglichkeit habt es selbst zu erstellen? Genau hier springt die Website pluginize.com in die Bresche.

Auf Pluginize könnt Ihr ein individuelles Plugin erstellen lassen (ab 250$) oder ein bestehendes Plugin erweitern (ab 100$). Alle erstellten Plugins unterliegen nach abgeschlossenem Auftrag der GPL Lizenz die auch für WordPress selbst gültig ist.

Pluginize

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Gratis Photoshop-Plugins von OnOne

Jonas Hellwig — Mon, 15 Mar 2010 17:11:42 +0000

OnOne Software ist bekannt für erstklassige und mehrfach ausgezeichnete Photoshop-Plugins. Heute bin ich darüber gestolpert, dass einige dieser Plugins gratis auf der Herstellerseite heruntergeladen werden können. Momentan stehen die Extentions "Phototools 2.5", "Photoframe 4.5", "Lightroom Presets" und "Camera Raw Presets" zum Download bereit. Viel Spass damit! Gratis Photoshop-Plugin von OnOne-Software Jetzt bist Du gefragtGefällt Dir …

Diesen Beitrag zu Ende lesen

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Gridmaker für Photoshop CS4

Jonas Hellwig — Mon, 08 Feb 2010 23:24:10 +0000

Wer in Photoshop häufig mit Rastern arbeitet kennt das Dilemma zu Beginn eines neuen Layouts das Raster mühsam von Hand anlegen zu müssen.
Klar, es gibt Alternativen wie zum Beispiel eine Photoshop-Vorlage von 960.gs. Aber auch das dauert manchmal einfach zu lange oder das Raster soll anhand individueller Werte erstellt werden.
Andrew Ingram hat ein Photoshop-Plugin entwickelt welches automatisch nach Angabe einiger Basiswerte das Raster erstellt. Soweit nichts Neues, Plugins dieser Art gibt es viele - dieses Plugin funktioniert jedoch einfach super und ist kinderleicht zu bedienen. Das Plugin läuft bei mir nur auf Version CS4. Für die CS5 wird aber ~~hoffentlich~~ sicher zeitnah ein Update bereitgestellt sobald die CS5 final veröffentlicht wurde.

Plugin installieren

Ladet Euch einfach unter nachfolgendem Link die zwei Installationsdateien herunter und kopiert sie in Euer Photoshop Verzeichnis unter "Plug-Ins/Panels". Anschließend steht das Bedienfeld innerhalb von Photoshop unter "Fenster → Erweiterungen → GridMaker" zur Verfügung.

Gridmaker for Photoshop CS4

via: Designer In Action

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Top 5 Firebug-Plugins

Jonas Hellwig — Sat, 11 Jul 2009 07:46:43 +0000

Die enorm beliebte und im täglichen Workflow unverzichtbar gewordene Firefox-Extention Firebug sollte den meisten Besuchern ein Begriff sein. Mit diversen Plugins & AddOns kann Firebug noch weiter getuned werden! Hierbei können die Funktionen den individuellen Vorlieben optimal angepasst werden.
Da in den letzten Tagen vermehrt Infos über Firebug in der Blogphäre zu lesen waren, halte ich es für einen guten Zeitpunkt Euch meine persönliche Top 5 der AddOns vorzustellen.

FireQuery

Seit kurzer Zeit ist FireQuery auf dem Markt, allerdings noch in der experimentellen Testphase. Das Plugin erweitert Firebug um jQuery-Funktionen.

Link: FireQuery

Widerbug

Habt Ihr Euch auch schon über die horizontale Ausrichtung von Firebug geärgert? Diese Zeiten sind nun vorbei! Mit Widerbug wird der Browser vertikal getrennt und bietet so eine optimale Sicht auf Website und Firebug.

Link: Widerbug

FirePHP

FirePHP erweitert die Firebug-Console um PHP-Messages.

Link: FirePHP

Firefinder

Mit der Extention Firefinder lassen sich nun HTML-Elemente anhand von ausgewählten CSS-Selektoren anzeigen. Gleiches gilt für XPath.

Link: Firefinder

PixelPerfect

Mit PixelPerfect ist pixelgenaue Website-Umsetzung kein Problem mehr. Über der Website kann nun das Layout semitransparent eingeblendet werden. Anschließend können entsprechende Korrekturen optimal vorgenommen werden bis beide Ansichten übereinstimmen. Per Drag and Drop kann das Layout positioniert werden, es lassen sich verschiedene Transparenzstufen wählen und mehrere Grafiken einbinden.

Link: PixelPerfect

CodeBurner

Als Nice2Have stelle ich als sechsten Punkt dieser Top 5 noch das Plugin Codeburner vor. CodeBurner erweitert Firebug um eine Referenzbibliothek für HTML-Elemente, HTML-Attribute und CSS-Selektoren. Ist das Element identifiziert, so erhält man Infos über eine beispielhafte Verwendung sowie über die Browserkompatibilität des Elements.

Link: CodeBurner

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Firebug für Internet Explorer, Safari & Opera

Jonas Hellwig — Tue, 07 Jul 2009 15:30:27 +0000

Wer sich bisher immer geärgert hat, dass Firebug nur im Firefox funktioniert der hat nun allen Grund zur Freude! Mit Firebug Light kann der unverzichtbare Web-Development-Helfer auch im Internet Explorer (IE), Safari und Opera aktiviert werden. Das ist besonders praktisch, da für gewöhnlich im Internet Explorer einiges mehr an Bugfixing notwendig ist als im Firefox.
Dies alles ist zwar nicht wirklich neu, aber besser man erfährt es spät als nie.

Firebug Lite einbinden

Die Aktivierung von Firebug Lite ist kinderleicht. Kopiert einfach folgendes JavaScript-Snippet in den head Eurer Seite und schon wird Firebug Lite im Internet Explorer, Opera und Safari angezeigt.

Selbstverständlich muss das JavaScript nach dem Bugfixing wieder entfernt werden ;)

Firebug-Lite-Website

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Favicon-Generator adé. Favicons mit Photoshop

Jonas Hellwig — Wed, 20 May 2009 18:17:02 +0000

Ich habe bisher zum Erstellen von Favicons immer Online-Favicon-Generatoren benutzt. Heute habe ich, sowohl erfreut als auch peinlich berührt, zur Kenntnis genommen, dass es dafür ein Photoshop-Plugin gibt.
In der Hoffnung nicht der Einzige zu sein an dem diese Tatsache vorbeigegangen ist, erkläre ich Euch kurz wie das Ganze funktioniert.

Plugin herunterladen und aktivieren

Zunächst ladet Ihr Euch das entsprechende Plugin herunter und aktiviert es. Die "Installation" sieht folgendermaßen aus: Unter OSX entpackt ihr das dmg-File und verschiebt anschließend die Datei "ICOformat.plugin" in den Plugin-Ordner von Photoshop. Standardmäßig lautet dieser: Macintosh HD > Programme > Adobe Photoshop CS4 > Plug-Ins > Neuen Order erstellen > Hier das Plugin einfügen. Das wars auch schon.
Unter Windows lautet der Pfad wie folgt: C:Program Files (x86)AdobeAdobe Photoshop CS3Requiredplug_ins3d. (Danke an Matthias für diese Info.)

Plugin nutzen

Sobald das Plugin in den Photoshop-Ordner kopiert wurde ist es voll funktionsfähig. Startet Photoshop nun einmal neu, anschließend habt über "Datei > Öffnen/Speichern unter..." die Möglichkeit Dokumente im ICO-Format zu öffnen und ebenso abzuspeichern.

Favicon erstellen

Wenn Ihr ein Favicon für Eure Website erstellen möchtet so öffnet zunächst eine neue Datei mit den Abmessungen 16x16 Pixeln. Anschließend gestaltet Ihr dort das Favicon. Achtet auf einen transparenten Hintergrund, da ansonsten hässliche weiße Stellen je nach Hintergrund sichtbar werden können. Über "Datei > Speichern unter > ICO-Format" speichert Ihr nun die Grafik unter dem Dateinamen "favicon.ico" ab.
Anschließend kopiert Ihr die Datei in den Root (oberste Hierarchieebene Eurer Website) und verlinkt das Favicon mit folgendem Code-Snippet im HEAD der Seite. Achtet darauf evtl. den Pfad zum Favicon anpassen zu müssen.

Unter WordPress verschiebt Ihr das Favicon in Euren Theme-Ordner und verlinkt es mit folgendem Snippet. In diesem Fall muss kein Pfad angepasst werden.

Danke an Matej für die Info über dieses Plugin.

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Plugin "WebChunks" zeigt WebSlices im Firefox

Jonas Hellwig — Fri, 19 Dec 2008 15:34:13 +0000

Wie WebSlices für den Internet Explorer 8 erstellt werden habe ich ja bereits in einem Artikel beschrieben. Nun stelle ich Euch das Firefox 3 Plugin "WebChunks" vor. Dieses Plugin ermöglicht die Darstellung von WebSlices im Mozilla Browser, wenngleich nicht ganz so komfortabel wie im IE8. Für alle die den Internet Explorer nicht nutzen wollen oder können ist dies eine empfehlenswerte Alternative. (Und das Icon gefällt mir auch besser)

WebChunks-Plugin für Firefox herunterladen

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Firefox-Plugin: Surfen wie in China

Jonas Hellwig — Mon, 03 Nov 2008 05:29:45 +0000

Wer gerne einmal wissen möchte wie es sich "anfühlt" in China zu surfen, dem sei dieses Firefox-Plugin an Herz gelegt. Nach der Installation, sind ein Großteil der internationalen Websites nicht mehr erreichbar. Ebenso wird das gewohnt flotte Internetvergnügen grauenhaft langsam.
Also alles wie im echten China, wo der Staat seinen geknechteten Bürgern vorschreibt welche Informationen zugänglich sind und welche vorenthalten werden.

Hier könnt Ihr das Firefox-Plugin "China Channel" herunterladen. Ebenso bietet diese Seite ausführliche Informationen zur Web-Zensur in China.

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Firefox-Extention "Operator" zur Nutzung von Microformats

Jonas Hellwig — Thu, 03 Apr 2008 17:43:52 +0000

Microformats gewinnen zusehends an Bedeutung im Web und sind aus meinem persönlichen Surfverhalten nicht mehr wegzudenken. Sie ermöglichen es u.a. personifizierte oder soziale Inhalte einer Website zu extrahieren.

Mittels der Firefox-Extention "Operator" lassen sich die Mikroformate eine Website sehr komfortabel verwalten und in weiteren Programmen nutzen.

Download, Installation & Funktion

Zuerst muss die Firefox-Extention "Operator" heruntergeladen und installiert werden.

Download: Firefox-Plugin Operator

Nach erfolgreicher Installation und einem Neustart des Browsers steht nun die "Operator-Toolbar zur Verfügung. Sollte die Website keine Microformats enthalten so ist die Toolbar ausgegraut und inaktiv. Sobald jedoch ein oder mehrere Microformats erkannt werden aktivieren sich die entsprechenden Menüpunkte. So lassen sich beispielsweise Kontaktdaten, Termine, Tags, Ortsangaben, soziale Beziehungen und andere Informationen aus der Seite auslesen und weiterverwerten.

Im Beispielbild seht Ihr wie mittels "Operator" die als Mikroformat hinterlegten Daten aus meiner Kontakt-Seite / meinem Impressum direkt in Euer Adressbuch exportiert werden können.

Weitere Infos zum Thema:

Hier erfahrt Ihr wie Ihr vCard mittels Mikroformaten in Eure Website integriert.

Artikel lesen »

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.