Frage zum Wiki-Artikel „Template3“
brigitte
- css
- frage zum wiki
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
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
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?
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
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
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
Gruss
MrMurphy
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
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.
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.
@@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 🖖
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)
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
@@Matthias Scharwies
Für CSS sind folgende Tutorials wichtig:
media queries unterschiedliche Festlegungen für unterschiedliche Breiten, aber auch nach anderen Kriterien)
Das wichtigste hast du vergessen:
CSS Grid
Das macht Media queries mitunter überflüssig.
LLAP 🖖
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.
@@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 🖖
Hallo Gunnar, das ist ganz lieb. Vielen Dank Brigitte
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.
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 ;-)
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
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)
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 ä
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
@@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 🖖
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.
@@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 🖖
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.