5. Billeder og logo til websitet er optimeret til web via Photoshop, så de fylder mindst muligt for at mindske indlæsningstiden for websitet.

Transkript

1 GRAFISK WORKFLOW

2 Grafisk workflow Beskrivelse Opgaven Design af website til Tipsbladet Fokus, som er noget, jeg selv har fundet på. Det er tænkt som et alternativ til Tipsbladet.dk, hvor der på Tipsbladet Fokus vil være færre men større og mere dybdegående artikler. 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 indexsiden side kan navigere til en hvilken som helst af de øvrige sider og derfra tilbage til indexsiden. 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 Jeg synes websitet er blevet fint og overskueligt. Jeg kunne godt have ønsket mig lidt flere features, men jeg er også nødt til at holde mig inden for mine kompetencers begrænsninger. Alt i alt er jeg meget tilfreds. Tipsbladet FOKUS her går vi i dybden

3 Grafisk workflow Flowchart Index Rooney Barcelona Zlatan 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 160 px HEADER 115 px LOGO 100% HEADER_CONTENT 150 px 10 px 10 px NAV 100% ARTICLE1 250px ARTICLE2 250px ARTICLE3 250px FOOTER 280px 50px Skelet index

6 Grafisk workflow Skelet 160 px HEADER 115 px LOGO 100% HEADER_CONTENT 150 px 10 px 10 px NAV 100% CONTENT 510px CONTENT_TEXT FOOTER 280px 50px Skelet underside

7 Grafisk workflow UTF-8 ; /* CSS Document */ html { font-family: Helvetica LT Std Compressed, Helvetica, Arial, sans-serif; body { margin: 0; padding: 0; p { h1 { h2 { h3 { a { font-size: 12px; line-height: 12px; color:#fff; font-size: 40px; font-weight: bold; text-shadow: -1px -1px 0 #FFF, 1px -1px 0 #FFF, -1px 1px 0 #FFF, 1px 1px 0 #FFF; font-size: 50px; line-height: 50px; font-weight: bolder; color: #FFF; text-transform: uppercase; margin-top: 0; margin-bottom: 20px; font-size: 25px; line-height: 28px; font-weight: bolder; color: #FFF; margin: 0; text-decoration: none; color: #FFF; a:hover { li { color: #F00 font-size: 20px; line-height: 20px; font-weight: bold; color: #FFF; text-decoration: none; display: inline; list-style-type: none; padding-right: 40px; #header { background: url(images/graes. jpg); width: 100%; height: 160px; position: relative; background-color: #FFF; margin-top: -16px; padding-bottom: 10px; #header_content { height: 150px; margin-left: auto; margin-right: auto; position: relative; #logo { width: 420px; height: 115px; position: absolute; bottom: 0px; margin-bottom: 5px; #nav_container { width: 100%; height: ; position: relative; background-color: #000; -moz-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.50); -webkit-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.50); box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.50); padding-top: 10px; #nav { height: 20px; margin:auto; position: relative; #wrapper { height: auto; #article1 { #article2 { width: 480px; height: 2; rooney.jpg); padding-top: 20px; padding-left: 20px; padding-right: 500px; width: 480px; height: 2; barcelona.jpg); padding-top: 20px; padding-left: 20px; padding-right: 500px; #article3 { width: 480px; height: 2; zlatan.jpg); padding-top: 20px; padding-left: 20px; padding-right: 500px; #content_rooney { height: 510px; rooney_artikel.jpg) #content_barcelona { height: 510px; barcelona_artikel.jpg) #content_zlatan { height: 510px; zlatan_artikel.jpg) #content_text { width: 400px; height: 450px; margin-left: ; float: left; overflow:auto; #footer { width:100%; height:200px; background-color:#000000; padding-top:40px; padding-bottom:40px; padding-right:40px; margin-right:auto; margin-left:auto; margin-top: 50px; #footer_content { height: auto;.boxshadow { box-shadow: 0px 0px 7px 0px rgba(50, 50, 50, 2);.article_luft {

8 Grafisk workflow HTML-kodning HTML-kodning af website

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