Web

Tool-Tip: CSS-Sprites per Drag & Drop erstellen

Ich bin gerade auf das kleine, aber feine Online-Tool “SpritePad” gestoßen, mit dem man CSS-Sprites einfach im Browser erstellen kann.

Der Vorteil von CSS-Sprites liegt auf der Hand: Man spart sich Server-Requests, indem man für jedes Icon und deren Over-Status nur eine Grafik hat, die geladen werden muss. Ein weiterer Vorteil dabei ist, dass die Over-Zustände nicht erst beim Hovern über das Icon geladen werden, es käme sonst zu einem weiteren Server-Request, der Browser lädt die Datei und zeigt solange keine Grafik an und es flackert unschön.

Bisher bastelte ich mir meine Sprites mit Photoshop zusammen, bei gleicher Icon-Größe bspw. konnte ich alle 40px ein Icon setzen, so dass das Erstellen der CSS-Definitionen nicht alzu aufwändig ist. Alternativ schmiss ich Firebug an und verschob die Hintergrundgrafik so lange, bis es passte.

Mit SpritePad kann man jedes Icon in den Browser an die richtige Stelle auf der Arbeitsfläche ziehen und es am Ende abspeichern. Die dazugehörigen CSS-Klassen werden gleich miterstellt. Da sie als Klassennamen den Dateinamen (ohne Endung) erhalten, empfiehlt es sich, so oder so, seine Icons gleich sprechend und eindeutig zu benennen. Ganz ohne CSS-Anpassungen kommt man aber wohl nicht aus, denn man hat für die Over-Zustände ja meist keine eigene Klasse, sondern den CSS-Selektor :hover.

Es gibt übrigens auch noch eine Premium-Mitgliedschaft, die für 5€/Monat die Funktion des automatischen Ausrichtens freischaltet (einzelne Grafiken werden per Klick ausgerichtet, Verschieben per Drag & Drop kann man sich  sparen), man kann unbegrenzt viele CSS-Sprites in der SpritPad-Cloud speichern und Sprites mit anderen teilen und bearbeiten. Für mich persönlich nichts, aber vielleicht für Menschen, die viele, sich öfters ändernde Spritemaps erstellen. Speichern geht übrigens auch ohne Premium-Account, jedoch kann man nur 2 Sprites speichern.

15. März 2012 von Benjamin Strilziw
Kategorien: Web | Schreibe einen Kommentar

WordPress: Link in eigenen Menüs im neuen Fenster (target _blank) öffnen

WordPress: Link in eigenen Menüs im neuen Fenster (target _blank) öffnen

Es mag banal klingen, aber ich bin vorhin auf das Problem gestoßen und musste recht lange suchen, denn Menüpunkte der eigenen Menüs (unter Design -> Menüs) kann man durchaus im eigenen Fenster / Tab öffnen lassen (auch wenn man natürlich den User selbst darüber entscheiden lassen sollte, ob er den Link, den er verfolgen möchte, in einem neuen Fenster geöffnet haben möchte).

Dafür einfach die Optionen einblenden (oben rechts) und bei den erweiterten Menüeigenschaften das Linkziel anzeigen lassen. Danach hat man in jedem Menüpunkt die Auswahl, ob man den Link standardmäßig im gleichen Fenster (“Dasselbe Fenster oder derselbe Tab”) oder im neuen Fenster (“Neues Fenster oder Browser-Tab öffnen”) geöffnet haben möchte, siehe Screenshot.

Unter Design -> Menüs -> Optionen einblenden, kann man sich weitere Einstellungsmöglichkeiten der einzelnen Links anzeigen lassen.

Unter Design -> Menüs -> Optionen einblenden, kann man sich weitere Einstellungsmöglichkeiten der einzelnen Links anzeigen lassen.

Die weiteren Punkte sind:

  • CSS-Klassen, mit denen man durch die Vergabe einer eigenen Klasse z.B. einen Menüpunkt gesondert herausheben kann,
  • Link-Beziehungen (XFN), mit denen man das rel-Attribut eines jeden Links setzen kann, z.B. “nofollow”, falls man Suchmaschinen-Spider den Link nicht verfolgen lassen möchte und
  • Beschreibung, mit der man für  jeden Link einen Text verfassen und diese im Theme ausgeben kann, z.B. als Title-Text.

Quelle: http://codex.wordpress.org/Appearance_Menus_Screen

02. Juni 2011 von Benjamin Strilziw
Kategorien: Web, WordPress | Schlagwörter: | 8 Kommentare

WordPress: RSS-Feed mit Verzögerung senden

WordPress: RSS-Feed mit Verzögerung senden

