Præsentationsportfolio for Hovedforløb 1. Kongens Folk hjemmeside

Transkript

1 Præsentationsportfolio for Hovedforløb 1 Kongens Folk hjemmeside

2 Opgaven Jeg skal lave en ny hjemmeside til foreningen Kongens Folk. De har en gammel hjemmeside der skal fornyes. De ønsker en side, der informerer om stedet, kommer med nyhedsopdateringer, viser billeder og lydfiler. De ønsker, at ting / dele fra den gamle hjemmeside også skal være på den nye, og hjemmesiden skal være på dansk og engelsk. Hjemmesiden skal have et café agtigt udtryk, uden at det er hovedattraktionen, da det også er en kristen forening med mange andre aktiviteter. Se hjemmesiden på Arbejdsgang Indhold og udseende af hjemmesiden planlægges og jeg får godkendt mit layout af kunden. Hjemmesiden laves i programmet Dreamweaver CS5 med CSS (Cascading Style Sheets). Her bruger jeg mit storyboard og skelet til at arbejde ud fra. Jeg laver en Template med det som er ens på alle sider: wrapper, topbanner menu, footer, redigerbart område i midten. I Dreamweaver arbejder jeg med Classic arbejdsbord og har det splittet op, så jeg har både Code og Design imens jeg arbejder. Jeg tjekker løbende i de forskellige browsere hvordan hjemmesiden ser ud, så jeg er sikker på, at det ser ordentligt ud. Procesbeskrivelse - Planlægning og inspirationssøgning - Hjemmesidens struktur laves med flowchart. - Valg af layout, komposition og modulopbygning. - Hjemmesidens udseende og opbygning laves med Skelet (alle pixelmål fastsættes) og Storyboard. - Fremstilling af hjemmesiden i Dreamweaver, med CSS og templates. - indhold lægges ind. - Korrekturlæsning - tekst, billeder, navigation, knapper mm. - Forbindelse til server. - Upload af hjemmesiden. Test i forskellige browsere (Usability) Det er vigtigt at teste hjemmesiden i de forskellige browsere der findes, for at sikre sig, at alle brugere, kan anvende hjemmesiden, uanset hviklen browser de har. - Testet i Firefox, Safari, Internet Explorer, Google Crome: virker i alle browsere. Kvalitetsvurdering Produktionen og arbejdsprocessen af hjemmesiden er gået godt. En stor udfordring var, at finde et godt design til hjemmesiden. Kunden var tilfreds helt fra startfasen, da de så layoutet. Det blev planlagt godt fra starten, med flowchart, layout, storyboard og skelet, så det forløb planmæssigt. Hjemmesiden er blevet lavet, så den er nem, flot og enkel at navigere rundt på. Siderne har et gennemgående fast, stilet og stabilt udtryk. Den er æstetisk pæn og enkel.

3 Grafisk Workflow Inspirationssøgning

4 Ideudvikling - Flowchart Den gamle hjemmesides opbygning: Kongens Folk Forside Nyheder Podcast Kongen Os Forlag Gaver Service Links Kontakt Nyhed Podcast Emne Eksterne links Kort Ældre artikler Arkiv Mail to info@kongensfolk.dk Flowchart Den nye hjemmesides opbygning: Kongens Folk Forside Nyheder Podcast Praktisk info Kongens Folk Galleri Kontakt Nyhed Arkiv Program Kongen Billeder Mail to info@kongensfolk.dk Vidnesbyrd Gaver Folket Ældre artikler Service Dig Links Kongens Venner Facebook Forlag

5 Layout - startsiden Hjemmesidens udseende og stil Her: Startsiden (index) banner.png Animeret gif billede Nyeste podcast Nyeste nyhed Footer

6 Layout - nyheder Hjemmesidens udseende og stil Her: Nyhedssiden (Nyheder), Podcast siden er bygget op på samme måde Nyhedstekst Nyeste nyhed Link til specifik nyhed Ældste nyhed Nyhedsarkiv

7 Layout - indhold Hjemmesidens udseende og stil Her: Nyhedssiden (Nyhed) Andre indholdssider er også bygget op på samme måde som denne, med forskelligt indhold. Rubrik Underrubrik Brødtekst Tilbage til alle nyheder (Nyhedssiden)

