Sabine Puk Sørensen Svendeprøve portfolio

Transkript

1 Sabine Puk Sørensen Svendeprøve portfolio 2016

2 Grafisk workflow Svendeprøve Kvalitetsvurdering Hjemmesiden fungere som den skal, og kunden er meget glad for resultatet. Siden er simpel, men giver den ønskede præsentation af gården, samt mulighed for at tage kontakt, nemt og hurtigt.

3 Svendeprøve Grafisk workflow Dreamweaver Sabine Puk Sørensen Ideproces Proces Opgavebeskrivelse Højbakkegård har brug for en hjemmeside, som kan vise hvad gården har at byde på, deres unikke vine og faciliteter til heste. Det skal være nemt og overskueligt at finde informationerne, og derefter skal der være mulighed for at komme i kontakt med gårdejeren, ved hjælp af en kontaktformular Der skal også være et galleri, som viser forholdene på stedet, samt diverse vine. Det er en familiegård, som er gået i arv i flere generationer, derfor skal hjemmesiden være simpel, og have en jordnær og hyggelig stemning, men uden at være rodet og utroværdigt. Siden skal være responsive altså kunne bruges på mobil og tablet, såvel som computer. Målene for hvornår designet ændre sig til en anden platform indstilles med media queries. Hjemmesiden er sat op med Bootstrap, da det med det samme giver et framework at arbejde i, med alt den basale kode, til det valgte layout. Der kan nemt bygges videre på designet med en custom CSS, og der er allerede taget højde for responsive design, såsom at menuen folder sig sammen til en burger menu, og at billedernes størrelse angives i procent. Moodboard Brainstorm Moodboard/inspirationssøgning Skitser og opbygning Grundlæggende kode Beskæring og klargøring af billeder Lightbox galleri Kontaktformular Præsentation for kunden Justering og søgemaskineoptimering (SEO) Brainstorm Højbakkegård Småt Hyggeligt Lokalt Natur Landet Landbrug Frugt Vin Redskaber Marker Organisk Grøn Brun Orange Dyr Landbrugsdyr Heste Forside Flowchart Forside Velkommen/ grundlæggende info Vin Heste Kontakt 22 Skitser Galleri

4 Sabine Puk Sørensen Grafisk workflow Svendeprøve Wireframes Standard, computer Højbakkegaard menu Header: 100 % 50 px min-width: 768 px Baggrundsbillede: 100 % 600 px Tablet lukket menu Mobil åben menu Galleri standard, computer Højbakkegaard Header: 100 % 50 px min-width: 768 px Baggrundsbillede: 100 % 6o0 px Burger menu Højbakkegaard Menu Burger menu Header: 100 % 50 px min-width: 768 px Tekst logo menu Galleri Logo px Logo px Baggrundsbillede: 100 % 600 px Logo px H1 Velkommen H1 Velkommen H1 Velkommen På tablet og mobil versionen bliver menuen gemt i en knap som åbner og lukker for navigationen. Baggrundsbillede: 100 % 400 px Baggrundsbillede: 100 % 400 px Baggrundsbillede: 100 % 400 px Galleri mobil Højbakkegaard Burger menu Header: 100 % 50 px min-width: 768 px H1 Vin H1 Vin H1 Vin Galleri Baggrundsbillede: 100 % 500 px Baggrundsbillede: 100 % 500 px Baggrundsbillede: 100 % 500 px H1 Heste H1 Heste H1 Heste Kontakt Kontaktformular: min-width: 1200 px Kontakt Kontaktformular: Kontakt Kontaktformular 23

