Eine Liste, die wie das Inhaltsverzeichnis in einem Buch aussieht, kann man immer gebrauchen. Das ist schon einen Linktipp wert.

CSS: Menu List Design,
ein tutorial von Webdesignerwall.com

Have, fun.

1. <? /* */
2. $dgal = get_posts('numberposts=0&category=1');
3. function getThumbs($stichwort, $dgal){
4. foreach($dgal as $post) : setup_postdata($post);
5. $galArr = explode("\n", get_post_meta($post->ID, "designthumbs", true));
6. foreach($galArr as $thepics){
7. $dtharr = explode(",", $thepics);
8. $pos = strpos($dtharr[1], $stichwort);
9. if($pos===false){}else{
10. $galentry = '<dl class="galerie2">'."\n\t".'<dt><span><img src="http://franchie.de/ ... /uploads/'.$dtharr[0].'" alt="'.$dtharr[2].'" /></span></dt>'."\n\t".'<dd><a href="'.get_permalink($post->ID, '', true).'" title="'.the_title('','',false).'">Details ansehen</a> /<br /><a href="http://franchie.spreadshirt.net/ ... /design/'.$dtharr[3].'" title="'.$dtharr[2].'">Will ich haben!</a></dd>'."\n".'</dl>';
11. echo $galentry;
12. };
13. };
14. endforeach;
15. } //Funktion ende
16. //*/
17. ?>

Im Beitrag oder Seite folgt nun noch der Aufruf der Abfrage mit den jeweiligen Begriffen. Voila eine Thumb-Archivgalerie via Custom Fields.

1. <h4>Thumbs mit Menschen</h4>
2. <? getThumbs('Menschen', $dgal); ?>
3. <h4>Thumbs mit Tiere</h4>
4. <? getThumbs('Tiere', $dgal); ?>
5. etc.

Die eine oder andere Kleinigkeit muss bei Franchie.de noch angepasst werden, dann wird diese Archiv-Galerie dort laufen. Also noch ein klein wenig Geduld … ach ja und irgendwann werde ich das noch mit Blättern durch die Thumbs ausbauen müssen, denn je mehr es werden, desto problematischer wird es — wer will schon Warten bis 2000 Thumbs geladen sind . Das ist also auch erst noch ein Provisorium, das aber sicherlich eine Weile hält … d.h. ich muss noch ausprobieren wie die Page-Funktion von WP reagiert … ggf. vermutlich muss die Funktion in die Datei funktion.php verfrachtet werden (Jetzt erst Mal aber warten andere Aufgaben. Ich aktualisiere den Beitrag so bald ich kann).

BTW: Ich nehme für die Blätterfunktion jederzeit gerne Hilfe an, damit innerhalb einer Stichwortabfrage auch 1000de von Thumbs vorkommen dürfen.

Hier noch Mal was die Ausgangssituation war:

Ich habe in der Kategorie 1 ein Custom field namens ‘designthumbs’. In dem Feld ist der Inhalt wie folgt:

Name des Thumbs_a, Stichwort1 Stichwort2 Stichwort3 etc, externerLink_a

Name des Thumbs_b, Stichwort1 Stichwort3 Stichwort7 etc, externerLink_b
etc.

Diese Thumbs sollen in einer Galerie in einer Seite ausgegeben werden:

H3: Stichwort 1:
============
[Thumb_a]
Postlink
externer Link a

[Thumb_b]
Postlink
externer Link b

H3 Stichwort 2
============
[Thumb_a]
Postlink
externer Link a

Um in in dem neuen T-Shirt-Projekt unter franchie.de meinen Kunden praktische Suchhilfen und Sortierkriterien in die Hand zugeben, so dass Sie A) gezielt nach Motiven schauen können und sich B) sich einen geordneten Überblick über die Motive verschaffen können, habe ich in der Kategorie Motive ein Custom Field eingeführt, das:

1. den Namen des Vorschaubildes enthält,
2. Stichwörter, die die Motive in Motivgruppen unterteilt, wie z.B. Humor, Menschen, Grafik, Plottdruck, Aktion-XY und
3. Link zur Shopseite mit den Shirts auf denen das Motiv abgebildet ist