Manchmal denkt man, man wäre fertig mit seinem Artikel und dann fehlt doch noch was. Huch?! Der Artikel hat ja gar kein Vorschaubild! Zum Glück ging der Artikel noch nicht in die Feedreader der Abonnenten. Und gerne fällt mir nach 5 Minuten noch etwas ein – z.B. die Quellenangabe. Dank dieses kurzen Schnipsels wird der RSS-Feed eine bestimmte Zeit später versendet. 15 Minuten klingt zwar viel, ist es aber eigentlich gar nicht, denn wenn sich gerade durch ein Telefonat ablenken lässt, kommen einen 15 Minuten gerade recht. ;)

Hier das Snippet für die functions.php des eigenen Themes:

// Verzögere RSS-Feed
function publish_later_on_feed($where) {
	global $wpdb;
 
	if ( is_feed() ) {
		// timestamp in WP-format
		$now = gmdate('Y-m-d H:i:s');
 
		// value for wait; + device
		$wait = '15'; // integer
 
		// http://dev.mysql.com/doc/refman/5.0/en/date-and-time-functions.html#function_timestampdiff
		$device = 'MINUTE'; //MINUTE, HOUR, DAY, WEEK, MONTH, YEAR
 
		// add SQL-sytax to default $where
		$where .= " AND TIMESTAMPDIFF($device, $wpdb->posts.post_date_gmt, '$now') > $wait ";
	}
	return $where;
}
add_filter('posts_where', 'publish_later_on_feed');

Darüber gestoßen bin ich bei WPengineer.com – einer tollen Inspirations- und Informationsquelle rund um WordPress. :)

01. Mai 2011 von Benjamin Strilziw
Kategorien: Web, WordPress | Schlagwörter: , , | 1 Kommentar

WordCamp 2011 – Köln

WordCamp 2011 – Köln

Wie vorhin bekannt wurde, findet dieses Jahr am 24.09.2011 – einem Samstag – das WordCamp in Köln statt. Weitere Informationen findet ihr auf wordpress-deutschland.org und demnächst auf www.wordcamp.de.

Ich bin auch am Überlegen dort hinzufahren. :)

29. April 2011 von Benjamin Strilziw
Kategorien: Web, WordPress | Schreibe einen Kommentar

WordPress: Sonderzeichen im Slug

WordPress: Sonderzeichen im Slug

Ich arbeite gerade einem Plugin, welches auch automatisch Artikel mit der WordPress-Funktion wp_insert_post() anlegt. Leider hat WordPress ein Problem damit, wenn Sonderzeichen im Titel stehen. Das ist mit letztens schon unter die Nase gekommen, denn da wurden ® (Registered R, wirklich das Zeichen und nicht ®) einfach in… ja, ich muss gestehen, dass ich in 15min. Core-Gewühle nicht herausgefunden habe, warum aus ® %c2%ae wird. Aus “微速度撮影動画まとめ2” (sowas wie “Nature Timelapse 2″) wird in der Datenbank “%e5%be%ae%e9%80%9f%e5%ba%a6%e6%92%ae%e5%bd%(…)”. Es wird wohl vermutlich eine erweiterte Zeichenkodierung für alle Zeichen sein, ob nun Sonderzeichen oder japanische Schrift. Wer nochmal genau schauen möchte, sucht sich die formatting.php und plugin.php im Ordner /wp-includes und findet die Funktionen sanitize_title() und apply_filters().

Das Problem mit dem Registered R konnte ich so lösen, dass ich mit Frank Bültges Search & Replace-Plugin in der Tabelle posts die Titel (post_title und post_name, post_name ist der zu ändernde Slug) nach %c2%ae durchsucht und durch -r ersetzt habe.

Aber was tun, wenn man nicht nur ein bestimmtes Sonderzeichen in seinem Titel hat? Alle Posts nach solchen Zeichen durchsuchen?

Und was ist denn, wenn die Artikel in einem Plugin mit wp_insert_post() erstellt werden?

Glücklicherweise kann man dem post-Array den post_name (späterer Permalink) mitgeben. Und so sieht meine Funktion dann aus, die mir einen validen post_name generiert:

function createSlug($title, $length = 40) {
  $slug = strtolower($title);
  $slug = preg_replace("/[^a-z0-9\s-]/", "", $slug);
  $slug = trim(preg_replace("/[\s-]+/", " ", $slug));
  $slug = trim(substr($slug, 0, $length));
  $slug = preg_replace("/\s/", "-", $slug);
  return $slug;
}

Nachdem alle Großbuchstaben verkleinert wurden, verschwinden alle Zeichen außer Buchstaben von a-z, Zahlen, Minus- und Leerzeichen. Leerzeichen plus Minus wird durch ein Leerzeichen ersetzt (2 Minuszeichen hintereinander ergeben keine valide URL), von Leerzeichen am Anfang und Ende befreit und auf die gewünschte Länge gestutzt. Die letzten Leerzeichen werden noch durch Minuszeichen ersetzt und fertig ist der Permanlink.

