PrÌsentationsportfolio for Hovedforløb 1
Kongens Folk hjemmeside
Grafisk Workflow
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å http://www.kongensfolk.dk
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 www.kongensfolk.dk, 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. -T estet 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.
Grafisk Workflow Inspirationssøgning
Grafisk Workflow Ideudvikling - Flowchart Den gamle hjemmesides opbygning:
Forside
Nyheder
Podcast
Nyhed
Podcast
Ældre artikler
Arkiv
Kongens Folk
Kongen
Os
Forlag
Gaver
Service
Emne
Links
Kontakt
Eksterne links
Kort
Mail to info@kongensfolk.dk
Flowchart Den nye hjemmesides opbygning:
Forside
Kongens Folk
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
Forlag
Grafisk Workflow Layout - startsiden Hjemmesidens udseende og stil Her: Startsiden (index)
banner.png
Animeret gif billede
Nyeste podcast
Nyeste nyhed
Footer
Grafisk Workflow 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
Grafisk Workflow 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)
1600px
50px
900x27px
KONTAKT
20px
20px
10px
10px
10px
330 x justerbar højdepx
38px
24px
800x1200px
900x27px
800x95px
900x155px
900px
445x400px
50px 50px
900x27px
INDEX
200x1200px
170x70px
170x70px
170x70px
30px
900x27px
800x95px
900x155px
900px
570x1200px
570x350px
50px
Grafisk Workflow
Skelet - index & kontakt
Alle pixelmål til hjemmesiden bestemmes Her: Startsiden (index) og kontakt siden
1600px
Grafisk Workflow 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
8px
Pixelmål på Nyhedssiden
15px 250x200px 30px
1600px
250x200px 25px
15px
10px
15px 770 x justerbar højde px
Pixelmål på Galleri siden
150x150px 36px
150x150px 36px
36px
5px 150x50px
900x27px
36px
36px
2
ældste podcast
ældste nyhed
nyhed
podcast
podcast
podcast
podcast
nyhed
podcast
nyhed
4 nyeste podcast
3 nyeste nyhed
INDEX
5
footer
Facebook plugin 11
Tekst - underrubrik 10
Tekst - underrubrik 9
10
Tekst - rubrik 10
Tekst - rubrik 9
9
Nyeste vidnesbyrd
Tekst - underrubrik 8
Tekst - underrubrik 7
8
Nyeste podcast
Tekst - rubrik 8
6
Tekst - rubrik 7
7
Nyeste nyhed
1
Frontpage slideshow / billeder
Header indhold
Menu
Banner 1
5
TEMPLATE
Footer
Indhold
Header
Menu
Banner
8
7
6
3
2
Flag 4
Grafisk Workflow
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:
Se næste side, for beskrivelse af punkter ››
Grafisk Workflow 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
2
2. Banner: banner_sh.png
3
3. Menu: farve: #FFC SpryMenuBarHorisontal.css
4
4. Flag Editerbart område
5
5. Wrapper baggrund: wrapper.jpg
6
6. Header: Editerbart område
7
7. Indhold: Editerbart område
8
8. Footer: Placeret udenfor Wrapper: Tekst: Kongens Folk, Frederiksgade 75, opg. E, DK-8000 Århus C Tlf: 8871 7254 / 2048 6062 info@kongensfolk.dk
SIDE : Startsiden (index)
1
1. Header indhold: Placeres ved siden af hinanden: indexbanner.png + rcl.gif
2
2. Nyheder/podcasts: Billede: nyheder_podcasts.gif
3
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
4. Nyeste Podcast: Border left: Solid, 5 px, #3C0 Border top: dotted, 1 px, #000 Tekst: 2012 - er et forår <p><strong> 06/07/12 <p>
7
8
9
10
7. 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>
Læs mere... <a>
5
5. Frontpageslideshow: flexslider.css images: slide1:jpg, slide2:jpg ... slide10.jpg
6
6. Table 3 kolonner, 7 rækker
11
11. Facebook plug in <iframe src=”//www.facebook.com/plugins/like. php?href=http%3A%2F%2Fwww.facebook.com%2Fkongensv enner&amp;send=false&amp;layout=standard&amp;width =450&amp;show_faces=false&amp;action=like&amp;colo rscheme=light&amp;font&amp;height=35” scrolling=”No” frameborder=”0” style=”border:none; overflow:hidden; width:250px; height:35px;” allowtransparency=”true”></ iframe>
Grafisk Workflow 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;
Grafisk Workflow 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{ serif; }
font-family: Arial, Helvetica, sansfont-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.
Grafisk Workflow Produktion i Dremweaver Hver enkelt side laves i Dreamweaver, ud fra min template
Lavet med CSS-styles:
Grafisk Workflow Testet i forskellige browsere: Safari
Firefox
Google Crome
Internet Explorer
Virker ogs책 med farvet scrollbar