bueltge.de [by:ltge.de] » Webdesign

Promote MDN | Mozilla Developer Network

Frank Bültge — Wed, 08 Jun 2011 12:46:02 +0000

Spread some developer love and promote the docs

Danke für das Abonnieren meines Feed! Inhalt gefällt? Danke sagen · Kommentieren

Simple Media Queries Tester

Frank Bültge — Tue, 21 Dec 2010 09:18:21 +0000

CSS Media Queries dringen immer weiter vor und die Möglichkeiten der Anpassung bei der Größe einer Website an die den entsprechenden Client bzw. die Bildgröße des Browsers werden notwendiger. Die Media Queries sind eine Lösung, die ihre Vor- und Nachteile haben. Beim Einsetzen empfand ich es manchmal als Nachteil, dass ich mir nicht alle Größe gleichzeitig ansehen konnte. Warum also nicht einfach ein kleines Script und das iframe-Element sinnvoll gebrauchen.
Wer mag und dies braucht, der findet hier nun eine simple und einfache Lösung oder kann auch gern das laufende Script in meinem "Test-Labor" nutzen. Die Version hat auch einige weitere Spielereien inne, so kann man außerdem die Werte der iframes anpassen und diese Daten speichere ich mittels der DOM Storage-API innerhalb eines Browsers lokal. Meine Lösung im Labor hat keinen Fallback und sollte nur mit Browsers sauber laufen, die die Möglichkeit der Storage API unterstützen.

Die Lösung kann beliebig erweitert und verbessert werden, viel Freude damit.

Der folgende Code ist lediglich in einer PHP-Datei zu speichern und kann dann genutzt werden. Ich habe nur wenig mit CSS gespielt und angepasst; ebenfalls ist die Browserunterstützung vermutlich nicht sonderlich groß, da ich rein auf HTML5 und CSS3 setze und keine Scripte dafür hinterlege.





	 

	Simple Media Queries Tester 

	
	 

	



	
		Simple Media Queries Tester
	

	
		
		
		Test your URL
		Test URL
			
			
		
		
		keine Seite geladen - Adresse Eingeben';
		}
		?>
	

	
		
		© 2010 bueltge.de · Impressum

Danke für das Abonnieren meines Feed! Inhalt gefällt? Danke sagen · Kommentieren

Gewinnspiel: neue Designs für Wartungsmodus gesucht

Frank Bültge — Sat, 08 Aug 2009 09:31:27 +0000

Das Plugin Wartungsmodus nutze nicht nur ich vielfach und über die lange Zeit habe ich daran kaum geändert. Nun kam aber David Hellmann mit einem wunderbaren Designvorschlag und so habe ich das Plugin komplett neu erstellt und diverse Optionen übernommen und die Möglichkeit geschaffen, dass man das Design der Site im Wartungsmodus wählen kann. Ebenso kann man nun diverse Optionen wählen und muss nicht am Code ändern.

Das Plugin ermöglicht es registrierten Nutzern das Backend weiterhin zu nutzen und alle Nutzer, die die Rechte haben am Design zu ändern (Objekt: switch_themes), können auch das Frontend im aktiviertem Theme sehen. Damit kann man live am Blog schrauben und kontrollieren, ohne das Besucher etwas mitbekommen. Sie werden vertröstet und bekommen eine Information über die voraussichtliche Wartezeit.

Trotzdem war mir wichtig, dass es einfach und unkompliziert in der Nutzung ist und so gibt es keine eigene Seite im Backend für die Einstellungen, die werden direkt beim Aktivieren des Plugins ermöglicht und der Wartungsmodus ist aktiv, wenn man das Plugin aktiv hat.

Ebenfalls habe ich die Site so aufgebaut, dass ich recht einfach neue Designs ergänzen kann, was mich zu der Idee brachte: Sendet mir eure Designvorschläge und ich baue sie in das Plugin ein.

Wie geht das?

Um neue Designs für den Wartungsmodus zu hinterlegen, benötige ich das Stylesheet von euch und die entsprechenden Bilder, wenn es notwendig ist. Wird der Text Wartungsmodus als Bild ausgegeben, so benötige ich dass auch als PSD-Format und mindestens in englischer und deutscher Sprache als Bild (PNG oder JPG), da das Plugin mehrsprachig arbeiten kann.

Um nun aber das CSS zu schreiben, bedarf es einem Markup und das sieht wie folgt aus. Auf Basis dieses Markup möchte ich Stylesheets von euch.






	Blogname - Maintenance Mode




	
		WP Dev
	

	

		Maintenance Mode
		Sorry for the inconvenience.
Our website is currently undergoing scheduled maintenance.
Please try back in 231 weeks.
Thank you for your understanding.
		Admin-Login
	

	
		Plugin by:

Was hat man davon?

Diese Frage werden sich sicher wieder einige stellen und ich hoffe einfach, dass man hier den Mehrwert erkennt, mir ein Feedback gibt und seinen Anteil am Plugin leistet. Im weiteren macht CSS Spaß und so sollte es nicht schwer sein, ein so einfaches Markup zu stylen.

Zusätzlich werde ich natürlich die Autoren des jeweiligen Designs auf der Plugin-Seite bei wordpress.org listen, der Dank der Nutzer ist euch damit sicher. Ebenfalls wird ein Link optional auf der Site sein, die den Wartungsmodus aktiv hat; also abhängig vom Design wird das Favicon des jeweiligen Ideengebers gelistet. Da das Plugin unter GNU-Lizenz fällt, ist es möglich, diesen Link im Backend von WordPress zu deaktivieren.

Gibt es was zu gewinnen?

Trotzdem soll es als zusätzlichen Anreiz einige Gewinne geben und so habe ich mir überlegt, dass ich gern etwas Platz in meinen Buchregalen haben will. Daher werde ich ausmisten und einige Bücher zum Thema Web abgeben, die sicher der eine oder andere lesen möchte. Insofern denke ich, dass es lohnend ist, hier ein wenig CSS zu machen und mir ein Design für den Wartungsmodus einer Seite zukommen zu lassen.

Zu gewinnen gibt es:

Die Bücher werde ich per Zufall verlosen und im Anschluss versenden.

Zeitrahmen?

Prinzipiell kann man mir immer gern neue Designs zukommen lassen; ich werde die dann einbauen. Das Gewinnspiel wird bis zum letzten Tag des Monats gehen, also bis zum 31. August 2009.

Sendet mir also eure Stylesheets, noch besser ein Zip mit allen Daten und ich sage schon jetzt vielen Dank dafür.

Noch der Hinweis: sollten sehr viele Design-Vorschläge kommen, so werde ich die besten auswählen lassen und dann in das Plugin übernehmen. Aber bis dahin bin ich erst mal auf eure Ideen und Umsetzungen gespannt und hoffe, dass ihr trotz Sommerloch ein wenig Lust auf CSS habt oder gern eines der Bücher gewinnen wollt.

Danke für das Abonnieren meines Feed! Inhalt gefällt? Danke sagen · Kommentieren

WP Basis Theme in (x)HTML5

Frank Bültge — Tue, 28 Jul 2009 13:18:48 +0000

Das WP Basis Theme erfreut sich großer Beliebtheit und die Arbeit daran wird von diversen Leuten unterstützt, sei es mit Übersetzungsarbeit, Fehlerkorrekturen, Verbesserungsvorschlägen oder Tests. Daher auch hier nochmal Danke an alle Helfer!

Da sich HTML5 aber schon geraume Zeit auf meiner ToDo-Liste befindet und ich ein Thema benötige um zu starten, habe ich begonnen das Basis Theme in HTML5 zu bauen, so dass WordPress direkt damit arbeiten kann. Dabei habe ich auch gleich ein Beispiel-Stylesheet beigelegt, so dass es ein Design gibt.

Zusätzlich gibt es eine kleines Stylesheet, welches die neuen Bereiche und ihre Tags darstellt, so dass man bei einem Einstieg in HTML5 ein wenig visueller arbeiten kann. Das Stylesheet ist nicht im Code verdrahtet und kann zum Beispiel einfach und unkompliziert mit Hilfe des WebDeveloper-Toolbar hinzugefügt werden. Zu finden ist das Stylesheet in der Struktur unter layout/html5areas/html5areas.css. Ein Beitrag ist damit wie folgt ersichtlich.

Diverse Punkte sind aktuell nur im Opera > 9.5 sichtbar. Dazu zählen alle Inhalte des Kommentar-Formulars. Dort wurde unter anderem Pflichtfelder übergeben, wenn sie durch WordPress gesetzt werden und die type-Attribute haben der Aufgabe bezogen ihren Wert erhalten, daher die Image-Zuordnung im Opera.

Arbeit mit...

Als Nachschlagewerk dient mit die Übersicht des w3c und das Blog zum Thema HTML5. Leider ist die Arbeit beim Validieren aktuell nicht so einfach, da mir kein Validator bekannt ist, der lokal validieren kann. Über Tipps würde ich mich daher freuen. Für den IE liefere ich ein Script mit, welches ihm den Umgang mit diversen Elementen beibringt.

Warum das alles?

Ich würde mir wünschen, dass der eine oder andere mal drüber schaut, vielleicht Leute, die schon mehr mit HTML5 gearbeitet haben und tief in der Materie stecken. Rückmeldungen wären toll und vielleicht erweitert der eine oder andere das Theme um bestimmte Tags oder Elemente.

Wie komme ich daran?

Es gibt hier keinen Download und die Arbeit daran wird in der freien Zeit weiter gehen und daher wird es immer wieder Veränderungen geben. Aktuell stehen nur wenige Grundzüge und es soll den gleichen Stand wie das WP Basis Theme bekommen. Um sich in das Theme einzuarbeiten oder einfach mal drüber zu schauen steht ein Repository bereit. Dort kann auch Kommentiert und diskutiert werden.

Der Ordner mit allen Inhalten findet sich im Bereich trunk/basis-html5 des SVN.

Danke für das Abonnieren meines Feed! Inhalt gefällt? Danke sagen · Kommentieren

WP Basis Theme

Frank Bültge — Wed, 10 Jun 2009 09:53:31 +0000

Fast seit dem ich mit WordPress beschäftige, irgendwann mit Version 0.71 war das, habe ich mir eine Theme-Layout geschaffen, was ich immer zum Neustart eines neuen Theme heran ziehe - WP Basis.
Fast genauso lange veröffentliche ich dieses Theme unter GPL und es wird wohl recht vielfach genutzt. Die Entwicklung am Theme habe ich weiter getrieben und das Theme ist mit jeder Version von WordPress gewachsen und passt sich den jeweiligen Änderungen an. Um diese Veränderungen besser Händeln zu können, habe ich das Theme seit geraumer Zeit im SVN von Google Code abgelegt und konnte dadurch auch auf die Mitarbeit von Andreas und Dominik zählen - vielen Dank an dieser Stelle nochmal!