8 Skelet - index & kontakt Alle pixelmål til hjemmesiden bestemmes Her: Startsiden (index) og kontakt siden KONTAKT INDEX 900px 900px 900x155px 900x155px 900x27px 900x27px 800x95px 800x95px 170x70px 570x350px 50px 330 x justerbar højdepx 50px 24px 170x70px 50px 30px 50px 38px 170x70px 445x400px 10px 200x1200px 20px 10px 570x1200px 1600px 900x27px 20px 10px 800x1200px 900x27px 1600px

9 Skelet - indhold Alle pixelmål til hjemmesiden bestemmes Her: Andre sider (nyheder, podcast, praktisk info, Kongens Folk, Galleri, Kontakt) 900px 900x155px 900x27px 800x95px 800x1200px 50px 50px 800 x justerbar højde px Pixelmål på Nyhedssiden 8px 15px 250x200px 250x200px 30px 1600px 25px 10px 15px 15px 770 x justerbar højde px Pixelmål på Galleri siden 150x150px 150x150px 36px 36px 36px 36px 36px 150x50px 5px 900x27px

10 Storyboard - Template & index Storyboard giver det overskuelige overblik over, hvad der skal være på hver enkelt side. De laves til alle sider på hjemmesiden, både på dansk og engelsk. Her vises storyboard for Template og Index siden: INDEX nyeste nyhed nyeste podcast nyhed podcast nyhed podcast podcast podcast podcast nyhed ældste nyhed ældste podcast Banner Menu Header indhold 1 5 Frontpage slideshow / billeder Nyeste nyhed 6 Nyeste podcast 7 8 Tekst - rubrik 7 Tekst - rubrik 8 Tekst - underrubrik 7 Tekst - underrubrik Nyeste vidnesbyrd Facebook 9 10 Tekst - rubrik 9 Tekst - rubrik 10 Tekst - underrubrik 9 Tekst - underrubrik Facebook plugin 11 footer TEMPLATE Banner 2 Menu 3 Flag 5 Header 6 Indhold 7 Footer 8 4 Se næste side, for beskrivelse af punkter

11 Storyboard Storyboard giver det overskuelige overblik over, hvad der skal være på hver enkelt side. De laves til alle sider i hjemmesiden, både på dansk og engelsk. Her vises storyboard for Template og index siden: SIDE : Template - det grundlæggende udseende på alle sider: 1 1. Browserbaggrund: body.gif 5 5. Wrapper baggrund: wrapper.jpg 2 2. Banner: banner_sh.png 6 6. Header: Editerbart område Menu: farve: #FFC SpryMenuBarHorisontal.css 4. Flag Editerbart område Indhold: Editerbart område 8. Footer: Placeret udenfor Wrapper: Tekst: Kongens Folk, Frederiksgade 75, opg. E, DK-8000 Århus C Tlf: / info@kongensfolk.dk SIDE : Startsiden (index) Header indhold: Placeres ved siden af hinanden: indexbanner.png + rcl.gif 2. Nyheder/podcasts: Billede: nyheder_podcasts.gif 3. Nyeste nyhed: Border left: Solid, 5 px, #FC0 Border top: dotted, 1 px, #000 Tekst: Sommer i Kongens Folk <p><strong> 09-29/07/12 <p> Læs mere... <a> 4. Nyeste Podcast: Border left: Solid, 5 px, #3C0 Border top: dotted, 1 px, #000 Tekst: er et forår <p><strong> 06/07/12 <p> Læs mere... <a> 5. Frontpageslideshow: flexslider.css images: slide1:jpg, slide2:jpg... slide10.jpg 6. Table 3 kolonner, 7 rækker Nyeste nyhed: sommer12.jpg Tekst - rubrik: NYHEDER <h1> Tekst - underrubrik: Sommeren nærmer sig... <p> Link: Læs mere» <a> 8. Nyeste podcast 209.jpg Tekst - rubrik: PODCAST <h1> Tekst - underrubrik: Lyt til sidste fredags prædiken her på siden... <p> Læs mere» <a> 9. Nyeste vidnesbyrd front_cathrine.jpg Tekst - rubrik: VIDNESBYRD <h1> Tekst - underrubrik: Vejen ud af håbløshed... <p> Læs mere» <a> 10. Facebook kongens_venner.jpg Tekst - rubrik: KONGENS VENNER på FACEBOOK <h1> Tekst - underrubrik: Læs mere om Kongens Venner her» <a> 11. Facebook plug in <iframe src= // php?href=http%3a%2f%2fwww.facebook.com%2fkongensv enner&send=false&layout=standard&width =450&show_faces=false&action=like&colo rscheme=light&font&height=35 scrolling= No frameborder= 0 style= border:none; overflow:hidden; width:250px; height:35px; allowtransparency= true ></ iframe>

