Templaterie Blog

Ich benötige möglichst gestern folgendes barrierearme Javascript, das auch im IE5 funktioniert.

Mouseover auf Thumb namens ‘logo_firma.jpg’ tauscht das große Bild ‘xy-unbekannt.jpg’ in der Tabellenzelle-Zelle mit der Klasse ‘preview’ gegen ’screenshot_firma.jpg’. Beide Bilder Thumb bzw. Logo und Screenshot befinden sich im selben Bildordner.

‘firma’ steht hier für den Platzhalter der diversen Firmen.
‘xy-unbekannt’ steht für ein Bild das sich jederzeit ändern kann und dann u.U. weder Klasse noch ID besäße.

Alle Bilder sind in einer Tabelle mit der ID ‘partner’ und die Tabellenzellen mit den Thumbs haben die Klasse ‘partnerlogo’.

• Das Script darf jQuery verwenden. Ups. Ich lerne noch und habe auf die Kompatibilität nicht geachtet. Siehe Kommentar von Stefan B.
• Sollte Objektorientiert sein (http://blog.templaterie.de/index.php?s=objektorientiert+java…)
• Barrierearm, also DOM-Tree und Eventhandler verwenden und absolut ohne inline-javascript auskommen.
• Bildbezeichnungen aus dem HMTL ermitteln (vom this.img.src des thumbs unter dem Mauszeiger für das Vorschaubild vom Thumbnamen logo_ gegen screenshot_ austauschen)
• Keine Javascript-Fehler ausgeben, wenn kein passender Screenshot gefunden werden kann oder das Bild zum Austauschen fehlt.

Budget ist nicht üppig aber angemessen.

Wenn es heute noch klappen könnte, wäre riesig. Ich vermeide Programmieren, wenn ich kann und wenn dies stressfrei klappt, dann sehe ich eine lange Businessfreundschaft.

Gerne nehme ich auch sachdienliche Hinweise zu fertigen Scripts im Netz entgegen.

Kontakt unter info bei silkester.de oder unter Telefon 07191-910091 von 11 am wird dann doch eher Nachmittag werden … bis knapp vor Mitternacht und heute noch bis 1 am.

Mit Hilfe von Stefan (Trafex.de) ist eine Lösung gefunden, die schon sehr gut ist, auch wenn sie zu meinem großen Bedauern im CMS selbst noch rumzickt. Hilfe nehme ich daher immer noch gerne an, die Dringlichkeit ist nicht mehr so gegeben. Demo funktioniert tadellos. Siehe Kommentare. Eine ganz dickes Danke an Stefan für die tolle Unterstützung.

Filed under: Programmierung
4 Comments

Dieser rote Herbst-Calvill sticht unter den Apfeln heraus. Als ich das Bild sah, war ich von dem Apfel begeistert. Nun sollte ich irgendwann vermutlich noch herausfinden, ob er auch schmeckt.

Text im Bild zur Pomologie stammt von de.wikipedia.org.

Filed under: Design
No Comments

Die Illustrationen lieferte Carl Spitzweg — berühmt ist sein armer Poet und auch der Insektenforscher ist recht bekannt, den ich mir für diesen Entwurf “ausborgte”. Der Hintergrund wurde mit einem slebstdefinierten scattered Brush erzeugt, wobei die Farben variierten. Die Einstellungen der Werkzeugspitze (Brush) übernahm ich vom Dünengras und den Pinsel stelte ich auf 17% Opacity und dann kam Layer um Layer über den Verlauf von Erde und Himmel bis ein goldener Wald entstand. Die Arbeit fühlte sich fast wie Aquarellmalen an, da durch die Transparenz die Farbschichten einfluß auf einander nahmen. Auch der Sternenhimmel ist mit Werkzeugspitzen gemacht.

Wer weiß, vielleicht klappt es ja doch noch Mal mit einem Illustrator und einer gemeinsamen Projektarbeit. Damit ließen sich echte Unikate schaffen, die im Netz einge Furore machen könnten. Jede einzelne Seite könnte wie im Kinderbuch eine Vollfenster-Illustration sein. Bislang hatte ich meine Probleme die Idee zu vermitteln. Dieser Entwurf könnte das Prinzip erklären helfen. Auch die kleine Arbeit zum 71-Todesjahr des Zeichners von Babar, dem Elefanten ist so eine Arbeit, Arbeit, bei der Hintergrund und Figuren den Viewport füllen und eine Szene bilden. Beide Beispiele sind Harmlos zu dem, was ein echtes Szenenbild ergeben könnte. Eine Website so aufregend wie ein Klappbuch, aber ohne das stressige Flashgedöns. Echtes HMTL & CSS ist meine Vorstellung. Wie heißt es schön bei Projekte, die noch in den Sternen stehen: schaumer mal.

Text im Entwurf stammt aus: “Memoiren einer Sozialistin — Kampfjahre” von Lily Braun (1865-1916)

Filed under: Design
No 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

Die Sketches von Gustave Doré (1832-1883) sind herrlich und das Template wird dem nicht gerecht, doch dafür ist es alltagstauglich, was im Rahmen von kleinen Business-Sites keine schlechte Eigenschaft ist.

Gustave Doré ist auch heute noch witzig und ich werde wohl noch das Eine oder Andere von diesem Künstler hier und dort einsetzen. Der Blindtext stammt von der Wikipaedia und wurde passend zur Hundemeute gesucht. Edward Lee Thorndike ist ein Psychologe, der sich mit Behaviourismus beschäftige und wohl einen Namen machte, mit der domestizierung von Hund und Katz.

Das Feuerrot stammt von einem Forenbeitrag, als dem Howto eines feuerroten Grunge-Hintergrundes mit verschiedenen Photoshop-Brushes gefragt wurde. Die Farben hingen wohl noch etwas nach.

Ein wenig umdekoriert und das Template könnte auch zu anderen Dienstleistern passen (more…)

Filed under: Design
No Comments

Der mobile Websurfer ist im Vormarsch. Die Geräte werden peut-a-peut so gut und erschwinglich, dass man am Ende generell mit dem mobilen Surfer rechnen muss. Das heißt dann, dass die 800er-Auflösung wieder stärker vertreten sein wird, wenn ich den Kommentar von “Majoran” bei Robert Basic korrekt interpretiere. Ich persönlich habe eine starke Präferenz zum 1280×960-Fenster und genieße Innenmaße von 1256×800px (Bei Bedarf nehme ich 90px dazu oder Schalte auf Vollbild mit den 1600er-Maßen), was man meinen Designs anmerkt, obwohl ich beim Designen mich auf eine Viewport-Vorlage (PSP-Datei ca. 638KB) entsprechend dem 1024×768-Fenster beschränke um einer Großzahl der Nutzer einen Bestview im Viewport zu gewährleisten und teste im Grunde nur, ob das Design im 800er noch erträglich ist.

Wenn die 800 Auflösung wieder stärker im Kommen ist, dann ist meine bevorzugte Bildbreite von 500 Pixel zu breit. Die Spielfläche in einem 800-Monitor bei geöffneter History- oder Favoriten-Sidebar ist lediglich ca. 370 Pixel:

Misst man das Fenster unter Berücksichtigung einer History, oder Favoriten/Lesezeichen-Sidebar und einer zusätzlichen Symbolleiste, so erhält man in der 1024er-Ansicht Innenmaß von 815×610 px Zieht man noch einmal 220 Pixel für einen Navigationseitenstreifen ab, so bleibt eine Breite von 590 Pixel für den Inhalt. Sicher, sicher … liquide Designs, die im Viewport atmen. Ich bin mir der Technik bewußt, uns berücksichtige veränderliche Innenmaße, was häufig schon in der Planungsphase eines freien Templates bei dem weder die Inhalte noch der spätere Zweck, Anwendertyp feststeht. Aber selbst bei einem Template, das sich dem Viewport proportional anpasst
gibt es eine Komponente mit einer festen Pixelbreite: die Bildillustration. Will man nicht jedes Bild durch einen Flash-Render jagen (Medienfreunde: Flexible Flash), der die Bildgröße in den Proportionen den Fenster anpasst.

Manche ergeben sich schlicht den Gegebenheiten und machen die Not zur Tugend, wie z.B. das UX-Magazin, das seine Site in viele kleine Bausteine unterteilt hat und diese durch Floats je nach Fenstergröße neu ordnet:

Ich finde jedoch, wenn ich nicht wie UX-Max das Design ganz und gar auf Kleinteilig zum auf-Platz-purzeln einstelle, dass das 370px oder hier im folgenden 365px-breiten Bild zu klein ist, um mttig gut auszusehen und zu breit ist, um links oder rechts mit umlaufendem Text dargestellt zu werden.

Zuviele Details gehen verloren, die in der 500er-Ansicht noch erkennbar sind. … zumindest mir gesunden, guten Augen. Man könnte natürlich alternative Stylesheets anbieten, die dann parallel auch ein kleineres Bild auslösen. Für dynamische Seiten, die per PHP, ASP, Perl, Zope, Linux oder jeder anderen beliebigen serverseitigen Script-/Programmiersprache im Grunde kein Problem. Auch mein PHP-Script, um mir das Auslesen der der Bildgröße zu ersparen und Alpha-Transparenz im IE<7 darzustellen, ist schnell angepasst, um im Falle eines vorhandenen mobile-Stylesheet-Cookies des Stylesheetswitcher, Bilder im Format vollautomatisch anzupassen. Es ist nicht erforderlich separat und umständlich manuell diese Bilder zu skalieren sowie einzubinden, das wäre eine nur eine Aufgabe für HTML-Puristen.

Mit der Zunahme der mobilen Surfer könnte auch 640×480 Pixel Fenster, vor dem selbst das UX-Magazin kapituliert, wieder populär und damit nicht mehr ignoriert werden.

Andere Weblogautoren, die sich damit beschäftigt haben:

• Selfhtml: Optimierung für Bildschirmauflösungen
• Markup: Die optimale Breite einer Website
• clagnut: Variable fixed width layout
• ALA: A Dao of Web Design
• PIE: The Jello Mold Piefecta Layout
• Perun: Optimale Breite einer Seite
• Sitepoint: Strechy Images wie HMTL & CSS

Beim letzten Link nicht zu früh freuen. Das Ziel sich anpassender Bilder ist nicht mit HTML&CSS zu erreichen — noch nicht. Es geht um DIVs Hintergrundkacheln und Bildausschnitte.

Filed under: Design
1 Comment

Und so könnte ein Web-Entwurf mit der vektorisierten Zeichnung der Tänzerin von Edgar Degas (1834-1917) aus dem letzten Beitrag aussehen und als Präsenz eine Ballett- oder Zeichenschule dienen:

Die Tänzerin stammt von Edgar Degas, der Blindtext (Auszug aus “Huldigung der Künste”) von Friedrich Schiller.

Filed under: Design
No Comments

Ich hatte das Dienstprogramm Trace aus meiner corel Suite schon ganz vergessen, als ich beim Experimentierne mit Stempeln, mich meiner recht großen Tiff-Sammlung auf verschiednen CDs erinnerte und dort ein wenig stöberte nach Material. Die meisten dieser Tif-Dateien haben schöne Motive, doch als Bitmap sind sie häufig recht grob und mit Treppenstrufen. Auch hatte ich in Coreldraw begonnen Vektoren-Schnörkel zu preparieren und als ai-Vektorgrafik für Photoshop-Arbeiten in Ordner weg zu sortieren, als ich über die noch immer offene Seite in meinem Opera stolperte. Kunstwerke aus einer Datenbank nach dem Stichwort Tod gezogen. Darunter viele mittelalterliche Radierungen mit einer Frau und einem Skelett. Die Frau und der Tod, schien ein Schlager zu damaliger Zeit zu sein. Die Gründe dafür sind mir für den Augenblick egal. Es insteressierte mich, wie gut Trace mit den Radierungen zurecht kam und ob bei den vielen Knoten Coreldraw noch mit machte. Et voila. C’est ca!

Hans Leonhard Schäufeleins “Frau und Tod” lässt sich so in kürzester Zeit bearbeiten und in jeder beliebgen Größe in Photoshop in die Arbeiten wieder integrieren. Der Weg des Bildes geht zunächst in Photoshop um aus den Grauwerten ein reines schwarz/weißes Bitmap zu erzeugen, das in Corel Trace verarbeitet wird. Von dort geht es nach Corel Draw, wo sämtliche Knoten, die zum Tod gehören gelöscht und gemeinsame Knoten von Frau und Tod nachbearbeitet werden, schließlich kann das Bild nach ai exportiert werden ist steht damit dem Illustrationsbilderpool für Photoshop bereit.

Das eine oder andere Foto ist natürlich ebenfalls geeignet. (more…)

Filed under: Design, Tools
1 Comment

Wo ich schon so fleißig beim Kunstraub bin, da darf ein Jackson Pollick nicht fehlen. Zählen seine Orgien wilder Farbspritzer schließlich zur absoluten Weltklasse in der Kunst und jedes Nationale Museum zeitgenössischer Kunst hat einen ausgestellt … einen echten Pollock kann ich mir nicht leisten, aber was Ahnliches:

Nicht direkt ein Jackson Pollock aber doch, beseelt vom Meister.

Das Werkzeug für pollokschen Sitedekor ist eine Brush-Sammlung, die ich heute im Netz entdeckte und dabei auf eine reiche Sammlung von diversen Brushes sowie guten Tutorials zu Brushes: I proudly present PS Brushes Obsidian Dawn

Mich hat die Fülle der Pinsel begeistert und nach einer wilden Downloadorgie (da&dort), (more…)

Filed under: Design, Tools
4 Comments

Nicht immer wie gestern, muss ein Element direkt per Cut&Paste aus einem gemeinfreien Werk oder einem Werk unter CC by 2.0 genommen werden, wenn Werke anderer als Basis für Webdesign-Templates genommen werden. Manchmal ist es grüne Quadrate in einem Protrait von Gustav Klimt, die die Anregung zu Design geben.

Die Farben der Akzent, sie hatte es mit angetan und so entstand ein Farbklang von Aubergine, zu Kaffee zu Kakao zu gelben Sand zu sattem Grün:

Die Pinselstriche kann ich nicht ohne erkennbare Kacheleffekte oder sehr großen Dateivolumen für ein bischen Hintergrund immitieren, doch ein bewegter Hintergrund sollte es schon sein. So schön luftig wie die Fliederfarbenen feinen Seiden oder Gazerüschen des Kleides ist das Streifen-Element nicht geworden, aber dan ist as Design insgesamt etwas gröber rauher, nicht wahr?

Filed under: Design
No Comments