Immer wieder kamen Fragen rein, ob das alte Theme aktualisiert wird und wann - daher hier nun die Info, ich habe einen Stand erreicht, der stabil ist und das Theme ist mit der aktuellen Version 2.7 und der kommenden Version 2.8 von WordPress kompatibel. Ebenso ist es abwärtskompatibel, getestet bis Version 1.5 von WordPress. Daher hier nun offiziell die Freigabe zum Download und Nutzen.

Ein Hinweis, das Theme ist kein Framework es ist ein einfaches Theme, welches lediglich die Grundlagen eines Theme enthält und diverse Vorzüge aus meiner Arbeit mir WordPress vereint. Es dient also wirklich dazu, dass man ein Theme für Kunden oder sich selbst erstellt, angepasst auf die Anforderungen. Es bringt keinerlei überflüssiges Markup mit, was man dann nicht braucht und wie bei Frameworks zum Teil üblich, mitschleift. Es soll auch so bleiben, keine Child-Themes oder ähnliches, auch keine Hooks zum komfortablen erweitern mit Code. Ich mag diese Art der Arbeit, schlank und schnell, direkt auf die Aufgabe zugeschnitten und daher kann ich mich nicht sonderlich mit Frameworks im WordPress-Theme-Sektor anfreunden; heißt aber nicht, dass andere Entwickler das auch tun sollten!

Wenn euch diese Arbeit liegt und ihr ebenfalls das Theme in erster Linie selbst schreibt, dann steht euch damit eine Grundlage bereit. Durch die Verwaltung im SVN steht euch ebenso eine Möglichkeit zur Verfügung Fehler und Hinweise zu melden, worüber ich mich sehr freuen würde.

Danke für das Abonnieren meines Feed! Inhalt gefällt? Danke sagen · Kommentieren

WordPress Design Tweaks

Frank Bültge — Tue, 28 Apr 2009 07:27:08 +0000

Mit WordPress 2.7 wurde uns ein neues Design im Backend beschert, diesmal mit viel Aufwand und Analyse um ein angenehmes Arbeiten zu ermöglichen und möglichst viel Inhalt strukturiert darzustellen. Aus meiner Sicht ist das gelungen und die Arbeit mit WordPress war für mich persönlich noch nie so angenehm. Da ich aber WordPress vorrangig im Unternehmensumfeld einsetze, die Corporate Identity auch im Backend realisiere und Anwender von Laie bis Profi habe, sind die Anforderungen doch extrem unterschiedlich. Dabei habe ich bisher auf mein Plugin Adminimize gesetzt, das Backend auf die Anforderungen reduziert und das Design dem Corporate Design angepasst.

Aktuell macht Jane Wells im WordPress Team sich einige Gedanken zum Backend Design und ruft zu Ideen auf, die das Backend nicht neu gestalten, nur optimieren, so dass Nutzer nicht verschreckt werden. Aus meiner Sicht ist es gerade da sinnvoll, dass man die Hooks in WordPress nutzt und optionale Design einbringt, die der jeweilige Nutzer wählen kann. SO hole ich auch diverse Designs in Backend und überlasse die Wahl dem Nutzer. Lediglich die übergeordneten Themen, wie Farben und Logo, gebe ich im Rahmen des Corporate Designs vor. Da ich Adminimize in den letzten Nächten erweitert haben, besonders gepuscht durch den Spendenmarathon der lieben Leserin Samantha Phoumarath.

Der obige Screenshot mag auf den ersten Blick nicht sonderlich das Design von WordPress verändern, aber es ist anders, anders in der Arbeitsweise - Header und Menu sind fix, so dass man aus jeder Scrollposition darauf zugreifen kann. Eine ganze Reihe von Nutzern empfinden das Arbeiten so besser und angenehmer. Als Hinweis sei aber vermerkt, dass meine jetzige Lösung nur in Browsern funktioniert, die fixed via CSS akzeptieren.

Im weiteren habe ich diverse Bereiche verkleinert, so sind Meta Boxen wesentlich schmaler; es ist mehr Platz ohne den Whitespace zu reduzieren.

Im weiteren habe ich ein alternatives Design im Plugin untergebracht, welches den Header verändert und die Navi damit um 50 Pixel nach oben holt. Auch dies wird gern genutzt, wobei hier schon der Wunsch des fixed Menu aufkam, aber bisher nicht umgesetzt wurde.

Vielleicht hat der eine oder andere Ideen, Wünsche und Hinweise zum Plugin, zum Design, die Kommentarfunktion steht offen.

Das Plugin selbst ist vorrangig für andere Zwecke erstellt und verfügt aktuell über sehr viele Optionen, so kann man den Bereich Schreiben Beitrage und Seiten einschränken, die Oberfläche der Links beeinflussen, globale Bereiche verändern, HEader-Bereiche einschränken, verändern, Dashboard und Footer deaktivieren, umleiten mit eigenen Inhalten befüllen oder auch eigene Optionen hinzubringen, in dem man Klassen und IDs hinterlegt, einen Namen vergibt und diese dann wieder abhängig von der Benutzerrolle, wobei auch eigene Rollen unterstützt werden, deaktivierbar sind.

Danke für das Abonnieren meines Feed! Inhalt gefällt? Danke sagen · Kommentieren

CiteDrag: Drag/Drop einfach und effizient

Frank Bültge — Mon, 27 Apr 2009 13:46:16 +0000

In der Vergangenheit habe ich ein wenig darüber berichtet, wie ich meine Kommentarfunktion etwas erweitert habe, so dass das Bezug nehmen auf explizite Textstellen recht einfach ist. Näheres dazu kann man in dem Artikel dazu nachlesen.

Eine neue Lösung namens CiteDrag von Elijah Grey ermöglicht es, dass man Elemente einfach per Drag&Drop in das Textfeld holt, Markieren und ziehen oder Elemente direkt ziehen.

Schlank und benutzerfreundlich kann die Lösung die eine oder andere Website aufwerten, daher sicher einen Blick wert: CiteDrag. Demo und Syntax sind verfügbar, Hintergründe sind im Artikel von Elijah zu finden.

Danke für das Abonnieren meines Feed! Inhalt gefällt? Danke sagen · Kommentieren

HTML Lorem ipsum Deutsch

Frank Bültge — Thu, 12 Mar 2009 11:51:00 +0000

Blindtexte werden bei der Webentwicklung ebenso oft benötigt wie klassische HTML-Tags mit Inhalten. Zu diesem Zweck gibt es den einen oder anderen Generator oder andere Tools wo man sich diverse angefertigte Tags und Texte holen kann.

Aus meiner Sicht ist die deutsche Sprache aber ein wenig komplexer und die bekannten Lorem ipsum-Texte bilden daher nicht immer alle eventuellen Probleme ab. Hintergründe und Infos zu diesem Thema werden sehr schön in dem Artikel „Blindtexte als Chance“ der Webkrauts dargestellt.

Zu diesem Zweck habe ich mir eine Seite erstellt, die mir diverse Auswahlbereiche mit HTML-Tags und Blindtexten in deutscher Sprache zur Verfügung stellt. Dabei habe ich die Idee des HTML-Impus von Chris Coyier genutzt und einzelne Bereiche angelegt, die die Übersicht ein wenig wahren. Ebenso kann man via Klick auf den Titel einer Box den Inhalt in die Zwischenablage kopieren.

Wer also ebenso ab und dann diverse Inhalte und Tags benötigt, gern kann es genutzt werden. Ebenso freue ich mich über Ideen zur Verbesserungen.

Danke für das Abonnieren meines Feed! Inhalt gefällt? Danke sagen · Kommentieren

Einblick in HTML5

Frank Bültge — Wed, 11 Mar 2009 21:46:19 +0000

Ein schöner und verständlicher Einblick in HTML5 mit reichlich Code-Beispielen gibt uns Christopher Schmitt...

... natürlich ist in dem Zusammenhang die Übersicht von Peter Kröner zu HTML5 nicht zu vergessen.

Danke für das Abonnieren meines Feed! Inhalt gefällt? Danke sagen · Kommentieren

WordPress Seiten & Unterseiten abfragen

Frank Bültge — Tue, 10 Mar 2009 12:41:28 +0000

WordPress lässt es zu, dass man zu einer Seite (Page) im Backend entsprechende Unterseiten anlegt. Dies ist unter anderem ein Umstand, warum WordPress nicht selten als CMS in der Verwendung ist. Nun will man aber mit Hilfe der Conditional Tags diverse Abfragen starten und darauf reagieren – dann sieht man nicht selten im Template statische Abfragen auf jede ID einer Seite.
Das geht natürlich anders und einfacher wenn es sich um Seiten oder Unterseite dieser Seite handelt.

Mit dieser Lösung kann man dann beispielsweise in Abhängigkeit einer Seite ein spezielles Layout laden und das Frontend so an diverse Anforderungen anpassen. Diese kleine Anforderung nehme ich mal als Beispiel und zeige eine Funktion, die mir die Abfragen zu Seite/Unterseiten gibt und zeige im Anschluss ein Beispiel im Einsatz.

Hintergrund

Erstellt man in WordPress eine neue Seite, keinen Beitrag, dann kann man diesen in den Attributen als Unterseite einer bestehenden Seite definieren. Damit lassen sich nicht nur Baumansichten erstellen, sondern auch Strukturen abbilden, die nicht selten in einem CMS benötigt werden.

Will man in Abhängigkeit der Seite eine Ausgabe steuern, dann nutzt man den Conditional Tag is_page(),mit welchem man dann die Anforderung umsetzt. Um nun aber nicht für jede Seite diesen Tag zu nutzen und das Template damit ständig anfassen zu müssen, kann man eine einfache Funktion nutzen, die nach Abfragen der Hauptseite auch ein wahr (true) zurück gibt, wenn es sich um eine Unterseite der Hauptseite handelt.

Lösung

Diese Funktion, folgende Syntax, kommt in die functions.php des Themes.


// check ID post and child-post
function has_parent( $post, $post_id ) {
	if ($post->ID == $post_id)
		return true;
	elseif ($post->post_parent == 0)
		return false;
	else
		return has_parent( get_post($post->post_parent), $post_id );
}