Wird in einem Beitrag mehr als ein Motiv vorgestellt, dann sind in dem Feld mehrere Zeilen mit den Angaben wie oben angezeigt. Aus diesen Angaben soll nun eine Galerie-Seite erstellt werden, also eine Archivseite mit Thumbs, die die Definitionlist-Formatierung nutzt, die hier im Weblog vorgestellt wurde. Der Code ist ähnlich dem Code für die Thumbnailgalerie in der Sidebar, allerdings steckt in dem folgenden PHP-Code noch ein Bug und ich hoffe nun, dass sich mir jemand erbarmt und sagen kann, wo ich den Loop limitieren muss, so dass er nur einmal und nicht mehrmals durchläuft und Bilder und Links listet. Aaaahlsooooh … finde den Bug:

1. <?php /* */
2. $getThumbs = new WP_Query();
3. $getThumbs->query('');
4. while ($getThumbs->have_posts()) : $getThumbs->the_post();
5. $dgal = get_posts('category=1');
6. foreach($dgal as $post) : setup_postdata($post);
7. $galArr = explode("\n", get_post_meta($post->ID, "designthumbs", true));
8. foreach($galArr as $thepics){
9. $dtharr = explode(",", $thepics);
10. $pos = strpos($dtharr[1], 'Menschen');
11. if($pos===false){}else{
12. $galentry = '<dl class="galerie2">'."\n\t".'<dt><span><img src="http://franchie.de/ ... /'.$dtharr[0].'" alt="'.$dtharr[2].'" /></span></dt>'."\n\t".'<dd><a href="'.get_permalink($post->ID, '', true).'" title="'.the_title('','',false).'">Details ansehen</a> /<br /><a href="http://franchie.spreadshirt.net/ ... /'.$dtharr[3].'" title="'.$dtharr[2].'">Will ich haben!</a></dd>'."\n".'</dl>';
//writing actual galery entry
13. echo $galentry;
14. }
15. }
16. endforeach;
17. endwhile;
18. //*/
19. ?>

OK, hier ist soweit ich den Programm-code verstehe:

1. Ich eröffne ein PHP-Statement und für den Fall das mein erster Versuch eine Fluppe ist, lege ich auch gleich das Auskommentieren mit dem Trick 17 an, bei dem ich in dieser Zeile nur den letzten Slash wegnehmen muss und schon ist der Block hier bis Zeile 18 auskommentiert.
2. Ich Greife auf die WP-Klasse Query zu und öffne eine neue Instanz
3. Ich schreibe das Ergebnis der Klasse in die Variable $getThumbs.
4. Ich öffne ein While-Schleifchen, das solange kringelt, solange es noch einen Post findet.
5. Ich isoliere alle Beiträge die meiner Kategory entsprechen und schreibe diese in die Variable $dgal
6. Ich öffne ein foreach-Schleifchen, das durch meine Einträge im Array $dgal enthalten sind
7. Ich fische aus diesem Array das/die Metafelder, die die Bezeichnung “designthumbs” führen und zerlege hierbei gleich noch die Metainhalte in eine Array nach über das Trennzeichen “Zeilenwechsel”
8. Den so gewonnen neuen Array wandere ich mit einer weiteren foreach-Schleife durch
9. In diesem Prozess zerlege ich die komma-spearierten Zeileneinträge in seine Bestandteile und erhalte so Teil-Url des Thumbs, Stichwörter zum Thumb und die assoziierte Shopseite zum Thumb.
10. Ich definiere einen Selektoren.
11. Ich packe wie Aschenputtel über die If-Klausel mit dem zuvor defnierten Selektor die Erbsen und die Linsen in zwei separate Schälchen. Mit dem Ersten stelle ich nichts an mit dem Zweiten …
12. schreibe ich den eigentlichen Galerie-Eintrag in ein Variable. Dabei lerne ich, dass ich nun nicht the_permalink() (wie bei der Sidebar) verwenden darf sondern im Beiträgen get_permalink() verwenden muss und dann the_title() in beiden Fällen stimmt … *Phrrrrz* Was natürlich über ich rate mal, weil schließlich gibt es auch ein get_post_meta() zustande kommt und nicht weil im Codex oder in der deutschen Doku hier ein hilfreicher Hinweis stünde *grrrh*
13. Ich gebe die Variable aus meinem Erbsenschälchen per echo aus
14. und schließe das IF
15. Ich schließe foreach innen
16. Ich schließe das foreach außen
17. Ich schließe die while-schleife
18. Ich kommentiere den mehrzeiligen Kommentarschluß mit doppelten Slash aus, so dass dieser nicht stört wenn oben in der ersten Zeile der mehrzeilige Kommentar noch geschlossen ist.
19. Ich schließe mein PHP-Script

