Templaterie Blog

Als der Auftrag eines Redesigns einer Website in meinem Büro aufschlug, war die Seite “Über uns” mit einem Flashelement gestaltet, das einen Grundriss zeigte, das die Mitarbeiter den Büros zuordnet, in dem es Fotos der Mitarbeiter einblendet sobald die Maus über dessen Büro hovert. Das Flashelement nahm die ganze Breite ein, obwohl für diesen Hovereffekt nur die halbe Breite benötigte und der allgemeine Text dieser Seite war innerhalb des Flashelement. Das lässt sich besser lösen. Zugänglicher! Barriereärmer! Mit einer Liste! UND man benötigt kein Javascript. Ein Klick auf das Bild führt zur Demo:

Zunächst hatte ich ein wenig Probleme mit den IE6, da ich “display: none” der Eigenschaft “visibility: hidden” den Vorzug gab. Alles weitere auf der Demoseite.

Filed under: Design, Webtechniken
1 Comment

Manchmal benötigt man für Seiten ini einem CMS spezielle Anforderungen, die auf keiner anderen Seite auftauchen. Es macht also keinen Sinn, das Rahmendesign für diese Seite für andere Seiten zur Verfügung zu stellen. In diesen Fällen ist es praktisch wenn man die Templates aus der Anzeige nehmen kann. In Editland erreicht man diese Auswahl des Rahmendesigns entweder bei der Neuanlage einer Seite über die Schaltfläche “neue Seite” oder aber über die Schaltfläche “TPL”. Dort werden alle Rahmenseiten aus dem aktuellen Template-Ordner angezeigt, die die Erweiterungen html, htm oder php haben. Da Editland eine Seite mischt, die dann unter index.php?s=seitenname publiziert wird, ist es für den Browser irrelevant, auf welche Endung das Template lautet und da in Editland das Template mit der vollen Bezeichnung angemeldet, werden muss, darf diese Seite mit dem Rahmendesign auf eine beliebige Erweiterung enden, z.B. spezialtemplate.tpl.

Da die Seite mit dem Rahmendesign nicht mehr das Listenkriterium erfüllt wird es nicht in der Auswahl angezeigt.

Sollten Kunden nun probeweise allerdings das Template wechseln, dann können sie diese Einstellung nicht mehr rückgängig machen. Diese Spezialeinstellung kann derzeit nur über den Text-Editor und ftp erreicht werden. Eine entsprechende Verwaltung im Backend für tpl-Files im Template-Ordner ist in Planung.

Filed under: Tools, Webtechniken
No Comments

Von Esim Can, seines Zeichens ein von mir hoch geachteter Screen-, Applikationsdesigner … (Editland ist in Sachen Einfachheit einfach fantastisch gelöst, auch wenn die Fernbedienung beim aktuellen Stand der CSS-Fähigkeiten des noch gebräuchlichen MSIE6 ein spezielles Template benötigt, soll es bei langen Texten nicht nerven ) … öh … ich schweife etwas ab … oder auch nicht, denn ein Online-Formular für’s Webdesign ist hier zu unflexibel und will man das Template hier wieder den Umständen händisch anpassen, braucht es Erfahrung.

Nichts desto trotz ein lustiger Web-Tipp für alle, die sich jetzt eine Seite per Onlineformular zusammenbasteln wollen:

Positioning is everything: CSS Source Ordered Variable Border 1-3 Columned Page Maker

Etwas lästig bei diesem Formular ist noch, dass es keinen Colorpicker hat, mit dem man die Farbe per Mouserclick eingeben kann.

Achja: Es ist auch ein guter Weg sich mit CSS und Templates vertraut zu machen.

Merci Esim.

Filed under: Design, Webtechniken
No Comments

Mathias Bank programmiert viel und professionell. Das heißt prüfen seiner Skripte ist sein täglich Brot. Ich dagegen Programmiere noch äußerst ungern und die Skripte für den Hausgebrauch sind noch schlicht meist einfach und schnell getestet. Ein wenig Improvisation beim Test bringt mich ebenso gut ans Ziel. Aber so einen Tipp für die Testumgebung vom Profi schlägt man nicht aus. Für meinen favorisierten Client PHP 4.3 ist es noch für die PHP-Prüfung ungeeignet. Dort müsste ich noch JSON installieren und das ist es mir im Augenblick nicht wert. Zuviel Heckmeck.

Aber den Firebug zog ich mir und schaute rein.

