OPGAVEN Konditoren skulle have lavet et site til deres opskrifter. Konditoren.dk er en blog for bageglade amatørere i alle aldre.

Transkript

1 WORKFLOW

2 OPGAVEN Konditoren skulle have lavet et site til deres opskrifter. Konditoren.dk er en blog for bageglade amatørere i alle aldre. Det er en fiktiv opgave. MIT BIDRAG Jeg stod for al design og al kodning. VÆRKTØJER Programmet Adobe Dreamweaver blev brugt. KVALITETSVURDERING Sitet er nemt overskueligt, og kan bruges på alle enheder. Det gør det lettere for brugeren at bruge sitet, da man kan tage sin mobil eller tablet med sig i køkkenet, og nemt overskue sitet. Jeg er godt tilfreds med resultatet.

3 BRAINSTORM DESSERTER KONDITORI KAGER KAGER BAGER KONDITOREN Hvad assoscierer jeg med Konditoren? BRØD BRUNLIGE FARVER CHOKOLADE RESPONSIVT SITE Hvilke nøgleord, vil jeg gerne designe mit responsive site ud fra? SIMPLE FARVER ENKELT OVERSKUELIGT NEMT AT AFLÆSE 22 CAMILLA GOUL BACH DE FARVEDE ORD ER DEM, JEG HAR TAGET MED MIG VIDERE

4 INSPIRATION CAMILLA GOUL BACH 23

5 FLOWCHART Et udvalg af opskrifter Konditoren har valgt. FORSIDE De seneste opskrifter der er kommet til. FORSIDE OPSKRIFTER TOP 10 NYHEDER CUPCAKES HINDBÆRSNITTER OPSKRIFT NR. 1 DE SENESTE MACARON KANELSNEGLE OPSKRIFT NR OM OS KONTAKT MAIL BROWNIE STUDENTERBRØD OPSKRIFT NR. 3 COOKIES... OPSKRIFT NR. 4 CHEESECAKE TIRAMISU Alle databasens opskrifter, inddelt alfabetisk. OPSKRIFT NR. 5 OPSKRIFT NR. 6 OPSKRIFT NR. 7 OPSKRIFT NR. 8 OPSKRIFT NR. 9 OPSKRIFT NR. 10 Top 10 over mest populære opskrifter. 24 CAMILLA GOUL BACH

6 RESPONSIVT DESIGN Sitet er designet responsivt, efter metoden Gracefull degredassion, hvilket vil sige, at jeg startede med at designe den til screen, for derefter at designe mobilversionen. FORDELE Der er efterhånden så mange platforme, at det er svært at lave unikke sites med forskellige browsere og mål. Det giver en bedre oplevelse, når man besøger sitet, og bruger forskellige platforme, at det er samme visuele udtryk. Screen: Fuld bredde, indtil den rammer 768px. SEO Et responsivt site giver en bedre rank på google, når links fra eksterne sites peger på den samme webadresse. Tablet: Fra 768 til 481px. Menuen deler sig i to, og det tre-spaltede layout bliver til to. Mobile: Fra 480px. Layoutet går fra to-spaltet til 1 spalte, og topgrafikken forsvinder. CAMILLA GOUL BACH 25

7 SKELET Mål Margin Padding FORSIDE: MÅL 100% x 300px FORSIDE: PADDING + MARGIN 100% x 40px 80% x auto 29% x auto 1% 1% 1% 2% 1% 1% 1% 1% 1% 1% 1% 1% 1% 1% 1% 1% 100% x auto auto 2% 2% 2% 1% 1% 1% auto NAVIGATION 100% x 40px 600px x 40px 100px x 40px 1% 1% 1% 1% 1% 1% 1% 1% 1% 1% 1% 1% NAVIGATION auto 0px 2% 2% 2% 26 CAMILLA GOUL BACH

8 SKELET Mål Margin Padding CUPCAKE/KONTAKT: MÅL 100% x 300px CUPCAKE/KONTAKT: PADDING + MARGIN 100% x 40px 80% x auto 2% 3% 100% x auto auto 3% 3% auto 3% 2% CAMILLA GOUL BACH 27