Soweit man mich fragt, liegt das Problem in der While-Anweisung oder in der ersten foreach-Schleife … aber hier fehlt mir noch die Erfahrung mit Wordpress in Bezug auf PHP-Programmierung … *seufz*

Nachtrag: Sollte jemandem auffallen, das ich ein foreach nicht geschlossen habe … oder dass man hier auch ein Semikolons nach den geschweiften Klammern setzen kann … sollte? … das das war mir auch schon aufgefallen mit dem Ergebnis, dass die von den fünf Einträgen mit entsprechendem custom field dieses nicht mehr nur fünf Mal gelistet wird, sondern freundlich 25 Mal. Schätze das Problem liegt an den geschachtelten foreach-Schleifen … ich krieg die Meise … *piep piep piep*

Nachtrag: Fehler in Fehlerhaftes einbauen, die helfen den Fehler zu verstehen ist was Feines.

Alles was das PHP-Skript aus der Sidebar brauchte, um in der Page zu funktionieren, war die Anderung von the_permalink() in get_permalink().

Zum Fehler verstehen: Beim rumrätseln und mit klassichem Anfänger-Unverstand und in bester copy&paste-Mentalität aus diversen Codeschnipseln, hatte ich erst einen eigenen Loop aufgemacht — die whileschleife und hatte dann unabhängig von der Whileschleife in jedem Durchgang eine foreach-Schleife exerziert, die ebenfalls alle Posts herauszieht und dann wurde auch brav in jeder Schleife alles aufgedröselt und und angezeigt, was dann zu fünf einträgen führte.
Loopidooh!

Die Lösung Nope … noch nicht die Lösung für die Thumb-Galerie:

Wer also eine solche Thumbliste für sein Weblog möchte hier ist der bereinigte Code:

1. <?php /* */
2. $dgal = get_posts('category=1');
3. foreach($dgal as $post) : setup_postdata($post);
4. $galArr = explode("\n", get_post_meta($post->ID, "designthumbs", true));
5. foreach($galArr as $thepics){
6. $dtharr = explode(",", $thepics);
7. $pos = strpos($dtharr[1], 'Menschen');
8. if($pos===false){}else{
9. $galentry = '<dl class="galerie2">'."\n\t".'<dt><span><img src="http://franchie.de/ ... /'.$dtharr[0].'" alt="'.$dtharr[2].'" /></span></dt>'."\n\t".'<dd><a href="'.get_permalink($post->ID, '', true).'" title="'.the_title('','',false).'">Details ansehen</a> /<br /><a href="http://franchie.spreadshirt.net/ ... /'.$dtharr[3].'" title="'.$dtharr[2].'">Will ich haben!</a></dd>'."\n".'</dl>';
//writing actual galery entry
10. echo $galentry;
11. }
12. }
13. endforeach;
14. //*/
15. ?>

Noch immer steh ich auf dem Schlauch und kann zwar schon eine Galerie für recent Thumbs anlegen, nicht aber wie einem Archiv jeweils alle Ausfiltern, die ein Kriterium erfüllen und dann die nächste Liste machen, die ein anderes Kriterium erfüllen und die nächste und die nächste …

Für Hinweise die mich auf dem rechte Pfad leiten also immer noch dankbar

Und so sieht das Ergebnis aus:

1. <h3>Die jüngsten sechs Motive</h3>
2. <ul class="sixthumbs"><li>
3. <?php
4. $motive = get_posts('numberposts=7&category=12'); array_shift($motive); foreach($motive as $post) : setup_postdata($post);
5. $thumbsArr = explode("|", get_post_meta($post->ID, "designthumbs", true));
6. $cth = count($thumbsArr);
7. srand((float) microtime() * 10000000);
8. $rand_keys = array_rand($thumbsArr, $cth);
9. if($cth>1){
10. $dthpArr = explode(',', $thumbsArr[$rand_keys[0]]);
11. }else {$dthpArr = explode(',', $thumbsArr[0]);}
12. ?>
13. <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><img src="<?php bloginfo('url'); echo '/'; echo get_option('upload_path'); echo '/';
14. echo $dthpArr[0]; ?>" alt="<?php the_title(); ?>" /></a>
15. <?php
16. endforeach;
17. ?>
18. <span style="clear: left;"> </span>
19. </li></ul>

