1.
Casestudie : FAROnet 28/11/08: Hands-on vorming over het opzetten of uitbreiden van een website met web 2.0 technologieën. FARO. Vlaams steunpunt voor cultureel erfgoed Bram Wiercx

3.
Bestaande situatie <ul><li>|| </li></ul>

4.
CultureleBiografie.be

5.
VCV.be

6.
Hosting

7.
Wat we willen… <ul><li>“ We kiezen er voor om met een nieuw platform te starten in een open source omgeving (Drupal) voor de nieuwe organisatie FARO. We wensen verder met zoveel mogelijk open source software componenten (niet noodzakelijk enkel Drupal) te werken die aan elkaar kunnen worden gekoppeld: het idee van een ‘ mashup’ . Het platform moet zodanig gebruiksvriendelijk opgebouwd worden dat alle stafmedewerkers zelf informatie kunnen publiceren op de site (publicatieplatform), bv. via een blogmodule. Daarnaast zal het globale contentbeheer redactioneel door een webredacteur mee worden beheerd. Belangrijk is ook de koppeling naar externe data (RSS feeds, mashup). “ </li></ul>

8.
<ul><li>2 > 0 </li></ul>

9.
Van 0 starten, waarmee moesten we rekening houden? <ul><li>1. Krappe timing, nieuwe website moet klaar zijn bij lancering van het steunpunt. </li></ul><ul><li>2. Mashup/ Web2.0 / Open-Source website, huidige bedrijven leken ons minder geschikt hiervoor. </li></ul><ul><li>3. Beleidsplan van FARO was nog niet klaar. </li></ul>

10.
1. Krappe timing (enkele oplossingen) <ul><li>A. Tijdelijke blog op basis van open-source (WordPress) of commerciële blogsoftware (Movable Type). </li></ul><ul><li>B. Eenvoudige basiswebsite die we later verder kunnen uitbreiden, project opdelen in verschillende fasen. </li></ul>

11.
2. Hoe hebben we webdesign bedrijf gezocht? <ul><li>Gezocht bij FeWeb : Federatie van Webdesigners </li></ul><ul><li>Portfolio bekeken </li></ul><ul><li>Contact opgenomen met bestaande klanten </li></ul><ul><li>Afspraak gemaakt met bedrijf (via telefoon) </li></ul><ul><li>Open gesprek (plannen voorleggen) </li></ul><ul><li>Offerte (Opdelen) </li></ul><ul><li>(Eventueel onderdelen schrappen uit offerte) </li></ul><ul><li>Contract (Afspraken maken rond eigendom, copyright, oplevering, wijzigingen, onderhoudscontract, toekomst) </li></ul><ul><li>CRITERIA bij het kiezen: flexibiliteit, communicatie, kennis, technologie (programmeertalen), visie, afhankelijkheid, openheid, ervaring, meedenken, uurprijs / dagprijs, … </li></ul>

12.
2. Voordelen van Open-Source software <ul><li>Samenwerken = besparen </li></ul><ul><ul><li>Doordat heel wat bedrijven / organisaties samenwerken bespaart iedereen kosten. </li></ul></ul><ul><li>Maak je minder afhankelijk van één bedrijf </li></ul><ul><ul><li>Software is open-source en dus geen eigendom van één bedrijf. Je kan als het nodig is overstappen naar een ander bedrijf. </li></ul></ul><ul><ul><li>Concurrentie laten spelen, je kan bij toekomstige wijzigingen meerdere offertes aanvragen en vergelijken. </li></ul></ul><ul><ul><li>Open-source systemen zoals Drupal zijn niet gemaakt door één persoon. Maak je niet persoonsafhankelijk. </li></ul></ul>

