Auch impres-sign empfindet es als äusserst wichtig sich in der Blogger-Welt zu etablieren und sich einen Namen zu machen. Daher möchte ich hier die Möglichkeit ergreiffen eine kurze Erklärung abzuliefern und nochmals auf die Relevanz von Trackback’s und Pingback’s hinzuweisen .

Um was geht es?

Schreibt ein Blogger einen Beitrag, wie den welchen du gerade am lesen bist, und sich dabei auf einen Beitrag eines anderen Blogs bezieht oder die selbe Thematik anspricht, so kann man die beiden Beiträge verlinken.

Erklärung und Anwendung

Wird im Beitrag mittels einem Link auf den verwandten Beitrag verwiesen, so erfolgt bei den aktuelleren Blogsystemen ein automatischer Pingback (sofern der Blog besitzer diese nicht ausgschaltet hat).

Anderenfalls bietet sich die Möglichkeit mittels einem Trackback eine manuelle Verweisung zu tätigen. (Bei WordPress beispielsweise muss dies unter “Artikel” -> “Artikel Erstellen” -> “Optionen Einblenden” manuell eingeschaltet werden.)

Und dann?

Hat man einige Pingback’s/Trackback’s generiert, so werden mehr Leute aufmerksam auf die eigene Seite. Dies führt zu grösserem Traffic, mehr Backlinks und hoffentlich auch zu der einen oder anderen Blogger-Freundschaft.

Wer nun noch mehr über Pingback/Trackback erfahren möchte, vorallem auch im Zusammenhang mit WordPress, so empfehle ich dieses sehr gelungene Tutorial.

Ich habe mich deshalb daran gemacht, eine möglichst einfache und flexible Lösung zu finden, welche sich gut in das CMS integriert und selbst für “Neulinge” einfach anzuwenden ist. Ziemlich schnell ist mir dabei einmal mehr jQuery in den Sinn gekommen. Das JavaScript Framework umfasst eine grosse Anzahl an super Funktionen, wobei uns für diese Baustelle parent() sehr entgegenkommt.

Aber von Anfang. ilch bietet die Möglichkeit, im Backend dynamische Menüs und Navigationen zu erstellen, welche nach einem festgelegten Muster generiert werden. Um mehrstufige Navigationen zu erstellen bietet sich die Möglichkeit, einzelne Links eine Ebene einzurücken, wodurch sie “Tochterelement” des vorhergehenden Menüpunkts werden. Dropdown Navigationen können daher ohne viel Aufwand realisiert werden.

Für den spezifischen Fall des Community Mitglieds sollten die eingerückten Menüpunkte jedoch nur sichtbar sein, wenn die “Elternseite” aufgerufen ist. In einem Beispiel könnte die Navigation wie folgt aussehen:

•  Home
• News
• Lesen
• Eintragen
• Forum
• Kontakt

Würde man die Seite besuchen, bekäme man lediglich die Punkte: Home, News, Forum & Kontakt zu sehen, also die Elemente 1-ster Stufe. Alle “Tochterelemente” (Lesen, Eintragen) würden erst sichtbar, wenn die Seite News aktiv ist.

Wo ist das Problem?

Würde man das Design statisch anfertigen, also ohne die Möglichkeit die Navigationen im Backend des CMS zu verwalten, gäbe es kein Problem. Das Kunststück liegt aber darin, der Navigation dieses Verhalten aufzudrücken, auch wenn es dynamisch generiert wurde, weil:

• die Navigation “wissen” muss, wo sich der Besucher zur Zeit befindet.
• die Subnavigation nur angezeigt werden soll, wenn ein Kriterium (eine bestimmte Seite aktiv) erfüllt wird.

Zuerst muss deshalb erreicht werden, dass ilch dem Menüpunkt der momentan aktiven Seite eine Klasse übermittelt, welche den aktiven Zustand signalisiert. Mairu, Coder bei ilch, hat dazu vor längerer Zeit im Forum eine design.php veröffentlicht, welche Besagtes tut.