Meine letzte Arbeit damit einmal angesehen. Ohoh! Was der Firebug hier durchstreicht, hat absolut seinen Sinn und sollte nicht gestrichen sprich gelöscht werden.

Ich würde sagen, auch der Firebug ist nur so gut wie der Profi, der ihn nutzt. Es ist kein Amateur-Tool, das einem das Lernen der Zusammenhänge erspart.

Insgesamt ist der Firebug allerdings ein schönes Werzeug um sich in Webskripts und Seitenbeschreibungen zu orientieren und vermutlich für die Suche nach Fehlern mehr als hilfreich. Danke, Mathias.

Filed under: Programmierung, Tools, Webtechniken
No Comments

Momentan lerne ich hier und da ein wenig PHP und beginne mich mit dem Vokabular und der Funktionweise rumzuschlagen, mit ganz unterschiedlichem Erfolg. Zuletzt musste ich mehrere Links ausfiltern, die bestimmte Eigenschaften mit sich brachten. Zunächst prüfte ich über die Ausgabe mit <pre>print_r($Mein_Array); bzw. echo "\$meine_Variable $meine_Variable \n";</pre> was den Nachteil hat, dass bei der Prüfung das Design zerschossen wird, weil diverser Text in der Seite erscheint, der dort nicht hingehört.

Ich benötigte recht lange und viele Versuche und dabei entdeckte ich eine viel bessere Möglichkeit parallel die PHP-Ausgabe im Auge zu behalten und gleichzeitig die Funktion in der Seite zu testen, was bei einem CSS-Aufklappmenü, um das es ging und das den aktuellen Pfad jeweils durch nette kleine Pfeile anzeigen sollte. Ich hatte am Ende zwei Fenster offen. Die Seite selbst und das Quelltextfenster des Firefox. Im Quelltext hatte ich Kommentare mit den PHP-Augaben. Ich konnte also eine ganze Menge unterbringen und der Array wird dabei auch untereinander geschrieben.

Statt:

1. echo "<pre>";
2. print_r($Mein_Array);
3. echo "\$meine_Variable $meine_Variable \n";
4. echo "</pre>";

besser:

1. echo "<!--\n";
2. print_r($Mein_Array);
3. echo "\$meine_Variable $meine_Variable \n";
4. echo "\n//-->";

So kann man zig Sachen ausgeben und stehen lassen und gleichzeitig die Ausgabe der Seite prüfen, ohne dass diese zerschossen wird.

Als gestern durch eine zu scharf gestellte PHP.ini die Ausgabe des Templaterie-Shop verhindert wurde, ersetzte ich den Programmteil (tc-randomizer in einer Mehrfach-Installation mit diversen Pfadanpassungen) der nach der Servermodernisierung nicht mehr funktionierte durch einen Kommentar “Wegen Wartungsarbeiten deaktiviert.” und ließ mir alles in einem HTML-Kommentar ausgeben, was hier an Variablen und Arrays verwendet wurde. So war der Fehler schnell gefunden und in der Zeit als ich nach der Ursache forschte blieb der funktionierende Teil einschließlich der Darstellung intakt. Wer schaut schon in den Quelltext was hier an Kommentaren zu finden ist. Der Prozentsatz ist verschwindend klein und wenn man den Fehler behoben hat, kann man diese Kommentare wieder herausnehmen … wobei ich glaube, ich habe diese sogar noch drin (jupp, habe ich — ich meine dringelassen aber eingeschlossen in /**/ und damit wird es nicht ausgeliefert. Wer jetzt also im Quelltext nachschlug sah Nüschts dergleichen) … es war dann schon spät und ich war zu müde … Hauptsache es tut.

Filed under: Programmierung, Webtechniken
2 Comments

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

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

Nachdemich mich nun für einen Entwurf entschieden habe, den ich Umsetzen möchte. Kommt die Phase zwei. Schon bei der Arbeit am Entwurf, habe ich verschiedene Schnittmuster im Kopf, mit denen man das jeweilige Template umsetzen könnte. In dieser Phase exportiere ich jedoch auch schon mal die eine oder andere Variante um nach bei der Umsetzung in HTML flexibel verschiedene Lösungen probieren kann. In der folgenden Grafik sind bereits ein paar Elemente gekennzeichnet, die exportiert wurden.

Der Ast, die rote Fläche, der helle Rahmen, die Birnen im Hintergrund und der Granatapfel, sein Schatten und seine Spiegelung liegen jeweils auf einer eigenen Ebene und können ein uns ausgeblendet werden, gerade so, wie hier die Texte (Title, Navigation und Blindtext) ausgeblendet wurden (Siehe zum Vergleich erster Entwurf in Step 1).

