Webdesign: Quellcode für Dummies

[Maja]

Argumentation gegen Content Management Systeme
Als ich die neue Webseite des Tintenzirkels geplant habe, war ja eine Sache sofort klar: Es soll endlich ein CMS werden, bei dem man die Inhalte besonders bequem einpflegen kann - am besten eines, wo die Tintenzirkler selbst ihre Texte hochladen können, und alles klappt wie von selbst... Also, Typo3 runtergeladen, zusätzliche Datenbank erworben, schnell installiert, und los geht's. Das war vor zwei Wochen.

Und was haben wir jetzt? Immer noch kein CMS, und ich gehe noch weiter: Der Tintenzirkel bekommt auch keines. Warum der Sinneswandel?

1. Ich wußte genau, was ich wollte und wie die fertige Seite aussehen sollte. Ich wußte genau, wie das mit HTML, CSS und PHP zu bewerkstelligen sein sollte. Nur wie ich diese Vorstellungen einem CMS klarmachen sollte - keine Ahnung. In der Zeit, die ich gebraucht hätte, um mich in das sehr komplexe Typo3 einzuarbeiten, hätte ich die neue Zirkelseite bestimmt fünfmal coden können.  Und hätte immer noch nicht gewußt,  wie ich Typo3 die Bibliothek erklären sollte.

2. CMS entfremden den Anwender vom Code
Je mehr uns die Programme aus der Hand nehmen, desto mehr fürchten wir uns vor der Arbeit, die wir nicht mehr machen müssen. Für Webdesigner, die mit CMS oder Baukstensystemen arbeiten, gerät der Quellcode zu einem fürchterlichen Monstrum. Bloß die Finger davon lassen - das ist nur was für das CMS... Was man da alles falsch und kaputt machen kann...

3. CMS fördern den Einheitsbrei
Viele Leute, die eine Webseite haben wollen, installieren sich eine Blogsoftware (oder lassen installieren, oder mieten Webspace, auf dem ein Blog vorinstalliert ist), laden sich eine Skin runter und pflegen ihre Inhalte ein. Statt der persönlichen Webseite ist es nun Wordpress. Statt der Gruppenwebseite ist es nun Joomla. Alle Wordpresseiten sehen irgendwie gleich aus. Alle Joomlaseiten ebenfalls. Ich bin gegen die Joomlafizierung des Webs, und für mehr Individualität.

4. Die neue Tintenzirkelseite ist genauso einfach zu pflegen wie ein CMS - und ich halte doch alle Fäden in der Hand. Das besondere an der neuen Webseite ist eine stricte Dreiteilung: Design - Style - Inhalt.


Aufbau der neuen Tintenzirkelseite
Das Design ist ein ganz schlichtes HTML-Gerüst, erhältlich in zwei Ausführungen: Mit einer Navigation für die Standardseiten, mit doppelter für Autorensteckbriefe und die Bibliothek. 
Das Design sagt nur:
- wie diese Seite heißt
- wo die Stylesheets zu finden sind (für alle Seiten gleich)
- welche Bereiche (DIVs) auf die Seite kommen (Banner, Tintenklecks, Erste Navi, Zweite Navi, Breites Inhaltsfeld, Schmales Inhaltsfeld stehen zur Auswahl).

Das Besondere ist: In den DIVs steht kein Inhalt. Nur eine Zeile PHP-Code, die sagt, wo der Inhalt zu finden ist. Für die Navigation hatte ich das schon bei der alten Seite so gemacht, jetzt werden auch alle Biblithekstexte und Autorensteckbriefe so eingebunden. Der PHP-Befehl sagt sinngemäß: Schnapp dir den Inhalt dieser oder jener Datei und füge ihn hier ein. Alle Seiten sind exakt gleich aufgebaut, greifen nur auf unterschiedliche Inhalte zu - darum bleibt das Design immer einheitlich. Es ist, ähnlich wie bei einem CMS, ein Template, nur habe ich es nach meiner Vorstellung selbst geschrieben.