<?php
// Copyright by Manuel
// Support www.ilch.de
defined ('main') or die ('no direct access');
if (!isset($ILCH_HEADER_ADDITIONS)) {
$ILCH_HEADER_ADDITIONS = '';
}
if (!isset($ILCH_BODYEND_ADDITIONS)) {
$ILCH_BODYEND_ADDITIONS = '';
}
class design extends tpl {
var $html;
var $design;
var $vars;
var $was;
var $file;
function design ($title, $hmenu, $was = 1, $file = null)
{
global $allgAr;
if (!is_null($file)) {
echo '<div style="display: block; background-color: #FFFFFF; border: 2px solid #ff0000;">!!Man konnte in einer PHP Datei eine spezielle Index angeben. Damit das Design fuer diese Datei anders aussieht. Diese Funktion wurde ersetzt. Weitere Informationen im Forum auf ilch.de ... Thema: <a href="http://www.ilch.de/forum-showposts-13758-p1.html#108812">http://www.ilch.de/forum-showposts-13758-p1.html#108812</a></div>';
}
$this->vars = array();
$this->file = $file; # setzte das file standart 0 weil durch was definiert
$this->was = $was; # 0 = smalindex, 1 = normal index , 2 = admin
$this->design = $this->get_design();
$link = $this->htmlfile();
$tpl = new tpl ($link, 2);
if ($tpl->list_exists ('boxleft')) {
$tpl->set ('boxleft' , $this->get_boxes ('l', $tpl));
}
if ($tpl->list_exists ('boxright')) {
$tpl->set ('boxright' , $this->get_boxes ('r', $tpl));
}
// ab 0.6 =  ... 5 menu listen moeglich
for($i = 1;$i <= 5;$i++) {
if ($tpl->list_exists ('menunr' . $i)) {
$tpl->set ('menunr' . $i , $this->get_boxes ($i, $tpl));
}
}
$ar = array
('TITLE' => $this->escape_explode($title),
'HMENU' => $this->escape_explode($hmenu),
'SITENAME' => $this->escape_explode($allgAr['title']),
'hmenuende' => '',
'vmenuende' => '',
'hmenubegi' => '',
'vmenubegi' => '',
'hmenupoint' => '',
'vmenupoint' => '',
'DESIGN' => $this->design
);
$tpl->set_ar($ar);
$this->html = $tpl->get(0);
$this->html .= '{EXPLODE}';
$this->html .= $tpl->get(1);
unset ($tpl);
$zsave0 = array();
preg_match_all ("/\{_boxes_([^\{\}]+)\}/" , $this->html , $zsave0);
$this->replace_boxes($zsave0[1]);
unset ($zsave0);
$this->vars_replace();
unset ($this->vars);
$this->html = explode('{EXPLODE}', $this->html);
}
function addheader($text)
{
if (isset($this->html[0])) {
$this->html[0] = str_replace('</head>',$text."\n</head>" , $this->html[0] );
return true;
} else {
return false;
}
}
function header ()
{
global $ILCH_HEADER_ADDITIONS;
$this->addheader($ILCH_HEADER_ADDITIONS);
echo $this->html[0];
unset ($this->html[0]);
}
function addtobodyend($text)
{
if (isset($this->html[1])) {
$this->html[1] = str_replace('</body>',$text."\n</body>" , $this->html[1] );
return true;
} else {
return false;
}
}
function footer ($exit = 0)
{
global $ILCH_BODYEND_ADDITIONS;
$this->addtobodyend($ILCH_BODYEND_ADDITIONS);
echo $this->html[1];
unset ($this->html[1]);
if ($exit == 1) {
exit();
}
}
function escape_explode ($s)
{
$s = str_replace('{EXPLODE}', '&#123;EXPLODE&#125;', $s);
return ($s);
}
function htmlfile_ini ()
{
global $menu;
$ma = $menu->get_string_ar();
$ia = array();
if (!file_exists('include/designs/' . $this->design . '/design.ini')) {
return (false);
}
$ia = parse_ini_file ('include/designs/' . $this->design . '/design.ini');
arsort($ma);
krsort ($ia);
foreach ($ia as $k => $v) {
$k = preg_replace("/[^a-zA-Z0-9-*]/", "", $k);
$k = str_replace('*', '[^-]+', $k);
foreach ($ma as $k1 => $v1) {
if (preg_match("/" . $k . "/", $k1) AND file_exists('include/designs/' . $this->design . '/' . $v)) {
return ($v);
}
}
}
return (false);
}
function htmlfile ()
{
$ini = $this->htmlfile_ini ();
/*
if ( !is_null ($this->file) AND file_exists ('include/designs/'.$this->design.'/templates/'.$this->file)) {
$f = 'designs/'.$this->design.'/templates/'.$this->file;
} elseif ( !is_null ($this->file) AND file_exists ('include/templates/'.$this->file)) {
$f = 'templates/'.$this->file;
*/
if ($this->was == 1 AND $ini !== false) {
$f = 'designs/' . $this->design . '/' . $ini;
} elseif ($this->was == 0 AND file_exists ('include/templates/' . $this->design . '/templates/small_index.htm')) {
$f = 'templates/' . $this->design . '/templates/small_index.htm';
} elseif ($this->was == 0) {
$f = 'templates/small_index.htm';
} elseif ($this->was == 1) {
$f = 'designs/' . $this->design . '/index.htm';
} elseif ($this->was == 2) {
$f = 'admin/templates/index.htm';
}
return ($f);
}
function replace_boxes ($zsave0)
{
foreach ($zsave0 as $v) {
$dat = strtolower($v);
$buffer = $this->get_boxcontent ($dat);
if ($buffer !== false) {
$this->vars['_boxes_' . $v] = $buffer;
}
}
if (!is_array($this->vars)) {
$this->vars = array();
}
}
function vars_replace()
{
foreach ($this->vars as $k => $v) {
$this->html = str_replace('{' . $k . '}', $v, $this->html);
}
}
// ####
function get_boxes ($wo , $tpl)
{
global $lang, $allgAr, $menu;
if (is_numeric($wo)) {
$datei = 'menunr' . $wo;
} elseif ($wo == 'l') {
$datei = 'boxleft';
$wo = 1;
} elseif ($wo == 'r') {
$datei = 'boxright';
$wo = 2;
}
$retur = '';
$ex_ebene = 0;
$ex_was = 1;
$firstmep = false;
$hovmenup = '';
$abf = "SELECT * FROM `prefix_menu` WHERE wo = " . $wo . " AND ( recht >= " . $_SESSION['authright'] . " OR recht = 0 ) ORDER by pos";
$erg = db_query($abf);
while ($r = db_fetch_assoc($erg)) {
$menuar[$r['pos']] = $r;
$menupaths[$r['path']] = $r['pos'];
}
//Aktiven Punkt herausfinden
foreach(array_reverse($menu->get_string_ar()) as $path){
$path = str_replace('self-','',$path);
if (isset($menupaths[$path])) {
$act_pos = $menupaths[$path];
break;
}
}
foreach ($menuar as $pos => $row) {
$subhauptx = $row['was'];
$whileMenP = ($subhauptx >= 7 ? true : false);
if (($row['was'] >= 7 AND $ex_was == 1) OR ($ex_ebene < ($row['ebene']-1)) OR ($ex_was <= 4 AND $row['ebene'] <> 0) OR ($row['was'] >= 7 AND !$tpl->list_exists($hovmenup))) {
continue;
}
// nur wenn ein menu in die variable $menuzw geschrieben wurde
// wird in diese if abfrage gesprungen
if (($whileMenP === false) AND !empty($menuzw)) {
$menuzw .= $this->get_boxes_get_menu_close ($ex_ebene, 0, $menuzw, $wmpE, $wmpTE, $wmpTEE);
$retur .= $tpl->list_get($datei, array (htmlentities($boxname), $menuzw . $menuzwE));
$menuzw = '';
}
if ($row['was'] == 1) {
// die box wird direkt in die to return variable geschrieben
$buffer = $this->get_boxcontent($row['path']);
$retur .= $tpl->list_get($datei, array ($row['name'] , $buffer));
} elseif ($row['was'] >= 2 AND $row['was'] <= 4) {
// der name des menues wird gesetzt
// und die variable wird gesetzt.
$boxname = $row['name'];
$menuzw = '';
$menuzwE = '';
$ex_ebene = 0; # ex ebene
$hovmenu = '';
if ($row['was'] == 2 AND $tpl->list_exists('hmenupoint')) {
$hovmenu = 'hmenu';
} elseif ($row['was'] == 3 AND $tpl->list_exists('vmenupoint')) {
$hovmenu = 'vmenu';
}
$firstmep = true;
if (!empty($hovmenu)) {
$menuzw .= $tpl->list_get($hovmenu . 'begi', array());
$menuzwE .= $tpl->list_get($hovmenu . 'ende', array());
}
$hovmenup = $hovmenu . 'point';
} elseif ($whileMenP) {
// menupunkt wird generiert
$ebene = $row['ebene'];
$menuTarget = ($subhauptx == 8 ? '_blank' : '_self');
list ($wmpA, $wmpE, $wmpTE, $wmpTEE) = explode ('|', $tpl->list_get ($hovmenup, array ($menuTarget, ($subhauptx == 8 ? '' : 'index.php?') . $row['path'], $row['name'], ($row['pos'] == $act_pos ? 'active' : 'inactive'))));
if (!empty($menuzw) AND $firstmep === false) {
$menuzw .= $this->get_boxes_get_menu_close ($ex_ebene, $ebene, $menuzw, $wmpE, $wmpTE, $wmpTEE);
}
$menuzw .= $wmpA;
$firstmep = false;
}
$ex_was = $row['was'];
$ex_ebene = $row['ebene'];
}
if (!empty($menuzw)) {
$menuzw .= $this->get_boxes_get_menu_close ($ex_ebene, 0, $menuzw, $wmpE, $wmpTE, $wmpTEE);
$retur .= $tpl->list_get($datei, array (htmlentities($boxname), $menuzw . $menuzwE));
}
return ($retur);
}
function get_boxes_get_menu_close ($ex_ebene, $ebene, $menuzw, $wmpE, $wmpTE, $wmpTEE)
{
$menu1 = '';
if ($ex_ebene == $ebene AND !empty($menuzw)) {
$menu1 .= $wmpE . "\n";
} elseif ($ex_ebene > $ebene) {
$menu1 .= $wmpE . "\n";
for($i = 0;$i < ($ex_ebene - $ebene); $i++) {
$menu1 .= $wmpTEE . "\n";
}
} elseif ($ex_ebene < $ebene) {
$menu1 .= $wmpTE . "\n";
}
return ($menu1);
}
function get_boxcontent ($box)
{
global $lang, $allgAr, $menu,$ILCH_HEADER_ADDITIONS,$ILCH_BODYEND_ADDITIONS;
if (file_exists('include/boxes/' . $box)) {
$pfad = 'include/boxes/' . $box;
} elseif (file_exists ('include/contents/selfbp/selfb/' . str_replace('self_', '', $box))) {
$pfad = 'include/contents/selfbp/selfb/' . str_replace('self_', '', $box);
} elseif (file_exists('include/boxes/' . $box . '.php')) {
$pfad = 'include/boxes/' . $box . '.php';
} elseif (file_exists('include/boxes/' . $box . '.htm')) {
$pfad = 'include/boxes/' . $box . '.htm';
} elseif (file_exists ('include/contents/selfbp/selfb/' . str_replace('self_', '', $box) . '.php')) {
$pfad = 'include/contents/selfbp/selfb/' . str_replace('self_', '', $box) . '.php';
} elseif (file_exists ('include/contents/selfbp/selfb/' . str_replace('self_', '', $box) . '.htm')) {
$pfad = 'include/contents/selfbp/selfb/' . str_replace('self_', '', $box) . '.htm';
} else {
return (false);
}
ob_start();
require_once($pfad);
$buffer = $this->escape_explode(ob_get_contents());
ob_end_clean();
return($buffer);
}
}
?>