Zunächst werden die Datenbank-Einträge (der Loop) in die Variable $motive geschrieben. Außerhalb eines Posts oder einer Page, liefert get_posts() alle Einträge, innerhalb eines Posts oder einer Page jeweils die Inhalte des Posts oder der Page. Der Loop wird in der Sidebar daher mit der Anzahl der jüngsten Beiträge und der Einschränkung auf die Kategorie 12 auf das gewünschte Segement der Datenbank reduziert. Nachdem der erste Beitrag bereits auf der Startseite gesondert hervorgehoben wurde, macht es Sinn den jüngsten Eintrag wieder wegzunehmen. Dies geschieht mit array_shift() Anschließend wird mit foreach ... der Array mit den Datenbankeinrägen abgearbeitet. Damit ist der Loop quasi offen und man kann die Funktion get_post_meta() einwerfen. Da mein Feld ein Array ist, mit dem sich eine ganze Reihe Informationen zum Motiv aufarbeiten lässt, schreibe ich die Daten in einen Array und da pro Eintrag nicht immer nur ein Motiv vorgestellt wird, es aber nicht sinnvoll ist, jedes Einzelmotiv bzw. jede Motivvariation in der kleinen Übersicht anzuzeigen und den Rahmen damit sprengen, wird die kleine Thumb-Sammlung noch einmal aufgedröselt und über array_rand() wird jeweils ganz zufällig eines aus der kleinen Sammlung herausgefischt und angezeigt. Das Customfield heißt in meinem Fall ‘designthumbs’

Das ist nun nicht mehr schwer analog nachzubauen und kann so allerlei Dinge anzeigen lassen. Viel Spass beim Aufmotzen des eigenen Themes. Und Danke an meine beiden Vorarbeiter, ohne deren Hilfe ich vermutlich noch lange den Codex anstarren würde und nicht wüsste, wovon die Rede ist. Noch immer weiß ich z.B. nicht was hinter der Funktion steckt.

Mit dieser Vorlage ist es nicht mehr sehr schwer, jedwede Übersichten zusammenzutragen. Ich kann an dieser Stelle nur noch viel Spaß wünschen, beim Verbiegen des eigenen Themes.

PS: hier ist noch ein Link zu 28 Wege wie man sein Wordpress-Blog mit Custom fields aufpeppen kann.

Editland zählt zu den Innovationsprodukten 2008

Editland hat sich der Konkurrenz gestellt und das praktische, benutzerfreundliche CMS für kleine und mittlere KMU-Webseiten beim Innovationswettbewerb der Initiative Mittelstand eingereicht. Editland wurde in die ersten 16 innovativsten Produkte aufgenommen von 1600 Einreichungen in fünf verschiedenen Sparten. Das ist ein stolzes Ergebnis, über das wir uns sehr gefreut haben.

Quelle: Esim Can auf Editland.de zur frohen Botschaft

Ich gratuliere und freue mich über die Auszeichnung für Esim Can.

Und darf natürlich nicht versäumen, dass ich Editland in mein Herz geschlossen habe und es Kernprodukt auf der Templaterie ist.

1. Das Geheimnis des Grunge-Designs(Es ist einer von Smashingdesigns Monster-Einträgen, wenn der Rechner/Browser ohnehin schon am Limit läuft, besser nicht ansurfen.)
2. Die Populärsten CSS-Tricks
3. Linkbait-Titel Kurzzeit- und Langzeit-Strategien
4. Semantifiy the WEb

Anmerkung am Rande und offtopic: Mit leichter Verspätung. Ich war etwas eingespannt in Bezug auf etwas, von dem ich glaubte es in einer 1/2 Stunde erledigt zu haben und dann beschäftigte es mich über Gebühr und wird mich wohl noch die nächsten Monate mit meiner Zeiteinteilung hadern lassen. Das mit den Prioritäten ist so eine Sache. Manchmal muss man einfach eine Idee beim Schopf packen und hat man sie beim Schopf gepackt, dann nimmt sie einen hier und da einfach mit. Dazu später mehr …