Diese kleine Funktion prüft, ob die ausgegeben Seite ein Seite oder Unterseite einer Seite mit der übergebenen ID ist; klingt kompliziert, liegt aber nur am Satzbau. Irgendwie ist es schon zu spät; ja, ich weiß – ihr lest es später, denn ich nutze das zeitversetzte Veröffentlichen. Aber zurück zur Technik. Diese Funktion kann nach dem Ablegen im Theme nun in allen Templates genutzt werden. Das folgende Beispiel prüft, ob es sich um eine Seite oder Unterseite der ID 1 handelt und wenn ja, dann wird das Stylesheet Alternative 1 (alternative_1.css) ausgegeben.

Anderweitig wird auf ID 2 geprüft oder passt keines der Abfragen, dann kommt das Standard-Stylesheet zum Einsatz.

Um die Möglichkeiten noch ein wenig zu erweitern, setze ich in der Abfrage die Variable $bodyclass, die ich im body-Tag zur Ausgabe bringe. Damit habe ich dann eine weitere Anlaufstelle und eine entsprechendes Design je nach Seite zu realisieren.


    post, 1) ) {
	        echo '' . "\n";
	        $bodyclass = 'class="alternative_1"';
	    } elseif ( has_parent($wp_query->post, 2) ) {
	        echo '' . "\n";
	        $bodyclass = 'class="alternative_2"';
	    } else {
	    	echo '' . "\n";
	    }
  	} ?>


>

Fazit

Ich denke, dass diese kleine Möglichkeit eine große Wirkung in der Ausgabe haben kann und vielfältige Möglichkeiten zeigt. Ebenfalls kann man diese Lösung mit dem Wechsel des kompletten Theme realisieren, wie ich es schon im Beitrag „WordPress Theme in Abhängigkeit wechseln“ gezeigt habe.
Vielen Dank für das Lesen und noch mehr Danke ich für Verbesserungen zum Beitrag in den Kommentaren.

Danke für das Abonnieren meines Feed! Inhalt gefällt? Danke sagen · Kommentieren

Filter für caption-Shortcode in WordPress

Frank Bültge — Mon, 09 Mar 2009 14:58:54 +0000

Die Überschrift mag nicht sonderlich für sich sprechen und daher erkläre ich ein wenig mehr zum Thema und lege nicht nur einfach meine Code-Schnipsel ab.

Nutzt man den „Mediauploader" in WordPress nicht nur um das Bild hoch zuladen, sondern auch zur Integration in den Beitrag oder die Seite, dann wird, sobald man einen Bildtitel zum Bild hinterlegt, der Shortcode angelegt und in den Content eingefügt. Der Titel sollte aber gepflegt werden, da er als alt-Attribut zum img-Tag genutzt wird.

Nicht jeder Nutzer ist mit dieser Ausgabe zufrieden und ich zeige mal, wie man darauf zugreifen kann und die Ausgabe ändert.

Ist zum Bild ein Titel vorhanden, dann wird der Shortcode immer eingefügt, der dann einen div zur Ausgabe bringt, der beispielsweise wie folgt aussieht.



Caption, Bildtitel

Nun möchten aber nicht alle Nutzer diesen Shortcode nutzen und die Ausgabe daran anpassen. Man kann im Grunde mit drei Möglichkeiten die Ausgabe beeinflussen.

Nach dem Einfügen händisch löschen oder eigenes HTML einbauen
CSS erweitern und den entstehenden div ausblenden
Per Hook eingreifen und den div vor der Ausgabe filtern oder an die eigenen Bedürfnisse anpassen

Aus meiner Sicht scheidet Punkt 2 sofort aus, da er nur im Zusammenhang mit CSS funktioniert und damit das Markup noch immer so unzureichend bleibt.
Den ersten Punkt kann man ebenso nicht sauber vertreten, da Risiko beim Vergessen und der Mehraufwand beim Erstellen von Artikeln nicht wirklich angenehm ist.

Widmen wir uns daher Punkt 3 der ausgewählten Möglichkeiten und greifen mit ein wenig PHP ein. Auch dabei gibt es diverse Ansätze und so möchte ich drei recht unterschiedliche Wege zeigen und die Entscheidung zur Nutzung überlasse ich dann euch. Je nach Anforderung wird das sicher auch sehr verschieden ist.

Schön beim Einfügen löschen

