Phlow: Musik, Video, Netzkultur, Seminare, Webdesign

Muster, Hintergrundmuster, Pattern, Kacheln

Moritz »mo.« Sauer — Sat, 04 May 2013 19:38:35 +0000

Muster: Quellen, Links und Anleitungen

Mit einem Hintergrundbild gestaltet man maßgeblich eine Website. Vor allem Kacheln sind beliebt. Doch diese kann man nicht nur für Webdesigns nutzen, sondern auch für eigene Präsentationen. Eine Sammlung mit Links zu kostenlosen Downloads und Muster-Generatoren sowie Anleitungen, wie man eigene Muster erstellt.

Freie Downloads: Muster

Anleitungen um eigene Muster zu erstellen

Themenverwandte Artikel

YouTube: Hintergrundinformationen und ausgewählte Kanäle

Moritz »mo.« Sauer — Thu, 02 May 2013 12:32:08 +0000

YouTube löst das Fernsehen ab und löst das Versprechen eines interaktiven Fernsehens in einem Many-To-Many-Medium ein. Als begeisterter YouTube-Nutzer betreibe ich nicht nur meinen eigenen Phlow Kanal, sondern konsumiere fleissig, was es da alles gibt. Mit dem Phlow-YouTube-Special biete ich eine Website über welche man schnell Hintergrundinformationen findet und neue spannende Kanäle entdeckt.

Schlagwörter: youtube

Wer empfehlenswerte Kanäle kundtun möchte, bittebitte nur zu und ab damit in die Kanäle. Insbesondere deutsche Kanäle jenseits von Aussenseitern und Ytitty mit ein wenig Hirn suche ich noch. Jaja, es gibt schon so tolle Sachen wie digitalKultur.TV, aber da gibt es doch sicherlich noch mehr ;)

Mehr Favoriten, Empfehlungen und Playlists auf http://www.youtube.com/PhlowMedia.

Themenverwandte Artikel

WordPress Themes

Moritz »mo.« Sauer — Fri, 26 Apr 2013 13:49:03 +0000

Hochwertige und außergewöhnliche Themes für WordPress

Ich teste gerne WordPress Themes, besonders Themes, die auf einem Responsive Webdesign basieren und zahlreiche Optionen für den Einsatz bieten. Dies ist eine wachsende Sammlung hochwertiger WordPress Themes, sortiert nach Idee und Fokus.

Schlagwörter: themes, webdesign, wordpress

Überblick über die vorgestellten Themes

Blog- und Magazin-Theme: Yoko Theme
Theme für Fotografen: Touchfolio Theme
Variables Theme mit zahlreichen Funktionen: Responsive Theme
Blog- und Magazin-Theme: Leaf Theme
Themes ohne ausführliche Beschreibung: Themes mit Kurzbeschreibung und Screenshot
Liste mit weiteren getesteten Themes: Liste mit noch mehr wertigen Themes

Yoko Theme

Yoko ist ein Blog-Theme, das sich sehr gut für Blogs und Magazine eignet. Anstelle des typischen zweispaltigen Blog-Layout kommt Yoko mit drei Spalten daher. Zwar ist die mittlere Spalte ein wenig arg schmal, bietet aber für Social Media Links samt Icons und Kategorien mit einem Ort genügend Platz.

Yoko unterscheidet sich von anderen Themes besonders durch das zweite Menu direkt unterhalb der Kopfgrafik. Über dieses Navigationselement kann man hervorragend Besucher leiten und ihnen eine hierarchische Übersicht über die angebotenen Inhalte bieten.

Wie alle Themes der deutschen beiden deutschen WordPress-Entwickler Ellen und Manuel basiert auch Yoko auf einem Responsive Webdesign. Aber nicht nur das Theme ist in Deutsch, sondern auch die umfangreiche Dokumentation, die einem hilft, dass Theme passgenau auf die eigenen Bedürfnisse zuzuschneiden. Auch die kostenpflichtigen Themes von Elmastudio erfreuen sich großer Beliebtheit. Das liegt einerseits an den luftigen Designs und andererseits an wirklich anwenderfreundlichen Preisen.

Pro

Deutsches Theme
Umfangreiche PDF-Dokumentation mit Videoanleitungen
Außergewöhnliche Navigationsleiste
Demo Yoko

Responsive Theme

Responsive ist ein Theme, das in allen Browsern gut aussieht. Das schlicht gestaltete Theme bietet eine große Bandbreite an Möglichkeiten für die Gestaltung. Dazu gehören vier Positionen für Menüs, elf Widget-Bereiche sowie Optionen, um unkompliziert das Logo auszutauschen oder eigene CSS-Stylevorgaben einzugeben.

Außergewöhnlich sind die Möglichkeiten die Startseite mit verschiedenen Seitenvorlagen zu gestalten. Sie wollen eine Startseite mit einem Call-To-Action-Button? Kein Problem. Oder soll die Website im klassischen Blog-Look daherkommen? Oder als Magazin? Mit insgesamt neun Seiten-Vorlagen bringt man Schwung in Start- und Unterseiten.

Dank dieser zahlreichen Möglichkeiten eignet sich das Responsive Theme für Portofolios, Firmen-Websites oder ganz »normale« Blog-Vorhaben.

