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

Ala verschlechtert

tempa wrote this 19:40:

Mathew James Taylor zählt zu den Predigern des all liquid und hat einen Beitrag herausgebracht, wie er meint, dass man A List Apart verbessern sollte. Doch das Mockup ist eine klare Verschlechterung des Designs von A list apart. Mathew James Taylor berücksichtigt nicht, dass es Menschen gibt, die auch bei hohen Auflösungen mit vollem Fenster surfen und die Zeilenlänge dann die Lesbarkeit erheblich beeinträchtigen.

A List apart hat diesen Umstand berücksichtigt und deren Entscheidungen schlüssig und sinnvoll begründet. (Ala4.0)

Mag sein, dass man den Aufbau noch elegnater hinbekommt und den einen oder anderne Hack vermeiden könnte, doch da häng ich mich dann nicht rein. Schließlich ist jede Seite immer nur so gut, wie es die Zeit, in der sie erstellt wurde, zulässt. Ich sage nur Panta rei oder so.

Weblogs: Soll die Timeline der Chronologie folgen?

tempa wrote this 18:32:

Klassische Timeline

Darüber nachgedacht hat der Blogger auf Tordox.org: Seitennavigation in Weblogs,

via Peter Kröner

Randbemerkung: 😀 ganz wenig geschrieben. Zu lesen ist da dennoch viel.

Ein Hoch auf die gefühlte Ladezeit

tempa wrote this 09:30:

Es tut gut, wenn man seine unwissenschaftliche, gefühlte Expertenmeinung durch Feldversuche bestätigt sieht:

Unser interface ingeneering: The Truth About Download Time

Anhand meines eigenen Surfverhaltens, bei dem ich sehr häufig die Geduld aufbringe auch einmal länger auf eine Site zu warten, nahm ich noch nie die 8 Sekunden-Regel so genau. (mehr …)

Linksammlung: Formulare durchgestalten

tempa wrote this 10:58:

Häufig behandle ich Formulare Stiefmütterlich und belasse diese in welchem Design auch immer der Browser die verschiedenen Elemente darstellt. Entsprechend schwach ausgeprägt ist mein Wissen über die Möglichkeiten. Ich gehe in Bezug auf die stiefmütterlich behandelten Formularen mit einem großen Prozentsatz meiner Kunden konform. Hier und da aber gönne ich mir auch in Bezug auf Formulare die Extrameile.

Es wurde Zeit mich einmal wieder zu informieren, was in Bezug auf Formulare im Netz schon vorhanden ist:

  1. Roger Johansson hat in seinem Blog 456 BereaSt im Beitrag Styling form controls with CSS, revisited das für mich umfassenste und aufschlußreichste beigetragen, um eigenständig sich an die Gestaltung des Formulars zu machen. Auch was die verschiedenen Optionen anbelangt, arbeitet man an Templates und nicht an einem konkreten Projekt, bei dem zunächst nur ausgearbeitet werden muss, was in den Projekt genutzt wird.
  2. Stu Nichols hat in seinem CSS-Playground einen Mini-Formular-Zengarden eingerichtet: A form with style
  3. Cameron Adams zeigt mit seinem Blue Man was Formulare können, wenn man Sie nicht in ein Tabellen-Korsett zwingt: Form layout templates
  4. Einen mehr als Berechtigten Rant bezüglich der Art und Weise wie Formulare in Browser integriert wurden, wie unflexible und inkongruent diese sich in den verschiedenen Browsern geben, schrieb Erich Meyer in einem lesenswerten Beitrag: Formal Weirdness.
  5. Und damit folgt Lucian Slatineanu vom badboy mit seinem Beitrag Nice Forms, da er mit seinem Javaskript die festen Browservorgaben umschifft, die die Gestaltung von Formularen so frustrierend macht.
  6. Um sich Arbeit zu sparen kann man entweder Stu Nichols Vorlage verwenden oder aber dieses Form-Template um anschließend seine eigenen CSS-Eigenschaften zur Gestaltung des Formulares zu vergeben. Prabhath Sirisena auf Nidahas zu Formularen liefert an folgender Stelle das Form Template. Es lebe die Bequemlichkeit.