13.
2. Aanpak Open-Source website (Drupal) <ul><li>Huur een specialist in die je kan adviseren bij de keuze uit de 100de modules. Een foute start kan serieuze gevolgen hebben op lange termijn. </li></ul><ul><li>Laat je webdesigner meedenken (architect), door iets een beetje anders te doen is het soms beter en goedkoper. </li></ul><ul><li>Voldoet een module niet, neem dan contact op met de maker en bekijk samen of zaken beter kunnen. Sponsor dit dan. </li></ul><ul><li>Zorg dat je een onderhoudscontract hebt, open-source software moet regelmatig (security) geupdate worden. </li></ul><ul><li>Hosting </li></ul>

14.
3. Voordelen bij het werken in fasen <ul><li>Project is overzichtelijker voor jou en voor het bedrijf. </li></ul><ul><li>Je kan sneller ingrijpen als het fout loopt omdat de doorlooptijd korter is. </li></ul><ul><li>Plannen / noden veranderen doorheen het project, na elke fase kan je evalueren en een nieuwe wishlist maken. Zaken die toch niet goed zijn kan je bijsturen. </li></ul><ul><li>Bij het bouwen van de website werd er ook in fasen gewerkt. </li></ul>

15.
Website bouwen : Analyse(1) <ul><li>Projectteam : Een lijst van betrokken personen en hun taken wordt samengesteld, zowel binnen het webdesignbureau als binnen de organisatie. Er worden afspraken gemaakt betreffende vergaderingen, timing en beschikbaarheid. </li></ul><ul><li>Aan de hand van de SWOT analyse en de door de organisatie gekende gebreken en tekortkomingen van de huidige website worden de mogelijkheden tot verbetering vastgelegd. In gelijkaardige websites worden opportuniteiten gezocht. </li></ul><ul><li>Analyse doelstellingen , uitgangspunten en randvoorwaarden. Via overleg met de opdrachtgever worden de doelstellingen en voorkeuren van het grafisch en functioneel ontwerp vastgelegd. Het implementeren van de huisstijl wordt besproken. Aan de hand van een aantal voorbeeldsites wordt een beter idee verkregen over de gewenste grafische stijl en functionaliteit. </li></ul><ul><li>Analyse van de doelgroep . Omschrijving van de typische gebruiker via vragenlijst, discussie en studie statistieken. De doelgroep wordt ingedeeld in user profiles (personas) elk met hun specifieke kenmerken, wensen en verwachtingen mbt de site. </li></ul><ul><li>Een planning van de taken inclusief gedetailleerde timing en mijlpalen wordt opgesteld. </li></ul><ul><li>=> Wordt opgeleverd op het einde van de analyse fase: een document met omschrijving van doelen, doelgroep, </li></ul><ul><li>planning, team en taken. </li></ul>

16.
Website bouwen: Voorbereiding(2) <ul><li>Informatie architectuur: Alle content (teksten in de nodige talen, foto's, media) worden verzameld en in categoriën ingedeeld. Een sitemap en/of taxonomie (metadata) wordt opgesteld. </li></ul><ul><li>Navigatie : Een navigatiestructuur wordt uitgewerkt met aandacht voor hiërarchie, labels en usability (gebruiksvriendelijkheid). Naast de hoofdnavigatie wordt aandacht besteed aan alternatieve navigatie- en zoekmogelijkheden: sitemap, index, zoekvak, embedded links, geografische navigatie, sociale navigatiemogelijkheden of navigatie per thema, doelgroep, tagclouds, breadcrumbs, ... </li></ul><ul><li>Content types : Er wordt bepaald hoeveel verschillende soorten inhoud er zijn en hoeveel en welke velden (tekst, foto's, media) voor elk content type noodzakelijk zijn. </li></ul><ul><li>Wireframes . Voor de homepage en elke content type wordt een schematische paginaweergave opgesteld van de layout. Hiermee wordt de positie van tekst, foto's en media vastgelegd vooraleer aan het eigenlijke grafisch ontwerp begonnen wordt. </li></ul><ul><li>=> Wordt opgeleverd op het einde van de voorbereidende fase: een schematisch beeld (wireframes) van de diverse paginatypes van de site en een uitgewerkte navigatiestructuur. </li></ul>

