Een eenvoudige website maken

39
Een eenvoudige website maken Tijl Vereenooghe

description

Een eenvoudige website maken voor je heemkundige kring of museum (Heist-op-den-Berg, 8 mei 2010).

Transcript of Een eenvoudige website maken

Page 1: Een eenvoudige website maken

Een eenvoudige website maken

Tijl Vereenooghe

Page 2: Een eenvoudige website maken

Overzicht workshop

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

Page 3: Een eenvoudige website maken

3 grote mogelijkheden

• HTML-editor• Gehoste oplossing

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

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

Page 4: Een eenvoudige website maken

Enkele voorbeelden

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

• Google Sites: Willebroek

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

• Drupal: Boom

• Wordpress: Beerse

Page 5: Een eenvoudige website maken

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

Page 6: Een eenvoudige website maken

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.

Page 7: Een eenvoudige website maken

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.

Page 8: Een eenvoudige website maken

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

Page 9: Een eenvoudige website maken

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

Page 10: Een eenvoudige website maken

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

Page 11: Een eenvoudige website maken

Navigatie

Page 12: Een eenvoudige website maken

HTML-editors

• HTML = HyperText Markup Language

• Adobe Dreamweaver• Frontpage, nu: Microsoft Web Expression

• Nadelen:• Kostprijs

• Meer voor gevorderden

Page 13: Een eenvoudige website maken

HTML-editors

Open source :

www.kompozer.net

Vergelijking HTML-editors:

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

Page 14: Een eenvoudige website maken

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:[email protected]">Heemkunde

Vlaanderen</a>

Page 15: Een eenvoudige website maken

Alternatieven ‘gehoste’ websites

http://www.blogspot.com

http://www.wordpress.com

http://www.tumblr.com

http://sites.google.com

Page 16: Een eenvoudige website maken

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

Page 17: Een eenvoudige website maken

Weebly.com

• Voorbeeld: www.heemkringosschaert.be

Page 18: Een eenvoudige website maken

WeeblyAanmaken website

Page 19: Een eenvoudige website maken

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.

Page 20: Een eenvoudige website maken

WeeblyKies een lay-out

Page 21: Een eenvoudige website maken

WeeblyVoeg elementen toe

Page 22: Een eenvoudige website maken

WeeblyVoeg een afbeelding toe

Page 23: Een eenvoudige website maken

WeeblyVoeg een nieuwe pagina toe

Page 24: Een eenvoudige website maken

WeeblyBewerk de site

Page 25: Een eenvoudige website maken

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.

Page 26: Een eenvoudige website maken

Wordpress

• Ontstaan als blog-software…

Page 27: Een eenvoudige website maken

Wordpress

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

Page 28: Een eenvoudige website maken

Wordpress: praktischHet ‘dashboard’

Page 29: Een eenvoudige website maken

Wordpress: praktisch

Page 30: Een eenvoudige website maken

Wordpress: praktisch

Page 31: Een eenvoudige website maken

Wordpress: praktisch

Page 32: Een eenvoudige website maken

Wordpress themes

Page 33: Een eenvoudige website maken

Wordpress themes

Page 34: Een eenvoudige website maken

Wordpress themes

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

Page 35: Een eenvoudige website maken

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/

Page 36: Een eenvoudige website maken

Wordpress themesNederlandstalig

http://www.wordpressthemes.nl/

Page 37: Een eenvoudige website maken

Wordpress plugins

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

Page 38: Een eenvoudige website maken

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.

Page 39: Een eenvoudige website maken

Contact

Tijl Vereenooghe

Heemkunde Vlaanderen

Huis De Zalm

Zoutwerf 5

2800 Mechelen

[email protected]