Homepage "bauen"

omaliesschen schrieb:
Für Sehschwache integrier ich eine JS Lupe.^.^
Interessante Idee, aber Sehschwache sollten wissen wie sie die Bildschirmlupe in Windows finden :-)
Viel einfacher ist es aber einen Button einzubauen, welcher die Schriftgröße erhöht.

Nach wie vor bitte ich um Quellen zu dem Thema. Subjektives Empfinden und Meinungen sind keine Basis um Dritte davon überzeugen zu können dass es aktuell von besonderer Wichtigkeit ist *penibel* sein HTML zu strukturieren.
Paar Quellen hab ich auch schon gepostet. Da niemand genau weiß wie der Google-Bot die Seite durchkämmt, kann man natürlich nur vermuten und sich auf die Erfahrungen anderer SEOs verlassen.
Google verbessert seinen Bot ständig.
Das es für Google leichter ist den relevanten Inhalt aus dem Seite rauszufiltern wenn dazu standardisierte Tags verwendet werden anstatt irgendwelcher willkürlichen Klassen liegt ja klar auf der Hand.

Natürlich kann man auch darauf verzichten und trotzdem bei Google gut gelistet sein. Nur warum sollte man darauf verzichten, wenn es nur Vorteile bringt? Nicht nur wegen SEO, auch wegen der besseren Übersicht im Quellcode.

PS: Mir kommt das Bild bekannt vor.. Schlangengrube? Das ultimative?
Ja bin auch auf Schlangengrube mit dem Avatar angemeldet, war aber schon länger nicht mehr dort.
 
Zuletzt bearbeitet: (Boar was ein schlechtes deutsch, ich sollte ins Bett)
Viel einfacher ist es aber einen Button einzubauen, welcher die Schriftgröße erhöht.
Das wäre so Web 1.0..

Schlangengrube. Glaub wir kennen uns mehr oder weniger. Glaub sogar wir haben uns dort schon gestritten. Bin ich so unerträglich oder liegt es an den anderen?^-^
 
omaliesschen schrieb:
Das wäre so Web 1.0..
Da hast du wohl recht. Es ist auch einfacher ein Dropdown-Menu zu bauen was einfach nur aufploppt, anstatt schön aufzusliden, aber hat nicht soviel style (im wahrsten Sinn des Wortes)

Schlangengrube. Glaub wir kennen uns mehr oder weniger. Glaub sogar wir haben uns dort schon gestritten. Bin ich so unerträglich oder liegt es an den anderen?^-^
Och kann auch an mir liegen. Ich steiger mich gerne mal in Themen zu stark rein und verharre dann zu sehr auf meinem Standpunkt (was ich oft später bereue :-D).
Wobei ich hier keinen Streit sehe, sondern eher eine recht interessante Diskussion.
 
WhiteShark schrieb:
Also diese Aussage kann man so nicht stehen lassen. Ein CMS erzeugt Code aus einem Template. Wenn das Template aus lauter Tabellen aufgebaut ist, würde ich das nicht als sauber bezeichnen.
Auch kann ein Template fehlerhaft sein. Und wenn man es anpassen will können genauso Idiotenfehler passieren wie ohne CMS.
Erst recht wenn man das Template komplett selbst aufbaut.
Kommt aufs CMS an. Bei Contao ist der gesamte Core seit 2.11 (2.10 hatte Macken in der Verwendung von Article, Section und Aside) fast durch die Bank weg sauberes HTML5. 3rd Party Extensions, die für 2.10/11 freigegeben sind, sind größtenteils ebenfalls komplett auf HTML5-Notation umgestellt. Du kannst eine sehr komplexe Seite zusammen klicken, ohne jemals ein Template zu modifizieren, und hast trotzdem weitestgehend semantisch sauberes HTML5-Markup.

Das einzige Problem, das ich kenne, ist die Art und Weise, wie TinyMCE hier mit Blockquote arbeitet. Zitate werden zwar je nach Auswahl als <q> oder <blockquote> angelegt, aber die Parameter sowie der Autor-Footer lassen sich nicht automatisiert erzeugen.