17.
Voorbeeld wireframe

18.
Website bouwen: Ontwikkelingfase(3) <ul><li>a. De grafische uitwerking </li></ul><ul><li>Op basis van de resultaten van de analyse fase en de goedgekeurde wireframes wordt het concept voor de grafische look uitgewerkt. Een consistente en professionele look en feel wordt nagestreefd met een goede keuze van typografie, kleurschema en integratie van de huisstijl. </li></ul><ul><li>Voor de homepage en elk content type wordt het grafisch design uitgetekend met behulp van Photoshop en Illustrator. </li></ul><ul><li>Het design wordt voorgesteld en opmerkingen ter verbetering worden verzameld en aanpast tot de definitieve grafische layout . </li></ul><ul><li>= > Wordt opgeleverd: grafisch ontwerp. Door de korte tijd kan beslist worden om meteen het ontwerp binnen het statische prototype uit te werken. </li></ul>

20.
Website bouwen: Ontwikkelingfase(3) <ul><li>b. Prototype </li></ul><ul><li>Het grafisch ontwerp wordt omgezet naar templates in xhtml en css . </li></ul><ul><li>Alle webpagina's zijn opgesteld in XHTML 1.0 Strict conform de webstandaarden zoals vastgelegd door het W3C Consortium. Er wordt gewerkt met lagen (div tags) voor de structurele opbouw. Tabellen worden uitsluitend gebruikt voor &quot;tabular data&quot;, zoals voorgeschreven door het W3C. </li></ul><ul><li>Er wordt gebruik gemaakt van aparte CSS bestanden voor de layout. Naast de basislayout CSS worden aparte CSS bestanden opgesteld voor Internet Explorer 6 (bugs in deze browser corrigeren) en print ( printvriendelijk afdrukken zonder overbodige menustructuur of links). Aparte CSS bestanden laten makkelijk en flexibel wijzigingen in de layout toe na lancering, bijvoorbeeld een tussentijdse opfrissing of aanpassing aan grotere schermformaten. </li></ul><ul><li>Conform de webstandaarden worden structuur (xHTML en content), layout (CSS) en interactie (Javascript) strikt gescheiden . </li></ul><ul><li>De xhtml, css en Javascript webpagina's worden uitvoerig getest op compatibiliteit met diverse browsers, platformen en schermformaten. Daarnaast worden ook tests verricht op het vlak van accessibility (toegankelijkheid) en usability (gebruiksvriendelijkheid). De richtlijnen van het Anysurfer basislabel worden gevolgd. </li></ul><ul><li>= > Wordt opgeleverd: prototype in xhtml en css online te bekijken op testserver </li></ul>

21.
Website bouwen: Ontwikkelingfase(3) <ul><li>c. de Technische uitwerking </li></ul><ul><li>Op basis van het goedgekeurde prototype worden CMS templates opgesteld. Onze webdesigner kiest voor het Drupal CMS systeem omwille van haar betrouwbaarheid, grote up-to-date verzameling aan functionele modules en flexibele uitbreidbaarheid. Drupal wordt door onze webdesigner volledig op maat geconfigureerd en intern aangepast zowel op functioneel, technisch als grafisch vlak. </li></ul><ul><li>Met het CMS kunnen teksten, foto's en tabellen eenvoudig door de FARO toegevoegd worden via een gebruiksvriendelijke interface met invulvelden. De TinyMCE teksteditor (stijl Word) laat toe woorden vetjes of cursief te plaatsen, links en tabellen in te voegen, lijsten op te maken, ... Uit de meer dan 50 mogelijke opmaak -en invoegopties wordt de selectie gemaakt die voor dit project nuttig is. Pagina's kunnen ingekort als teaser op de homepage verschijnen, revisies kunnen bijgehouden worden. Diverse bestandstypes kunnen als bijlage aan de pagina toegevoegd worden via een ingebouwd upload systeem. </li></ul><ul><li>De functionaliteiten die tijdens de voorbereidende fase werden geïdentificeerd worden in detail uitgewerkt. Diverse modules worden geinstalleerd, geconfigureerd en op maat geprogrammeerd. </li></ul><ul><li>Er worden steeds inspanningen geleverd om de website hoog te doen verschijnen in zoekmachines (SEO) , dit zowel op het vlak van code, url als interne meta-data. Het CMS systeem wordt geprogrammeerd om een groot deel van de optimalisatie automatisch uit te voeren. Zoekmachinevriendelijke webadressen en metadata worden bijvoorbeeld automatisch met sleutelwoorden gevuld. Daarnaast is een handmatige fine-tuning van meta-data en andere belangrijke elementen mogelijk. </li></ul><ul><li>Wij beschouwen het analyseren van de bezoekers van de site als heel belangrijk, niet alleen op het vlak van marketing en SEO maar ook voor het controleren van gebruiksvriendelijkheid en toegankelijkheid van de site. Naast de uitgebreide bezoekersstatistieken van Google Analytics voorziet het Drupal CMS systeem ook in interne statistieken . </li></ul><ul><li>= > Wordt opgeleverd: werkende website online te bekijken op testserver, klaar voor de testfase </li></ul>

