1. ONLINE_PUBLISHING/
PRESENTATIE_GROEPSWERK
WEBSITE BAD
CIRKUZ
EVA HADERMANN
EGLANTINE MOLLER
JOACHIM CEULEMANS
DRIES SPEETJENS

2. COLOFON
• Eva Hadermann: css en html, integratie
content management
• Eglantine Möller: inhoud
• Joachim Ceulemans: inhoud
• Dries Speetjens: opmaak

3. CONCEPT
• muziekgroep uit Leuven
• genre: Jazz en Blues
• aanwezigheid op web:
• MySpace
• Vi.be
• Facebook
• maar geen eigen website

4. DOEL
• representatie van de muziekgroep
• tekst (biografieën e.d.)
• beeld (foto en video)
• persinformatie
• muziekvoorstelling
• kalender
•…

5. DOELGROEP
• publiek en fans
• journalisten
• organisatoren

6. STRUCTUUR
• slechts 1 niveau
*
• alle hyperlinks in navigatiebalk
• rode ster als wegwijzer

7. INHOUD
• mediabalk
• muziekspeler (embedded player
• slideshow
• youtube-filmpje
• alle media embedded
• geeft goed beeld van groep

8. INHOUD
• homepage
• teaser (beknopte voorstelling)
• nieuwsberichten
• nieuwe concerten
• bio
• ontstaan en parcours
• bandleden

9. INHOUD
• kalender
• aankomende concertdata
• voorbije concertdata
• multimedia
• selectie foto’s
• filmpjes

10. INHOUD
• pers
• persmap (in rar-formaat)
• verzameling persrecensies
• contact
• algemeen contactformulier
• rechtstreekse contactgegevens

11. WIREFRAME
LOGO
• linksboven
• deels buiten
body

12. WIREFRAME
HEADER
• foto band
• zwart-wit
• overgang

13. WIREFRAME
NAVIGATIE
• 6 buttons
• stijl cd-hoes:
labels
• CSS-sprites

14. WIREFRAME
CONTENT
• links
• dynamisch
venster
• gekoppeld aan
Content
Management
System

15. WIREFRAME
MEDIA
• rechts
• inhoud
• muziekspeler
• foto
• video
• statisch venster

16. WIREFRAME
FOOTER
• auteursrechten
• W3C-validatie
• colofon
• belangrijke links:
• home
• contact
• colofon

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

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

19. LETTERTYPE
BUTTONS PUNCH
• punch Label LABEL
• free font
• stijl: labels
ABCDEFGHIJ
• opgeslagen als LKMNOPQRST
afbeelding
VWXYZ

20. KLEURGEBRUIK
#000000
• hoofdkleur
• achtergrond

21. KLEURGEBRUIK
#ffffff
• tekst
• details

22. KLEURGEBRUIK
#bfbfbf
• headers

23. KLEURGEBRUIK
#fae674
• hyperlink visited

24. KLEURGEBRUIK
#fded97
• header 1
• hyperlink hover

25. KLEURGEBRUIK
#fdf1b2
• hyperlink active

26. KLEURGEBRUIK
#bbb070
• hyperlink

27. KLEURGEBRUIK
#fb0707
• ster navigatie

28. HTML/CSS
• reset.css
• Eric Meyer
• reset standaardinstellingen van browser
• om verschillen tussen browsers te
minimaliseren

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

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

31. 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;
}

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

33. 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;
}

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

35. RESULTAAT