Auch erzeugt ein CMS keinen effektiven Code. Gerade wenn man viele Plugins nutzt, so binden die alle ihr eigenes CSS und Javascript ein. Effektiver wäre es, wenn man das alles in einer Datei zusammenpacken würde (siehe oben).
Kann man umgehen. Kommt aufs CMS an.

Bspw kann man sich auf nem Zettel skizieren wie der Aufbau der Seite sein soll und das dann Schritt für Schritt in Html/CSS umsetzen.
Nennt sich Screenraster, das macht jeder gute Designer so. Genauso wie ein guter Programmierer als erstes einen PAP (oder ähnliches) skizziert, skizziert ein Designer erst einmal die grobe Aufteilung und Struktur.

Jesterfox schrieb:
@Miyamori: wenn eine Seite wirklich semantisch korrekt ist, dann kann man sie auch ohne JavaScript benutzen (Navigation bedienbar, kein AJAX). Die per JS realisierten Extras kommen dann nur als Bonus oben drauf.
<ul><li><a href="link-1"><ul><li><a href="link-1-sub-1"></li></ul></li>
Mag semantisch korrekt sein, aber was passiert wohl bei ul ul {display:none}, und selbiges display:none erst per JS aufgehoben wird?

Gerade bei den rotzigen 20$-Templates aus Themeforrest wird laufend mit JS-basierten Navigationen gearbeitet, die am Ende ohne JS gar nicht funktionieren und dabei doch nichts besser können als eine reine CSS-Version. Schön, ohne CSS3 hat man keine hübsche Slide-In - Animation, und?

omaliesschen schrieb:
PS: Es geht nach wie vor um semantisch penibel vs. average div/span/p/h/ etc.
Schon allein die semantisch (und SEO-technisch) korrekte Verwendung der Headlines ist ein Fall für sich. Selbige macht extrem viel aus. Bei HTML4/XHTML1 werten Suchmaschinen z.B. die mehrfache Verwendung von <h1> ab.

omaliesschen schrieb:
Für Sehschwache integrier ich eine JS Lupe.^.^
...und ignorierst damit genau die Leute, für die Barrierefreiheit gedacht ist.
Semantisch korrekter HTML5-Code erleichtert es barrierefreien Lesegeräten, die Seite korrekt "darzustellen". Ein entsprechend moderner Screen Reader kann durchaus zwischen <body><header> und <article><header> unterscheiden. Das macht einen gewaltigen semantischen Unterschied.

Manche Seiten welche von google auf Seite eines gelistet sind wissen nicht einmal was html überhaupt ist...
Wenn die Seiten alt, hoch frequentiert und inhaltlich sehr wertvoll sind: warum nicht?

Du baust aber keine ALTE Seite mit einer gewaltigen Menge Stamm-Besucher. Du baust eine komplett neue Seite oder überarbeitest eine bestehende.

Edit: Das tags wie <article> sinnvoll sein können wird gar nicht bezweifelt, es ging vorhin um tags wie blockquote oder dl, dd, darauf basiert die Argumentation.
Du begreifst immer noch nicht, dass es auch Projekte gibt, an denen mehrere Menschen arbeiten. Was denkst du, wird z.B. passieren, wenn jemand anderes deine Projekte übernimmt?
Ein wirklich gutes Beispiel für eine korrekte Verwendung von <dl> (Definition List) wäre z.B. ein Glossar. Klar, du kannst ein Glossar auch als Wald voll <div> aufbauen... aber dein Nachfolger an dem Projekt kann den Code deutlich besser lesen, wenn du semantisch korrekt gearbeitet hast. Auch du selbst kannst den Kram besser bearbeiten, wenn du ihn in einem Jahr noch einmal anfassen musst.

Semantische Korrektheit verbessert die Wartbarkeit von Code und senkt das Datenvolumen. Eine Reihe von Kommentaren im HTML-Code oder monströse Klassen-Konstrukte können auch den Code strukturieren, erhöhen aber das Datenvolumen deutlich. Und auch der DOM-Parser wird nicht gerade schneller dadurch, dass er die 10 Klassen eines Divs durchwursteln muss.