Es gibt noch viel weitere Beiträge, die man als Anregung für die eigene Gestaltung heranziehen kann: ALA: Prettier Accessible Forms, Veerle: Styling forms in CSS, Picment: Fun with forms — customized input elements, Mezzoblu zu Labeling Formfield, Chris Ramakers, skyrocket concepts: semantisch korrekte horizontale Formulare step 1 – 2 – 3, Malarkey: optionale Formularbereiche ausblenden, Brand spanking New: AutoSuggest: An AJAX auto-complete text field, Live-validation und das Formular spricht mit dem User. Urputzig!, Nicholas Rougeux, C82, Scrollende Checklisten als alternative zu Selectfeldern, Formassembly mit einer ganzen Sammlung von gestylten Formular-Templates (Unter der Haube im Formgarden sieht’s trübe aus. Die Lektion zum Thema „Inline- und Blockelemente“ wurde noch nicht durchgenommen.), …

Datenblatt-Formular das aussieht wie ein Datenblatt für Webapplikationen, in denen zum Beispiel ein Tutor, Sachverstädniger oder Vorgsetzter seine Bewertungen zur Übergabe an die Datenbank einträgt.

… es gibt sicherlich noch mehr und wer eine Adresse kennt, die hier unbedingt noch fehlt, die Kommentare sind offen. 🙂

Best Practice oder Thou shalt …

tempa wrote this 09:52:

Alright you Nielsenites you, that didn’t go quite like I expected. It’s probably my fault for calling it ‘Best Practices‘ in the first place — what we’re looking to create is more a crib sheet of practical advice, something for reference when a designer gets stuck while using CSS specifically. […] While nobody wants a blue, underlined link world, and we’ll be debating for ages the best way to size fonts, this is what I was getting at: “a CSS Best Practice is a one sentence action statement, a ‘thou shalt‘ or ‘thou shalt not‘ (paraphrased, of course) that highlights a specific issue, be it browser compatibility, code integrity, or whatever else can actually be considered factual (instead of opinion).”

Beachtenswerte Quelle: Mezzoblue: CSS Crib Sheet?

Die in meine Augen sehr sinnvollen Gebote für Webdesigner in dem was nach dem Zitat folgen, wurden von vier recht guten Ratschlägen in einem Beitrag unter der Bezeichnung „Best Practice

Zu den blauen unterstrichenen Links kann ich nur sagen, wenn ich nur blau unterstrichene Links kenne, dann kann ich keinen Sinn für alternative entwickeln. Ich lebe dann in einer triesten grauen Welt voller Uniformen und einem verkümmerten Sinn für die Abenteuer und den Spaß am Entdecken. Diese „Don’t make me think!“-Regel ist eine Regel der Monopolisten, der totalitären Caesaren, das ist Panem et Circensis um möglichst bequem und möglichst effektiv den letzten Penny aus dem Volk zu quetschen. Don’t make me think erstickt Kreativität und damit Individualismus. Individualismus setzt voraus, dass man sich mit den Besonderheiten eines Individuums auseinandersetzt. Ich schweife ab …

So! Das nur kurz zwischenrein notiert. Parallel habe ich einen anderen Beitrag zum Thema Formulare in Arbeit in einem der nun 46 offen Registern in zwei Browsern (opera + ff) und kehre zu diesem zurück. Schließlich wollen die 46 Fenster geschlossen werden. Die beiden Offtopic-Fenster können damit zugemacht werden. womit es nur noch 44 offene Fenster sind. wird sich in der nächsten halben Stunde oder vollen Stunde noch ein paar Mal ändern.

Von Templatesysstemen und gutem Webdesign

tempa wrote this 15:19:

Was macht gutes Webdesign aus?

