Hannes Weninger: Meine Webseite auf verschiedenen Geräten darstellen

Hallo,

ich hab schon gegoogelt aber noch nichts brauchbares gefunden, deshalb meine Frage hier.
Ich möchte meine schon gemachten Webseiten auflisten und wollte diese deshalb so wie hier darstellen:

Page

Also es soll meine Webseiten auf verschiedenen Geräten zeigen.
Weis jemand wie ich das so zustammenstellen kann. Gibt es eine Seite auf der das vielleicht so angeordnet ist.
Vielen Dank für Eure Hilfe.
lg
Hannes

  1. Hallo,

    mit wird aus deiner Anfrage leider nicht klar, was du eigentlich erreichen willst.

    Ich möchte meine schon gemachten Webseiten auflisten und wollte diese deshalb so wie hier darstellen:

    Meinst du nur die Grafik, in der alle Ansichten zusammengewürfelt sind oder meinst du die Anordnung der Seite insgesamt?

    Gruss

    MrMurphy

    1. Meinst du nur die Grafik, in der alle Ansichten zusammengewürfelt sind oder meinst du die Anordnung der Seite insgesamt?

      Ich möchte einfach die URLs meiner Webseiten eingeben können und dann kommt eine Grafik mit den zusammengewürfelten Geräten (z.B. iMac, iPad, iPhone) welche meine Webseite (die URL die ich eingegeben habe) anzeigt.
      Diese Grafik würde ich mir dann gerne rauskopieren und auf meine Webseite geben (anstatt diesem Slider SIT)

      lg
      Generic1

      1. Hallo,

        ich verstehe das jetzt so, das du eine Seite oder eine Software suchst, in der du Web-Adressen eingeben kannst und die dann aus der Seite eine Grafik erstellt, die die Seite auf verschiedenen Ausgabegeräten (Smartphone, Tablet, PC) anzeigt, um das responsive Design zu verdeutlichen.

        So eine Seite oder Software ist mir leider nicht bekannt. Aber vielleicht können dir andere User weiterhelfen, nachdem dein Problem jetzt deutlicher geworden ist.

        Gruss

        MrMurphy

  2. Hi,

    Weis jemand wie ich das so zustammenstellen kann. Gibt es eine Seite auf der das vielleicht so angeordnet ist.

    die Zusammenstellung wird wohl immer individuell sein. Hilfreich sind Geräte- bzw. Auslösungs-Simulationen. Ganz neu im Wiki:

    Technische Ergänzungen/Viewport-Emulator

    Ciao, Performer

    PS: Gibt es ein Problem mit Umlauten in Links? In der Vorschau wurde der Link erst korrekt dargestellt, nachdem ich das „ä“ mit „%C3%A4“ ersetzt habe.

    1. Hi,

      PS: Gibt es ein Problem mit Umlauten in Links? In der Vorschau wurde der Link erst korrekt dargestellt, nachdem ich das „ä“ mit „%C3%A4“ ersetzt habe.

      Umlaute in URLs waren noch nie erlaubt, die mußten immer schon url-codiert werden.

      cu,
      Andreas

      --
      Warum nennt sich Andreas hier MudGuard?
      O o ostern ...
      Fachfragen per Mail sind frech, werden ignoriert. Das Forum existiert.
      1. Hi,

        Umlaute in URLs waren noch nie erlaubt, die mußten immer schon url-codiert werden.

        das Problem kenne ich von anderen Foren, insofern wusste ich gleich nach dem siebten Versuch ;-)  was zu tun ist. Es erstaunt mich nur etwas, den „Link-Killer“ hier auch anzutreffen.

        Ciao, Performer

        1. Moin Performer,

          das Problem kenne ich von anderen Foren, insofern wusste ich gleich nach dem siebten Versuch ;-)  was zu tun ist. Es erstaunt mich nur etwas, den „Link-Killer“ hier auch anzutreffen.

          Ohne Link-Validierung ist dem XSS hier ja Tür und Tor geöffnet. Das hatten wir im Matt-Wright-Script damals, der ersten Foren-Version – und da war das schon problematisch, weil die Leute anfingen, javascript:-Links zu posten.

          LG,
           CK

          1. Hi,

            Ohne Link-Validierung ist dem XSS hier ja Tür und Tor geöffnet.

            die technischen Hintergründe kann ich nicht beurteilen und nehme das als gegeben hin.

            Mir ist jedoch eingefallen, dass Textile 1.0 auch nicht mit Umlauten umgehen konnte, Textile 2.2 kann das und mir sind keine Sicherheitsprobleme bekannt. Keine Ahnung, wie das gelöst ist.

            Ciao, Performer

            1. Hallo,

              die technischen Hintergründe kann ich nicht beurteilen und nehme das als gegeben hin.

              dann nehme ich mal die gegenüberliegende Position ein. :-)

              Mir ist jedoch eingefallen, dass Textile 1.0 auch nicht mit Umlauten umgehen konnte, Textile 2.2 kann das und mir sind keine Sicherheitsprobleme bekannt. Keine Ahnung, wie das gelöst ist.

              Hab ich auch keine Ahnung, zumal ich nicht weiß, was Textile in diesem Beispiel ist.
              Seit ein paar Jahren sind Umlaute in Domainnamen prinzipiell erlaubt ("mäh.de" wäre also möglich), allerdings nur an der Benutzerschnittstelle. Das heißt, man kann "mäh.de" im Browser eingeben, der Browser kann/darf es auch so anzeigen, aber intern wird die Umlaut-Schreibweise in Punycode umgesetzt. So hat man die Rückwärtskompatibilität zum bisherigen DNS sichergestellt.

              Ergo: Auf Anwenderebene gibt es Domainnamen mit Umlauten, auf Protokollebene nicht.

              Etwas anderes sind Umlaute im lokalen Pfad einer URL. Dort erlaubt HTTP sie immer noch nicht; will man also unbedingt welche haben, muss man sie URL-codieren, so wie du es eben auch getan hast. Problematisch ist dabei, dass die an dieser Stelle vom Server verwendete Zeichencodierung völlig unbekannt ist. Die ist aber entscheidend für das richtige Interpretieren der Eingabe. Es ist also von außen nicht erkennbar, ob man example.org/M%C3%BCnchen oder etwa example.org/M%FCnchen eingeben muss, damit die Eingabe richtig verstanden wird.

              Ergo: Umlaute in URLs können problematisch sein, am besten vermeiden!

              So long,
               Martin

              --
              Elefant zum Kamel: "Sag mal, wieso hast du denn den Busen auf dem Rücken?"
              Kamel:             "Ziemlich freche Frage für einen, der den Penis im Gesicht hat."
              Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
              1. @@Der Martin:

                nuqneH

                Ergo: Auf Anwenderebene gibt es Domainnamen mit Umlauten, auf Protokollebene nicht.
                Etwas anderes sind Umlaute im lokalen Pfad einer URL. Dort erlaubt HTTP sie immer noch nicht;

                ?? Wo ist dir denn hier der Gedanke entglitten?

                HTTP ist die Protokollebene. Da sind Nicht-ASCII-Zeichen auch im Host nicht erlaubt; nicht anders als im Pfad.

                Nur die Art der Codierung ist bei Host und Pfad verschieden.

                Ergo: Umlaute in URLs können problematisch sein, am besten vermeiden!

                Nö. Am besten die Systeme so gestalten, dass auch mit Umlauten u.a. Zeichen (auch aus anderen Schriften) das Web funktioniert.

                “Internationalization is not a feature. It is an architecture.” —Addison Phillips

                Qapla'

                --
                „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
      2. @@MudGuard:

        nuqneH

        Umlaute in URLs waren noch nie erlaubt, die mußten immer schon url-codiert werden.

        URIs sind out. IRIs sind in.

        Punycode und Prozentcodierung sollten im Hintergrund laufen und vom Nutzer gar nicht wahrgenommen werden.

        Qapla'

        --
        „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
    2. Om nah hoo pez nyeetz, Performer!

      die Zusammenstellung wird wohl immer individuell sein. Hilfreich sind Geräte- bzw. Auslösungs-Simulationen. Ganz neu im Wiki:

      Technische Ergänzungen/Viewport-Emulator

      Der kann aber nur unterschiedliche Abmessungen emulieren. Um tatsächlich das Verhalten eines Smartphones nachzubilden, das das meta-element viewport nicht ignoriert, muss man tatsächlich auf Emulatoren zurückgreifen.

      PS: Gibt es ein Problem mit Umlauten in Links? In der Vorschau wurde der Link erst korrekt dargestellt, nachdem ich das „ä“ mit „%C3%A4“ ersetzt habe.

      Hättest du den Link aus der Addresszeile des Browsers kopiert, wär das nicht passiert ;-)

      Matthias

      --
      Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Spitz und Spitzer.

      1. Mahlzeit,

        Der kann aber nur unterschiedliche Abmessungen emulieren.

        Nicht ganz. Es werden Auflösungen emuliert. Es gibt ja bei 7" oder 10" auch verschiedene Auflösungen. Auf meinen 24"ern ist die Auflösung für mein 10" Tablet fast 1,5mal so gross.

        Aber wie du sagst, zum Testen des Verhaltens braucht man mindestens nen Emulator, besser noch das entsprechende Gerät ;)

        --
        42
      2. Hallo,

        PS: Gibt es ein Problem mit Umlauten in Links? In der Vorschau wurde der Link erst korrekt dargestellt, nachdem ich das „ä“ mit „%C3%A4“ ersetzt habe.
        Hättest du den Link aus der Addresszeile des Browsers kopiert, wär das nicht passiert ;-)

        das stimmt so nicht! Mein Browser (Opera 12.16) stellt -zu meiner Verärgerung- Umlaute auch in der Adresszeile in Klartext an, und nicht URL-codiert. Sogar wenn ich "http://wiki.selfhtml.org/wiki/Technische_Erg%C3%A4nzungen/Viewport-Emulator" von Hand eingebe, wird aus dem %C3%A4 automatisch ein ä. Firefox übrigens ebenso. Pfui.

        Gerade wenn man eine URL aus der Adresszeile kopieren will, um einen korrekt URL-codierten Link zu formulieren, ist das ärgerlich. Das ist mir schon oft unangenehm aufgefallen, wenn ich einen Link zu Wikipedia kopieren wollte, dort kommen Umlaute in den URLs ja auch oft vor.

        Ciao,
         Martin

        --
        Eine Neandertaler-Sippe sitzt in ihrer kalten Höhle. Seufzt der Stammesälteste: "Hoffentlich erfindet bald jemand das Feuer!"
        Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
        1. Om nah hoo pez nyeetz, Der Martin!

          Hallo,

          PS: Gibt es ein Problem mit Umlauten in Links? In der Vorschau wurde der Link erst korrekt dargestellt, nachdem ich das „ä“ mit „%C3%A4“ ersetzt habe.
          Hättest du den Link aus der Addresszeile des Browsers kopiert, wär das nicht passiert ;-)

          das stimmt so nicht! Mein Browser (Opera 12.16) stellt -zu meiner Verärgerung- Umlaute auch in der Adresszeile in Klartext an, und nicht URL-codiert. Sogar wenn ich "http://wiki.selfhtml.org/wiki/Technische_Erg%C3%A4nzungen/Viewport-Emulator" von Hand eingebe, wird aus dem %C3%A4 automatisch ein ä. Firefox übrigens ebenso. Pfui.

          Doch, das stimmt ;-)

          Wenn ich unter Windows in die Adresszeile meines FF „https://de.wikipedia.org/wiki/Übergröße“ eintippe, dann schreibt der das auch so im Klartext hin. Ein cnp jedoch führt zu „https://de.wikipedia.org/wiki/%C3%9Cbergr%C3%B6%C3%9Fe“.

          Bei nicht existierenden Seiten klappt das jedoch nicht: http://www.tränenüberströmter-Übergrössenträger.invalid/

          Matthias

          --
          Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Lauda und Laudatio.

          1. Hallo Matthias,

            Mein Browser (Opera 12.16) stellt -zu meiner Verärgerung- Umlaute auch in der Adresszeile in Klartext an, und nicht URL-codiert. Sogar wenn ich "http://wiki.selfhtml.org/wiki/Technische_Erg%C3%A4nzungen/Viewport-Emulator" von Hand eingebe, wird aus dem %C3%A4 automatisch ein ä. Firefox übrigens ebenso. Pfui.
            Doch, das stimmt ;-)

            nee, stimmt nicht! - Eben doch! - Nee! - Doch! - Gar nicht! :-))

            Wenn ich unter Windows in die Adresszeile meines FF „https://de.wikipedia.org/wiki/Übergröße“ eintippe, dann schreibt der das auch so im Klartext hin. Ein cnp jedoch führt zu „https://de.wikipedia.org/wiki/%C3%9Cbergr%C3%B6%C3%9Fe“.

            Dann verhalten sich die jeweiligen Linux-Pendants der beiden Browser (FF und Opera) in diesem Punkt anders. Dort bekomme ich mit C&P auch genau das kopiert, was in der Adresszeile angezeigt wird, also mit Umlaut und anderen Nicht-ASCII-Zeichen (was ich auch für logisch halte, wenn auch hier nicht zielführend).

            Bei nicht existierenden Seiten klappt das jedoch nicht: http://www.tränenüberströmter-Übergrössenträger.invalid/

            Das finde ich *sehr* merkwürdig.

            So long,
             Martin

            --
            Wer im Steinhaus sitzt, soll nicht mit Gläsern werfen.
            Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
            1. Om nah hoo pez nyeetz, Der Martin!

              Bei nicht existierenden Seiten klappt das jedoch nicht: http://www.tränenüberströmter-Übergrössenträger.invalid/

              Das finde ich *sehr* merkwürdig.

              Ich nicht, weil der URL wohl gesendet werden muss. Also eintippen und rauskopieren allein bringt die Änderung nicht.

              Eintippen -> HTML-Dokument bekommen -> rauskopieren ist schon notwendig.

              Opera unter Windows tut es nicht, Safari auch nicht,

              Chrome verhält sich wie FF,

              IE11 zeigt einen url-codierten URL.

              Matthias

              --
              Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Arm und Armut.

              1. Hi,

                Bei nicht existierenden Seiten klappt das jedoch nicht: http://www.tränenüberströmter-Übergrössenträger.invalid/
                Das finde ich *sehr* merkwürdig.
                Ich nicht, weil der URL wohl gesendet werden muss.

                das wird es in jedem Fall. Nur dass bei nicht existierenden URLs entweder ein DNS-Fehler (unbekannter Hostname) oder ein HTTP-Status 404 das Ergebnis ist.

                Eintippen -> HTML-Dokument bekommen -> rauskopieren ist schon notwendig.

                Und das finde ich nicht wirklich logisch. Aber noch weniger logisch finde ich, dass ich in einem Textfeld (denn das ist die Adresszeile aus GUI-Sicht, oder auch eine Combo-Box) beim Kopieren einen anderen String bekomme als den, den das Textfeld auch anzeigt.

                Das sind damit in Summe zwei Merkwürdigkeiten: a) %C3%A4 wird bei der Eingabe sofort zu ä, und b) ä wird beim Kopieren wieder zu %C3%A4, aber nur wenn der Request erfolgreich war.

                Ciao,
                 Martin

                --
                Früher habe ich mich vor der Arbeit gedrückt. Heute könnte ich stundenlang zusehen.
                Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
                1. Om nah hoo pez nyeetz, Der Martin!

                  a) %C3%A4 wird bei der Eingabe sofort zu ä,

                  Das trifft für Windows nicht zu.

                  Matthias

                  --
                  Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Bus und Buschwindröschen.

      3. Hi,

        Technische Ergänzungen/Viewport-Emulator

        Der kann aber nur unterschiedliche Abmessungen emulieren.

        mir scheint, in dem Fall geht’s weniger um Funktion als vielmehr um Illustration. Dazu ist der Viewport-Emulator gut zu gebrauchen. Mein Editor (Coda) kann auch verschiedene Geräte nachahmen. Wie genau das ist, habe ich aber noch nie überprüft.

        Hättest du den Link aus der Addresszeile des Browsers kopiert, wär das nicht passiert ;-)

        Martin hat dazu ja schon geantwortet. Gerade auch in bezug auf Wikipedia ist das oft ärgerlich, weil die meisten nicht wissen, wie sie funktionierende Links trotz der Umlaute erstellen können.

        Ciao, Performer

        1. Hallo,

          Gerade auch in bezug auf Wikipedia ist das oft ärgerlich, weil die meisten nicht wissen, wie sie funktionierende Links trotz der Umlaute erstellen können.

          ja, ich zum Beispiel. Naja, ich weiß es im Prinzip schon, aber ich kenne die Bytesequenzen nicht auswendig, mit denen die Zeichen in UTF-8 codiert werden und muss jedesmal nachschauen oder mit Schmierzettel und Stift Bits hin- und herschieben. Das ist lästig.

          Ciao,
           Martin

          --
          Elefant zum Kamel: "Sag mal, wieso hast du denn den Busen auf dem Rücken?"
          Kamel:             "Ziemlich freche Frage für einen, der den Penis im Gesicht hat."
          Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
          1. Hi,

            … ich kenne die Bytesequenzen nicht auswendig, …

            die kenne ich auch nicht. Ich habe ein Lesezeichen Hilfe:Sonderzeichenreferenz, das ich mit der Eingabe von %%%, ööö, äää, üüü oder ßßß im Suchfenster der Lesezeichen schnell aufrufen kann.

            Ciao, Performer

          2. @@Der Martin:

            nuqneH

            ich kenne die Bytesequenzen nicht auswendig, mit denen die Zeichen in UTF-8 codiert werden und muss jedesmal nachschauen oder mit Schmierzettel und Stift Bits hin- und herschieben. Das ist lästig.

            Ist es. Dafür gibt’s Hilfmittel wie Richard Ishidas Code Converter.

            Qapla'

            --
            „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
            1. Hi,

              Ist es. Dafür gibt’s Hilfmittel wie Richard Ishidas Code Converter.

              für einen Appleliebhaber wie mich ist das zuviel Input. Ich hätte gerne EINEN Button (gerne groß und rund) und EIN Eingabefeld (leider gibts das nicht in richtig rund). Anders kapier ich's nicht. Ne, im Ernst, cooles Tool. Ist gebookmarkt.