Einfaches CMS für kleine Webseite

[..Heisenberg..]

Also ich benutze für alle kleines bis mittelgroßen Projekte definitiv Wordpress.

 

[Daaron]

Du solltest dir mal ein erwachsenes System angucken, eins das nicht um eine hübsche Bunti-Klicki-Oberfläche herum entworfen wurde sondern mit einer anständigen Software-Struktur im Hinterkopf.
Für Blogs ist WP gut, für alles andere ist es ein bloßer Notnagel, wenn man es mal gegen ordentliche CMS antreten lässt. Es hat halt ein hübsches und indiotensicheres Backend... das wars aber auch.

 

[..Heisenberg..]

Zum direkten Vergleich habe ich noch Contao - das finde ich aber shr unübersichtlich gestaltet und irgendwie nichtssagend :-/

Wahrscheinlich liegt es bei mir aber auch daran, dass ich mit WP angefangen habe^^

 

[Drexel]

Von der Grundsatz Diskussion nicht abschrecken lassen, die war ein wenig off topic.

Problemstellung wird aber bei allen CMS die gleiche sein: Wenn Du kein Standard Design nehmen/kaufen willst, sondern etwas individuelles möchtest ohne jemanden dafür zu bezahlen, wirst Du immer HTML/CSS Kenntnisse benötigen sowie rudimentäre Kenntnisse der Programmiersprache und der CMS Strukturen. Da wirst Du nicht herum kommen.

Die Wahl des Systems ist dann erstmal Geschmacks- und Glückssache. Bekanntere Projekte haben eine große Community und viele Ressourcen, können also immer wieder eingesetzt werden im Optimalfall ohne selbst was programmieren zu müssen..

 

[Daaron]

Zum direkten Vergleich habe ich noch Contao - das finde ich aber shr unübersichtlich gestaltet und irgendwie nichtssagend :-/

Contao ist eben von Haus aus sehr vielseitig und modular aufgebaut. Außerdem war das Ziel, ein ordentliches CMS zu schreiben.
WP hingegen... da war das primäre Ziel, eine Bunti-Klicki-Plattform für DAU-Blogger zu schreiben. Mission erfüllt, da war auch noch ne große Marktlücke.

Aber während der Contao-Code immer besser wird und die Entwickler vor radikalen Schnitten nicht zurückschrecken ist der WP-Code seit Jahren derselbe Schrott. Alter Kack im neuen Frack.

Wen kratzt denn die Backend-Optik? Muss es Bunti-Klicki sein? Es kommt nur auf Performance, SEO und den Kunden an. Und da stecken Joomla, Contao, Drupal, TYPO3,... diesen Wordpress-Kram eben locker in die Tasche, außer bei dessen Paradedisziplin: Blogging.... aber Blogger zahlen kein Geld. Deshlab ist WP so einfach: Weil Blogger alles gratis haben und allein machen wollen.

Wenn Du kein Standard Design nehmen/kaufen willst, sondern etwas individuelles möchtest ohne jemanden dafür zu bezahlen, wirst Du immer HTML/CSS Kenntnisse benötigen sowie rudimentäre Kenntnisse der Programmiersprache und der CMS Strukturen.

Das ist noch lange nicht alles. In erster Linie muss man sich im Bereich DESIGN auskennen. Man kann ein noch so guter Webentwickler sein, wenn man kein Designer mit Kunden-Blick ist, wird die Seite trotzdem die letzte Scheiße.

Genau deshalb führt ja, zumindest für Firmenauftritte, kein Weg an Agenturen vorbei.

 

[rest0ck]

Also HTML(4) und CSS kann ich ja schon etwas. Die verlinkte Seite ist ja von mir gemacht, also Design, HTML, CSS, bisschen PHP. Irgendwo haperts hin und wieder zwar, aber im großen und ganzen haut das meiste schon hin, auch wenn ich so Dinge wie ehm .. Navbar bleibt immer oben, obwohl sie anfangs dort nicht war, (noch) nicht kann. Das wäre aber meistens JS, oder?

Denke auch das ich einen Blick dafür habe, ob etwas stimmig aussieht und auch Photoshop & Illustrator Erfahrungen habe ich (wenn auch mäßig). Muss es aber trotzdem alles umsetzen können P: ich weiß mittlerweile gar nicht mehr so recht, wo ich anfangen oder weiter machen soll..eieiei