Es gibt viele Elemente, die ein gutes Design von einem schlechten Design unterscheiden. Gutes Webdesign …

  1. … berücksichtigt den Browser des Betrachters.
    • typische Browserfenstergrößen
    • typische Browsertypen
    • typische Browsergenerationen

    oder anders ausgedrückt: validen, flexiblen Quelltext, der sich weit möglichst der Umgebung anpasst und dabei …

  2. … berücktsichtigt die Auffassungsgabe des Betrachters.
    • Lesefreundlichkeit: Zeichenmenge in einer Zeile (55 bis max. 75 Zeichen)
    • Orientierung: Linienführung, Positionierung und Prioritäten
    • Aufnahmefähigkeit: Informationsmenge, Konzentration, Clustergestaltung

    oder anders augedrückt: ergonomische Gestaltungsprinzipien in der Praxis.

  3. … berücksichtigt die Ziele des Anbieters.
    • Werterwartung: Positionierung am Markt
    • Wiedererkennung: Einmaligkeit und Identifizierung am Markt
    • Filterfunktion: Attraktion der gewünschten Zielgruppe

    oder anders ausgedrückt: das Erscheinungsbild repräsentiert den Anbieter und des Kunden.

Gutes Webdesign ist die Balance zwischen Mensch und Technik und Mensch und Markt.

Letzteres klingt wie ein Kalenderspruch und das Problem ist, dass vieles, was für den einen richtig ist, ist für den anderen falsch. Webdesign ist ein Entwicklungsprozess. Ein Entwicklungsprozess, der nicht auf Bestehendem aufbauen kann, ist jedoch zu teuer und ineffektiv. Templates zu verwenden und ermöglicht einen Entwicklungsprozess, der die Evolution zu einer guten Website möglich macht und effektiv.

Was macht ein gutes Templatesystem aus?

Ein gutes Templatesystem ist eine Matrix, die sich den Zielen einer guten Website unterwirft, ihr semantisch wie strukturell ein Raster und einen Rahmen bietet, der offen ist für neue Schnittstellen und Schnittstellen für unterschiedliche Benutzer anbietet. Benutzer, die die Inhalte pflegen benötigen andere Befähigungen als der Programmierer und der Designer. Ein gutes Templatesystem kann diese unterschiedlichen Akteure zu einer guten Website so trennen, das diese zusammenarbeiten können ohne sich in die Quere zu kommen und deren Befähigungen zu lernen.

Bemerkung am Rande: der Grund, weil ich Editland so liebe und Templates und Plugins für dieses MiniCMS in der Templaterie anbiete.

Große Quizfrage: Sind meine Pflichtangaben im Onlineshop ausreichend?

tempa wrote this 11:19:

Die große Frage im Online-Handel zu Umsatzsteuer und den Versandkosten:
Ist die Angabe transparent und hinreichend?

Er hat jedoch der Auffassung der Vorinstanzen widersprochen, die Preisangabenverordnung nötige dazu, die zusätzlichen Hinweise auf die Umsatzsteuer und die Liefer- und Versandkosten auf derselben Internetseite zu geben, auf der die Ware angeboten und der Preis genannt werde. Dem Internetnutzer sei bekannt, dass im Versandhandel neben dem Endpreis üblicherweise Liefer- und Versandkosten anfielen. Er gehe auch als selbstverständlich davon aus, dass die angegebenen Preise die Umsatzsteuer enthielten. Es genüge daher, wenn die fraglichen Informationen alsbald sowie leicht erkennbar und gut wahrnehmbar auf einer gesonderten Seite gegeben würden, die der Internetnutzer bei näherer Befassung mit dem Angebot noch vor Einleitung des Bestellvorgangs aufrufen müsse.

Quelle: Pressestelle des Bundesgerichteshofes

Die Frage stellt sich Kunden und potentiellen Kunden auch bei Onlineshop Tiacquisa?

Ja, Tiacquisa erfüllt die Anforderungen an einen Shop gemäß den Richtlinien des Gesetzgebers. Der Shopbetreiber ist jedoch eigenverantwortlich diese zu implementieren. Tiacquisa kann international eingesetzt werden und hat daher keine Routinen, die zur Einhaltung des deutschen Handelsrechts in bezug auf Versandhandel und Onlineshops.

Tiacquisa bietet hinreichend Möglichkeiten den Kunden über alles zu informieren. Es steht dem Shopanbieter der sich für Tiacquisa entscheidet frei, wie er dies gestalten möchte. Die Kombination von MiniCMS und MiniShop mit Bausteinen für statische Inhalte, die auf allen Seiten des Templates erscheinen und frei editierbar sind lassen Raum für Angaben oder einen Link. Grundsätzlich sind dem Kunden Versandkosten vor der Angabe der Adresse, ergo der Notwendigkeit der Abgabe persönlicher Angaben, bekannt. Da Versandkosten nicht selten in direktem Bezug zur bestellten Ware stehen, macht es durch aus Sinn diese Versandkosten mit dem Warenkorb zu kombinieren und nicht dem Kunden ein Formblatt um die Ohren zu hauen, bei dem der potentielle Besteller sich die Versandkosten für die unterschiedlichen Fälle zusammenreimen muss.