Der dritte der dieses Dreigestirns ist das Stylesheet. Es gibt nicht nur an, welche Schriftart und welche Farben in welchem Bereich zu verwenden sind, sondern auch, welche Bilder hereingeladen werden (wichtig beim Banner), und wo diese DIVs sich überhaupt befinden und wie groß sie sind. Es ist also eigentlich ganz simpel:


Die Magie des Quellcodes
Man hat ein großes Zimmer. Das ist die Webseite. Man verteilt darin ein paar Pappkartons. Sie sind auf den ersten Blick leer und sehen nach nichts aus. Das sind die Divs.
Die Tür geht auf. Herein kommt der Raumausstatter - das Stylesheet. Er nimmt die Kartons und schiebt die dahin, wo sie ihm gefallen und ihm sinnvoll vorkommen - das Banner nach oben, die Navigation nach links. Er könnte auch alles umgekehrt machen. Dem Zimmer ist das egal. Es bekommt nicht viel davon mit - solange noch alle Kartons da sind, kann es ihm recht sein. Und beiden, Zimmer und Raumausstatter, ist egal, was in den Kartons ist.

In den Kartons ist die Magie. Das ist der Inhalt, der über PHP abgerufen und eingefügt wird. Wie bei einem Zauberer macht man eine Kiste auf, und es ist die nächste Kiste drin.
Die erste Kiste heißt "DIV". Die hatten wir ja schon erklärt, das ist der Bereich.
Die nächste Kiste heißt "P". Das bedeutet: Absatz. Aller Text steht in Absätzen, selbst wenn der nur eine Zeile lang ist. Der Absatz kann verschiedene Formen haben, ganz wie man sie ja auch in der Textverarbeitung einstellt: Rechts Links Mitte Block. Wie in der Textverarbeitung kann man auch noch den Zeilenabstand angeben oder einen Einzug - das hat alles der Raumausstatter so festgelegt, und der Inhalt hält sich dran.
Aber bevor der Text losgeht, ist noch eine Kiste in der Kiste. Diese heißt "Span". Ich übersetze das mal mit "Abschnitt". Der Raumausstatter legt für den Abschnitt fest, welche Schriftart verwendet werden soll. Wie groß sie ist, welche Farbe sie hat - also wie das, was wir in der Textverarbeitung unter "Format: Schrift" festlegen.

Meistens fangen P und SPAN gemeinsam an und hören gemeinsam auf, aber man *kann* mehrere Spans in ein P packen. Und mehrere Ps in ein Div. Man muß nur die Kisten immer wieder anständig zumachen - deswegen sage ich ja auch Kiste und nicht Möbiusband. Also immer so codieren:

Code Auswählen Erweitern


<DIV> macht den Bereich auf
<P> macht den Absatz auf
<SPAN> macht den Abschnitt auf
Jetzt kommt irgendwelcher vergüngliche Inhalt.
</SPAN> macht den Abschnitt zu
</P> macht den Absatz zu
</DIV> macht den Bereich zu.

Man darf also nicht erst den Absatz und dann den Abschnitt zumachen - sonst müßte man ja durch einen geschlossenen Kistendeckel an der innenliegenden Schachtel hantieren! Aber man sieht: Nicht weiter schwer. Wirklich nicht.

Und so ist nicht nur der Tintenzirkel aufgebaut. So kann man jede beliebige Webseite der Welt aufbauen. Alles was man wissen muß ist: Was für Bereiche brauche ich? Wo packe ich sie hin? Was tue ich rein?
Und um das zu tun, reicht ein stinknormaler Texteditor. Man braucht keine Spezialprogrammen. Man braucht nur die Disziplin, die Kisten in der richtigen Reihenfolge auf und zu zu machen. Wenn Interesse besteht, werde ich hier einen kleinen Workshop für Quellcodedesign abhalten.

