Matthias Apsel: Wiki-Beispiele in Iframes

problematische Seite

Hallo alle,

auf der Mitgliederversammlung wurde auch darüber gesprochen, die Beispiele als Iframe direkt in der Seite anzuzeigen und ein Umschalten zwischen Quelltext- und Ergebnisansicht zu ermöglichen. Außerdem soll es natürlich auch weiterhin die Möglichkeit des „frickelns“ geben.

Ich hätte dazu gern ein paar Gestaltungsideen. Wie sollen die UI-Elemente, die das Umschalten zwischen den Ansichten sowie das frickeln ermöglichen, bezeichnet werden? Wo sollen sie hin? Was passiert mit den bisherigen Links zur (vollständigen) Quelltextansicht? Soll überhaupt umgeschaltet werden oder können auch iframe und Quelltext gemeinsam dargestellt werden?

Wie es bisher aussieht, kann man z.B. an der Seite margin sehen. Im Test-Wiki habe ich einfach mal die entsprechenden Iframes eingebaut.

Am liebsten wären mir die Ideen als Bildschirmskizze.

Bis demnächst
Matthias

--
Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
  1. problematische Seite

    Servus!

    Im Test-Wiki habe ich einfach mal die entsprechenden Iframes eingebaut.

    Ich find's eigentlich gut. Hast du schon mit @Felix Riesterer als dem Erfinder des Frickl kommuniziert? Wsl. muss man aber den Code für viele Beispiele ändern / weiter vereinfachen.

    Ich hätte dazu gern ein paar Gestaltungsideen. Wie sollen die UI-Elemente, die das Umschalten zwischen den Ansichten sowie das frickeln ermöglichen, bezeichnet werden?

    • Der Text „Beispiel“ kann m.E. eigentlich weg.
    • ein toggle-Button mit „Ansicht“ / „Quelltext“ (bei Ansicht öffnet Rechtsklick weiterhin in ein neues Fenster)

    Wo sollen sie hin?

    wie bisher oben und unten.

    Was passiert mit den bisherigen Links zur (vollständigen) Quelltextansicht?

    Das ist etwas, was ich bisher nie benutzt habe. wenn, dann habe ich das Beispiel mit Rechtsklick geöffnet und hatte es dann in die vollständige Seite eingebunden und dort im Quelltext geschaut.

    Soll überhaupt umgeschaltet werden oder können auch iframe und Quelltext gemeinsam dargestellt werden?

    Ich bin mir nicht sicher, ob auf dem Desktop eine 50% / 50% -Aufteilung beider Ansichten sinnvoll wäre. Nur wenige Beispiele kommen mit ca. 30em Platz aus.

    Herzliche Grüße

    Matthias Scharwies

    --
    Es gibt viel zu tun: ToDo-Liste
    1. problematische Seite

      Hallo Matthias Scharwies,

      Was passiert mit den bisherigen Links zur (vollständigen) Quelltextansicht? Das ist etwas, was ich bisher nie benutzt habe.

      Der Link steht dir auch nicht zur Verfügung. Bei dir heißt er „bearbeiten …“ Nicht-Admins erhalten dies

      Soll überhaupt umgeschaltet werden oder können auch iframe und Quelltext gemeinsam dargestellt werden?

      Ich bin mir nicht sicher, ob auf dem Desktop eine 50% / 50% -Aufteilung beider Ansichten sinnvoll wäre. Nur wenige Beispiele kommen mit ca. 30em Platz aus.

      Nebeneinander fällt wohl sowieso aus.

      Bis demnächst
      Matthias

      --
      Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
      1. problematische Seite

        Servus!

        Was passiert mit den bisherigen Links zur (vollständigen) Quelltextansicht? Das ist etwas, was ich bisher nie benutzt habe.

        Der Link steht dir auch nicht zur Verfügung. Bei dir heißt er „bearbeiten …“ Nicht-Admins erhalten dies

        Und wo ist da der Unterschied zum Quelltext, den der Browser beim Rechtsklick und "Seitenquelltext anzeigen" anzeigt? Das kann m.E. nach weg.

        Herzliche Grüße

        Matthias Scharwies

        --
        Es gibt viel zu tun: ToDo-Liste
        1. problematische Seite

          Hallo Matthias Scharwies,

          Und wo ist da der Unterschied zum Quelltext,

          Ganz genau keiner.

          den der Browser beim Rechtsklick und "Seitenquelltext anzeigen" anzeigt? Das kann m.E. nach weg.

          Zielgruppenorientiert denken! Möglicherweise wissen viele nicht, dass es diese Möglichkeit gibt. Der Link schadet ja auf keinen Fall. Er sollte bleiben.

          Bis demnächst
          Matthias

          --
          Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
    2. problematische Seite

      Lieber Matthias,

      Hast du schon mit @Felix Riesterer als dem Erfinder des Frickl kommuniziert?

      so wichtig bin ich nicht, als dass man da irgendwelche ehrenrührigen Rücksichten nehmen müsste. Für das Wiki wurde ein passender jsFiddle-artiger Mechanismus gewünscht und ich habe mich daran gemacht, das zu basteln. Wenn es sich nicht bewährt (hat), bin ich der erste, der da "nachbessern!" schreit. Nur werde ich zur Zeit nicht nachbessern können, da ich sehr mit anderer Arbeit eingedeckt bin (aufmerksame Leser werden es an meinen Fragen hier erkennen).

      Wsl. muss man aber den Code für viele Beispiele ändern / weiter vereinfachen.

      Der Frickl-Mechanismus tut nichts anderes, als eine spezielle URL in einen iFrame zu laden. Das könnte man auch mit einer anderen Vorlage (unter Umgehung des JavaScript-Gedöns für das Frickl). Die Beispiele haben aber die "Grundlayout"-CSS-Datei dabei, was deren Darstellung beeinflusst. Eventuell will man das nicht. Der Frickl-Mechanismus ist so gestrickt, dass die Referenz auf das Grundlayout "kaputt" ist und damit der CSS-Code nicht geladen wird.

      Liebe Grüße,

      Felix Riesterer.

    3. problematische Seite

      Aloha ;)

      Ich find's eigentlich gut. Hast du schon mit @Felix Riesterer als dem Erfinder des Frickl kommuniziert? Wsl. muss man aber den Code für viele Beispiele ändern / weiter vereinfachen.

      Wie ich an der MV schon mehrfach sagte: Es geht bei dieser Frage überhaupt nicht um Frickl (das so läuft wie es ist), sondern lediglich um die Art und Weise der Einbindung, also die Neuerstellung / Veränderung einer Vorlage, die das unveränderte Frickl an der vorgesehenen Stelle lädt.

      Grüße,

      RIDER

      --
      Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
      # Facebook # Twitter # Steam # YouTube # Self-Wiki # Selfcode: sh:) fo:) ch:| rl:) br:^ n4:? ie:% mo:| va:) js:) de:> zu:} fl:( ss:) ls:[
  2. problematische Seite

    Hallo Matthias,

    mir ist gerade aufgefallen, das bei der Frickl-Ansicht mit dem iPhone das Scrollen nicht funktioniert. Es scrollt nur die Seite unter dem Frickl-Block.

    Bei den Beispielen würde mir eine Ansicht im eigenen Fenster, also ein einfacher Link neben der Frickl-Ansicht reichen.

    Gruß
    Jürgen

    1. problematische Seite

      Hallo JürgenB,

      mir ist gerade aufgefallen, das bei der Frickl-Ansicht mit dem iPhone das Scrollen nicht funktioniert. Es scrollt nur die Seite unter dem Frickl-Block.

      Das ist auch am Desktop der Fall, //@Felix Riesterer

      Bei den Beispielen würde mir eine Ansicht im eigenen Fenster, also ein einfacher Link neben der Frickl-Ansicht reichen.

      Das kann man bisher mit einem Rechtsklick -> in neuem Fenster öffnen realisieren. Aber das weiß vielleicht auch nicht jeder.

      Also keine Iframes in der Artikelansicht?

      Bis demnächst
      Matthias

      --
      Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
      1. problematische Seite

        Hallo Matthias,

        Bei den Beispielen würde mir eine Ansicht im eigenen Fenster, also ein einfacher Link neben der Frickl-Ansicht reichen.

        Das kann man bisher mit einem Rechtsklick -> in neuem Fenster öffnen realisieren. Aber das weiß vielleicht auch nicht jeder.

        Also keine Iframes in der Artikelansicht?

        man kann ja in unserem WIKI in den Beispielen angeben, wie die Beispiele angezeigt werden können. Hier könnte es ja zur Auswahl

        • (im eigenen Fenster) Ansehen
        • Frickl-Ansicht
        • Viewport-Emulator
        • (immer im )I-Frame

        geben. Man würde also dem Autor die Entscheidung überlassen, wie die Beispiele angezeigt werden können.

        Gruß
        Jürgen

        1. problematische Seite

          Hallo JürgenB,

          man kann ja in unserem WIKI in den Beispielen angeben, wie die Beispiele angezeigt werden können. Hier könnte es ja zur Auswahl

          • (im eigenen Fenster) Ansehen
          • Frickl-Ansicht
          • Viewport-Emulator
          • (immer im )I-Frame

          geben. Man würde also dem Autor die Entscheidung überlassen, wie die Beispiele angezeigt werden können.

          Das wäre erst der zweite Schritt. Bei der MV ging es um die Darstellung in den Beispielboxen.

          Alternativ-Text

          (https://wiki.selfhtml.org/wiki/Margin#margin_.28Au.C3.9Fenabstand_allgemein.29)

          Alternativ-Text

          (http://wiki-test.selfhtml.org/wiki/Margin#margin_.28Au.C3.9Fenabstand_allgemein.29)

          Bis demnächst
          Matthias

          --
          Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
        2. problematische Seite

          Servus!

          man kann ja in unserem WIKI in den Beispielen angeben, wie die Beispiele angezeigt werden können. Hier könnte es ja zur Auswahl

          • (im eigenen Fenster) Ansehen
          • Frickl-Ansicht
          • Viewport-Emulator
          • (immer im )I-Frame

          geben. Man würde also dem Autor die Entscheidung überlassen, wie die Beispiele angezeigt werden können.

          Das ist m.E wieder typisch Selfhtml: 4 (oder 8 oder 16) Möglichkeiten, die ein Benutzer (in einem 3-5zeiligen Menü → siehe hier) auswählen kann, anstatt sich auf 2 wichtige zu beschränken und das Ganze dann aus einem Guss aussehen zu lassen.

          Auch hier würde das KISS-Prinzip gut passen.

          Herzliche Grüße

          Matthias Scharwies

          --
          Es gibt viel zu tun: ToDo-Liste
          1. problematische Seite

            Hallo Matthias,

            es geht nicht darum, was der Leser des Wikiartikels wählen kann, sondern um das, was der Autor des Beispiels anbieten kann. Denn der weiß am besten, ob ein Beispiel im IFrame reicht oder ob Frickln sinnvoll ist.

            Gruß
            Jürgen

  3. problematische Seite

    Hallo Matthias Apsel,

    Am liebsten wären mir die Ideen als Bildschirmskizze.

    @Performer hat eine Umbenennung sowie das Verwenden von Reitern vorgeschlagen.

    Alternativ-Text

    Bis demnächst
    Matthias

    --
    Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
    1. problematische Seite

      Hallo Matthias Apsel,

      @Performer hat eine Umbenennung sowie das Verwenden von Reitern vorgeschlagen.

      Oder so?

      Alternativ-Text

      Alternativ-Text

      Bis demnächst
      Matthias

      --
      Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
      1. problematische Seite

        Aloha ;)

        Hallo Matthias Apsel,

        @Performer hat eine Umbenennung sowie das Verwenden von Reitern vorgeschlagen.

        Oder so?

        So. Perfekt, ich hatte schon Angst noch selber Bildschirmzeichnerei betreiben zu müssen :D

        Ich bin ziemlich sicher, dass das auch an der MV 2015 so unser Konsens war, das mit Tabs oder Gleichwertigem zu lösen; leider haben wir das damals nicht ausführlich im Protokoll festgehalten.

        Vorteil dieser Variante ist, dass das Ganze so kompakt wie gewohnt daherkommt (statt wie im Testwiki-Beispiel die Seite optisch aufzublähen), dass aber trotzdem eine stärkere Integration in die Seite stattfindet.

        Ich finds gut so - und auch definitiv besser als die anderen diskutierten Vorschläge.

        Jürgens (durchaus sinnvolle) Idee, dem Autor nach Kontext die Möglichkeit zu lassen, was vorrangig angezeigt wird, lässt sich hier auch gut einbauen; man kann die Vorlage sicher so gestalten, dass sich der vorausgewählte Tab durch den Autor einstellen lässt - mit dem Beispiel-Tab als Standard-Vorauswahl. Genauso könnte auch der Frickl-Tab zu- und wegschaltbar sein, damit Beispiele, in denen frickln keinen Sinn ergibt, das auf Wunsch des Autors auch nicht anbieten.

        Grüße,

        RIDER

        --
        Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
        # Facebook # Twitter # Steam # YouTube # Self-Wiki # Selfcode: sh:) fo:) ch:| rl:) br:^ n4:? ie:% mo:| va:) js:) de:> zu:} fl:( ss:) ls:[
        1. problematische Seite

          Hallo Camping_RIDER,

          Vorteil dieser Variante ist, dass das Ganze so kompakt wie gewohnt daherkommt (statt wie im Testwiki-Beispiel die Seite optisch aufzublähen), dass aber trotzdem eine stärkere Integration in die Seite stattfindet.

          Im Testwiki sind nur deshalb Quelltext und Iframe zu sehen, weil ich noch keine Lust hatte, den Umschalter zu basteln ;-)

          Jürgens (durchaus sinnvolle) Idee, dem Autor nach Kontext die Möglichkeit zu lassen, was vorrangig angezeigt wird, lässt sich hier auch gut einbauen; man kann die Vorlage sicher so gestalten, dass sich der vorausgewählte Tab durch den Autor einstellen lässt - mit dem Beispiel-Tab als Standard-Vorauswahl.

          Das ginge ja nur für angemeldete User und erforderte einen nicht unerheblichen Eingriff in die Mediawiki-Installation (du musst die gewünschte Eigenschaft irgendwo speichern). Gefühlt sind weniger als ein Promille im Wiki als angemeldete unterwegs.

          Genauso könnte auch der Frickl-Tab zu- und wegschaltbar sein, damit Beispiele, in denen frickln keinen Sinn ergibt, das auf Wunsch des Autors auch nicht anbieten.

          Das ist eine gute Idee und ließe sich sicher in der Vorlage umsetzen.

          Bis demnächst
          Matthias

          --
          Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
          1. problematische Seite

            Aloha ;)

            Jürgens (durchaus sinnvolle) Idee, dem Autor nach Kontext die Möglichkeit zu lassen, was vorrangig angezeigt wird, lässt sich hier auch gut einbauen; man kann die Vorlage sicher so gestalten, dass sich der vorausgewählte Tab durch den Autor einstellen lässt - mit dem Beispiel-Tab als Standard-Vorauswahl.

            Das ginge ja nur für angemeldete User und erforderte einen nicht unerheblichen Eingriff in die Mediawiki-Installation (du musst die gewünschte Eigenschaft irgendwo speichern). Gefühlt sind weniger als ein Promille im Wiki als angemeldete unterwegs.

            Du sitzt demselben Verständnisfehler auf wie der andere Matthias :D

            Ich hab oben mal fett markiert und paraphrasiere nochmal: Es wäre ganz gut, wenn der Autor der Seite beim Einbinden des Beispiels angeben könnte, welcher Tab als erstes geöffnet ist, wenn ein Benutzer auf die Seite kommt. Es kann ja durchaus sein, dass es Beispiele gibt, wo man die Leser zum frickln ermutigen will - und das erreicht man dadurch, dass an diesem Beispiel eben nicht "Beispiel" sondern "frickln" der anfangs geöffnete Tab ist. Oder der Beispielcode spielt keine große Rolle, die Beispielvorschau aber schon. Dann könnte "Vorschau" der standardmäßig offene Tab sein statt "Beispiel" (yet again, nur an diesem Beispiel auf Angabe des Autors hin). Also eine Möglichkeit, für den Autor beim Einbinden des Beispiels, anzugeben, welche "View" auf das Beispiel denn der default sein soll.

            Wobei das auch vielleicht in die Kategorie nice to have fällt und noch jederzeit eingebastelt werden kann, wenn die Tabs erstmal stehen.

            Grüße,

            RIDER

            --
            Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
            # Facebook # Twitter # Steam # YouTube # Self-Wiki # Selfcode: sh:) fo:) ch:| rl:) br:^ n4:? ie:% mo:| va:) js:) de:> zu:} fl:( ss:) ls:[
            1. problematische Seite

              Hallo Camping_RIDER,

              Du sitzt demselben Verständnisfehler auf wie der andere Matthias :D

              Beim Frickl habe ich das verstanden :-D

              Bis demnächst
              Matthias

              --
              Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
            2. problematische Seite

              Servus!

              Jürgens (durchaus sinnvolle) Idee, dem Autor nach Kontext die Möglichkeit zu lassen, was vorrangig angezeigt wird, lässt sich hier auch gut einbauen; man kann die Vorlage sicher so gestalten, dass sich der vorausgewählte Tab durch den Autor einstellen lässt - mit dem Beispiel-Tab als Standard-Vorauswahl.

              Das wäre wirklich nice to have!

              Du sitzt demselben Verständnisfehler auf wie der andere Matthias :D

              Ich hab oben mal fett markiert und paraphrasiere nochmal: Es wäre ganz gut, wenn der Autor der Seite beim Einbinden des Beispiels angeben könnte, welcher Tab als erstes geöffnet ist, wenn ein Benutzer auf die Seite kommt. Es kann ja durchaus sein, dass es Beispiele gibt, wo man die Leser zum frickln ermutigen will - und das erreicht man dadurch, dass an diesem Beispiel eben nicht "Beispiel" sondern "frickln" der anfangs geöffnete Tab ist. Oder der Beispielcode spielt keine große Rolle, die Beispielvorschau aber schon. Dann könnte "Vorschau" der standardmäßig offene Tab sein statt "Beispiel" (yet again, nur an diesem Beispiel auf Angabe des Autors hin). Also eine Möglichkeit, für den Autor beim Einbinden des Beispiels, anzugeben, welche "View" auf das Beispiel denn der default sein soll.

              Ja, aber jetzt kommt das UI, das mit den Reitern sehr gut aussieht.

              Trotzdem möchte ich vor technisch perfekten / zu komplexen Lösungen warnen. Unsere Nutzer erwarten folgende Möglichkeiten, die ich auch schon vorgeschlagen hatte:

              • (HTML)-Code/ Quelltext (Die Beschriftung Beispiel halte ich hier für irreführend.)
              • Ansicht ( Der Begriff Vorschau suggeriert, dass da dann das Frickln noch kommt.)
              • frickl-Modus zum selbst ausprobieren

              Weitere Features wie eine vollständige Quelltextansicht oder eine ausklappbare ganze Quelltextansicht halte ich für verkehrt, da man sie ja auch im Broswer erzielen kann. Auch wenn das in einem Beispiel (mir fällt jetzt nur border-image ein) vielleicht nötig oder nützlich ist, zeigt der wenig verbreitete Einsatz doch, dass man es nicht braucht.

              Wir sollten so wenig Bedienelemente wie möglich (und so viele wie möglich) einsetzen!

              Herzliche Grüße

              Matthias Scharwies

              --
              Es gibt viel zu tun: ToDo-Liste
              1. problematische Seite

                Aloha ;)

                Unsere Nutzer erwarten folgende Möglichkeiten, die ich auch schon vorgeschlagen hatte:

                • (HTML)-Code/ Quelltext (Die Beschriftung Beispiel halte ich hier für irreführend.)
                • Ansicht ( Der Begriff Vorschau suggeriert, dass da dann das Frickln noch kommt.)
                • frickl-Modus zum selbst ausprobieren

                Weitere Features wie eine vollständige Quelltextansicht oder eine ausklappbare ganze Quelltextansicht halte ich für verkehrt, da man sie ja auch im Broswer erzielen kann.

                Ja, in diesen Punkten gehe ich mit dir konform.

                Was, wenn das "Beispiel" aber nicht dediziert "(Beispiel-)Code" ist? Haben wir (selten). Für diesen Fall brauchen wir vielleicht eine eigene Vorlage, die der bisherigen Lösung entspricht - Ansicht und frickln braucht da aber ja dann auch niemand.

                Grüße,

                RIDER

                --
                Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller
                # Facebook # Twitter # Steam # YouTube # Self-Wiki # Selfcode: sh:) fo:) ch:| rl:) br:^ n4:? ie:% mo:| va:) js:) de:> zu:} fl:( ss:) ls:[
            3. problematische Seite

              Hallo Camping_RIDER,

              Du sitzt demselben Verständnisfehler auf wie der andere Matthias :D

              Du warst aber auch nicht aufmerksam :D („statt wie im Testwiki-Beispiel die Seite optisch aufzublähen“) Bereits im OP schrieb ich „und ein Umschalten zwischen Quelltext- und Ergebnisansicht zu ermöglichen“ :-P

              Bis demnächst
              Matthias

              --
              Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
            4. problematische Seite

              Servus!

              Nur mal zum Vergleich, wie es heute für Normalverbraucher aussieht:

              Screenshot eines Live-Beispiels

              Das Wort Beispiel ist m.E. nach überflüssig.

              ansehen ist ok

              Quelltext ist m.E redundant

              zeige vollständigen Quelltext ohne Worte

              Herzliche Grüße

              Matthias Scharwies

              --
              Es gibt viel zu tun: ToDo-Liste
              1. problematische Seite

                Hallo Matthias Scharwies,

                zeige vollständigen Quelltext ohne Worte

                Das war früher mal gedacht für Beispiele mit vendor-Präfixen. Das sollte es nicht mehr so häufig geben und kann ersatzlos weg. Wenn ich heute Abend noch Lust habe, mach ich das. Das ist realisiert über die Vorlage Verbergen.

                Bis demnächst
                Matthias

                --
                Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.
                1. problematische Seite

                  Servus!

                  Hallo Matthias Scharwies,

                  zeige vollständigen Quelltext ohne Worte

                  Das war früher mal gedacht für Beispiele mit vendor-Präfixen.

                  Ja, das hat sich glücklicherweise erledigt.

                  Wenn ich heute Abend noch Lust habe, mach ich das.

                  +1 (oder haben wir da jetzt ein Symbol für? - duck und wech!)

                  Bis demnächst
                  Matthias

                  Herzliche Grüße

                  Matthias Scharwies

                  --
                  Es gibt viel zu tun: ToDo-Liste
                  1. problematische Seite

                    Hallo Matthias Scharwies,

                    Wenn ich heute Abend noch Lust habe, mach ich das.

                    done.

                    Bis demnächst
                    Matthias

                    --
                    Dieses Forum nutzt Markdown. Im Wiki erhalten Sie Hilfe bei der Formatierung Ihrer Beiträge.