Damals – oder Gemeinsamkeiten von Algebra und Templates

tempa wrote this 13:56:

Als ich damals von der Hauptschule in das Aufbaugymnasium wechselte, rutschte mein Notendurchschnitt in fast allen Fächern ab, bis auf eines Mathematik. Was mich in der Grund- und Hauptschule meinen Mathematik-Notendurchschnitt immer wieder drückte war Kopfrechnen. Erst im Gymnasium war das kein Thema mehr. Ich bin bis heute eine schlechte Kopfrechnerin, aber Algebra beschäftigte sich mit Buchstabenlogik. Kenne ich eine Formel, kenne ich alle ihre Abwandlungen und es ist ein leichtes die Formel so umzustellen, dass der gesuchte fehlende Wert ermittelt werden kann. Meine Schulfreundin hat dieses System nie begriffen und behalf sich mit dem Auswendiglernen aller möglichen Varianten, die ich ihr lieferte. Dort wo sie in Sprachen brillierte war ich hilflos verloren und wo ich in Mathematik vorbreschte, war sie es.

Heute wurde ich an diese Tage des gemeinsamen Lernens erinnert. Ein Kunde hatte sich hoffnungslos in der Versionsverwaltung verloren. Er hatte jeweils die gesamte Installation samt Text-Inhalte je Kunde geführt und hatte nun Mühe nachzuvollziehen, wo das alte und wo das neue CMS verwendet wurde. Er nahm automatisch an, dass ich dieselben Probleme hätte. Das Problem taucht bei mir nicht auf, denn sobald ich das CMS, seine Inhalte, Module und Templates sauber getrennt halte, kann ich mit wenigen Handgriffen immer das Updaten, was ein Update benötigt.

Es ist wie Algebra. Es ist das zugrundeliegende System mit seinen Schnittstellen, Strukturen und Ausnahmen, nicht deren Varianten uns Ausprägungen im Gesamten, die mich interessieren und die ich verwalte. Es macht das Leben so viel einfacher. 🙂

Warenkorbfunktionen — Masken aufteilen

tempa wrote this 13:55:

Warenkorbprozedere

Keep it simple! Wenn man Warenkorbdaten und Adressdaten nicht in einem langen Formular sammeln will, kann man dies auch trennen. Da Versanddaten und Versandkostenberechnung eng verknüpft sind, macht es Sinn die Versandkosten ein Stückweit vom Warenkorb zu separieren. Nun verlangt der Gesetzgeber transparenz bei den Angaben der Kosten. Es genügt also nicht, irgendwo darauf hinzuweisen, dass noch Versandkosten mit dem Betrag XY hinzukommen. Teure komplex geschriebene Shops haben hier mit Datenbanken und Schnickschnack meist auch keine besseren Lösungen als das was im letzten Post dargestellt ist. Das einfachste ist also nach dem Warenkorb Liefer- / Rechnugnsanschrift und Zahlungsbedingungen zu erfassen und im Anschluß noch einmal alle Daten in einer Seite darzustellen, die z.B. wie eine Rechung (Lieferschein) gestaltet sein kann, bei der der Kunde nun nur noch bestätigt, dass die Angaben stimmen und die AGB akzeptiert werden und der letzte Knopf ist dann die Bestellung. An dieser Stelle kann sich der Kunde die Daten auch noch einmal ausdrucken, sollte er probleme mit seinem E-Mailfach haben, wird er für diese Option dankbar sein.

Mit dieser getrennten Lösung sollte auch die Verwaltung der Daten im Zusammenhang mit der Ausgabe einfacher sein, denn man kann so leichter die Module der Zwischenspeicherung, Berechnung und Auswertung sowie der Ausgabe in einzelne fast eigenständige Programmteile unterteilen.

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