[Feuertraum]

3. CMS fördern den Einheitsbrei
Viele Leute, die eine Webseite haben wollen, installieren sich eine Blogsoftware (oder lassen installieren, oder mieten Webspace, auf dem ein Blog vorinstalliert ist), laden sich eine Skin runter und pflegen ihre Inhalte ein. Statt der persönlichen Webseite ist es nun Wordpress. Statt der Gruppenwebseite ist es nun Joomla. Alle Wordpresseiten sehen irgendwie gleich aus. Alle Joomlaseiten ebenfalls. Ich bin gegen die Joomlafizierung des Webs, und für mehr Individualität.

Hallo Maja!

Ich selber begrüße Ihre Entscheidung, einen Gegenpol zum Einheitsbrei zu schaffen, auch wenn ich befürchte, dass gleich ein paar eingefleischte Webtechniker (mir hat mal jemand erklärt, dass Leute, die eine Webseite designen, Webdesigner sind, während Leute, die den Quellcode dazu schreiben, Webtechniker sind) gleich entsetzt aufschreien: "Aber das geht doch nicht, das ist schließlich nicht standardkonform." (ist zumindest mir so passiert)

Zwar kenne ich mich nicht mit  Joomla, Typo3 und CMS aus (letzteres soll ich unbedingt lernen - Originalzitat des Menschen, der mir den Unterschied zwischen Webdesigner und Webtechniker lehrte), und eigentlich bin ich auch an einem individuellen Forum interessiert, das jenseits des Mainstreams ist, aber ich wurde vorgewarnt, dass diese sehr häufig Angriffe von Hackern ausgesetzt sein soll.
Das wäre für mich ein Grund, dem ganzen eher mit Vorsicht zu begegnen.
Dennoch: wenn Sie da evtl. Tipps und Tricks oder gar Buchempfehlungen hätten, wäre ich nicht traurig drum...

So kann man jede beliebige Webseite der Welt aufbauen. Alles was man wissen muß ist: Was für Bereiche brauche ich? Wo packe ich sie hin? Was tue ich rein?
Und um das zu tun, reicht ein stinknormaler Texteditor. Man braucht keine Spezialprogrammen. Man braucht nur die Disziplin, die Kisten in der richtigen Reihenfolge auf und zu zu machen. Wenn Interesse besteht, werde ich hier einen kleinen Workshop für Quellcodedesign abhalten.

Ich weiß, ich mache mir mit meinem Kommentar wieder eine Menge Feinde. Dennoch bitte ich Sie, das Folgende nicht als Angriff gegen Ihre Person anzusehen:

Sie hatten einen Kursus für uns Tintenzirkler angefangen, wie man eine Autorenhomepage zurechtbastelt.
Ein Kapitel - danach kam nichts mehr.

Sie wollten die Telefonseelsorge für Autoren umsetzen - eine tolle Idee. Aber auch irgendwo versandet, obwohl von nicht wenigen User Interesse bestand, diese zu nutzen und auch einige User sich bereit erklärten, einmal die Woche den Telefondienst zu übernehmen.

Deswegen meine (unbescheidene) Bitte, diese beiden Projekte umzusetzen und dann die nächsten Kurse anzubieten.

LG

Feuertraum

(der jetzt wahrscheinlich von vielen Usern  bekommen wird)

[Rei]

Wenn Interesse besteht, werde ich hier einen kleinen Workshop für Quellcodedesign abhalten.

*meld* Ich als Oberdummie bin für alles dankbar, was mich von Buddy losbringt... und meine Seite individueller macht...

[Maja]

@Feuertraum
Ich hatte schon geplant, den Quellcodeworkshop direkt als Bestandteil des Autorenseitenworkshops zu machen und damit diese vorgeblich abgelegte Idee wieder aufleben zu lassen. Aber selbst mit der ersten Lektion eines danach stillgelegten Workshops kann man sich schon Grundlagen aneignen, die man sonst nicht hätte. Ist also alles nicht vergebens.

