brigitte: Frage zum Wiki-Artikel „Template3“

problematische Seite

Hallo, Ich wollte mich mal wieder bei selfhtml informieren, da ich meine Webseite evtl. für mobile Geräte umstellen wollte. Wenn ein Button angeboten wird Beispiel ansehen, bekomme ich immer die Meldung: Exception encountered, of type "Error"

Wäre sehr nett, wenn mir jemand helfen könnte. Danke

akzeptierte Antworten

  1. problematische Seite

    Hallo

    Da scheint der Link zur Zeit nicht zu funktionieren.

    Unter den drei Vorschaubildern kannst du die gesamte Website im zip-Format herunterladen und nach dem Entpacken direkt anschauen. Der Link funktioniert.

    Gruss

    MrMurphy

    1. problematische Seite

      Vielen Dank für die Mühe.

      Das Problem habe ich auch bei allen Tutorial Artikeln, wo der Button "Beispiel ansehen" angeboten wird. Wie erwähnt wollte ich mich mit html 5 bzw. responsive Webseite mal auseinandersetzen. Da meine sehr umfangreiche private Webseite nicht für Handy etc. tauglich ist, stellt sich für mich die Frage des Aufwands neu zu schreiben bzw. was eben alles zu ändern wäre.

      Da ich vor Jahren als Laie Monate brauchte für hmtl und CSS ;-) wären Beispiele anzusehen sehr hilfreich bei der Überlegung ich ob sich der Aufwand lohnt?

      1. problematische Seite

        Hallo

        ob sich der Aufwand lohnt

        Für die Website in jedem Fall.

        Der Aufwand wird für jemanden, der sich mit aktuellem HTML und CSS auskennt überschaubar sein, da die Inhalte offensichtlich bereits vorhanden sind.

        Wenn sich jemand mit aktuellem HTML und CSS nicht auskennt wird ihm das Anschauen von Webseiten und deren Quelltext nicht viel weiterhelfen. Dazu ist die gesamte Thematik viel zu komplex geworden.

        Zumal es schwierig ist aktuelle Webseiten überhaupt zu finden. Die Beispiele bei SELFhtml sind auch bereits in die Jahre gekommen.

        Vieles läßt sich inzwischen einfacher oder sinnvoller lösen, grade in Hinblick auf Responsive Design.

        Wenn du aktuelles HTML und CSS lernen willst haben sich eigentlich nur kostenpflichtige Videos oder Bücher bewährt. Im Internet finden sich zwar jede Menge kostenfreie Angebote und Informationen im Überfluß, aber die sind zum Lernen kaum geeignet, sondern eher zum Nachlesen, wenn einem etwas entfallen ist, weil man es zum Beispiel selten benötigt.

        Gruss

        MrMurphy

        1. problematische Seite

          Hallo MrMurphy, vielen Dank für die umfangreiche Info. Dann hat sich selfhtml wohl erledigt - war mir vor Jahren als vollkommen Unwissende sehr hilfreich. Meine mehrer 100 Seiten umfassende Seite ist noch in DTD HTML 4.01 und CSS 2 geschrieben. War auch richtig glücklich als alles mal funktionierte, so wie ich es eben wollte.

          Altersbedingt stellte ich mir deshalb die Frage nach dem Zeitaufwand das neue html u css3 zu lernen und vor Allem alles neu zu schreiben. Hatte wahrscheinlich eine zu einfache Vorstellung mit kleineren Änderungen zu einem responsive Design zu kommen.

          Werde dann mal im großen Netz schauen was ich an Euros für kostenpflichtige Angebote investieren müßte. Ist Dir zufällig etwas empfehlenswertes bekannt?

          Liebe Grüsse Brigitte

          1. problematische Seite

            Hallo

            Für mich sind die Bücher und Videokurse von Peter Müller fachlich sehr fundiert und sehr praxisfreundlich geschrieben beziehungsweise erstellt.

            Siehe zum Beispiel

            Peter Müller bei Amazon

            Gruss

            MrMurphy

            1. problematische Seite

              Guten Morgen,

              Siehe zum Beispiel Peter Müller bei Amazon

              und wer nicht gerne liest kann es sich von Peter Müller auch erklären lassen: https://www.video2brain.com/de/trainer/peter-m-mueller

              1. problematische Seite

                Danke, aber da handelt es sich um ein Abo - was mir ehrlich gesagt für meinen Zweck zu teuer ist. Ich will ja kein professioneller Web-Designer werden. Es handelt sich zwar um eine relativ umfangreiche, aber private Seite.

                1. problematische Seite

                  Nicht ganz, du kannst das Abo nach der ersten Zahlung sofort wieder kündigen. So mache ich dieses immer wieder, da ich auch nicht jeden Monat lerne.

        2. problematische Seite

          @@MrMurphy1

          Wenn du aktuelles HTML und CSS lernen willst haben sich eigentlich nur kostenpflichtige Videos oder Bücher bewährt.

          So ein Quatsch. Es ist auch sehr gutes Material frei verfügbar. Und man muss sich schon etwas trottelig anstellen, dies nicht zu finden.

          LLAP 🖖

          --
          “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
  2. problematische Seite

    Servus Brigitte!

    Hallo, Ich wollte mich mal wieder bei selfhtml informieren, da ich meine Webseite evtl. für mobile Geräte umstellen wollte.

    Da ist Selfhtml immer noch die richtige Adresse!

    Wenn ein Button angeboten wird Beispiel ansehen, bekomme ich immer die Meldung: Exception encountered, of type "Error"

    Wir stellen grad auf eine neue MediaWiki-Version um, und jetzt müssen alle Erweiterungen wieder eingebunden werden.

    Da ich vor Jahren als Laie Monate brauchte für hmtl und CSS ;-) wären Beispiele anzusehen sehr hilfreich bei der Überlegung ich ob sich der Aufwand lohnt?

    Der Aufwand wird für jemanden, der sich mit aktuellem HTML und CSS auskennt überschaubar sein, da die Inhalte offensichtlich bereits vorhanden sind.

    Wenn sich jemand mit aktuellem HTML und CSS nicht auskennt wird ihm das Anschauen von Webseiten und deren Quelltext nicht viel weiterhelfen. Dazu ist die gesamte Thematik viel zu komplex geworden.

    Wenn Du einen statischen Webauftritt mit sauberem HTML hast, ist der Aufwand nicht zu groß.

    Zur Einführung lies einmal diesen Artikel:

    Die heute nicht mehr so neuen HTML5-Elemente zur Seitenstrukturierung werden hier erklärt:


    Sobald die Templates wieder gehen, kannst Du sie Dir ja anschauen, aber runterladen und ausprobieren geht immer!

    Wichtig für responsives Design ist eigentlich vor allem:

    • Verzicht auf feste Breitenangaben,

    • Schriftgröße (und Maße) in relativen Größen wie em, damit eine größere Schriftgröße nicht das Design zerschießt

    • keine Höhenangaben für Elemente (Wenn der Inhalt auf schmalen Viewports zusammengeschoben wird, muss er nach unten ausweichen können.

    Für CSS sind folgende Tutorials wichtig:

    • media queries unterschiedliche Festlegungen für unterschiedliche Breiten, aber auch nach anderen Kriterien)

    • Flexbox

    Wenn du aktuelles HTML und CSS lernen willst haben sich eigentlich nur kostenpflichtige Videos oder Bücher bewährt.

    Das halte ich für Blödsinn!

    Im Internet finden sich zwar jede Menge kostenfreie Angebote und Informationen im Überfluß, aber die sind zum Lernen kaum geeignet, sondern eher zum Nachlesen, wenn einem etwas entfallen ist, weil man es zum Beispiel selten benötigt.

    Ich finde, dass die Angebote von Selfhtml gerade zum Selbststudium gut geeignet sind und kostenpflichtige Videos da nicht besser sind!

    Herzliche Grüße

    Matthias Scharwies

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

      @@Matthias Scharwies

      Für CSS sind folgende Tutorials wichtig:

      • media queries unterschiedliche Festlegungen für unterschiedliche Breiten, aber auch nach anderen Kriterien)

      • Flexbox

      Das wichtigste hast du vergessen:

      LLAP 🖖

      --
      “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
      1. problematische Seite

        vielen Dank, davon habe ich schon gelesen und am überlegen ob es für mich eine Alternative ist. Muss mich damit mal genauer beschäftigen.

        Bisher habe ich dazu allerdings fast ausschließlich nur in englisch etwas gefunden. Was bei meinen Sprachkenntnissen nicht unbedingt ideal ist.

        1. problematische Seite

          @@brigitte

          vielen Dank, davon habe ich schon gelesen und am überlegen ob es für mich eine Alternative ist. Muss mich damit mal genauer beschäftigen.

          Bisher habe ich dazu allerdings fast ausschließlich nur in englisch etwas gefunden. Was bei meinen Sprachkenntnissen nicht unbedingt ideal ist.

          Eben mal bei meinem geschätzten Kollegen nachgefragt, ob er da was hat.

          Hatter: Native CSS Grid Layouts ohne Framework – ein einfaches Beispiel

          LLAP 🖖

          --
          “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
          1. problematische Seite

            Hallo Gunnar, das ist ganz lieb. Vielen Dank Brigitte

          2. problematische Seite

            Eben mal bei meinem geschätzten Kollegen nachgefragt, ob er da was hat.

            Hatter: Native CSS Grid Layouts ohne Framework – ein einfaches Beispiel

            Vielleicht ist es deinem geschätzen Kollegen von Interesse, dass mein Firefox den Link mit "Diese Verbindung ist nicht sicher" beantwortet; Zitat:

            Der Inhaber von maddesigns.de hat die Website nicht richtig konfiguriert. Firefox hat keine Verbindung mit dieser Website aufgebaut, um Ihre Informationen vor Diebstahl zu schützen.

    2. problematische Seite

      Vielen Dank Matthias Scharwies,

      mit wenigen Ausnahmen verwendete ich für die Schrift schon em.

      Das Layout (div) ist allerdings Breitenangaben und in px. Muss mir dann etwas einfallen lassen, da ich bisher mein Menue links und fixiert hatte um immer darauf zugreifen zu können - nur die rechte Seite (Inhalt) ist scrollbar.

      Außerdem gibt es einige Seiten mit Übersichts-Tabellen. (z.B. Größentabellen)

      Höhenangaben habe ich bisher eigentlich nur bei Fotos die ich in 2 Größen erstellte (Vorschaubilder und normale Größe). (lightbox)

      Da ich bisher auf Darstellung Wert legte sind Fotos entweder mit float oder bei mehreren Fotos auch in einem div-container erstellt. Alle Bilder haben auch einen alt.Text - der mit Hilfe der Maus sichtbar sind.

      Ich sehe daher einige Probleme auf mich zukommen und werde mich mal damit auseinandersetzen um festzustellen ob es mit responsive Design (media queries), sowie einigen Änderungen in CSS möglich ist.

      Alle Seiten mit dem neuen html u CSS 3 neu zu schreiben scheint mir doch zu aufwendig. Bin bereits im Rentenalter und möchte das Ergebnis ja noch selber erleben ;-)

      1. problematische Seite

        Servus!

        Vielen Dank Matthias Scharwies,

        mit wenigen Ausnahmen verwendete ich für die Schrift schon em.

        Das Layout (div) ist allerdings Breitenangaben und in px. Muss mir dann etwas einfallen lassen, da ich bisher mein Menue links und fixiert hatte um immer darauf zugreifen zu können - nur die rechte Seite (Inhalt) ist scrollbar.

        Das ist für Desktop-Layout ja auch völlig ok:

        Lass dieses CSS so wie es ist und klammer' es in die media queries

        @media (min-width: 50em) { /* Desktop-Layout */ } {
          /* bisherige Festlegungen */
        }
        

        Vorher legst Du ein mobile CSS fest. Dort wird Dein Menü 100% breit, nicht fixiert und untereinander dargestellt.

        Auf breiten Bildschirmen trifft das Medienmerkmal der Abfrage zu und dein Menü wird links und fixed dargestellt.

        Außerdem gibt es einige Seiten mit Übersichts-Tabellen. (z.B. Größentabellen)

        Höhenangaben habe ich bisher eigentlich nur bei Fotos die ich in 2 Größen erstellte (Vorschaubilder und normale Größe). (lightbox)

        Da ich bisher auf Darstellung Wert legte sind Fotos entweder mit float oder bei mehreren Fotos auch in einem div-container erstellt. Alle Bilder haben auch einen alt.Text - der mit Hilfe der Maus sichtbar sind.

        Alle Bilder erhalten 100% Breite und kein float; in der Desktop-Media query sind die bisherigen Einstellungen notiert.

        Ich sehe daher einige Probleme auf mich zukommen und werde mich mal damit auseinandersetzen um festzustellen ob es mit responsive Design (media queries), sowie einigen Änderungen in CSS möglich ist.

        Zumindest eine Verbesserung des Ist-Zustands bei mobilen Geräten.

        Alle Seiten mit dem neuen html u CSS 3 neu zu schreiben scheint mir doch zu aufwendig. Bin bereits im Rentenalter und möchte das Ergebnis ja noch selber erleben ;-)

        Das muss man im Normalfall (außer es handelt sich um Frames oder Tabellen-Layout) auch nicht. Gut wäre es, in allen Dateien den neuen Doctype und die Viewport-Einstellung einzufügen:

        
        <!DOCTYPE html>
        <html lang="de">
          <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
        

        (Utf-8 natürlich nur, wenn die Dateien auch in utf-8 gespeichert sind.)

        Herzliche Grüße

        Matthias Scharwies

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

          Hallo Matthias, ganz lieben Dank, dann werde ich es mal ändern und testen.

          auf meiner Seite steht: charset=iso-8859-1 - (da ich alle Umlaute entsprechend codiert habe, wäre es wohl zuviel Aufwand, auf utf-8 zu ändern)

          1. problematische Seite

            Hallo

            auf meiner Seite steht: charset=iso-8859-1 - (da ich alle Umlaute entsprechend codiert habe, wäre es wohl zuviel Aufwand, auf utf-8 zu ändern)

            Wenn du mit den kodierten Umlauten &auml; u.s.w. meinst, das funktioniert in UTF-8 genauso gut oder schlecht, wie in ISO-8859-1 oder 8859-15. Davon abgesehen ist es in UTF-8 genausowenig notwendig, wie in ISO-8859-1 oder 8859-15. Wenn du eine bestimmte Kodierung, die die Umlaute enthält, deklarierst und auch tatsächlich benutzt, brauchst du die Umlaute nicht maskieren.

            Unmaskiert, also als „ä“, „ö“, „ü“, u.s.w., würden die Umlaute dir erst in dem Moment auf die Füße fallen, in dem du die Kodierung des Dokuments ändern würdest. Das passiert aber nicht alle Tage. Dann lohnt sich aber auch der einmalige Aufwand der Dokumentpflege.

            Tschö, Auge

            --
            Wenn man ausreichende Vorsichtsmaßnahmen trifft, muss man keine Vorsichtsmaßnahmen mehr treffen.
            Toller Dampf voraus von Terry Pratchett
      2. problematische Seite

        @@brigitte

        Alle Bilder haben auch einen alt.Text - der mit Hilfe der Maus sichtbar sind.

        Nei-en! Der Alternativtext ist für Nutzer, die keine Bilder sehen können – sei es, weil sie einen Textbrowser benutzen; das Laden von Bildern deaktiviert haben; Bilder wegen falschem URI, abgebrocher Netzwerkverbindung oder sonstwas nicht geladen werden; oder weil sie nicht sehen können.

        Nutzer, bei denen das Bild dargestellt wird, sollten den Alternativtext nicht zu sehen bekommen.

        Verwechselst du alt mit title? Für title sehe ich kaum sinnvolle Anwendungen.

        LLAP 🖖

        --
        “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
        1. problematische Seite

          Hallo Gunnar, klar hast Du Recht - habe beides ;-) und meinte natürlich title. Entschuldige dass ich die Begriffe durcheinander warf.

          Als ich mich beim Erstellen der Webseite so kreuz und quer durchs Netz informierte (da keinerlei Vorkenntnisse) wurde es zudem auch empfohlen. Kann ja sein dass sich Empfehlungen / Richtlinien alle paar Jahre ändern - ich aber bestimmt nicht meine komplette Seite.

          Ergibt für mich auch Sinn, da eben alle Fotos meist sehr aussagefähig beschriftet sind. Da teilweise so eine Art kleinere Bildergalerien eingebunden sind, gehen Details nicht immer aus dem geschriebenen Text hervor. Wegen der Einheitlichkeit habe ich es halt generell gemacht.

          Ob jetzt sinnvoll oder nicht, liegt sicher im Auge des Betrachters. Einen Nachteil kann ich zumindest nicht erkennen.

          1. problematische Seite

            @@brigitte

            [title-Attribut] Ob jetzt sinnvoll oder nicht, liegt sicher im Auge des Betrachters. Einen Nachteil kann ich zumindest nicht erkennen.

            Ich schon. Die Information im title-Attribut ist für viele (die Mehrheit) der Nutzer überhaupt nicht zugänglich. Ich weiß nicht, wie deine Zielgruppe aussieht, aber. i.A. hat die Mehrheit derjenigen, die so im Web unterwegs sind, überhaupt keine Maus. Also auch kein Hover, title wird nicht angezeigt. (Bei mir wird es das, wenn ich den Finger lange auf dem Bild lasse; also die Geste, die man macht, um ein Bild zu speichern. Das wird wohl kaum ein Nutzer tun, um etwaigen title-Text zu lesen zu bekommen.)

            Bringe also die Bildinforation anders auf der Webseite unter. Wenn es denn was zum Ausklappen sein soll: details/summary. Und weg mit dem title-Attribut!

            LLAP 🖖

            --
            “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
            1. problematische Seite

              Hallo Gunnar,

              Schwerpunkt meiner Seite sind neben Informationen Reiseberichte aus USA und Kanada. Daher auch viele Bilder. Soweit mir bekannt ist, sind bisher die meisten Besucher mit PC unterwegs, wenn sie nicht gerade eine bestimmte Info suchen.

              Aber wenn ich mich schon an die Arbeit mache, werde ich selbstverständlich Deinem Tipp folgen. Bin selbst nur mit PC unterwegs und daher wäre mir es nicht aufgefallen.

              Herzlichen Dank für den Hinweis.

              Für Profis sicher eine dumme Frage: wie verhält es sich dann mit Links? Da ich von Datenbanken keine Ahnung hatte und es nicht wirklich verstand, habe ich u. a. in mühevoller Arbeit mehrere alph. Inhaltsverzeichnisse erstellt, welches direkt zum jeweiligen Artikel verlinkt ist. Dies ist u. a. ein Unterschied zu den ähnlichen Seiten und wird auch sehr gerne genutzt.

    3. problematische Seite

      vielen Dank,