Kleines praktisches Beispiel: Ich will jeden Kopfbereich eines Artikels in einem Blog mit einem grauen Hintergrund versehen:
Code:
article > header {background: grey;}

Wenn dich die Vorteile von HTML5 abseits von "juhu, ich kann Videos einbinden" nicht interessieren, dann lass es halt. Bleib bestenfalls Mittelmaß, eher unterste Schublade. Wir professionellen (im Sinne von: Wir werden dafür bezahlt) Webentwickler sind nicht dazu da, dir alles vorzukauen.

omaliesschen schrieb:
Das wäre so Web 1.0..
...und selbst wenn.
Ein einfaches +/- in der Schriftgröße, gespeichert in nem Cookie oder Local Storage, kann die Nutzererfahrung deutlich verbessern. Man muss solche Optionen nur mit Bedacht einsetzen.
 
Ich entwickle ein Forensystem. Ist es sinnvoll die einzelnen Posts wie folgt zu gliedern?:

Code:
<article id="post-n">

    <aside>Userdetails</aside>

    <section>Title</section>

    <section>Post Text</section>

    <aside>Vote Up/Down</aside>

    <footer>Postoptions (reply,quote,edit,delete)</footer>

</article>
 
Forenposts sind nach meiner Ansicht keine Artikel. Ein Artikel ist, so wie ich die Definition verstehe, ein in sich geschlossener Inhalt, der vollkommen ohne die umliegenden Inhalte existieren kann. Nimm als Analogie mal einen Zeitungsartikel:
- Ich kann den Artikel ausschneiden und dir schicken. Ich müsste dir höchstens noch Datum und Quelle des Artikels mitteilen, und du könntest seinen Inhalt komplett bewerten.
- Angenommen wir hätten einen Artikel über ein Bauprojekt, dann könnten wir jetzt je einen Abschnitt (section) über die Baupläne, den Entwicklungsstand und die Meinung der Anwohner haben.

Ein gesamter Forenthread könnte evtl. als Article durchgehen, mit jedem Post als separate Section. Sowohl den gesamten Thread-Titel als auch die Titel der einzelnen Sektionen könnte man durchaus als <h1> deklarieren, evtl. sogar innerhalb eines <header>. Logisch gesehen: Im Kopf des Postings befindet sich der Titel aka. die Überschrift des Posts. Alle Posts zusammen bilden einen in sich geschlossenen Artikel.
Deine Verwendung von Aside sieht für mich durchaus gut aus. So in etwa hab ich das Element auch verstanden.


Hier noch ein hübsches Beispiel für semantischen Text:
Du hast einen längeren Satz, aus dem du ein Wort [Korrektur:] eine Wortgruppe entfernen willst. Sicher kennst du die CSS-Auszeichnung für durchgestrichenen Text. Du könntest den korrigierten Text in ein <span> mit dem passenden CSS packen, eine Suchmaschine würde das aber nicht begreifen können. Packst du den alten Text in ein <del> und den neuen in ein <ins>, macht alles plötzlich für Mensch UND Maschine Sinn.

Übrigens haben auch <b> und <i> eine semantische Bedeutung, abseits davon, dass sie fett oder kursiv schreiben. <b> != <strong>, obwohl sie gleich aussehen.
 
Hi Darron,

die Meinungen gehen auseinander. Wenn der erste Beitrag auf allen Seiten sichtbar ist hätte man einen Artikel und mit den Posts sections.

Ich denke allerdings das auch in dem Beispiel die grobe Gliederung kaum Sinn macht da die Tags ja "eigentlich" direkt mit Content verbunden sein sollten und eine grobe Strukturierung zu viel unnötiges in sich einschließen würde.

Man muss wohl Abstriche machen wenn man zwischen Mensch und Maschine vermitteln möchte.

Interessante Tags für Suchmaschienen wären vll. <content (main)> <metacontent (sub)> <ignore> (sowas wie nofollow)

Content nach seiner Signifikanz deklarieren. Würde man einen Parser nutzen der ausschließlich den Inhalt solcher Tags ausgeben würde hätte man am Ende eine lesbare Textdatei.

