Templaterie Blog

TC-0017 A in der Galerie

Mit der Technik, die ich bei den letzten drei Templates angewendet habe, kann man auch schlichtere Designs gestalten. Das schöne daran ist, dass es Designs kalkulierbar macht. Zwar war ich in der Photoshopplanung noch zu optimistisch, so dass zwei Dinge am Ende nicht realisiert wurden.

1. Die Navigation der ersten Ebene auf der rechten Seite drückt den Abstand auf, der für die Navigation benötigt wird.
2. Der Folgelink wird in der Darstellung von aktiven span bzw. vom hover beeinflusst.

Der erste Plan kann mit der Skrollleiste rechts aussen nicht umgesetzt werden, da entweder die Links im Content oder die Links in der Navigation überdeckt und damit funktionslos wären. Der zweite Plan müsste eigentlich funtkionieren, aber im Augenblick weiß ich noch nicht wie die Selektoren gesetzt werden müssen, dass es klappt. Ich werde bei Gelegenheit diesem Aspekt noch einmal Zeit widmen. In diesem Design wäre es ein Effekt gewesen, der kaum bemerkt worden wäre und so standen Aufwand und Ergebnis nicht mehr in einem vernünftigen Verhältnis.

Was auch hier wieder wunderbar funktioniert hat, ist das Verhältnis von fixierten Bereichen und skrollenden Bereichen, also Textbereichen, die unter einer Kopf- und Fußzeile wegskrollen.

Damit ist der Entwurf von Gestern auch schon umgesetzt und in der Templaterie unter TC-0017 A (Shop / Galerie) erhältlich.

Update Natürlich auch in anderen Farben möglich. TC-0017 B (Shop / Galerie) hat eine Kachel mit einer Margaritenwiese im Hintergrund, über die sich eine Seite mit dunkelgrünen Art Webback-Paspartout aufbaut. Da dieses Template sich dem Viewport anpasst, ändert sich er Ausschnitt, der den Blick auf die Margaritenwiese im Hintergrund freigibt. Da die weiße Schrift vor den weißen Margaritenblüten lesbar bleiben, wurden die PNG-Glasbutton grün eingefärbt.

Filed under: Design
No Comments

“Wie geht das?” ist eine beliebte Frage und immer wieder steht die Frage im Raum, wie man am besten Variablen zwischen den Systemen austauscht und wie PHP feststellt, ob der Client überhaupt Javascript kann. Ich hatte einige Antworten hierzu schon, habe aber diese Antworten verlegt. Ergo wieder einmal das Netz gefragt. Diese Antwort fand ich dann zu putzig:

Filed under: Kaffeetscherl
No Comments

Flash wird nachgesagt, dass es die Website aufwertet. Das stimmt nur bedingt. Mein favorisierter Browser der Firefox hat recht große Probleme mit Flash und wer viel im Web unterwegs ist, kann mit Flash meist wenig anfangen. In den meisten Fällen nerven Flash inhalte nur. Doch dies mag nur meine persönliche Meinung sein. ch habe keine Studie gemacht. Auch wenn mein Echochamber hier mir recht geben wird. Wenn ich die kleine Webslideshow in diesem Beitrag sehe, dann ist das nur ein Button mit einem F, das mir verrät, dass hier ein Flash ist, doch die Slideshow wird nicht gestartet, oder auch nur ein Bild gezeigt, damit der Firefox nicht meinen Rechner in die Knie zwingt. Siehe Beitrag von Wurstbrot im Strohhalm: Ressourcen-Verbrauch im FF

Wer nun immer noch unbedingt ein Flashfilmchen auf der Site haben möchte und den ein wenig Promotion am Ende der Slideshow für den Anbieter stört (oder man erwirbt die ca. $30 günstige Professional Version) , kann das sehr einfach über Slideshow-Maker von AVsoft hinbekommen. Man kann aus einer ganzen Reihe von Effekten und Voreinstellungen wählen.

Das Ergebnis hier im Beitrag für den Test, der meine Neugier stillte, zeigt Arbeiten (Entwürfe) der letzten Wochen.

Apropos: Weniger Effekte zur Auswahl aber einem etwas unauffälligeren Promotion-Zwang, mit mehr Handarbeit … etc. Flash-Slideshow mit Fade-Effekt

Filed under: Tools
No Comments

