Templaterie Blog

Eigentlich bin ich ja ein absoluter Verfechter der Trennung von strukturiertem Inhalt, Aussehen und Benimm einer Website, aber in der Administration eines CMS ist es manchmal dann doch praktischer, wenn man mit dem alten onmouseover="" onmouseout="" im HTML-<TAG> arbeitet. Ein netter Tooltip an einer kryptischen Schaltfläche hilft dem Nutzer, der so oder so Javascript für das CMS aktiviert haben muss, bei der Bedienung des Werkzeugs.

Das ist zwar alter Kram aber weil ich das gerade gemacht habe und das eine oder andere erst Nachschlagen musste, will ich hier mein Ergebnis verposchten, für Andere zum Finden:

Tooltipp mit inline-Script

1. <a onClick="funktion()"
2. onmouseover="this.firstChild.style.display='block';"
3. onmouseout="this.firstChild.style.display='none';" >
4. <spanstyle="position: absolute; width: 200px; height: auto; margin-top: 28px; margin-left: -100px; padding=".5em" border: 1px solid #aaa; color: #494949; background: #efefef; display: none;">
5. Tooltip-Text</span><img src="buttoff.gif" alt="Button-Text"
6. onmouseover="this.setAttribute('src','button.gif');"
7. onmouseout="this.setAttribute('src','buttoff.gif');" /></a>

Und so kann das dann aussehen:

Viel Platz für den Namen der Funktion und Anweisungen .

Nachtrag: ach Gottchen, mein frisch aktualisierter Firefox mag nicht, was ich da gemacht habe. Nur gut, dass ich es nur für den IE brauchte und hier auch keine Rücksicht auf die veralteten Versionen genommen habe. Aber dann … der Firefox nimmt eh gruselige Entwicklung und ich mag ihn immer weniger. Ich weiß wirklich nicht was der FF an diesen simplen DOM-Anweisungen auszusetzen hat. Meine Güte. OK. Der Firefox wollte unbedingt auch noch Javascript blockieren, obwohl ich dafür ein Addon habe … jajaja Javascript ist böse und es macht Sinn es nur von Fall zu Fall zu gestatten. Einstellungen korrigiert — jetzt tut’s auch im FF.

Filed under: Programmierung, Tools, Tutorials
No Comments

Der Weg zu einer Silhouette ist sehr einfach und blitzschnell erzeugt:

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: (more…)

Filed under: Design, Tools, Tutorials
No Comments

Fast schon dachte ich, ich hätte eine dritte Methode entdeckt, wie man aus einem Foto eine Zeichnung macht, aber dann beim Test bedurfte es doch wieder einer der alten Methoden, um die Umrisse hervorzuheben.

Wovon ich spreche? Von einem ziemlich alten Beitrag, bei dem ein Foto in eine Comiczeichnung umgewandelt wird im alten templaterie blog. Dort werden zwei Methoden gegenüber gestellt.

Die neue Methode, die ich nun auf Tutorial-Place.com fand, verwandelt ein Foto 4 Schritten und mittels drei Ebenen in eine Zeichnung. Als ich die Methode am Hirsch von Rainer Storm testete, war das Ergebnis nicht zufriedenstellend. Aber ich konnte mir mit einem der alten Tricks helfen. Und so verwandelt man das Foto vom Hirsch in eine Zeichnung vom Hirsch:

1. Foto 4 mal dublizieren und bis zur vierten Ebene Desaturieren (STRG+U)
2. Ebene 5: Opacity 60%, Ebenen-Filter: Color ODER: Opacity 100%, Ebenen-Filter: Color Burn oder Multiply für kräftigere Farben
3. Ebene 4: Opacity 85%, Ebenen-Filter: Color-Dodge, Invertieren (STRG+I), Gaussian-Blur ca. 3px
4. Ebene 3: Opacity 20%, Filter Artistic Brushes/Crosshatches Default oder ein wenig gespielt mit den Filtern
5. Ebene 2: Opacity 70%, Ebenen-Filter: Multiply, Invertieren, Filerset-Blur/Smart-Blur (Radius 50, Threshhold 100, Quality high, Overlay Edge), invertieren

Wer noch den angefressenen Rand möchte, kann in einer neuen Ebene einen 10-12 Pixel breiten Papierfarbenen Rand erzeugen (STRG+A, Edit/Stroke: ca. 10px Location inside, Filter/Blur/Gaussien blur 3,0, Ebene-Filter: Dissolve).

Bildquelle aboutpixel.de Hirsch von stormpic aka Rainer Storm

Filed under: Design, Tools, Tutorials
No Comments

Ich wette, der Programmierer, der sich das mit dem Index “0″ für das erste Element im Array ausdachte, fand das tierisch clever und amüsant. Und weil das in der Welt der Programmierer fortan nun einmal so war und immer noch ist, dass man das erste Element eines Arrays mit $arrayVariable[0] anspricht und das letzte folglich mit $arrayVariable[$Anzahl-1], dürfen alle Manchmal~ und Gelegenheits-Programmierer sich ein Schleifchen an den Finger machen, damit sie diese Tatsache nicht vergessen. Ich für meinen Teil habe bei den ersten Zählübungen im zarten Toddler-Alter verinnerlicht, dass beim Zählen der Gummibärchen in der Hand, das Schnabulieren mit dem ersten Gummibär beginnt und nicht mit dem nullten. Daher zum Trotz und für ein gegrummeltes “Und Überhaupt!”:

1. <?PHP
2. $i = 1;
3. $arrayVariable = array(
4. $i++ => 'Erstes Element',
5. $i++ => 'Zweites Element',
6. $i++ => 'Drittes Element'
7. );
8. echo '<pre>$arrayVariable: ';
9. print_r($arrayVariable);
10. echo '</pre>';
11. ?>

Und bei diesem Script stimmt die Ausgabe mit den Zählerfahrungen aus frühster Kindheit wieder überein:

< ?php
$tci = 1;
$arrayVariable = array($tci++ => ‘Erstes Element’,$tci++ => ‘Zweites Element’,$tci++ => ‘Drittes Element’);
echo ‘

$arrayVariable: ';
print_r($arrayVariable);
echo '

‘;
?>

Für alle, die das erste Mal sich mit PHP beschäftigen und das mit der Null noch ganz neu ist, hier ein paar kleine Erläuterungen zum Skript: (more…)

Filed under: Programmierung, Tutorials
2 Comments

Website-Entwurf für die Agrarwirtschaft in frischen Farben.

Der Entwurf entstand durchs Daddeln mit Brushes in dem Versuch eine kleine Kachel zu machen die dennoch nicht zu kleingrieselig werden sollte, was nicht ganz gelang. Zum trost folgt ein Tutorial, wie man ohne Daddeln, schnurstracks eine Kachel erzeugt, wie die, die für diesen Entwurf den Hintergrund bildet. (more…)

Filed under: Design, Tutorials
No Comments