Pro

Deutschsprachig
Äußerst anpassungfähig mit zahlreichen Optionen
Neun verschiedene Vorlagen für Seiten

Contra

Linkfarbe lässt sich nicht in den Optionen anpassen

Download: http://wordpress.org/extend/themes/responsive
Demonstration: http://themeid.com/demo/responsive/
Anleitung und Informationen: http://cyberchimps.com/forum/free/responsive/

Touchfolio Theme für Fotografen

Touchfolio ist ein Theme für Fotografen. Großzügig präsentiert man mit Touchfolio seine Bilder, die Besucher auch mit Hilfe der Pfeiltasten weiterblättern können. Fotos organisiert man mit Touchfolio über das Theme-eigene Beitragsformat namens Gallery.

Mittels dieser Galleriefunktion lassen sich Fotos thematisch kategorisieren und anschließend in das Navigationsmenü in der Seitenleiste einbauen. Für die Präsentation seines eigenen Fotoportfolios bietet das Theme zwei Varianten. Dazu erstellt man einfach eine Seite und wählt das gewünschte Template aus. Anschließend wählt man diese Seite als Startseite unter Einstellungen > Lesen.

Aber auch auf ein reguläres Blog-Layout muss man nicht verzichten. Dadurch mischt man bei Bedarf einfach Bilder mit Artikel und präsentiert diese auf einer Website.

Pro

Navigation über Pfeiltasten möglich
Zwei verschiedene Arten von Portfolioseiten
Responsive Webdesign

Contra

Keine deutschsprachige Version

Download: http://dimsemenov.com/themes/touchfolio/
Demonstration: http://dimsemenov.com/themes/touchfolio/demo/
Anleitung und Informationen: http://dimsemenov.com/themes/touchfolio/installation.html

Weitere hochwertige WordPress Themes

Leaf Theme

Das Leaf-Theme nutzt z.B. das großartige deutsche Reggae-Blog House Of Reggae.

Leaf Theme

Frank

Schnell, flexibl, schöne Typografie, responsive und angeblich noch nicht fertig, weil es konstant auf Github weiterentwicklel wird.

Lizenz: GNU Public License
Link: http://somerandomdude.com/work/frank/

Noch mehr WordPress Themes

Die folgenden Themes nutzt Automattic, die Firma hinter WordPress, für die eigene Blogging-Plattform WordPress.com. Das garantiert hochwertige Themes, die höchstwahrscheinlich gepflegt werden und mit neuen Funktionen erweitert werden. Eine Übersicht über alle (freien)WordPress-Themes listet weitere großartige und freie Themes auf. Hier die Themes, die mir persönlich sehr zusagen:

Themenverwandte Artikel

Seitenverhältnisse für den eleganten Bildaufbau

Moritz »mo.« Sauer — Mon, 22 Apr 2013 07:33:22 +0000

Wer Bilder beschneidet oder Bildausschnitte herstellen will, dem helfen harmonische Proportionen, die dem Auge gefallen. Dieser Artikel stellt verschiedene Seitenverhältnisse vor und zeigt, wie man diese berechnet.

Schlagwörter: bildbearbeitung, fibonacci, goldener schnitt, konstruktion, proportionen

Goldenes Rechteck – 1,618:1

Als Goldenes Rechteck bezeichnet man ein Rechteck mit dem Seitenverhältnis des Goldenen Schnitts. Vom Goldenen Schnitt spricht man, wenn eine Strecke AB so zweigeteilt wird, dass die ganze Strecke AB zur längeren Teilstrecke AC im gleichen Verhältnis steht wie AC zur kürzeren Teilstrecke CB. Das Verhältnis beträgt etwa 1,61893:1.

Beispielbild: 666x412 Pixel

21:9

Beispielbild: 666x285 Pixel

2:1

Beispielbild: 666x333 Pixel

16:9

Beispielbild: 666x375 Pixel

5:3

Beispielbild: 666x400 Pixel

3:2

Beispielbild: 666x444 Pixel

4:3

Beispielbild: 666x500 Pixel

Quellen zum Thema »Seitenverhältnisse«

Themenverwandte Artikel

TiddlyWiki: Unkompliziertes Wiki für den USB-Stick

Moritz »mo.« Sauer — Tue, 02 Apr 2013 09:41:15 +0000

Wiki für die Hosentasche

Manchmal sind kleine Dinge ganz groß. Zum Beispiel das Wiki für den USB-Stick namens Tiddlywiki. Das wuchs uns im letzten Jahr immer mehr ans Herz. Denn TiddlyWiki ist ein vollwertiges Wiki Weblog Redaktionssystem, dass aus einer einzigen HTML-Webseite besteht. Diese basiert auf jede Menge Javascript, die das gesamte CMS steuert und neue Daten verwaltet, taggt, ordnet und natürlich abspeichert.

Schlagwörter: free, javascript, open source, tiddlywiki, wiki