12 Storyboard - generelt Andre vigtige oplysninger, nødvendigt til at supporte storyboardet. Her: typografi Typografi til hjemmesiden p: color: #000 font-family: Arial, Helvetica, sans-serif font-size: 12 px line-height: 16 px margin-top: 0 px h1: color: #000 font-family: Arial, Helvetica, sans-serif font-size: 15 px font-weight: bold margin-top: 0 px text-align: left h2: color: #333 font-family: Palatino Linotype, Book Antiqua, Palatino, serif font-size: 46 px margin-top: 0 px text-align: left a: color: #666 font-family: Arial, Helvetica, sans-serif font-size: 12 px font-weight: 300 text-decoration: none a.hover: color: #6C3 font-weight: bold text-decoration: none wrapper - footer p: color: #FFF font-family: Arial, Helvetica, sans-serif font-size: 10px; text-align: center; padding-top: 30px;

13 Dreamweaver - css styles Der er defineret rigtig mange css-styles. Her er nogle af de styles der er gennemgående på siderne: * { outline: none; body { background-color: #333; background-image: url(images/ body.gif); #wrapper { width: 900px; margin-right: auto; margin-left: auto; background-color: #FFF; background-image: url(images/ wrapper.jpg); height: 1500px; #banner { height: 155px; width: 900px; background-image: url(images/banner_sh.png); margin-right: auto; margin-left: auto; margin-top: 0px; #menu { float: left; height: 27px; width: 900px; border-top-width: 1px; border-top-style: solid; background-color: #FFC; border-bottom-width: 1px; border-bottom-style: solid; a { font-family: Arial, Helvetica, sansserif; font-size: 12px; font-weight: 300; text-decoration: none; color: #666; a:hover { font-weight: bold; text-decoration: none; color: #6C3;.menu { float: left; height: 14px; text-align: center; margin-left: 15px; padding-top: 5px; width: 90px; #flag { float: left; height: 20px; width: 20px; padding-top: 5px; padding-left: 15px; h2 { font-size: 46px; margin-top: 0px; font-family: Palatino Linotype, Book Antiqua, Palatino, serif; color: #333; text-align: left;.headline { float: left; height: 95px; width: 800px; margin-left: 50px; h1 { font-family: Arial, Helvetica, sansserif; font-size: 15px; font-weight: bold; color: #000; margin-top: 0px; text-align: left; p { font-size: 12px; margin-top: 0px; line-height: 16px; color: #000; font-family: Arial, Helvetica, sansserif; #footer { height: 100px; width: 900px; padding-top: 10px; text-align: center; margin-bottom: 40px; margin-right: auto; margin-left: auto; color: #FFF; font-size: 10px; font-family: Verdana, Geneva, sansserif; #wrapper #footer p { font-size: 10px; text-align: center; padding-top: 30px; color: #FFF;.scrollbox { float: left; width: 800px; height: 1200px; overflow-y: auto; overflow-x: hidden; scrollbar-base-color:#cccccc; scrollbar-arrow-color:#000000; scrollbar-darkshadow-color:#ffffff; scrollbar-face-color:#ffffcc; scrollbar-highlight-color:#cccccc; scrollbar-shadow-color:#cccccc; scrollbar-track-color:#ffffff; Det lille ikon i indlæsningsfeltet, er lavet på hjemmesiden: www. favicon.cc - billede uploadet og tilpasset i størrelsen. Billedfilen favicon.ico er downloadet og lagt ind i Root folderen og uploadet sammen med resten af hjemmesiden. Herfra finder den selv ud af resten.

14 Produktion i Dremweaver Hver enkelt side laves i Dreamweaver, ud fra min template Lavet med CSS-styles:

15 Grafisk Workflow Testet i forskellige browsere: Safari Firefox Google Crome Internet Explorer Virker også med farvet scrollbar