/e Glaube irgendwie eine Kalibrierung meines Monitors wär mal nicht verkehrt. Weiß jetzt nicht, ob der auf der Arbeit es richtig darstellt, oder meiner zuhause <.< .. sind diese Spyder-Teile mehrmals verwendbar und "ausleihbar"?

 

[Daaron]

Navbar bleibt immer oben, obwohl sie anfangs dort nicht war, (noch) nicht kann. Das wäre aber meistens JS, oder?

in reinem CSS eher hässlich, weil du damit nur Navi oben anpinnen kannst, die immer ganz oben klebt. JS lohnt sich und ist mit etwas Hirnschmalz auch nicht schwer.

 

[rest0ck]

Dachte ich mir fast, ist aber auch erst mal nebensächlich
Hab bisschen weiter getestet, kam die Tage aber noch nicht zu all zu viel - abgesehen von Videos schauen und Tutorials lesen.

Was haltet ihr eigentlich von Bootstrap?

Oh und (OT) kann mir jemand ein Programm nennen, dass Bilder automatisch auf eine bestimmte größe zuschneidet, unabhängig vom Seitenverhätlnis? Also so thumbnails, die alle gleich groß sind, aber nichts verzerrt wird, ihr wisst schon

Grüße

 

[Daaron]

Ich persönlich halte nix von Frameworks wie Bootstrap, die nehmen einem zu viel Kontrolle, außerdem hat man dann schnell viel redundanten Code. Die Dinger enthalten immer sonstwie umfangreiche CSS Resets. Da werden dann die ul/ol - Markierungen zurückgesetzt und, wenn man mal tatsächlich eine Liste anlegt, vor allem wenn es eine tiefere Gliederung per <ol> ist, darf man die Resets resetten... auch <p> wird gern resettet... Wer bitte verwendet Absätze ohne Abstände? Ernsthaft?

Was den Bilderzuschnitt angeht:
Für die Linux Shell, bei installiertem ImageMagick, geht sowas:
find ./ -name '*.jpg' -exec mogrify -resize '1200x1200>' {} \

 

[rest0ck]

Hm okay, das klingt jetzt nicht so toll. Dann doch lieber selber alles schreiben

Und das verzerrt nichts? Ist das unter Windows auch anwendbar? ist es auch möglich zu sagen, dass ein neues Bild erstellt wird mit größe x*y im ordner thumb (ausgehend vom Bild) mit dem namen [name]_thumb.jpg?

 

[Daaron]

Das wird unter Windows so eher nix, der Einzeiler verlässt sich unter anderem auf "find"...

Außerdem macht der Befehl ein klein wenig was anderes, als du erwartest. Er macht keinen sturen Resize auf 1200x1200 (brauch ich meist so), sondern er passt das Bild in dieses Format ein. Das Endergebnis kann dann durchaus auch 1200x800 sein, oder 800x1200. Bei Erhalt der Aspect Ratio ist da einfach keine Kante länger als die angegebenen Werte.

Du hast verschiedene Optionen:
- verwende ein Bildbearbeitungsprogramm, z.B. GIMP, für ne Stapelverarbeitung
- such dir n leichtgewichtiges Stapelverarbeitungstool für sowas
- schreib dir n kleines PHP-Script, dass auf ImageMagick (imagick) basiert

 

[rest0ck]

Noch mal zurück zum Thema, .. bzw fast.
Hab gerade versucht eine Struktur zu erstellen und bin gescheitert

Bzw erst habe ich es einfach nur von oben nach unten aufgereiht, was auch kein Problem war. Doch dann dachte ich mir eine (optionale) Sidebar wäre gut bzw ein Menü links, statt oben. Und da hänge ich nun.

http://rest0ck.canis.uberspace.de/test/

Die höhe der Leiste links soll sich an die Höhe rechts anpassen. Rechts das alles ist in "wrapper2", links ist "sidebar".

Hab jetzt Ewigkeiten rumprobiert und verschiedene Seiten durchgelesen. Glaub da stimmt irgendwas generell nicht an dem Aufbau :/

(Das selbe sollte auch bei den Spalten sein (columnx_x) .. die passen sich derzeit auch nicht an).