Wozu eignet sich das Open Source-Wiki? Hm, da gibt es vielfältige Möglichkeiten. Allen voran natürlich als stylishe Webseite für eigene kleine Projekt-Webseiten. Einfach das TiddlyWiki im Browser starten, Änderungen vornehmen und die aktualisierte Website via FTP hochladen. Dank der immer weiter wachsenden Community gibt es natürlich auch schon Versionen, die sich selbstständig auf dem eigenen Webspace abspeichern, aber da müsst Ihr mal selbst rumprobieren und suchen.

Eine weitere Variante für die Verwendung bildet die Präsentation auf einem Panel. Da TiddlyWiki im Browser funktioniert, navigiert man einfach bei der Präsentation mit dem Bworser im Vollbild-Modus. Hilfreich ist dabei die Tatsache, dass man Flash-Anwendungen, externe Links und verlinkte Daten schnel und einfach aufrufen kann. Selbstverständlich lässt sich das Aussehen von TiddlyWiki über Stylesheets optisch gestalten und den eigenen Wünschen anpassen. Last not least kann man nach dem Vortrag die Präsentation einfach im Web zugänglich machen, indem man das TiddlyWiki hochlädt. Im Originalzustand ist die TiddlyWiki-Website derzeit ca. 170kb schwer.

Ich selbst, nutze das TiddlyWiki als Notizzettel während ich durch das Web surfe. Daten und interessante Links stapel ich hier zwischen. Das Wiki rufe ich dabei unkompliziert wie alle anderen Websites über einen Klick in meiner Navigationsleiste auf. Sollte ich aus Versehen noch nicht zwischegespeichert haben, erinnert mich auch das putzige und smarte Wiki daran.

Einziger Nachteil von TiddlyWiki ist, dass es bei ausgeschaltetem Javascript schlicht nicht funktioniert.

Links zum Thema TiddlyWiki

Website: www.tiddlywiki.com

Themenverwandte Artikel

5 Kostenlose Webdesign-Firefox-Erweiterungen

Moritz »mo.« Sauer — Tue, 02 Apr 2013 09:36:36 +0000

Auswahl an Firefox-Erweiterungen

Für die Web-Entwicklung ist der Firefox-Browser neben Chrome unschlagbar. Über die Add-On-Schnittstelle integriert man unkompliziert Helferlein, die einem beim Webdesign den Alltag erleichtern, um bessere Webseiten zu bauen. Die folgenden fünf Plugins helfen bei der Gestaltung von Webseiten via HTML und CSS, bei der Überprüfung von Suchmaschinenpositionen und Links sowie beim komfortableren Arbeiten mit Webseiten und Web-Services.

Schlagwörter: addons, erweiterungen, firebug, Firefox, plugins

Firebug - Das beste Webdesign-Plugin für HTML-und CSS Entwickler

Das Webdesign-Plugin Firebug blendet man schnell über die Tastenkombination F12 oder über einen Klick auf das Firebug-Icon in der Statusleiste ein. Mit dem außergewöhnlichen Plugin bearbeitet man eigene sowie fremde Websites direkt über ein Eingabefenster, dass das Add-On unterhalb des Browserfensters einblendet. Schnell wendet man neue CSS-Befehle direkt auf der Webseite an oder untersucht sie. Außerdem hilft Firebug beim entwanzen (Debuggen) der eigenen Webseiten. Eine sehr edle und gelungene Erweiterung.

Download: Firebug

HTML Validator - HTML-Fehler finden und beseitigen

Die Firefox-Erweiterung HTML Validator hilft beim Finden von Fehlern in Quelltexten. HTML Validator listet dazu für jede Webseite in der Statusleiste die Fehler auf. Mit einem Doppelklick leitet einen das Addon sachdienlich und unkompliziert zum Fehler im Quellcode. Schaut man sich den Quellcode von Webseiten über STRG+U oder das Kontextmenü an, öffnet die Erweiterung unterhalb des Quellcode-Fensters einen eigenen Bereich, über den man mit einem Klick zu fragwürdigen Stellen im Quellcode springt (siehe obigen Screenshot).

Download: HTML Validator

Web Developer Toolbar - Das zweitbeste Webdesign-Plugin

Lange Zeit war die Web Developer Toolbar das Lieblingswerkzeug bei der Gestaltung von Webseiten bis es von Firebug vom Thron gestoßen wurde. Trotzdem verfügt die Web Developer Toolbar immer noch um einige Funktionen, die Firebug nicht aufweist. Um gute Websites zu bauen, hilft es, den Browser-Bildschirm auf Maße wie 1024x768 zurechtzustutzen. Schließlich entwickelt man Webseiten nicht für Designer und Agenturen mit riesigen Bildschirmen, sondern für normale Nutzer.

Weitere hilfreiche Funktionen der Toolbar sind das Ein- und Ausschalten von Bildern, schnelle Validieren der CSS-Dateien und schnelle An- und Ausstellen von Javascript. Manchmal sind auch die Hilfslinien ein wertvolles Werkzeug beim Vermessen von Spalten und Boxen.

Download: Web Developer

Greasemonkey: Websites komfortable mit Javascripts erweitern

