Accordian+tabs+AJAX for oppdeling av mye innhold?

[minimax]

Jeg jobber med en nettside som vil ha en stor mengde tekst/bilder i form av spørsmål/svar (FAQ) og prøver å finne en brukervennlig måte å kunne navigere gjennom dette. Her er hva jeg har tenkt så langt:

 

horisontale "tabs" for å navigere mellom de 3 ulike FAQ seksjonene, slik som denne:

 

 

 

En "accordian" for hver av disse tre tabs, for oppdeling av spørsmål og tilhørende svar, som denne:

 

Det er mulig jeg også trenger en navigasjon innenfor de ulike spørsmålene, derav en vertikal navigasjonsmeny langs venstre eller høyre side.

Videre tenker jeg at det ville vært elegant om innholdet mellom de 3 ulike tabs blir lastet inn uten at nettsiden må oppdateres. Mener å ha hørt at dette heter AJAX. Sist og ikke minst må det hele være responsivt slik at det fungerer på ulike nettlesere/maskinvare. Her er en skisse over det hele:

 

 

 

 

Dessverre er kunnskapen min om Javascript nærmest lik null, men kan grunnleggende HTML samt CSS -finnes det en løsning som jeg mer eller mindre kan klippe/lime inn i HTML dokumentet mitt?

Vurderer å bruke Twitter Bootstrap samt en grunnleggende mal (template) for å komme i gang med nettsidene uten å måtte starte helt fra scratch.

Endret 19. september 2014 av minimax

[Feh]

Hvis du ønsker å lære, kan du lage dette selv. Hvis ikke, kan du se på ferdigløsninger. Spesielt Wordpress har mange enkle FAQ plugins hvor du slipper den tekniske biten og heller kan fylle inn med innhold og evt. endre css.

 

Her har du et par gratisalternativer:

 

https://wordpress.org/plugins/q-and-a/

https://wordpress.org/plugins/wordpress-faq-manager/screenshots/

 

Og et par premium alternativer:

 

http://codecanyon.net/item/sugar-faqs-wordpress-faq-management-plugin/330624?WT.ac=search_item&WT.z_author=mordauk

http://codecanyon.net/item/bwl-advanced-faq-manager/5007135?WT.ac=search_item&WT.z_author=xenioushk

 

Du kan nok med fordel browse mer etter dette selv, disse var noen av de første jeg fant på google. Fordelen med en slik løsning er at du slipper 90% av det tekniske, og wordpress holder styr på det meste for deg. Skal du lage dette selv fra scratch vil det ta mange mange timer, men om du er interessert i å lære kan jeg sikkert gi deg noen pekere til hvordan du kan starte.

 

PS: Det heter forøvrig "accordion", og betyr trekkspill på norsk

Endret 19. september 2014 av Feh

[minimax]

Trekkspill høres riktig ut, med "o"

Har tatt en rask titt på lenkene og det ser flott ut med komplette løsninger, med alle sammen forutsetter Wordpress. Har lite greie på WP annet enn at det er et innholdsbasert "system" (CMS) ulikt måten jeg har laget nettsider på (kodet i HTML, og litt i CSS for deretter å laste opp til serveren via FTP), så det blir ekstra mye å sette seg inn i igjen.

 

Finnes det noe lignende for den måten jeg koder på? Altså, ferdige løsninger som jeg hovedsaklig kopierer/limer inn i HTML dokumentet mitt og henviser til CSS/JS filer? Vet ikke om dette er en gammeldags metode å lage nettsider på (har ikke fulgt så mye med i web-design miljøet), men det er iallefall det jeg er kjent med (da trenger jeg ikke starte helt fra bunnen av igjen).

 

Finner ikke så mye ved å søke (det dukker hovedsaklig opp FAQer for diverse ting, mens jeg er ute etter et opplegg for å lage og organisere FAQer på en nettside).

Gratis er bra, men jeg betaler gjerne litt om det er nødvendig og det da finnes bedre løsninger.

Endret 19. september 2014 av minimax

[quantum]

Det er vel AngularJS - gjerne i kombinasjon med Bootstrap - som er i vinden nå.

 

http://angular-ui.github.io/bootstrap/

 

Her finner du ganske raskt (siden Accordion begynner på A :o) et eksempel å starte med.

 

Det er etterhvert blitt et helt økosystem rundt AngularJS og generelt SPA (Single Page Applications), sjekk også ut Node.js, Grunt, Bower, Yeoman og for å gjøre hjernevasken komplett; MongoDB.

Endret 19. september 2014 av quantum

[Feh]

Trekkspill høres riktig ut, med "o"

Har tatt en rask titt på lenkene og det ser flott ut med komplette løsninger, med alle sammen forutsetter Wordpress. Har lite greie på WP annet enn at det er et innholdsbasert "system" (CMS) ulikt måten jeg har laget nettsider på (kodet i HTML, og litt i CSS for deretter å laste opp til serveren via FTP), så det blir ekstra mye å sette seg inn i igjen.

 