Nimmt man in dem Beispiel <article> als Synonym für <content> und <metacontent> als Synonym für Section wäre jeder Post entweder metacontent ohne zuordbaren maincontent was irgendwie falsch wäre oder selbst für sich maincontent.

Ein ganzes Topic inkl. seiner gesamten Struktur als maincontent zu deklarieren wäre wie oben erwähnt fragwürdig.

Posts sind ja auch nicht zwangsläufig minderwertiger Subcontent. Im Gegenteil. Man könnte jeden Post guten Gewissens als Maincontent deklarieren was bei dem Article / Section Schema nicht so eindeutig geht da wie Du schon erwähnt hast ein aus der Struktur gerissener Post unter Umständen jeglichen Sinn verliert.

PS: Aus Sicht der Bots wäre eine Deklaration von Posts als Artikel denke ich sinnvoller. Die Zusammenhänge zwischen einzelnen Posts erschließt sich Ihnen ja nicht. Und als Mensch kann man ein Auge zudrücken.


Bei dem häufig komplexen Aufbau von Postcontainern würde ich sogar soweit gehen nur den direkten text/content container als section auszugeben:

Code:
<article id="post-n">

    <aside>Userdetails</aside>

    <div class="title-wrapper">

      <div class="inner-title">
          <section>Title</section>
      </div>

      <div class="main-post-content">
          <section>Post Text</section>
      </div>

      <footer>Pagination</footer>

   </div>

</article>


Macht der <time> tag bei dem Format Sinn? "19 hours ago"

Wir professionellen (im Sinne von: Wir werden dafür bezahlt)
Soll ich, soll ich nicht...

Wenn dich die Vorteile von HTML5 abseits von "juhu, ich kann Videos einbinden" nicht interessieren, dann lass es halt. Bleib bestenfalls Mittelmaß, eher unterste Schublade.

Wie gesagt geht es nicht um die html5 Tags.
 
Zuletzt bearbeitet:
Grundregel ist: Wenn man sich in der genauen Verwendung von <section> oder <article> nicht ganz sicher ist, dann sollte man auf <div> zurückfallen.
Aber wie üblich gilt: Besser mal nachlesen. Deine Struktur mit <article> ist tatsächlich korrekt:
http://www.w3.org/TR/2011/WD-html5-20110525/sections.html#the-article-element
...This could be a forum post, a magazine or newspaper article...
Ich hätts nicht erwartet....

Was <time> angeht: <time datetime="2013-05-25T18:00:00">...vor zehn Minuten</time> wäre durchaus korrekt. Genauso wie <time datetime="2013-05-26">morgen</time>
Nur wenn datetime leer ist muss der Inhalt von <time> einen Wert annehmen, der für datetime gültig wäre. "<time>18:11</time> Uhr" wäre ebenfalls gültig, nicht aber "<time>18:11 Uhr</time>"

time ist schwer zu beherrschen, aber unglaublich mächtig. Endlich kann man einer Suchmaschine genau sagen, z.B. wann oder wie lang ein Event ist, ohne dabei auf für Menschen sinnvolle Ausgaben wie "die ganze erste Dezemberwoche" zu verzichten.
 
Ein Forenpost ist an sich ja auch wirklich ein Artikel. Es gibt einen Autor, es gibt einen Titel, es gibt Inhalt und eine Zeitangabe.
Auch für Suchmachinen ist ein Forenpost genauso wichtig wie ein normaler Artikel. Wenn man nach Problemlösungen sucht, so landet man ja auch oft in Foren(-beiträgen).
 
Dann lasst uns folgendes Schema als valides HTML5 werten:

Code:
<article id="post-n">

  <aside>Userdetails</aside>

  <time datetime="2013-05-25T18:36:00">2 minutes ago</time>

  <div class="post-title-wrapper">

    <div class="inner-title">

      <header>Post Title</header>

    </div>

    <div class="post-text-wrapper">

      <section>Post Text</section>

    </div>
     
    <footer>Pagination</footer>

  </div>

</article>