Zuerst muss jetzt die design.php im Ordner “include/includes/class” mit einer design.php mit Inhalt des obrigen Codes ersetzt werden.

Der Wert der Funktion wird in %4 gespeichert und kann als Variabel im Design verwendet werden. Dazu erweitern wir die  index.htm des Designs, bzw. den Code darin, welcher für die dynamischen Menus zuständig ist. Dieser könnte editiert wie folgt aussehen:

{_list_vmenupoint@<li class="%4"><a target="%1" href="%2">%3</a></li>|}

Ist der Besucher nach dieser Änderung auf unserer Webseite auf der Seite News, wird dem Navigationspunkt die Klasse “active” hinzugefügt.

 CSS Eigenschaften

Der erste Schritt ist damit abgeschlossen. Von nun an haben wir die Möglichkeit, die Eigenschaften von aktiven/inaktiven Menüpunkten zu unterscheiden. Der CSS Code hängt davon ab, wie die Subnavigation aussehen soll. Wichtig und in den meisten Fällen richtig, sind folgende Elemente:

ul li ul {display: none} /* Die Subnavigation wird standardmässig nicht angezeigt */
ul li.active ul {display: block} /* Bei aktivem Menüpunkt wird die Subnavigation des Punktes sichtbar */

Das ganze funktioniert natürlich nur, wenn das Gerüst, welches durch die dynamische Navigation erzeugt wird, so ist:

<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a>
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</li>
<li><a href="#">Link</a></li>
</ul>

jQuery parent()

Zum Schluss kommt das Problem, welches am meisten Zeit in Anspruch genommen hat. ilch vergibt nun zwar die Klasse “active” an den momentanen Menüpunkt, ist dieser aber in der Subnavigation hilft uns das nicht weiter, da wir das vorhergehende <ul> nicht mit CSS ansprechen können.

<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a>
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</li>
<li><a href="#">Link</a></li>
</ul>

Wir binden also jQuery in den <head> Bereich unseres Designs ein:

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

als auch die jQuery parent() Funktion, kurz vor dem </body> Tag.

$('li.active').parent().addClass('active-parent');

Wie wir sehen, fügt diese Funktion dem vorhergehenden <ul> des aktiven li (li.active) die Klasse “active-parent” hinzu. Dieses können wir erneut via CSS ansprechen:

ul li ul.active-parent {display: block} /* Falls ein Unterelement aktiv ist, die Subnavigation aktiv stellen */

Ende

Fertig ist das Werk. Damit ihr euch das alles besser vorstellen könnt, habe ich euch die nötigen Dateien in der richtigen Hirarchie zum Download zusammengestellt.

Download

Featured Post Plugin with Thumbnail

Das bewährte Plugin Featured Post with thumbnail, welches in der WordPress Plugin Library erhältlich ist, ist auchgesprochen gut, lässt jedoch dich Möglichkeit aus, einen Top Featured Artikel zu erfassen bzw. zu markieren.

Version 1.5 by impres sign

impres sign hat deshalb die Version 1.4, welche übrigens unter yourinspirationweb sehr schön beschrieben wird, erweitert und eine Version 1.5 erstellt, welche unter anderem die Funktionalität eines Top Featured Artikels bietet.

Wollen wir uns mal die Neuheiten in diesem Plugin genauer ansehen, welche wir für uns als sehr hilfreich empfinden und diese nun euch zur Verfügung stellen möchten.