Das Problem mit dem alten Workshop war, ich wußte nicht so recht, wo und wie ich den Wsebdesignteil aufziehen und angehen sollte. Jetzt habe ich eine klarere Vorstellung davon. Und ich werde nicht mehr ein Template liefern nach dem Motto "Und das paßt ihr jetzt euren Bedürfnissen an", wie ich es ursprünglich geplant hatte. Man lernt deutlich mehr und besser, wenn man sich sein Template gleich selbst schreibt und dann keinen Kram drin hat, den man nicht braucht. Also genau umgekehrt zu Yaml.

Übrigens code ich jetzt ganz standardkonform in HTML 4.01 Strict (wenn schon, denn schon). Jede einzelne Seite des Tintenzirkels ist validiert. Was richtig Spaß macht - dieses Erfolgserlebnis, wenn alles grün wird, kennen wir ja vom Nanowrimo.

[Feuertraum]

Ich hatte schon geplant, den Quellcodeworkshop direkt als Bestandteil des Autorenseitenworkshops zu machen und damit diese vorgeblich abgelegte Idee wieder aufleben zu lassen. Aber selbst mit der ersten Lektion eines danach stillgelegten Workshops kann man sich schon Grundlagen aneignen, die man sonst nicht hätte. Ist also alles nicht vergebens.

Das Problem mit dem alten Workshop war, ich wußte nicht so recht, wo und wie ich den Wsebdesignteil aufziehen und angehen sollte. Jetzt habe ich eine klarere Vorstellung davon. Und ich werde nicht mehr ein Template liefern nach dem Motto "Und das paßt ihr jetzt euren Bedürfnissen an", wie ich es ursprünglich geplant hatte. Man lernt deutlich mehr und besser, wenn man sich sein Template gleich selbst schreibt und dann keinen Kram drin hat, den man nicht braucht. Also genau umgekehrt zu Yaml.

Okay.
Ist eine schöne Idee!
Auf das Buch zu YAML warte ich allerdings noch immer *Muß Bücherei mal auf die Füße treten*

Übrigens code ich jetzt ganz standardkonform in HTML 4.01 Strict (wenn schon, denn schon). Jede einzelne Seite des Tintenzirkels ist validiert. Was richtig Spaß macht - dieses Erfolgserlebnis, wenn alles grün wird, kennen wir ja vom Nanowrimo.

Ich befürchte, da reden wir gerade aneinander vorbei: Ich meinte jetzt nicht den Quellcode.
Ich möchte meine Startseite ja so gestalten, dass sie auf 4 Spalten besteht, auf der in Reihe 1 4, in Reihe 2 4, in Reihe 3 3 und in Reihe 4 ebenfalls 3 Bilder. Unter jedem der Bilder wollte ich dann einen Text(Link), der zur jeweilgen Seite führt.
Und da hieß es dann: Nee, nicht standardkonform, eine Navi muß entweder links oder rechts untereinander oder oben nebeneinander sein. Eine solche Form der Navigation sei nicht Webseitenkonform.

Mag sein, aber wie ich schon oben schrieb: man muß sich nicht unbedingt dem Einheitsbrei anpassen...

LG

Feuertraum

[Maja]

So, einige Reaktionen auf den Steckbrief bestätigen mich in dem Wunsch, diesen Workshop zu machen.

Stellt euch vor, ihr kennt jemanden, der ist ein Autor. Er hat tolle Geschichten, die er per Hand aufschreibt. Nun hätte er seine Geschichten auch gerne im Computer, weil kein Verlag mehr handschriftliche Manuskripte akzeptiert. Das Problem ist: Der Gute traut sich nicht, einen PC anzufassen, weil er gehört hat, daß das sehr kompliziert ist und man soviel damit falsch machen kann. Ihr wollt ihm einen Gefallen tun. Was macht ihr?