Oder sollte man den hier als footer deklarierten Bereich als <nav> ausgeben? reply/quote/edit etc. ist ja im Grunde eine Subnavigation.. Oder denken Suchmaschinen es handelt sich bei <nav> um eine für sie wichtige Seitennavigation? Sollte <time> vor oder nach dem header positioniert werden?
 
Zuletzt bearbeitet:
Es geht ja darum dem Bot mitzuteilen dass es für ihn nicht so wichtig ist. Nav wäre "semantisch" zwar korrekt aber technisch halt falsch. Wenn dann <nav rel="nofollow">[..]:)

Bleibt die Wahl zwischen <aside> und <footer>?
Ergänzung ()

PS: Ich hoffe die obligatorische Natur meiner Fragen wird erkannt.
 
Zuletzt bearbeitet:
Man kann Bots nicht alles vorkauen, aber ein nofollow in den Links (nicht im gesamten Nav) hilft, um Eigenartigkeiten/unübliche Lastverteilung im Webserver zu vermeiden.
Der Google Bot, genau wie Bing, ist z.B. ziemlich clever was z.B. Like-Buttons angeht. Die "klicken" nicht auf allen Scheiß bzw. erkennen relativ schnell, wenn eine bestimmte Parameter-Anordnung für sie offensichtlich keine Rolle spielt. Ganz anders sind da die osteuropäischen und chinesischen Crawler wie Yandex und Baidu oder hirnlose Content-Scraper wie der Ahrefs-Bot. Die "klicken" gern 50x nacheinander auf einen Link, der eigentlich nur einen AJAX-Parameter ändert oder, noch viel hübscher, die Menge an dargestellten Objekten innerhalb einer Pagination (z.B. Suche) ändert.
 
Der TE hat wahrscheinlich folgendes erkannt:
One does not simply build a homepage!
 
LOL.

@Daaron machst du das eigentlich beruflich? Scheinst dich ja schon sehr intensiv mit der Materie beschäftigt zu haben.
 
Ja, macht er.

Aber es gibt auch andere Leute hier die das beruflich machen und trotzdem weniger auf dem Kasten haben... *sich schämt und in die Ecke stellt*
 
Daaron schrieb:
Der TE hat wahrscheinlich folgendes erkannt:
One does not simply build a homepage!

Das wäre keine Erkenntnis sondern das Gegenteil.

Wahre Erkenntnis wäre es wenn er erkannt hat "Do not talk about how and simply build a homepage".
Original Zen-Meister Zitat!

EDIT: Wenn Daaron mein WebSocket heute noch zum laufen bringt akzeptier ich seine Fachkompetenz.^-^
 
Zuletzt bearbeitet:
Ich persönlich gehöre ja der CMS-Fraktion an, heißt aber nicht, dass ich kein HTML oder PHP kann, mit CSS habe ich mich irgendwie nie gesondert auseinandergesetzt, mag daran liegen, dass ich mir HTML ursprünglich vor etwa 10 Jahren im Selbststudium mit diversen Büchern beigebracht habe, in denen von CSS nie wirklich die Rede war - von daher kann man in HTML sehr Wohl Webseiten gestalten. Allerdings sollte man, wenn man das heute anfängt durchaus CSS gleich mitlernen, der Übergang ist ja teilweise auch echt recht fließend.

Aber mal etwas BTT:
Homepage-Baukästen sind meiner Meinung nach eigentlich generell keine besonders gute Idee, da entweder teuer, oder gratis mit Werbung und sehr unflexibel (Außerdem lernt man dabei nichts). Es gibt aber brauchbares Gratis-Webhosting (z.B. hier), bei dem auch gleich MySQL Datenbanken dabei sind, die sich also somit auch für CMS Systeme eignen. Dort kann man sich dann entweder mit selbstgelerntem HTML und CSS austoben, oder man installiert ein CMS, ich empfehle generell Wordpress, ist sowohl für Anfänger gut geeignet als auch durch die Community und die Anpassbarkeit für fortgeschrittenere Projekte. Allerdings sollte man auch hier zumindest die Grundlagen von HTML und CSS (und eigentlich bei einem CMS auch PHP) kennen.
 
Zurück
Oben