nicht angemeldet MB
Orlok
MB
MB
MB
Gunnar Bittersmann
MB
Felix Riesterer
MB
Gunnar Bittersmann
MB
Gunnar Bittersmann
MB
Tabellenkalk
Guten Abend Liebe Community,
ich habe die Seite von meinem Webspace aufgezogen rein für die JavaScript Testung. Ich hoffe es steht alles da was gefordert. Wenn einer von euch kann, testet bitte die Seite und schreibt mir entweder ne PN, hier im Thrat oder per EMail. Konstruktive Kritik sind erwünscht. Ich bin kein Profi. Ihr könnt auch den Code downloaden. Und es ist ein Teil-Projekt, der rest kommt noch!
viele liebe Grüße, MB
Hallo
[…] Wenn einer von euch kann, testet bitte die Seite und schreibt mir entweder eine PN, hier im Thread oder per E-Mail. Konstruktive Kritik ist erwünscht. Ich bin kein Profi. Ihr könnt auch den Code downloaden. Und es ist ein Teil des Projektes, der Rest kommt noch!
Also, ich habe mir den Code mal kurz angesehen und soweit ich das auf den ersten Blick erkennen kann, baust du hier unter Verwendung von JavaScript ultrakompliziert Funktionalität nach, die im Browser bereits implementiert ist, was mir wenig sinnvoll erscheint.
Für die Gestaltung und mithin das Layout einer Webseite ist CSS das Mittel der Wahl, nicht JavaScript!
Wenn ich mir dein Markup und dein Stylesheet anschaue, drängt sich mir der Gedanke auf, dass du dich bislang noch nicht wirklich mit HTML und CSS auseinandergesetzt hast, und dies einmal zu tun, scheint mir der hilfreichste Hinweis zu sein, den ich dir hier zu geben vermag.
Ich kann dir nur dringend raten, dich einmal damit zu beschäftigen, welche Rolle die verschiedenen Techniken bei der Erstellung einer Webseite spielen, und wenn du dies getan hast, deinen bisherigen Ansatz nochmals zu überdenken!
Die Aufgabe von HTML etwa ist es, Inhalte semantisch auszuzeichnen, was schon allein aus Gründen der Barrierefreiheit von fundamentaler Bedeutung ist.
Dazu gehört beispielsweise, Tabellen nicht zum Layouten zu missbrauchen, denn Tabellen sind für die Auszeichnung tabellarischer Daten gedacht, und auch nur dafür. Ebenso ist ein Link ein Link und keine Überschrift, und statt solchen Konstruktionen wie <div id="header"> solltest du HTML5 und die entsprechenden Elemente verwenden. Nur um mal ein paar Beispiele zu nennen.
Auch hast du tausende META-Elemente in deinem HEAD von denen die allermeisten bestenfalls völlig nutzlos sind, wohingegen aber zum Beispiel eine Angabe zum Viewport fehlt:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Hast du dir deine Seite mal auf einem Smartphone angesehen oder wenigstens das Browserfenster mal etwas kleiner skaliert? – Kurz gesagt: Deine Webseite ist alles andere als responsive…
Womit wir wieder am Anfang wären, denn gerade zu diesem Zweck wurde etwa das Flexbox-Modell entwickelt welches in Verbindung mit Media Queries und der oben genannten Angabe zum Viewport die entsprechende Funktionalität bereitstellt, um Webseiten ohne größeren Aufwand responsiv zu gestalten.
Dein Versuch, die in CSS bereits eingebaute Funktionalität in JavaScript nachzubauen, ist meiner Ansicht nach nicht nur überflüssig, sondern zudem auch prinzipiell zu Scheitern verurteilt…
Jedenfalls wie dem auch sei, ich nehme an, das ist nicht die Art von konstruktiver Kritik, die du dir erhofft hast, aber die Empfehlung, dich zunächst mit dem Zweck und den Fähigkeiten von HTML und vor allem CSS vertrauter zu machen, bevor du an dem Projekt weiterarbeitest, ist glaube ich der beste Ratschlag, den ich dir im Moment geben kann.
Gruß,
Orlok
Hallo Orlok,
erstmal recht herzliche Dank das du dir Mühe gemacht hast. Und du kannst dir leider alles was du mir geraten hast schenken. All das ist mir klar. Hast du den Inhalt nicht gelesen? Ich hab ein JS entwickelt das die Version 1.5 betrifft und css 2.1. Flexbox gab es nicht und die Sematik in HTML 5 aucht nicht. Ich habe ja XHTML verwendet, die vorstufe von HTML 5. Und Ich will HTML5, CSS 3 genau das Layout machen, aber ich bin noch dabei da in der Browserkpatibilität anzufertigen. Außerdem ist es ein Schulprojekt. In der Arbeitsweise ich arbeite AUSSCHLIESSLICH mit JS 1.5 und in Manual. Das schafft CSS 2.1 nicht!
Hast du das nicht gelesen, oder habe ich mich nicht klar genug ausgedrückt, das ich das grade eben nicht will? Später, nicht in diesem Projekt.
Tut mir leid um die vergebene Liebesmüh :/. Aber Danke das dus aufgezeigt hast. Ich werde mich danacht orientieren wenn weiter mit HTML 5 und CSS 3 geht.
Herzliche Grüße, MB
Tach,
Hast du den Inhalt nicht gelesen? Ich hab ein JS entwickelt das die Version 1.5 betrifft und css 2.1. Flexbox gab es nicht und die Sematik in HTML 5 aucht nicht. Ich habe ja XHTML verwendet, die vorstufe von HTML 5. Und Ich will HTML5, CSS 3 genau das Layout machen, aber ich bin noch dabei da in der Browserkpatibilität anzufertigen. Außerdem ist es ein Schulprojekt. In der Arbeitsweise ich arbeite AUSSCHLIESSLICH mit JS 1.5 und in Manual. Das schafft CSS 2.1 nicht!
Hast du das nicht gelesen, oder habe ich mich nicht klar genug ausgedrückt, das ich das grade eben nicht will? Später, nicht in diesem Projekt.
davon steht weder auf der Seite noch in deinem OP etwas.
Ich weiß auch nicht, was du genau umsetzen wolltest; ich sehe ein relativ simples Layout mit festem Header, Footer und linkem Menü; in CSS 2.1 also etwas wie in diesem Beispiel, minimal umgeschrieben für dein HTML sähe das CSS, um die Elemente an ihren Platz zu bringen, also etwa so aus (Hacks für alte IE mal weggelassen):
body {height:100%; max-height:100%; overflow:hidden; padding:0; margin:0; border:0;}
#article {overflow:auto; position:absolute; z-index:3; top:100px; bottom:50px; left:200px; right:0; background:#eee;}
#header {position:absolute; margin:0; top:0; left:0; display:block; width:100%; height:100px; background-color:#ddd; z-index:5; overflow:hidden; color:#fff;}
#footer {position:absolute; margin:0; bottom:0; left:0; display:block; width:100%; height:50px; z-index:5; overflow:hidden; background-color:#bbb; color:#fff;}
#menu {position:absolute; left:0; top:100px; bottom:50px; width:200px; background-color:ccc; z-index:4; overflow:auto;}
Keine schöne Lösung, da mit position:absolute und festen Pixelgrößen gearbeitet wird, aber die erste die ich gefunden habe.
Ich werde mich danacht orientieren wenn weiter mit HTML 5 und CSS 3 geht.
Ist das immer noch der typische Schulansatz, der erst veraltete Technik lehrt, bevor man zu modernen Methoden kommt; einer meiner Berufsschullehrer war ziemlich perplex, als ich ihn fragte, warum wir uns wochenlang mit Classful Routing beschäftigen, als das schon über 10 Jahre durch CIDR abgelöst war.
mfg
Woodfighter
Hallo Woodfighter,
Hast du den Inhalt nicht gelesen?
davon steht weder auf der Seite noch in deinem OP etwas.
in ersten Aufzählung-Liste im ersten Punkt: In diesem Projekt arbeite ich AUSSCHLIEßLICH mit JavaScript 1.5
und im Manual: Absatz Browserkompatinilität -JavaScrip 1.5
muss ich woll das noch deutlich machen :/. Danke für den Beitrag ihr beide.
ich sehe ein relativ simples Layout ...
Das war mein ziehl. Ein "simples" bewegendes Layout zugestalten unabhängig von der Auflösung. Aber es ist noch keine Fertigversion
Du arbeitest mit Absoluten Werten, Ich ja auch aber relativ zum display und zum Viewport. De errechnen sich. Da berechnet das Skirpt die pixel zu der relativen breite höhe und bewegt sich in relativ zum Viewport/Display.
Liebe Grüße,
MB
Tach,
Hast du den Inhalt nicht gelesen?
davon steht weder auf der Seite noch in deinem OP etwas.
in ersten Aufzählung-Liste im ersten Punkt: In diesem Projekt arbeite ich AUSSCHLIEßLICH mit JavaScript 1.5
nein, du nutzt auch HTML und CSS (auch wenn du die CSS-Eigenschaften zum größten Teil per Javascript setzt).
ich sehe ein relativ simples Layout ...
Das war mein ziehl. Ein "simples" bewegendes Layout zugestalten unabhängig von der Auflösung. Aber es ist noch keine Fertigversion
Du arbeitest mit Absoluten Werten, Ich ja auch aber relativ zum display und zum Viewport. De errechnen sich. Da berechnet das Skirpt die pixel zu der relativen breite höhe und bewegt sich in relativ zum Viewport/Display.
davon sehe ich fast nichts, verkleinere ich mein Browserfenster vertikal, ändert sich fast nichts, irgendwann überlagert der Footer die restlichen Inhalte, bei ungefähr 800px Bodyhöhe werden Header und Footer sprunghaft kleiner und scheinen ansonsten konstant; bei horizontalem Verkleinern, bleiben die Absätze immer bei 800pt Breite und ich muss horizontal scrollen, das einzige was sich bewegt sind die Abstände der Ansätze und der Abstand der Texte in Header und Footer zur Mitte hin. Da ist das von mir genannte Beispiel erheblich besser in der Anpassung an mein Browserfenster.
Noch ein Hinweis, dein XHTML ist nicht valide, Absätze können darin keine Listen enthalten.
mfg
Woodfighter
Hallo,
nein, du nutzt auch HTML und CSS (auch wenn du die CSS-Eigenschaften zum größten Teil per Javascript setzt).
So gesenhen natürlich. über element.style.eigenschaft = "wert"; aber nur daraus.
davon sehe ich fast nichts, verkleinere ich mein Browserfenster vertikal, ändert sich fast nichts.
soll ja auch nicht.
irgendwann überlagert der Footer die restlichen Inhalte, bei ungefähr 800px Bodyhöhe werden Header und Footer sprunghaft kleiner und scheinen ansonsten konstant;
das war mein Ziel :-). anhand des viewports oder display. je nach einstellung.
Noch ein Hinweis, dein XHTML ist nicht valide, Absätze können darin keine Listen enthalten.
aaah ok, besten dank. werde ich verbesser.
Gruß MB
@@MB
anhand des viewports oder display. je nach einstellung.
Die Größe des Displays ist nichts, was dich interessieren sollte. Relevant ist die Größe des Viewports.
Und da bist du mit media queries in CSS bestens bedient. JavaScript ist fehl am Platz.
LLAP 🖖
@@MB
in ersten Aufzählung-Liste im ersten Punkt: In diesem Projekt arbeite ich AUSSCHLIEßLICH mit JavaScript 1.5
Wenn du schon LAUT wirst, dann sei bitte konsequent und verwende AUSSCHLIEẞLICH Großbuchstaben.
Ein kleines ß inmitten von Großbuchstaben ist eine Beleidigung für die Augen der Leser.
LLAP 🖖
Hallo Gunnar,
Wenn du schon LAUT wirst, dann sei bitte konsequent und verwende AUSSCHLIEẞLICH Großbuchstaben.
War ohne absicht. Danke für den Hinweis
Ein kleines ß inmitten von Großbuchstaben ist eine Beleidigung für die Augen der Leser.
Ich wollte nur Betonen. Nichts weiter.
LG MB
Lieber MB,
Ich habe ja XHTML verwendet, die vorstufe von HTML 5.
warum?
Und Ich will HTML5, CSS 3 genau das Layout machen, aber ich bin noch dabei da in der Browserkpatibilität anzufertigen.
Hä, bitte? Du willst Uralt-Technik benutzen, damit Uralt-Software damit klar kommt, anstatt neue Technik zu nutzen, und für Uralt-Software eine Kompatibilitätsschicht (z.B: HTML5 Shiv) bereitstellen.
Warum??
Außerdem ist es ein Schulprojekt.
Sehr ehrenwert. Viele von meinen Werken sind auch Schulprojekte - fast jeden Tag.
In der Arbeitsweise ich arbeite AUSSCHLIESSLICH mit JS 1.5 und in Manual.
Warum unbedingt und ausschließlich JS 1.5? Das wurde vor fünfzehn Jahren veröffentlicht und vor ziemlich genau zehn(!) Jahren(!!) von Version 1.6 abgelöst. Aktuell ist anscheinend 1.8.5 (Quelle Wikipedia). Der Firefox setzt schon seit fast acht(!) Jahren auf JS 1.8 bzw. 1.8.5! Warum Du nicht?
Das schafft CSS 2.1 nicht!
Was genau schafft CSS2.1 nicht? Kann es nicht "in Manual" arbeiten? Was meinst Du damit überhaupt? Was soll dieses "in Manual" bedeuten? Und warum sperrst Du Dich gegen das, was Browser heute zu leisten im Stande sind, nur weil Du diese fixe Idee der Abwärtskompatibilität hast? Wie tief möchtest Du denn abwärts kompatibel sein?
Wenn ein alter Browser neuere CSS3-Fähigkeiten nicht hat, dann kann es gut sein, dass er die CSS 2.1-Fähigkeiten z.T. fehlerhaft beherrscht (beim IE eine gute alte Tradition, deswegen wird er entsorgt und durch Edge ersetzt). Daher rüstet man für einen solchen Browser eine JavaScript-Bibliothek nach und kümmert sich um aktuelle Standards. Alles andere ist Wühlen im Staub des Museums!
Hast du das nicht gelesen, oder habe ich mich nicht klar genug ausgedrückt, das ich das grade eben nicht will? Später, nicht in diesem Projekt.
Du verheimlichst leider Deine Beweggründe. Ein einfaches "ich will halt nicht" ist bestens dazu geeignet, dass man Dir nicht weiterhelfen will und sich stattdessen sagt: "Ach komm, lass doch den Spinner auf seine Art glücklich sein!"
Tut mir leid um die vergebene Liebesmüh :/. Aber Danke das dus aufgezeigt hast. Ich werde mich danacht orientieren wenn weiter mit HTML 5 und CSS 3 geht.
Wer soll da noch Lust haben, Dir zu helfen? Bestimmt hast Du dann auch wieder nicht nachvollziehbare Beschränkungen, die Du eisern für Dich behältst.
Liebe Grüße,
Felix Riesterer.
Lieber Felix,
Hä, bitte? Du willst Uralt-Technik benutzen, damit Uralt-Software damit klar kommt, anstatt neue Technik zu nutzen, und für Uralt-Software eine Kompatibilitätsschicht (z.B: HTML5 Shiv) bereitstellen.
Ich hab mir das ziel gesetzt ab js 1.5 aufwärts. damit es möglichst viele browser unterstützen.
Warum unbedingt und ausschließlich JS 1.5? Das wurde vor fünfzehn Jahren veröffentlicht und vor ziemlich genau zehn(!) Jahren(!!) von Version 1.6 abgelöst. Aktuell ist anscheinend 1.8.5 (Quelle Wikipedia). Der Firefox setzt schon seit fast acht(!) Jahren auf JS 1.8 bzw. 1.8.5! Warum Du nicht?
Ich will alle Browser bin einbeziehen aber vielleicht habe ich ja zu tief in der Suppe gerührt
Wie tief möchtest Du denn abwärts kompatibel sein?
tief aber nicht sotief wie js 1.0. Es soll schon was können. Und "in Manual" meine ich die Datei Manual.PDF im Download-Vetuzeichnis.
Du verheimlichst leider Deine Beweggründe.
Absolut nicht. Warum auch? Doch es ist ziehmlich anstrengen mich auszudrücken und meine Beweggründe darzustellen. Aber ich seh es nun ein das ich auf m falschen dampfer bin. Aber man muss auch mal erfahrungen gemacht haben.
Liebe Grüße, MB
Tach,
Ich hab mir das ziel gesetzt ab js 1.5 aufwärts. damit es möglichst viele browser unterstützen.
dann hast du den falschen Ansatz verwendet; nicht funktionierendes/eingeschränktes/deaktiviertes Javascript ist häufiger anzutreffen als das bei CSS der Fall ist. In meinen Standard-Browsern sieht deine Seite nämlich so aus (restliches Weiß nach unten abgeschnitten): 
mfg
Woodfighter
Tach,
Aber ich seh es nun ein das ich auf m falschen dampfer bin. Aber man muss auch mal erfahrungen gemacht haben.
jup, und aus den Erfahrungen anderer zu lernen, sorgt sogar noch dafür, dass man nicht alle Fehler erst selber machen muss ;-) Also HTML5 statt XHTML, das ist abwärtskompatibel (auch wenn es für manches einen Shiv braucht); CSS fürs Layout; Javascript, wo es nicht anders geht oder zum Anreichern von Funktionen. Was die Browser angeht, nicht zu weit in die Vergangenheit schauen (sonst hole ich meinen Netscape 4 raus), aber dafür ruhig mal einen Blick auf lynx, links oder ähnliches und vor allem mobile Browser werfen werfen.
mfg
Woodfighter
Hallo,
jup, und aus den Erfahrungen anderer zu lernen, sorgt sogar noch dafür, dass man nicht alle Fehler erst selber machen muss ;-)
Leider muss ich alle vfehler selbst machen. Denn mir fehl schlicht und einfach die kommunikation
Was die Browser angeht, nicht zu weit in die Vergangenheit schauen (sonst hole ich meinen Netscape 4 raus)
ok ich bin gewarnt ;-)
lg mb
@@MB.
Ich will alle Browser bin einbeziehen
“I support every browser. I optimize for none.” —Jeremy Keith
Einbeziehen, ja. Aber muss eine Webseite auf allen Browsern exakt gleich aussehen?
aber vielleicht habe ich ja zu tief in der Suppe gerührt
Ja, das hast du.
„Anstatt seine Zeit mit dem Versuch zu verbringen, Webseiten in den verschiedensten Browsern gleich aussehen zu lassen, kann man seine Zeit darin investieren sicherzustellen, dass die Kernfunktion dessen, was man baut, überall funktioniert, und gleichzeitig in fähigeren Browsern die bestmögliche Nutzungserfahrung zu bieten.“ —Jeremy Keith
Mit den zwei vorangehenden Absätzen auf deutsch; der ganze Artikel auf englisch.
LLAP 🖖
Danke Gunnar, lg mb
@@MB
Ich habe ja XHTML verwendet, die vorstufe von HTML 5.
Nein. XHTML 1 ist der Sprachumfang von HTML 4 in XML-Syntax. HTML5 ist erweiterter Sprachumfang (einiges ist auch weggefallen), aber nicht in XML-Syntax, nicht einmal SGML. Man kann HTML5 nicht als Nachfolger von XHTML 1 ansehen.
Man kann HTML5 auch in XML-Syntax schreiben (nennt sich dann „polyglottes HTML“). Zu XHTML5 wird es erst, wenn es als XML ausgeliefert (d.h. mit einem Medientypen wie application/xhtml+xml) und verarbeitet wird. Empfehlenswert ist letzteres eher nicht.
Du solltest HTML5 verwenden, nicht XHTML 1. Die Neuerungen bieten Verbessern hinsichtlich Benutzbarkeit und Barrierefreiheit einer Seite.
HTML-Parser von Browsern interpretieren sowieso alles, was ihnen bekannt ist. Das trifft auch auf CSS zu. Insofern ist es unsinnig, nur das zu verwenden, was es schon in CSS 2 gab.
Ich werde mich danacht orientieren wenn weiter mit HTML 5 und CSS 3 geht.
„Werde“ und „wenn“ im Schabowskischen Sinne: sofort, unverzüglich.
LLAP 🖖
PS: Wenn du deine Seiten als text/html ausliefern wirst, bedenke, dass du die Sprache mit dem lang-Attribut angeben musst, nicht mit xml:lang. In polyglotten HTML beide Attribute mit demselben Wert.
Jut danke lg mb
Hallo Orlok,
Nachtrag:
Wenn ich mir dein Markup und dein Stylesheet anschaue, drängt sich mir der Gedanke auf, dass du dich bislang noch nicht wirklich mit HTML und CSS auseinandergesetzt hast, und dies einmal zu tun, scheint mir der hilfreichste Hinweis zu sein, den ich dir hier zu geben vermag.
Ja, ich geb dir schon recht. Aber ich möchte bitte nochenmal Betonen: In erster linie dient die Webseite Primär der Veranschaulichung des Skripts. CSS, und XHTML sind nicht das Thema. Ich hab bücher mit CSS 2.1 und HTML 4.1 gelesen und nicht nur einsteiger.
Dazu gehört beispielsweise, Tabellen nicht zum Layouten zu missbrauchen
Da ich die steite um 1:00 Nachts zusammen geschustert habe und ich mich mit CSS eine graume weile nich beschäftigt habe habe ich Tabellen missbraucht ja.
Auch hast du tausende
META-Elemente in deinemHEADvon denen die allermeisten bestenfalls völlig nutzlos sind, wohingegen aber zum Beispiel eine Angabe zum Viewport fehlt:
Sehe ich ein. Kenn mich aber in meta-angaben weniger aus. Das hast du schon recht.
Hast du dir deine Seite mal auf einem Smartphone angesehen oder wenigstens das Browserfenster mal etwas kleiner skaliert? – Kurz gesagt: Deine Webseite ist alles andere als responsive…
eher AWD. Aber das Skript ist ja noch nicht fertig.
Ich hoffe das es jetzt besser klar ist.
Herzliche Grüße, MB
Hallo,
warum befindet sich dieser Thread eigentlich im Meta-Forum?
Gruß
Kalk