Anwendung in WordPress

Ist das Plugin einmal installiert, so ist die Bedienung ein Kinderspiel. Das möchte ich euch mit folgendem Screenshot veranschaulichen:

Ganz einfach beim entsprechendem Artikel auswählen ob der Beitrag Top Featured, Featured oder einfach ein herkömmlicher Artikel sein soll. Thats it!

Verwendung in deinem Theme

Im WordPress Theme kann man auf einfach Art und Weise mittels Platzhalter die Featured- oder Top-Featured Artikel ausgeben lassen. Das möchte ich euch nun genäuer erläutern. Auf die Parameter allerdings möchte ich im nächsten Abschnitt dieses Artikels eingehen.

Will man die Featured Posts ausgeben, so musss die Funktion featured_posts_YIW() aufgerufen werden. Wie schon gesagt, das kann an jeder gewünschten Stelle des Themes eingesetzt werden.

<?php
/*
* Getting started with featured-post-with-thumbnail plugin.
*/
$args = array(
'title'          => 'Featured Posts',
'numberposts'  => 5,
'orderby'      => 'DESC',
'widththumb'   => 73,
'heightthumb'  => 73,
'beforetitle'  => '<h3>',
'aftertitle'   => '</h3>',
'offset'       => 1,
'category'       => 3
);
featured_posts_YIW( $args );
?>

Die Ausgabe der Top Featured Posts ist im Grunde genau das selbe Prinzip wie oben, jedoch muss hier die Funktion topfeatured_posts_YIW() aufgerufen werden.

<?php
/*
* Getting started with my modified featured-post-with-thumbnail plugin.
*/
$args = array(
'title'          => 'Featured Posts',
'numberposts'  => 5,
'orderby'      => 'DESC',
'widththumb'   => 73,
'heightthumb'  => 73,
'beforetitle'  => '<h3>',
'aftertitle'   => '</h3>',
'offset'         => 0
);
topfeatured_posts_YIW( $args );
?>

Parameter

Kommen wir noch zu den Parametern. Wie ihr in den beiden Code Beispielen entnehmen könnt, so gebe ich jeweils dem Array $args diverse Parameter mit. Auf die einzelnen Bedeutungen und Notwendigkeiten der Parametern, welche in der Version 1.4 bereits vorhanden waren, möchte ich nicht mehr eingehen. Diese könnt ihr ebenfalls unter yourinspirationweb nachlesen.

Jedoch stelle ich euch hier die 2 von mir miteingebauten und durchaus hilfreichen Paramter vor:

** offset **

(integer)
Der offset dient dazu, Posts zu überspringen. Gebe ich also im 1. Code Beispiel ‘offset’ => 1, so wird der erste Post übersprungen. Lässt man den Paramter aus, so wird dient der Default int. 0.

** category **

(integer)
Mit dem Paramter category kann man die Kategorie angeben, von welcher die Posts abgeholt werden sollen. Dies erfolgt übrigens rekursiv! Gebe ich also im 1. Code Beispiel ‘category’ => 3, so werden alle Posts von der Kategorie mit ID 3 und deren Unterkategorien ausgegeben. Wird der Parameter ausgelassen, so dient der default str. ‘ ‘, was bedeutet, dass von allen Kategorien Posts ausgelesen werden.

Release Notes

Als Zusammenfassung nochmals meine Änderungen.

• Add: Function “topfeatured_posts_YIW()”
• Add: Parameter “offset”
• Add: Parameter  “category”

Download

Alle Änderungen im Code von Featured Posts with thumbnails Version 1.5 könnt ihr unter meinem GitHub Repository begutachten und herunterladen.

Hier das ZIP zum

Download

Aus diesem Grund möchte ich euch hier meine persönliche Top 10 jener Apps vorstellen, welche für Webdesigner/Web Developer unerlässlich sind oder es zumindest wert sind, ein paar wenige Worte darüber zu verlieren. Da die grosse Mehrheit kostenpflichtig ist, sind jeweils noch kostenlose Alternativen vermerkt (wo bekannt).

Und ja, ich bereits mich schon einmal auf Kommentare à la: “Wie konntest du nur Programm XY vergessen?”. Kein Problem – ich nehme diese gerne zur Kenntniss, vielleicht ist dort sogar das eine oder andere Meisterwerk dabei, von dem ich bisher nichts wusste.

Adobe Dreamweaver

Die Produkte von Adobe sollten vermutlich jedem bekannt sein, auch von Windows her. War Adobe Dreamweaver auf meinem Windows Rechner für mich das absolute muss, könnte ich heute gut ohne damit leben. Das Programm macht zwar auch auf einem OSX Rechner einiges her und kommt in üblicher Manier, kann für mich aber nicht mit Coda mithalten. Dennoch, Adobe Dreamweaver ist und bleibt ein durchaus mächtiges Produkt für alle Webdesigner & Web Developer.