5 Svendeprøve Grafisk workflow Sabine Puk Sørensen Farver # #FF9900 #DBCA69 #668D3C Bomærket fra logoet går igen som et favicon i fanebladet. Typografi Overskrifterne har fonten Playball, som er en Google webfont, og skulle derfor være mulig at se ligemeget hvilken browser og platform man bruger, men for en sikkerheds skyld har jeg i CSS koden angivet nogle websikre fallback-fonte. Opsætning om koden Grundlæggende kode UTF-8 står for Unicode Translation Form og sørger for at specielle tegn, som æ, ø, å bliver vist korrekt. Viewport meta-tagget gør at brugeroplevelsen på mindre platforme bedre, ved at indstille elementerne så de passer til skærmen de bliver vist på. Hjemmesiden er søgemaskineoptimeret ved at bruge meta-tagget, Description, her går de ord igen som søgemaskinen skal reagere på. Nederst i head-tagget, er der linket til de CSS-filer som er brugt til at style siden. CSS og media querities Bootstrap laver som standard media queries til large, medium, small og extra small skærme. Da størrelsen på overskrifterne er målt i viewport-width, og de derfor blive formindskes i takt med skærmen, tilføjer jeg selv en media guerity på en større max-width, som sørger for at overskrifterne ikke bliver for små og anonyme. Billedernes bredde er stillet til 100 %, derfor formindskes de efter skærmens bredde. Når de når ned på en vis størrelse har jeg dog indstillet dem til ikke at blive mindre, men i stedet blive beskåret med overflow. Playball ABCDEFGH IJ K LMNOPQRST U VX YZÆØÅ abcdefghijklmnopqrstuxyzæøå , : ; ( ) %!? Navigationen til Vin og Heste er linket til billedernes div-id, så billedet og ikke overskriften bliver det øverste på siden når man klikker ned til det gældende emne. Kontakt er derimod linket til et div-id som indrammer hele boksen. Den øvrige tekst har en grotesk font-family, som er stilfuld, simpel og let læselig. 24

6 Sabine Puk Sørensen Grafisk workflow Svendeprøve HTML, CSS & PHP Kontaktformular Vist nedenfor er den html og CSS kode, som er brugt til kontaktformularen. Den basale kode er en template, som jeg har stylet så den passer til siden. PHP kontaktformular I PHP'en er det angivet hvor beskeden skal sendes til, og med hvilket emne. I tilfælde af der er nogle problemer med oplysningerne i formularen, bliver en fejlmeddelelse vist, så man kan se at informationerne skal rettes. Længere nede specificeres det hvilke tegn formularen acceptere, samt den besked som vises hvis der er brugt tegn som ikke accepteres. Hvis der ingen problemer er, vises en besked som lader afsenderen vide at beskeden er blevet sendt succesfuldt. 25

7 Svendeprøve Grafisk workflow Sabine Puk Sørensen HTML & CSS Galleri med lightbox Klargøring af billeder En lightbox template bliver sat ind, og billederne linkes til thumbnail (eksempel) og fuld visning i lightbox. I custom CSS'en rettes størrelsen og placering på thumbnailsne og der laves gennemsigtighed ved mouse-over. Jeg har sørget for at billederne er konverteret til RGB, og gemt til web, så de ikke er alt for tunge hvilket ellers kan gøre at hjemmesiden er længere tid om at loade, men kvaliteten ikke bliver alt for lav. Lightbox CSS Alle billeder på nær logoet er gemt i fil formatet jpg, da der ikke er behov for gennemsigtighed. Custom galleri CSS lightbox styling 26

8 Sabine Puk Sørensen Grafisk workflow Svendeprøve Afslutning og upload For at ligge hjemmesiden op i dette tilfælde på UnoEuro, skal jeg først være sikker på at jeg har valgt det rigtige site. Der er behov for at siden bliver forbundet til en server, især for at få PHP koderne i kontaktformularen til at virke. Til at starte med var siden på en lokal server, nu da den ikke bare skal ligge på computeren, skal den forbindes til en FTP-server, (File Transfer Protocol). Da kunden ikke er klar til at købe domæne og webhotel, bliver hjemmesiden midlertidigt lagt op på mit domæne. Til sidst flyttes de lokale filer til serveren. Hjemmesiden er afprøvet i Google Chrome, Internet Explorer og Firefox, på både PC, imac og smartphone. 27