Finnes det noe lignende for den måten jeg koder på? Altså, ferdige løsninger som jeg hovedsaklig kopierer/limer inn i HTML dokumentet mitt og henviser til CSS/JS filer? Vet ikke om dette er en gammeldags metode å lage nettsider på (har ikke fulgt så mye med i web-design miljøet), men det er iallefall det jeg er kjent med (da trenger jeg ikke starte helt fra bunnen av igjen).

 

Det er nettop det det ikke blir. WP tar deg 5-15 minutter å installere + plugins og så er du good to go og kan starte å produsere innhold (FAQen). Det er ett av de mest lettfattelig CMSene som fins, så jeg anbefaler deg på det sterkeste å ofre noen minutter av livet ditt på installere det på serveren din (guide her) og sjekke det ut.

 

Det quantum nevner er selvsagt noe du kan se på om du er interessert, men det blir kanskje litt mye å gape over på en gang. Har ikke testet selv, men Angular CMS bruker en del av de tingene han nevner.

 

En annen viktig ting her er hvor mye du skal lagre. Er det 10-15 spørsmål i FAQen din eller er det 100+? Hvis sistnevnte kommer du ikke unna å bruke, eller lage, et CMS med mindre du har et sterkt ønske om å slite deg ihjæl og gjøre brukeropplevelsen horribel.

 

MongoDB (NoSQL) eller MySQL må du nesten ha i bakgrunnen uansett hvis innholdet er av omfattende størrelse, slik at brukeren får mulighet til å søke i innholdet, og du selv kan hente det frem ved søk for å redigere det, fremfor å leite gjennom en katalog med html filer, eller søke gjennom et kjempestort html dokument.

[quantum]

Hva som er riktig verktøy avhenger veldig av om dette er en "blogg" eller en "app" ...

 

Selv om det er uendelig mange plugins til WP fins det begrensninger. Men om man ikke stanger hodet i noen av disse er det nok mye enklere enn å kode en SPA med AngularJS.

[minimax]

Jeg burde forstått at dette burde bli kompliserte og tidkrevende saker å sette seg inn i

"app"? Er det slike nettsider som rett og slett er et verktøy (f.eks. man laster opp bildefiler for å få dem manipulert for så å laste ned det ferdige resultatet)?

Nei, dette er hverken en blogg eller app men en ganske basic nettside med tekst, bilder osv. Den trenger ikke å oppdateres stadig vekk, som en blogg, så endringer kan jeg fint ordne i selve HTML koden. Det er rammeverket jeg ikke riktig har kommet i gang med.

 

Det som blir litt mer avansert sånn teknisk sett er FAQ siden pga. at jeg vil ha det så brukervennlig og fleksibelt som mulig.

I FAQen er det ca. 30-50 spørsmål med svar, så da blir det omtrent 15 stykker i hver av de tre FAQ-seksjonene. Selve innholdet har jeg ferdig, så det er egentlig bare å kopiere/lime det inn der det skal være og evt. legge inn bilder.

 

Har søkt en god del i det siste og funnet noen responsive tabs som Responsive full width tabs (med demo) og Responsive-tabs 1.4 (demo her) samt responsive accordions: Responsive accordion 1.3 (demo her) og Jquery responsive accordion (demo her) og flexible slide-to-top accordion (med demo). Spørsmålet er jo om man kan kombinere koden fra en responsiv tabs med en responsiv accordion. Så langt har jeg ikke funnet en slik løsning.

 

AngularJS virker interessant selv om det meste virket litt gresk for meg, så jeg søkte litt og fant AngularJS vs. jQuery. Jeg ble ikke stort klokere, men AngularJS virker som et avansert opplegg der det også trengs installasjon på serveren (noe jeg ikke har kunnskap om). Det er kanskje litt "over the top" for mitt bruk, eller?

 

En databaseløsning var en god ide, for jeg ønsker at man skal kunne søke gjennom nettstedet, men krever det mye forkunnskap for å få til? HTML/CSS kode kan vel kanskje kopieres/limes inn i dokumentene mine, men det må vel installeres noe på selve serveren også? Har til stadighet hørt om MySQL, men dette viser seg å være kommersielt og ganske dyrt. SQlite derimot er gratis og skal visstnok være like bra for mindre prosjekter (opp til 100 00 besøk om dagen!! Noe jeg aldri vil komme i nærheten av).

MongoDB (forferdelig navn!) ser jeg er gratis og er sikkert et like bra alternativ.

Endret 20. september 2014 av minimax

[Feh]

MySQL er gratis (open-source) og kan administreres via web (phpmyadmin) eller klient (jeg foretrekker HeidiSQL). En FAQ database burde være relativt enkel å sette opp, og sjansen er stor for at du allerede har tilgang til dette via webhotellet/webserveren din.

 

