Was ist ein Template?

tempa wrote this 00:21:

Wozu ist ein Template gut?

Gestern [geschrieben am 24 Okt. 2006] fiel mir nicht schlecht die Kinnlade herunter, als ich hörte, dass bei der Vorstellung zur Planung von größeren Projekten ein Punkt sich mit der Design-Änderung während des Projektverlaufs und der daraus resultierenden, stundenlangen Anpassung des bis dahin fertigen Zwischenstandes befasste. Da es sich dabei auch noch um einen ehemaligen Interessenten handelte, also die Templaterie bekannt sein dürfte, habe ich offensichtlich noch ein Problem Sinn und Zweck von Templates zu transportieren.

Ein Template ist ein Grid, ein Raster, eine Matrix, ein Rahmen, in den veränderliche Inhalte eingefüllt werden können. Ein gutes Template besteht nicht nur aus modularen Kopf- und Fußzeilen oder einem Seitenstreifen, den man beliebig austauschen kann. Ein gutes Template berücksichtigt auch Seitenstrukturen. Das gestrige Beispiel – eine Seite mit Kochrezepten – ist dabei eine wunderbare Ausgangssituation.

Ein Kochrezept besteht aus:

  1. Titel des Rezeptes
  2. Kategorieen wie z.B. Land, Vegetarisch,
    Dunkles Fleisch, Menufolge, etc.
  3. Abbildung des aufgetafelten Gerichtes
  4. Liste der Zutaten
  5. evt. Liste der Gerätschaften
  6. Arbeitsanweisung in x Schritten inklusive Illustrationen
  7. Rezept-Historie, Quellen, Einkauftipps

Das sind sieben verschiedene Elemente mit unterschiedlichen Anforderungen und Positionierungen und Rahmenbedingungen, welche sich in HTML-Strukturen wiederspiegeln. Jeder HTML-Struktur kann eine ID oder eine Klasse zugeordnet werden und zu jeder HTML-Struktur, zu jeder ID und zu jeder Klasse werden in der CSS Designanweisungen hinterlegt.

Was bringt es ein, ein Template von A-Z
durchzuplanen und umzusetzen?

Gerade in größeren Projekten ist die Planung und Identifizierung der Objekte, Elemente und Bausteine essentiell, um:

  1. Design-Entwicklung und Projektinhalte zusammenstellen parallel beginnen zu können
  2. Frei zu sein in der Design-Entwicklung und sich z.B. auf Sponsorenfarben einstellen zu können
  3. Im Design den Modetrends auch in den kleinen Details folgen zu können, und damit frisch und aktuell zu wirken.
  4. !Most important: Sich das stundenlange Fieseln mit Design-Änderungen in 100ten und 1.000den von Textstellen zu ersparen.

Planung und die Verwendung von Semantik für Layout-Anforderungen ist nicht nur eine Spielerei mit dem man einen CSS-Zengarden ins Netz stellen kann. Es ist bares Geld, das man spart, weil man vorher ein wenig mehr Zeit in die Meta-Ebene (dem was ist was und was bedeutet was …, welche Mengen, Grade der Bedeutsamkeit, etc.) steckt und kontinuierlich der Versuchung wiedersteht, mal g’schwind einen Inlinestyle oder schlimmer einen Font-Tag zur Gestaltung zu verwenden.

Ursprünglich gepostet am 24. Oktober 06, 13:52 in meinem Blog “Silkester erzählt”.

Farbklang: Hellblau, Ziegelrot und Creme

tempa wrote this 00:01:
Farbkombinationen

Farbklang: Hellblau, Ziegelrot und Creme

Der Farbklang zählt zu den Klassikern. Es ist ein solider konservativer Farbklang, den man immer wieder in den Kleider- und Tapetenmustern findet. Er hat etwas wohliges ohne allzu langweilig zu sein. Ich kann dem Farbklang viel abgewinnen und mir viele gefällige Designs vorstellen, doch eines sollte man bei diesem Farbklang bedenken, man benötigt eine vierte Farbe für die Schrift, wenn man hellblau als Hintergrundfarbe wählt. Ziegelrot flimmert und Creme auf Hellblau bietet zu wenig kontrast. Schwarz wäre mir persönlich zu hart, weswegen ich persönlich Schwarz abschwächen würde. Ich empfehle ein dunkles Petrol oder ein sehr dunkles Blaugrau.

Das nur weil es mir gerade in einer Website begegnete … ich klickte weg. Ich wollte mich nicht zum Lesen der Site überreden und das obwohl ich mir vorgenommen hatte, mich über die Forenautorin mal näher zu informieren. Das ist eine verpasste Chance.

Ursprünglich gepostet am 1. November 06, 05:56 in meinem Blog „Silkester erzählt“.

Website-Entwurf mit Großstadt-Silhouette

tempa wrote this 23:23:

Website-Entwurf mit Großstadt-Silhouette

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.

Autsch: MSIE 8 mag mein Design nicht

tempa wrote this 18:30:

Das ist wohl dann ein echtes Ätschbätsch. Hatte ich mich vor ein paar Tagen mit einem Beitrag dafür stark gemacht, dass der MSIE 8 gefälligst sich wie ein 8er benehmen solle:

Templaterie im MSIE 8

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.

Ostern naht: freie Headergrafiken für das WP-Theme dKret3

tempa wrote this 07:11:

Es gibt noch einmal einen Satz Headergrafiken für das WP-Theme dKret3:

Osterbanner für WP-Theme dKret3
Osterheader
Osterbanner für WP-Theme dKret3
Osterbanner für WP-Theme dKret3
Osterbanner für WP-Theme dKret3
Osterbanner für WP-Theme dKret3

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

KükenIch 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.

Hasen-Tutorial

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

Der Entwurf einer Bildergalerie

tempa wrote this 23:52:

Dies ist der Entwurf für die Galerie auf meiner Spielwiese:

Website-Entwurf für eine Bildergalerie

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. 🙂

Website-Entwurf: Trendy, stylish, simple

tempa wrote this 17:15:

Um keine falschen Vorstellungen aufkommen zu lassen, angesichts der letzten beiden Photoshop-Dateien, die so weit von jedem Trend sind und einen rebellisch gruseligen Touch haben, hier noch ein klassischer Slimplicity (Slim + Simple). Einfach, total im Trend mit allen aktuellen Klischees und stylish:

Website-Entwurf: Trendy, stylish, simple

Ü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.

Irritierend schrecklich … irritierend reizvoll

tempa wrote this 00:52:

Websiteentwurf in knallorange mit Bluetenornament

Ich habe planlos gedaddelt und produzierte eine Scheußlichkeit an die nächste gereiht. Bluetenornament Orange, RotbraunEs 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.

Magic Mystery Dots oder die andere Navigation

tempa wrote this 01:04:

Es ist schon bald nicht mehr wahr, da publizierte Jacob Nielsen einen Beitrag über „Mystery Meat Navigation“ bei der er die Schwierigkeiten einer solchen Navigation ausführlich darlegte, z.B. sich zu merken wofür Symbole stehen oder hinter welcher Schaltfläche noch einmal dieser oder jener Navigationspunkt liege, erkennen, wo eine Mausbewegung Erfolg verspricht und wo nicht. Wo er recht hat, hat er recht.

<_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:

Website-Entwurf mit einer magic mysterie dot Navigation

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

Vektor-Silhouette in 5 Schritten mit Photoshop

tempa wrote this 20:39:

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

Vektor Silhouette Deckblatt

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

Recent Comments:

  • Silke schümann { Du warst auf dieser Seite: Step1 zur Archiv-Thumbgalerie via Custom fields Marke Eigenbau http://templaterie.de/blog/931/step1-zur-archiv-thumbgalerie-via-custom-fields-marke-eigenbau/ Hier war ich noch am Basteln. Ich fürchte meine PHP-Kenntnisse sind... } – Aug 26, 9:29 AM
  • Andreas { Hey, ich habe den Code wie oben benutzt und auch $dgal = get_posts('category=1′); on der richtigen Zeile eingesetzt nur bei mir läufts immernoch nicht. Kann... } – Aug 26, 3:20 AM
  • Fred { "wer Smarty lernt, kann tatsächlich gleich auch PHP mitmachen, ich hatte es eine zeitlang auch eingesetzt, aber jetzt mach ich es wieder auf meine art... } – Jan 06, 7:14 PM
  • Silke Schümann { Das klingt nach einem Syntaxfehler in der ersten Zeile. Anführungszeichen korrekt? Und das Plugin funktioniert nur innerhalb von Editland. Die index.php ausserhalb von Editland aufzurufen... } – Jun 18, 3:40 PM
  • Jörg { Hallo, ich habe die index.php im ersten Abschitt Nr. 3 beschrieben, angelegt. Beim Aufruf der Seite wird folgende Fehlermeldung angezeigt: Parse error: parse error, unexpected... } – Jun 18, 3:14 PM
  • Michael { Gern geschehen 😉 } – Mai 29, 2:31 PM
  • Silke Schümann { Jepp. Das war's: ES tut! Lösung ist nun in einem eigenen Beitrag: Step1 zur Archiv-Thumbgalerie via Custom fields Marke Eigenbau Fertig und betriebstüchtig! 🙂 } – Mai 29, 1:25 PM
  • Michael { Wie wäre es, wenn Du die Zeile $dgal = get_posts('category=1'); auslagerst und den Rest in eine Funktion packts, der Du $dgal übergibst. Das wäre auch... } – Mai 29, 12:45 PM
  • Silke Schümann { Ich ziehe diees Variante ebenfalls vor, dovh wenn ich Code übernehmen, dann ändere ich hierfür nicht extra. Es dürfte gehzpft wei gesprungen sein, welche man... } – Mai 29, 2:00 AM
  • Ulf { ich würde bei der Syntax für Schleifen konsequent die C-ähnliche Variante mit geschweiften klammern nehmen, nicht die alternative mit Doppelpunkt und "endwhile" bzw. "endforeach". } – Mai 29, 12:00 AM
  • Silke Schümann { Ich habe ich http://franchie.de die Thumbs in der Sidebar erfolgreich ausgelesen. Ansonsten ist die Test-Umgebung unter 1a-test dot de / blog Ich will diese Adresse... } – Mai 28, 11:37 PM