Greasemonkey erlaubt dem Nutzer eigene JavaScript-Dateien im Browser auszuführen. Diese Scripte individualisieren das Erscheinungsbild und Verhalten der angezeigten Webseite ohne einen Zugriff auf die eigentliche Webseite vornehmen zu müssen. Dadurch erweitert Greasemonkey beispielsweise Webseiten um Funktionen, behebt Fehler in der Darstellung, bindet Inhalte anderer Webseiten ein und erledigt wiederkehrende Aufgaben automatisch.

Wer z.B. häufig Wikipedia-Artikel editiert, den unterstützt das Scipt WikEd. Mit Hilfe von Greasemonkey bindet man dieses in Firefox ein und erhält für die Bearbeitung von Wikipedia-Artikel einen komfortablen WYSIWYG-Editor - natürlich auch für alle anderen Wikis, die auf der MediaWiki-Software basieren. Weitere Greasemonkey-Scripte findet man unter www.userscripts.org und eine ausführliche Greasemonkey-Anleitung in Deutsch.

Download: Greasemonkey

Suchmaschinenpositionen zu Keywords mit RankChecker abfragen

Suchmaschinenoptimierung ist eine spannende Wissenschaft bei welcher viel Google-Voodoo mitschwingt. Eine Tatsache in diesem Wettlauf ist aber unumstößlich: Die tatsächliche Suchmaschinenpositionierung von Websits. Um die Suchmaschinenpositionen seiner eigenen Website oder der von Kollegen auf dem Monitor zu überprüfen, nutzt man einfach den RankChecker. In Profilen legt man Suchwörter für verschiedene Domains und Webseiten an und schickt dann den RankChecker los, der in Google, Yahoo und Live.com die Suchergebnispositionen überprüft. Ein unglaublich hilfreiches Analysewerkzeug, dass mir das ein oder andere Mal schon Fragen beantwortet und ein besseres Verständnis für die Positionierung meiner Webseiten geliefert hat.

Download: RankChecker

Color-Picker: Farbwerte auf Webseiten ermitteln

ColorZilla ist eine kleinee aber feine Firefox-Erweiterung für Webdesigner. Das Addon intergriert sich in der Statusleiste des Firefox-Browsers und wird mit einem Klick auf den Color-Picker aktiviert. Anschließend fährt man mit dem Mauszeiger über die Webseite und ColorZilla zeigt die Farbwerte in der Statusleiste an. Klickt man auf eine Farbe auf einer Webseite, merkt sich das Addon diese. Mit einem Rechtsklick auf den Color-Picker zeigt ColorZilla den Farbwert als RGB- oder Hexadezimalwert an. Diesen kann man anschließend in den Zwischenspeicher kopieren, um ihn in Photoshop oder CSS-Dateien zu verwenden. ColorZilla verwaltet außerdem eigene Paletten.

Download: ColorZilla

Themenverwandte Artikel

GEMA versus YouTube

Moritz »mo.« Sauer — Tue, 26 Mar 2013 10:17:20 +0000

Ein Interview mit Stephan Benn

Video & Audio-Interview Was bedeutet eigentlich Urheberrecht? Was ist das Leistungsschutzrecht? Warum wurde die GEMA gegründet und welche Idee steckt hinter der Organisation? Wie ist sie heute organisiert? Wird die GEMA eigentlich kontrolliert? Was ist die GEMA-Vermutung? Wie rechnet die GEMA ab? Wer profitiert von der GEMA? digitalKultur.TV fragt kritisch nach und beleuchtet gemeinsam mit dem Rechtsanwalt Stephan das GEMA vesus YouTube, GEMA versus Musiker, GEMA versus CLubs...

Schlagwörter: Clubsterben, Copyright, digitalKultur.TV, GEMA, GEMA-Vermutung, Google, Klage, Leermedienabgabe, Lizenz, Musiker, Piraten, urheberrecht, youtube

Ausführliches Audio-Interview

Links zur Sendung

Weitere Sendungen

Themenverwandte Artikel

[Update] Links zu Webdesign & WordPress #2013-03-23

Moritz »mo.« Sauer — Sat, 23 Mar 2013 12:33:58 +0000

Soulfood für Webdesigner

Neue Webdesign-Techniken, frische Inspiration und Anleitungen, dass ist das täglich Brot eines jeden Webdesigners. Willkommen bei den Phlow Webdesign-Links.

Schlagwörter: links, webdesign, wordpress

A Dark Pattern is a type of user interface that has been carefully crafted to trick users into doing things, such as buying insurance with their purchase or signing up for recurring bills.

