Her ses et screenshot af websitet solsystemet i menuen Merkur. Baggrundsbillede skal være static så resten af siden skal man scrolle ned for at se.

Transkript

1 Solsystemet lavet af Jesper Kjær Webintegrator i Kastrup Tekniske Skole Grundforløbsprøve 2014 Opgave: Vores solsystem Onsdag 23 april til onsdag 7 maj Her ses et screenshot af websitet solsystemet i menuen Merkur. Baggrundsbillede skal være static så resten af siden skal man scrolle ned for at se. Side 1

2 Arbejdsplanlægning 23 april: Lav tidsplan finde på design 24 april: Lav skitser til design 25 april: Design af titel tekst, Få inspiration i Planetariet og af Gavity fil 28 april: Lav Photoshop design. Giv billeder blåt skær 29 april: Test design og lav rettelser 30 april: Start på html og css 1 maj: Grundstruktur i html og css 2 maj: Kontakt formular 5 maj: Test siden 6 maj: Lav rettelser i forhold til testen. Endelig dokumentation og aflevering Sidebeskrivelse Sitet vil jeg lave i html, css, php, javascript og Flash. Jeg laver et interaktivt kort i Flash og et interaktiv banner til Planetariet. Jeg vil bruge Php includes så der kun er en side med menu, links til css og footer. Kontaktformularen vil jeg bruge javascript til at validere med og php og mysql til at gemme data i en database. Menuen vil jeg lave som dropdown i css. Siden skal virke på alle pc er tablet og Mac. Farverne i menuen er holdt i blå nuancer for at gøre siden mere rolig og farven udspejler seriøsitet. Farverne kan ses på forsiden. Jeg vil bruge Jquery til at åbne flash filer med så de ses i en iframe oven på siden som bliver dækket i en skygge. Dette gøres bl.a. for at lave Flashfilen responsive. Side 2

3 Siden skal laves med en static baggrund så man kan nyde et flot billede uden det bliver for stort. I Photoshop filen vises det der kan ses på første billede. Siden er lavet med en bredde på 1300px for at den kan passe til computere med høj opløsning og folk der ser på store tv skærme. Den skal være responsive så den passer til alle skærmstørrelser. Astronomi handler meget om flotte billeder af universet så de skal kunne ses i stor opløsning. Siderne skal inddeles i forskellige farver så man nemt kan huske hvilken side man skal til for man opfatter hurtigere en farve end tekst. Derfor er menupunkterne også i forskellige farver. Siden opdeles i 2 spalter så skærmen bliver udfyldt samtidig med teksten ikke bliver for lang til at kunne læses nemt i linieskift. Skriften er i Verdana for den er meget let at læse på en computer da den ikke har fødder. Overskriften er Gunship som også ses i sciencefiction filmen Wall e. Målgruppen. Målgruppen er folk der interesserer sig for universet og kan lide at se film om universet fx i Planetariet som der derfor linkes til med et banner. Det kan være folk der også interesserer sig for astrologi og dermed er titetskriften lavet som man ser stjernetegn forbindes. Siden skal være responsive så den også virker på mobiltelefoner, så man for eksempel kan se den mens man er ude at kigge på stjerner eller kometer. Siden er designet for folk der bare vil have få generelle informationer om universet og derfor er siden delt ind i mange afsnit så man kan finde præcis det man søger. Der er brugt mange mørke farver fx den grå menu og alle billederne har fået et blåt skær for målgruppen er folk der synes nattehimlen er flot og dermed disse farver. Målgruppen kan fx være en gruppe skole elever i 8-9 klasse der har været på tur i Planetariet og ønsker at vide mere i sammenhæng med et skoleprojekt. Det kan også være folk der ønsker en basis viden om universet og målgruppen er derfor meget bred. Side 3

4 Flowchart I flowcharten ses det at man meget nemt kan komme til de forskellige menuer med bare et klik. Det er for at man skal kunne få informationer hurtigst muligt. Hvis man skal se planeterne i solsystemet skal man først lave en mouse over, men det er stadig hurtigt da man ikke skal klikke to gange og musen alligevel skal den vej forbi ned til linket. I mobilversionen skal man dog klikke en gang på menuen men allerede ved næste klik er man på den øsnkede side. Side 4

5 Filstruktur. Her ses hvordan alle filerne hænger sammen. Index har en dynamisk include og indeholder alle filerne i de blå kasser som er php, pånær admin og logout som er selvstændige filer. Til at starte med indeholder index siden Solsystemet med dynamisk include. Det er kun fra index der linkes til javascript filerne Fancybox og Jquery og det er kun fra index der linkes til sidens css fil og Fancybox css. Der laves en kontakt til databasen når adminstratoren logger ind for at se indholdet af databasen. Der laves også forbindelse til databasen når brugeren har udfyldt en kontaktformular. Alle filerne er puttet ind i undermapper og kun php filerne ligger i hovedmappen. Det er for at gøre det mere overskueligt og det er nemt at rette alle filtyper på en gang. Side 5

6 Afsluttende evaluering. Projektet er forløbet stort set som forventet dog varede login længere end forventet da det virkede anderledes når det blev uploadet til skolens server fremfor localhost på min computer. Jeg brugte lang tid på at finde på et logo i starten da jeg synes det er en vigtig del af designet og jeg lavede derfor mange ideer bl.a. med illustrator. Da der var lidt ekstra tid fra tidsplanen lavede jeg en swf film med disse istedet. Billederne til venstre kunne virke fint som logo, men de giver for mange farver på siden, som jeg har valgt at holde i blå, sort og hvid. Sidens responsive funktion virker fint på Android og Windows telefoner og Android tablets. Siden virker fint på Internet Explorer, Chrome og Opera. Det er simpelt at navigere rundt på siden og menuen er hele tiden i nærheden, da der er en pil, der straks fører tilbage til toppen af siden, hvor menuen er. De fleste billeder har jeg givet et blåt overlay, hvilket gør at siden fremstår mere sammenhængende og samtidig kan billederne få en mindre filstørrelse, da der ikke er så mange farver. I Flash filmen er brugt mange farver, da den kommer i et vindue ovenpå siden, mens baggrunden bliver gjort mørk. Jeg har tre kort hvoraf et er i jpgs, som er skåret ud og sat sammen så de virker som et kort. Side 6

7 De to andre kort er lavet i Flash og dem har jeg givet animationer for at udnytte mulighederne i Flash og fx illustrere informationer, som en planets omløbstid om solen. Siden virker også fint til touchscreens, da dropdown menuen kan åbnes med et tryk og undermenuen bagefter bliver nede. Det store baggrundsbillede virker fint på computere med høj opløsning samtidig med det også passer i højden, hvis man bruger en tablet vertikalt. Side 7