Grüße

 

[Daaron]

Kurz und knapp: Mit Float gleiche Höhen in den Spalten hinzubekommen ist ein Krampf. Es ist zwar machbar (siehe z.B. YAML-Framework), aber es artet immer aus.
Du könntest auch mal schauen, ob es direkt mit nem Holy Grail - Layout funktioniert. HG ist durch seine optimierte HTML-Struktur SEO-technisch überlegen. Relevanter Content (der mittlere Block) steht weiter oben im Quelltext als die nebensächlichen Dinge (Seitenspalten).

Wenn dein Projekt es zulässt (also: Zielgruppe = Leute mit IE10+ oder leidlich aktuellen Chrome/FF/Opera-Versionen)... scheiß auf Floats, verwende das Flexible Box Layout Model, auch bekannt als "display:flex;". Da hast du automatisch deine gleich hohen Spalten, außerdem kannst du schlankeren HTML-Code als bei obigen Holy Grail schreiben, aber trotzdem einen HG umsetzen. Noch besser: du kannst die Darstellungsreihenfolge der Boxen extrem leicht ändern.

Und noch ein Tip: Du hast eh einen HTML5-DOCTYPE, mach was draus. SChreib nicht <div id="header">, schreib <header id="header">. <div> ist für alles, was man nicht genauer spezifizieren kann. Den Seitenkopf oder -fuß kannst du spezifizieren.

 

[rest0ck]

Danke, ich schau mir das Layout mal genauer an.
Also eine direkte Zielgruppe gibt es (noch) nicht, bin nur am üben. Allerdings hat ja der Vater eines Freundes schon was angedeutet und ich denke nicht, dass er + sein Chor zu der Zielgruppe IE10+ gehören

Das klingt gut, hab ich mich noch nie mit befasst. Die Positionierung von CSS ist eh etwas für den Eimer, finde ich. Wieso kann man nicht einfach sagen #navbar: position("topleft", #header, "bottomleft", 0, 3) oder so .. also ..ausgehend von einer anderen ID. Oder height: getHeight(#header); .. War das einfach unüberlegt, oder hat das andere Gründe?

Ja, hast Recht. Kenne die Tags erst seit kurzem und hatte mir vorgenommen sie zu nutzen, es hier aber vergessen - danke

/e Hab einfach mal meinen Kram (ohne sidebar) in die mittlerweile Spalte eingefügt und es hat auf anhieb funktioniert .. Wollte es aber ein wenig "variable" gestalten, heißt wenn ich keine sidebar nutze, ist die breite auf 100% (innerhalb wrapper) - bin mir grad unsicher, ob das mit dem Layout möglich ist.

/e2 Hm ne, moment, so wirklich funktioniert es nicht wie gewünscht, weil es ja im Endeffekt nur den Hintergrund betrifft. Naja, muss noch was rumtesten. Am Ende läuft die Leiste rechts eben nicht mit sondern ist nur sichtbar, wo auch Inhalt ist ..

 

[Daaron]

...ich denke nicht, dass er + sein Chor zu der Zielgruppe IE10+ gehören

Wieso? Alles ab Windows 7 hat, per Autoupdate, IE11. Bei Vista weiß ichs grad nicht, aber Vista hat einen lächerlichen Marktanteil.
Wenn du also nicht gerade mit XP-Fanatikern redest... und selbst die nutzen FF oder Chrome, statt des veralteten IE8.

Die wirkliche Zielgruppe, bei der Sachen wie display:flex; nicht gehen, sind Unternehmen mit extrem verknöcherten Strukturen und verkalkten Entscheidungsträgern, bei denen jedes Software-Update erst 6 Monate beraten werden muss.... und natürlich der Öffentliche Dienst, die Kalkleisten schlechthin.

Wieso kann man nicht einfach sagen #navbar: position("topleft", #header, "bottomleft", 0, 3) oder so .. also ..ausgehend von einer anderen ID. Oder height: getHeight(#header); .. War das einfach unüberlegt, oder hat das andere Gründe?

Der DOM tickt einfach nicht so. zumal "topleft" nicht gültig ist.
Und außerdem: Verwende NIE NIE NIE absolute Positionierung, außer du weißt, wozu du sie in dieser Situation unbedingt brauchst. Absolute Positionierung ist der schnellste Weg zu grauen Haaren, sobald sich etwas im Content, an der Schriftart oder an der Bildschirmgröße ändert.