1. Gleiche Zwischenabstände mit CSS
2. Kleine Linkliste zu Websites-Karusells
3. Font-Viewer (Ein Helfer wie man ihn nicht missen möchte)
   Keine umständliche Installation, einfach ein Doppelklick auf die Exe. Ordner mit Schriften wählen, durchblättern und temporär für die Arbeit verfügbar machen. Kein Installieren, Programm Neustarten, Arbeiten, Programm deinstallieren. Absolut Cool und herrlich unkompliziert nützlich.
4. Tabellen gestalten, Spalten hervorheben

Bei diesem Entwurf macht es Sinn die Headergrafik in Ebene zu unterteilen. Zum einen die Hochhäuser als Endloskachel und zum anderen die dynamischen diagonalen Streifen. Der Rest ist ziemlich streight forward. Nichts aufregendes. Sozusagen ein safe bet. Schlicht, durch den harten Kontrast ein wenig rassig, durch die sanften Blautöne ein wenig romantisch. Flexibel, durch die zurückhaltende Ausschmückung.

Das tut er jetzt (nach dem großen Rauschen im Bloggerwald) auch und zwar wie ein _echter Browser des Hauses Microsoft_ hat er _ganz eigene Vorstellungen_ wie die Seite gerendert werden könnte.

Diesesmal scheine ich nicht so billig wegzukommen wie mit dem IE7, der in diesem Fall sich wie der Rest der Browser benimmt. Das heißt für den IE7 benötige ich kein conditional comment und keine extra Anweisungen. Aber der IE8 macht nicht mit. Er möchte typisch für die IE-Browser eine Extrawurscht.

Tssss! Darum kümmere ich mich später. Es ist auf meiner Todo-Liste.

Heckmeck!. Sorry, Jeremy. Ich habe zwei Computer und benötige daher nur das Standalone IE7 und IE8 und da warte ich auf Geeks, die es mehr drauf haben als ich und das dann wieder als bequemes Click&Run anbieten.

Nervig, dass Microsoft hier nicht für Entwickler eine Lösung von Hause aus anbietet. Warum muss hier jedes Mal wild gehackt und experimentiert werden.

Achtung, an dieser Stelle sind die Banner verkleinert, die Originale gibt es auch dieses Mal im Weblog auf PG4ME. Die Banner sind mit dem Beitrag zu den Headergrafiken verlinkt. Dort steht, wie man diese Herunterladen kann. Wo es passt, kann diese Osterdekoration natürlich auch eingebunden werden, wenn es sich dabei nicht um das WP-Theme dKret3 handelt

Ich versichere, dass ich diese Banner gestaltet habe und ich stelle diese unter der Lizenz Creative Commons 2.0 by nc, wobei ich die Verwendung für den Eigenbedarf auf kommerziellen Seiten ausdrücklich gestatte. Ungemütlich werde ich, wenn diese Banner ungefragt in Sammlungen auftauchen oder gar verkauft werden. In Bezug auf anderen Sammlugnen: Fragen kostet nichts, es gibt einige Projekte, die meine Zustimmung bekämen.

Und wer wissen möchte, wie man ein Cartoon mit Papier, Bleistift einem schwarzen Stift , einem Scanner und Photoshop zeichnet, für den gibt es in der Spielwiese zum Banner auch noch ein Tutorial.

Es ist etwas früh für Ostern aber dann … die Seiten müssen ja schließlich dekoriert werden.

Update folgt, sobald ich vom Entwurf zur Umsetzung gekommen bin. Mit den Farbwerten werde ich ggf. noch etwas spielen. Auch überlege ich, ob das “Schild” BIldergalerie per Javascript schwingen lasse. Nicht dass ich schon wüsste wie das geht und ein wenig habe ich bedenken, dass dieser Schnickschnack die Site zum Browserkiller macht, wie einst die Frontpage-Hoverbutton und jenes trendige Scrolltextchen, das angeblich stabil in allen Browsern laufen sollte, doch dann als sicherer Netscapekiller ein wichtiges Verkaufsgespräch vor über zehn Jahren zu einem jähen Ende brachte. Weswegen ich bis heute lieber Javascript weglasse, wenn es denn keinem sinnvollen Zweck erfüllt.

