marctrix: Jetzt zufrieden?

Beitrag lesen

Hej Meowsalot,

Insofern verstehe ich nicht, was du mit "mega geil" meinst. Vermutlich dass er ansatzweise Page Builder-Fähigkeiten bietet?!?

ich finde durch den neuen Editor hat man noch mehr Möglichkeiten seinen Beitrag oder seine Seite zu bearbeiten

Wenn du mit „man“ weiße, sehende Männer unter 30 meinst (extra überspitzt), dann hast du sicher recht. 😉

Angesichts der Tatsache, dass bereits heute andere Editoren verwendet werden können, wird das vielleicht auch erst bei manchem den Blick auf weitere Möglichkeiten öffnen und zu einer weit größeren Zersplitterung als nur "Classic" oder "Gutenberg" führen.

Ich persönlich liebe den Elementor Editor. Allerdings finde ich schade dass im Quelltext überall Elementor steht. Ich mache ungern Werbung für andere wenn ich für ein Produkt bezahle. Elementor ist der beste Page Builder den es derzeit gibt in meinen Augen. Auch was Updates angeht, kommen fast Wöchentlich Neuerungen und mit über 1.000.000 aktiven Installationen zählt er zu den ganz großen.

Wie viele nutzen denn CKEdit und TinyMCE (derzeitger Standard-Editor)? — Wenn etwas gut ist, weil es viel verwendet wird, sollte klar sein, wer der beste ist. Muss man nur auf die Anzahl der Installationen schauen.

Daher ist Windows auch das beste Betriebssystem für Desktop-Rechner und Android das beste für mobile Geräte. Sicherheit eingeschlossen. Logisch. 😉

Nicht gleich böse werden. Ich scherze nur und nicht über dich. Ich will nur sagen, dass häufige Vewrwendung ein Indiz für Qualität sein kann, aber eben nicht.

Nicht, dass Wiondwos 10 ein schlechtes OS wäre…

Übrigens bin ich ein Gegener davon, Redakteuren so viele und weitreichende Eingriffe in die Gestaltung von Webseiten zu geben. Die verstehen oft nicht einmal das Konzept hinter einem Design, geschweige denn, dass sie in der Lage oder gewillt wären, das konsistent zu erweitern. Anwesende ausgenommen und Ausnahmen bestätigen ja die Regel. 😉

Deshalb auch die fertigen Blöcke die ich versuche zu erstellen ;) Ein Redakteur klickt auf Teaser, kann seine Daten eintragen und klickt auf abschicken. Schon wird ein Design eingefügt welches zum Design passt.

OK. Da der Block einfach ist, ist auch dei Bedienung einfach. Aber Dein Beispiel ist noch nicht vollständig. Das HTML sollte IMHO so (oder so ähnlich) aussehen:


<section class="beat-teaser">
	<header>
    <h2><a href="#">Pre-Sale Event</a></h2>
		<p class="reason-to-read"><time datetime="2018-09-06">6. September</time> von <time>18:00</time> bis <time>21:00</time></p>
	</header>
	<p>Wir laden euch herzlich zu einem exklusiven Pre-Shopping Event ein. Exklusiv wird die erste Taschen Kollektion des Newcomer Labels Craft Hunter präsentiert.</p><p>In Zusammenarbeit mit kolumbianischen Craftsman & Craftswoman entstehen aussergewöhnliche farbenfrohe Taschen in traditioneller Handarbeit.</p>
  <p><a href="#">Zum artikel Pre-sale-event</a></p>
</section>

#Erläuterung

##beat-teaser

Gibt dir einen Bereich (Namensraum wenn du so willst), den so hoffentlich niemand anders für WP-Themes nutzt.

verlinkte Überschrift

Als Nutzer erwartet man einfach, dass die sich anklicken lässt. Ebenso wie mögliche Bilder.

sprechender weiterlesen-Link

Wäre doof für Blinde, wenn Sie den Anfang des Artikels wiederfinden müssten, um zum vollständigen text zu gelangen.

#Fragen

Das führt mich zu folgenden Fragen:

##Wem reicht die Möglichkeiten?

Du bietest an eine Überschrift anzugeben, einen Aufmerksamkeitshascher und einen einzigen(?) Absatz für Text.

Sonst kann man nichts?