/e Hab einfach mal meinen Kram (ohne sidebar) in die mittlerweile Spalte eingefügt und es hat auf anhieb funktioniert .. Wollte es aber ein wenig "variable" gestalten, heißt wenn ich keine sidebar nutze, ist die breite auf 100% (innerhalb wrapper) - bin mir grad unsicher, ob das mit dem Layout möglich ist.

Du musst hier schon eine Entscheidung treffen, wie die Seite aussehen soll. In guten CMS, z.B. Contao, kannst du auch jeder Seite ein eigenes Layout zuweisen. Wenn die Seite keine Sidebar braucht, dann legst du eben ein Layout ohne Sidebar an.

Am Ende läuft die Leiste rechts eben nicht mit sondern ist nur sichtbar, wo auch Inhalt ist ..

Korrektes Verhalten von Floats. Genau deshalb sprach ich von einem Krampf.

Was du auch angucken kannst (Support ab IE8, glaub ich): display:table; display:table-row;display:table-cell;
Aber nicht übermütig verwenden.

 

[rest0ck]

Wieso? Alles ab Windows 7 hat, per Autoupdate, IE11. Bei Vista weiß ichs grad nicht, aber Vista hat einen lächerlichen Marktanteil.
Wenn du also nicht gerade mit XP-Fanatikern redest... und selbst die nutzen FF oder Chrome, statt des veralteten IE8.

Die wirkliche Zielgruppe, bei der Sachen wie display:flex; nicht gehen, sind Unternehmen mit extrem verknöcherten Strukturen und verkalkten Entscheidungsträgern, bei denen jedes Software-Update erst 6 Monate beraten werden muss.... und natürlich der Öffentliche Dienst, die Kalkleisten schlechthin.

Oh okay, erinnert mich an die Firma, für die ich arbeite. Mit dem großen T!

Hab damit mal grad rum gespielt, ist wirklich genial. Wie schnell z.B. dieses Layout funktioniert hat: http://rest0ck.canis.uberspace.de/test2/
Ich hoffe wirklich sehr, dass ich damit arbeiten "darf", hab ja noch keinen Auftrag o.ä., spiele nur rum.

Der DOM tickt einfach nicht so. zumal "topleft" nicht gültig ist.
Und außerdem: Verwende NIE NIE NIE absolute Positionierung, außer du weißt, wozu du sie in dieser Situation unbedingt brauchst. Absolute Positionierung ist der schnellste Weg zu grauen Haaren, sobald sich etwas im Content, an der Schriftart oder an der Bildschirmgröße ändert.

Na, ich glaube du hast mich missverstanden. Der "code" da oben war sehr fiktiv.
Ich meinte z.b. sowas:

Ich positioniere einen <header> oben mit margin:auto; und breite 900px.
Und dann sage ich <nav>: Packe obelinks, packe <header> untenlinks, x nicht bewegen, y 3 nach unten. Verstanden? Also ich positioniere anhand von Elementen, die bereits positioniert sind.
So ging das immer in lua und so würde ich persönlich es mit wünschen, weil es schon sehr praktisch ist. Wobei flexbox auch genial ist

Du musst hier schon eine Entscheidung treffen, wie die Seite aussehen soll. In guten CMS, z.B. Contao, kannst du auch jeder Seite ein eigenes Layout zuweisen. Wenn die Seite keine Sidebar braucht, dann legst du eben ein Layout ohne Sidebar an.

Macht Sinn, .. ich dachte ich bastel mir jetzt ein Layout zusammen, das ich dann theoretisch für mehrere Homepages verwenden kann, weil ich sage "wenn Position sidebar gesetzt ist, dann erscheint sie erst, ansonsten ist content 100% breit".

Korrektes Verhalten von Floats. Genau deshalb sprach ich von einem Krampf.

Was du auch angucken kannst (Support ab IE8, glaub ich): display:table; display:table-row;display:table-cell;
Aber nicht übermütig verwenden.

Bin ich schon öfters drauf gestoßen und hab es hin und wieder "getestet", allerdings ist nie was passiert. Hab vermutlich was falsch gemacht, .. wieso soll man das nicht zu viel verwenden?