Wie funktioniert die dunkle Seite des Webdesigns?: Mit der Dark Patterns Library bekommt man eine spannende Quelle an die Hand, die Webtechniken und Tricks erklärt, wie man Menschen »betuppt« und in eine Falle reintappen lässt. Empfehlenswert zum Einstieg ist die 30-minütige Präsentation von Harry Brignull.
Eigene Icon Fonts per Online-Service zusammenklicken: Mit Fontello.com klickt man sich seinen eigenen Icon Font zusammen. Das ist dank der offenen Lizenzen der angebotenen Fonts leicht umsetztbar. Sinn der Sache ist, dass man unkompliziert die Größe eines Icon Fonts reduziert und nur die Icons nutzt, die man wirklich für das Webdesign eingeplant hat. Das würde z.B. auf Phlow Sinn machen, weil ich den gesamten Entypo Icon Font nutze, aber sicherlich nicht alle 250 Icons.
Optionen für mehr Typografie im eigenen Theme realisieren: Schrittweise erklärt »Providing Typography Options in Your WordPress Themes«, wie man eine Option in einem eigenen Theme realisiert, die Benutzern eine Schrift für das Theme auswählen lässt.
WordPress: Webseiten mit der Lazy Images-Technik optimieren: Bilder gehören die größte Geschwindigkeitsbremse für den Aufbau einer Website. Mit Hilfe der Lazy Images-Technik lässt man Bilder erst dann in den Browser laden, wenn Sie angezeigt werden muss. Wie das geht erklärt Devin Price in dem Artikel »Lazy Loading Images« und präsentiert gleich ein WordPress-Plugin. Spannende Technik für Speedfreaks.
Responsive Webdesign – Schnelle Test Website für Projekte: Gefunden beim sympathischen Duo Elmastudio: Die sehr schnelle, unkomplizierte und schmucke Website ami.responsivedesign.is, die ein Blog einem Responsive Webdesign Test unterzieht. Check:

Noch mehr WordPress Tutorials...

...die ich durchgeackert habe und mir erfolgreich auf die Sprünge geholfen haben.

Themenverwandte Artikel

Websites lesen mit dem Kindle Button

Moritz »mo.« Sauer — Wed, 20 Mar 2013 14:13:30 +0000

Lesekomfort per Browser Extension

Ich bin großer von Instapaper und Readability. Auf Phlow habe ich auch versucht die Article Publishing Guidelines von Readability umzusetzen. Auch nutze ich gerne die im iPad integrierte Lesehilfe für Websites, die sämtlichen (Werbe)Müll links und rechts von Beiträgen löscht. Jetzt rückt endlich auch Amazon nach und bietet den »The Send to Kindle Button« an. Dieser erlaubt es, ganz einfach Artikel an sein Kindle-Konto zu schicken.

Schlagwörter: amazon, kindle, lesen

Da man nicht zwangsweise einen Kindle sein eigen nennen muss, sondern auch kostenlos mit den Kindle Apps auf Android, iPhone & Co. lesen kann, ist das schon eine super Zusatzfunktion. Web-Inhalte liest und goutiert man noch komfortabler, ganz wie man es sich als Leser wünscht. Trotzdem taucht dann die Frage auf: Wie wollen dann Websites mit guten Inhalten eigentlich Geld verdienen?.

Mehr Informationen:

Themenverwandte Artikel

Bullshit Bingo Generator olé!

Moritz »mo.« Sauer — Sat, 16 Mar 2013 13:58:49 +0000

Sprachhülsen Generator

»Das müssen wir alles noch ein wenig ventilieren...« Großartig, oder? Solche Sätze hört man nur in Agenturen. Leider arbeite ich nicht in einer Agentur. Denn eins muss man Agenturen lassen: Niemand jongliert so erfolgreich mit Worthülsen. Wir Anfänger greifen besser auf Ressourcen, ähm, Quellen, wie die folgende Tabelle zurück, um zumindest ein wenig beim Bullshit Bingo mitzuspielen.

Schlagwörter: bullshit bingo

Ab und zu vermisse ich die Zusammenarbeit mit meinem ersten und letzten Chefredakteur. Damals – das war 2000 – lebten wir in der ersten Internetblase und Ralf Niemczyk ahnte schon während unser zweijährigen Amtszeit, dass das alles Irrsinn ist. Jede Woche gab es das Wort der Woche...

Gesammelt wurden Wörter, die er und manchmal auch wir anderen Redakteure entdeckten, wenn wir wieder mal in irgendwelchen Broschüren und Agenturmeldungen kramten. Ach, da waren schon ein paar wunderbare Begriffe dabei, die ich leider einfach nicht mehr parat habe. Sie waren einfach zu abstrus, zeugten von einem unfassbaren BlaBlaBla und klangen nur so lange gut, bis man anfing nachzudenken oder sich zu fragen: Wat?

Als ich letztes Jahr in Lemgo mein Seminar Media Analysis gab, drückte mir Frank Lechtenberg einen witzigen Zettel in die Hand, während wir über das Thema Bullshit Bingo plauderten. Heute habe ich die Tabelle wiederentdeckt. Sie funktioniert ganz einfach:

Erstellt einfach Wörter, indem Ihr die erste, zweite und dritte Zeile kombiniert. Z.B. so: progressive Fluktuationskontingenz Alles klar?

Achso, die Blogger von Wikipedia.de definieren Bullshit Bingo wie folgt:

Buzzword-Bingo, in der späteren Verbreitung auch Bullshit-Bingo genannt, ist eine humoristische Variante des Bingo-Spiels, die die oft inhaltslose Verwendung zahlreicher Schlagwörter in Vorträgen, Präsentationen oder Besprechungen persifliert.

	Bullshit Begriffe erstellen
konzentrierte	Führungs-	-struktur
integrierte	Organisations-	-flexibilität
permanente	Identifikations-	-ebene
systematisierte	Drittgenerations-	-tendenz
progressive	Koalitions-	-programmierung
funktionelle	Fluktuations-	-konzeption
orientierte	Übergangs-	-phase
synchrone	Wachstums-	-potenz
qualifizierte	Aktions-	-problematik
ambivalente	Interpretations.	-kontingenz