WordPress fragt den Filter disable_captions ab und lässt damit den Shortcode erstellen: if ( ! apply_filters( 'disable_captions', '' ) ) {. Hier setze ich an und gebe eine Funktion ein, die ein true zurück gibt. Damit geht kein Shortcode mehr in der Editor beim Bilder einfügen.


add_filter( 'disable_captions', create_function('$a', 'return true;') );

Die Funktion legt man entweder in einem Plugin ab oder in der functions.php des Themes.

Filtern in der Ausgabe

Nun will man aber eventuell nicht immer den Shortcode entfernt haben, und in einigen Sichten des Frontend die Möglichkeit schon nutzen. Das heißt, der Shortcode darf nur in einigen Fällen genutzt werden.
Auch dafür hat WordPress eine Funktion hinterlegt, die ich im folgenden Anspreche und direkt im Frontend keinen div erzeugen lasse.

img_caption_shortcode($attr, $content = null)
The Caption shortcode.

Allows a plugin to replace the content that would otherwise be returned. The
filter is 'img_caption_shortcode' and passes an empty string, the attr
parameter and the content parameter values.

The supported attributes for the shortcode are 'id', 'align', 'width', and
'caption'.

Das Zitat entstammt der Beschreibung der Funktion und lässt schon die erwünschen Möglichkeiten hoffen.


add_filter( 'img_caption_shortcode', create_function('$a, $b, $c', 'return $c;'), 10, 3 );

Auch diese Funktion legt man in der functions.php des Themes oder in einem Plugin ab. Ab nun wird im Frontend keine Markup mehr aus dem Shortcode erzeugt.

Diesen Filter kann man natürlich auch mit diversen Conditional Tags kombinieren und so den Filter nur anwenden, wenn es sich um eine bestimmte Ausgabe handelt. Das folgenden Beispiel filtert daher nur, wenn man auf der Homepage des Blog ist.


if ( is_home() )
add_filter( 'img_caption_shortcode', create_function('$a, $b, $c', 'return $c;'), 10, 3 );

Eigenes HTML liefern

Hat man einen gewissen Anspruch im Markup, dann helfen aber auch diese Funktionen nicht und man muss das eigene Markup generieren. Als Beispiel gebe ich mal den Titel zum Bild in einer Definitionsliste aus. Diese Möglichkeit gefällt mir am besten und wurde schon in den Kommentaren eines älteren Artikel diskutiert.

Ich zeige mal eine einfache Lösung, die man gern an seine Bedürfnisse anpassen kann. Das entstehende Markup ist damit frei nutzbar und die möglichen Variablen habe ich drin, so dass das Anpassen nicht so schwer sein sollte. Daraus resultiert aber auch, dass das entstanden Markup recht umfangreich ist, was aber nur der Demo nutzt und so alle Möglichkeiten zeigt. Ansonsten sollte man aus meiner Sciht zum Beispiel kein Inline-Style in der Definitionsliste haben.

Im Ergebnis der folgenden Funktion, die wieder in ein Plugin oder die functions.php ausgelagert werden muss, erzeugt dann beispielhaft das folgende Markup.




Caption, Bildtitel


function fb_img_caption_shortcode($attr, $content = null) {

// Allow plugins/themes to override the default caption template.
$output = apply_filters('img_caption_shortcode', '', $attr, $content);
if ( $output != '' )
return $output;

extract(shortcode_atts(array(
'id'	=> '',
'align'	=> 'alignnone',
'width'	=> '',
'caption' => ''
), $attr));

if ( 1 > (int) $width || empty($caption) )
return $content;

if ( $id ) $id = 'id="' . $id . '" ';

return ''
. do_shortcode( $content ) . '
' . $caption . '';
}

add_shortcode('wp_caption', 'fb_img_caption_shortcode');
add_shortcode('caption', 'fb_img_caption_shortcode');

Ich hoffe, dass damit dem einen oder anderen Webdesigner der Eingriff leichter fällt und das tägliche Fluchen über dieses Thema ein wenig abnimmt.
Anregungen, Kritik und Fehlerhinweise sind wie immer erwünscht und der Artikel stellt sich wieder eurem kritischen Auge.

Danke für das Abonnieren meines Feed! Inhalt gefällt? Danke sagen · Kommentieren

10 Punkte, die das Blog besser machen

Frank Bültge — Mon, 02 Mar 2009 12:26:42 +0000

Es gibt hinreichend Artikel und Diskussionen zu dem Thema, was das Blog besser macht. Ebenso gibt es viele Artikel, über die man sicher streiten kann und die vor allem nicht auf jedes Blog passen. In erster Linie ist das Blog ein Spiegel des Inhalts und des/der Autor(s)en. Trotzdem, meine ich, gibt es einige Punkte die sich etabliert haben und die man bei der Entwicklung und Verbesserung eines Blog beachten sollte.

Das Thema spricht mich gerade wieder an, denn diverse Kundenanfragen zeigen, wie wenig man sich mit diesen Themen beschäftigt und man sich eher um die Farbe des Logos streitet. Der Leser des Blog wird viel zu oft nicht oder erst am Ende beachtet. Da in der Regel das Blog aber für Leser gemacht ist, sollte es auch auf ihn zugeschnitten sein. Beachtet daher die Wünsche der Nutzer, lasst sie mitreden und hört nie auf, das Blog in Frage zu stellen.
Ein weiterer Punkt, der mich zu diesem Artikel bewegte, ist der Beitrag „10 Features That Will Make Twitter Better“ von Jacob Gube, der einschlägige Punkte zeigt, die Twitter besser machen würden. Auch wenn man Twitter nicht direkt mit einem Blog vergleichen kann, so gibt es doch hinreichende Parallelen und die Punkte sprechen für sich und gehören in den Wissensstand eines jedes Nutzers, der sich mit Themen rund um Blogs und Usability beschäftigt.
Aus diesem Zusammenhang hier mal meine Liste von Punkten, die ich für relevant halte, ohne Wertung in der Priorität und sicher nicht vollständig. Aber dazu steht die Kommentarfunktion weit offen und ich danke schon jetzt für jede sinnvolle Erweiterung und konstruktive Kritik.

Besucher stehen im Mittelpunkt

Verliere niemals den Leser des Blog aus den Augen. Die Website wird nur besser, wenn man Veränderung zulässt, Ziele definiert und kontrolliert. Das Thema ist vielschichtig und sollte daher nicht unterschätzt werden.
Text Links im Artikel

Links sollten ein Aussage treffen und nicht nur unter versteckten Silben zu finden sein. Ebenso gehören Links sichtbar gekennzeichnet. Das Suchen mit der Mouse nach Veränderung ist nicht der Sinn von Links. Das title-Attribut kann einen erhöhten Mehrwert darstellen und sollte nicht vergessen werden.
Kommentar Threading

Die Baumansicht der Kommentare kann die Zusammenhänge der Diskussion besser darstellen, sie kann aber auch den Lesefluss nehmen und die Lust am Kommentieren vernichten. Hier gilt es den Spagat zu finden und dem Leser eine nützliche und überschaubare Lösung zu präsentieren. Das Thema ist für mich auch unter dem Gesichtspunkt der Zielgruppe zu beachten.
Kommentare nutzerfreundlich gestalten

Kommentieren im Blog ist in der Regel erwünscht – daher ist es wichtig, dass die Barriere so klein wie möglich ist. Unnütze Registrierung ohne Mehrwert und Captchas sind dafür nicht geeignet. Je einfaches es ist, seine Meinung in den Kommentaren abzugeben, um so mehr wird es geben. Auch das Weglassen von Pflichtfeldern kann dazu beitragen, so wie es schon Robert getan hat, nach dem wir es besprochen hatten. Die Pflichtfelder sind kein Spam-Schutz, sie haben andere Vorzüge. So nutze ich sie beispielsweise, um mit den Lesern über Mail ab und dann zu kommunizieren. So komme ich an sie und nutze sie. Aber auch hier ist der Block auf die Zielgruppe wichtig, techn. aversierte Nutzer sind da offen, kenne das Spiel mit den Pflichtfeldern.
Wiedererkennung des Kommentierenden

Sind Kommentare eindeutig der Person zuzuordnen, dann fühlen sich viele Kommentierende wohler. Nutze diesen Aspekt und gib einen gewissen Wiedererkennungswert zurück, sei es in Form der Avatare als auch spezifischen Content für den bekannten User zurück zu geben. Je nach Leserkreis kann das unterschiedlich ausfallen und sehr verschieden im Mehrwert sein.
Sidebar für mehr Information nutzen

Der Sidebar ist ein Element des Blog, welches sich durchgesetzt hat und übergreifend anerkannt ist. Darum nutzt den Sidebar um Mehrwert für den Leser zu generieren, sei es statisch oder dynamisch. Je besser der Inhalt auf den Besucher zugeschnitten ist, desto länger wird er bleiben und sich wohl fühlen. Beispiele dafür gibt es viel im Netz, die bekannteste Plattform und die, bei der man es am deutlichsten sieht ist sicher Amazon. Allerdings kommt hier wieder der Spagat zum Tragen - Registrierung, Speicherung von Nutzerdaten. Aber auch ohne diese Hürde kann man etwas tun - ich denke nur an die Übergabe der Suchbegriffe und die damit verbunden Landing Page (mehr zum Thema in Verbindung mit WordPress) für Besucher, die von Suchmaschinen kommen.
Hervorheben des Autors

Autoren eines Artikels sollten auch in der Diskussion zum Artikel hervorgehoben sein – dies kann den Lesefluss bestärken und eindeutig signalisieren, wer hier für Freischaltung und Beitrag verantwortlich ist. Eine kleine Spielerei im Stylesheet, die einen hohen Mehrwert haben kann. Gerade bei Bezug auf den Artikel und damit den Autor kann diese Möglichkeit viel Übersicht schaffen
Suche nicht vergessen

Für mich sind Sitemaps noch immer nicht aus dem Alltag weg zu denken, trotzdem ist die Suche immer mehr das elementare Werkzeug um explizit auf das Blog etwas zu finden. Daher gehört sie zum Umfang eines jedes Blog. Je nach Anforderung und Können kann diese Suche verschieden mächtig ausfallen. Unterstütze die Leser beim Suchen, helfe mit Ergebnissen, die sinnvoll sind und halte trotzdem das Suchen recht einfach. Hier ist Google Vorzeigeobjekt und man kann viele Bereiche auf das eigene Blog beziehen.
Text/Raum

Blogs sind für Leser – daher unterstützt das Lesen auch. Lesen heißt Arbeit für die Augen, Arbeit für den Geist und den Willen. Alle Punkte sollten optimiert für den Leser sein und schon liest der eine oder andere mehr und bis zum Ende. Inhalt ist immer noch der König einer Website für mich, egal ob es sich um techn. Tutorials, spannende Alltagsgeschichten, Videos oder Photos handelt. Daher sollte die Site für die jeweilige Zielgruppe optimiert sein. Viel Text braucht Raum – Whitespaces ist hier das Schlagwort in der Scene. Gib dem Leser die Möglichkeit das Lesen zu genießen.
Druckoptimierung

Leider noch immer kein Standard – was mir unverständlich ist. Nicht immer will man am Rechner lesen und der Druck ist ein Prozess den man nur dem Besucher überlassen sollte. Die Unterstützung eines sauberen Druck ist für mich daher elementar und gehört zu jedem guten Design eines Webprojektes. Auch wenn es nicht tagtäglich im Vordergrund ersichtlich ist, gehört es zum Erarbeiten eines Design. In den Artikeln „Design für den Druck mit CSS“ und „WordPress Druckversion“ habe ich mich dazu umfassend geäußert und stelle Lösungen zur Vergütung, die das Erstellen eines Print-Stylesheets vereinfache. Durchdachte CSS-Frameworks stellen ebenso eine Vorlage dazu bereit, in YAML beispielsweise ist es elementar und ist dabei um genutzt zu werden.

Wie sicher erkennbar ist, habe ich zu jedem Punkt nur eine kurze Ausführung gegeben. Dies ist Absicht und zu jedem einzelnen Punkt könnte man Artikel schreiben und Diskussionen anzetteln. Ich möchte, dass man als Betreiber des Blog über seinen Blog nachdenkt, ihn vergleicht und die Nutzer im Bezug auf das Blog beachtet. Ebenso sind hier nur 10 Punkte zum Tragen gekommen, aber eventuell nimmt der eine oder andere Leser das Thema auf und vervollständigt es. Die Vernetzung von Blogs kann dann ihr übriges tun und weitere Artikel zum Thema können nur Bewusstsein schaffen. In einem anderen Artikel, in dem ich die Betreiber von Websites zu FullFeed bitte, war nicht so angelegt, zeigt aber schön, wie ein Thema die Runde machen kann, was für ein Benefit die Kommentarfunktion hat und wie ein Thema aus der Vielzahl von Themen heraus stechen kann.

Zu fast allen Themen und oft im Bezug mit WordPress gibt es hier im Blog Artikel, nutzt die Suche und nutzt das Wissen, was ich in den Artikeln zur Verfügung stelle. Viele Artikel aus diesem Themenspektrum sind schon älter, was aber nicht heißt, dass sie nicht mehr nutzbar sind. Schaut euch um, nutzt das Suchfeld im oberen Drittel des Blog oder nutzt die erweiterte Suche. Alternativ könnt ihr euch die Suche in den Browser holen, was ich mit Open Search realisiert habe.

Danke für das Abonnieren meines Feed! Inhalt gefällt? Danke sagen · Kommentieren

WordPress Theme in Abhängigkeit wechseln

Frank Bültge — Tue, 10 Feb 2009 12:30:13 +0000

WordPress wird mitunter nicht nur als Blogplattform eingesetzt; denken wir an die Anwendung CMS oder Präsentation von Fotos, so sind das nur einige wenige aus der großen Auswahl. Nicht selten will man dabei für die unterschiedlichsten Abhängigkeiten ein anderes Design laden. So hat meist der Photoblog ein anderes Design als der Weblog.

Im Grunde kann man das recht einfach machen und nicht immer muss man dazu eine umfangreiche Abfrage in die Templates bauen oder gar verschieden Installation von WordPress einrichten. Ebenso kann man sich mit der folgenden gezeigten Lösung mehr Übersicht der getrennten Themes erarbeiten. Im Zuge eines individuellen Designs, wie es beispielsweise bei Nico oder Gerrit diskutiert wird, hat man so recht viele Möglichkeiten.

Mit WordPress 2.8

Mit der kommenden Version von WordPress wird es dazu einen Template Tag geben - body_class(), der diverse Klassen dem body-Tag zuordnet, damit wird die Induvidialität gefördert, oder auch die Syntaxmenge. Hintergründe hat Michael berichtet, inklusive aller möglichen Klassen. Alternativ kann man bei Andrew nachlesen, der die neue Funktion auch schon analysiert hat.

Die Ausgabe könnte dann beispielsweise wie folgt aussehen.

Alles anders

Aber auch ohne das Warten auf WordPress 2.8 und das Suchen der Klassen gibt es eine schöne und saubere Lösung, wie ich finde. Ich trenne dazu die entsprechenden Themes, wenn es sich um extreme Unterschiede handelt, so zum Beispiel zwischen Weblog und Photoblog. In diesem Fall frage ich die Kategorie ab, die nur für Bilder da ist und aktiviere dann ein anderes Theme für die Ausgabe im Frontend.

Mit dieser Grundidee kann man recht viel anstellen und so habe ich mal einige Beispiele aus meinen bisherigen Anwendungen gelistet, wählt selbst, welche Möglichkeiten ihr nutzen möchtet.

Um die Möglichkeit zu nutzen, lagert ihr die Funktion entweder in die functions.php des Themes aus, welches im Backend von WordPress auf Aktiv gesetzt ist, oder ihr speichert es als Plugin. Auch dafür habe ich ein wenig vorbereitet und so findet ihr mein kleines Plugins, welches nur via Code zu ändern ist, also keine Options-Oberfläche mitbringt, auf der entsprechenden Seite zum Plugin „User Theme“.


function fb_user_theme( $template = '' ) {

	// de_DE: Leerzeichen im Namen des Themes muessen mit _ (underline) ersetzt werden!

	// when Profil-ID
	if ( get_profile('ID') == 123 ) {
		$template = 'default';
	}

	// when IP
	if ( $_SERVER['REMOTE_ADDR'] == '127.0.0815.1' ) {
		$template = 'classic';
	}

	// when User_Level
	// @see http://codex.wordpress.org/Roles_and_Capabilities#Roles
	if ( current_user_can('level_10') ) {
		$template = 'classic';
	}

	elseif ( current_user_can('level_5') ) {
		$template = 'classic';
	}

	elseif ( current_user_can('level_2') ) {
		$template = 'default';
	}

	// when category with ID
	if ( in_category('1') ) {
		$template = 'default';
	}

	return $template;
}

add_filter('template', 'fb_user_theme');
add_filter('stylesheet', 'fb_user_theme');

Im Grunde ist es ganz einfach: wenn eine entsprechende Bedingung wahr ist, wie zum Beispiel Kategorie mit der ID 1, dann wird das default-Theme geladen, ansonsten wird immer das Theme geladen, welches im Backend aktiv ist.
In der Funktion wird als der Name des Themes an die Variable $template übergeben und mit Hilfe der beiden Filter wird das Template und das Stylesheet des übergebenen Theme-Namen aktiviert.

Der übergeben Name des Themes kann in der Beschreibung Leerzeichen enthalten, die hier in der Funktion mit _ (underline) ersetzt werden, bitte daran denken, sonst erkennt WordPress das Theme nicht.

Mit diesen kleinen und einfachen Möglichkeit kann man viele Umwege sparen, Installationen von WordPress zusammenfassen und behält trotzdem eine saubere Trennung der Themes. In der Funktion können natürlich alle Arten von Conditional Tags (Hinweise dazu: hier und hier) genutzt werden und so ist auch denkbar, dass statische Seiten oder Beiträge mit bestimmten Tags ein anderes Design erhalten.

Danke für das Abonnieren meines Feed! Inhalt gefällt? Danke sagen · Kommentieren

Tweet This mit WordPress

Frank Bültge — Sun, 01 Feb 2009 21:48:54 +0000

Twitter scheint auch weiterhin an Popularität zu gewinnen und der eine oder andere hat gar den kompletten Umzug durchgeführt - kein Blog mehr, nur eine Adresse bei Twitter.
In der Aufarbeitung meiner Abonnements im Feed-Reader sind mir diverse Artikel aufgefallen, die das eine oder andere Plugin empfehlen um einen Link zum Beitrag zu ergänzen, um den jeweiligen Beitrag bei Twitter zu empfehlen. Im Grunde stellen dann die meisten Plugins eine Funktion bereit, die man in das Template des Themes integriert.

Wie so oft ist das aber ein wenig übertrieben, und wie auch schon in der Vergangenheit mit der Integration von Links zu Social Bookmark Diensten, gibt es auch dafür eine einfache Lösung mit Hilfe einer Funktion aus dem WordPress Core.

Twitter stellt eine URL bereit, die genau das Empfehlen von Beiträgen oder anderen Links bewerkstelligt. Mit Hilfe des Permalink-Template Tag von WordPress ist daher auch einfach und schnell der Link generiert.


Tweet this

Nun gilt es nur die Syntax in das Template des Themes zu integrieren, in der Regel sollte das die single.php des Themes sein. In einigen einfachen Fällen kommt die index.php ebenso in Frage, je nach Aufbau des Themes.

Erweiterung via Tiny-URL

Ein kleines Update möchte ich nachschieben, denn der einen oder andere Nutzer will die URL bei der Übergabe direkt kürzen - siehe Ad in den Kommentaren, denn 140 Zeichen sind doch recht wenig und hier gilt es Zeichen sparen. Aber auch dafür gibt es eine einfache Lösung, die jedoch eine Funktion benötigt, die aus unserem Permalink ein verkürzte URL erstellt.

Dazu muss man nicht viel coden oder suchen, den der Service von TinyURL.com stellt dazu eine API bereit, der diese Aufgabe einfach übernimmt. Die nötige Funktion habe ich von René genommen, da er sie schon in seinem Blog veröffentlicht hat.

Dazu lege ich folgende Funktion in die functions.php des Themes ab.


/**
 * get a short/tiny url
 * @author: René Ade
 * @link: http://www.rene-ade.de/inhalte/php-code-zum-erstellen-einer-tinyurl-ueber-tinyurl-com-api.html
 */
if ( !function_exists('fb_gettinyurl') ) {
	function fb_gettinyurl( $url ) {

		$fp = fopen( 'http://tinyurl.com/api-create.php?url=' . $url, 'r' );
		if ( $fp ) {
			$tinyurl = fgets( $fp );
			if( $tinyurl && !empty($tinyurl) )
				$url = $tinyurl;
			fclose( $fp );
		}

		return $url;
	}
}

Die Integration des Link in das Template des Themes muss dann allerdings ein wenig anders aussehen, denn the_permalink() ist für die Ausgabe erstellt und übergibt nicht nur den Wert der URL. Aber auch hier ist die saubere Trennung in WordPress von echo und return-Funktionen überaus nützlich und so kann man einfach und schnell die Basis dieses Template Tags nutzen - get_permalink().

Nun steht die Funktion zum Ertsellen einer verkürzten URL bereit und wir können den eingangs beschriebenen Link in das Template einbauen. Eine mögliche Syntax könnte wie folgt aussehen.


Tweet this

URL Codierung

Weil es auch dazu schon Fragen gab, gebe ich nochmal kurz einen Hinweis. In der URL kann man nicht einfach ein Leerzeichen übergeben, ähnlich ist es mit anderen Zeichen und so muss man diese Zeichen codieren. Dies kann man via PHP machen oder nutzt eine kleine Tabelle zum Nachschlagen. Damit erschließt sich dann auch, warum ich %20 in meinem Text einsetzen - %20 steht für ein Leerzeichen.

Arbeitet mit Hilfe der PHP Funktion, dann könnte die obige Syntax wie folgt aussehen.


Tweet this

Tweet die Kommentare

Auch das empfehlen einzelner Kommentare sollte damit klappen, denn auch das ist im Grunde nur ein Link. Da hier die URL wesentlich länger ist, zeige ich gleich mal die Syntax mit Hilfe der obigen Funktion um eine kurze URL zu generieren. Hier im Blog ist diese Möglichkeit nicht aktiv und wurde auch nicht getestet - sollten also Verbesserungen bekannt sein oder Fehler auffallen, dann bitte ich um Hinweis in den Kommentaren.


Tweet this



 © Frank Bültge, All rights reserved / Alle Rechte vorbehalten. (ID: 6e8b33de4342c4f2ca76b245199aeee8)
Danke für das Abonnieren meines Feed! Inhalt gefällt? Danke sagen · Kommentieren



WordPress Login Style deaktivieren
Frank Bültge — Mon, 26 Jan 2009 00:44:57 +0000
In der Vergangenheit habe ich einige Möglichkeiten gezeigt, wie man WordPress im Hinblick auf eine Corporate Identity nutzt. Dazu gehört auch das Anpassen des Login-Bereiches. Dies sollte mit Hilfe der entsprechenden Artikel nicht schwer fallen.

WordPress 2.7 Login Design anpassen
WordPress 2.5 und Theme-definiertes Login

In beiden Artikeln bin ich aber nicht darauf eingegangen, wie man das Standard-layout von WordPress deaktiviert, da ich das Beispiel-CSS immer auf Basis des Stylesheet von WordPress aufgebaut habe. Das Stylesheet von WordPress ist aber nicht gerade sehr schlank und warum soll man unnötig Daten laden, die man nicht benötigt?
Mit einem kleinen Hook und einer entsprechenden Funktion entferne ich daher das Laden des Stylesheet von WordPress und lade dann nur das eigene CSS - wie das geht, steht in den beiden Artikeln zum Theme Login Bereich anpassen.



if ( basename($_SERVER['PHP_SELF']) == 'wp-login.php' )
	add_action( 'style_loader_tag', create_function( '$a', "return null;" ) );

Packt man die obige Syntax in die functions.php, ist das ausreichend und auch an richtiger Stelle - der Eingriff ist im Bezug auf das Theme und abhängig vom Theme aus meiner Sicht. Damit stellt man sicher, dass beim Wechsel oder deaktivieren des Themes auch diese Funktion deaktiviert wurde. Aus dem Theme raus kann daher ohne Probleme das Frontend, das Backend und der Login-Bereich angepasst werden. Dies ist aus meiner Sicht und Erfahrung mit entsprechenden Business-Bereichen auch notwendig, wenn auch oft nur in kleinen Bereichen des Backend und des Login. In dem Zusammenhang gilt es auch für mich im Bezug für ein „perfektes“ Theme.


 © Frank Bültge, All rights reserved / Alle Rechte vorbehalten. (ID: 6e8b33de4342c4f2ca76b245199aeee8)
Danke für das Abonnieren meines Feed! Inhalt gefällt? Danke sagen · Kommentieren



Literaturtipp: Einführung in XHTML, CSS und Webdesign
Frank Bültge — Wed, 07 Jan 2009 20:29:16 +0000


Die erste Auflage des Buches kam noch mit geschlossenen Blüten auf dem Cover daher, in der neuen 2. aktualisierten und erweiterten Auflage des Werkes von Michael Jendryschik öffnet es sich nun dem Leser. Schnell erkennt man das an den Blüten auf dem Cover. Aber bei den Blüten soll es nicht bleiben und auch der Inhalt eröffnet sich dem Leser und nimmt ihn mit auf eine spannende und zusammenfassende Reise, die man sonst nur mit Zeit und Recherche im Web erleben kann.
War die erste Auflage noch eine gedruckte Version seiner Seiten im Netz, so ist die zweite Auflage hinreichend gewachsen. Das Buch wendet sich aus dem Titel heraus vornehmlich an Einsteiger und Leser, die die Materie rund herum begreifen wollen. Aus meiner Sicht ist es aber ebenso gut für Fortgeschrittene und Profis geeignet - es gibt immer was zu entdecken oder nachzuschlagen. Daher auch einen sehr kleinen Einblick aus meiner Sicht zum Buch.



Ich für meine Person habe sehr viel von den liebevoll erarbeiteten Inhalten auf Michaels Website gelernt; in der Vergangenheit waren mir die Seiten immer wieder ein Nachschlagen und Lesen wert. Mit der Buchform ist das wesentlich angenehmer und in sehr strukturierter Form möglich.
Das Buch ist ein Rundumpaket und glänzt ebenso mit Umfang, gutem Inhalt und klarer und angenehmer Schreibweise. Hier lässt sich das Wissen von der Pike auf lernen. Trotzdem muss man nicht einen Handwagen ziehen um das Buch zu bewegen. Michael weiß, wie man es auf den Punkt bringt. Daher taugt es auch so gut als Nachschlagewerk, schnell mal im Index geschaut und die Seiten zum Thema nachgelesen.
Der Aufbau beginnt Grundlagen wie Begrifflichkeiten, Standards, Mime-Typen und Browser. Ebenso werden aber Themen angesprochen wie Typographie, Dokumentationdes Quellcode – ob xHTMl oder CSS und Werkzeuge für die Webentwicklung. Um die einzelnen Themen zu verinnerlichen gibt es nun ein komplettes Kapitel zum Nachmachen. Dabei wird das Wissen gefestigt und Fragen klären sich am entstehenden Werk.

Ein Großteil der zweiten Auflage ist mit dem Thema CSS bestückt, was auch schon die Mächtigkeit und Vielfältigkeit der Sprache darstellt. Auch hier ist nichts überflüssig oder fehl am Platz. Von der Einführung des warum und wieso findet man alles was man zu CSS wissen muss. Auch Übersichten zu Browserunterstützung und IE-Bugs fehlen nicht. Gerade letzteres hat in der ersten Ausgabe noch gefehlt und zeigt deutlich, dass man nicht nur das Cover austauscht. Ebenso erkenntlich ist die Veränderung am Umfang zu CSS und dem Kapitel zum Üben. Hier entsteht die Kochbar, eine Beispielwebsite, die sicher um so mehr Spaß macht, hat man die Einleitung zum Buch gelesen und die Zusammenhänge dazu aus dem Freundeskreis von Michael erkannt.
Schön ist, dass das Buch und die Übung praxisorientiert ist – man spürt, dass Michael in seinem Beruf lebt und kein Theoretiker ist. Dem einen oder anderen Webbastler aus meinem Umfeld würde ich das Buch gern auf den Tisch legen und nach dem Lesen mal mit Ihren Arbeiten für Kunden bewerten lassen.
Das Buch glänzt in meinen Augen nicht mir großartigem Layout und tollen Farbseiten; das ist sicher auch nicht das Ziel dieses Buch. Ebenso werden bewusst die vielfältigen Themen des Web reduziert auf die Basis. Themen wie JavaScript, PHP und Datenbanken werden nicht angesprochen. Michael beschränkt sich auf die Grundlagen des Web, die Basis für die Darstellung von Inhalten und die Gestaltung unabhängig vom Inhalt. Hier beweist sich, dass es auf den Inhalt ankommt und der Inhalt ist berauschend für jeden, der viel über die Webentwicklung wissen möchte. Das perfekte Buch zum Thema Webentwicklung ist sicher ein Traum und bei der schnellen und vielfältigen Entwicklung im Web nur sehr schwer zu realisieren. Aber mit diesem Buch hat man mehr als das Basiswissen zur Hand und kann immer wieder nachschlagen. Ich wünschte, dass viele WordPress-Anfragen, die ich im Alltag fast täglich bekomme, zu Designfragen und Ausgabe im Vorfeld dieses Buch gelesen hätten. Denn nur dann kann man auch Verstehen und Ändern. Das Schrauben und Versuchen ist auch ein Weg, mit Hilfe eines entsprechendem Basiswissen macht es aber nicht nur mehr Spaß, es ist auch wesentlich effektiver. Schade, dass ich das Buch nicht als Beilage zu meinem WordPress-Buch beilegen kann; das würde mir viele Fragen zu xHTML und CSS ersparen.  
Fazit
Lesetipp, nicht nur für Einsteiger. Dieses Buch gehört nicht in das Regal eines Webentwicklers, es gehört auf den Arbeitsplatz und sollte genutzt werden. Allen „Webdesignern“, die mit WYSIWYG-Editoren und Tabellenlayout Webgebastel an Kunden verkaufenn denen sei das Buch ebenso empfohlen; macht die Kochbar, nehmt euch die Zeit im Urlaub und seht es als Weiterbildung. Danach kann man durchstarten und bestem Gewissen dem Kunden gegenüber Ergebnisse erzielen. Die Trennung von Inhalt und Layout sind keine Floskeln und der Autor stellt das klar dar und lehrt daher die richtige Arbeitsweise. Mag es für viele ein wiederholtes Wort sein – Webstandards sind noch immer keine Selbstverständlichkeit. Dieses Buch leistet seinen Beitrag. Fundierte Kenntnisse sind mit diesem Buch zu erlernen und nachzulesen.


 © Frank Bültge, All rights reserved / Alle Rechte vorbehalten. (ID: 6e8b33de4342c4f2ca76b245199aeee8)
Danke für das Abonnieren meines Feed! Inhalt gefällt? Danke sagen · Kommentieren



WordPress 2.7 Login Design anpassen
Frank Bültge — Wed, 10 Dec 2008 00:27:12 +0000

Mehr:

#1
#2
#3


WordPress 2.7 steht vor der Tür und es gibt ein Update des Backend-Designs. Das sollte sich sicher rumgesprochen haben und hinzu kommt ein neuer Login-Bereich. Es wurde nur wenig geändert, aber der Anblick entspricht dem Design des neuen Backends.

Schon in der Vergangenheit habe ich beispielsweise im Artikel „WordPress 2.5 und Theme-definiertes Login“ für das Anpassen des Design an das Theme gesprochen. Aus meiner Sicht gehört es einfach zu einem Rundumpaket eines definierten Themes – ganz im Sinne eines Corporate Designs.
Ab der Version 2.7 ist damit das CSS ein wenig anders und wer den Login-Bereich ebenso anpassen möchte, dem zeige ich hier kurz wie es geht und hinterlege das CSS für ein Beispiel.



Stylesheet laden
Um das erstellte CSS für den Login-Bereich zu laden nutze ich eine kleine Funktion, die ich in der functions.php des jeweiligen Themes ablege und via Hook login_head im Login-Head integriere. So kann ich speziell für das Theme den Login definieren und beim Umschalten eines anderen Themes wird dann das andere Login-Design gezogen.

// custom login for theme
// folder themes/theme_name/custom-login/
function fb_custom_login() {
	echo '';
}

add_action('login_head', 'fb_custom_login');

Die Stylesheet-Datei heißt dabei custom-login.css und liegt innerhalb des Ordner custom-login im Ordner des Themes.
Das Stylesheet
Wie schon angesprochen ein kleines Beispiel, was aber die Klassen und IDs des Login-Bereich enthält und so das Anpassen ein wenig erleichtert.

html {
background-color: #fff;
}

#login form {
padding-top: 100px;
}
#login form .submit input {
border-color: #bcb38f !important;
color: #777 !important;
}
#login form .submit input:hover {
border-color: #bcb38f !important;
color: #bcb38f !important;
}
#login h1 {
display: none;
}
.login #nav a {
color: #777 !important;
}
.login #nav a:hover {
color: #bcb38f !important;
}

