FAQ-Seite erstellen mit AJAX oder HTML5+CSS3 ?
0 
Felix Riesterer
1 
Gunnar Bittersmann
1 molily
0 molily
0 0 0
FAQ-Seite erstellen mit AJAX oder HTML5+CSS3 ?
Hallo,
Ihr kennt doch sicher diese FAQ-Seiten, bei denen eine Reihe von Fragen aufgelistet sind und, wenn man auf eine dieser Fragen klickt, eine Box mit der - teils umfangreichen - Antwort aufgeht, klickt man auf die nächste Frage, geht diese Box zu und die nächste auf usw.
Hat jemand von Euch so etwas schon realisiert?
Wie ich mitbekommen habe, geht so etwas mit AJAX, da habe ich allerdings keine Erfahrung.
Andererseits kann man mit den neuen Standards HTML5 und CSS3 auch schon einiges.
Wer hat einen Tipp?
Danke und Gruss
Claus S.
-
Lieber Claus S.,
fangen wir einmal ganz langsam an:
1.) Eine FAQ-Seite ist eine "Seite", also ein HTML-Dokument. In irgendeiner der HTML-Sprachvarianten, gerne auch HTML5.
2.) Die FAQ-Seite muss per Link erreichbar sein. Völlig ohne JS, aber mit HTTP. HTTPS ist dafür nicht zwingend notwendig.
3.) Die FAQ-Seite kann man mit CSS aufhübschen - muss man aber nicht. Wenn man will, kann man sich aller aktuell verfügbaren Spezifikationen zu CSS bedienen, inklusive CSS3. Browsersupport könnte beachtenswert sein.
4.) Das Einblenden einer in den FAQ beantworteten Frage kann man mittels JS "vereinfachen", indem man per JS eine Art "Layer" über das aktuelle Dokument legt (der "LightBox-Effekt"), wobei man aber die Bedienbarkeit sowohl der aktuellen Seite, als auch der FAQ garantieren sollte!
Hat jemand von Euch so etwas schon realisiert?
Eine FAQ-Seite? Ja. Das Forum hat soetwas.
Wie ich mitbekommen habe, geht so etwas mit AJAX, da habe ich allerdings keine Erfahrung.
AJAX ist ein Modewort. Was willst Du hinsichtlich meiner obigen vier Denkschritte mit der Kombination aus asynchronem JavaScript mit XML (das ist "AJAX"!) erreichen?
Andererseits kann man mit den neuen Standards HTML5 und CSS3 auch schon einiges.
Ja. Aber was willst Du mir mit diesem Satz hinsichtlich der obigen vier Denkschritte sagen?
Wer hat einen Tipp?
Fange bei einem simplen Dokument an, gerne auch in HTML5, welches Du nach Belieben mit CSS (gerne auch mit Selektoren und Eigenschaften der Spezifikation CSS3) gestaltest. Wenn Du dann etwas hast, das es zu verlinken lohnt, können wir gerne über Denkschritt 4 diskutieren. Aber zuerst zeigst Du Deine aktuelle FAQ-Seite!
Liebe Grüße,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:| n4:? de:> ss:| ch:? js:) mo:} zu:)-
@@Felix Riesterer:
nuqneH
AJAX ist ein Modewort. Was willst Du hinsichtlich meiner obigen vier Denkschritte mit der Kombination aus asynchronem JavaScript mit XML (das ist "AJAX"!) erreichen?
Dass nicht die Antworten auf sämtliche Fragen übertragen werden, sondern nur diejenigen, die den Nutzer interessieren.
Also nicht einfach ein Akkordeon, wo im HTML vorhandene Inhalte auf- und zugeklappt werden.
Zu realisieren wäre dies folgendermaßen:
<dl> <dt><a href="faq/question-foo">Frage: foo?</a></dt> <dt><a href="faq/question-bar">Frage: bar?</a></dt> <dt><a href="faq/question-baz">Frage: baz?</a></dt> </dl>Für all diese Links werden Eventhandler definiert, die das Anspringen des Links verhindern und stattdessen bei Bedarf einmalig per AJAX die jeweilige Antwort holt und in ein dd-Element schreibt, das hinter das entsprechende dt-Element ins DOM gehängt wird.
Ohne JavaScript (also auch für Suchmaschinen) stehen die Antworten als HTML-Ressourcen auf dem Server zur Verfügung (kann statt einzelnen faq/question-{foo|bar|baz} auch ein Dokument faq/full-answers sein).
Qapla'
--
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)-
Dass nicht die Antworten auf sämtliche Fragen übertragen werden, sondern nur diejenigen, die den Nutzer interessieren.
FAQs sind selten so lang, dass sich das lohnt. Wenn das HTML nicht hunderte KB groß ist, würde ich es in einem Rutsch gzipped über die Leitung senden. Für jeden Ajax-Request hätte ich 1-2 KB unkomprimierten Overhead und unter Umständen eine hohe Latenz, das ist letztlich auch keine schönere UX.
Mathias
-
Hi,
FAQs sind selten so lang, dass sich das lohnt.
Und wenn sie es sind, dann sollte man sich fragen, warum es so viele sind … es könnte darauf hindeuten, dass man eine vernünftige (Benutzer-)Dokumentation vernachlässigt hat und jetzt schlicht per FAQ „abbügeln“ will.
MfG ChrisB
--
Autocomplete has spoiled me to a point where it happens every so often that I encounter a CAPTCHA, and I just type in the first character … and then wait for the rest of the code to be automatically suggested :/
-
-
-
Hallo,
AJAX ist ein Modewort. Was willst Du hinsichtlich meiner obigen vier Denkschritte mit der Kombination aus asynchronem JavaScript mit XML (das ist "AJAX"!) erreichen?
Niemand, der Ajax sagt, meint (notwendig) XML. Ein technisch stimmiger Begriff war das noch nie. Man behandelt es am besten nicht als Abkürzung für irgendetwas. Es bezeichnet einfach das Laden und Austauschen von Inhalten mit JavaScript. Ob das nun HTML, JSON, XML oder CSV ist.
Mathias
-
-
Mahlzeit,
Wie ich mitbekommen habe, geht so etwas mit AJAX, da habe ich allerdings keine Erfahrung.
Das hat mit Ajax erstmal gar nix zu tun. Ajax ist dann nötig, wenn du Inhalte nachträglich vom Server lädst.
Was du willst nennt sich u.a. Accordeon, damit solltest du fündig werden.
--
42-
@@M.:
nuqneH
Was du willst nennt sich u.a. Accordeon, damit solltest du fündig werden.
Englisch mit c und i: accordion.
Deutsch mit k und e: Akkordeon.Qapla'
--
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
-
-
Hi,
Andererseits kann man mit den neuen Standards HTML5 und CSS3 auch schon einiges.
Die Elemente details und summary würden sich anbieten. Plus einem JS-Polyfill für ältere Browser, die die zugehörige Funktionalität noch nicht implementiert haben.
MfG ChrisB
--
Autocomplete has spoiled me to a point where it happens every so often that I encounter a CAPTCHA, and I just type in the first character … and then wait for the rest of the code to be automatically suggested :/-
@@ChrisB:
nuqneH
Die Elemente details und summary würden sich anbieten. Plus einem JS-Polyfill für ältere Browser, die die zugehörige Funktionalität noch nicht implementiert haben.
IE 11 und Firefox sind keine „älteren Browser“. details/summary ist WebKit/Blink only. In der HTML5-Spec aufgeführt als „feature at risk“, d.h. es steht in den Sternen, ob andere Browser das auch implementieren oder ob WebKit/Blink-Browser das wieder rausnehmen.
Qapla'
--
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
-
-
hi,
Hat jemand von Euch so etwas schon realisiert?
Massenweise ;)
Wie ich mitbekommen habe, geht so etwas mit AJAX, da habe ich allerdings keine Erfahrung.
Angucken, durchlesen, verstehen, Ideen aushecken, Erfahrungen machen.
Andererseits kann man mit den neuen Standards HTML5 und CSS3 auch schon einiges.
Sischr. Insbesondere sind Offline/Mobile-Lösungen interessanter denn jeh.
Wer hat einen Tipp?
Im Radio spielt grad ein Song von Gwen McCrae...
Horst Lamotte