nicht angemeldet
Dynamisch erzeugte Navigation / Usability
Matthias Apsel
Der MartinHallo,
auch ich habe ein Problem ... Worum geht es?
Ich habe auf einer Seite einen Infobereich mit mehreren Ebenen, von denen jeweils nur eine angezeigt wird. Das klappt :-) Dabei erfolgt -- wegen des Designs -- der Wechsel der Ebenen nicht über ständig sichtbare Tabs oder ähnliches, sondern über eine auf jeder der Ebenen liegende Navigation. Das klappt auch :-)
Was finde (nur?) ich nun blöd?
Es handelt sich um die Website einer Schule, ist also eine offizielle Website, die aber wohl weniger vom Büro aus (IE6, Mosaic ...) aufgerufen wird. Aus Prinzip möchte ich die Seite aber für möglichst _alle_ sinnvoll bzw. ohne Irritationen bauen. Wer einen Browser ohne CSS und Javascript hat, sieht alle Ebenen untereinander. Was den Inhalt betrifft, ist das völlig okay. Nur sieht er auch (vier- bis fünfmal) eine Navigation, die für ihn eben nicht zweckmäßig ist. Nun könnte ich die Navigation dynamisch mit Javascript erzeugen, um den Nutzern alter Browser die Irritation zu ersparen ...
Erste Frage: Leider kriege ich das mit dem dynamischen Erzeugen nicht richtig hin (Javascript funktioniert irgendwie anders als mein Hirn).
Am besten (?) wäre es, alles mit document.writeln() in die HTML-Datei zu schreiben. Problem: Nur weiß ich nicht, wie ich die Navigation(en) gezielt in die section-Tags mit der entsprechenden ID kriege. (Antwort hierauf würde mir sehr helfen!)
Aber falls diese Lösung sch***e/unmöglich ist und ich mit DOM-Methoden arbeiten soll (grusel!): Wie generiere ich den ganzen "Krempel", der sich in den a-Tags befindet? Alles mit createAttribute(), setAttribute() usw.? Ist "onclick" dann ein Attribut? Herr im Himmel, Hilfe! Hat jemand ein paar Tipps/Links dazu, wie ich prinzipiell vorgehen sollte?
Erzeugt werden soll, alles in einem section-Tag mit einer ID liegend:
<nav>
<ul>
<li><a href="irgendwohin.html" onclick="toggle('andereEbene1'); return false;" title="Lorem ipsum">Ebene1</a></li>
<li><a href="irgendwohin.html" onclick="toggle('andereEbene2'); return false;" title="Lorem ipsum">Ebene2</a></li><ul>
<li><a href="irgendwohin.html" onclick="toggle('andereEbene3'); return false;" title="Lorem ipsum">Ebene3</a></li>
<li><a href="irgendwohin.html" onclick="toggle('andereEbene4'); return false;" title="Lorem ipsum">Ebene4</a></li>
</ul>
</nav>
Dazu kommt noch, dass natürlich auf jeder Ebene ein Link fehlt (der, der auf die aktuelle Ebene verweist), das heißt ich muss alles mehrmals machen ...
Zweite Frage: Oder ist das alles (das Erscheinen der Navigation in alten Browsern) ein "Luxusproblem", um das ich mich nicht weiter kümmern sollte?
Hoffe, ich konnte mich einigermaßen verständlich machen ...
Lieben Gruß
Johann Friedrich
PS: Ich möchte nicht mit JQuery arbeiten.
-
Om nah hoo pez nyeetz, Johann Friedrich Lessing!
Eine Navigation sollte grundsätzlich ohne JavaScript funktionieren und auch Nutzer ohne JavaScript nicht verwirren.
Leider werde ich aus deiner Beschreibung nicht so richtig schlau, kannst du ein Beispiel online stellen? Es ist sicher nicht notwendig, viermal dieselbe Navigation zu haben.
Matthias
-
Om nah hoo pez nyeetz, Johann Friedrich Lessing!
Äh, wünsche Dir auch den Segen des Tages? :-)
Eine Navigation sollte grundsätzlich ohne JavaScript funktionieren und auch Nutzer ohne JavaScript nicht verwirren.
Leider werde ich aus deiner Beschreibung nicht so richtig schlau, kannst du ein Beispiel online stellen? Es ist sicher nicht notwendig, viermal dieselbe Navigation zu haben.Ja, ist alles etwas kompliziert ... Es geht _nur_ um die Navigation der vier Ebenen, die per Javascript eingeblendet werden (ohne JS -> keine Ebene mit JS-Navigation). Das Problem sind alte Browser mit JS, aber ohne CSS, bei denen ich eine statisch erzeugte JS-Navigation nicht ausblenden kann. Deshalb mein Ansatz, die Navigation der vier einzublendenden Ebenen (info1 bis info4) dynamisch mit Javascript zu generieren. Und viermal brauche ich es wg. des Designs und der sich ändernden Links ...
Leider habe ich momentan keine Möglichkeit, etwas hochzuladen, deshalb anbei der Gesamtcode (es ist nur eine Test-Seite, Ungenauigkeiten bitte entschuldigen; der Code ist etwas anders als der zunächst gepostete, das Prinzip aber dasselbe). Ggf. bitte einfach alles in eine Datei kopieren und lokal angucken.
Lieben Gruß!
JFL
hier der Code:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta charset="UTF-8">
<style type="text/css">
body, div {
margin:0;
padding:0;
border:0
}
body {
width:auto;
background-color:#999;
padding:5%;
}
div {
width:60%;
height:300px;
padding:5%;
}
#info0 {
background-color:#fff;
position:absolute;
top:0;
left:0;
}
#info1 {
background-color:#f33;
position:absolute;
top:0;
left:0;
}
#info2 {
background-color:#f66;
position:absolute;
top:0;
left:0;
}
#info3 {
background-color:#f99;
position:absolute;
top:0;
left:0;
}
#info4 {
background-color:#fcc;
position:absolute;
top:0;
left:0;
}
.an {
opacity:1;
transition:opacity 0.5s ease 0.2s;
z-index:2;
}
.aus {
opacity:0;
transition:opacity 0.5s ease 0.2s;
z-index:1;
}
.an div, .aus div {
height:30px;
width:auto;
margin:0;
padding:0;
border:0;
background-color:#0ff;
}
</style>
<script>
function toggle(id) {
var d = document.getElementById('quickInfo').getElementsByTagName('div');
var elem = document.getElementById(id);
for (var i = 0; i < d.length; i++) {
if (d[i].className == 'an' || d[i].className == 'aus') {
d[i].className = 'aus';
}
if (elem) {
elem.className = 'an';
}
}
}
</script>
</head>
<body>
<div id="quickInfo">
<div id="info0" class="an">
<div class="rot"><p>Absatz auf Ebene 0</p></div>
<p>Übersicht</p>
<p><a href="x.html" onclick="toggle('info1'); return false;">eins</a></p>
<p><a href="x.html" onclick="toggle('info2'); return false;">zwei</a></p>
<p><a href="x.html" onclick="toggle('info3'); return false;">drei</a></p>
<p><a href="x.html" onclick="toggle('info4'); return false;">vier</a></p>
</div>
<div id="info1" class="aus">
<div><p>Absatz auf Ebene 1</p></div>
<p><a href="#" onclick="toggle('info0'); return false;">zurück</a></p>
<p>eins</p>
<p><a href="#" onclick="toggle('info2'); return false;">zwei</a></p>
<p><a href="#" onclick="toggle('info3'); return false;">drei</a></p>
<p><a href="#" onclick="toggle('info4'); return false;">vier</a></p>
</div>
<div id="info2" class="aus">
<div><p>Absatz auf Ebene 2</p></div>
<p><a href="#" onclick="toggle('info0'); return false;">zurück</a></p>
<p><a href="#" onclick="toggle('info1'); return false;">eins</a></p>
<p>zwei</p>
<p><a href="#" onclick="toggle('info3'); return false;">drei</a></p>
<p><a href="#" onclick="toggle('info4'); return false;">vier</a></p>
</div>
<div id="info3" class="aus">
<div><p>Absatz auf Ebene 3</p></div>
<p><a href="#" onclick="toggle('info0'); return false;">zurück</a></p>
<p><a href="#" onclick="toggle('info1'); return false;">eins</a></p>
<p><a href="#" onclick="toggle('info2'); return false;">zwei</a></p>
<p>drei</p>
<p><a href="#" onclick="toggle('info4'); return false;">vier</a></p>
</div>
<div id="info4" class="aus">
<div><p>Absatz auf Ebene 4</p></div>
<p><a href="#" onclick="toggle('info0'); return false;">zurück</a></p>
<p><a href="#" onclick="toggle('info1'); return false;">eins</a></p>
<p><a href="#" onclick="toggle('info2'); return false; return false;">zwei</a></p>
<p><a href="#" onclick="toggle('info3'); return false;">drei</a></p>
<p>vier</p>
</div>
</div>
<div id="holunder">
<div><p>Dies ist ein Test!</p></div>
</div>
</body>
</html>-
Das Problem sind alte Browser mit JS, aber ohne CSS
Hast Du Statistiken zur Hand, wie oft diese Konstellation auftritt?
-
[latex]Mae govannen![/latex]
Das Problem sind alte Browser mit JS, aber ohne CSS
Hast Du Statistiken zur Hand, wie oft diese Konstellation auftritt?
Eine Auflistung von Browsern mit JS, aber ohne CSS-Unterstützung würde ich unter der TLD .museum erwarten.
die Relevanz solcher Browser dürfte in Etwa bei einem ähnlichen Wertebereich liegen wie bspw. [latex]\cos90^{\circ}[/latex].
Stur lächeln und winken, Männer!
Kai
--
Array(16).join("x" - 1) + " Batman!"
„Die Borg würden nicht mal Spaß verstehen, wenn sie einen Vergnügungspark assimiliert hätten!” (B'Elanna Torres)
Quiz: Flaggen, Länder und Hauptstädte
-
-
-
-
Lieber Johann Friedrich Lessing,
verwendest Du serverseitige Scriptsprachen? Oder gar ein CMS? Damit könntest Du nämlich in Abhängigkeit von der aktuellen Seite ein angepasstes Navigationsmenü anzeigen lassen.
JavaScript für die Navigation zu nutzen ist eine nicht ganz triviale Angelegenheit. Ohne JavaScript muss die Seite für den Besucher ebenso vollumfänglich nutzbar sein - vielleicht mit ein paar Annehmlichkeiten weniger.
Auf unserer Schulwebsite nutze ich JavaScript, um die komplette Baumstruktur der Aufklapp-Navi in eine externe Datei auszulagern, damit sie der Browser nur einmal laden muss. Ohne diese Baumstruktur ist die Seite aber ebenso nutzbar, nur braucht es ohne die Klappnavi ein paar Klicks mehr.
Erste Frage: Leider kriege ich das mit dem dynamischen Erzeugen nicht richtig hin (Javascript funktioniert irgendwie anders als mein Hirn).
Was hast Du denn bisher probiert? Wie sieht dein bisheriger Code aus?
Am besten (?) wäre es, alles mit document.writeln() in die HTML-Datei zu schreiben.
Definitiv nein!
Problem: Nur weiß ich nicht, wie ich die Navigation(en) gezielt in die section-Tags mit der entsprechenden ID kriege. (Antwort hierauf würde mir sehr helfen!)
Mit dieser Fragestellung kann ich nichts anfangen, da ich die DOM-Struktur Deiner Seite nicht kenne. Hättest Du einen Link zu einer Seite, auf der ich mir das einmal anschauen könnte?
und ich mit DOM-Methoden arbeiten soll (grusel!): Wie generiere ich den ganzen "Krempel", der sich in den a-Tags befindet?
Um sich solcherlei Aufwand zu ersparen, haben findige Programmierer sogenannte Frameworks entwickelt, die in einer sehr kryptisch anmutenden Syntax die Erstellung dieser Objekte stark vereinfacht.
Hat jemand ein paar Tipps/Links dazu, wie ich prinzipiell vorgehen sollte?
Beginne zuerst damit, dass Du erklärst, mit welcher serverseitigen Umgebung Du es zu tun hast (welche serverseitige Scriptsprachen stehen Dir zur Verfügung, welches CMS setzt Du ein etc.) und wie die DOM-Struktur einer typischen (Unter-)Seite aussieht.
Erzeugt werden soll, alles in einem section-Tag mit einer ID liegend:
<nav>
<ul>
<li><a href="irgendwohin.html" onclick="toggle('andereEbene1'); return false;" title="Lorem ipsum">Ebene1</a></li>
<li><a href="irgendwohin.html" onclick="toggle('andereEbene2'); return false;" title="Lorem ipsum">Ebene2</a></li><ul>
<li><a href="irgendwohin.html" onclick="toggle('andereEbene3'); return false;" title="Lorem ipsum">Ebene3</a></li>
<li><a href="irgendwohin.html" onclick="toggle('andereEbene4'); return false;" title="Lorem ipsum">Ebene4</a></li>
</ul>
</nav>In diesem Beispiel verwendest Du nicht JavaScript, um die Navigation dynamisch zu erstellen, sondern um bei einem Click auf einen Link irgendeinen Effekt auszulösen. > Zweite Frage: Oder ist das alles (das Erscheinen der Navigation in alten Browsern) ein "Luxusproblem", um das ich mich nicht weiter kümmern sollte? Die Nutzbarkeit der Navigation ist niemals ein Luxusproblem sondern etwas sehr wesentliches. > PS: Ich möchte nicht mit JQuery arbeiten. Warum nicht? Liebe Grüße, Felix Riesterer. -- ie:% br:> fl:| va:) ls:[ fo:) rl:| n4:? de:> ss:| ch:? js:) mo:} zu:)-
Hallo Felix,
anscheinend war mein erstes Posting doch zu ungenau/verwirrend. Ich bin so drin in der Problematik, da schien mir alles klar und logisch ... Sorry!
verwendest Du serverseitige Scriptsprachen? Oder gar ein CMS?
Nein.
JavaScript für die Navigation zu nutzen ist eine nicht ganz triviale Angelegenheit. Ohne JavaScript muss die Seite für den Besucher ebenso vollumfänglich nutzbar sein - vielleicht mit ein paar Annehmlichkeiten weniger.
Die Hauptnavigation funktioniert ohne JS. Bei meiner Angelegenheit handelt es sich um eine Annehmlichkeit. Problematisch finde ich das Degrading.
Erste Frage: Leider kriege ich das mit dem dynamischen Erzeugen nicht richtig hin (Javascript funktioniert irgendwie anders als mein Hirn).
Was hast Du denn bisher probiert? Wie sieht dein bisheriger Code aus?
In meiner Antwort auf Matthias' Beitrag habe ich den Prinzip-Code (Test) gepostet.
Um sich solcherlei Aufwand zu ersparen, haben findige Programmierer sogenannte Frameworks entwickelt, die in einer sehr kryptisch anmutenden Syntax die Erstellung dieser Objekte stark vereinfacht.
Ich möchte bspw. mit JQuery nicht arbeiten, weil dies (vermutlich) das einzige JS auf der Seite ist und ich gern verstehen möchte, was ich tue. Frameworks entsprechen einfach nicht meinem Naturell. Und in JQuery sich einzuarbeiten und ggf. anzupassen, kostet ja auch Zeit.
Beginne zuerst damit, dass Du erklärst, mit welcher serverseitigen Umgebung Du es zu tun hast (welche serverseitige Scriptsprachen stehen Dir zur Verfügung, welches CMS setzt Du ein etc.)
Serversprachen wollte ich nicht auch noch lernen, kein CMS. Wie gesagt, es handelt sich nicht um die Hauptnavigation, nur um ein Add-On für neue(re) Browser.
In diesem Beispiel verwendest Du nicht JavaScript, um die Navigation dynamisch zu erstellen, sondern um bei einem Click auf einen Link irgendeinen Effekt auszulösen.
Das ist richtig. Aber genau diese Navigation wollte ich evtl. dynamisch erzeugen.
Lieben Gruß
JFL
-
Hallo!
Erste Frage: Leider kriege ich das mit dem dynamischen Erzeugen nicht richtig hin (Javascript funktioniert irgendwie anders als mein Hirn).
Um sich solcherlei Aufwand zu ersparen, haben findige Programmierer sogenannte Frameworks entwickelt, die in einer sehr kryptisch anmutenden Syntax die Erstellung dieser Objekte stark vereinfacht.
Ich möchte bspw. mit JQuery nicht arbeiten, weil dies (vermutlich) das einzige JS auf der Seite ist und ich gern verstehen möchte, was ich tue. Frameworks entsprechen einfach nicht meinem Naturell. Und in JQuery sich einzuarbeiten und ggf. anzupassen, kostet ja auch Zeit.
Ach, und "pures" Javascript meinst du, geht schneller!? ;-)
Genau wegen "Leider kriege ich das ... nicht richtig hin (Javascript funktioniert irgendwie anders als mein Hirn)" ist bei Javascript die Verwendung eines Frameworks von enormem Vorteil. Und wenn, dann halt gleich das meist verwendete => jQuery.Gruß Gunther
-
Lieber Johann Friedrich Lessing,
verwendest Du serverseitige Scriptsprachen? Oder gar ein CMS?
Nein.
Wäre vielleicht das etwas für Dich?
Ich möchte bspw. mit JQuery nicht arbeiten, weil dies (vermutlich) das einzige JS auf der Seite ist und ich gern verstehen möchte, was ich tue.
Das finde ich lobenswert!
Frameworks entsprechen einfach nicht meinem Naturell.
Auch keine selbst erstellten? ;-)
Und in JQuery sich einzuarbeiten und ggf. anzupassen, kostet ja auch Zeit.
Ja, und obendrein macht man sich das Leben deutlich leichter, wenn man ohnehin schon versteht, wie man mit JS umgehen sollte, sodass jQuery eher eine Vereinfachung für den Profi ist, als eine Hürde für den schon mit JS an sich kämpfenden Anfänger.
Serversprachen wollte ich nicht auch noch lernen, kein CMS. Wie gesagt, es handelt sich nicht um die Hauptnavigation, nur um ein Add-On für neue(re) Browser.
Wie alt dürfen denn die Browser sein, dass Du sie noch in dieser Form unterstützen willst? Unter WindowsXP konnte man den IE8 installieren, mehr ging nicht. Wer also noch immer XP einsetzt (auch wenn es im März definitiv seinen längst überfälligen Tod stirbt), der sollte doch bitte mit IE8 unterwegs sein, wenn er unterstützt werden will. Alle Vorversionen würde ich strict ablehnen. Alle anderen Browser halten sich eh so aktuell, dass Du da für Dein Anliegen getrost auf ausreichende Unterstützung hoffen kannst.
Aber genau diese Navigation wollte ich evtl. dynamisch erzeugen.
Dann brauchst Du eine Art "Datenform", in der die Navigation "für JavaScript verständlich" vorliegt, um die notwendigen Elemente zu erzeugen. Wenn Du meinen obigen Link ausprobiert hast, dann kannst Du die in JavaScript abgespeicherte Baumstruktur der gesamten Navigation sehen - inklusive des Codes, der die Klapp-Navi realisiert.
Liebe Grüße,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:| n4:? de:> ss:| ch:? js:) mo:} zu:)-
Hallo Felix,
hab Dank für den Link. Das CMS scheint eine runde Sache zu sein; Hochachtung vor dem (Dir?), der das konzipiert hat!
Sowohl CMS und Navigation sind für mein Projekt allerdings zwei Nummern zu groß; meine Schule (ein Weiterbildungskolleg) ist sehr klein, die Website besteht aus 12 bis 15 Seiten, unsere Erfahrungen mit Blogs, Foren usw. haben gezeigt, dass diese kaum angenommen werden, die Studierenden (20 bis 25 Jahre alt) verwenden für ihre Kommunikation lieber Fratzenbuch, Stundenausfall gibt es bei uns nicht usw. Wir benötigen nur eine "Visitenkarte".
Ich schweife mal ein wenig ab:
Für Interessenten -- das zeigen Erfahrung und Umfragen -- ist allerdings das Erscheinungsbild unserer Site durchaus wichtig: Sie wollen etwas, das seriös erscheint, auf dem alles Wesentliche zu finden ist, und -- wir sind tiefe Provinz -- auch etwas "irgendwie Frisches, Modernes". Es sind ja junge Menschen, die sich neu orientieren wollen, die Perspektiven suchen, die aktiv werden wollen.
Für unsere Website braucht es nur einen "Betreuer", und da ich bis etwa 2005 im Bereich Webseitenproduktion gearbeitet habe (ich habe aufgehört, als es mir entwicklungsmäßig etwas langweilig wurde), kenne ich mich mit HTML und CSS ganz gut aus. Um ein bisschen anzugeben: Ich war tatsächlich (in einer großen Medienstadt!) einer der allerersten, der von Tabellen zum Boxmodel gewechselt ist (ich: mit Sonnenbrille, ganz cool guckend). Nur JS war halt nie so mein Ding ... Eingerostet zwar, aber kein blutiger Anfänger mehr, habe ich mich vor ein paar Tagen aufgemacht, eine neue Website zu basteln ...Ich komme wieder zum Punkt:
Wie alt dürfen denn die Browser sein, dass Du sie noch in dieser Form unterstützen willst? Unter WindowsXP konnte man den IE8 installieren, mehr ging nicht. Wer also noch immer XP einsetzt (auch wenn es im März definitiv seinen längst überfälligen Tod stirbt), der sollte doch bitte mit IE8 unterwegs sein, wenn er unterstützt werden will. Alle Vorversionen würde ich strict ablehnen. Alle anderen Browser halten sich eh so aktuell, dass Du da für Dein Anliegen getrost auf ausreichende Unterstützung hoffen kannst.
He, sag nichts gegen WindowsXP, im Vergleich zu Vista war das Gold :-)
Wie gesagt, mein Ziel ist es, eine Seite zu bauen, deren Inhalte auch in nacktem HTML gut strukturiert und nutzbar sind (ich weiß, dass man für CSS zuweilen das eine oder andere div- oder span-Tag braucht). Aufgrund meiner "Schaffenspause" bin ich noch nicht mit allen Bugs bzw. Workarounds jüngerer Browser vertraut. Nach meinem bisherigen Kenntnisstand stelle ich es mir so vor:
--- alle: Inhalt strukturiert + Navigierbarkeit gegeben
--- Uraltbrowser (Mosaic, Netscape, IE < 8): kein CSS-Layout (also Browserdefault, naja, vielleicht ein wenig text-decoration ...), keine JS-Funktionalität
--- "aktuelle" Broswer (IE9 und höher, die anderen Browser): JS-Funktionalität, CSS3 ausreizen soweit möglich
--- "böse" Browser (IE8): hier bin ich noch unsicher, WindowsXP geistert mir noch zu sehr auf alten Laptops herum; ich glaube, ich warte einfach mal ab ...Dann brauchst Du eine Art "Datenform", in der die Navigation "für JavaScript verständlich" vorliegt, um die notwendigen Elemente zu erzeugen. Wenn Du meinen obigen Link ausprobiert hast, dann kannst Du die in JavaScript abgespeicherte Baumstruktur der gesamten Navigation sehen - inklusive des Codes, der die Klapp-Navi realisiert.
Vielen Dank nochmals für den Link; ich werde mir den Code genauer angucken, vieles nicht verstehen, aber bestimmt manches lernen. Wie oben bereits erwähnt, ist es für meinen "Spatz" leider zu "kanonenmäßig".
Alles weitere schreibe ich in ein weiteres Posting "Zweiter Versuch"; falls Du noch nicht zu genervt bist, kannst Du mir vielleicht noch den einen oder anderen Tipp geben ...
Lieben Gruß
Johann Friedrich
-
Om nah hoo pez nyeetz, Johann Friedrich Lessing!
Für unsere Website braucht es nur einen "Betreuer", und da ich bis etwa 2005 im Bereich Webseitenproduktion gearbeitet habe (ich habe aufgehört, als es mir entwicklungsmäßig etwas langweilig wurde), kenne ich mich mit HTML und CSS ganz gut aus. Um ein bisschen anzugeben: Ich war tatsächlich (in einer großen Medienstadt!) einer der allerersten, der von Tabellen zum Boxmodel gewechselt ist
Es sieht leider so aus, dass du an diesem Punkt stehen geblieben bist. Vielleicht solltest du etwas über Semantik lesen, ich empfehle unsere HTML5-Artikelserie im Blog.
Dann kümmerst du dich _ausschließlich_ um die Inhalte, vielleicht noch nicht um jedes einzelne Wort, Lorem ipsum ist dein Freund. Stecke die Inhalte dazu in semantisch passende Elemente. Störe dich nicht daran, dass die Navigation beispielsweise nicht auf der linken Seite ist. Wenn der Inhalt prinzipiell fertig ist, kann man an die Gestaltung gehen. Was dann noch nicht mit CSS-Mitteln zufriedenstellend geht, kann man mit JavaScript (und ich empfehle da auch JQuery, u.a. weil man sich um die unterschiedlichen Befindlichkeiten mancher Browser keine Gedanken machen braucht) nachhelfen.
So sollte dein Plan sein.
Matthias
-
Hallo Matthias,
Es sieht leider so aus, dass du an diesem Punkt stehen geblieben bist.
Ja, das ist wohl so ... (mehr dazu am Ende)
Vielleicht solltest du etwas über Semantik lesen, ich empfehle unsere HTML5-Artikelserie im Blog.
Danke, die neuen semantischen Elemente von HTML5 kenne ich.
Dann kümmerst du dich _ausschließlich_ um die Inhalte, vielleicht noch nicht um jedes einzelne Wort, Lorem ipsum ist dein Freund. Stecke die Inhalte dazu in semantisch passende Elemente.
Siehe oben. Vielleicht ist meine Herangehensweise eine "spezielle": Ich arbeite eher modular: Ich weiß bspw., dass die betreffende Navigation in ein <nav>-Element gehört, da sie nicht nur eine Sammlung "irgendwelcher" Links ist. Ob das <nav>-Element dann eine Navigations"hilfe" für diesen Bereich ist (und das Kind eines <header>-Elementes sein soll/kann) oder eben mehr als eine "Hilfe" (und dann vielleicht eher ein Geschwisterchen des <header> im übergeordneten <section>-Element {oder im <div>?}) -- meine Meinung dazu kann/werde ich in den nächsten Monaten noch zehnmal ändern.
... nebenbei: Ob sich HTML5 mit dem <section>-Element einen großen Gefallen getan hat? Ich fürchte, in Zukunft wird es schon deshalb inflationär eingesetzt werden, weil keiner mehr Lust aufs olle <div> hat ...
So simpel, wie dein Posting es vermuten lässt, ist es mit der Semantik bzw. den semantischen Tags in HTML5 eben leider nicht. Man wird über etliche Entscheidungen immer streiten können. <ironie>Hauptsache, alles ist schön valide!</ironie> -- Und zu meiner modularen/sprunghaften Arbeitsweise gehört auch, auszuprobieren, ob eine bestimmtes optisches Konzept überhaupt möglich ist. Diesen Luxus kann ich mir leisten, da ich nicht im Team bzw. unter Zeitdruck arbeite.
Störe dich nicht daran, dass die Navigation beispielsweise nicht auf der linken Seite ist.
Habe ich das getan? Das war doch schon der Vorteil der "alten" CSS-Vorgehensweise: Zuerst kümmert man sich um den Inhalt, den Rest regeln Floats usw.
... kann man mit JavaScript (und ich empfehle da auch JQuery, u.a. weil man sich um die unterschiedlichen Befindlichkeiten mancher Browser keine Gedanken machen braucht) nachhelfen.
Eben genau ist/das war mein Ziel. Davon abgesehen, will ich "manche" Browser auch gar nicht unterstützen (in dem Sinne, dass sie die volle "interaktive Funktionalität" des Add-Ons erhalten).
Aber ich will es damit gut sein lassen; mir wird diese Diskussion zu "deutsch": Ich wollte ein paar Ratschläge zu meinem Javascript-Problem. Allgemeine Hinweise wie "Arbeite mit JQuery" helfen mir eher weniger weiter. Und es ist mir zu mühsam, ständig beweisen zu müssen, dass ich ein Gutmensch bin (Nein, die Hauptnavigation läuft nicht über Javascript. Ja, ich werde mich erst um den Inhalt kümmern und eine sinnvolle Outline konstruieren) ... Das ist für mich -- wenn der Ausdruck erlaubt sei -- alles alter Kaffee, weil ich schon vor zwölf Jahren so gearbeitet habe (wenn auch weniger mit Blick auf die abstrakte DOM-Struktur [generative Grammatik mit ihren Baummodellen fand ich immer etwas öde], sondern eher mit Blick auf eine sinnvolle, semantisch strukturierte Darstellung im Textbrowser o. ä.). Und in diesem "Sinne" bin ich dann doch froh, dass ich "stecken geblieben" bin.
Lieben Gruß
JFL
-
Hallo nochmals,
Dann kümmerst du dich _ausschließlich_ um die Inhalte, vielleicht noch nicht um jedes einzelne Wort, Lorem ipsum ist dein Freund. Stecke die Inhalte dazu in semantisch passende Elemente.
...
So sollte dein Plan sein.
Um etwas fachlicher zu werden: Im Prinzip ist das natürlich völlig richtig, das (mein?) Problem geht aber über die Semantik hinaus. Ich versuche es einmal mit folgendem Beispiel zu veranschaulichen. Gegeben sei eine Datei (nicht die ganze Website) mit der Struktur:
0. Beginn: Logo, Hauptnavigation, Suche usw. (Detailstruktur hier weniger wichtig)
1. Abschnitt <section>: Inhalte zum Thema X
2. Abschnitt <section>: Inhalte zum Thema Y
2.1 Unterabschnitt <evtl. section> Thema Y.a
2.2 Unterabschnitt <evtl. section> Thema Y.b
2.3 Unterabschnitt <evtl. section> Thema Y.c
usw.
3. Abschnitt <section>: Inhalte zum Thema Z
Z. Ende mit Copyright usw.Semantik hilft mir nicht weiter, wenn es die Fragen geht,
-- ob eine Navigation für den zweiten Abschnitt erforderlich/hilfreich ist
-- wie diese Navigation auszusehen hat: eine Navigation zu Beginn des Abschnitts? Jeweils eine Navigation(shilfe) zu Beginn oder am Ende eines jeden Unterabschnitts?Je nachdem, wofür ich mich entscheide, sollte ich eine sinnvolle semantische Auszeichnung vornehmen (wobei HTML5 hier ja sehr viel Freiheiten lässt). Entscheiden kann ich mich aber nur, wenn ich über Nutzerführung usw. nachdenke. Und hoppla sind wir wieder bei den Inhalten (wäre eine eigene Seite für den zweiten Abschnitt sinnvoll?) und schon beim Design (wie kriege ich da Struktur hinein, wenn die Antwort auf die Frage eben "nein" lautet).
Und genau an dieser Stelle bin ich gerade in meinem Projekt.
Ich hoffe, ich konnte mich verständlich machen.
Lieben Gruß
JFL
-
-
-
Lieber Felix!
Ich möchte bspw. mit JQuery nicht arbeiten, weil dies (vermutlich) das einzige JS auf der Seite ist und ich gern verstehen möchte, was ich tue.
Das finde ich lobenswert!
Frameworks entsprechen einfach nicht meinem Naturell.
Auch keine selbst erstellten? ;-)
Und in JQuery sich einzuarbeiten und ggf. anzupassen, kostet ja auch Zeit.
Ja, und obendrein macht man sich das Leben deutlich leichter, wenn man ohnehin schon versteht, wie man mit JS umgehen sollte, sodass jQuery eher eine Vereinfachung für den Profi ist, als eine Hürde für den schon mit JS an sich kämpfenden Anfänger.
Sorry, aber dieser Ansicht kann ich mich nicht anschließen.
jQuery ist gerade dann eine (enorme) Vereinfachung, wenn man kein "Profi" ist. Das fängt schon mit dem ganzen "cross Browser Kram" an und geht weiter damit, dass man seine "definierten Ziele" wesentlich "logischer und intuitiver" in entsprechenden Code umsetzen kann, als mit nativem Javascript.Wobei Javascript hierbei für mich die berühmte Ausnahme von der Regel ist.
Es ist imho absolut nicht erforderlich, sich mit Javascript selbst (sprachlich) auseinanderzusetzen, da jQuery nahezu alles ermöglicht, was auch sonst möglich ist.Und "wie man mit JS umgehen sollte" ist keine Frage von Framework oder nativem Code - genauso wenig wie die der Semantik bei HTML.
Ich kann jedem Anfänger daher nur raten, sich lieber direkt mit jQuery zu beschäftigen, was aufgrund der gut dokumentierten API mit Beispielen und Millionen von Beiträgen im Netz wesentlich "einfacher" sein dürfte und schneller zum Ziel führt, als das mit Javascript direkt der Fall sein dürfte.
Gruß Gunther
-
Hallo!
Ich kann jedem Anfänger daher nur raten, sich lieber direkt mit jQuery zu beschäftigen, was aufgrund der gut dokumentierten API mit Beispielen und Millionen von Beiträgen im Netz wesentlich "einfacher" sein dürfte und schneller zum Ziel führt, als das mit Javascript direkt der Fall sein dürfte.
Wer JavaScript nicht versteht, wird auch jQuery nicht verstehen. Andererseits muss man, meiner Meinung nach, kein "Profi" sein um mit jQuery arbeiten zu können.
Bevor man mit jQuery anfängt, sollte man also zumindest die "Grundlagen" von JS verstanden haben. Scope und Klassen gehören da genauso dazu wie ein gewisses Grundverständnis dafür was mit JS überhaupt möglich ist und was nicht (und auch wo man trotz vorhandener Möglichkeiten lieber auf JS verzichtet).
Ansonsten könnte man auch sagen, dass man keine Ahnung von C haben muss um mit QT arbeiten zu können. Das ist sicher kein guter Rat.Grüße, Matze
-
Hallo!
Ich kann jedem Anfänger daher nur raten, sich lieber direkt mit jQuery zu beschäftigen, was aufgrund der gut dokumentierten API mit Beispielen und Millionen von Beiträgen im Netz wesentlich "einfacher" sein dürfte und schneller zum Ziel führt, als das mit Javascript direkt der Fall sein dürfte.
Wer JavaScript nicht versteht, wird auch jQuery nicht verstehen.
Das mag ja vielleicht sein - der Punkt ist aber doch:
Man muss aber nicht zwingend Javascript "verstehen", um jQuery zu "verstehen".Andererseits muss man, meiner Meinung nach, kein "Profi" sein um mit jQuery arbeiten zu können.
Im Gegenteil - es dürfte vermutlich (fast) jedem Einsteiger wesentlich einfacher fallen, sich in jQuery "einzuarbeiten", als in Javascript selbst.
Bevor man mit jQuery anfängt, sollte man also zumindest die "Grundlagen" von JS verstanden haben.
Kommt darauf an, was du unter "Grundlagen" verstehst, denn ...
Scope und Klassen gehören da genauso dazu
... gehören da für mich nicht dazu.
wie ein gewisses Grundverständnis dafür was mit JS überhaupt möglich ist und was nicht (und auch wo man trotz vorhandener Möglichkeiten lieber auf JS verzichtet).
Das hat jetzt aber weniger mit der Frage, ob Framework oder Javascript pur, zu tun.
Gleiches gilt wohl eher generell für jede "Sprache", bspw. auch für HTML und CSS.
Was ich mit:"Und "wie man mit JS umgehen sollte" ist keine Frage von Framework oder nativem Code - genauso wenig wie die der Semantik bei HTML." zum Ausdruck bringen wollte.Ansonsten könnte man auch sagen, dass man keine Ahnung von C haben muss um mit QT arbeiten zu können.
Bitte beachte immer den ganzen Beitrag (auch wenn du nur Teile davon zitierst).
Ich habe extra geschrieben:"Wobei Javascript hierbei für mich die berühmte Ausnahme von der Regel ist."Das ist sicher kein guter Rat.
Du verzeihst mr, wenn ich da anderer Ansicht bin?
In meinen Augen ist es für viele Autoren, die ein paar "Gimmicks" in ihre HTML Seite einbauen wollen, absolut_nicht_von Nöten, dafür in die "Tiefen & Geheimnisse" von Javascript einzutauchen. Vielmehr ist es völlig ausreichend und imho auch wesentlich "einfacher" (weil flachere Lernkurve), sich stattdessen mit jQuery und seinen Möglichkeiten vertraut zu machen.
Und wem dann die Möglichkeiten von jQuery nicht mehr ausreichen, der kann sich dann immer noch mit reinem Javascript beschäftigen. Die allermeisten User, denen ich dies "rate/ empfehle", werden da vermutlich aber nie hinkommen.
Gruß Gunther
-
Hallo!
Im Gegenteil - es dürfte vermutlich (fast) jedem Einsteiger wesentlich einfacher fallen, sich in jQuery "einzuarbeiten", als in Javascript selbst.
Ich behaupte das Gegenteil. Wer zumindest die Grundlagen von JS verstanden hat, hat es mit jQuery einfach. Wer die Grundlagen "übersprungen" hat, wird früher oder später genau dort hin verwiesen werden aber dazu gleich noch...
Du verzeihst mr, wenn ich da anderer Ansicht bin?
NIEMALS!! ;)
In meinen Augen ist es für viele Autoren, die ein paar "Gimmicks" in ihre HTML Seite einbauen wollen, absolut_nicht_von Nöten, dafür in die "Tiefen & Geheimnisse" von Javascript einzutauchen. Vielmehr ist es völlig ausreichend und imho auch wesentlich "einfacher" (weil flachere Lernkurve), sich stattdessen mit jQuery und seinen Möglichkeiten vertraut zu machen.
Und genau das meinte ich mit:
Kommt darauf an, was du unter "Grundlagen" verstehst, denn ...
Scope und Klassen gehören da genauso dazu
... gehören da für mich nicht dazu.Wie oft wurde im Forum schon die Frage nach dem Konstruktor in JS gefragt?
Wie oft nach globalen Variablen? Wie oft wurden Strings als Integer interpretiert und mit "+" verkettet?
Wie viele Nutzer beachten und nutzen, dass JS Prezedual, Funktional und Objekt-Orientiert genutzt werden kann?
Warum "funktioniert" mein Script nicht wenn der Code im DOM vor dem Element steht?
Wie oft wurde nicht verstanden warum sich jQuery und Mootools "beissen"?Die Liste mit Fragen zu den "Grundlagen" von JS, welche ich meine, ist wahrscheinlich länger als die Funktionsreferenz. Warum? Blink-Blink hier, Codeschnipsel da, Framework->"plugin" und fertig. Und dann kommt sowas raus wie Hover-Effekte per jQuery. Und wenn dann Mootools noch für die Lightbox benutzt wird und ein eigenes jQuery-Script für X und eins für mootools für Y und dann noch versucht wird alles mit purem JS zu verketten obwohl man davon keine Ahnung hat... Oh, ich schweife vom Thema ab.^^
Auf jeden Fall landest du früher oder später bei den Grundlagen. Ich habe leider oft genug Bekannten helfen müssen die meinten sie könnten sich den Programmierer sparen. "Ist doch nur ein Baukasten" habe ich mehr als 1 mal gehört bevor sie irgendwann verzweifelt aufgegeben haben.
Und wem dann die Möglichkeiten von jQuery nicht mehr ausreichen, der kann sich dann immer noch mit reinem Javascript beschäftigen. Die allermeisten User, denen ich dies "rate/ empfehle", werden da vermutlich aber nie hinkommen.
Den Ansatz kann ich beim besten Willen nicht nachvollziehen.
Grüße, Matze
-
Hallo Matze!
Ich glaube der Punkt, an dem wir hier unterschiedlicher Meinung sind, ist der:
Ich "behaupte", dass wenn jemand keine Ahnung von Javascript hat und er ein paar "Gimmicks" wie bspw. das auf- und zuklappen von Elementen oder das Einfügen/ Ändern von Elementen ins DOM, er dafür nicht erst lang und breit in die Grundlagen von Javascript eintauchen muss, sondern dass sich so jemand dann besser gleich nur mit jQuery beschäftigt.Denn für solche Sachen sind die von dir erwähnten "Grundlagen" überhaupt nicht nötig.
Für jemanden, der u.a. "richtig programmieren" möchte, ist dieser Weg sicherlich nicht geeignet, und auch meine Empfehlung nicht gedacht.
Und nochmal - es gibt sicherlich genug Autoren, für die der o.g. Umfang für ihre Website ausreicht.
Bei allen/ für alle anderen, stimme ich dir auch vollkommen zu.
Aber genau hier stellt u.a. eben Javascript für mich die Ausnahme dar. Bei HTML und CSS bspw. reicht es sicherlich nicht, sich nur mit einem "kleinen Teil" vertraut zu machen.
Gruß Gunther
-
Ich "behaupte", dass wenn jemand keine Ahnung von Javascript hat und er ein paar "Gimmicks" wie bspw. das auf- und zuklappen von Elementen oder das Einfügen/ Ändern von Elementen ins DOM, er dafür nicht erst lang und breit in die Grundlagen von Javascript eintauchen muss, sondern dass sich so jemand dann besser gleich nur mit jQuery beschäftigt.
Wie gesagt, schon bei "ein paar" fängt das Problem an. Mit Pech beissen sich schon "Gimmick 1" und "Gimmick 2". Deshalb auch das Beispiel mit Mootools in Verbindung mit jQuery. Das heißt also, schon beim zweiten Versuch scheitert der Proband und landet hier oder in einem anderen Forum. Erfahrungsgemäß zumindest überall nur nicht im Forum des "Herstellers".
Dort wird dann versucht "Grundwissen" zu vermitteln oder im Fall von "Hersteller"-Foren halt fertiger Code geliefert (workarounds). Das kann nicht Sinn der Sache sein.Denn für solche Sachen sind die von dir erwähnten "Grundlagen" überhaupt nicht nötig.
Sind sie meiner Meinung und Erfahrung nach ebend schon.
Und nochmal - es gibt sicherlich genug Autoren, für die der o.g. Umfang für ihre Website ausreicht.
Das ist unbestritten. Ich bestreite auch nicht den Wert von Frameworks. Ich benutze gern jQuery und MooTools und Qt und für Android probiere ich gerade mehrere Alternativen... allerdings immer unter dem Vorbehalt, dass ich die zugrundeliegende Technik und Syntax verstanden habe. ActionScript ist übrigens eine Sprache in die ich mich verliebt habe auch wenn sie völlig obsolet ist - aber sie ist sooo schöööön :D
Aber genau hier stellt u.a. eben Javascript für mich die Ausnahme dar. Bei HTML und CSS bspw. reicht es sicherlich nicht, sich nur mit einem "kleinen Teil" vertraut zu machen.
Du kannst die 3 auch nicht so einfach in einen Topf werfen. Aber alleine Aufgrund der Komplexität von JS würde ich hier zugunsten von Html und CSS tendieren. Und wer nicht weiß wozu ein body-Element ist, nicht weiß wie er body in CSS anspricht und nichts von document.ready weiß, hat trotzdem keine Ahnung wie er die Hintergrundfarbe ändert. Also zurück zu den Grundlagen aller 3! ;)
-
Hallo,
nur mal so aus Interesse:
JQuery hat im komprimierten Zustand gut 80 KB (1 Request), meine eigene Zusatzdatei vielleicht noch 5 oder 10 KB (1 Request), dann kommen noch dazu mindestens ein Stylesheet (wird auch immer größer, 1 Request), in Zukunft wohl eher mehrere, evtl. Webfont-Dateien (ggf. auch nicht ganz klein, 1 bis mehrere Requests), Bilder usw. usf., achja, die html-Datei gibt's ja auch noch. Wird das nicht alles etwas sehr viel? Ich kenne etliche Leute hier in der Provinz, die noch an ISDN-Leitungen hängen. Ist es dann klug, bei ein, zwei kleinen Javascripten noch 80 KB draufzulegen?
Lieben Gruß
JFL
-
JQuery hat im komprimierten Zustand gut 80 KB (1 Request)
Afaik ist jQuery mittlerweile modular. Somit lässt sich daran sicher noch schrauben.
Andererseits hole ich mit 2 Bildoptimierungen zur Not dasselbe wieder raus. 80kb sind zwar für den Kunden ohne Breitband interessant, in der Realität schert sich aber kein Webentwickler mehr um so geringe zahlen. Responsive Designs sind ein anderes Thema. Da würde ich sowieso nicht anfangen mit JS "rum zu fuchteln".
Auch die Anzahl der Requests lässt sich zur Not optimieren. Man _kann_ sehr viel tun um selbst dem Analog-Modem-Nutzer trotz "jQuery-Overhead" noch eine vernünftige Geschwindigkeit zu bieten. Nur tut das heut kaum noch jemand.Das Argument zieht also nur bedingt gegen ein JS-Framework.
-
Hallo!
Afaik ist jQuery mittlerweile modular.
Naja, nicht wirklich.
Der Code besteht zwar aus Modulen und man kann sich einen eigenen Build erzeugen, aber Anfänger sind mit Build-Tools wie Grunt wahrscheinlich nicht vertraut.
Die internen Abhängigkeiten der Module wurden erst kürzlich herausgearbeitet, indem AMD als Modulformat für sämtliche jQuery-Quelldateien verwendet wird.
Soweit ich weiß ist es nicht Ziel des jQuery-Teams, Custom Builds für die Masse zu propagieren. »jQuery has always been, and will continue to be, distributed as a single file in both compressed and uncompressed form and available on CDNs. We still expect that to be the way most jQuery developers go, because it’s simple and painless.« (Quelle) Die Entscheidung kann ich verstehen, denn eine der Stärken von jQuery ist, dass es eine Fülle von kanonischen Funktionen anbietet. Wo jQuery zur Verfügung steht, waren bisher auch alle verfügbar. Das vereinfacht das gemeinsame Arbeiten enorm.
Es gibt andere DOM-Bibliotheken, die modularer sind als jQuery, vor allem im Hinblick auf Endnutzer. Z.B. DOMAssistant.
Mathias
-
-
-
-
[latex]Mae govannen![/latex]
Im Gegenteil - es dürfte vermutlich (fast) jedem Einsteiger wesentlich einfacher fallen, sich in jQuery "einzuarbeiten", als in Javascript selbst.
Ich behaupte das Gegenteil. Wer zumindest die Grundlagen von JS verstanden hat, hat es mit jQuery einfach. Wer die Grundlagen "übersprungen" hat, wird früher oder später genau dort hin verwiesen werden aber dazu gleich noch...
Ist wie mit dem Mann, dem man jeden Tag einen Fisch gibt ... statt einer Angel.
Stur lächeln und winken, Männer!
Kai
--
Array(16).join("x" - 1) + " Batman!"
Unsere Identität entnehmen Sie bitte dem beigefügten Auszug aus den Personenstandsbüchern. Gegen die Assimilierung in unser Kollektiv ist nach dem ABGB (§666, Abs. 3/IV) kein Rechtsmittel zulässig. Wir bitten um Ihr Verständnis.
Quiz: Flaggen, Länder und Hauptstädte
-
Hallo!
Fischer verkaufen Fisch an wen? jQuery "verkauft" sich an wen? ;)
Ist wie mit dem Mann, dem man jeden Tag einen Fisch gibt ... statt einer Angel.
Mh ich mag Fisch aber Angeln finde ich sowas von öde... Was sagt das jetzt über mich aus?^^
Stur lächeln und winken, Männer!
Achja, und ich mag Pinguine nicht mehr seit "dem" Film. Aber die lassen sich bestimmt auch nicht angeln.
Grüße, Matze
-
Hi,
Ist wie mit dem Mann, dem man jeden Tag einen Fisch gibt ... statt einer Angel.
Mh ich mag Fisch ...ich auch. Geräuchert, vom Grill oder sauer eingelegt - eben auf eine Weise zubereitet, die nicht den typischen intensiv-penetranten Fischgeruch entwickelt.
aber Angeln finde ich sowas von öde...
Ich vermutlich auch. Ich hab's noch nie probiert, aber ich kann darin auch nichts erkennen, was mich reizen könnte.
Ciao,
Martin--
Wer im Glashaus sitzt, sollte Spaß am Fensterputzen haben.
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(-
Ich vermutlich auch. Ich hab's noch nie probiert, aber ich kann darin auch nichts erkennen, was mich reizen könnte.
Als Kind war das einfach. 2 hatten jeweils eine Angel und Langeweile. Nach einer kurzen Weile hatte 1 Kind 1 Angel, das andere Kind hat irgendwo geblutet und eine kaputte Angel. Aber alle Apfelbäume rundrum sind abgeerntet.
Ich bin für Angeln statt jQuery!
-
Hi,
Als Kind war das einfach. 2 hatten jeweils eine Angel und Langeweile. Nach einer kurzen Weile hatte 1 Kind 1 Angel, das andere Kind hat irgendwo geblutet und eine kaputte Angel.
blödes Spiel. Ich glaube, das hätte mir damals noch weniger gefallen als heute.
Aber alle Apfelbäume rundrum sind abgeerntet.
Ähm ... was haben die Apfelbäume mit der Angel zu tun?? Wen interessieren überhaupt Apfelbäume?
Ciao,
Martin--
Wieso heißen die Dinger eigentlich Anrufbeantworter? Eigentlich sind es doch nur Anrufanhörer.
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(-
Ähm ... was haben die Apfelbäume mit der Angel zu tun?? Wen interessieren überhaupt Apfelbäume?
Wenn 2 Kinder mit 2 Angeln Langeweile haben und da diese Bäume rum stehen, dann ergibt sich der Rest. Ich meine, wen interessiert schon angeln mit Angeln?
-
-
-
-
-
-
Hallo!
Wer die Grundlagen von JavaScript verstanden hat, hat immer noch null Ahnung von jQuery. Bei jQuery geht es um das DOM, verschiedene Design Pattern, Event-Handling (eigenes Event-System, Eventobjekt, Bubbling, Event Delegation), DOM-Querying (Sizzle, querySelector[All], Browserquirks), Animationen (Stepfunktionen, Inline-Styles, Größenberechnungen, Queues, stabile Frameraten, Alternativen wie requestAnimationFrame und CSS-Transitions), XMLHttpRequest (Asynchronität, HTTP, Inhaltstypen, JSON/P, Cross-Domain-Ajax), Callbacks/Deferreds (ähnlich Promises) usw. usf.
Natürlich kann man mit JavaScript-Kenntnissen den jQuery-Quellcode besser lesen, aber um ihn zu verstehen, braucht man fundiertes Wissen in den obigen Bereichen. Da kann ich noch soviel über Prototypen, funktionale Programmierung und essentielle ECMAScript-Interna wissen – womit jQuery zu tun hat, ist eine Wissenschaft für sich.
Verstehe mich nicht falsch, ich versuche seit 10 Jahren, JavaScript-Grundlagen zu vermitteln. In Fachartikeln, Schulungen und Vorträgen. Trotzdem möchte ich dem widersprechen, dass das Wissen über ECMAScript automagisch die Türen zum jQuery-Verständnis und zur Programmierung im Browser eröffnet. Die Sprache zu kennen ist das eine, die Browser-APIs etwas anderes. Vor Node.js z.B. stehe ich wie der Ochs vorm Berg, weil ich zwar die Sprache beherrsche, aber keine Ahnung von den APIs und dem Ökosystem habe.
Mathias
-
-
-
-
-
-
-
-
Hallo!
Vorweg: Mir geht es ähnlich wie Matthias - ich werde ich aus deiner Beschreibung auch nicht so richtig schlau.
Nachfolgend deshalb ein paar Anmerkungen zu den "Stolpersteinen" ...! ;-)
Ich habe auf einer Seite einen Infobereich mit mehreren Ebenen, von denen jeweils nur eine angezeigt wird. Das klappt :-) Dabei erfolgt -- wegen des Designs -- der Wechsel der Ebenen nicht über ständig sichtbare Tabs oder ähnliches, sondern über eine auf jeder der Ebenen liegende Navigation.
Aha, und der Unterscheid zwischen einer "auf jeder der Ebenen liegende Navigation" und "ständig sichtbare Tabs oder ähnliches" ist jetzt welcher?
Das klappt auch :-)
Wie?
Per CSS, oder Javascript, oder einer Kombination aus beidem?Es handelt sich um die Website einer Schule, ist also eine offizielle Website,
Was sind denn dann "inoffizielle" Websites? *SCNR*
die aber wohl weniger vom Büro aus (IE6, Mosaic ...) aufgerufen wird.
Die hier genannten Browser dürften heutzutage zu 100% zu vernachlässigen sein.
Aus Prinzip möchte ich die Seite aber für möglichst _alle_ sinnvoll bzw. ohne Irritationen bauen. Wer einen Browser ohne CSS und Javascript hat, sieht alle Ebenen untereinander.
Ja, das ist auch gut so, denn ansonsten lägen ja alle übereinander und man könnte nichts erkennen/ entziffern.
Was den Inhalt betrifft, ist das völlig okay. Nur sieht er auch (vier- bis fünfmal) eine Navigation, die für ihn eben nicht zweckmäßig ist.
Weshalb es ggf. "praktischer" wäre, nur eine Navigation(sleiste) oberhalb zu platzieren.
Nun könnte ich die Navigation dynamisch mit Javascript erzeugen, um den Nutzern alter Browser die Irritation zu ersparen ...
Und Nutzern ohne Javascript jegliche Naviagtiosnmöglichkeit nehmen!?
<nav>
<ul>
<li><a href="irgendwohin.html" onclick="toggle('andereEbene1'); return false;" title="Lorem ipsum">Ebene1</a></li>
<li><a href="irgendwohin.html" onclick="toggle('andereEbene2'); return false;" title="Lorem ipsum">Ebene2</a></li><ul>
<li><a href="irgendwohin.html" onclick="toggle('andereEbene3'); return false;" title="Lorem ipsum">Ebene3</a></li>
<li><a href="irgendwohin.html" onclick="toggle('andereEbene4'); return false;" title="Lorem ipsum">Ebene4</a></li>
</ul>
</nav>Ist das ein "Copy & Paste" Fehler? Das ist nicht valider HTML Code. Und IEs 8- "verstehen" ohne entsprechende Javascript Hilfe kein HTML5. > Hoffe, ich konnte mich einigermaßen verständlich machen ... Nicht wirklich ..., sorry. > PS: Ich möchte nicht mit JQuery arbeiten. Stattdessen möchtest du dir lieber zusätzlich noch Probleme aufhalsen, indem du direkt mit Javascript arbeitest? :-P Gruß Gunther-
Hallo Gunther,
Vorweg: Mir geht es ähnlich wie Matthias - ich werde ich aus deiner Beschreibung auch nicht so richtig schlau.
In meiner Antwort auf Matthias' Beitrag habe ich den Quelltext einer Seite gepostet, mit der ich das Ein- und Ausblenden (per JS und CSS) "prinzipiell" (heißt: zunächst nur für IE10 und Mozilla 23) ausprobiert habe.
Aha, und der Unterscheid zwischen einer "auf jeder der Ebenen liegende Navigation" und "ständig sichtbare Tabs oder ähnliches" ist jetzt welcher?
Wie ich schrieb: das Design (okay, bei Tabs bräuchte ich die Navigation nur einmal ...)
Was sind denn dann "inoffizielle" Websites? *SCNR*
Bei meiner persönlichen Hobbyseite wäre es mir vielleicht egal?
Wer einen Browser ohne CSS und Javascript hat, sieht alle Ebenen untereinander.
Ja, das ist auch gut so, denn ansonsten lägen ja alle übereinander und man könnte nichts erkennen/ entziffern.
Finde ich auch (und hatte ich -- was den Inhalt betrifft -- auch nicht als Problem beschrieben)
Weshalb es ggf. "praktischer" wäre, nur eine Navigation(sleiste) oberhalb zu platzieren.
Es handelt sich nur um ein Add-On. Die Hauptnavigation funktioniert völlig "klassisch" nur mit HTML.
Ist das ein "Copy & Paste" Fehler? Das ist nicht valider HTML Code.
Nein, bspw. der UL-Tag gehörte da nicht hin. Habe ich leider erst nach Absenden bemerkt.
Und IEs 8- "verstehen" ohne entsprechende Javascript Hilfe kein HTML5.
Da ich die Seite "nebenbei" erstelle, hat kein Mensch mehr IE7/8, wenn ich fertig bin :-)
Statt [JQuery, JFL] möchtest du dir lieber zusätzlich noch Probleme aufhalsen, indem du direkt mit Javascript arbeitest?
Ich glaube nicht, dass es für mein Problem eine annähernd fertige Lösung in JQuery gibt! Da lerne ich lieber JS besser kennen :-)
Lieben Gruß
JFL
-
-
Hallo miteinander,
da mein erstes Posting etwas Verwirrung stiftete, hier ein zweiter Versuch:
Für ein kleines Add-On benötige ich unten stehende Navigation, die ich mittels Javascript generieren möchte (Anmerkung: Es handelt sich um eine Sache, die die grundsätzliche Navigierbarkeit auf der Seite sowie die Erreichbarkeit der Inhalte _nicht_ berührt; die gesamte Website wird/soll ohne Javascript nutzbar sein).
Vorletzte Vorbemerkung: Das Schöne an Selfhtml war schon früher, das man auf neue Ideen kommt. So war es auch diesmal. Deshalb eine kleine Änderung zum Ausgangsposting: Die Liste soll an vier Stellen im Dokument (vier leere nav-Tags, die jeweils eine id haben, bspw. <nav id="nav3"></nav>) eingefügt werden. Es ist aber stets dieselbe Liste!
Letzte Vorbemerkung: Nein, ich will nicht mit JQuery o. ä. arbeiten. Und abwärtskompatibel soll das Ganze sein bis (allerhöchstens) IE8.
<ul> <li id="li0"><a href="irgendwohin0.html" onclick="toggle('ebene0'); return false;" title="Lorem ipsum">Ebene 0</a></li> <li id="li1"><a href="irgendwohin1.html" onclick="toggle('ebene1'); return false;" title="Lorem ipsum">Ebene 1</a></li> <li id="li2"><a href="irgendwohin2.html" onclick="toggle('ebene2'); return false;" title="Lorem ipsum">Ebene 2</a></li> <li id="li3"><a href="irgendwohin3.html" onclick="toggle('ebene3'); return false;" title="Lorem ipsum">Ebene 3</a></li> <li id="li4"><a href="irgendwohin4.html" onclick="toggle('ebene4'); return false;" title="Lorem ipsum">Ebene 4</a></li> </ul>Erste Fragen:
1. Da die Navigation per Javascript generiert wird, müsste ich mir doch das Attribut href samt Wert sparen können? Oder streikt dann einer der neueren Browser?
2. Da ich die Listenpunkte in neuen Browsern auch über den CSS-Selektor ":nth-child" ansprechen kann, müsste ich mir doch bei <li> das id-Attribut ebenfalls sparen können?
3. Was wäre für einen JS-Herausgeforderten wie mich ein erfolgversprechender Ansatz? Mir schwebt vor, es als "Übung" zunächst einmal mit der UL-Liste mit den Ankern zu probieren?
4. Warum ist document.writeln() eigentlich böse?Vielen Dank im Voraus für Anregungen, Tipps, problembezogene Rückfragen, Links oder ein fertiges Script ;-) (nein, nein, war wirklich nur ein Scherz; nehmen würde ich es natürlich trotzdem ...)
Lieben Gruß
Johann Friedrich
-
Om nah hoo pez nyeetz, Johann Friedrich Lessing (zweiter Versuch)!
- Warum ist document.writeln() eigentlich böse?
Nimm dir ein Entwicklertool mit einer JS-Konsole (z.B. firebug), öffne eine beliebige Website und schreibe in die Eingabezeile der Konsole document.write("Hallo").
Matthias
-