Es war überfällig hier einen konformen Website Entwurf vorzustellen. Schlicht und mit Logo-Spiegelung. Cleverness ist im Detail bei der Navigation geplant. Die Idee zum Verhalten der Navigation (Reflektion des roten Buttons auf den Folgelink) kam mir bei der Umsetzung der Funktion für meine Webjobs um die Bilder eines Ordner samt Daten aufzulisten

Filed under: Design
1 Comment

Der obere Entwurf hält mich aktuell beschäftigt. Ich dachte nun schon zwei, drei, dass ich ein fertiges Ergebnis hatte. Doch irgendwas scheint immer zu sein. Ich bin beim dritten Konzept. Ich werde näher darauf in einem eigenen Artikel in der zukünftigen Spielwiese unter tempus creativ eingehen.

Zuletzt ging es nur noch um Seiten-Inhalte, die nicht die gesamte zur Verfügung stehende Breite verwenden und dabei nach rechts über den Notizbuchrand rutschten. Ergo noch einmal ein anderes Konzept. Diesmal mit zwei leeren Blinddivs, die die Abstände regeln und von allen Browsern gleich interpretiert werden sollten. Natürlich ist dem nicht so. So mancher Browserprogrammierer sollte noch einmal sein Schulbuch der 5. Klasse heraussuchen und das Kapitel über Prozentrechnen durcharbeiten … darunter auch die Damen und Herren von Opera. Für Opera kenne ich wenigstens einen Hack, mit dem ich nur den Opera bedienen kann. Ergo habe ich eine Lösung für den Opera. Bleiben zwei Linux-Browser, die in besondere Weise sich gegenseitig ausschließen:

(Klick auf Thumbnail für lesbare Ansicht)

Ich kann mich also nun entscheiden, ob ich kann also den Konqueror oder den Iceweasel bedienen. Aktuell zickt der Phoenix aber ich habe Konqueror und Iceweasel gelöst.

Ich weiß nicht, wer diese Browser verwendet. Ich kann nur vermuten, dass diese so wichtig wie der IE Mac sind und der IE Mac hat es gehabt. Ich bediene diesen Browser nicht mehr.

Ich hätte eine Lösung, die allen Regeln der Mathematik widerspricht und nur ein “Blinddiv” verwendet. Es ist ein Blinddiv mit einer Breite von 10.000 Pixel, was in allen mir bekannten gängigen Auflösungen definitiv mehr als 100% ist. Es spannt den DIV mit dem Inhalt auf, wenn dort nur 3-4 Worte oder ein kleines Bild enthalten ist, das den DIV mit dem Inhalte eben nicht auf seine gesamte mögliche Breite aufspannt. Wobei natürlich der halb-/fast leere DIV bei einem Aufbau der Seite von Rechts mit immer gleichen Prozentwerten gleichgültig wie der Browser diese Prozentwerte interpretiert … dieser DIV also hätte so oder so immer an der selben Position innerhalb des Notizbuchblattes aufhören müssen.

Das Template beruht auf den selben Prinzipien der jüngsten Templates in der Templaterie:

Filed under: Design, Tools, Webtechniken
No Comments

Nun sind mir gleich zwei Varianten untergekommen, bei dem sIFR nicht barrirerearm ist, sondern entweder nichts oder aber im neuen FF ein olles fehlendes Plugin anmeckert … damit ist wohl sIFR für mich wohl nun erst einmal gestorben. Sehr schade! Es sind die nervenden Werbefuzzis, die hier eine schöne, sinnvolle Entwicklung zunichte gemacht haben. Grrrh.

Als Option lasse ich es nun aber doch im Template. Nun sollte allerdings ein Hinweis eingeblendet werden können, wenn dieses Template ausgewählt wird. Noch eine Erweiterung in Editland. Thumbnails Hinweise einblenden, wenn das Template geändert wird.

Update: Überschrift nur teilweise korrekt. Der Flashblocker hatte einen Aussetzer!

Mein FF 2 mit Flashblocker hat sich nach einem Neustart besonnen und zeigt den Text nun an. Bleibt FF 3 Beta. Da es ein Beta-Browser ist, hoffe ich einfach noch, dass dies nicht so bleibt.

Ach ja und es geht noch um sIFR 2! Sorry, wenn ich hier zuviel Wind gemacht habe. Es war Browser-Kampftag bis ich das Design hatte … und ich war dadurch zwischenrein etwas gereizt.