Themenverwandte Artikel

WordPress Rezept: Auto-Embed jetzt in functions.php

Moritz »mo.« Sauer — Mon, 11 Mar 2013 14:16:42 +0000

Früher konnte man manuell im Backend von WordPress in den Einstellungen die Auto-Embed-Funktion einstellen. Die Auto-Embed-Funktion erleichtert z.B. das Einsetzen von Videos in einen Beitrag. Kopiert man z.B. einen YouTube-Link direkt in einen Beitrag, passt WordPress automatisch das Video an die vorgegebene Breite der Spalte an.

Schlagwörter: wordpress rezept

Dieser Beitrag gehört zur WordPress-Rezepte-Serie.

Diese Breite definierte man früher über Einstellungen > Medien. In einer aktuellen und zukünftigen Installationen blendet WordPress diese Einstellung aus. Die Entwickler haben die Funktionalität für Theme-Entwickler verschoben.

Um die Funktionalität für eigene Themes wieder herzustellen, muss man folgendes Code-Schnipsel in die functions.php-Datei einfügen:

// Set the width of auto (youtube) embeds to...
if ( ! isset( $content_width ) ) $content_width = 530;

Mehr WordPress Rezepte

Themenverwandte Artikel

WordPress Rezept: Self Pings vermeiden

Moritz »mo.« Sauer — Sat, 09 Mar 2013 12:43:39 +0000

Mit diesem kleinen WordPress-Rezept unterbindet man Self Pings bzw. Trackbacks.

Schlagwörter: wordpress rezept

Dieser Beitrag gehört zur WordPress-Rezepte-Serie.

Damit WordPress sich nicht selbst über intern verlinkte Webseiten per Trackback einem Self Ping unterzieht, braucht man nur dieses kleine WordPress Rezept in die functions.php zu kopieren und untersagt damit WordPress das Self Pinging untersagt.

/* REMOVE SELF PINGING */
function remove_self_pinging(&$links,&$pung) {
    $self = get_option('siteurl');
    foreach ($links as $link => $data) {
        if (false !== strpos($link,$self))
            unset($links[$link]);
    }
}
add_action('pre_ping','remove_self_pinging',0,2);
/* END REMOVE SELF PINGING */

Quelle: http://thesistut.com/2012/disable-self-pings-wordpress/

Mehr WordPress Rezepte

Themenverwandte Artikel

Farbpaletten: Farben finden, erstellen, nutzen

Moritz »mo.« Sauer — Fri, 08 Mar 2013 08:01:26 +0000

Wie entdeckt man Farben, Farbkombinationen und entwickelt daraus Farbpaletten? Wie extrahiere ich Farben aus einem Bild? Dieser Artikel präsentiert Online-Werkzeuge und Quellen zum Thema Farbe.

Schlagwörter: farben, farbpalette

Colorpicker

Colorschemedesigner

Colorschemedesigner: Colorschemedesigner hilft bei der Erstellung von Farbschemata

Adobe Kuler

Kuler von Adobe: Kuler von Adobe ist ein Online-Werkzeug, um Farben zu generieren, zu kombinieren, zu entdecken und Farbpaletten abzuspeichern. Mit Kuler experimentiert man Farbvariationen und stöbert durch Farbpaletten der Kuler-Community.

Colorrotae

Colorrotate: Ein Color-Picker mit einem 3D-Ansatz, um neue Farbkombinationen zu entdecken.

Farbpaletten, Farbtabellen

COLOURLovers: Colour Lovers ist eine Community-Website, auf der die Nutzer eigene Farbpaletten vorstellen, erstellen und remixen.
Design-Seeds.com: Jessica Colaluca ist Farbspezialistin. In ihrem Blog veröffentlicht Sie Farbpaletten, die Sie anhand von eindrucksvollen Bildern erstellt hat. Ihre Farbpaletten veröffentlicht Design Seeds utner einer Creative Commons Attribution, No commercial, No Derivative Works-Lizenz.

Farben aus Fotos extrahieren

Pictaculous: Mit dem Service von Pictaculous extrahiert man Farben aus Bildern. Dazu lädt man einfach ein Bild hoch und Pictaculous generiert dann automatisch eine Farbpalette. Gleichzeitig bietet Pictaculous Links zu passenden Farbpaletten auf Colourlovers an.

Anleitungen und Downloads rund um das Thema Farbe

600+ Photoshop Gradients to Download

Weitere zukünftige Themen für diesen Artikel

Bedeutung von Farben
Bedeutung der Farben
Webdesign Farben
Design Farben
Passende Farben finden
Farbtöne

Themenverwandte Artikel

Schöne Google Webfonts

Moritz »mo.« Sauer — Wed, 06 Mar 2013 08:51:49 +0000

Typografie & Web

Google Webfonts gehört zu einem meiner Lieblingsprojekte von Google, dass so nebenher immer weiter mit verschiedenen freien Schriften aufgestockt wird. Google Webfonts nutze ich mittlerweile auf allen Websites.

