ONLINE_PUBLISHING/PRESENTATIE_GROEPSWERK

WEBSITE BAD CIRKUZ

EVA HADERMANNEGLANTINE MOLLER

JOACHIM CEULEMANSDRIES SPEETJENS

• Eva Hadermann: css en html, integratie content management

• Eglantine Möller: inhoud

• Joachim Ceulemans: inhoud

• Dries Speetjens: opmaak

COLOFON

• muziekgroep uit Leuven• genre: Jazz en Blues• aanwezigheid op web:

• MySpace• Vi.be• Facebook

• maar geen eigen website

CONCEPT

• representatie van de muziekgroep

• tekst (biografieën e.d.)

• beeld (foto en video)

• persinformatie

• muziekvoorstelling

• kalender

• …

DOEL

• publiek en fans• journalisten• organisatoren

DOELGROEP

• slechts 1 niveau• alle hyperlinks in navigatiebalk• rode ster als wegwijzer

*STRUCTUUR

• mediabalk• muziekspeler (embedded player• slideshow• youtube-filmpje

• alle media embedded• geeft goed beeld van groep

INHOUD

• homepage• teaser (beknopte voorstelling)

• nieuwsberichten• nieuwe concerten

• bio• ontstaan en parcours• bandleden

INHOUD

• kalender• aankomende concertdata• voorbije concertdata

• multimedia• selectie foto’s• filmpjes

INHOUD

• pers• persmap (in rar-formaat)• verzameling persrecensies

• contact• algemeen contactformulier• rechtstreekse contactgegevens

INHOUD

LOGO

• linksboven• deels buiten

body

WIREFRAME

HEADER

• foto band• zwart-wit• overgang

WIREFRAME

NAVIGATIE

• 6 buttons• stijl cd-hoes: labels

• CSS-sprites

WIREFRAME

CONTENT

• links• dynamisch

venster• gekoppeld aan

Content Management System

WIREFRAME

MEDIA

• rechts• inhoud

• muziekspeler• foto• video

• statisch venster

WIREFRAME

FOOTER

• auteursrechten• W3C-validatie• colofon• belangrijke links:

• home• contact • colofon

WIREFRAME

CONTENT• schreefloos• Arial (Microsoft)• Helvetica (Apple)• lettergrootte: 12 px• regelafstand: 18 px• kleur: wit (oogt grijs)

LETTERTYPE

FOOTER• schreef• Georgia• Times New Roman• Times• lettergrote: 10 px• regelafstand: 18 px

LETTERTYPE

BUTTONS

• punch Label• free font• stijl: labels

• opgeslagen als afbeelding

LETTERTYPE

PUNCH LABEL

ABCDEFGHIJLKMNOPQRSTVWXYZ

KLEURGEBRUIK

#000000• hoofdkleur• achtergrond

KLEURGEBRUIK

#ffffff• tekst• details

KLEURGEBRUIK

#bfbfbf• headers

KLEURGEBRUIK

#fae674• hyperlink visited

KLEURGEBRUIK

#fded97• header 1• hyperlink hover

KLEURGEBRUIK

#fdf1b2• hyperlink active

KLEURGEBRUIK

#bbb070• hyperlink

KLEURGEBRUIK

#fb0707• ster navigatie

KLEURGEBRUIK

HTML/CSS

• reset.css• Eric Meyer• reset standaardinstellingen van browser• om verschillen tussen browsers te

minimaliseren

HTML/CSS

• Navigatie: CSS sprites• 1 grote afbeelding• verschuift naar correcte stand• slechts 1 afbeelding in te laden

HTML/CSS

#nav li.kalender {background:url("../img/nav.gif") -271px 0px;width:144px;

}

HTML/CSS

#nav li.kalender {background:url("../img/nav.gif") -271px 0px;width:144px;

}#nav li.kalender a:hover {

background:url("../img/nav.gif") -271px -55px;}

HTML/CSS

#kalender #nav li.kalender {background:url("../img/nav.gif") -271px -110px;width:144px;

}

HTML/CSS

#kalender #nav li.kalender {background:url("../img/nav.gif") -271px -110px;width:144px;

}#kalender #nav li.kalender a:hover {

background:url("../img/nav.gif") -271px -165px;}

CONTENT MANAGEMENT

• Pagelime• www.pagelime.com• eenvoudig tekst aanpassen• class=“cms-editable”

RESULTAAT