#wphead img, #wphead h1 {
display: none;
}
#wphead {
height: 100px;
}
#wphead-info {
padding-top: 27px;
}

#footer {
display: none;
}
#footer_custom {
clear: both;
text-align: center;
width: 500px;
margin: auto;
height: 100px;
}
#footer_custom .docs {
padding-top: 0px;
line-height: 100%;
}
#footer_image {
border:none;
}

Soweit zum Beispiel, welches nur eine Möglichkeit der Anpassung darstellt. Hierbei sind den Künsten in der Anwendung von CSS keine Grenzen gesetzt.

Aus meiner Sicht in die Nutzung der Firebug Erweiterung für die Analyse unerlässlich und es empfiehlt sich damit zu arbeiten, wenn man diese noch nicht nutzt.


 © Frank Bültge, All rights reserved / Alle Rechte vorbehalten. (ID: 6e8b33de4342c4f2ca76b245199aeee8)
Danke für das Abonnieren meines Feed! Inhalt gefällt? Danke sagen · Kommentieren



Rundungen mit JavaScript Test erweitert
Frank Bültge — Tue, 09 Dec 2008 13:49:39 +0000
In der Vergangenheit habe ich ein kleines Testscript erstellt, welches einige Lösungen vergleicht, die mittels JavaScript und diverse Hilfen wie Bilder, CSS oder Libraries die Rundungen im Webdesign erleichtern sollen. Mehr Infos im zugehörigen Beitrag.
Aktuell gefällt mir die Lösung „DD_roundies“ sehr gut und so habe ich sie mit in den Test aufgenommen. Ich denke, dass man so einen recht schönen Vergleich ziehen kann. Sicherlich werde ich damit nicht immer auf dem aktuellen Stand sein und wollen. Aber so kann man in den unterschiedlichen Browsern vergleichen und sich eventuell für eine der Lösungen entscheiden. 