Quelle

Nachtrag vom 28.04.2011 – 15:03 Uhr
Zufällig bin ich heute auf das Plugin “Germanix” (nicht im WordPress-Plugin-Repository erhältlich) von Thomas Scholz gestoßen, das mir zumindest das Problem mit dem ® abnimmt, ob es auch greift, wenn ich in meinem Plugin einen Artikel via wp_insert_post() anlege, kann ich erst heute Abend testen.

Nachtrag vom 28.04.2011 – 22:52 Uhr
Ja, mit aktiviertem Plugin wird auch der Slug geändert. Leider generiert Germanix bei dem Beispiel oben mit der japanischer Schrift auch zwei “–” Minuszeichen hintereinander, womit die URL nicht mehr funktionstüchtig ist. Mal sehen, was Thomas Scholz dazu sagt, meine Erkenntnis war bisher, dass man einfach nur die Funktionsaufrufe von remove_doubles() und lower_ascii() tauschen muss, damit im letzten Schritt doppelte Minuszeichen entfernt werden.

Nachtrag vom 29.04.2011 – 11:31 Uhr
Es wurde sich darum gekümmert. Reaktion und Bug-Beseitigung innerhalb von weniger als 24 Stunden – sehr löblich. :)

27. April 2011 von Benjamin Strilziw
Kategorien: Web, WordPress | 2 Kommentare

Praktische App: Google Chrome to Phone

Praktische App: Google Chrome to Phone

Die Kategorie “Mobile” weihe ich mit einer App-Vorstellung ein: Google Chrome to Phone.

Schraubt man am Rechner etwas für das Internet zusammen, stößt man auf eine Website, dessen Layout man sich auf dem Smartphone anschauen möchte oder findet man einen interessanten Artikel, den man schnell ins Handy laden möchte, da man eh gleich aufbricht, muss man irgendwie die URL in das Handy bekommen. Es gibt dafür tatsächlich einige Tools zum Synchronisieren von Lesezeichen, doch will man einfach nur schnell die Seite auf seinem Smartphone geöffnet haben, führt quasi kein Weg an dieser App vorbei.

Die einzige Ausrede, die ich dabei gelten lasse, ist wenn man den Internet Explorer oder Apples Safari benutzt. Aber welcher versierter Android-Benutzer surft mit dem Internet Explorer?

Auch wenn die App Google Chrome to Phone heisst, gibt es eine Extension für die anderen gängigen Browser.
weiterlesen …

02. April 2011 von Benjamin Strilziw
Kategorien: Mobile, Web | Schlagwörter: , , , , | 1 Kommentar

htaccess: domain auf www.domain umleiten

Bietet es der eigene Hoster über sein Webinterface nicht an, möchte man aber trotzdem, dass alle Anfragen auf http://domain.tld sauber mit einem 301 Redirect auf http://www.domain.tld weitergeleitet werden, schafft die .htaccess Abhilfe (funktioniert dort, wo z.B. Apache eingesetzt wird).

Dafür muss Folgendes in die .htaccess im Root-Verzeichnis eingetragen werden:

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

Möchte man es genau umgekehrt haben, sprich dass die Subdomain www wegfällt, kommt dieses Snippet zum Einsatz:

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

 

27. März 2011 von Benjamin Strilziw
Kategorien: Web | Schlagwörter: | Schreibe einen Kommentar

Probleme, Probleme… mit Youtube-Einbindung

Man könnte meinen, dass es für das allseits beliebte WordPress schon zig gute Plugins gibt. Sucht man nach bestimmten Begriffen, z.B. “youtube”, spuckt die Suche auch eine Menge Einträge aus. Bei jedem 3. handelt es sich dann um das ultimative Plugin des Todes, welches alle möglichen Videos einbetten kann, sofern die Anbieter solch eine Funktion zur Verfügung stellt.

Jeder kennt die Youtube-Videos, die nicht auf youtube.com zu sehen sind – sie sind auf anderen Seiten eingebunden. Dies ist ja auch kein Problem, denn der Code zum Einbetten steht neben jedem Video. Diesen kann man dann auch ganz einfach in der HTML-Ansicht einfügen. Aber: was ist, wenn sich der Code irgendwann mal ändern sollte und der alte kein Video mehr anzeigt? Dann müsste man jede Einbettung von Hand ändern.
weiterlesen …

24. Oktober 2009 von Benjamin Strilziw
Kategorien: Plugins | Schlagwörter: , , , | Schreibe einen Kommentar