22.
Website bouwen: Test fase(4) <ul><li>Het testteam voert testen uit van functionaliteit, compatibiliteit & usability . Via webanalytics en de server logs worden ook de interne statistieken van de testacties bestudeerd. Het kern testteam kan verruimd worden met bijkomende personeelsleden uit de organisatie en (indien mogelijk) leden. Het testteam kan op elk ogenblik feedback geven op een bepaalde pagina of functionaliteit via een online reactiesysteem onderaan elke pagina. </li></ul><ul><li>Interactie : Formulieren, pers -en nieuwsberichtensysteem worden grondig getest. Gebroken links (zowel intern als extern) worden opgespoort via een automatische linkchecker. </li></ul><ul><li>= > Wordt opgeleverd: werkende website met aanpassingen van de testfase erin verwerkt </li></ul>

23.
Website bouwen: Lancering(5) <ul><li>De website wordt online verhuisd van de testlocatie naar haar definitief adres . </li></ul><ul><li>Diverse maatregelen worden genomen om de laadsnelheid van de pagina's te verhogen. (caching) </li></ul><ul><li>Eindtest na overdracht naar definitieve serverlokatie en urls. </li></ul><ul><li>= > Wordt opgeleverd: werkende website op definief webadres </li></ul>

25.
Web 2.0?

26.
Slide.com

27.
SlideShare.com

28.
Google kaart

29.
Streaming video

30.
Blog

31.
Blog van personeel

32.
RSS

33.
Tag cloud

34.
Design

35.
E-mail / Print

36.
Zoeken

37.
Search Engine Optimalisatie (SEO)

38.
Google Analytics

39.
Nedstat teller

40.
2005: Nedstat teller <ul><li>“ Webstats4U is een 100% GRATIS versie voor alle webmasters. Om onderhoud, hosting, nieuwe ontwikkelingen en om de beste teller ter wereld gratis te kunnen blijven aanbieden accepteert Webstat4U advertenties . Deze voorwaarden worden genoemd in de Algemene Voorwaarden ( http://www.webstats4u.com/terms/ )en zijn tevens gecommuniceerd op de eerste pagina van de rapportage site als wel in onze nieuwsbrief aan alle webmasters in augustus en september 2005. Deze advertentie sponsorschappen zullen van tijd tot tijd verschijnen en kunnen als een pop-under of slide-in flash formaat verschijnen , maar er zullen zeker geen banners, buttons of links rechtstreeks uitgevoerd worden op uw website. … </li></ul><ul><li>Wanneer u verder geen gebruik wilt maken van onze GRATIS Webstats4U service in ruil voor advertenties kunt u uiteraard altijd overstappen naar de betaalde versie van Nedstat ( http:// www.nedstat.com ). “ </li></ul>

41.
Backup plan -> offline mappenboom