Kostenlose Alternativen: Aptana Studio, Eclipse & Kod

Adobe Photoshop

Auch das zweite Programm kommt aus dem Hause Adobe und ist das Mass aller Dinge überhaupt. Adobe Photoshop, als das wohl mächtigste Bildbearbeitungsprogramm (und mehr) macht auf dem Mac sogar eine noch bessere Falle, als die Windows Variante. Es fügt sich hervorragend in die OSX Umgebung ein und verblüfft mit, in Windows, fehlenden Funktionen. Ganz günstig ist dieser Spass allerdings nicht – wer aber einmal auf den Geschmack kommen durfte, wird sich nicht wieder so schnell davon trennen wollen.

Kostenlose Alternativen: Inkscape, GIMP & Seashore

Coda

Code, von Panic, ist ein schlanker Code Editor für den Mac, und hat sich ziemlich schnell in meine persönliche Top 10 geschlichen. Im Gegensatz zu Adobe’s Dreamweaver bleiben bei den beiden Sprachen HTML und CSS einige Punkte liegen, die aber durch die Optik als auch den eigebauten FTP und SSH Clienten wieder gut gemacht werden. Für Einsteiger sicherlich die schlechtere Wahl, für Fortgeschrittene bis hin zum Profi ein absolutes Muss.

Kostenlose Alternativen: siehe Adobe Dreamweaver

CodeBox

Viel Code, viel Arbeit = viele Snippets. Genau hier setzt CodeBox an und bietet in einem tollen Interface die Möglichkeit, seinen eigenen Code in Gruppen zu organisieren. Dieser kann auch gleich mit dem eingebauten Editor bearbeitet werden, wobei die Syntax in mehreren Themes angezeigt werden kann. Das besondere Highlight ist für mich die mitgelieferte Searchbox, welche in der Taskbar Platz nimmt. Hier können alle Snippets durchsucht und gleich in die Zwischenablage kopiert werden – unglaublich!

Kostenlose Alternativen: snippely & jCodeCollector

Dropbox

Synchronisierung so leicht gemacht wie nie zuvor. Mit Dropbox können Dateien einfach auf alle möglichen Geräte synchronisiert werden, darunter Windows, Mac & Linux Rechner, als auch Androids, iPhones, iPads & Blackberrys. Die 2GB kostenlosen Speicher, welche man zu Beginn erhält können durch Referring erweitert werden und bieten genügend Platz, die wichtigsten Dateien immer auf Abruf dabei zu haben. Geht es um Synchronisierung, gibt es halt nur eines.

Kostenlose Alternativen: AeroFS, SparkleShare & SugarSync

ImageOptim

Längst sind die Zeiten guter Meta Tags vorbei. Heute muss schon tiefer in die Trickkiste gegriffen werden, um auf Google vorne landen zu können. Ein wichtiger Aspekt ist die Ladegeschwindigkeit der Seite, welche mit wenig Aufwand massiv verbessert werden kann. ImageOptim schrumpft Bilddateien aller Formate auf die kleinst mögliche Grösse & trägt dazu bei. Das tolle dabei – die Bilder verlieren kaum bis gar nicht an Qualität. dafür umso mehr an Grösse.

Kostenlose Alternativen: OptiPNG & Squeezer

MAMP

Eine lokale Testumgebung ist ein absolutes Muss. MAMP ist ein einfach zu installierender und verwaltender Apache, MySQL und PHP Server für deinen Mac. Datenbanken können via phpMyAdmin verwaltet werden, Apache mit wenigen Klicks konfiguriert. Dem Programm fehlt es im Gegensatz zu anderen Alternativen zwar massiv an Einstellungsmöglichkeiten, wer jedoch schnell einen funktionierenden Server haben will, der ist damit bestens bedient.

Kostenlose Alternativen: XAMPP, MNPP & Zend Server CE

Pixelmator

Es muss nicht immer Adobe Photoshop sein. Mit Pixelmator bietet sich eine kostengünstige Alternative zum teuren Marktführer. Das Programm schliesst sich sogar noch besser in die OSX Umgebung ein und punktet mit seiner Leichtigkeit. Selber greife ich noch immer lieber auf Photoshop zurück, benutze aber Pixelmator mit Vorliebe für weniger aufwändige Arbeiten und schnelle Änderungen. Klarer Pluspunkt: der günstige Preis.

Kostenlose Alternativen: siehe Adobe Photoshop

Smaller

Ein weiteres sehr kleines, aber feines Tool. Mit Smaller können CSS, als auch JS Dateien per Drag-and-Drop minimiert werden. Raus kommen minimierte Dateien, welche deutlich weniger Speicherplatz benötigen und dadurch (siehe ImageOptim) auch SEO wirksam sind. Hinter dem Programm steckt der YUI Compressor von Yahoo – führende Technik, effizient verpackt.

