Hadermann.speetjens.ceulemans.möller.presentatie webstie

549 views

Published on

Published in: Technology, News & Politics
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
549
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Hadermann.speetjens.ceulemans.möller.presentatie webstie

  1. 1. ONLINE_PUBLISHING/PRESENTATIE_GROEPSWERKWEBSITE BADCIRKUZ EVA HADERMANN EGLANTINE MOLLER JOACHIM CEULEMANS DRIES SPEETJENS
  2. 2. COLOFON• Eva Hadermann: css en html, integratie content management• Eglantine Möller: inhoud• Joachim Ceulemans: inhoud• Dries Speetjens: opmaak
  3. 3. CONCEPT• muziekgroep uit Leuven• genre: Jazz en Blues• aanwezigheid op web: • MySpace • Vi.be • Facebook• maar geen eigen website
  4. 4. DOEL• representatie van de muziekgroep • tekst (biografieën e.d.) • beeld (foto en video) • persinformatie • muziekvoorstelling • kalender •…
  5. 5. DOELGROEP• publiek en fans• journalisten• organisatoren
  6. 6. STRUCTUUR• slechts 1 niveau *• alle hyperlinks in navigatiebalk• rode ster als wegwijzer
  7. 7. INHOUD• mediabalk • muziekspeler (embedded player • slideshow • youtube-filmpje• alle media embedded• geeft goed beeld van groep
  8. 8. INHOUD• homepage • teaser (beknopte voorstelling) • nieuwsberichten • nieuwe concerten• bio • ontstaan en parcours • bandleden
  9. 9. INHOUD• kalender • aankomende concertdata • voorbije concertdata• multimedia • selectie foto’s • filmpjes
  10. 10. INHOUD• pers • persmap (in rar-formaat) • verzameling persrecensies• contact • algemeen contactformulier • rechtstreekse contactgegevens
  11. 11. WIREFRAME LOGO • linksboven • deels buiten body
  12. 12. WIREFRAME HEADER • foto band • zwart-wit • overgang
  13. 13. WIREFRAME NAVIGATIE • 6 buttons • stijl cd-hoes: labels • CSS-sprites
  14. 14. WIREFRAME CONTENT • links • dynamisch venster • gekoppeld aan Content Management System
  15. 15. WIREFRAME MEDIA • rechts • inhoud • muziekspeler • foto • video • statisch venster
  16. 16. WIREFRAME FOOTER • auteursrechten • W3C-validatie • colofon • belangrijke links: • home • contact • colofon
  17. 17. LETTERTYPECONTENT• schreefloos• Arial (Microsoft)• Helvetica (Apple)• lettergrootte: 12 px• regelafstand: 18 px• kleur: wit (oogt grijs)
  18. 18. LETTERTYPEFOOTER• schreef• Georgia• Times New Roman• Times• lettergrote: 10 px• regelafstand: 18 px
  19. 19. LETTERTYPEBUTTONS PUNCH• punch Label LABEL• free font• stijl: labels ABCDEFGHIJ• opgeslagen als LKMNOPQRSTafbeelding VWXYZ
  20. 20. KLEURGEBRUIK#000000• hoofdkleur• achtergrond
  21. 21. KLEURGEBRUIK #ffffff • tekst • details
  22. 22. KLEURGEBRUIK #bfbfbf • headers
  23. 23. KLEURGEBRUIK #fae674 • hyperlink visited
  24. 24. KLEURGEBRUIK #fded97 • header 1 • hyperlink hover
  25. 25. KLEURGEBRUIK #fdf1b2 • hyperlink active
  26. 26. KLEURGEBRUIK #bbb070 • hyperlink
  27. 27. KLEURGEBRUIK #fb0707 • ster navigatie
  28. 28. HTML/CSS• reset.css • Eric Meyer • reset standaardinstellingen van browser • om verschillen tussen browsers te minimaliseren
  29. 29. HTML/CSS• Navigatie: CSS sprites • 1 grote afbeelding • verschuift naar correcte stand • slechts 1 afbeelding in te laden
  30. 30. HTML/CSS#nav li.kalender { background:url("../img/nav.gif") -271px 0px; width:144px;}
  31. 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. 32. HTML/CSS#kalender #nav li.kalender { background:url("../img/nav.gif") -271px -110px; width:144px;}
  33. 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. 34. CONTENT MANAGEMENT• Pagelime • www.pagelime.com • eenvoudig tekst aanpassen • class=“cms-editable”
  35. 35. RESULTAAT

×