Hvis du velger å lagre alt i html-dokumenter gjør du søk vanskelig. En databaseløsning er nok best om du har såpass mange (30-50 + svar) siden det gjør redigering og søk vesentlig mye enklere.

 

I mine øyne kan Angular og jQuery best sammenlignes med at førstnevnte er et slags synergi-rammeverk med en rekke andre teknologier for komplette løsninger, mens jQuery er mest for manipulering av elementer samt en usansynlig enkel AJAX syntax som bl.a. er veldig lett å bruke sammen med andre back-end språk som f.eks ASP og PHP med enten MSSQL eller MySQL. Angular, med RESTen (...) er også en meget kraftig løsning, men brukerterskelen er nok en smule høyere siden det er såpass nytt.

 

En liten notis er at responsive ikke er avhengig av hva slags teknologier du bruker, men ene og alene avhengig av CSS.

[quantum]

Jeg ..

 

 

En "app" er vel stort sett en dynamisk nettside, altså med en ellerl annen form for logikk tilknyttet, javascript på klienten, eller et serversidespråk. Om AngularJS er overkill må du nesten finne ut av selv, det som er sikkert er at det er en læringskurve å klatre. Oppsiden med AngularJS er at du får ryddigheten tredd tvangsmessig nedover hodet og en del av det griseriet som javascript i bunn og grunn er, blir skjult for deg.

 

Siden du nevner Ajax og javascript kan du ikke basere deg på å bare klippe og lime statisk html. Ajax dreier seg jo om å gjøre kall til server, og på serveren som skal svare må da "noe" være installert, det slipper du ikke unna, det har ikke noe med AngularJS å gjøre i seg selv. Men AngularJS brukes veldig mye i to-spann med Node.js på serveren, gjerne til litt mer komplekse applikasjoner.

 

Jquery vs. Ajax, JQuery baserer seg på DOM-manipulasjon, men er ikke noe "komplett" rammeverk. AngularJS baserer seg også på DOM-manipulasjon, men er også et MVC-rammeverk, altså tilbyr støtte for request-response-livssyklus.

 

MySQL koster ikke mer enn MongoDB. Eventuelt kan du bruke MariaDb hvis du ikke vil bruke et Oracle produkt. SQLite er heller ikke dumt, jo enklere jo bedre. Jeg pleier å anbefale PostgreSQL. Dog er det MySQL som er suverent mest utbredt, dermed lettest å få hjelp med, og oftest tilgjengelig på diverse hosting-løsninger. Du kommer i mål uansett. Men vær klar over at dette er to helt forskjellige former for database. MySQL er - som SQLite og PostgreSQL- relasjonsdatabaser, mens MongoDB er en dokumentdatabase. Hvis du ikke er helt sikker på hva du trenger, så styr unna MongoDB, den er rettet inn mot å lagre så store datamengder at vanlige relasjonsdatabaser får problemer. Mange bruker MongoDb i mer "vanlige" sammenhenger også, men da er man stort sett bedre tjent med en vanlig relasjonsdatabase, etter mitt syn.

 

Hvorvidt du trenger noen forkunnskaper for å bruke en databaseløsninging ... det kommer an på. Hvis du går for en CMS/Blogg-løsning som WP, Joomla eller lignende, vil det ligge en database bak som du ikke nødvendigvis trenger å forholde deg veldig mye til. Skal du gjøre Ajax/REST-kall til en server hvor det igjen ligger en database med data du henter ut, så blir det nok mer å sette seg inn i, du må lære deg litt sql, og også et eller annet server-side-språk, som javascript (Node.js), PHP, Java eller lignende.

 

Hvis dette med database er kommet på banen som en løsning på site-søk, vil det jo være slik at et CMS vil tilby dette out-of-the-box, mens en løsning du lager selv "fra bunnen av" vil kreve "noe" å søke i. Det kan nesten være en hvilken som helst form for database egentlig, men søkeindekser som Elasticsearch og Solr er spesielt ment for formålet. De er i sin enkleste form ikke veldig vanskelig å sette opp, men primært er de ment å håndtere ganske svære datamengder, så det er nok noe du heller kan se på i "fase 2".

Endret 21. september 2014 av quantum

[minimax]

Takker for tips. Trenger nok å bruke litt tid på å fordøye alt dette, men som alt annet står vel det endelige resultatet i forhold til arbeidet man legger i det

[lombriz]

Du kan også lage dette enkelt selv, for å ikke sprenge all info, eller alle tabs, på en kunde/klient.

 

<div id="tab01" style="display:block;">

 

</div>

 

<div id="tab02" style="display:none;">

 

</div>

 

<div id="tab03" style="display:none;">

 

</div>

 

Deretter JS onclick: sett css til none på alle divs (tab-divs), og display:block; på neste steg f.eks.