Grüße

/e
Ist nur etwas komisch, wenn man 2 "Flex-Boxen" ineinander hat. Also z.B. den mittleren Bereich in 2 Zeilen aufteilen. Dann funktioniert flex-basis nicht mehr und ich muss mit fester Breite arbeiten. Aber naja, gibt schlimmeres.

 

[Daaron]

Hab damit mal grad rum gespielt, ist wirklich genial. Wie schnell z.B. dieses Layout funktioniert hat: http://rest0ck.canis.uberspace.de/test2/

Das lässt sich SEO-technisch noch deutlich verbessern. Schreib deine Elemente als "Main-Content" -> "Links" -> "Rechts" im HTML-Code (also Holy Grail). Suchmaschinen werten Inhalte, die weiter oben im HTML stehen, höher, und dir ist ja dein Content auch wichtiger als deine Navigation.
Danach verwendest du einfach https://developer.mozilla.org/de/docs/Web/CSS/order um die Darstellungsreihenfolge zu korrigieren.

Oh, und Vorsicht mit <article> und <aside>. <article> ist ein in sich geschlossener Inhalt, der losgelöst vom Rest der Seite existieren könnte. Auf den gesamten Content-Bereich trifft das eher selten zu. Meist besteht der Content-Bereich aus mehreren <article>s. <aside> sind "Nebeninformationen". Steht das Ding außerhalb von <article> oder <section>, bezieht es sich auf die gesamte Seite. Eine Info-Box über den Seitenbetreiber wäre z.B. ein <aside>. Der Sinn des Elements ist nicht, eine Spalte damit zu kennzeichnen. Wenn du hingegen <aside> innerhalb eines <article> hast, dann definiert dieses <aside> Zusatzinformationen zum Artikel, ohne die der Artikel aber auch lebensfähig wäre.
Beispiel: Ein Artikel, der ein Immobilienobjekt beschreibt. In ihm stehen, in verschiedenen <section>s aufgeteilt, ne Beschreibung, die Adresse, der Preis,... und in einem <aside> könnte eine Anfahrtskizze (z.B. Google Maps) liegen, oder ein Formular, über dass du direkt dein Interesse bekunden kannst.

Also ich positioniere anhand von Elementen, die bereits positioniert sind.

Klappt so nicht, dafür muss man den DOM passend verschachteln. Liegt schlicht daran, wie die Selektoren funktionieren und CSS definiert ist.

Macht Sinn, .. ich dachte ich bastel mir jetzt ein Layout zusammen, das ich dann theoretisch für mehrere Homepages verwenden kann, weil ich sage "wenn Position sidebar gesetzt ist, dann erscheint sie erst, ansonsten ist content 100% breit".

Könnte mit Flex sogar machbar sein, indem du dem Content n min-width (meinetwegen von 66%) setzt. Aber sicher bin ich da nicht. Zum Wohle sauberer Lösungen solltest du einfach verschiedene Layouts für verschiedene Probleme verwenden.

Bin ich schon öfters drauf gestoßen und hab es hin und wieder "getestet", allerdings ist nie was passiert. Hab vermutlich was falsch gemacht, .. wieso soll man das nicht zu viel verwenden?

Irgendwie halte ich display:table; immer irgendwie für schlechten Stil... ist aber wohl eherne Marotte von mir. Das riecht immer so nach <table> als LAyout-Element... Einen echten Nachteil hat display:table aber: Das Verhalten von margin und padding ändert sich komplett. Die Elemente verhalten sich dann wirklich wie Tabellenzellen.

Und die Verwendung ist eigentlich recht einfach.

<div style="display:table-row;">
<div style="display:table-cell;">z1</div>
<div style="display:table-cell;">z2</div>
<div style="display:table-cell;">z3</div>
</div>

Tabellenartige Zeile mit 3 Zellen... aber semantisch eben keine Tabelle.

Wirklich wichtig wird diese Möglichkeit erst dann, wenn du einem echten <tr> oder <td> seine Row/Cell-Eigenschaften mal mutwillig wegnehmen willst. Das wirst du spätestens dann machen, wenn du eine Tabelle in einem Responsive Design darstellen willst und dein Ziel-Display viel schmaler ist als die Tabelle. Dazu noch :before/:after und die HTML5 data-XYZ - Attribute, und du baust tolle flexible Tabellen.

 

