Een eenvoudige website maken

Tijl Vereenooghe

Overzicht workshop

• Algemene inleiding• Aan de slag met weebly.com• Aan de slag met Wordpress

3 grote mogelijkheden

• HTML-editor• Gehoste oplossing

• Weebly.com• Blogger.com• Wordpress.com

• Content Management System (CMS)• Joomla• Drupal• Pseudo-CMS: Wordpress

Enkele voorbeelden

• HTML: Hoboken – Kasterlee – Merksem – Olmen • Gehost:

• Google Sites: Willebroek

• CMS:• Joomla: Baarle-Hertog – Turnhout – Walem

• Drupal: Boom

• Wordpress: Beerse

Te vermijden

• Frames: Deurne - Merksplas• Tekst als afbeeldingen: Brasschaat• Seniorennet: Ekeren - Grobbendonk• Bloggen.be: Hemiksem - Rijmenam

• Te veel info: Duffel• Advertenties: Edegem• Bewegende tekst: Berchem - Hombeek• Homepagina die enkel doorverwijst: Klein-Brabant• Muziek: Herentals - Retie• Te uitgebreide navigatie: Ravels

Lay-out

Uiteraard is de lay-out van je website van groot belang. Een aantrekkelijk design geeft een professionele indruk bezoekers aantrekken, terwijl een minder geslaagde lay-out misschien net bezoekers afstoot. Hierbij speelt je eigen creativiteit natuurlijk een belangrijke rol.

Lay-outEnkele tips

• Vermijd onnodig geluid op je website. Niemand zit te wachten op een muziekje wanneer hij een website opent.

• Vermijd het gebruik van bewegende ‘gif’- of ‘flash’-animaties. Dit zorgt voor een nodeloze vertraging bij het inladen van je website.

• Een aparte intro-pagina (bijvoorbeeld met het logo van de vereniging en een link om door te klikken naar de website) is weinig zinvol

• Vermijd schreeuwerige kleuren en kies voor een elegant lettertype• Vermijd te veel informatie op één pagina. Zorg dat ieder onderwerp zijn

eigen pagina heeft. Dat is ook makkelijker om naar te verwijzen.

Lay-outEnkele tips

• Bied documenten aan in een standaard-formaat, bijvoorbeeld een pdf-document in plaats van een word-document.

• Hou er rekening mee dat de meeste internetgebruikers websites alleen diagonaal lezen. Plaats je langere artikels op je website, zorg er dan voor dat deze ook gemakkelijk af te printen zijn.

• Zorg ervoor dat de contactgegevens van je vereniging duidelijk zijn opgenomen op de website

• Test je website uit in verschillende browsers. Niet iedereen gebruikt Internet Explorer!

• Vermeld op de website wanneer deze voor het laatst geüpdatet werd

Homepage ‘usability’

Een gebruiksvriendelijke homepage draait om duidelijkheid en snelheid. Het belangrijkste is dat bezoekers er snel hun weg vinden. Een mooi design maakt je website nog geen winnaar. Bekijk je homepage zo nu en dan alsof je hem voor het eerst bezoekt. Wat valt je op? En vooral: wat niet? Beschouw je homepage als de etalage van je website: dé kans om je bezoekers te laten zien wat je in huis hebt, en hen over de drempel te trekken.

www.useit.com/homepageusability/guidelines.html

Homepage ‘usability’

• Maak direct duidelijk wat je organisatie doet en wat je op de website kunt

• Maak de belangrijkste taken van bezoekers direct vanaf de homepage bereikbaar

• Zorg voor een opvallende en zichtbare zoekfunctie• Denk na over de navigatie op je homepage

Navigatie

HTML-editors

• HTML = HyperText Markup Language

• Adobe Dreamweaver• Frontpage, nu: Microsoft Web Expression

• Nadelen:• Kostprijs

• Meer voor gevorderden

HTML-editors

Open source :

www.kompozer.net

Vergelijking HTML-editors:

http://en.wikipedia.org/wiki/Comparison_of_HTML_editors

Toch enkele veel voorkomende html-codes

<b>bold</b>

<u>underline</u>

<i>italic</i>

 

voor een link: <a href="http://www.heemkunde-vlaanderen.be" target="new">Heemkunde Vlaanderen</a>

 