Update 2 Statt Flashsymbole oder Text Links gähnende Leere in Dan Vines Safari 2

*seufz* Noch ein Fall von dumm gelaufen. Auf Browsershot.org hatte der Safari kein Problem mit sIFR 2. Bei Dan Vines iCapture wird der Text nicht angezeigt, kein Flashsymbol, kein Alternativ-Text. Aber vielleicht zickt ja auch nur aktuell der Browser von Dan Vine und bräuchte einen Restart … egal wie.

Auch für sIFR gilt: Add-ON!!! Keine Informationen, die nicht auch anderweitig auf der Seite enthalten sind und auf die im Übrigen zur Not auch verzichtet werden kann.

Filed under: Design, Tools
2 Comments

So nun hat mein erstes kleines Tool für Webentwicklung (auf meinem lokalen Webserver Bilder und deren Maße listen) hat nun ein ertes Extra bekommen und wer möchte kann sich das gute Stück ziehen (Link am Ende des 56 60 Zeilen langen Skripts, Rechtsklick, “speichern unter” und das “.txt” am Ende des Seitennamens entfernen).

1. <?PHP
2. // Bezeichnung: Webbilderlister 1.0
3. // Beschreibung: Bildordner auslesen, samt Maße listen und kleinem Prieview per hover
4. // Autorin: Silke Schümann (http://www.tempuscreativ.de)
5. // Copyright: Creative Commons Attribution (http://creativecommons.org/licenses/by/2.0/de/ )
6. // Stand: 24. Februar 2007
7. echo '<?xml version="1.1" encoding="iso-8859-1"?>'."\r\n";
8. ?>
9. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
10. <html>
11. <head>
12. <title>Webbilderlister 1.0</title>
13. <meta name="generator" content="tempus creativ silke schuemann http://templaterie.de" />
14. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
15. <style type="text/css">
16. html, body, img, div {padding: 0; margin: 0; border: 0;}
17. html {height: 100.05%;}
18. body {height: 100%; background: #f7f7f7;}
19. body, p, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, td, div
20. {font: 13.25px/1.4em Verdana, Arial, Helvetica,sans-serif; color: #474747;}
21. h1 {font-size: 1.5em; padding-top: 30px;}
22. h2 {font-size: 1.3em; }
23. h3 {font-size: 1.15em;}
24. h4 {font-size: 1em; }
25. h5 {font-size: .95em; }
26. h6 {font-size: .95em; }
27. .mono {margin-left: 30px; margin-top: 48px;}
28. a {color: #474747; text-decoration: none;}
29. a:link {color: #474747; text-decoration: none;}
30. a:visited {color: #600;}
31. a:active {color: #e00;}
32. a:hover {color: #f00; text-decoration: underline;}
33. /* Bildvorschau vom CSS-Playground http://www.cssplay.co.uk/menu/avatars2.html */
34. #imglist a img {display: block; position: absolute; width: 1px; height: 1px; border: 0px; top: -1px; left: -1px;}
35. #imglist a:hover img {display: block; position: absolute; width: auto; height: auto; top: 135px; left: 475px; z-index: 5;}
36. .filename {padding: 4px 9px;}
37. .sizes {padding: 4px 9px;}
38. .kb {padding: 4px 9px; text-align: right;}
39. .odd {background: #e7e7e7;}
40. table {border: 1px solid #ddd;}
41. </style>
42. </head>
43. <body>
44. <div class="mono">
45. <h1>Bilder im Ordner "<?PHP $dirArr = explode(DIRECTORY_SEPARATOR, dirname(__FILE__)); echo (isset($dirArr[(count($dirArr))-2]))? $dirArr[(count($dirArr))-2]."/":""; echo (isset($dirArr[(count($dirArr))-1]))? $dirArr[(count($dirArr))-1]:"./"; ?>"</h1>
46. <table id="imglist">
47. <?PHP
48. foreach (glob("{*.gif,*.jpg,*.png}", GLOB_BRACE) as $pics) {
49. $picsize = getimagesize($pics);
50. $pics_kb = filesize($pics)/1024;
51. $pics_kb = round($pics_kb,2);
52. $odd = ($i%2)? "class='odd'":"";$i++;
53. echo "<tr $odd><td><a href=\"#\" class=\"picview\"><img src=\"$pics\" alt=\"\" />{$pics}</a> </td><td class=\"sizes\">Width: $picsize[0] </td><td class=\"sizes\">Height: $picsize[1] </td><td class=\"kb\">$pics_kb KB</td></tr> \n";
54. }
55. ?>
56. </table>
57. </div>
58. </body>
59. </html>
60. <!-- XHTML Valide -->
61. Download this code: imageslister.php.txt

Für den Preview der Bilder habe ich Stu Nichols Methode, um Bilder an anderer Stelle in der Seite anzuzeigen, verwendet.

Update Dateigröße ergänzt.

Filed under: Programmierung, Tools
1 Comment

Da die Welt nicht nur aus nüchternen Beraterseiten besteht, habe ich nun mir den Spass gegönnt und den Entwurf mit den stilisierten Palmwedeln umgesetzt. Bei der Gelegenheit wurde gleich noch ein weiteres Template entworfen. Eine Seite mit stilisierten Waizen und Mais aus der Clipartsammlung und der Bilderrahmen mit den Insekten wurde schließlich umgesetzt. Die Website-Templates Templates sind unter der Nummer TC-0079 A-C in der Templaterie (TC-0079 von A bis C in der Galerie, dies ist B!) zu finden.

TC-0079 C (Sonnenaufgang auf dem Land)

Das Website-Template nutzt den Trick mit dem Body, bei dem der Skrollbalken im HTML und BODY deaktiviert wird und (more…)

Filed under: Design
No Comments

Schon die Farbkombination sieht nach ehrenhaften Laborkitteln aus, nach ernsthaft nach gesunden Nahrungsmitteln strebenden Unternehmen aus:

1.   #e6e6e6
2.   #1b9715
3.   #eeffd6
4.   #fbfff1

Doch um die Farbpalette ging es mir nicht. Das Zierelement, das der Navigation die Form vorgibt, war bereits in der letzten Photoshop Website Skizze mit dem stilisierten Regenwald und ist ein Stück Gegenbewegung. Der Header bietet Raum für Werbung, z.B. kann über dem grünen Balken eine Amazonliste kommen mit Buchempfehllungen zur Naturheilkunde oder weitere Produkte aus dem Haus in einer Thumgalerie, ähnlich wie in der Templaterie (natürlich Farblich und stilistisch angepasst). Weitere bewusst gewählte Unterschiede ist die assynchrone Formgebung.

Der Entwurf ist hart an der Grenze zum Kitsch. Dir längste Zeit ging auch dafür drauf, dass ich Ideen verwarf, weil es zu kitschig war und auch diesen Entwurf habe ich mir lange angesehen und gezaudert, ob es nicht doch schon zuviel ist. Dann aber gabe es im wesentlichen nur ein Zurück zu massenhaft vorhandenen Einerlei des Netzes. Balken, gerade Linien, ein wenig Verlauf. Nicht entschieden istwie die Seite einmal abschließen wird. Ich habe mich auf den Viewport ohne Skrollen beschränkt.

Die Fenchelsamen (ich glaube es ist Fenchel) stammen von stock.xchng vom User Malamantra unter dem Titel Spice Rack 4.

Filed under: Design
No Comments

Für dieses Meisterwerk draussen im Web, ist ein Provider verantwortlich. Die Website signalisiert dem Nutzer, dass es zeit für eine Pause ist. Die Maus ins Feld platzierert und meditiert. Wer wie ich die Geduld verliert und nicht wegklickt sondern neugierig unter die Haube sieht, stellt fest, dass ein Javascript darüber informieren würde, dass diese Seite noch nicht vom Nutzer des Hostingpaketes eingerichtet wurde. Aha.

Diese Variante einer Navigation darf man unter die Kategorie “die Rache des Captchas” nehmen. Weder Bot noch Mensch haben eine Chance vor dem Klick zu erfahren, was hinter dem Link steckt. Wer Javascript deaktiviert, wird wie der Bot es nie erfahren. Es hilft bei dieser Navigation die Augen leicht zuzukneifen oder als Brillenträger die Brille abzunehmen. Mit ein wenig unschärfe und Konzentration kann man dann lesen was auf den Schaltflächen steht.

Ich fand es nicht wichtig, wo diese “Meisterwerke” im Netz zu finden sind. Sorry.

Filed under: Kaffeetscherl, Webmarketing, Webtechniken
No Comments