Hovedforløb 1 - Grafisk Workflow

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

Facebook

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

Facebook

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