Evalueringsportfolio for Hovedforløb 3
Grafisk workflow Website til Kongens Folk
Grafisk workflow
Grafisk workflow
Opgaven Kongens Folk skal have en ny og mere nutidig hjemmeside til deres arbejde. Kongens Folk er en kristen forening, som holder til i Aarhus centrum og fungerer både som café og kirke. De har ikke så mange krav, men de har et ønske om en mere moderne og frisk hjemmeside. Den skal også være mere dynamisk og let at tilgå. Jeg har fået meget frie hænder til denne opgave, da jeg også selv er en del af Kongens Folk. Jeg laver hele hjemmesiden, men har i denne opgave fokus på en ny forside, generel underside, nyhedsside, podcastside, og kontaktside. Den skal på sigt laves responsive og lægges ind i et CMS system, så det bliver nemt for andre at gå ind og opdatere hjemmesiden. Det vil jeg arbejde hen imod.
Arbejdsgang Layout og udseende af hjemmesiden planlægges. Ud fra storyboard og skelet med pixelmål udarbejdes hjemmesiden. Hertil bruges programmet Dreamweaver CS5, hvor jeg arbejder i DESIGNER workspace og har det opdelt i både Code og Design. Indexsiden har et unikt udseende og laves for sig selv. De øvrige sider har samme struktur og laves derfor i en Template, hvor jeg definerer hvad der skal kunne redigeres. I de redigerbare områder (Editable areas), indsætter jeg diverse tekst og billeder. Herefter uploader jeg alt html, php, css, og jQuery til en server. 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. - Hjemmesiden laves i Adobe Dreamweaver. - Forbindelse til serveren: akvila.avalonia.dk, hvor hjemmesiden hostes. - Upload til newwww.marianoergaard.dk - testside - Korrekturlæsning - tekst, billeder, navigation, links. mm. - Upload til den rigtige side: www.kongensfolk.dk
Test i forskellige browsere (Usability) Siden testes i de forskellige browsere der findes, for at sikre, at den er kompatibel og anvendelig alle steder.
Dette gælder også til tablets og smartphones. - Testet i Firefox, Safari, Internet Explorer, Google Crome: virker i alle browsere.
Kvalitetsvurdering Hjemmesiden har fået en meget mere frisk identitet end før. Den er mere ungdommelig og moderne, hvilket var det Kongens Folk ønskede. Funktionsmæssigt kan den også flere ting; der er bla. jQuery slideshow, CSS3 effekter, en simpel mailformular. Den er søgemaskineoptimeret med metabeskrivelser og metanøgleord, ALT-tekster og titler på alle billeder. Alle siderne har også deres titel. Ny opsætning, friske billeder og nye farver gør en stor forskel for overskuelighed og navigation på siden. Idéen til design er kommet sammen med udviklingen af nye plakater, flyers og visitkort til Kongens Folk – så nu har de den samme stil i al deres materiale. Hele hjemmesiden er stadig ved at blive udarbejdet færdig. Når den er helt klar, vil den kunne tilgås fra www.kongensfolk.dk. Indtil da ligger den her: newwww.marianoergaard.dk.
Grafisk workflow Original hjemmeside Screenshots af den gamle hjemmeside Forside Den indeholder mange informationer, og det er ønsket, at disse skal organiseres bedre på den nye hjemmeside.
Ikke bare funktione r og opsætning skal gøres anderle des og bedre. Hele designet skal laves om.
Nyheder Siden har fungeret fint til nyheder, men skal optimeres til at fungere bedre.
Podcast Siden skal have mere stil og noget der karakteriserer podcast bedre.
Kontakt Kongens Folk Siden skal fungere både med Google Maps og mailformular.
Generel underside Siden skal have en minumumshøjde, når der ikke er så meget indhold på siden
når man ser den Siden ser meget brun ud nu ikke når man her, men så slemt er det ser den i browseren. folk.dk Prøv selv: www.kongens
1
Grafisk workflow Inspirationssøgning og idéudvikling Inspiration fra andre steder:
amcnet.dk Hjemmesiden her tilhører Aalborg Menighedscenter i Aalborg. Den er meget moderne, og udstråler at de har styr på tingene.
UD med kasser Inspiration til enkelthed. Alt behøver ikke at være i kasser for at fungere.
Skæve vinkler Det kan fungere godt at bryde den traditionelle opsætning med skæve vinkler.
Creflo Dollar Ministries En anden kristen hjemmeside, som er meget fokuseret på en bestemt farve. Fungerer også godt med ikonerne som flag.
JellyBelly God opsætning med dynamisk slideshow i toppen. En perfekt måde at vise gode billeder på siden.
Anderledes design Man skal ikke være bange for at skille sig ud med en anderledes hjemmeside. Så længe den fungerer til sit formål, så er det et plus med et utraditionelt design, der skiller sig ud fra hvad man normalt ser.
Browserbaggrund Inspiration til at lave en browserbaggrund. Hvis man vælger at lave en speciel browserbaggrund, som ikke er neutral, får den en stor betydning for hele hjemmesidens udseende og layout.
V ZMWMSRI
Brainstorm om Kongens Folk
JSVF¢R
SNIOXIV WTVSKTV YHZMO LI OEJJI X
F¢VR %EVLYW
LpF
YRKI
IRLIH
+Y H HERW
W XSV PMRK
VpHKMZRMRK
OEF
J¡PPIWW
GEJr WNS Z
QYWMO
EPZSV
XVS
FMFIPIR
J VMLIH
,IPPMKpRHIR
SVH
(ERQE VO EOXMZMXIXIV
JSVIHVEK
ZIRRIV
XMPPM H
PO /SRKIRW *S
OYRW X
MWRMRK YRHIV Z
XYVMWQI
PMK LIH JSVWOIP
JEQMPMIKVYTTI
PSZWERK
MRXIVREXMSREPX
JS
K VERHVMR .IWYW
MK JSVXVS P P MZ
LIH
JIW X
¡PHVI
I PIRG I\IP WS QLIH STQ¡VO
L]KKI
KP¡HI
WYRHLIH
VEHMGEP
WX]VOI
HIPWI LIPFVI
WEPZIX
JEV ZIV
PMZWKP¡HI
WINV
XEPIRXIV
ZIRRIV
2
Grafisk workflow Idéudvikling Flowchart - Struktur på nuværende hjemmeside: kongensfolk.dk
Nyheder
Podcast
Praktisk info
Kongens Folk
Nyheder
Vidnesbyrd
Arkiv
Program
Kongen
Podcast
Ældre artikler
Gaver
Folket
Vidnesbyrd
Service
Dig
Kongens Venner facebook
Links
Kongens Venner
Forside
Galleri
Kontakt
Sprog
engelsk side
Forlag
Flowchart - Struktur på kommende hjemmeside: Indholdet er det samme, det er bare blevet bedre organiseret og navneforandret, så siden er nemmere at finde rundt i. Der er ikke for mange sider!
kongensfolk.dk
Kongens Folk
Info
Nyheder
Om Kongen
Program
Podcast
Vision
Gaver
Café
Vidnesbyrd
Forlag
Ugens program
Frelse
Referencer
Forside
Nyheder
Podcast
Galleri
Kontakt
3
Grafisk workflow Idéudvikling Layout og designproces Jeg havde allerede en idé om hvordan hjemmesiden skulle se ud, fordi jeg har været i gang med at lave nyt design til en plakat. Derfor gik jeg direkte til computeren og begyndte at lave et layout i Photoshop.
Designproces til
Designproces Idé til baggrunden, blev udviklet sammen med udviklingen af en kommende plakat til Kongens Folk. Resultatet blev en masse lyseblå trekanter i forskellige størrelser og opacitet. De flyder også en smule ind i hinanden. Baggrunden udgør det grundlæggende udseende for det nye design.
plakat
Baggrund
Første layout
Andet layout
Tredje layout
Fjerde layout
Mange ideer Der var mange ting oppe at vende i layoutprocessen. Jeg valgte at bruge nogle elementer fra flere af de forskellige layouts.
4
Grafisk workflow Layout udvikling Skelet - forside Det har været en løbende udvikling af opbygning og design til hjemmesiden. Derfor er der ikke et decideret skelet med faste pixelmål hertil. Det er også fordi siden er lavet dynamisk. Det vil sige, at den tilpasser sig størrelsen på skærmen, man ser siden på. Den har en bredde på 100%, en max-bredde på 1000px og en minimumsbredde på 320 px. Inden for disse pixelmål følger elementerne med, som det nu passer. Billederne har fået tildelt en max højde og bredde – og 100%, som gør dem bevægelige.
Skelet til andre
n
Skelet til forside
sider 100 % max 1000
100 % max 1000
1
1 variabel x 35
variabel x 35
variabel x 35
variabel x 35
max 1000 x 315
max 1000 x 380
50 variabel
variabel
variabel 24 % x auto height 15
15 10
max 250 x 200
max 250 x 200 20
max 960 x min 200
20
20 89% x auto height
30 % x 300
30 % x 300
30 % x 300
150 x150
150 x150
20
20 20
20 Footer tekst
20
20 20
20
Footer tekst
20
20 20
20
Storyboard Indholdet fra den gamle side skal ind på den nye side. Derfor er Storyboard i denne sammehæng ikke nødvendigt at lave, for det er allerede organiseret på siderne. Der er hovedsageligt kommet nye billeder til indholdet, og det er overskueligt uden en oversigt/storyboard til.
5
Grafisk workflow Detaljer på siderne Index-siden og Nyhedssiden Oversigt over indholdet på hver enkelt side
Slideshow: • jQuery slideshow
Tabs: • jQuery UI tabs • Google font: Clicker script <link href=’http://fonts.googleapis. com/css?family=Clicker+Script’ rel=’stylesheet’ type=’text/css’>
Menu design: •G radient: background: linear gradient(#9fe3ff, rgba(51, 204, 255, 0.8)); •R unde hjørner: border-radius: 10px; •A nimation i Safari og Chrome: -webkit-transition: 1s; /* For Safari 3.1 to 6.0 */
Menu funktion: • small-device.css: @media only screen and (min-width: 1000px) { css der vedrører menu }
Ikoner: • Border radius: 100% • Folk har let ved at relatere til ikoner og symboler • De bryder også med ”kassedesignet”
@media only screen and (min-width: 400px) and (max-width: 1018px) {css der vedrører menu }
Facebook plugin • i frame som linker til Kongens Folks facebookside
Slideshow: • jQuery slideshow med billeder til nyheder
Nyheder: • Opbygning er meget ens, men mere overskuelig - linker til sider med mere information om det pågældende emne • Nu med dato - h6
Sidebar: •G iver information om andre ting på hjemmesiden. Fungerer som smagsprøver/reklamer for den pågældende ting. • I ndhold i sidebar kan variere fra side til side.
6
Grafisk workflow Detaljer på siderne Generel indholdsside og Kontaktsiden Oversigt over indholdet på hver enkelt side
Content box: • Højde varierer i forhold til mængde af indhold
Slideshow: • jQuery slideshow med billeder til nyheder
Mail formular: • En simpel formular <!-- FORMULAR START --> <form action=”mailto:info@kongensfolk.dk” method=”post” enctype=”text/plain”> <p>Navn:<br> <input type=”text” name=”dit navn” onblur=”if(this.value==’’)this.value=’dit navn’;” onfocus=”if(this.value==’dit navn’) this.value=’’;” value=”dit navn”size=”45” style=”color:#CCC” /><br><br> E-mail:<br> <input type=”text” name=”din e-mail*” onblur=”if(this.value==’’)this. value=’din e-mail*’;” onfocus=”if(this. value==’din e-mail*’)this.value=’’;” value=”din e-mail*”size=”45” style=”color:#CCC” /><br><br /> Besked:<br /> <textarea name=”besked” cols=”43” rows=”5” value=”besked” ></textarea> </br></br> <input type=”submit” value=”Send”> <input type=”reset” value=”Reset”> </p>
Google Maps: • <iframe src=”https://www.google. com/maps/embed?pb=!1m14!1m8!1m 3!1d2222.183664504153!2d10.203578 999999998!3d56.153929!3m2!1i1024 !2i768!4f13.1!3m3!1m2!1s0x464c3f92 4bb2a053%3A0xce2c17d15f6f682b!2 sKongens+Folk!5e0!3m2!1sda!2sdk! 4v1396183074893” width=”300px” height=”355” frameborder=”0” style=”border:0; float:right;”></ iframe>
</form>
</p>
<!-- FORMULAR SLUT -->
7
Grafisk workflow Detaljer på siderne Podcastsiden Oversigt over indholdet på hver enkelt side
Favicon: • Det lille ikon i indlæsningsfeltet, er et favicon. Det er 16x16 px og dets filnavn og og endelse er favicon.ico. Det skal uploades i Root folderen. Herfra finder den selv ud af resten.
Play button: • Linker til mp3-fil som åbnes i et nyt vindue • Swap-image: <img src=”../images/diverse/play.png” alt=”Play” width=”46” height=”46” id=”pod5” onMouseOver=”MM_ swapImage(’pod5’,’’,’../images/ diverse/play_hover.png’,1)” onMouseOut=”MM_swapImgRestore()”>
jQuery accordion: •V iser indhold i paneler som kan åbnes og lukkes.
html til Accordion
<div class=”content_box”> <!-- CONTENT_BOX--> <div id=”flip”> <h2>Tidligere i år</h2> </div> <div id=”panel”> <br> <h3>Marts</h3> <h6>28/03-2014</h6> <a href=”http://www.kongensfolk.dk/pages/podcast/1files/308_ord_af_velsignelse_eller_forbandelse_2_280314.mp3” target=”_blank”>Ord af velsignelse eller forbandelse 2<img src=”../images/diverse/play.png” alt=”Play” style=”float:right; margin-top:-15px; margin-bottom:5px;”name=”Play_13” width=”40” height=”40” id=”Play_13” onMouseOver=”MM_ swapImage(‘Play_13’,’’,’../images/diverse/play_hover.png’,1)” onMouseOut=”MM_swapImgRestore()”></a> <h6>21/03-2014</h6> <a href=”http://www.kongensfolk.dk/pages/podcast/1files/307_ord_af_velsignelse_eller_forbandelse_1_210314.mp3” target=”_blank”>Ord af velsignelse eller forbandelse 1<img src=”../images/diverse/play.png” alt=”Play” style=”float:right; margin-top:-15px; margin-bottom:5px;”name=”Play_12” width=”40” height=”40” id=”Play_12” onMouseOver=”MM_ swapImage(‘Play_12’,’’,’../images/diverse/play_hover.png’,1)” onMouseOut=”MM_swapImgRestore()”></a> <h6>14/03-2014</h6> <a href=”http://www.kongensfolk.dk/pages/podcast/1files/306_tilgiv_dig_selv_fri_140313.mp3” target=”_blank”>Tilgiv dig selv fri<img src=”../images/diverse/play.png” alt=”Play” style=”float:right; margin-top:-15px; marginbottom:5px;”name=”Play_11” width=”40” height=”40” id=”Play_11” onMouseOver=”MM_swapImage(‘Play_11’,’’,’../images/diverse/ play_hover.png’,1)” onMouseOut=”MM_swapImgRestore()”></a> <h6>07/03-2014</h6> <a href=”http://www.kongensfolk.dk/pages/podcast/1files/304_jesus_og_faderen_2_070314.mp3” target=”_blank”>Jesus og faderen 2<img src=”../images/diverse/play.png” alt=”Play” style=”float:right; margin-top:-15px; marginbottom:5px;”name=”Play_10” width=”40” height=”40” id=”Play_10” onMouseOver=”MM_swapImage(‘Play_10’,’’,’../images/diverse/ play_hover.png’,1)” onMouseOut=”MM_swapImgRestore()”></a> <h6></h6> <br> </div> </div>
8
Grafisk workflow Produktion Fremhævede tekniske detaljer css til design af menu #menu { width: 100%; height: 35px; padding:0; position: relative; z-index: 100; -webkit-border-radius: 10px 10px 0px 0px; -moz-border-radius: 10px 10px 0px 0px; border-radius: 10px 10px 0px 0px; } #menu ul { /* menu på liste - unordered list */ list-style: none; margin: 0px; padding: 0px; } #menu ul li { /* menu på liste - list item */ float: left; margin-left:1px; display: inline; /* sætter menu på linje*/ position: relative; } #menu ul li a { /* menu på liste - list item link */ width: 100px; height: auto; color: #3c3c3c; padding: 10px 1.49em; float:left; text-align: center; font-size: 14px; display: block; /* hele feltet er klikbart */ -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } #menu ul li a:hover, a:active, a:visited{ /* menu på liste - list item link hover */ background: -webkit-linear-gradient(#9fe3ff, rgba(51, 204, 255, 0.8)); background: -o-linear-gradient(#9fe3ff, rgba(51, 204, 255, 0.8)); background: -moz-linear-gradient(#9fe3ff, rgba(51, 204, 255, 0.8)); background: linear-gradient(#9fe3ff, rgba(51, 204, 255, 0.8)); color: #fff; text-decoration:none; -webkit-transition: 1s; /* For Safari 3.1 to 6.0 */ transition: 1s; } #menu ul ul{ position: absolute; top: 32px; display: none; /* vigtig - sørger for at dropdown menuen bliver placeret “ovenpå”, så den ikke forsty- rer andet indhold på siden*/ } #menu ul ul li a { width:100px; background-color: rgba(51, 204, 255, 0.8); color:#3c3c3c; margin-top:2px; } #menu ul li:hover ul{ display: block; color:#fff; }
html til menu
<!--MENU --> <div id=”menu”>
<ul> <li><a href=”index.html”>Forside</a></li> <li><a href=”pages/nyheder.html”>Nyheder</a></li> <li><a href=”pages/podcast.html”>Podcast</a></li> <li><a href=”pages/kongens_folk.html”>Kongens Folk</a>
<ul> <!-- her starter en liste --> <li><a href=”../pages/kongen.html”>Om Kongen</a></li> <li><a href=”../pages/os.html”>Om folket</a></li> <li><a href=”../pages/vidnesbyrd.html”>Vidnesbyrd</a></li> <li><a href=”../pages/frelse.html”>Frelse?</a></li> </ul> </li> <li> <a href=”pages/info.html”> Info</a> <ul><!-- her starter en liste --> <li><a href=”pages/aktiviteter.html”>Program</a></li> <li><a href=”pages/gaver.html”>Gaver</a></li> <li><a href=”pages/forlag.html”>Forlag</a></li> <li><a href=”pages/referencer.html”>Referencer</a></li> </ul> </li> <li><a href=”pages/galleri.html”>Galleri</a></li> <li><a href=”pages/kontakt.html”>Kontakt</a></li> </ul> </div><!-- MENU END-->
css til der gør at menuen kan variere i størrelsen
@media only screen and (min-width: 1000px) { #menu ul li a { /* menu på liste - list item link */ width: 100px; height: auto; color: #3c3c3c; padding: 7px 1.49em; float:left; text-align: center; font-size: 14px; display: block; /* sørger for at hele feltet er klikbart */ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-transition: 2s; /* For Safari 3.1 to 6.0 */ transition: 2s; } #wrapper { width: 90%; margin-left:auto; margin-right:auto; max-width: 1000px; min-width: 780px; } #header { width: 90%; max-width: 1000px; min-width: 780px; height: auto; margin: 30px auto 10px auto; text-align: center; } #header img { width: 100%; height:100%; max-width: 945px; min-width: 780px; }
html til slideshow
<!-- SLIDESHOW--> <div class=”slider-wrapper theme-default”> <div id=”slider” class=”nivoSlider”> <a href=”pages/vidnesbyrd/helene. html”><img src=”images/slideshows/front_helene. jpg” data-thumb=”images/slideshows/front_helene.jpg” alt=”Helenes vidnesbyrd” /></a> <a href=”file:///Users/marianoergaard/Sites/kongensfolk/pages/nyheder/jubileum. html”><img src=”images/slideshows/front_5.jpg” datathumb=”images/slideshows/front_5.jpg” alt=”Kongens Folk 5 år” /></a> <a href=”pages/podcast. html”><img src=”images/slideshows/front_podcast. jpg” data-thumb=”images/slideshows/front_podcast.jpg” alt=”Podcast” /></a> <a href=”pages/frelse.html”><img src=”images/slideshows/front_frelse.jpg” datathumb=”images/slideshows/front_frelse.jpg” alt=”Frelse” /></a> <a href=”pages/vidnesbyrd/ cathrine.html”><img src=”images/slideshows/ front_cathrine.jpg” data-thumb=”images/slideshows/ front_cathrine.jpg” alt=”Cathrines vidnesbyrd” datatransition=”slideInLeft” /></a>
.container { height: auto; max-width: 1000px;/* en max-width gør at layoutet ikke kan blive bredere end den angivne width. */ min-width: 320px; background-color: rgba(246, 246, 246, 0.7); margin: 0 auto 0px auto; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; -webkit-box-shadow: 0px 1px 5px 0px #4a4a4a; -moz-box-shadow: 0px 1px 5px 0px #4a4a4a; box-shadow: 0px 1px 5px 0px #4a4a4a; } } @media only screen #menu ul } } @media only screen #menu ul } }
and (min-width: 1019px) and (max-width: 1125px) { li a { padding: 7px 1em;
/* menu på liste - list item link */
and (min-width: 400px) and (max-width: 1018px) { li a { padding: 7px 0.365em;
/* menu på liste - list item link */
@media only screen and (min-width: 320px) and (max-width: 399px) { /* osv. */
</div> </div> <!-- SLIDESHOW END-->
9
Grafisk workflow Upload og test af kongensfolk.dk Forbindelse til server Der oprettes forbindelse til serveren akvila.avalonia.dk, hvor hjemmesiden hostes. Alle billeder, css-styles, html, jQuery osv. uploades
Test i forskellige browsere Det skulle helst virke alle steder, og det gør det.
Safari
Firefox
Google Chrome
Internet Explorer
10