Schlagwörter: fonts, webfonts

Vor allem die Möglichkeit, die Google Webfonts-Schriften auch runterzuladen, bietet die Möglichkeit seine eigene CI mit sehr wenig Kosten zu erstellen und Schrift off- als auch online zu nutzen. Hier eine Auswahl meiner Favoriten.

Jetztschon-Klassiker
Serifenschriften
Schreibschrift
Headline-Fonts
Moderne & Futuristische Schriften
Monospace Fonts für Coder

Jetztschon-Klassiker

Droid Sans und Droid Serif

Open Sans

Source Sans Pro

Serifenschriften

Droid Serif

Neuton

Schreibschrift

Pacifico

Playfair Display

Headline-Fonts

Arvo

Moderne & Futuristische Schriften

Cantarell

Exo

Jura

Lato

Monospace Fonts für Coder

Inconsolata

Lekton

Ubuntu Mono

Droid Sans Mono

Themenverwandte Artikel

Icon Fonts

Moritz »mo.« Sauer — Tue, 05 Mar 2013 09:07:00 +0000

Frei Font Downloads

Dieser Artikel stellt hochwertige, umfassende Icon Fonts vor, die unter einer freien Lizenz veröffentlicht wurden und sich wunderbar für Webdesigns eignen.

Anleitungen zur Nutzung von Icon Fonts, findet man weiter unten. Oder Ihr testet mal, wie man CSS-Eigenschaften auf Icon Fonts anwenden kann, mit diesem kleinen Spielzeug von CSS Tricks.

Vorteile von Icon Fonts

Leichtgewichtig: Icon Fonts bestehen aus einer Schriftdatei, die je nach Anzahl der Icons relativ klein ausfällt.
Skalierbar: Icon Fonts haben immer scharfe Ränder.
Gestaltbar: Auf Icon Fonts kann man allen für Schriften relevante CSS-Eigenschaften anwenden.

Entypo

Entypo ist eine Icon-Bibliothek, die runde, harmonische Icons präsentiert. Ein Extra-Set ergänzt die Suite um typische Social Icons von z.B. Twitter, Facebook & Co.

Die Entypo-Icons nutzen wir auch für Phlow.de und wenden Sie z.B. in der Fußzeile an oder um große Icons für die Kategorienseiten und Tag-Seiten anzuzeigen.

Link: http://www.entypo.com/
Lizenz:
- SIL Open Font License
- Creative Commons – CC BY 3.0

Font Awesome

»Font Awesome« beschreibt sich selbst al »the iconic font designed for use with Twitter Bootstrap«. Wenn das keine Empfehlung ist.

Link: http://fortawesome.github.com/Font-Awesome/
Lizenz: SIL Open Font License

Iconic

Iconic aims to be the most forward-thinking icon set around based on its support of forward facing display/deployment methods. Icons should not just be clear and attractive, they should be easy and flexible to work with.

Link: http://somerandomdude.com/work/iconic/
Formate: PNG, SVG, SWC, OFT/TTF/EOT and Omnigraffle stencil
Lizenz: Creative Commons Share Alike 3.0

Typicons

Typicons are free-to-use vector icons embedded in a webfont kit for easy use in your UI, whether it be on the web or in a native application.

Anleitungen: Icon Fonts einbauen & nutzen

Skalierbare Icon Fonts nutzen

Themenverwandte Artikel

Eines des besten Video-Tutorials…

Moritz »mo.« Sauer — Sun, 03 Mar 2013 19:22:58 +0000

Satirisches Photoshop Tutorial

Glove and Boots ist derzeit meine Lieblingsvideoserie auf YouTube. Großartiger, satirischer Nerd-Humor. In diesem Pseudo-Photoshop-Tutorial nimmt Fafa zahlreiche Aspekte auf den Arm. Einfach großartig. Vielleicht mal mit den Tutorials von Screencastsonline vergleichen.

Schlagwörter: satire, Tutorial, Video

Quelle: http://www.youtube.com/watch?v=EOar7toRw80

Themenverwandte Artikel

Markdown-Plugins für WordPress

Moritz »mo.« Sauer — Sun, 03 Mar 2013 18:50:46 +0000

Effizient mit WordPress arbeiten

Demnächst erscheint ein weiterer Artikel von mir für die c't, der sich mit Markdown von John Gruber, MultiMarkdown von Fletcher Penney und Markdown Extra von Michel Fortin auseinandersetzt. Für WordPress habe ich verschiedene Plugins getestet und empfehle im c't Artikel die folgenden Drei.

Schlagwörter: markdown, plugin, wordpress

Was ist eigentlich Markdown?

Markdown ist eine leichtgewichtige vereinfachte Auszeichnungssprache, die von John Gruber ins Leben gerufen und mit Hilfe von Aaron Swartz weiterentwickelt wurde. Ursprünglich als Übersetzungwerkzeug von Textdateien in HTML-Dateien gedacht, erlebt Markdown und seine Erweiterung MultiMarkdown derzeit eine Rennaissance. Markdown ähnelt Auszeichnungssprachen, wie Textile oder der Wikipedia Syntax, die in der Wikipedia Anwendung findet.

