Rolf B: Verlinkung von Beispielen

problematische Seite

Hallo alle,

Maxnflaxl hatte Schwierigkeiten, den Sourcecode als Ganzes zusammenzusuchen.

Man kann:

  • die Codeteile im Frickl zu einer Datein zusammenfrickeln
  • auf dem "Vorschau" Tab die rechte Maustaste drücken und "Speichern unter..." wählen

Man kann aber per Link nicht direkt auf den Sourcecode oder eine ungekapselte Ansicht Seite kommen. Solche Links sind in einer Fleißarbeit setzbar, oder man müsste die {{Beispiel|zeige=... Vorlage anpassen. Wäre sowas nicht sinnvoll?

Rolf

--
sumpsi - posui - obstruxi
  1. problematische Seite

    Hallo Rolf B,

    Man kann aber per Link nicht direkt auf den Sourcecode oder eine ungekapselte Ansicht Seite kommen. Solche Links sind in einer Fleißarbeit setzbar, oder man müsste die {{Beispiel|zeige=... Vorlage anpassen. Wäre sowas nicht sinnvoll?

    Hatten wir schon. Es wurde geändert, weil es "zu unübersichtlich war". Und zwar war der "bearbeiten"-Link ein "Quelltext-zeigen"-Link für Nicht-BeispielAdmins.

    Bis demnächst
    Matthias

    --
    Du kannst das Projekt SELFHTML unterstützen,
    indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
    1. problematische Seite

      Hallo Matthias,

      wenn die Anzeige zu unübersichtlich wird, muss man die Funktionen ggf. anordnen. Aber sie deshalb zu streichen?!

      Ein gültiges Argument wäre: es hat keiner gebraucht. Aber um das zu wissen, müsste es genaue Seitenabrufstatistiken geben. Leider finde ich im Forum keine Argumentation zu dieser Änderung. Wurde das auf einer MV oder einer Vereins-Telko besprochen? Oder war es Wiki-Feedback?

      Einen gibt's ja, der es gern gehabt hätte. Für uns Beispieladministratoren ist es kein Problem. Aber die User, die eine solche Seite gerne vollständig sehen würden, müssen es sich aus dem Frickl zusammensetzen.

      Rolf

      --
      sumpsi - posui - obstruxi
      1. problematische Seite

        Hallo Rolf B,

        https://forum.selfhtml.org/meta/2016/oct/16/wiki-beispiele-in-iframes/1677086#m1677086

        Bis demnächst
        Matthias

        --
        Du kannst das Projekt SELFHTML unterstützen,
        indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
      2. problematische Seite

        Servus!

        Hallo Matthias,

        wenn die Anzeige zu unübersichtlich wird, muss man die Funktionen ggf. anordnen. Aber sie deshalb zu streichen?!

        Ein gültiges Argument wäre: es hat keiner gebraucht. Aber um das zu wissen, müsste es genaue Seitenabrufstatistiken geben. Leider finde ich im Forum keine Argumentation zu dieser Änderung. Wurde das auf einer MV oder einer Vereins-Telko besprochen? Oder war es Wiki-Feedback?

        Einen gibt's ja, der es gern gehabt hätte. Für uns Beispieladministratoren ist es kein Problem. Aber die User, die eine solche Seite gerne vollständig sehen würden, müssen es sich aus dem Frickl zusammensetzen.

        Nein, eben grad ausprobiert: Unangemeldete Nutzer können die Vorschau im neuen Tab öffnen und haben dann die vollständige Webseite. Dort kann man mit "Seite speichern" oder mit Rechtsklick "Seitenquelltext anzeigen" das komplette Beispiel haben.

        Auch in CodePen kann man nicht einfach mit copy&paste arbeiten.

        Herzliche Grüße

        Matthias Scharwies

        --
        Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“
  2. problematische Seite

    Hallo Rolf B,

    https://wiki.selfhtml.org/index.php?title=MediaWiki%3ACommon.js&type=revision&diff=33831&oldid=33168

    Bis demnächst
    Matthias

    --
    Du kannst das Projekt SELFHTML unterstützen,
    indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
    1. problematische Seite

      Hallo Matthias,

      ja, hm, mir scheint, dass hier unterschiedliche Voraussetzungen vorliegen.

      Wenn das Wiki unter "Quellcode" das vollständige HTML anzeigt, wie es in der von Dir verlinkten Diskussion der Fall war, dann braucht man einen Link zum Quellcode wohl nicht.

      Aber im Taschenrechner-Artikel zeigt das Quelltext Tab nur die eine Funktion. Wie man damit gut umgeht, weiß ich auch nicht.

      Rolf

      --
      sumpsi - posui - obstruxi
      1. problematische Seite

        Hallo Rolf B,

        • Im Quelltext-Tab kann man als Autor den Teil des Quelltextes reinschreiben, den man als wichtig erachtet.
        • der Vorschau-Tab öffnet das Beispiel im Iframe
        • Rechtsklick auf den Vorschau-Tab öffnet das Beispiel in einem neuen Tab

        Dort hat man dann alle Möglichkeiten. Das war der Grund dafür, dass es den Quelltext-Link heute nicht mehr gibt.

        Bis demnächst
        Matthias

        --
        Du kannst das Projekt SELFHTML unterstützen,
        indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
        1. problematische Seite

          Hallo Matthias Apsel,

          • der Vorschau-Tab öffnet das Beispiel im Iframe

          Dort lässt sich auch die rechte Maustaste verwenden: Nur diesen Frame anzeigen.

          Bis demnächst
          Matthias

          --
          Du kannst das Projekt SELFHTML unterstützen,
          indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
          1. problematische Seite

            Hallo Matthias,

            leider wissen zu viele Wikibesucher nicht (mehr), was mit der rechten Maustaste alles geht. Und am Smartphone oder Tablet wüsste ich garnicht, wie ich an den Quelltext kommen kann.

            Vielleicht sollte der Link zum Quelltext doch wieder eingebaut werden.

            Gruß
            Jürgen

            1. problematische Seite

              Hallo JürgenB,

              Vielleicht sollte der Link zum Quelltext doch wieder eingebaut werden.

              Dann hätte ich gern entsprechende Linktexte für

              Funktion bisherige Bezeichnung neue Bezeichnung
              didaktisch relevanter Quelltextausschnitt im iframe Quelltext [Reiter] ? [Reiter]
              Vorschau des Beispiels im iframe Vorschau [Reiter] ? [Reiter]
              Frickl ausprobieren [Link] ? [Link]
              Seitenquelltext - ? [Link]

              Bis demnächst
              Matthias

              --
              Du kannst das Projekt SELFHTML unterstützen,
              indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
              1. problematische Seite

                Hallo Matthias,

                Funktion bisherige Bezeichnung neue Bezeichnung
                didaktisch relevanter Quelltextausschnitt im iframe Quelltext [Reiter] Relevanter Quelltext [Reiter]
                Vorschau des Beispiels im iframe[1] Vorschau [Reiter] Ansehen [Reiter]
                Frickl ausprobieren [Link] ausprobieren [Link]
                Seitenquelltext - Vollständiger Quelltext [Link]

                Den Link zum Quelltext könnte man auch oben auf der Testseite unterbringen, so mache ich das.

                Gruß
                Jürgen


                1. aber nicht im iFrame, sondern auf eigener Seite ↩︎

                1. problematische Seite

                  Hallo JürgenB,

                  Den Link zum Quelltext könnte man auch oben auf der Testseite unterbringen, so mache ich das

                  für welches der vielen Beispiele einer Tutorialseite?

                  Bis demnächst
                  Matthias

                  --
                  Du kannst das Projekt SELFHTML unterstützen,
                  indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
                  1. problematische Seite

                    Hallo Matthias,

                    der Link zum Quelltext könnte auf jeder Beispielseite sein, für die, die F12 nicht kennen oder keine Funktionstasten haben. Das wäre dann eine Alternative zum Link im Artikel.

                    Gruß
                    Jürgen

                    1. problematische Seite

                      Hallo JürgenB,

                      der Link zum Quelltext könnte auf jeder Beispielseite sein, für die, die F12 nicht kennen oder keine Funktionstasten haben. Das wäre dann eine Alternative zum Link im Artikel.

                      Ah, ja das ist eine gute Idee. So wie der Backlink in Gunnars Code-Pen. Man könnte es im Beispiel:SELFHTML-Beispiel-Grundlayout.css mit unterbringen, es könnte so aussehen wie die Links neben den Zwischenüberschriften im Wiki. Blöd nur, dass es dann auch im Frickl auftaucht. Oder man müsste für das frickl diesen Link dann wieder entfernen.

                      Bis demnächst
                      Matthias

                      --
                      Du kannst das Projekt SELFHTML unterstützen,
                      indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
                      1. problematische Seite

                        Hallo Matthias,

                        über die Umsetzung habe ich bisher noch nicht nachgedacht, aber ich mache das jetzt mal.

                        Der Quellcode wird doch direkt angezeigt:

                        https://wiki.selfhtml.org/wiki/Beispiel:JS_Taschenrechner.html

                        Die funktionierende Seite aber über das Script example.php:

                        https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:JS_Taschenrechner.html

                        Kann dieses Script nicht den Link zum Quelltext einbauen? Im Wiki-Layout wäre oben rechts noch Platz.

                        Evtl. kann das Script auch prüfen, ob die Seite im frickl aufgerufen wird, und dann auf den Link verzichten.

                        Aber wenn das zu aufwändig ist, irgendwer muss das ja umsetzen, würde mir ein zusätzlicher Link zur Seite im eigenen Fenster reichen. Wer Webseiten entwickelt, sollte die Quelltextansicht seines Browsers kennen. Und Besucher mit Tablet oder Smartphone mussen dann mit Maus wiederkommen. Der relevante Quelltext wird ja im Artikel gezeigt.

                        Gruß
                        Jürgen

                        1. problematische Seite

                          Hallo JürgenB,

                          https://wiki.selfhtml.org/wiki/Beispiel:JS_Taschenrechner.html

                          Das ist aber nicht immer schön. Etwa, wenn im Quelltext Tags auftauchen, die durch die Mediawiki-Software interpretiert werden. Deshalb https://wiki.selfhtml.org/wiki/Beispiel:JS_Taschenrechner.html?action=render

                          Kann dieses Script nicht den Link zum Quelltext einbauen? Im Wiki-Layout wäre oben rechts noch Platz.

                          Der Link von der Wiki(-Artikel-)Seite kann über die common.css wieder eingerichtet werden.

                          Evtl. kann das Script auch prüfen, ob die Seite im frickl aufgerufen wird, und dann auf den Link verzichten.

                          Für die Beispiel-Seiten wäre das super.

                          Aber wenn das zu aufwändig ist, irgendwer muss das ja umsetzen,

                          Ich glaube nicht, dass das sehr aufwändig ist. Wenn es einfach ein absolut positionierter Link ist, sollte es kein Problem darstellen oder, @Felix Riesterer?

                          Bis demnächst
                          Matthias

                          --
                          Du kannst das Projekt SELFHTML unterstützen,
                          indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
                        2. problematische Seite

                          Hallo JürgenB und Matthias,

                          ihr redet für mich gerade über böhmische Dörfer.

                          Kann dieses Script nicht den Link zum Quelltext einbauen? Im Wiki-Layout wäre oben rechts noch Platz.

                          Vielleicht bin ich ja zu blöd, aber was hat das Wiki-Layout an dieser Stelle zu suchen? Das example.php zeigt die HTML Seite doch ohne Wiki-Rahmen an. Egal ob nackig oder in einen iframe gekleidet.

                          Das heißt doch: wenn man einen Link zum Quelltext bauen will, müssen die Beispiele so geschnitten sein, dass sie dafür etwas Platz lassen.

                          Der Link von der Wiki(-Artikel-)Seite kann über die common.css wieder eingerichtet werden.

                          Ein Link kann über eine CSS Datei eingerichtet werden. Wie soll das denn gehen?!?! Ist er im HTML vorhanden und das aktuelle CSS blendet ihn nur aus?

                          Rolf

                          --
                          sumpsi - posui - obstruxi
                          1. problematische Seite

                            Hallo Rolf B,

                            Der Link von der Wiki(-Artikel-)Seite kann über die common.css wieder eingerichtet werden.

                            Ein Link kann über eine CSS Datei eingerichtet werden. Wie soll das denn gehen?!?! Ist er im HTML vorhanden und das aktuelle CSS blendet ihn nur aus?

                            Sorry. Verschrieben. common.js

                            Bis demnächst
                            Matthias

                            --
                            Du kannst das Projekt SELFHTML unterstützen,
                            indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
                            1. problematische Seite

                              Hallo Rolf B,

                              Sorry. Verschrieben. common.js

                              Siehe https://forum.selfhtml.org/m1779271

                              Bis demnächst
                              Matthias

                              --
                              Du kannst das Projekt SELFHTML unterstützen,
                              indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
                          2. problematische Seite

                            Hallo Rolf,

                            ich meine das Wiki-Layout der Beispiele. Da wäre oben rechts Platz für einen Link zur Quelltextansicht.

                            Gruß
                            Jürgen

                            1. problematische Seite

                              Hallo JürgenB,

                              dieses Script leistet das Verlangte:

                              "use strict";
                              let link = document.createElement("a");
                              link.id = "Quelltext";
                              link.title = "Quelltext ansehen";
                              link.href = location.href.replace('extensions/Selfhtml/example.php','wiki')+"?action=render";
                              link.innerHTML = "</>";
                              document.body.appendChild(link);
                              		
                              let style = document.createElement("style");
                              style.innerText = "#Quelltext{position:absolute;right:2rem;top:1rem;font-size:2em;padding:.25em .5em;border:thin solid #ddd;font-weight: bold;}";
                              document.head.appendChild(style);
                              

                              Man sollte den Link vielleicht noch ein bisschen hübscher machen und dann bleibt noch zu klären, wie das Script in die Beispielseiten kommt und zwar nur dann, wenn sie nicht im Frickl geöffnet werden.

                              Bis demnächst
                              Matthias

                              --
                              Du kannst das Projekt SELFHTML unterstützen,
                              indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
        2. problematische Seite

          Hallo Matthias,

          Rechtsklick auf den Vorschau-Tab öffnet das Beispiel in einem neuen Tab

          Ja, aber offenbar ist das ein nicht nahe liegender Gedanke. Ich bin nicht drauf gekommen, der TO auch nicht.

          Warum nicht, frage ich mich. Vielleicht, weil man Tab-Titel mit Buttons assoziiert, nicht mit Links, die man mit der rechten Maustaste in einem neuen Tab öffnen kann. Sie sehen natürlich korrekt wie Links aus, insofern muss ich mir da selbst an die Nase fassen. Aber offenbar war meine Wahrnehmung selektiv und hat sich auf "Tab-Header ≠ Link" fixiert.

          Wie wäre es mit dieser Möglichkeit: https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/Taschenrechner#Vor.C3.BCberlegungen

          rechte Maustaste verwenden: Nur diesen Frame anzeigen.

          Nicht in Chrome. Aber da gibt es immerhin "Frame-Quelltext anzeigen".

          Rolf

          --
          sumpsi - posui - obstruxi
          1. problematische Seite

            Servus!

            Hallo Matthias,

            Rechtsklick auf den Vorschau-Tab öffnet das Beispiel in einem neuen Tab

            Ja, aber offenbar ist das ein nicht nahe liegender Gedanke. Ich bin nicht drauf gekommen, der TO auch nicht.

            Warum nicht, frage ich mich. Vielleicht, weil man Tab-Titel mit Buttons assoziiert, nicht mit Links, die man mit der rechten Maustaste in einem neuen Tab öffnen kann. Sie sehen natürlich korrekt wie Links aus, insofern muss ich mir da selbst an die Nase fassen. Aber offenbar war meine Wahrnehmung selektiv und hat sich auf "Tab-Header ≠ Link" fixiert.

            Wie wäre es mit dieser Möglichkeit: https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/Taschenrechner#Vor.C3.BCberlegungen

            Das sieht gut aus. Grad der Taschenrechner ist so eine Grundaufgabe, die anscheinend immer wieder gestellt wird. @Felix Riesterer hatte das alte Bsp. mit eval() durch ein neues ersetzt, was mit seinen Fallbacks und Tastaturbedienung blutige Anfänger wohl erst mal überfordert.

            rechte Maustaste verwenden: Nur diesen Frame anzeigen.

            Nicht in Chrome. Aber da gibt es immerhin "Frame-Quelltext anzeigen".

            Rolf

            Herzliche Grüße

            Matthias Scharwies

            --
            Einfach mal was von der ToDo-Liste auf die Was-Solls-Liste setzen.“
            1. problematische Seite

              Hallo Matthias Scharwies,

              Wie wäre es mit dieser Möglichkeit: https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/Taschenrechner#Vor.C3.BCberlegungen [Link zur Beispielseite]

              Das sieht gut aus.

              Nein. Die Darstellung von https://wiki.selfhtml.org/wiki/Beispiel:JS_Taschenrechner.html ist eher zufällig. Das kommt darauf an, ob da Elemente drin sind, die Mediawiki interpretiert.

              Wenn dann https://wiki.selfhtml.org/wiki/Beispiel:JS_Taschenrechner.html?action=render.

              Aus didaktischen Gründen sollte ein solcher Link nicht am Anfang des Tutorials stehen sondern am Ende.

              Bis demnächst
              Matthias

              --
              Du kannst das Projekt SELFHTML unterstützen,
              indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
          2. problematische Seite

            Hallo Rolf B,

            Wie wäre es mit dieser Möglichkeit: https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/Taschenrechner#Vor.C3.BCberlegungen

            Ich habe diese Änderung im Wiki zunächst wieder rückgängig gemacht, weil ich die Diskussion dazu als nicht abgeschlossen betrachte. Außerdem verschiebe ich diesen Thread in das öffentliche Forum. Vielleicht gibt es noch andere Meinungen.

            Bis demnächst
            Matthias

            --
            Du kannst das Projekt SELFHTML unterstützen,
            indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.