Kostenlose Alternativen: zur Zeit keine bekannt

Transmit

Zum Schluss darf natürlich ein FTP Client nicht fehlen. Mit Transmit, wie Coda aus dem Hause Panic, macht das Arbeiten via FTP/SFTP noch mehr Spass. Nebst den üblichen FTP Funktionen kann damit unter anderem auf WebDav und iDisk zugegriffen werden. In Kombination mit Coda für mich das absolute Highlight, der Import aller Konten in Coda. Ob das Tool sein Geld wert ist, will ich an dieser Stelle nicht beantworten und kann es auch nicht, auf jeden Fall lohnt es sich, einen Blick darauf zu werfen.

Kostenlose Alternativen: Cyberduck & FileZilla

Hat der Unerfahrene erst einmal herausgefunden, weshalb dies so ist, kommt es zum Kampf mit Conditional Comments, zahlreichen Hacks und sich selbst. Auf mühsame Art und Weise wird der Code so lange abgeändert, bis das Resultat in allen gängigen Browsern, mehr oder weniger, identisch ist. Der unschöne Nebeneffekt, dass der Quellcode dabei misshandelt, ja nahezu missbraucht wird, ist nicht nur ein optisches Manko. Aber Achtung, die Lage ist nicht hoffnungslos. Zum Glück haben clevere Menschen uns nicht nur mit HTML/CSS beschenkt, sondern auch mit Javascript (JS). So gibt es elegante Möglichkeiten, mit relativ wenig Code vollständige Cross-Browser Compability zu schaffen.

jQuery ist wohl die bekannteste und ausgereifteste Javascript Library – und kommt uns bei diesem Problem entgegen. Stellt euch vor, ihr könntet jeden Browser, und davon jede Version, spezifisch ansprechen. Ihr müsst euch das noch nicht einmal vorstellen, denn ihr könnt! Dazu braucht es nicht mehr als exakt zwei Zeilen in eurem HTML Code.

Auf tvidesign.co.uk bin ich auf ein nützliches jQuery Plugin gestossen, welches dem body jeweils den Namen, als auch die Version des Browsers mit welchem die Seite aufgerufen wird, als Klasse übergibt. Ist ein Besucher mit dem Internet Explorer 8 auf der Webseite, wird daraus:

<body class="browserIE browserIE8">

Die Installation des Plugins ist dabei ein Kinderspiel.

<script src="js/jquery-1.6.2.min.js" type="text/javascript"></script>
<script src="js/browserDetect-min.js" type="text/javascript"></script>

Jetzt ist es ein Einfaches, via CSS den IE als auch die Version, direkt anzusprechen. Der CSS Code könnte wie folgt aussehen:

/* Alle Browser */
.red {color: red}
/* Alle IEs */
.browserIE .red {color: blue}
/* Nur IE8 */
.browserIE8 .red {color: lime}

Dieses Beispiel kann durch die verschiedenen Browser & Versionen selbstverständlich beliebig erweitert bzw. angepasst werden. Damit sind Conditional Comments Vergangenheit.

Persönlich finde ich es ein wenig unschön, dass das Plugin gleich zwei Klassen hinzufügt und "browser" vor die Klassen schiebt, weshalb ich es an meine Bedürfnisse angepasst habe. So wird in meiner Version jeweils nur der zweite Wert angegeben, also direkt Browser+Version, ohne "browser" (bzw. ie7). Das abgeänderte Plugin sieht dann wie folgt aus:

$(document).ready(function(){
	var userAgent = navigator.userAgent.toLowerCase();
	$.browser.chrome = /chrome/.test(navigator.userAgent.toLowerCase());
	// Is this a version of IE?
	if($.browser.msie){
		// Add the version number
		$('body').addClass('ie' + $.browser.version.substring(0,1));
	}
	// Is this a version of Chrome?
	if($.browser.chrome){
		//Add the version number
		userAgent = userAgent.substring(userAgent.indexOf('chrome/') +7);
		userAgent = userAgent.substring(0,1);
		$('body').addClass('chrome' + userAgent);
		// If it is chrome then jQuery thinks it's safari so we have to tell it it isn't
		$.browser.safari = false;
	}
	// Is this a version of Safari?
	if($.browser.safari){
		// Add the version number
		userAgent = userAgent.substring(userAgent.indexOf('version/') +8);
		userAgent = userAgent.substring(0,1);
		$('body').addClass('safari' + userAgent);
	}
	// Is this a version of Mozilla?
	if($.browser.mozilla){
		//Is it Firefox?
		if(navigator.userAgent.toLowerCase().indexOf('firefox') != -1){
			// Add the version number
			userAgent = userAgent.substring(userAgent.indexOf('firefox/') +8);
			userAgent = userAgent.substring(0,1);
			$('body').addClass('firefox' + userAgent);
		}
		// If not then it must be another Mozilla
		else{
			$('body').addClass('mozilla');
		}
	}
	// Is this a version of Opera?
	if($.browser.opera){
		$('body').addClass('opera');
	}
});