Noch rasch die PHP für die Bild-Liste mit den Werten in den Image-Ordner kopiert, damit die Werte übersichtlich und im schnellen Zugriff sind.

Moment … was sind das für komische Dateinamen? (more…)

Filed under: Projektplanung, Webtechniken
No Comments

Microsoft sollte für jede Extra-Minute bezahlen müssen, die ihr Browser kostet, in fehlerfreie standardcompliant Code Fehler einzufügen, um die Darstellungsfehler ihrer vermalledeiten Browser in Designs auszumerzen. Alle! Alle! Browser kommen mit dem Layout zurecht, sogar der IE 6 mit ein klein wenig Nachhilfe … nur der IE 7 fängt bei den Floats zu spinnen an. Die Floats sorgen dafür, dass ein paar Absätze in kleine Blocks im Viererset angeordnet sind. Und schwupps rutscht der Fuß über den letzten Absatz, der über die gesamte Breite geht und natürlich ist der Fehler hoffnungslos unlogisch.

• DIV 50% mit Floatklasse
• DIV 50% mit Floatklasse
• DIV 100% mit Clear
• DIV 50% mit Floatklasse
• DIV 50% mit Floatklasse
• DIV 100% mit Clear
• P 100% 98/15
• DIV verrutschter Fuß

Wenn der Fuß schon verrutscht, warum nicht über den ersten Block, warum nur über den letzten Absatz? Ich darf also erst einmal experimentieren, wie man diesen Bug behebt. Grrrh.

OK. wenigstens entschädigt mich diese Site (genauer die Illustration auf der Seite) für den Frust und die Extraarbeit: MSIE 7 Bugs

[Nachtrag]
Fair ist fair: Das Problem saß auch hinter dem Monitor. Ein Flüchtigkeitsfehler in den Conditional Comments. Bleibt nur noch der Vorwurf, dass der IE7 gleich zweimal den Conditional Comment falsch interpretierte. Einmal bei der ersten Entwicklung, als ich noch mit dem Blindtext von Peewee am Design feilte und dann noch einmal bei der Fehlersuche, als ich gestern direkt ins Template für das MiniCMS Editland den Text eingab und der Fuß nicht verrutschte.

Ein Teil des Problems hat also nach wie vor die Redmonder Truppe zu verantworten!

Filed under: Webtechniken
No Comments

Claudia Reiser von creisi productions schickte mir per Mail einen interessanten Tipp für Bildergalerien. Via Accessify Forum stieß sie auf die Website des britischen Museums für maritime Kunst (National Maritime Museum). Noch sind nicht alle Bilder überarbeitet, doch die neue Collection ist bereits mit dem Magnifyer ausgestattet.

Waterfall in Dusky Bay, April 1773

Visuell angezeigt wird, wenn das große Bild für Details vollständig geladen ist. Der Klick auf Teleskop startet einen quadratischen Ausschnitt im Zentrum, den man dann über das Bild ziehen kann.

Eine Schöne Javascript-Lösung. Ist Javascript deaktiviert, bleibt auch die Schaltfläche mit dem Teleskop inaktiv.

Weitere Bilder-Zooms findet man bei Stu Nichols:

1. An image magnifier
   Thumbnail das per Mousover das original einblendet.
2. An image magnifier
   Über Mousover und CSS funktioniert dieser Magnifyer auch ohne Javascript
3. Sliding scale image magnifier
   Statt per Mouseover und CSS über das Bild selbst zu hovern und einen Ausschnitt zu sehen, kann man hier über einen wachenden Balken streichen und das gesamte Bild wird vergrößert.
4. Dynamic enlarging image using only CSS
   Eine Weiterentwicklung stellt Stu Nichols schließlich hier vor. Das Bild wächst langsam an.
5. Image map for detailed information
   Wieder per CSS werden vergrößerte Bildausschnitte eingeblendet. Die vergrößerten Bildausschnitte werden zusätzlich textlich erläutert.

Übrigens auch im Museum gibt den annotated Zoom, also den vergrößerten Bildausschnitt mit Texterläuterung: The New Union: Club, Being a Representation of what took place at a celebrated Dinner, given by a celebrated – society

Danke für den Tipp an Claudia Reiser und an die Quelle im accessify forum.

Filed under: Programmierung, Webtechniken
4 Comments