Vorteile von Markdown

Wer seine Texte mittels der Markdown-Syntax schreibt, dem bietet Mardown zahlreiche Vorteile.

Markdown reduziert Fehler im HTML-Code auf Null.
Markdown-Texte editiert man mit dem simpelsten Textwerkzeug.
Markdown bietet eine verständliche und schnell zu lernende Syntax.
Markdown-Texte sind im Gegensatz zu HTML lesbar.
Markdown-Textdateien sind leichtgewichtig.
Markdown-Textdateien durchsucht ein Rechner in Sekunden.
Markdown-Texte sind auf jeder Plattform lesbar.
Markdown wird von zahlreichen (kostenlosen) Programmen, Programmiersprachen und Plattformen unterstütz.
Markdown ist auch für Außenstehende verständlich und Klienten können einfache Textdateien für Webprojekte verfassen ohne HTML zu lernen.

WordPress Markdown Plugins

WP Markdown
Markdown On Save Improved derzeitiger Favorit
Markdown Extra

Mein Favorit ist Markdown On Save Improved, weil das Plugin Markdown Extra unterstützt – also mehr Syntax als Markdown. Im Vergleich mit dem Original speichert das Plugin aber die Markdown Extra-Texte in einer separaten Tabelle in der Datenbank ab. Vor dem Speichern des Artikels konvertiert das Plugin die Texte direkt nach HTML. Schaltet man das Plugin ab, funktionieren sämtliche Artikel weiterhin, da sie bereits in korrektes HTML konvertiert wurden.

Außerdem lässt sich Markdown auf Wunsch pro Artikel abstellen, was schon eine wichtige Funktion sein kann. Auch das experimentelle Feature der HTML zu Markdown-Konvertierung finde ich gut.

Weitere WordPress-Plugins

Themenverwandte Artikel

Blockquotes mit CSS und Pseudoklassen gestalten

Moritz »mo.« Sauer — Sun, 03 Mar 2013 18:16:01 +0000

HTML & CSS

Den HTML-Befehl <blockquotes> nutzt man in der Regel, um in einem Block ein Zitat im Fließtext unterzubringen. Es gibt elegante Möglichkeiten <blockquotes> mit CSS und seinen Pseudoklassen zu gestalten, um dem ganzen einen typografischen »Kick« zu geben. So zum Beispiel.

Schlagwörter: blockquotes, css, webdesign

Ich bin für die Todesstrafe. Wer schreckliche Dinge getan hat, muss eine angemessene Strafe bekommen. So lernt er seine Lektion für das nächste Mal. Britney Spears

Nachhilfe habe ich in diesem Artikel »Pure CSS Blockquote Styling« und auf der immer noch wunderbaren Selfhtml Website gefunden. Das war 2000 meine erste Quelle mit der ich mir schrittweise HTML beigebracht habe... Schade, dass ich nicht mehr die ersten gebauten Webseiten habe...

PS: Und auf Delamar liest man weitere amüsante Musiker-Zitate.

Themenverwandte Artikel

Link-Checker: Kaputte Links per Plugin checken

Moritz »mo.« Sauer — Sat, 02 Mar 2013 12:56:46 +0000

Link-Checker WordPress-Plugin

Wächst eine Website, wächst mit ihr auch die Wahrscheinlickeit, dass sich ins Nirvana führende zerbrochene Links ausbreiten. Im besten Fall federt eine 404-Fehlerseiten irregeführte Besucher ab. Mit dem Linkchecker-Plugin für WordPress lässt man automatisch sein System nach kaputten Links durchsuchen.

Schlagwörter: links, plugin, wordpress

Auf Wunsch informiert das Plugin per Email über neue zerbrochene Links. Oder es das Link-Checker-Plugin zeigt zerbrochene Links im Dashboard an. Definitiv praktisch und unkompliziert. Auch die anschließende Bearbeitung der kaputten Links über das Admin-Panel des Link-Checker-Plugins.

Weitere WordPress-Plugins

Themenverwandte Artikel

MP3- und Videostreaming mit Yahoo! Webplayer

Moritz »mo.« Sauer — Sat, 02 Mar 2013 09:51:19 +0000

Video & Sound für Webseiten

Der Yahoo! Webplayer gehört zu meinen Lieblings-Skripten. Das unten angegebene Code-Schnippsel genügt und schon schon lassen sich pure Links auf MP3s und YouTube-Videos in einem eingeblendeten Player hören und sehen.

Schlagwörter: flash, html5, media player, mp3, player, plugin, Video, wordpress, yahoo media player

Großer Pluspunkt des Yahoo! Webplayers ist, dass er kontinuierlich in den letzten Jahren weiterentwickelt wurde und auch HTML5 kann und somit auch auf dem iPad und ähnlich restriktiven Geräten funktioniert, die Flash nicht mögen.

Es gibt sogar ein WordPress-Plugin für den Yahoo! Webplayer. Dieses bietet – siehe Screenshot – einige Möglichkeiten den Player für die eigene Website zu justieren.

<script type="text/javascript" src="http://webplayer.yahooapis.com/player.js"></script>

WordPress Plugin mit Optionspanel

Website: http://webplayer.yahoo.com/