9 OPBYGNING HTML5 SEMANTISK KORREKT OPBYGNING Jeg har valgt at opbygge mit site semantisk korrekt. Det giver et godt flow. Brugere er efterhånden opdraget til at navigere derefter, så det gør sitet mere brugervenligt. FORSIDE Header Navigation Article Section SEO Mit site er opbygget med simpel SEO. For at få mange forbi sitet, skal man have en god Google-ranking. Her har jeg beskrevet, hvilke metoder jeg har brugt. BILLEDER Søgemaskiner kan ikke se, hvad der er på billedet, men det kan du med få trin hjælpe den med. Alt-tekst er tilføjet på alle billeder. Det er den tekst, der kommer frem, hvis billedet ikke loades. Alle billeder har fået en title. Når du hover over billeder, kommer denne tekst frem. Det har også en ekstra effekt ved oplæsning, når f.eks. blinde besøger sitet. Det giver en bedre oplevelse. Der er brugt bindestreg ved navngivning af billeder, som google kan læse. Konditoren er angivet ved navngivning af billeder, for at få en bedre ranking på navnet. LINKS Mine links indeholder keywords. Det giver en bedre ranking på google. Havde jeg skrevet Læs mere her, er der ingen ord i linket, som giver point. De har fået en title. Titles giver også bedre ranking, og når man hover henover, kommer der en lille forklaring op. H ERE H ere eller Headings er meget vigtige, i forhold til SEO. Her skal de vigtigste keywords bruges. F. eks.: <h1>opskrift på cupcakes</h1> Der må kun være et H1-tag på hver side, så derfor er der brugt H2 ere på indexsiden. DISPLAY: NONE / VISIBILITY: HIDDEN Jeg har valgt at skjule topgrafikken på mobilsitet, da det er spild af plads. På et mobilsite skal brugeren hurtigt finde oplysninger, og får derfor intet ud af topgrafikken. Jeg har valgt at bruge display: none;, da den helt fjerner elementet. Jeg kunne også have brugt visibility: hidden;, men den vil efterlade et screen and (max-width: 480px) { section { width: 99%; margin: 20px auto 0 auto; } section:last-child { margin-bottom: 20px; } section:first-child { margin-top: 0; }.topgraphic { display: none;} } FÆLLES KODNING I toppen af mit css-dokument har jeg lavet en fællesregel for flere tags. Forskellige tags har nogle default indstillinger, og ved denne stump kode nulstiller jeg hurtigt, så jeg selv kan styre luften. body,.topgraphic, article, section, p, h1, h2 { margin: 0; padding: 0; } Footer META-DESCRIPTION Ved en Google-søgning, kommer der en beskrivelse frem. Hvis du indsætter en meta-description i din kode, vil denne komme frem. Her må bruges max 160 tegn. F. eks: <meta name= description content= Her på siden finder du vores populære opskrift på cupcakes, som egentlig er en muffin med frosting. Du kan meget nemt variere smagen, og lave din egen udgave. > PERMISSION Min permission er sat til 755 på hele sitet, så alt kan vises online. BROWSER-SUPPORT Der er problemer med IE 8 og 9, men da det er små effekter, vælger jeg at ignorere dette. Border-radius: IE 8 kan have problemer med at vise border-radius. Text-shadow: IE 8 og 9 kan have problemer med at vise text-shadow. CASCADING STYLESHEETS Jeg har valgt at lave forskellige eksterne stylesheets, for at holde min HTML-kode ren og overskuelig. Til Mozilla Firefox og Chrome/Safari har jeg indsat prefix s: border-radius: 8px; -moz-border-radius: 8px; /*Prefix for Mozilla Firefox*/ -webkit-border-radius: 8px; /*Prefix for Chrome/Safari*/ 28 CAMILLA GOUL BACH

10 FARVER FONTE SIMPELT DESGIN Jeg har valgt, at holde farverne simple, for ikke at tage opmærksomheden fra billederne. Som hover ved alle links, har jeg valgt et brunlig nuance. Farven er suget fra et af billederne, og det giver lidt spræl, til den ellers nedtonede farveskala. GEORGIA Den er brugt som display-font til links, overskrifter og underoverskrifter. En antikva-font som er troværdig og tillidsfuld. Den har en vis fortid, og det er specielt godt til et site om madlavning, da det giver et indtryk af at opskrifterne er rettet til igennem tiden, og derfor er det bedste resultat, læseren får. PT SANS Den er brugt på brødtekst. En åben grotesk-font. Da det er større tekstmængder, den er brugt til, som skal være lette og hurtige at læse, og så står den i god kontrast til Georgia. Georgia ABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅ abcdefghijklmnopqrstuvwxyzæøå PT Sans ABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅ abcdefghijklmnopqrstuvwxyzæøå Link hover: #b29e79 Body: #cdcdca Navigation: #2d2d2d Border: #000 NEDARVNING SPECIFITET SECTION:LAST-CHILD For at ramme den nederste margin, har jeg valgt denne metode. Jeg tilskriver den sidste section indenfor min parent (article) en regel. Så ved jeg, at det kun er bundmarginen, jeg rører ved. H2 Ved at lave en css-regel mere specifik, kan du bedre styre dem. Eksempel: h2 { font-family: Georgia, Times New Roman, Times, serif; font-size: 14px; padding: 0 3%; }.cupcake h2 { padding: 20px 3% 0 3%;} FONTE Nedarvning gør det muligt, at undgå at skrive en hel del kode. Ved mit p-tag behøver jeg bl.a. ikke at definere nogen font-family, da den arver fra body. TING, DER IKKE NEDARVES Margin Padding Border Background CAMILLA GOUL BACH 29

11 FORMULAR FORMULAR På kontakt-siden er en mail-formular, som virker ved hjælp af simpel kodning fra min host <FORM action= method= post > <!-- method= post makes it possible for me, to send an --> <input type= text name= navn placeholder= Navn /><br /> <input type= text name= adresse placeholder= Adresse /><br /> <input type= text name= zipcode placeholder= Postnr. og by /><br /> <input type= text name= mail placeholder= Mail /><br /> <textarea name= besked placeholder= Indtast din besked her ></textarea><br /><br /> <input type= submit value= Send class= send /> <!--My Send -submit-button has a class, so i can style it.--> <input type= hidden name= recipient value= camilla@camillabach.com /><!--The adress the form is sent to--> <input type= hidden name= subject value= Mail fra Konditoren /><!--Auto-filled subject--> <input type= hidden name= redirect value= /><!--When sent, it goes to index--> <input type= hidden name= required value= navn,adresse,zipcode,mail,besked /><!--The content in the mail--> </FORM> VALIDERING Indbygget i CGI-scriptet er validering: 30 CAMILLA GOUL BACH

12 DET FÆRDIGE SITE INDEX CAMILLA GOUL BACH 31

13 DET FÆRDIGE SITE CUPCAKE 32 CAMILLA GOUL BACH

14 DET FÆRDIGE SITE KONTAKT CAMILLA GOUL BACH 33