voor een e-mailadres: <a href="mailto:info@heemkunde-vlaanderen.be">Heemkunde

Vlaanderen</a>

Alternatieven ‘gehoste’ websites

http://www.blogspot.com

http://www.wordpress.com

http://www.tumblr.com

http://sites.google.com

Weebly.com

• Met Weebly bouw je – dankzij een eenvoudig drag-and-drop systeem – in een handomdraai een mooie site.

• De dienst is volledig gratis, inclusief webruimte

Weebly.com

• Voorbeeld: www.heemkringosschaert.be

WeeblyAanmaken website

WeeblyTabs

• Elements are the details you want to appear on your web page(s):   Text, Titles, Pictures, etc. 

• Designs are the Graphics - color, placement of menus, etc. that affect the overall appearance of your web site.

• Pages are like pages in a book. Each 'page' on a web site is a new blank screen that you can fill.

• Settings have to do with the whole site. In the beginning, you can just accept the defaults.

WeeblyKies een lay-out

WeeblyVoeg elementen toe

WeeblyVoeg een afbeelding toe

WeeblyVoeg een nieuwe pagina toe

WeeblyBewerk de site

Wordpress volgens Wikipedia

• WordPress is vrije weblog-software, die onder de GPL-licentie wordt gepubliceerd. WordPress wordt door een flinke groep ontwikkelaars ondersteund. Veel weblogs maken inmiddels gebruik van WordPress.

• WordPress maakt gebruik van de PHP-programmeertaal. Alle content wordt opgeslagen in een MySQL-database.

• Door middel van thema's (themes) of zelfgemaakte template files is de opmaak van pagina's aan te passen, zodat er geen gebruik hoeft te worden gemaakt van de standaard vormgeving die WordPress levert. Ook zijn er talloze plugins beschikbaar die allerlei functies aan het weblog toevoegen.

• WordPress-gebruikers wordt verzocht onderaan pagina's te linken naar de website van WordPress.

Wordpress

• Ontstaan als blog-software…

Wordpress

• … maar ook geschikt als CMS voor een ‘gewone’ website

Wordpress: praktischHet ‘dashboard’

Wordpress: praktisch

Wordpress: praktisch

Wordpress: praktisch

Wordpress themes

Wordpress themes

Wordpress themes

http://wordpress.org/extend/themes/

Wordpress themes

http://weblogtoolscollection.com/

Voorbeelden:

http://www.webdesignlessons.com/redsteel-wordpress-theme/

http://tntbase.com/wordpress-themes/straight-blue/

http://xtc360.com/blog/2010/04/homage-free-wordpress-theme/

http://www.dynamicwp.net/free-themes/halfcircle-theme/

Wordpress themesNederlandstalig

http://www.wordpressthemes.nl/

Wordpress plugins

http://wordpress.org/extend/plugins/

RSS

• RSS is de afkorting van ‘Really Simple Syndication’. RSS wordt vooral gebruikt bij weblogs, fora of nieuwssites en geeft de bezoekers de mogelijkheid om op een eenvoudige manier steeds op de hoogte te blijven van de recentste artikels en berichten die werden toegevoegd op een website. Deze manier om een website te volgen wordt steeds belangrijker en alle belangrijke nieuws-websites hebben intussen zo’n RSS-systeem.

• RSS-feeds kunnen gevolgd worden met speciale RSS-software, maar nog gemakkelijker is het om de updates gewoon te volgen via je standaard-browser (zoals Internet Explorer of Mozilla Firefox), of via je email-programma. De meest gangbare browsers ondersteunen intussen allemaal RSS en bevatten een ingebouwde RSS-lezer. Ook op sommige gsm’s zijn intussen al RSS-lezers te vinden.

• RSS kan ook gebruikt worden om nieuws van andere websites te ‘aggregeren’. Op deze manier kunnen bijvoorbeeld de titels van de nieuwste artikels op een bepaalde website ook automatisch verschijnen op een andere website.

Contact

Tijl Vereenooghe

Heemkunde Vlaanderen

Huis De Zalm

Zoutwerf 5

2800 Mechelen

tijl.vereenooghe@heemkunde-vlaanderen.be