web via Photoshop, så de fylder mindst muligt for at mindske indlæsningstiden for websitet.

Transkript

1 GRAFISK WORKFLOW

2 Grafisk workflow Beskrivelse Opgaven Redesign af website for bilforhandleren PerB. Opgave har jeg stillet mig selv med det formål at lave en simpel men indbydende udgave af PerB s website. Programmer Adobe Dreamweaver Adobe Photoshop Adobe Illustrator Værktøjer Flowchart Storyboard Skelet Optimering af billeder til web CSS Mappeorden HTML-kodning Søgemaskineoptimering Upload Proces 1. Jeg har som det første lavet et flowchart, for at danne et overblik over websitets opbygning, så der på forhånd var styr på, hvor mange sider websitet skulle indehold, og hvad der skulle linke til hvad. 2. Jeg tegnede derefter en rå, men nogenlunde nøjagtig skitse (storyboard) i Photoshop. Denne fungerer som supplement til flowchartet, så man også har et visuelt indtryk at websitet. 3. Jeg tegnet et skelet i Illustrator. Det viser nøjagtige mål af de forskellige elementer på websitet og hvordan, de skal placeres i forhold til hinanden. 4. Som den sidste forberedelse til websitet har jeg defineret dets CSS-betingelser, som definerer alle skrifter og regler for sitets elementer, således at enhver kan kode sitet korrekt, såfremt man er i besiddelse af flowchart, storyboard, skelet og CSS-betingelser. 5. Billeder og logo til websitet er optimeret til web via Photoshop, så de fylder mindst muligt for at mindske indlæsningstiden for websitet. 6. Min mappe til websitet er struktureret, så filerne ikke ligger og flyder rundt omkring, men der i stedet er styr på dem. 7. Indexsiden oprettede jeg først, hvorefter jeg oprettede mit style sheet til CSS-betingelserne. Da de var definerede, oprettede jeg alle undersiderne og linkede style sheetet til alle siderne. 8. Så lavede jeg den egentlige HTML-kodning, hvor websitet begyndte at tage form. Selve websitets skabelon med de gennemgående elementer er kopieret til alle siderne, hvorefter indexsiden og undersiderne hver især er defineret med deres unikke elementer. Jeg oprettede også links mellem siderne, så man fra enhver side kan navigere til en hvilken som helst af de øvrige sider. 9. Jeg oprettede også nogle meta-keywords, som fungerer som søgeoptimering, så websitet ideelt set dukker op i en søgemaskine, hvis der søges på de indtastede nøgleord. 10. Til sidst uploadede jeg websitet, så det ligger tilgængeligt via mit eget website. Kvalitetsvurdering Helt ærligt havde jeg lave forventninger, da HT- ML-kodning er min svageste kompetence. Websitet er helt bestemt til den simple side, men det er faktisk blevet pænere, end jeg havde regnet med. Alt i alt er jeg ovenud tilfreds.

3 Grafisk workflow Flowchart Index Nye biler Brugte biler Værksted Flowchart viser websitets opbygning med indexside og undersider

4 Grafisk workflow Storyboard Storyboard af en af undersiderne Der er lavet storyboard af alle sider, som er opdelt i mapper Storyboard af indexside

5 Grafisk workflow Skelet 150 px 200 px LOGO 51 px 100% HEADER 20px 500 px NAV Skelet index

6 Grafisk workflow Skelet 150 px 200 px LOGO 51 px 100% HEADER 20px 500 px NAV 30 px 30 px 400 px 30 px 5 IMAGE_BILER CONTENT 450 px 5 WRAPPER BOTTOM Skelet undersider

7 Grafisk workflow CSS-betingelser html: font-family: Myriad Pro,PTSansCaptionRegu lar, Arial, Helvetica, sans-serif; body.index: background: url(images/background.jpg) no-re peat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; p: font-size: 12px; line-height: 12px; color:#000; h1: font-size: 40px; font-weight: bold; text-shadow: -1px -1px 0 #FFF, 1px -1px 0 #FFF, -1px 1px 0 #FFF, 1px 1px 0 #FFF; h2: font-size: 30px; font-weight: bold; text-decoration: none; text-align: left; color: #003c72; h3: font-size: 10px; line-height: 10px; color:#999; text-align:right; a: text-decoration: none; color: #FFF; a:hover: color:#f60 li: font-size: 20px; line-height: 20px; color: #FFF; text-decoration: none; text-align:center; float: right; font-weight: bold; border-left-width: 5px; width: auto; padding-right: 15px; padding-left: 15px; list-style-type: none; #header: background-color: #003c72; #wrapper: background-color: white; -moz-border-radius: 10px; border-radius: 10px; #content: overflow:auto;.boxshadow: box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.6); CSS-betingelser

8 Grafisk workflow HTML-kodning HTML-kodning af website

9 Grafisk workflow Diverse Metatags for søgeoptimering Mappeorden Upload Link til website: