Navigationsleiste intelligenter gestalten?
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
auge
bauen
beispiel
browser
code
datei
entscheiden
header
inhalt
internet
maus
mensch
page
problem
rechner
sache
stellen
tun
vorteil
weben
-
Heyho!
Ich schreibe gerade munter an einer neuen Version meiner Website und nutze css templates die im internet frei angeboten werden. Allerdings stört mich, dass, da ich im Gegensatz zu meiner alten Version keine Frames nutzen möchte, ich die Navigationsleiste bei jeder nachträglichen Änderung auf jeder einzelnen Seite mit "copy&paste" neu einfügen darf. Gleiches gilt für den footer. Darum wollte ich fragen welche Möglichkeiten es gibt, dass ganze ohne Frames hinzubekommen.
Ich weiß, dass es auch mit SSI geht, aber das wird meinen Informationen zu Folge von lima-city nicht unterstützt.
Bedanke mich schon im Voraus für eure antworten.
grüße
Daniel -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Ich würd mal sagen: Nutze Divs und Ajax:
Alles schön in Divs packen, denen eine ID mitgeben (oder einen Namen), und dann im onclick-Handler derjenigen Elemente, die "Links" darstellen sollen einen XMLHttpRequest losjagen. Sobald der zurückkommt, die Eigenschaft innerHTML des Zieldivs auf den Inhalt des XMLHttpRequest setzen und schon hast eine
a) framefreie,
b) dynamisch,
c) partiell ladende,
d) das-Browser-Anwendungen-sind-Stateless-Problem-behebende
Webpräsenz. -
Nun, das was dir census anbietet ist ein Schnickschnack für ein wenig Web 2.0. Da du unbedingt eine none-JS-Variante anbieten solltest, wäre es ratsam das mit PHP zu realisieren. Du übergibst die Sektion im Query-String und nach diesem Fügst du dann den Inhalt deiner Seite ein.
-
Du kannst das auch mit php machen. Benenne deine "Beispiel.htm" in "Beispiel.php" um und füge einfach
<?php include("navi.htm"); ?>
bzw.
<?php include("footer.htm"); ?>
usw. ein und erstelle eine neue Datei "navi.htm"/"footer.htm" in der du den Code für die Navigation bzw. Footer einfügst. Dadurch brauchst du nur eine einzige Datei für Navi, Footer usw.. Ist wohl die einfachste Möglichkeit. -
Warum unbedingt eine JS-freie-Seite? Das ist ja sooo 1990. Ich optimiere meine Seite ja auch nicht für 640x480 Pixel.
Date JavaScript On JavaScript Off January 2008 95% 5% January 2007 94% 6% January 2006 90% 10% January 2005 89% 11% January 2004 92% 8% January 2003 89% 11% January 2002 88% 12% January 2001 81% 19% January 2000 80% 20%
(Quelle: http://www.w3schools.com/browsers/browsers_stats.asp) -
census schrieb: Warum unbedingt eine JS-freie-Seite? Das ist ja sooo 1990. Ich optimiere meine Seite ja auch nicht für 640x480 Pixel.
Das nennt man barrierefrei! Wenn ich kein JS habe, kann ich nichts tun. Wenn ich es aus Sicherheitsgründen ausschalte, kann ich nichts tun!
Bei zu niedriger Auflösung kann man scrollen
-
Barrierefrei ist sicherlich sehr erstrebenswert.
Man muss halt die Vorteile von Web2.0 gegenüber den eigenen Ansprüchen an die Barrierefreiheit abschätzen. Eine Web2.0-HP kann halt bei Nutzer, die keine Barrieren zu überwinden haben, erheblich mehr hermachen, aber man schließt eventuell Menschen aus.
Allerdings, müssen wir uns auch vor Augen halten, dass wahrscheinlich keiner von uns barrierefreie Seiten schreibt. Dieser Begriff umfasst einfach zuviele Anforderungen. Schon allein die Anforderung, dass die Seite komplett ohne Maus problemlos zu bedienen ist, ist oft genug ein Showstopper. Oder die Farbwahl. Oder die Anordnung der Elemente. Oder fehlende Gebärdenspracheunterstützung, oder, oder, oder.
(http://www.w3.org/TR/2008/REC-WCAG20-20081211/)
Man muss halt entscheiden, was man will. -
Was soll dieser ganze Blödsinn mit Web2.0? Toll ich habe lustige SlideIn-Effekte für nen Menu was ne halbe Stunde braucht bis es dargestellt wird. Ihr vergesst Total das der ganze Mist auch gerendert werden muss... und bis auf Chrome kann das kein Browser wirklich gut. Vor allem wenn es dann noch animiert wird.
Was ist daran so schwer mal keine "KlickiBunti" Page zu machen, die nur noch so vollgestopft ist mit JS, wo dann zum Beispiel IE User erst einmal lustige Meldungen weg klicken müssen und bei manchen Browsern schon mal garnichts angezeigt wird?
Barrierefreiheit ist kein Zauber und lässt sich super einfach in jede Page einbauen. Grade wenn man viel mit CSS arbeitet ist es sogar noch einfacher... aber es ist ja zu viel verlangst das man sich die Arbeit macht um auf Menschen zu optimieren. Eher wird auf Suchmaschienen optimiert und der User komplett ignoriert (geschehen hier auf Lima, Tags, kein target mehr bei den externen Links und so weiter).
Auch der Ausruf "Wird basteln nach W3C Standard!" ist nicht grade ein Qualitätsmerkmal, es zeigt mir nur das ich diese Seite getrosst vergessen kann, weil ich Früher oder Später auf dicke Stolpersteine treffe...
So um das nochmal kurz zusammen zu fassen: Es ist kein großer Aufwand eine Seite so zu gestalten das sie wirklich allen Zugänglich gemacht werden kann. Und JS sollte nur in Ausnahmefällen verwendet werden, dort wo es wirklich gebraucht wird. -
strange schrieb: So um das nochmal kurz zusammen zu fassen: Es ist kein großer Aufwand eine Seite so zu gestalten das sie wirklich allen Zugänglich gemacht werden kann. Und JS sollte nur in Ausnahmefällen verwendet werden, dort wo es wirklich gebraucht wird.
Das sehe ich genauso. Sofern Javascript sinnvoll eingesetzt wird, kann es dem Benutzer auch von Nutzen sein. Eine Webseite sollte folglich nicht nur mit Javascript funktionieren! -
strange schrieb:
Was soll dieser ganze Blödsinn mit Web2.0?
Barrierefreiheit ist kein Zauber und lässt sich super einfach in jede Page einbauen
ad 1: Meine Mutter sagt auch immer: "Was soll dieser Blödsinn mit dem Internet?"
Web 2.0 kommt, ist an Stellen schon da und ist hier um zu bleiben. Jeder muss halt entscheiden, ob er mitgeht oder nicht. Es ist aber normal, dass neue Technologien zunächst Angst machen und abschrecken.
Desweiteren hat Web 2.0 nichts mit "Klickibunti" zu tun. Das kann man auch ganz gut mit old school HTML machen.
Du machst dir sorgen darum, dass das alles gerendert werden muss? Welcher Rechner kommt denn an seine Grenzen, weil er eine Webpage rendern muss? Selbst auf Arbeit auf Minimal-VMs hab ich noch nie gesehen, dass ein Webinhalt einen Rechner in die Knie gezwungen hat. Ich meine doch, dass im Netz das Bottleneck immer noch die Bandbreite ist und nicht die GPU.
Mit Web 2.0 verhält es sich genau so wie mit jeder Technologie: es kommt darauf an, was man daraus macht. Man kann mit Web 2.0 barriereschaffende und barrierefrei Seiten bauen. Man kann mit plain HTML barriereschaffende und barrierefreie Seiten bauen.
Nur weil etwas alt ist und "schon immer so war" und "früher eh alles besser war", heißt das nicht, dass man sich gegen Neues wehren muss.
ad 2: Zeig mir bitte eine barrierefreie Seite, die nicht von Pros erstellt wurde. Wie bereits gesagt, "Barrierefreiheit" umfasst __VIELE__ Aspekte. Kann ein Screenreader ohne Probleme mit deiner barrierefreien Seite umgehen? Kann man auf deiner barrierefreien Seite ohne Probleme ohne Maus navigieren?
BTW heißt dieses Unterforum "HTML & JavaScript", weshalb ich nicht verstehe, wieso hier Hasstiraden gegen JavaScript losgetreten werden. . .
Edit: Hab mir gerademal deine Seite auf Lima angesehen: Besteht nur aus einer Graphik und . . . kein Alternativtext angegeben. Das ist das Gegenteil von Barrierefreiheit. Preloader mit Js. Wie war das mit dem Splitter im Auge des Nächsten und dem Balken im eigenen? (Ähnliches gilt für www.medientechnik-hannover.com, aber sienna-handarbeiten.de ist da besser)
Beitrag zuletzt geändert: 26.6.2009 2:22:20 von census -
Wie gleich los geheult wird, wenn man was gegen das heiß geliebte JS sagt... dann werden sogar noch Leichen aus dem Keller geholt. Wie unsportlich. Btw. JS "KlickiBunti" gehört zu Web2.0...
Mit meinem Beitrag habe ich auf den infaltionären gebrauch von JS hingewiesen und es angeprangert. Ja auf meiner Page ist nen PreLoader... aber ohne gleich Prototype oder sonst ein JS-Framework zu benutzen. Auch das Logo fliegt nicht in den Screen und der MouseOverEffekt fadet auch nicht. Das wäre sonst "KlickiBunti"!
Und wo bitte schön sind das Hasstriaden... ? Nimm mal lieber mal den Holzschuppen vor Deinen Augen weg bevor Du andern vor die Karre **** und solch nen Dünnpfiff von Dir gibst. -
census schrieb:
Man muss halt die Vorteile von Web2.0 gegenüber den eigenen Ansprüchen an die Barrierefreiheit abschätzen.
Schwachfug! Wenn nicht sogar unverschämt gegenüber den Betroffenen.
Erstens hat ein Nichtbehinderter keine Ansprüche an Barrierefreiheit, sondern behinderte User haben einen Anspruch auf barrierefreies Webdesign.
Zweitens hat Web 2.0 (was auch immer man in diese Phrase hineininterpretiert. KlickiBunti trifft es schon ganz gut.) nichts mit fehlender Barrierefreiheit zu tun!
census schrieb:
Eine Web2.0-HP kann halt bei Nutzer, die keine Barrieren zu überwinden haben, erheblich mehr hermachen, aber man schließt eventuell Menschen aus.
Hermachen, aber mehr auch nicht. Und dafür nimmst Du Diskriminierung in Kauf?
census schrieb:
Allerdings, müssen wir uns auch vor Augen halten, dass wahrscheinlich keiner von uns barrierefreie Seiten schreibt. Dieser Begriff umfasst einfach zuviele Anforderungen. Schon allein die Anforderung, dass die Seite komplett ohne Maus problemlos zu bedienen ist, ist oft genug ein Showstopper. Oder die Farbwahl. Oder die Anordnung der Elemente. Oder fehlende Gebärdenspracheunterstützung, oder, oder, oder.
Ohne Maus? Kein Problem! Hast Du keine TAB-Taste auf deiner Tastatur?
Farbwahl ist auch kein Thema. Mit sinnvollen Kontrasten zwischen Text und Hintergrund ist auch den normalen Usern gedient.
Gebärdensprache ist, wenn überhaupt, primäre Aufgabe derer, die Multimediainhalte kreieren. Als Seitengestalter kann ich aber immerhin erklärende Alt- und Title-Tags verwenden, was außerdem auch von Suchmaschinen honoriert wird.
Die einzigen Argument, die wirklich zutreffen, wären Faulheit und Gedankenlosigkeit. (Derer ich mich zugegebener maßen auch nicht immer entziehen kann)
census schrieb:
ad 1: Meine Mutter sagt auch immer: "Was soll dieser Blödsinn mit dem Internet?"
Web 2.0 kommt, ist an Stellen schon da und ist hier um zu bleiben. Jeder muss halt entscheiden, ob er mitgeht oder nicht.
Folget Kinder, und wenn es nur den Lemmigen ist.
census schrieb:
Es ist aber normal, dass neue Technologien zunächst Angst machen und abschrecken.
Es geht nicht um Angst machen. Aber den Ausschluß von Menschen mit "Haste Pech, so ist halt die neue Technik" zu begründen, ist einfach nur arrogant.
census schrieb:
Selbst auf Arbeit auf Minimal-VMs hab ich noch nie gesehen, dass ein Webinhalt einen Rechner in die Knie gezwungen hat. Ich meine doch, dass im Netz das Bottleneck immer noch die Bandbreite ist und nicht die GPU.
Ob es der Rechner ist, oder eine langsame Anbindung ans Netz, kann doch wurscht sein.
census schrieb:
Mit Web 2.0 verhält es sich genau so wie mit jeder Technologie: es kommt darauf an, was man daraus macht. Man kann mit Web 2.0 barriereschaffende und barrierefrei Seiten bauen. Man kann mit plain HTML barriereschaffende und barrierefreie Seiten bauen.
Richtig, aber Du warst es selbst, der den Focus auf Web 2.0 gelegt hat.
census schrieb:
Nur weil etwas alt ist und "schon immer so war" und "früher eh alles besser war", heißt das nicht, dass man sich gegen Neues wehren muss.
Hat auch keiner behauptet. Das Neue sollte aber Vorteile bringen UND Nachteile vermeiden. Nicht alles, was neu ist, ist auch gut.
census schrieb:
ad 2: Zeig mir bitte eine barrierefreie Seite, die nicht von Pros erstellt wurde. Wie bereits gesagt, "Barrierefreiheit" umfasst __VIELE__ Aspekte. Kann ein Screenreader ohne Probleme mit deiner barrierefreien Seite umgehen? Kann man auf deiner barrierefreien Seite ohne Probleme ohne Maus navigieren?
Warum machen es NUR Pros? Weil den anderen KlickiBunti und billige Effekte wichtiger sind. (Und in das eErlernen dieser "Fähigkeiten" auch sichtlich Zeit zu investieren bereit sind. Barrierefrei ist altmodisch, ist also die Anstrengung nicht wert.)
Wenn der Screenreader nicht klarkommt, ist die Seite nicht barrierefrei. PUNKT
Maus -> siehe oben.
census schrieb:
BTW heißt dieses Unterforum "HTML & JavaScript", weshalb ich nicht verstehe, wieso hier Hasstiraden gegen JavaScript losgetreten werden. . .
Ich sehe hier keine Hasstiraden gegen Javascript, sondern ausschließlich Argumente gegen unüberlegten Einsatz desselben. Javascript einzusetzen ist ok, aber die Nutzbarkeit der Seite darf nicht darunter leiden.
FF
€dit: Typos
€Edit2:
[ontopic]
@jackdanielz: Der Rat von Nicic, das Problem mittels PHP zu lösen ist, neben einigen Denkanstößen zu anderen Themen, vermutlich für dich der sinnvollste Beitrag hier im Thread.
[/ontopic]
Beitrag zuletzt geändert: 26.6.2009 2:36:33 von fatfreddy -
Man kann eine Web 2.0 Website auch ohne JS realisieren. Dann hat man zwar die Effekte nicht und muss auf Nachlade Inhalte als User verzichten, aber es ist machbar. Sieht man auch an vielen Stellen. Zb. Infoseiten die mit Tab-Navigationselementen ausgestattet sind stellen die Tab Inhalte komplett dar, wenn kein JS aktiv ist.
NoScript ist schon ein tolles Plugin ;) -
Ja das leidlich Thema Javascript und Barrierefreiheit. Dabei hat für mich das eine nichts mit dem anderen zu tun. Barrierefreihet verbinde ich mit behinderten Menschen, die zum Beispiel die Seite mit Screenreader lesen müssen, oder die eine entsprechend große Schrift brauchen. Aber ich verbinde es nicht mit Menschen, die Javascript aus Sicherheitsgründen ausschalten, den diese sind in meinen Augen, so leid es mir tut, selber schuld. Desweiteren glaube ich auch nicht das irgend eine Firma, oder sonnst irgendwer jemanden dazu zwingt einen Textbasierten browser zu verwenden.
Manchmal muss man als Entwickler halt Abstriche machen. Man kann zum Beispiel auch nicht die Captchas weg lassen, nur weil Textbasiertebrowser sie nicht darstellen können. Genauso wenig sollte man auf PNG-Transparenz verzichten, nur weil der Internet Explorer 6 es nicht darstellen kann. Und in exakt die selbe Kategorie ordne ich auch Javascript ein. Ich persönlich ziehe es auch vor meine Seite für 95% der User weiterzuentwickeln, anstatt mich von den 5% der User aufhalten zu lassen, welche meistens auch noch selber Schuld sind. Aber das muss jeder selbst entscheiden. Ich kann es nur nicht leiden, dass man sagt, dass es eine javascriptfreie Version geben muss, denn dies wäre ja dann "barrierefrei".
Lg
Ketchupfleck -
Barrierefreiheit und Javascript haben sehr wohl miteinander zu tun. Was aber nicht heißt, bei barrierefreier Gestaltung auf Javascript verzichten zu müssen. Es sinnvoll und überlegt einzusetzen ist die Lösung. Umgekehrt ist eine Webseite, die auf Javascript verzichtet, nicht automatisch barrierefrei.
So kann javascript im Rahmen der Barrierefreiheit sogar Vorteile bringen. Nämlich dann, wenn ich Seitenelemente, die der Barrierefreiheit dienlich sind, mittels Javascript vor dem "normalen" User verstecke. Einige CMS blenden z.B. per Javascript zusätzliche Links aus, die bei einer linearisierten Darstellung der Seite den Zugriff auf Navigation und Content vereinfachen.
Einen User, der aus eigener Entscheidung auf Javascript verzichtet, muß man natürlich nicht gesondert berücksichtigen. Die, denen es nicht zur Verfügung steht, hingegen schon.
Captchas sind eine Barriere. Es gibt zwar Ansätze, ein Fallback anzubieten ( z.B. durch vorlesen der abgefragten Werte), aber auch das sind nur Krücken, die nicht allen Anfordeungen gerecht werden.
Man kann auf diese Dinger aber auch verzichten. Meine Foren sind auch ohne Captcha spamfrei. Spambots sind blöd! Individuell angepaßte Formulare sind für sie kaum überwindbar. Dazu noch die vorgeschaltete Bot-Trap und Ruhe ist.
FF -
Um Links auszublenden, aber nicht komplett zu verstecken braucht man kein bischen JS! CSS reicht da völlig aus... man positioniert das entsprechende Element mit absurden Werten ausherhalb des Fensters, bzw. des Sichtfelds.
So kann man wichtige Bereiche recht einfahc für Screenreader benutzer Sortieren und sie zum Beispiel direkt zum Inhaltspringen lassen, ohne den ganzen anderen Mist lesen zu müssen.
Auch Captcha ist in vielen Fällen sinnlos, da es mitlerweile tausende Robots gibt die selbst die komplexesten Formen erkennen und unterscheiden können. Und wenn man dann nen Captcha einbaut den diese Rotos nicht mehr lesen können, kann es meist auch kein anderer lesen und die Vorlesefunktion ist nur nen schlechtes Alibi für Faulheit, denn Spammschutz geht auch ohne Captcha. -
Nun, JavaScript ist ein wirklich mächtiges und auch wirklich nützliches Tool. Aber man sollte wirklich das kleine wenig Zeit darein inverstieren möglichst barrierefrei zu bleiben.
Wie man es macht?
Nun, ein Paar Beispiele aus den Sachen, die mir in letzter Zeit unter die Nase gekommen sind.
Erstmal, zum Thema öffnen und schließen von Rubriken:
Ich hatte da auf einer Seite vor kurzem sowas um zu setzen und habe es wie folgt gemacht: Erstmal blende ich alle Rubriken geöffnet ein. Wenn man kein JavaScript hat, dann ist alles offen und es ist auf alles zugreifbar. Dann, falls JavaScript aktiv ist und die Seite fertig geladen hat:
$(document).ready(function() { $("table").hide(); $("h3").click(function() { $(this).next().slideToggle("fast"); }); });
Man beachte die Zeile $("table").hide();. Die ist entscheidend. Zuerst habe ich alles angezeigt und erst, wenn JavaScript aktiv ist, verstecke ich es wieder, um ein Toggle zu ermöglichen.
Ach, an dieser Stelle ein Einschub: Du fragtest doch, welcher Computer heutzutage nicht schnell genug rendern kann: Firefox. (Für Opera gilt nachfolgendes nicht) Ich habe auf selbiger Seite eine halbtransparente, fixierte Navigation. Wenn ich schon scrolle hinkt da links ein Streifen hinterher. Wenn ich dann den oben im Code sichtbaren h3 ein Hintergrundbild verpasse und dann mein fast-Toggle ausführe haperts schon mächtig, es sieht nicht mehr gut aus. Wie gesagt, gilt nur für Firefox, Opera handelt das perfekt ;)
Dann, andere Sache ist, urpsrüngliches Thema übrigens, das Nachladen von Daten mittels AJAX:
Erstmal wird eine Seite erstellt. Eine ganz normale Seite. Ganz normal, nur PHP, normale Verlinkung. Erst anschließend, wenn JS aktiviert ist, werden alle Links mit einer onclick-Funktion versehen, die aus dem echten Link, dem PHP Link also, den Link zum Abfragen der Ajax-Daten generiert und bei Klick diesen Request auch ausführt. Eine weitere Sache, die bei Nachladen von Inhalten mittels Ajax beachtet werden muss, ist das erstellen einer History. Wenn man auf einer Otto-Standart-Ajax-Billig-Seite auf den Zurück-Button klickt, landet man keineswegs auf der letzten geladenen Seite. Dafür gibt es einen Trick und zwar das manipulieren des Ankers der URL. Das ist aber etwas tricky es browserkompatibel zu machen, daher lieber fertiges Script nutzen.
Dann, das aller schlimmst sind manchmal die Navigationen. Also, dass man keine Links wie <a onclick="location.href='blabla'">Bla</a> erstellt sollte klar sein, oder? Aber auch bei Dropdown oder Flyout Menüs sollte man wirklich vorsichtig sein. Bei diesen ist es manchmal wirklich schwer, dass ganze menü einfach eingeblendet zu lassen, falls es kein JS gibt. Daher sollte man hier am besten zu CSS greifen, jedoch eine IE 6 Alternative mit JS zur Verfügung stellen. (Kommt mir nicht mit Stu Nichols. Diese häckerischen versteckten Tabellen sind in meinen Augen böse :D)
Zum Thema Captchas: Jop. Normalerweise bringen Captchas nichts. Insbesondere, wenn Leute, die keine Ahnung haben, aber denken welche zu haben, eine Captcha mit irgendwelchen französischen, spanischen, usw. Sonderzeichen erstellen, die kein Mensch eingeben kann und bei der jedes dritte mal die Captcha nicht geht... Die einzigen richtig guten, sind die Microsoft Captchas. Gut zu lesen, aber afaik nicht einfach zu knacken...
mfg nikic -
Gut also das mit dem includen mit php funktioniert so wie ich mir das vorgestellt habe. Jetzt nur nochmal für mich als php unwissenden: Muss ich das CSS das genutzt wird in die includende oder in die includierte datei reinschreiben oder in beide?
-
Es wird alles das als HTML ausgegeben, was dann in der PHP-Datei steht (also mit den include()-Sachen).
Die CSS-Datei schreibst du am besten extern und bindest sie in der header.php ein.<link rel="stylesheet" type="text/css" href="style.css" />
CSS wird ja nicht vom Server verarbeitet, sondern vom Browser. Daher ist es auch relativ egal wo es includiert wird! (Wobei es ja doch valide sein sollte.) -
Also nochmal dass ich's richtig verstanden habe:
Ich hab drei Dateien, z.B.:
1.) style.css
2.) seite.php
3.) navi.html
und
steht in der zweiten Datei.<link rel="stylesheet" type="text/css" href="style.css" />
Gut da so aussieht als würde es funktionieren bedanke ich mich ganz herzlich für eure Hilfe. -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
