Foodbest – Del 5: Kampagne website

Dette er en fortsættelse af det forrige indlæg om det endelig produkt i Foodbest-projektet. Det forrige indlæg handler om selve kampagnen. I dette indlæg kan du læse om websiden vi lavede…

^ Tryk for at se animation ^

Til kampagnen hører også en webside. Selve websiden skal kunne bruges både før og efter Foodbest Dagen. Før dagen vil eleverne kunne gå ind på siden og læse om de emner de kommer igennem, så de kan forberede sig til dagen.

Efter Foodbest Dagen vil eleverne ligeledes kunne læse mere om emnerne, samt hvilke uddannelser de kan tage, hvis de skulle være blevet interesseret. Samtidig kan de også gå ind og se hvor deres klasse ligger i konkurrencen.

——————————-
SE WEBSIDEN HER 
——————————-

Designet

Designet og idéer hertil vil jeg ikke komme nærmere ind på. Mange af tankerne bygger på værdier, som vi har analyseret os frem til hos KU LIFE og Metropol. Dette har jeg allerede skrevet et helt indlæg om, så hop i stedet her ind og læs det. Du kan også trykke på billedet oven over for at se en animation af alle siderne.

Jeg vil dog glædeligt fortælle mere om tankerne. Bare smid mig en mail på m@webinator.dk så besvarer jeg gerne spørgsmål og forklarer løs! Og jeg mener det virkelig: SKRIV ENDELIG MED SPØRGSMÅL OM ALT TIL SIDEN ELLER UDDANNELSEN! 🙂

Kodning (det tekniske)

Hvis du er en kodnings nørd, så hop ind og se på kildekoden på websiden. Den illustrer nok noget af det flotteste stykke kode, som jeg længe har lavet. Alt er delt flot op og koden er SUPER overskuelig. Men nok om det, her kommer lidt om de ting fra kodnigen, som er mest spændende.

Parallax
Selve websiden er lavet med parallax-effekter vha. jQuery scriptet Stellar.js. Hvis du ikke ved hvad Parallax er, så kan jeg kort forklare, at det er hvor elementer (i dette tilfælde på websiden) flytter sig uafhængigt af hinanden. Selve effekten er mest kendt fra spil, hvor det bruges til at skabe noget 3D effekt, vha. en forgrund, midte (mellemgrund) og en baggrund.

Du kan se det inde på websiden, når du scroller til siden. De fleste elementer scroller med forskellig hastighed og nogle scroller den anden vej. Alt dette er brugt til at opbygge en række scener og nogle historier, så websiden bliver spændende for målgruppen.

Men nok om det. Jeg har længe ville lege med Parallax-effekter og endelig fik jeg lov til det. Det var lidt uoverskueligt i starten, men det er faktisk relativt simpelt og kræver bare nogle få tricks…. jeg elsker det!

Optimering til skærmstørrelser
Næsten alle elementerne på websiden, er lavet med størrelser i %, så websiden passer ind på næsten alle skærmstørrelser. Det fungere dog bedst på alt fra 1280x800px og op til 1920x1080px (Full HD). Jeg har ikke testet med større opløsninger, men billederne er lavet til den sidste opløsning og vil formentlig ikke kunne trækkes særlig meget større.

Virker i IE7, IE8 og IE9
Der var en del fejl med websiden i IE7 og IE8 til at starte med. Men efter en række tests og en del optimeringer, (i stedet for baggrunde så brug af <img>-billeder) så virkede det faktisk fint. Dette vil jeg dog heller ikke komme nærmere ind på, men skriv endelig og spørg! 🙂

Slut: Det var lidt hvad jeg vælger at fortælle om websiden for nu. Der er stadig meget jeg kunne sige, men det bliver nok for langt og kedeligt for nogen, så jeg holder det inde. Send dog en kommentar eller en mail, hvis du vil vide mere! Jeg vil elske at fortælle om kodningen! 😉