a) ihr nehmt seine Texte und tippt sie selbst in Word ab und überreicht ihm am Ende eine CD, wo alles drauf ist, in der Hoffnung, daß er sie nicht für einen Kaffeeuntersetzer hält. Was er natürlich tut, denn er hat ja von PCs nicht die leiseste Ahnung

b1) ihr stellt ihm einen PC hin mit einer Spracherkennungssoftware. Jetzt muß er nur noch den Rechner einschalten und der Software seine Geschichte vorlesen, damit die daraus ein schönes Manuksript macht. Dumm wie sie ist, macht die Software aber eine Menge Fehler in den Text, weil sie die Hälfte falsch verstanden hat
b2) ihr scannt seine Manuskripte mit einer Handschrifterkennung ein. Ergebnis wie bei b1.

c) ihr zuckt die Schultern und sagt "Dein Pech, dann hast du eben kein richtiges Manusktript"

d) Ihr stellt ihm einen einfachen Rechner hin und fangt an, ihm die Grundsätze von Arbeit mit der Textverarbeitung zu erklären - daß man nicht an jedem Zeilenende auf die Returntaste hauen muß, und daß man Dokumente abspeichert, bevor man sie schließt - dann ermutigt ihr ihn, mit dem Programm ein wenig rumzuspielen - und irgendwann hat er tatsächlich ein brauchbares Manuskript.

Und während mir hier jeder zustimmt, daß Antwort d die einzige zumutbare Antwort ist, geht ihr immer noch hin und überlaßt euer Webdesign einem WYSIWIG-Programm, daß krude Fehler macht, von denen ihr selbst keine Ahnung habt, wie ihr sie beheben sollt?
Ich lache erst. Und dann lade ich euch in einen Kursus ein, der sich über die nächsten Wochen bis Monate hinziehen wird. Lernen dauert länger als WYSIWYG. Aber es hält auch deutlich länger. Wie mit dem armen Mann und dem Fisch.

[Feuertraum]

Um mal meine Neugierde zu befriedigen: wird es "vorerst" nur HTML und dann CSS oder HTML in Verbindung mit CSS geben.

Neugierige Grüße

Feuertraum

[Maja]

Es gibt nur HTML in Verbindung mit CSS. Wir werden regelkonform coden. Es soll eine Webseite dabei rauskommen. HTML ohne CSS zu lernen macht keinen Sinn. Die Seite soll schließlich auch nach etwas aussehen und nicht nach pappkartons in einem kahlen Zimmer.

[Moni]

Um jetzt noch mal eine Lanze für die armen CMS zu brechen: es ist mitnichten so, daß man sich vom Quellcode entfernt und Codeungetüme schafft, die man nicht mehr durchschauen kann. Ich habe mich jetzt einwenig in TYPO3 eingearbeitet und sehe ja in der Praxis, daß man sehr wohl mit Quellcode arbeitet. Die Templates wollen schließlich erstellt werden und das tut TPYO3 nicht von alleine. Ebenso muß man CSS handhaben können, ansonsten funzt es nicht.
Ein CMS ist kein WYSIWYG Editor, ohne HTML und CSS Kentnisse kann man direkt einpacken.
Bitte nicht alle CMS über einen Kamm scheren. Es gibt viele Leute, die bereits vorinstallierte Templates verwenden (wie bei Blogs) und daher gleichen sich solche Seiten natürlich auch. Wenn man aber kreativ ist und seine Seite von Grund auf codet, sieht es eben nicht nach Einheitsbrei aus. Ein bißchen Mühe ist eben auch bei einem CMS dabei. Der Vorteil ist einfach: je größer ein Webprojekt ist, desto leichter lässt es sich in einem CMS pflegen, da man die Inhalte separat vom Quellcode eingeben kann.

[gbwolf]

