Was brauche ich, wenn ich meine Website selbst pflegen möchte?

tempa wrote this 09:01:

Die Frage ist schnell und einfach beantwortet: Kenntnisse und einen Texteditor oder ein Redaktionssystem (CMS)/Webeditor.

Kenntnisse in der Websitepflege

Mit einem guten Template und der Trennung von Inhalt und Gestaltung, benötigt man nur noch wenige HTML-Kenntnisse um Inhalte in eine Seite einzupflegen. Die meisten Texteditoren beherrschen Textbausteine, die man in eine Seite einbauen kann. Z.B. könnte ein Template-Textbaustein wie folgt aussehen:

  1. <?PHP echo '<?xml version="1.1" encoding="iso-8859-1"?>'; ?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  3. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  5. <head>
  6. <body>
  7. <div id="header">
  8. <!--[ ###### Kopfzeile ###### ]-->
  9. </div>
  10. <div id="navigation">
  11. <?PHP include(navigation.php); ?>
  12. </div>
  13. <div id="content">
  14. <!--[ ###### Inhalt ###### ]-->
  15. </div>
  16. <div id="footer">
  17. <!--[ ###### Fußzeile ###### ]-->
  18. </div>
  19. </body>
  20. </html>

In dem Beispiel wird die Navigation in einer separaten Datei verwaltet und alle Seiten beruhen auf PHP, das erspart dem Redakteur der Website, dass er bei einer neuen Seite alle Seiten öffnen und aktualisieren muss oder auf eine zentrale Navigation angewiesen ist. Hat man SSI (Server Side Includes) kann man auch die Navigation darüber einfügen und eine Dynamik (hervorhebung der aktuellen Seiten sowie Seitenlinks hierarchisch ein- und ausblenden) z.B. via Perl erzielen.

Je nach Anforderung macht die eine oder die andere Art bzw. eine Kombination (z.B. zentral und linear oder vernetzt und linear oder alle drei) der Vernetzung der Seiten Sinn. Je nach Art der Vernetzung müssen in reinen HTML-Seiten mal mehr mal weniger Seiten erneut geöffnet und bearbeitet werden, ändert sich das Seitengefüge durch zufügen, löschen oder umstrukturieren. (siehe auch Yale Styleguide zum Thema Navigation auf TU-Chemnitz.de und Sitestruktur von selber Quelle)

Navigationsarten

Dergestalt die Arbeit vorbereitet, benötigt der Redakteur nun noch ein grundlegendes Verständnis der folgenden HMTL-Tags: H1-H6, P, PRE, OL, UL, LI, DL, DT, DD, TABLE, TH, TD, IMG, A, DIV, BLOCKQUOTE, Q, CODE, STRONG, EM und SPAN sowie die Attribute 'src', 'href' und 'class'. Die Liste ist kurz und das Regelset dieser Tags nicht allzu kompliziert (siehe hierzu selfhtml: HTML-Kurzreferenz). Wer nun noch die PHP-Datei für die Navigation entsprechend organisiert, kann auch dem Laien mit einem beliebigen Text-/Webeditoren wie z.B. dem Notepad in Windows (mein Favoriten sind PSPad, Weaverslave und Textpad) und FTP die Website-Pflege anvertrauen.

So manchem aber ist das schon zu kompliziert und dem sei ein Redaktionssystem oder Webeditor empfohlen.

Websitepflege mit dem Redaktionssystem (CMS/Webeditor)

Je nach Anforderung bezüglich Websitekomplexität und Größe des Redaktionsteams braucht man ein funktionsreiches Redaktionssystem mit dem Leser, Autoren, Redakteure und Administratoren verwaltet werden können oder Publikationsfristen, Seitenstrukturen, etc. oder aber es ist eine kleine Site und das Redaktionsteam ist klein und in Rufweite, neue Seiten werden fast immer dann publiziert wenn diese auch geschrieben werden und dann genügt ein einfacher Webeditor (gelegentlich auch MiniCMS genannt). Wie in der Textverarbeitung Word stehen dem Autor oder Redakteur Schaltflächen zur Verfügung. Einige Formulare dienen zur Seitenstrukturierung und Benutzerverwaltung. Je nach Komplexität benötigt man für das CMS eine Schulung (Joomla, Drupal, Contenido, Moodle, etc. … ) oder ein 15-minütiges Telefongespräch (Editland, WordPress, Textpattern, …). siehe auch CMSMatrix.org

CMS = Contentmanagementsystem ist der Oberbegriff für diverse Systeme unterschiedlicher Prägung, wobei so mancher CMS mit dem Redaktionssystem gleichsetzt und Webeditoren, die außer Inhalt und Seitenstruktur nichts weiter verwalten können die Bezeichnung CMS absprechen. Genaugenommen ist auch ein Online-Shop ein Contentmanagementsystem ebenso wie ein Weblog, ein Wiki oder eine Community mit Profilen, Chat und Foren. Je umfangreicher der Inhalt, je komplexer die Nutzerrechte, die Kombination/Sortierung von Textbausteinen und Seitengefüge, desto eher empfiehlt sich eine Datenbank, in der all dies verwaltet wird. Welches CMS letztendlich das geeignetste ist, hängt mit dem Website-Pfleger bzw. -Pflegeteam ebenso zusammen, wie mit den Inhalten und deren Flexibilität in Bezug auf Darstellung, Vernetzung, Zuordnung und Publikationszeiten sowie Nutzungsrechten.

Was es mit Seitensystemen/Seitenstrukturen auf sich hat, davon ein andermal mehr …

Ursprünglich gepostet am 6. Dezember 07, 16:13 in meinem Blog “Silkester erzählt”.

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

Ein Pfau in der Website

tempa wrote this 05:26:

Browser-Statistik

Dieses Template hat viel Spaß gemacht und war einmal von dem ausprobieren und dieser und jener Suche nach der idealen Form, relative schnell geskriptet, bis es zu dem Test im IE Mac kam und ich wieder den Frust bekam, denn bis zum Blick in den Mac, schien alles Perfekt. Das Design verwendet so gut wie keine Hacks, einmal von dem height: 100%; den man nun einmal für den IE braucht abgesehen.

Und dann kam der Mac-Test und es sah schon abenteuerlich aus. Ich hoffe, dass es sich nur um eine Vererbungsgeschichte handelt, wo keine Vererbung sein sollte, denn dann wäre mit der Anweisung im IE-Mac-Style auch schon wieder die Welt in Ordnung. Aber ich wollte doch mal wissen, wievielen Nutzern ich ca. eine Aufforderung schicke, endlich einen anderen Browser zu verwenden. Bitte.

Wie viel Mühe lohnt noch?

Browser-Statistik

Nach dieser Statistik vom Januar/Februar 2006 sind es ca. 0.3% der Nutzer.

In meiner Statistik tauchen Mac-User nicht auf. Nicht weil diese nicht auf meiner Site zu finden wären. Ihr Anteil ist nur zu gering, dass Sie es in die Top 15 schaffen. Wenn ich also Seiten lasse wie sie sind, so chaotisch und irgendwie kaputt, dann werden die 0.3% Mac IE Nutzer auch noch verschwinden.

Als den Netscape 4 dieses Schicksal traf, zählte ich auch zu den Nutzern, die noch lange, lange lange an diesem Browser klebten, aber als immer mehr Seiten auf mich und meine Browser-Präferenz pfiffen, da habe ich irgendwann gewechselt und nie mehr zurückgeblickt.

Irgendwann kommt die Zeit, da macht man nichts gut, wenn man noch Rücksicht nimmt. Es macht die Entwicklung teurer und da man ohnehin nicht alle Browser und alle Systemkonfigurationen berücksichtigen kann, ist es nur konsequent, wenn man eine Entscheidung trifft. Ich treffe diese Entscheidung von Template zu Template neu. So ganz den Mac IE zu ignorieren, kann ich mich nicht wirklich durchringen, obwohl alle Sites, die Struktur und Layout strikt trennen eh immer benutzbar sind. Also keiner in die Röhre schauen muss.

Die Vorteile liegen auf der Hand und im Fall des Pfaus, gibt es vieles, das positiv erwähnt werden kann, wie z.B. das das Design liquid ist, d.h. es passt sich seiner Umgebung an und ist sehr lange ein ausgewogenes Design. In eingen Bereichen ist das Design so simpel, dass eine Anpassung leicht möglich ist, sei es der Hintergrund oder die Zielelemente, die in der Diagonalen sich auf der Website befinden. Der Pfau geht mit der Site nach unten, während die Feder dort am Header hängen bleibt.

Das Design sieht auch drei Schritte vom Monitor entfernt noch bärenstark aus, d.h. Seiten, die nur einen kurzen Textblock haben, machen auch auf die Entfernung mächtig Eindruck und locken den Besucher an. Sitzt man mit der Nase am Bildschirm davor, erschlägt es trotzdem nicht. Die Reihenfolge ist in diesem Template mal wieder wie konventionell üblich, also die Links tatsächlich oben, doch rechne ich nicht mit einer exorbitanten Tiefe bei der wahrscheinlichen Klientel für eine solche Website und dann ist die Reihenfolge goldrichtig.

Ich bin nicht immer so zufrieden mit der Arbeit, wie in dieser, jetzt bin ich auf die Reaktion gespannt.

Das Template gibt es schon in der Templaterie zu kaufen. In den letzten Tagen ist in der Templaterie viel los. Fast täglich gibt es aktuell ein Update und der Trend schein noch eine Weile anzuhalten. Mal sehen, wie lange ich dieses Tempo durchhalte. Solange es so Spaß macht … No problem. Ich habe jetzt auch endlich die Template-Serie online, die anläßlich eines Wunsches eine Autohändlers entstand. Und weil ich es hier noch nicht geschrieben habe: Jutta Kemperle ist dem Team um die Templaterie zugestoßen. Ihr erstes Web-Template-Design spricht die Wellness- und Kosmetik-Branche an. Ich mag ihre frischen Farben in dem Design.

Weil ich gerade wegklickte

tempa wrote this 14:07:

Ich war auf der Suche noch einem Statistik-Script und surfte so hier und surfte so da und bin sicherlich gedultdige, wenn ich nicht nur rumdaddle. Aber wenn Ihre Seite mich auf der Startseite gefangen hält, weil Sie wollen, dass ich Ihr gesamtes Portfolio zur Kenntnis nehme, dann klicke ich das rote Kreuzchen neben der Lasche ihre Seite fliegt aus der engeren Auswahl, meist ist sind dort in meinem kleinen Firefox soviele Laschen sichbar, dass ich meine Ungeduld nicht bereue und etwas geeignetes finde.

Es ist ein Unfug zu glauben, dass der interessierte User die Geduld schon aufbringen wird. Vorallem der Firefox hat die unangenehme Eigenschaft, dass er sich beim Laden von großen Dateien auch bei DSL mit 1GB/s schon einmal für Sekunden eine Auszeit nimmt. Mein Zorn richtet sich dann nicht gegen Firefox, sondern gegen die Arroganz des Anbieters der Seite, der glaubt mit einem fetten Flash und Skip-Intro sei die Welt in Ordnung. Ich mag den FF aus verschiedenen Gründen benutzen. Die Flash-Intro verpasst die Chance mir zu zeigen, warum ein Besuch lohnt. Und Tschüss!

Zugegeben derjenige, der diese Intro-Seite, die mich zu diesem Beitrag veranlasst hat (nein einen Link gibt es nicht), ist eine Flasche, denn der Skip-Link hätte in jedem Fall also auch nach dem Start des Flashs funktionieren können.

Warum aber Anbieter überhaupt das Risiko eingehen, Besucher zu verlieren, nur weil diese nicht die Benutzervoraussetzungen an die Site erfüllen, wird mir ein Rätsel bleiben.

Ladezeiten – eine Überlebensfrage

tempa wrote this 00:13:

Webdesign in Bezug auf Dateigröße ist eine Frage von Leben und Tod.

Direktlink YouTube: Filesize matters

Überinterpretiert

tempa wrote this 00:19:
Rechte und linke Gehirnhaelfte
  • Körpersprache – Bildsprache
  • Intuition – Gefühl
  • Kreativität – Spontanität
  • Neugier – Spielen – Risiko
  • Synthese – Überblick
  • Kunst – Tanz – Musik…
  • Ganzheitlich
  • Zusammenhänge
  • Raumempfinden
  • Sprache – Lesen – Rechnen
  • Ratio – Logik
  • Regeln/Gesetze
  • Konzentration auf einen Punkt
  • Analyse – Details
  • Wissenschaft
  • Schritt für Schritt
  • Einzelheiten
  • Zeitempfinden
Sekundär-Quelle: Hispanoteca: Hirnhemisphären

Jetzt muss man sich noch vor Augen halten, dass wir alles über Kreuz sehen und dann kommt man auf upuauet.com zur der Auffassung, dass die Navigation Links sein muss, weil …

Gestaltungskonsequenzen

Nimmt man diese Erkenntnisse als Gestaltungsgrundlage, so ergeben sich daraus Notwendigkeiten für die Anordnung von Navigation, Bild und Text. Da wir in unserem Kulturkreis von links nach rechts lesen, beginnt die rechte Gehirnhälfte (linkes Auge) ihre Arbeit demnach zuerst. Da diese Gehirnhälfte für die Orientierung und Bilderkennung zuständig ist, sollten sich Navigationselemente auf der linken Seite befinden.

Da wir nicht gerade mit einem Tunnelblick (krankhaft- und altersbedingt vielleicht schon) auf eine Seite blicken, wobei man selbst bei einem Tunnelblick in den meisten Fällen die die Fläche eine Bildschirms überblicken kann, ist diese Theorie a bissl … naja!

Solange die Navigation als solche ins Gesamtbild passt, darf sie ruhig links, rechts, mitte unten und oben sein, eben so wie es passt. Aber nett, dass wir es mal wieder gewahr wurden.

Dokumentationen und Styleguides

tempa wrote this 12:44:

Manche Dinge wollen und sollen in einem begleitenden Dokument zur Website mitgeliefert sein. Bislang geschah dies in einem PDF-Dokument, der pflegeanleifung.pdf (ca. 483kb) dies hat den Vorteil, dass man diese ausgedruckt neben seine Tastatur legen kann.

Jetzt habe ich einmal eine neue Dokumentenform ausprobiert: DOMslides

(mehr …)

PHP-Magazin: Eine Website ist kein Gemälde

tempa wrote this 14:51:

„Webseiten sind keine Gemälde.“ unter diesem Motto stellt Jens Grochtdreis von F-LOG-GE seinen Artikel im PHP-Magazin und hebt darauf ab, dass das Internet ein Textmedium ist, dem im Laufe der Zeit zusätzliche Feature hinzugefügt wurden, es aber dennoch und immer noch ein Textmedium ist, das über die unterschiedlichsten Ausgabe-Medien zum Nutzer gelangt. (mehr …)

Was ich sage: Mit Inhalten fängt man User

tempa wrote this 14:18:

Gelesen … Heise (03.07.2005 16:02): „Anti-Werbung“ auf der Firmen-Homepage

„Das Internet hat sich zum echten Umsatzbringer entwickelt“, erklärt der technische Geschäftsführer Jo Kunath. Seit dem Internetpreis seien die Umsätze um etwa 30 Prozent gestiegen, als einziger deutscher Instrumentenbauer wachse Mollenhauer noch. Allein im März hatten die Seiten 60.000 Besucher. Das Unternehmen investiert einen sechsstelligen Betrag pro Jahr in den Web-Auftritt, zwei Mitarbeiterinnen kümmern sich ausschließlich um die Gestaltung der Seiten. Trotz der hohen Kosten sieht Kunath die professionelle Homepage als richtigen Weg: „Wir erreichen so viele Kunden, wie wir niemals über Postsendungen oder Werbung in Zeitschriften erreichen könnten.“

Und weil und überhaupt … ich lese es gerne, denn genau das ist es, was die Produkte auf der templaterie auszeichnet und was man mit diesen Werkzeugen zu einem unschlagbaren Preis erreichen kann, aber vielleicht sollte ich einfach die Preise anheben und kein Gesamtpaket unter 1500 Euro anbieten. 😉

Wobei die Stundensätze durchaus im üblichen Rahmen angesetzt sind und man bei individuellen Leistungen am Ende auch zwischen 1500-5000 Euro ankommt. Es ist einfach die Zeit die man braucht, bis man das Briefing abgeschlossen hat, bis man Entwürfe vorlegen kann, sich auf ein Design geeinigt hat und die Umsetzung abgeschlossen und von allen Seiten zufrieden abgesegnet wurde.

Endeckungspfad: A2o-Kommentar => Rolf Langhoff => Jan Thoeffel

Geeignet oder nicht? — Werkzeuge ausreizen, überreizen

tempa wrote this 10:16:

Langsam nimmt der Shop einer meiner Kunden Gestalt an, doch meine Vorstellungen sind nicht seine Vorstellungen. Dort wo ich der Meinung war, das Werkzeug reiche aus, scheint sich die Arbeit mit dem Werkzeug zu einem Horrortool zu entwickeln. Warum? (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