Auch gibt es noch weitere Ansätze im Netz, bisher ist mir aber keines aufgefallen, außer dem genannten DD_roundies, um die Test-Seite auszubauen.

Hinweise sind gern willkommen!


 © Frank Bültge, All rights reserved / Alle Rechte vorbehalten. (ID: 6e8b33de4342c4f2ca76b245199aeee8)
Danke für das Abonnieren meines Feed! Inhalt gefällt? Danke sagen · Kommentieren



Photoblog Theme Greyfoto
Frank Bültge — Sat, 29 Nov 2008 15:41:00 +0000
Im Juli 2007 habe ich um einigen meiner eine Auswahl von Fotos meiner Reisen zu präsentieren ein Theme erstellt und auch veröffentlicht, mit dem es einfach und unkompliziert ist, Fotos mit der Hilfe von WordPress zu veröffentlichen. Dabei war das Augenmerk vorrangig darauf gerichtet, dass man recht flexibel sein kann.
So war es möglich, dass man externe Quellen anzapft und die das Bild in jeder Größe damit aus unterschiedlichen Quellen nutzen konnte. Immer wieder habe ich seit dem dem einen oder anderen Nutzer geholfen – denn scheinbar ist die Nutzung von Benutzerdefenierten Feldern und die Vergabe eines Auszug mit einem HTML-Tag zu umständlich. Nur so war aber die Flexibilität gewährleistet.

Lange Rede kurzer Sinn – ich habe ein wenig weiter geschraubt, neue Funktionen eingebaut und das Design flexibler werden lassen. Un somit stelle ich euch das Theme Greyfoto vor.