[rest0ck]

Das lässt sich SEO-technisch noch deutlich verbessern. Schreib deine Elemente als "Main-Content" -> "Links" -> "Rechts" im HTML-Code (also Holy Grail). Suchmaschinen werten Inhalte, die weiter oben im HTML stehen, höher, und dir ist ja dein Content auch wichtiger als deine Navigation.
Danach verwendest du einfach https://developer.mozilla.org/de/docs/Web/CSS/order um die Darstellungsreihenfolge zu korrigieren.

Oh, und Vorsicht mit <article> und <aside>. <article> ist ein in sich geschlossener Inhalt, der losgelöst vom Rest der Seite existieren könnte. Auf den gesamten Content-Bereich trifft das eher selten zu. Meist besteht der Content-Bereich aus mehreren <article>s. <aside> sind "Nebeninformationen". Steht das Ding außerhalb von <article> oder <section>, bezieht es sich auf die gesamte Seite. Eine Info-Box über den Seitenbetreiber wäre z.B. ein <aside>. Der Sinn des Elements ist nicht, eine Spalte damit zu kennzeichnen. Wenn du hingegen <aside> innerhalb eines <article> hast, dann definiert dieses <aside> Zusatzinformationen zum Artikel, ohne die der Artikel aber auch lebensfähig wäre.
Beispiel: Ein Artikel, der ein Immobilienobjekt beschreibt. In ihm stehen, in verschiedenen <section>s aufgeteilt, ne Beschreibung, die Adresse, der Preis,... und in einem <aside> könnte eine Anfahrtskizze (z.B. Google Maps) liegen, oder ein Formular, über dass du direkt dein Interesse bekunden kannst.

Okay, danke. Dachte immer es wäre so rum nicht korrekt, ehrlich gesagt. Also es muss immer Header -> Nav -> Inhalt -> Footer kommen, damit, ..ich sag mal Browser für Blinde erst oben den Kram vorlesen?

Hab es jetzt mal geändert und auch den section Kram etwas verändert, weiß aber nicht ob es so richtig ist. Wirklich verstanden habe ich es nicht:
http://rest0ck.canis.uberspace.de/test3/

Da ist auch mein Problem mit den 2 Flexboxen zu sehen. Alles zwischen Header und Footer ist eine Flexbox, nebeneinander positioniert. Und in der mitte ist eine weitere Flexbox, in der oben die Kästen sind und der Inhalt darunter. Vielleicht hab ich auch einfach gerade eine Denkblockade, aber so fliegt der mittlere Bereich ein wenig aus dem Flex-Verhalten der Äußeren raus, weil ich nicht mehr einfach sagen kann flex-basis 60% oder ähnlich, ich muss eine feste Breite angeben - so kann das ggf auch "raus ragen", wegen Margin/padding.

Irgendwie halte ich display:table; immer irgendwie für schlechten Stil... ist aber wohl eherne Marotte von mir. Das riecht immer so nach <table> als LAyout-Element... Einen echten Nachteil hat display:table aber: Das Verhalten von margin und padding ändert sich komplett. Die Elemente verhalten sich dann wirklich wie Tabellenzellen.

Und die Verwendung ist eigentlich recht einfach.
Code

:
<div style="display:table-row;">
<div style="display:table-cell;">z1</div>
<div style="display:table-cell;">z2</div>
<div style="display:table-cell;">z3</div>
</div>
Tabellenartige Zeile mit 3 Zellen... aber semantisch eben keine Tabelle.

Wirklich wichtig wird diese Möglichkeit erst dann, wenn du einem echten <tr> oder <td> seine Row/Cell-Eigenschaften mal mutwillig wegnehmen willst. Das wirst du spätestens dann machen, wenn du eine Tabelle in einem Responsive Design darstellen willst und dein Ziel-Display viel schmaler ist als die Tabelle. Dazu noch :before/:after und die HTML5 data-XYZ - Attribute, und du baust tolle flexible Tabellen.[/QUOTE]

Hm nagut, sieht gar nicht so kompliziert aus ;P danke dafür. Im Notfalls greife ich ggf mal darauf zurück, versuch es aber erst mal lieber alles ohne zu lösen :)

Grüße