Etwas, was mich jeweils beim Umsetzen von Designs extrem stört, sind ausserdem unsortierte Listen. Navigation sollte man vorzugsweise damit umsetzen, was Sinn macht. Häufig werden dabei die ersten, als auch die letzten Elemente einer Liste anders dargestellt, als die Mittleren (bzw. runde Ecken). Realisiert wird das in CSS via:

li:first-child {}
li:last-child {}

Gott sein Dank gibt es den Internet Explorer. Auch hier interpretiert er falsch und ignoriert die zwei Pseudo Klassen (IE8=<). Anstelle dem ersten und dem letzten li eine feste ID zu geben, kann diese ebenfalls via jQuery gesetzt werden. Die Funktion dazu lautet:

jQuery(document).ready(function($) {("li:first-child").addClass("first");$("li:last-child").addClass("last")});

Unsortierte Listen werden dadurch wie folgt ausgegeben:

<ul>
	  <li class="first"><a>Link</a></li>
	  <li><a>Link</a></li>
	  <li><a>Link</a></li>
	  <li class="last"><a>Link</a></li>
</ul>

Mittels CSS ist es nun ein Einfaches, diese zu stylen.

Das war sie, die einfache Cross-Browser Compability, realisiert mit jQuery und CSS. Natürlich gibt es nach wie vor Eigenschaften, welche nicht Browser übergreifend umgesetzt werden können, die Anzahl hat sich jedoch deutlich verringert. Damit ihr alle Dateien direkt zur Verfügung habt, könnt ihr sie hier runterladen:

Download

Ich hoffe, ich konnte damit einigen helfen & würde mich über Feedbacks freuen. Gerne dürft ihr auch eigene Probleme schildern, welche ich gerne für euch zu lösen versuche.

Alleine diese Vorstellung mag einer grossen Anzahl Leute sauer aufstossen. Wo sonst sollten sie Ihre asozialen, nicht selten peinlichen Bilder veröffentlichen und jedes mal einen Ego-Boost bekommen, wenn der “Gefällt mir” Button gedrückt wird? Wo sonst sollten notorische Faulenzer kurz vor einer wichtigen Prüfung den gesamten Lernstoff in Form einer 2-seitigen Zusammenfassung finden können und schliesslich eine gute Arbeit schreiben? Für diese Menschen wäre das Szenario “Without WWW” die pure Hölle.

Stimmt schon, meine Grundeinstellung gegenüber dem WWW mag, weit her geholt, depressiv sein. Was heisst mag, eigentlich ist sie wirklich eine abstrakte Form einer Depression, weist sie doch einige typische Sympthome davon auf. Versteht mich nicht falsch, ich gehöre vermutlich selbst zu der Spezies “WWW-Freaks”, mögen manche mich so ansehen. Dennoch sehe ich nicht nur das Schwarze, vermehrt eher das Grau, sondern stolpere auch immer wieder über weisse Lichtblicke in diesem ganzen Chaos-Dschungel.

Mit einfachsten Mitteln, ganz real – und dennoch unschlagbar.

So bin ich neulich auf der Plattform Youtube auf ein Video aufmerksam geworden, welches genau einen solchen weissen Punkt im endlosen Schwarz darstellt. Genau, obschon Youtube der Königsklasse der Selbstverleumdung eine Möglichkeit bietet, sich zu blamieren, stösst man ab und an auch dort über sinnvolle Videos. Die Rede ist von: “HFI Animate: 7 principles that make your website more engaging with Dr. Susan Weinschenk” von Dr. Susan Weinschenk.

Ich bin überzeugt, dass ich das eigentlich nicht mehr schreiben müsste – wie unglaublich dieses Video & die Botschaften sind. Bestimmt sind Sie längst gleicher Meinung. Dennoch, ich muss. Dr. Susan Weinschenk führt mit Ihrer angenehmen Stimme durch einen Streifen witziger und gleichzeitig grandioser Zeichnungen, welche 7 elementare Gründsätze zum Design einer Webseite umfassen. Es ist simpel gehalten, dennoch beeindruckend.

Warum mache ich darauf aufmerksam? Diese Überlegung ist nicht schwierig. Zwischen all jenen unnützen, schlechten Videos, Bildern und Texten im WWW sticht ein solches hervor – und lässt negativ Grundeingestellte doch noch die Hoffnung, dass im World Wide Web nicht alles verloren ist (wenn auch viel). Nun denn, klicken Sie jetzt einen Social Share Button unter diesem Text und lassen Sie all Ihre Freunde wissen, was Sie gerade lesen. Ich bin mir ganz sicher, es interessiert sie brennend, warten diese doch den ganzen Tag nur auf solcher Mitteilungen, um ihr Umfeld virtuell zu stalken – the choice is yours!