Da es aber eine private Spielwiese ist, käme es hier nicht ganz so darauf an, dass alle mit dem Script happy sind und es wäre ein leichtes es über eine Cookie-Steuerung rauszunehmen, wenn ein lokales System nicht mit klarkommt. Sozusagen einen Safe-Modus für die Website.

Übrigens wer nun annimmt in dem Design wären drei verschiedene Schilfgras-Elemten erforderlich, der irrt. Trotz unterschiedlicher Stillänge und scheinbar unterschiedlichen Grauwerten, handelt es sich dabei jeweils um ein und die selbe Grafik und kann auch so im HTML-Quelltext eingebunden werden. Überhaubt ist dieser Entwurf mit sehr wenigen Grafiken realisierbar und damit ein extem schlankes und schnelles Design.

Tschüß, mach’s gut du alter Browser. Deine Generation Vier war mir ein teuer Gefährte in den ersten Jahren meiner Online-Reisen.

Meldung zur Einstellung siehe Netscape-Blog

Ich habe planlos gedaddelt und produzierte eine Scheußlichkeit an die nächste gereiht. Es hatte fast schon das prickelnde Nackengefühl von Horror-B-Movies und dann stoppte ich an dieser Stelle und es ist immer noch schön scheußlich, doch es reizt mich etwas an der Zusammenstellung, dass ich es hier ausstelle. Vielleicht können mir andere sagen, warum ich dieses Ding nicht wie die anderen mit dem schönen kleinen Gruselschauer ins NIrvana schicke.

Ausgangspunkt war ein unkoordinierter Schnörkel mit der Maus, der mittels dem Kaleidoskopfilter und Leerräume füllen und andere offen lassen zu einem Blütenornament verwandelt wurde.

Es ist nicht der gemeinsame kleinste Nenner der Webdesign vorantreibt. Es wird der gemeinsame kleinste Nenner bedient. Das ist ein gewaltiger Unterschied, den die Redmonder so langsam doch begreifen wollen.

Langer Rede kurzes Zitat:

We’ve decided that IE8 will, by default, interpret web content in the most standards compliant way it can. This decision is a change from what we’ve posted previously.

Quelle: MSDN.com IE-blog: Microsofts interoperability principles and IE8 via einfach für alle

Good decision!

Das so scheint das Fazit zu sein, dass ich meiner jüngsten Suche nach dem onLoad-Script entnehme. Es began mit einem Beitrag vom Mai 2004: addLoadEvent von Simon Wilson. Dann begegnete mir eine Übersicht des Onloads Stand 30. Januar 2007: The window.onload problem (still) von Peter Micheaux. Lesenswert auch wenn einige Bahnhöfe für mich dabei sind. Peter Micheaux publiziert im August des selben Jahres noch einmal zum Thema: The window.onload Problem – Really Solved!, Aha. Interessant … und am Ende der Kommentare stößt man auf eine Kommentar von Diego Perini, die besagt … Pfeiff auf onLoad-Funktionen und delegier: Delegates (Da sämtliche verlinkten Beispiele seiner vorherigen Kommentare verschwunden sind, macht es Sinn, sich die Seite irgendwo lokal für den zukünftigen Zugriff zu speichern, bevor auch diese Seite vom 19. Februar 2008 sich in Luft auflöst.). Ob und in wie weit es wirklich Sinn macht, auf den Eventhandler zu verzichten und schlicht alles zu delegieren, klärt Christian Heilman in seinem Beitrag: Vergleich Eventhandling und Eventdelegation

Schaut man sich weiter um, dann scheint die Delegation aktuell im Gespräch zu sein. Noch weitere Beiträge:

1. A Look at Sun.COM’s New Event Delegation Library
2. Poor man’s JavaScript Behaviours
3. Event-Delegation made easy in jQuery

Bildquelle Esel auf flickr.com vom User Jaxxon

<_aber und überhaupt_ >
Die Navigation ist für mich gar nicht so selten ein störendes Element in meiner kleinen grafischen Erlebniswelt in Photoshop; z.B. fast immer, wenn ich Seiten so im Daddelmodus in Photoshop arbeite. Sprich die Maus von Werkzeug zu Filter zu Werkzeug in Photoshop huscht, ohne konkreten Kunden, ohne konkretes Ziel.
</ _aber und überhaupt_ >