Der Nutzer hat es dadurch einfach. Er muss nur zwei Dinge tun: diese Felder ausfüllen (auch eines für den Link-Text und den Link selber) und die korrekte Überschriftenebene angeben (aber wie soll er die rausfinden?

Was mich wieder zu der Frage von Jen Simmons führt: welches Problem löst du?

Diese Frage muss man sich immer stellen, bevor man die erste Zeile Code schreibt. ebenfalls vor der ersten Zeile Code kommen Überlegungen zum Lösungskonzept: was brauche ich an Bedienelementen für den Redakteur und wie kommt er an die Informationen, die er mir geben muss (wie z.B. die anzugebende Überschrift). Oder lässt sich so etwas automatisch ermitteln (parsen nach der letzten Überschrift im DOM).

Und wenn du das fertig hast, überlege noch mal, wie war das Problem, das du lösen wolltest und ist Deine Vorstellung von der Box dazu geeignet, das Problem zu lösen.

Wie gesagt: bis jetzt haben wir noch keine Zeile Code. Warum? Weil es u.U. keine Lösung für das Problem gibt oder zumindest wir keine gefunden haben. Z.B. weil universell verwendbar (Teil der Aufgabenstellung) nicht umsetzbar ist.

Wenn wir theoretisch wissen, wie wir das Problem lösen können, kann man versuchen, das in die Praxis umzusetzen. Auch dazu ein Konzept erstellen, nicht einfach loshämmern auf der Tastatur:

HTML-Aufbau (ergibt sich aus dem Konzept praktisch zwangsläufig), CSS-Aufbau (ergibt sich wiederum daraus meist zwangsläufig).

Sonst bist du irgendwann miteendrin und musst wieder ganz von vorne anfangen, weil du in die gebackenen Muffins die Blaubeeren nicht reinkriegst.

Ein durchdachtes Konzept erspart unnötige Arbeit. Ich kenne den Gutenberg wie gesgat nciht gut genug um zu wissen, ob sich dem Nutzer überhaupt eine Auswahl für Überschriftenebenen anbieten lässt und bin kein Programmierer, weshalb ich nicht weiß, ob sich die letzte Überschriftenebene im DOM finden lässt.

Ich würde an diesem Punkt einen Programmierer ins Team holen, der mir diese Fragen beantworten kann und wenn er die positiv beantwortet ihn mit der Umsetzung der von mir vorgegebenen HTML-Struktur beauftragen.

Erst wenn ich alles zusammen habe (Konzept, Team (Designerin nicht vergessen)) schreibe ich den Code.

Es sei denn ich spinne mal rum und versuche ein zugängliches JavaScript-freies-armes-Menü zu erstellen. Das ist bis jetzt nciht fertig und wer weiß, ob es irgendwann wie gewünscht funktioniert.

Aber das ist Freizeit und Experiment und zum lernen und austesten von Möglichkeiten, also auch Weiterbildung mit Spaß. Man sieht daran auch schön, dass es nicht reicht, eine Idee zu haben und einfach drauf los zu hämmern. Das habe ich nämlich getan und es ist noch immer zu keinem glücklichen Ende gekommen.

Insofern liegen meinen Empfehlungen ganz konkrete Erfahrungen zugrunde. Lern ruhig aus meinen Fehlern. Dafür mache ich sie ja öffentlich. 😉

Übrigens: könnte das folgende Sinn machen?


<details class="beat-teaser">
	<summary>
    <h2>Pre-Sale Event
		<span class="reason-to-read"><time datetime="2018-09-06">6. September</time> von
      <time>18:00</time> bis <time>21:00</time>
    </span>
   </h2>
	</summary>
	<p>Wir laden euch herzlich zu einem exklusiven Pre-Shopping Event ein. Exklusiv wird die erste Taschen Kollektion des Newcomer Labels Craft Hunter präsentiert.</p><p>In Zusammenarbeit mit kolumbianischen Craftsman & Craftswoman entstehen aussergewöhnliche farbenfrohe Taschen in traditioneller Handarbeit.</p>
  <p><a href="#">Zum artikel Pre-sale-event</a></p>
</details>

Weiß jetzt zwar, dass Überschriften ohne was anderes im summary sein dürfen, aber nicht, ob die Überschrift Kinder haben darf. Hmm - die Spec sagt nichts über Kindeskinder, müsste also gehen. Wichtig ist, dass die keine interaktiven Elemente enthalten dürfen, daher hier auch kein Link in der Überschrift.

Auf einem großen Bildschirm könnten die Boxen auch standardmäßig alle offen sein!

Marc

0 116

Frage zur Gestaltung

Meowsalot
  • css
  1. 0
    Robert B.
    • html
    1. 0
      Meowsalot
      1. 0
        beatovich
        1. 0
          Meowsalot
          1. 0
            Matthias Apsel
            1. 0
              Meowsalot
          2. 0
            beatovich
        2. 0
          Meowsalot
      2. 0
        Robert B.
        1. 0
          Meowsalot
          1. 0
            Gunnar Bittersmann
            1. 0
              Meowsalot
              1. 2
                Gunnar Bittersmann
                1. 0
                  Meowsalot
                  1. 2
                    marctrix
                    1. 0
                      Meowsalot
                      1. 0
                        Robert B.
                      2. 1
                        marctrix
                      3. 0
                        beatovich
                        1. 1
                          marctrix
                          1. 0
                            beatovich
                            1. 0

                              Jetzt mit einem realen Beispiel

                              Meowsalot
                              1. 1
                                beatovich
                                1. 0
                                  Meowsalot
                                  1. 0
                                    beatovich
                                  2. 2
                                    Robert B.
                                    • meinung
                                2. 0
                                  marctrix
                              2. 1
                                marctrix
                                1. 0
                                  beatovich
                                  1. 0
                                    marctrix
                                2. 0
                                  Meowsalot
                                  1. 2
                                    Robert B.
                                  2. 2
                                    marctrix
                                  3. 0
                                    marctrix
                            2. 1
                              Gunnar Bittersmann
                              • responsive design
                              • tools
          2. 0
            Robert B.
            1. 1
              Gunnar Bittersmann
              1. 0
                beatovich
              2. 0
                Robert B.
                1. 0
                  Gunnar Bittersmann
  2. 0
    Gunnar Bittersmann
    1. 0
      Meowsalot
      1. 0
        Gunnar Bittersmann
        1. 0
          Meowsalot
          1. 0
            marctrix
            1. 0
              Meowsalot
              1. 0
                marctrix
                1. 0
                  Meowsalot
                  1. 0
                    marctrix
                    1. 0
                      Gunnar Bittersmann
                      • html
                      1. 0
                        Meowsalot
                        1. 2
                          Gunnar Bittersmann
                          • menschelei
                        2. 0
                          marctrix
                          1. 0
                            Gunnar Bittersmann
                          2. 0
                            Meowsalot
                            1. 0
                              Henry
                              1. 0
                                marctrix
                            2. 0
                              marctrix
                              • menschelei
                              1. 0
                                Meowsalot
                                1. 0
                                  marctrix
                                2. 0
                                  Gunnar Bittersmann
                      2. 1
                        marctrix
                        1. 0
                          Gunnar Bittersmann
                          1. 0
                            marctrix
            2. 0
              marctrix
              • wordpress
              1. 0
                Meowsalot
          2. 0
            Gunnar Bittersmann
            • design
            1. 0
              Meowsalot
              1. 2
                Gunnar Bittersmann
              2. 0
                Robert B.
                1. 0
                  Meowsalot
                  1. 1
                    Gunnar Bittersmann
                  2. 1
                    Robert B.
                  3. 0
                    marctrix
              3. 0
                beatovich
                1. 0
                  marctrix
      2. 1
        Gunnar Bittersmann
        1. 0
          Meowsalot
          1. 0
            Gunnar Bittersmann
            1. 0
              Meowsalot
          2. 0
            marctrix
            1. 0
              Gunnar Bittersmann
              1. 0
                marctrix
                1. 0
                  Gunnar Bittersmann
                  1. 0
                    marctrix
                    • barrierefreiheit
                    • css
                    • html
  3. 1
    marctrix
    • html
  4. 0

    Passt das jetzt besser?

    Meowsalot
    1. 1
      marctrix
    2. 0
      marctrix
      1. 0
        Meowsalot
        1. 0
          Robert B.
  5. 0

    Jetzt zufrieden?

    Meowsalot
    1. 0
      marctrix
      • html
      1. 0
        Meowsalot
        1. 2
          marctrix
          1. 0
            Meowsalot
            1. 2
              marctrix
              1. 0
                Meowsalot
                1. 0
                  marctrix
                  1. 0
                    Gunnar Bittersmann
                    1. 0
                      marctrix
                      1. 0
                        Meowsalot
          2. 0
            Meowsalot
            1. 1
              marctrix
              1. 1
                marctrix
                • css
        2. 0
          Robert B.
          • menschelei
    2. 0
      Robert B.
      • menschelei
      • sprache
      1. 2
        beatovich
        1. 0
          Gunnar Bittersmann
          • zitat
          • zu diesem forum
          1. 1
            Gunnar Bittersmann
            1. 0
              marctrix
          2. 0
            marctrix
    3. 2
      Gunnar Bittersmann
    4. 1
      Gunnar Bittersmann
      • html
  6. 0
    marctrix