Was ist Greyfoto?
Greyfoto ist ein Theme für WordPress, mit dem man einfach und unkompliziert Fotos veröffentlichen kann. Es hat aber trotzdem die Freiheit, eigene Quellen zu vergeben und Anpassungen vorzunehmen. Das Theme enthält alles, was man zum Veröffentlichen der Fotos benötigt und es sind diverse Widgets (Widgets ermöglichen es, dass man einfach per Drag&Drop Funktionen in das Design/Frontend holt) enthalten, die man im Sidebar (rechter Bereich des Theme) oder im Footer (alles unterhalb des Fotos) integrieren kann.
Voraussetzungen
WordPress in jeder Version, ich empfehle aber mindestens mit 2.5 einzusteigen. In kleineren Versionen muss in den Code eingegriffen werden, denn ich lade JavaScript-Bibliotheken und Funktionen mit den Möglichkeiten von WordPress! Es wurde entwickelt und ausgiebig getestet unter Version 2.7. In Version 2.7 sind Möglichkeit der Einstellungen für Bilder optimal, um einfach und unkompliziert Fotos zu veröffentlichen.
Die Bilder sollten eine Größe von 640 Pixel Breite haben, dafür ist das Theme optimiert um eine Bildschirmsicht von 1024 Pixel zu unterstützen. Die Einstellungen lassen sich in WordPress, vor allem ab Version 2.7n sehr schön setzen. Es empfiehlt sich aber, dass man die Bilder im Vorfeld mit einem Tool optimiert und auf die Größe bringt, so dass WordPress lediglich das Thumbnail erzeugen muss. Dies spart Ressourcen und so kann die Qualität der Fotos viel besser kontrolliert werden. Für die Archiv-Sichten werden Thumbnails benötigt, diese erstellt WordPress auf Basis der Einstellungen im Backend. Ob du die Bilder beschneiden oder nur auf eine explizite Größe bringen lässt, überlasse ich dir.
Wichtig bei der Nutzung, es darf immer nur ein Bild pro Beitrag hoch geladen werden. WordPress kann im Standard den Upload mehrer Bilder. Damit kann aber nicht automatisch das Thumbnail ohne große Umstände gezogen werden. Daher pro Beitrag Bild hochladen, einfügen und veröffentlichen – fertig. Wie man das macht, wenn man noch nicht mit WordPress gearbeitet hat – siehe Screencast im Anschluss.
Installation

Download des Theme-Packetes und lokal entpacken.
Den Ordner inklusive aller Dateien in das Verzeichnis /themes/ eurer WordPress-Installation kopieren.
Das Themen im Administrationsbereich aktivieren.
Einstellungen --> Lesen "Blogseiten zeigen maximal" auf Wert 1 setzen, damit nur 1 Bild auf der Startseite ist
Nun ist das Theme schon aktiv und ihr könnt es im Frontend testen.
Erwünschten Erweiterungen via Widget in im Bereich Design -> Widgets für den Sidebar und den Footer definieren.




Widgets
Es stehen mehrere Widgets zur Verfügung, die ich direkt für das Theme erstellt habe. Sie sind also zusätzlich zu den bereist bestehenden Widgets von WordPress verfügbar. Die eigenen Widgets unterscheiden sich dabei nicht nur in ihrer Funktion, sie nutzen außerdem JavaScript, um die Effekte des Einblenden zu realisieren. Dies ist mit den Standard-Widgets nicht machbar. Trotzdem werden auch diese unterstützt!

Um aber den Fokus auf das Bild zu lenken, war mir das Ausblenden von zusätzlichen Inhalten wichtig, daher diese Funktion.
Die folgenden Widgets sind verfügbar, eine kurze Erläuterung sollte reichen. Das Experimentieren hilft sicher mehr.

PhotoBlog Navi

Laden der statischen Seiten aus WordPress, Link zur Startseite, nur im Footer unterhalb des Bildes nutzbar
PhotoBlog Footer

Feed-Adressen für Blog und Kommentare, Copyright, Link zu WP und zu mir; nur im Footer nutzbar
PhotoBlog Kategorien

Kategorien listen
PhotoBlog Kommentare

Kommentare listen; inkl. Kommentareingabefelder
PhotoBlog Tag Cloud

Tag Cloud
PhotoBlog Styleswitcher

Styleswitcher, zum Umschalten von schwarz/weiß Design live im Frontend durch den Nutzer

Screencast
Um das Theme ein wenig plastischer und klarer darzustellen, habe ich mal die "neuen" Medien angetestet – ich bitte um Nachsicht, ist mein erster Screencast. Ich hoffe und wünsche, dass es damit ein wenig einfacher und klarer wird, wie man das Theme nutzt und wie einfach es ist, Bilder mit WordPress zu präsentieren.

Archiv
Das Archiv wurde mit einer extra Sicht auf alle Fotos ausgestattet. Dazu liegt dem Theme ein Template bei. Dazu muss also nur eine Seite angelegt werden, diese muss Archiv heißen und das Template Archiv Page nutzen! Im Anschluss der Veröffentlichung werden dort alle Bilder des Blog dargestellt und sind über JS in einer gesonderten Sicht sichtbar. Dazu muss man dann auch nicht in die Einzelbilder abspringen, sondern kann direkt in dem entstandenen Fenster die Bilder genießen.
Fazit
Nachdem ich nun viel geschrieben und geredet habe – kann ich nur viel Freude damit wünschen und ich meine, dass mein Theme recht gut läuft - Fehlerfrei ist es sicher nicht! Über Hinweise und Tipps würde ich mich freuen. Ebenso nehme ich gern Tipps zum Screencast auf, denn da kann ich sicher eine Menge dazu lernen. Ebenso freue ich mich, wenn es Hinweise gibt, was ich eventuell noch hier im Artikel darstellen sollte, so dass es euch einfach klarer wird, wie man das Theme nutzt. Mit Sicherheit werde ich hier keine Anleitung zu WordPress ablegen, dazu dient WordPress Deutschland oder mein Buch zu WordPress.
Download:












Ist die Arbeit nicht 1 Euro wert?

Jede Spende wird dankbar angenommen und ermöglicht das weitere Arbeiten an freier Software.

Möchtest du mehr oder anders spenden, so besuche meine Wunschliste.
Download als zip-Date (Version 2.2.9): greyfoto229.zip - 111 kByte

Download als zip-Datei (Version 2.3): greyfoto23.zip - 111 kByte

Download als zip-Datei (Version 2.3.2): greyfoto232.zip - 112 kByte
Historie

v2.2.1 - Das Theme Greyfoto frei nutzbar
v2.2.2 - Bug im Lesen der Exif-Daten korrigiert
v2.2.4 - Exif-Daten erweitert, kleine Korrekturen (22/04/2009)
v2.2.5 - Exif-Daten erweitert, neue Loops, neues Widget, Korrekturen, neue Scripte für Zoom (nur WordPress 2.8 und größer) (07/08/2009)
v2.2.6 - kleiner Bug im LEsen der Exif-Daten, wenn man "benutzerdef. Felder" einsetzt korrigiert, CSS Korrektur bei weißem Design (16/08/2009)
v2.2.7 - Bugfix im Loop der index.php
v2.2.8 - Korrektur des Loop; Änderungen der Funktionen und JS
v2.2.9 (10/08/2009) - sehr viel neu, Neuer Styleswitcher, neues Widget für die letzten Bilder im Sidebar, single.php zusätzlich, Änderung diverser Loop, Pagination im Archiv, Direkter Link zum Beitrag aus den Kategorien heraus, diverse Code-Änderungen, Eigener Widget-Bereich für Archiv
v2.3 - Änderungen in der Auswertung der Exif-Daten
v2.3.2 - Funktionen aus WP 3.0 integriert; Anpassungen im CSS und Templates; Pagination der Seiten


 © Frank Bültge, All rights reserved / Alle Rechte vorbehalten. (ID: 6e8b33de4342c4f2ca76b245199aeee8)
Danke für das Abonnieren meines Feed! Inhalt gefällt? Danke sagen · Kommentieren



Generator für hCard/vCard im neuen Design
Frank Bültge — Tue, 14 Oct 2008 09:21:17 +0000


Mikroformate sind ein wenig in den Hintergrund der Diskussion im Web gerutscht, heißt aber nicht, dass sie keinen Nutzen mehr haben.

WordPress beispielsweise integriert sie auch weiterhin im Standard, was sich auch in der kommenden Version 2.7 schön abbildet. Die Add ons für Firefox sind nun auch unter der Version 3 nutzbar und immer mehr Webseiten bieten dem Leser den Mehrwert.
Vor geraumer Zeit hatte ich im Beitrag „Generator für Microformat hCard“ auf den Nutzen und die Integration hingewiesen, einige Tools empfohlen und einen Generator erstellt, der die Integration vereinfacht.
Dieser Generator verfügt über einen Styleswitcher und in der Vergangenheit haben mir nur Frank Helmschrott und Ulf Mayer ein Design gesandt.
Seit heute hat der Generator ein weiteres schickes Design von Andreas Isaak, aka Jared.

Vielen Dank auch nochmal auf diesem Wege für diesen Mehrwert!

 © Frank Bültge, All rights reserved / Alle Rechte vorbehalten. (ID: 6e8b33de4342c4f2ca76b245199aeee8)
Danke für das Abonnieren meines Feed! Inhalt gefällt? Danke sagen · Kommentieren



WordPress 2.7 Navi, die xte
Frank Bültge — Tue, 14 Oct 2008 06:04:50 +0000
Das Design und die Strukturierung der kommenden WordPress Version 2.7 wurde schon mehrfach vorgestellt und diskutiert. Damit mal wieder neue Informationen und Diskussionsstoff in das Feuer geworfen werden, hier mal ein Screenshot der aktuellen Beta.



 © Frank Bültge, All rights reserved / Alle Rechte vorbehalten. (ID: 6e8b33de4342c4f2ca76b245199aeee8)
Danke für das Abonnieren meines Feed! Inhalt gefällt? Danke sagen · Kommentieren



Bessere Seiten entwickeln mit Firebug
Frank Bültge — Thu, 14 Aug 2008 11:31:36 +0000


Die Webgemeinde ist sich im Nutzen des Add on Firebug für den Browser Firefox sicher einig - erst einmal damit gearbeitet, dann ist der Firebug ein unverzeichtbares Werkzeug, welches auch den Sprung zu einem anderen Browser erschwert.
Das Add on bietet sehr viele und umfangreiche Funktionen, außerdem kann man vie Plugin den Firebug erweitern, was ihn um einiges stärker weden läßt. Ich denke da nur an Erweiterungen wie YSlow, FirePHP und PixelPerfect, die ich nicht mehr missen will.
Lesebefehl
Noch besser ist es aber, wenn man das Add on auch ausschöpfen kann, weil man das Tool kennt und deren Funktion richtig anwendet. Genau in diesem Punkt setzt ein Tutorial von webmonkey.com an und erklärt uns, wie man Firebug richtig und umfassend nutzt.