Das sind Arbeiten, die dem kreativen Zustand ähneln, wenn man mit Stift und Papier dem Anrufer am Telefon lauscht und dabei mit dem Stift Doodles fabriziert, Figürchen kritzelt, Hexenhäuschen schafft und was sonst so auf dem Notizblock zu finden ist, wenn es nichts zu notieren gibt. In diesen Arbeiten ist die Navigation ein Nachgedanke und es macht einige Mühe eine felxible Navigation, die sich unterschiedlichsten Sitekonzepten fügen kann, stimmig zum Gesamteindruck zu integrieren. So ein “ich daddle noch so ein wenig rum”-Entwurf entstand auch heute zwischen zwei Anrufen, neben dem Vesper und zwischen rein zwischen Dies und Das. Doch diesmal blieb ich bockig. Nein, einen Kasten will ich nicht. Nein einen Kasten will ich nicht. Ich will keinen Kasten, nicht! stampfte mein kleiner innerer kreativer Kasper:

Eine Alternative ist ein Link, der alle Texte einblendet. Weil es Javasript ist, müsste man insgesamt wohl dafür Sorge tragen, dass ohne Javascript die Navigation klassisch im Kasten untergebracht ist und seitlich oder oberhalb des Textes und somit den Text nicht wie beim Mouseover unproblematisch, Textbereiche überdeckt. Durch die Möglichkeit sämtliche Links ein und wieder Auszublenden, entfällt die Kritik am Ratespiel einer klassischen Mystery Meat Navigation. Die Seite kann damit zum optischen Erlebnis werden, bei dem einmal nicht irgendwo eine Navigationsleiste steht oder ein starrer Kasten erscheint oder eine Textliste dem Inhalt kostbaren Platz nimmt und um Aufmerksamkeit buhlt. Die Navigation geht auf in ein grafisches Erlebnis.

Übrigens, dass sich der Text um die Kugel und andere Objekte winden kann, dafür gibt es im Netz schon Designbeispiele und Lösungsbeispiele:

1. Die CSS-Kurve
2. Text um Bilder

Nachdem ich die Quelle der 8 Vektorgrafiken^[1] erst heute alle abgeklappert habe und dabei nur eine Sammlung für nichtkommerzielle Zwecke außerhalb von Demianart zur Verwertung vorfand, stehe ich ein wenig in der Schuld. Daher hier das Tutorial. Es fängt damit an, dass man ein geeignetes Bild heraussucht. Entweder ein helles Objekt vor dunklem Untergrund oder ein dunkels Objekt vor hellem Untergrund. Um Urheberrechte muss man sich nur bedingt Gedanken machen, da das Endergebnis sehr weit vom Original entfernt ist und es der Fotograf schwerhaben dürfte, der späteren Vektorgrafik anzusehen, dass sein Foto einst die Basis darstellte. Hier im Tutorial sieht das anders aus. Das Foto steht in direktem Zusammenhang mit der Silhouette. Ich nehme daher aus Flickr.com ein Foto aus dem creativ commons by 2.0 des Users officialstarwarsblog.

Die fünf Schritte zur Vektorgrafik:

Zunächst einmal wird die Farbe entfernt: STRG+Shift+U

Da hier ein Bild mit heller Figur ist benötige ich den Zwischenschritt der Invertierung Strg+i:

Nun werden die Kontraste bis zum Anschlag hochgefahren Image/Adjustment/Brightness+Contrast Contrast 100, Brightness je nach Bild hier 35:

Überflüssiges entfernen, Zauberstab und weißer Pinsel:

Mit diesem Zwischenstann könnte man schon leben, doch sind noch zuviele Details besser noch den Rock entfernen udn einige Lichtreflektionen und Kleidungsstücke schwarz auffüllen:

Auch habe ich noch die eine oder andere weiße Linie ergänzt. Damit aus dem schwarz/weißen Bitmap nun eine Vektorgrafik wird, muss zunächst über Select/Color Range die schwarze Figur in die Auswahl genommen werden. Danach wechselt man von der Ebene zu den Pfaden und klickt am unteren Rand die Schaltfläche “Auswahl zu Pfad”. Darauf achten, dass der Pfad aktiv ist und schon kann man über File/Export/Path to Illustrator den Pfad als AI-Vektorgrafik abspeichern und weiter verwursten. Sie erstes Bild.