Da ich gerade daran arbeite, mir für Wordpress ein Template zu bauen, das mehr nach "Homepage" und weniger nach "Blog" aussieht, kann ich bestätigen, dass es eine nicht gerade leichte Aufgabe ist, an der ich mehr oder minder verzweifle.
Ein kleiner Kurs in Sachen Coden käme mir da sehr gelegen. Ich mache das eigentlich gerne, aber ich bin zu unkonzentriert, um es ganz alleine zu lernen.

Den Komfort des Wordpress-Backends und die Sicherheitsupdates möchte ich allerdings nicht missen. Eine komplett selbsterstellte Seite wäre mir zu umständlich zu bedienen.

[Feuertraum]

Nur mal als Vorschlag/Idee/Wunsch: Können Maja und Moni NACH den Kursen HTML und CSS evtl. auch Kurse für CMS und PHP/MySQL anbieten ?

LG

Feuertraum

[Volker]

Ein CMS ist kein WYSIWYG Editor, ohne HTML und CSS Kentnisse kann man direkt einpacken.
[...]
Der Vorteil ist einfach: je größer ein Webprojekt ist, desto leichter lässt es sich in einem CMS pflegen, da man die Inhalte separat vom Quellcode eingeben kann.

Für alle "unsere" Seiten (abgesehen vom Forum) haben Kirstin und ich bisher ausschließlich eigene CMSe gebaut. Insbesondere für Neuigkeiten ist es einfacher, in einer Admin-Oberfläche nur Datum, Titel, Kategorie, Abstract und Text einzutragen und den Rest ein CMS machen zu lassen, als eine neue Seite mit der Meldung zu verfassen und entsprechende Einträge in allen Archiv- und Index-Seiten zu editieren.

Denn das ist die eigentliche Aufgabe eines CMS: Layout und Inhalt zu trennen sowie Inhalt zu verwalten (z.B. nur die neuesten 10 News anzuzeigen und alle älteren nur im Archiv).

[Maja]

@Feuertraum
Meine PHP-Kenntnisse gebe ich ebenso gerne wie schnell weiter - sie beschränken sich auf eine Funktion ("include"), auf der die Tintenzirkelseite aufbaut, und die ich auch gerne anderen beibringe - und die Grundkenntnis, wie der Code auszusehen hat, damit ich schadlos zwischenhernavigieren kann.
Mit MySQL ist es ähnlich: Da bewege ich mich inzwischen routiniert direkt inmitten der Datenbank (bzw. dem Verwaltungstool PHPMyAdmin), ohne was kaputtzumachen, und schreibe vergnügt in und an den Tabellen rum - bin aber selbst außerstande, eine Abfrage zu schreiben oder die Interaktion von PHP und MySQL zu steuern.
Ich bringe aber gerne anderen bei, vorhandene Skripte zu implementieren und dem eigenen Bedarf anzupassen - das habe ich bei Wiki und Namensdatenbank gelernt.

Ich bin ja prinzipiell kein PHP-Feind. Aber es gibt mir zuviele Webseiten, die weder Blog noch Forum sind, und die auf Wordpress oder Burning Board aufbauen. Oder Joomla.

[Moni]

Nur mal als Vorschlag/Idee/Wunsch: Können Maja und Moni NACH den Kursen HTML und CSS evtl. auch Kurse für CMS und PHP/MySQL anbieten ?

LG

Feuertraum

Ich kann kein PHP/MYSQL und man kann keinen pauschalen Kurs CMS anbieten, da die verschiedenen Systeme unterschiedlich aufgebaut sind. Das einzige, was ich anbieten kann, ist im von mir bereits eröffenten Thread bezüglich Erfahrungsaustausch TYPO3 alles reinzu packen, was mir im Laufe der Einarbeitung so entgegengekommen ist. Ansonsten ist TYPO3 aber z.B: viel zu komplex, um es mal eben so zu erklären. Ich habe mir auch ein Buch gekauft, um was zum nachschlagen zu haben, ohne ist extremst schwierig.