Daher mein Hinweis und Tipp als Lesebefehl für alle Nutzer des Firebug, die eventuell noch dazu lernen wollen und können.
Alternative ohne Firefox
Will oder kann man nicht mit dem Firefox arbeiten, dann ist das Leichtgewicht Firebug Lite des Firebug eventuell eine Alternative, denn dieses Tool ist browserunabhängig und kann dem Entwickler auch in anderen Briwsern helfen.


 © Frank Bültge, All rights reserved / Alle Rechte vorbehalten. (ID: 6e8b33de4342c4f2ca76b245199aeee8)
Danke für das Abonnieren meines Feed! Inhalt gefällt? Danke sagen · Kommentieren



WordPress Content Basis
Frank Bültge — Wed, 13 Aug 2008 10:22:04 +0000


Wer sich an die Arbeit macht und ein neues Theme erstellt, der benötigt eine Reihe von klassischen Markups in der Datenbank um das Design zu prüfen. Erstellt man das Theme für WordPress auf einer lokalen Installation oder einem Testblog, der ohne Inhalte auskommt, dann kann es mühsam sein, wenn man sich erst die Beiträge und Seiten einrichten muss, um das Design umfangreich zu testen.
Auch mir ging es des öfteren so und daher habe mich einen Inhalt erschaffen, nutze den immer wieder neu. Wer sich ebenfalls die Mühe sparen will, der findet in diesem Beitrag und die Informationen zum Content.


Nachdem der Download der XML-Datei erfolgt ist, dann kann diese in jedem aufgesetzten WordPress-Blog importiert werden. Die Funktion findet man im Bereich Verwalten → Import.
Der Inhalt wurde von mir gefüttert mit:

Artikel
Seiten
Beiträge mit Absätzen (p) und Breaks (br)
Voll-Bild, zentriert mit Link, Caption
Thumbnail-Bild, float rechts und links mit Link, Caption
Links
Listen (ul und ol), zwei Dimensionen
Code
Zitate
Microformat hCard/vCard in Seite „Contact Me“
Tags
Kategorien
Kommentare vorhanden; aktiv, deaktiviert
Überschriften h1 – h6
strong, em, del, blockquote
Tabellen, inkl. thead, th und tbody, td
dl und ul, ol mit unterschiedlichen Attribut type

Die Inhalte des XML erheben keinen Anspruch auf Vollständigkeit. Die Bilder wurden mit der Version 2.6 integriert, so dass der div für Caption und die Klassen für die Bilder mit WordPress erzeugt wurden. Wer es nutzen will – viel Spaß damit.
Download:












Ist die Arbeit nicht 1 Euro wert?

Jede Spende wird dankbar angenommen und ermöglicht das weitere Arbeiten an freier Software.

Möchtest du mehr oder anders spenden, so besuche meine Wunschliste.
Download als zip-Datei: wordpress-content-base.zip - 6 kByte



Historie

13.08.2008 - Eine Idee
26.08.2008 - Erweitert um float left, right; Definitionsliste, Tabellen; Bilderlinks nun vorhanden
11.11.2009 - Erweiterungen der Kommentare, Hierarchien in den Kommentaren und mehr Metadaten zu den Bildern; ebenso Daten im Trash (ab WP 2.9 nutzbar)


 © Frank Bültge, All rights reserved / Alle Rechte vorbehalten. (ID: 6e8b33de4342c4f2ca76b245199aeee8)
Danke für das Abonnieren meines Feed! Inhalt gefällt? Danke sagen · Kommentieren



CSS Sprites einfach erklärt
Frank Bültge — Thu, 05 Jun 2008 08:41:43 +0000
Die Webkrauts haben das Thema „Hoverffekte mit CSS-Sprites“ schon vor langer Zeit aufgegriffen und erklärt, ausführlich. Dies soll hier nicht statt finden. Aber es ist immer noch eine relativ selten verwendete Technik und viele arbeiten dann mit Lösungen via JavaScript um die Bilder zum richtigen Zeitpunkt zu laden. Dies ist nicht nötig, mit Hilfe der Technik der CSS-Sprites kann man den unschönen Effekt, der auftritt bei MouseOver von Bildern als Link, beheben. Das ist wenig im Aufwand und bringt viel im Aussehen und Benutzerfreundlichkeit.
Um auf diese Technik nochmal und vereinfacht aufmerksam zu machen, habe ich mal ein sehr einfaches und, so denke ich, überschaubares Beispiel erstellt. Ansehen, verstehen und Nutzen war die Devise.

Die vielen kleinen Spielereien, die dann daraus resultieren sind auf vielen Beiträgen im Netz nachzulesen.



Die Nutzung von CSS-Sprites hat Vorteile:

Kein Einsatz von clientseitigen Sprache wie JavaScript nötig
Kein MouseOver-Code in den Links
Bilder liegen vor und der lästige Verlagerungseffekt entfällt
weniger Bilder beim Download und im Einsatz, wenn man es effektiv nutzt
Bessere Nutzung der Bandbreite beim Besucher

So geht es
In wenigen Punkten und Erklärungen ist die Lösung zu sehen. Wie das ganze dann in Benutzung aussieht, dass sieht man oben am Start des Artikels oder im Beispiel in der Experimente-Box.
Das Bild kann natürlich mehrfach verwendet werden. Eventuell benötigt man das Logo auch in anderen Darstellungen auf der Seite, ohne hover-Effekt. Damit lohnen sich solche Lösungen richtig. Man nutzt dann eben nur den Bereich, der zu sehen sein soll. 

Bild
125px breit und 60px hoch; 5px Abstand sind zwischen den einzelnen Bildern des Ganzen
CSS Style
Im Grund greift das CSS nur auf das ID zu und erzeugt den Effekt durch die Pseudeklasse hover.

Die Höhe und Breite ergibt sich aus der Größe des eigentlichen Einzelbildes, in diesem Beispiel 60px.

#image-link {
	width: 60px;
	height: 60px;
	text-decoration: none;
	display: block;
	background: url('images/fb-sprite.png') 0 0;
}

#image-link:hover, #image-link:active {
	background-position: 60px 0;
}

 

Die Angabe 0 0 muss bei background nicht vergeben werden; nur wenn es eine Verschiebung geben soll. Genauso könnte man das Beispiel hier auch anders herum nutzen. Dafür müsste man lediglich die Positionswerte für die ID image-link tauschen.

#image-link {
	width: 60px;
	height: 60px;
	text-decoration: none;
	display: block;
	background: url('images/fb-sprite.png') 60px 0;
}

#image-link:hover, #image-link:active {
	background-position: 0 0;
}

HTML Code
In diesem Bespiel dient ein einfacher Link als Demonstration, natürlich kann man hier alle bekannten Möglichkeiten aufgreifen und beispielsweise schöne Navigation erstellen.

 


 © Frank Bültge, All rights reserved / Alle Rechte vorbehalten. (ID: 6e8b33de4342c4f2ca76b245199aeee8)
Danke für das Abonnieren meines Feed! Inhalt gefällt? Danke sagen · Kommentieren



Web Development Helper für IE
Frank Bültge — Mon, 26 May 2008 09:36:13 +0000
Ich für meinen Teil behandel ja den Internet Explorer sehr stiefmütterlich, was man im Businessumfeld nicht unbedingt mache kann. Damit die Analyse im Liebling der Web-Entwickler, dem Internet Explorer, nicht zu ganz extremen Flüchen wird, gibt es einiges an Hilfen für den täglichen Stress mit den vielen „Features“ im Browser.
Aktuell gefällt mir ein Tool ganz besonders - der Web Development Helper. Viele Funktionen, die ich sonst nur aus dem Firefox mit diversen Add ons kenne, sind nach der Installation verfügbar. Die Liste der Features ist im zugehörigen Beitrag nachzulesen.



Voraussetzungen

Internet Explorer 6 oder größer
.net Framework 2.0 oder höher

Alternative für Opera
Auch für Opera-User gibt es eine Erweiterung um die Entwicklung zu erleichtern - Opera Dragonfly.


 © Frank Bültge, All rights reserved / Alle Rechte vorbehalten. (ID: 6e8b33de4342c4f2ca76b245199aeee8)
Danke für das Abonnieren meines Feed! Inhalt gefällt? Danke sagen · Kommentieren

bueltge.de [by:ltge.de] » Webdesign

Promote MDN | Mozilla Developer Network

Simple Media Queries Tester

Gewinnspiel: neue Designs für Wartungsmodus gesucht

Wie geht das?

Maintenance Mode

Was hat man davon?

Gibt es was zu gewinnen?

Zeitrahmen?

WP Basis Theme in (x)HTML5

Arbeit mit...

Warum das alles?

Wie komme ich daran?

WP Basis Theme

WordPress Design Tweaks

CiteDrag: Drag/Drop einfach und effizient

HTML Lorem ipsum Deutsch

Einblick in HTML5

WordPress Seiten & Unterseiten abfragen

Hintergrund

Lösung

Fazit

Filter für caption-Shortcode in WordPress

Schön beim Einfügen löschen

Filtern in der Ausgabe

Eigenes HTML liefern

10 Punkte, die das Blog besser machen

Besucher stehen im Mittelpunkt

Text Links im Artikel

Kommentar Threading

Kommentare nutzerfreundlich gestalten

Wiedererkennung des Kommentierenden

Sidebar für mehr Information nutzen

Hervorheben des Autors

Suche nicht vergessen

Text/Raum

Druckoptimierung

WordPress Theme in Abhängigkeit wechseln

Mit WordPress 2.8

Alles anders

Tweet This mit WordPress

Erweiterung via Tiny-URL

URL Codierung

Tweet die Kommentare

WordPress Login Style deaktivieren

Literaturtipp: Einführung in XHTML, CSS und Webdesign

Fazit

WordPress 2.7 Login Design anpassen

Mehr:

Stylesheet laden

Das Stylesheet

Rundungen mit JavaScript Test erweitert

Photoblog Theme Greyfoto

Was ist Greyfoto?

Voraussetzungen

Installation

Widgets

Screencast

Archiv

Fazit

Download:

Historie

Generator für hCard/vCard im neuen Design

WordPress 2.7 Navi, die xte

Bessere Seiten entwickeln mit Firebug

Lesebefehl

Alternative ohne Firefox

WordPress Content Basis

Download:

Historie

CSS Sprites einfach erklärt

So geht es

Bild

CSS Style

HTML Code

Web Development Helper für IE

Voraussetzungen

Alternative für Opera