Ist der Pfad noch zu ingenau, kann man diesen etweder bereits in Photoshop nachbearbeiten oder aber später im Vektorprogramm wie z.B. der Illustrator oder CorelDraw. Und hier ist die Silhouette (AI-Datei) zur freien Verfügung. Wobei ich in diesem Fall zu bedenken gebe, dass die Silhouette mit dem Foto in Verbindung gebracht werden kann und damit man sich u.U. den einen oder anderen Arger einfangen könnte. Besser wird es sein man sucht sich ein anderes Foto.

1. #ancillary{
2. padding:20px 0 0 0;
3. background: #415262;
4. height: 440px;
5. color:#8798A8;
6. border-top:6px solid #7C8999;
7. border-left:1px solid #7C8999;
8. border-right:1px solid #7C8999;
9. }

Die Stelle sieht dann so aus:

1. #ancillary{
2. padding:20px 0 0 0;
3. background: #415262;
4. min-height:440px;
5. height: auto !important;
6. height: 440px;
7. color:#8798A8;
8. border-top:6px solid #7C8999;
9. border-left:1px solid #7C8999;
10. border-right:1px solid #7C8999;
11. }

Ein einfacher schmerzfreier Hack:

1. min-height:440px;
2. height: auto !important;
3. height: 440px;

Zunächst einmal min-height für alle modernen Browser, dann die eigentlich überflüssige Anweisung “height: auto” welche standardmäßig vorliegt, weil aber gleich im Anschluß diese überschrieben wird, hier noch ein “!important” ergänzt, denn der IE<7 hat nicht nur ein Problem mit min-height, er hat glücklicher weise auch ein Problem mit "!important", während andere Browser das "!important" ernst nehmen. Eleganter und zukunftssicherer wäre es über conditional comment ein Stylesheet für den IE zu nehmen und dort die height anzugeben, damit könnte auf das "height: auto !important" verzichtet werden, aber dazu war ich zu faul und die meisten, die wie ich das Gespaa verwenden, werden diese Ergänzung über die eingebaute Editierfunktion des Styles schnell vornehmen können.

Wer sich mein Anderungen im Quelltext genauer anschaut, wird noch zwei Anderungen feststellen, diese aber sind nicht relevant um das Problem zu flicken, sondern eher nicht bereinigte Reste meiner ersten Versuche.

Zum einen ist das in der sidbar.php in der letzten Zeile ein <div class="clear0"></div> und zum anderne im Stylesheet das dazu passende "clear0":

1. .clear0 {
2. clear: both;
3. height: 0px;
4. width: 0;
5. overflow: hidden;
6. }

Aber wie gesagt, das wird man nicht brauchen. Schon die erste Anderung sollte dem Big-Foot ein felxibleres Verhalten geben.

• 100+ nützliche PHP-Codeschnipsel
• 40 Tipps seine PHP-Skripte zu optimieren
• 20+ PHP-Ressourcen (Aus der mashable PHP-Toolbox)
• 25 PHP template engines mit Kurzbeschreibung
• 6 Anlaufstellen für werdende PHP-Programmierer
• Der PHP Sicherheitslotse vom PHP Security Consortium

So und damit ist mit der Reihe 1001 Linktipp-Overload für heute erst mal Schluss

Einen hab ich noch, einen hab ich noch: 5 Coole Sachen machen mit Windows und PHP

Javascript

• Crossbrowser scripten via feature-detection (… mehr von jener Quelle / Google-group: comp.lang.javascript, Autor Richard Comford)

Ressourcen:

• Der Top-Link: comp.lang.javascript FAQ
• Wo sind all die Referenzlisten zu Javascript?
  Da kann man nachschlagen: Crockfords Javascript-Liste
• Eloquent Javascript
• Yahoo Developer Center Javascript
• Mit halben Auge die Google.Group comp.lang.javascript verfolgen per Feed kann nicht schaden
• 40 freie Ajax- und Javascript-Scripts
• Noupés bestOf-Liste in DHMTL, AJAX und Javascript (Teil 1)
• 5 Wege Javascript zu beschleunigen
• 7 Regeln zu barrierearmes Javascript

Für Fortgeschrittene vermutlich interessant (mir derzeit schlicht noch zu komplex und ~iziert): Curried Javascript