Een eenvoudige website maken Tijl Vereenooghe
Overzicht workshop <ul><li>Algemene inleiding </li></ul><ul><li>Aan de slag met weebly.com </li></ul><ul><li>Aan de slag m...
3 grote mogelijkheden <ul><li>HTML-editor </li></ul><ul><li>Gehoste oplossing </li></ul><ul><ul><li>Weebly.com </li></ul><...
Enkele voorbeelden <ul><li>HTML:  Hoboken  –  Kasterlee  –  Merksem  –  Olmen   </li></ul><ul><li>Gehost: </li></ul><ul><u...
Te vermijden <ul><li>Frames:  Deurne  -  Merksplas </li></ul><ul><li>Tekst als afbeeldingen:  Brasschaat </li></ul><ul><ul...
Lay-out <ul><li>Uiteraard is de lay-out van je website van groot belang. Een aantrekkelijk design geeft een professionele ...
Lay-out Enkele tips <ul><li>Vermijd onnodig geluid op je website. Niemand zit te wachten op een muziekje wanneer hij een w...
Lay-out Enkele tips <ul><li>Bied documenten aan in een standaard-formaat, bijvoorbeeld een pdf-document in plaats van een ...
Homepage ‘usability’ <ul><li>Een gebruiksvriendelijke homepage draait om duidelijkheid en snelheid. Het belangrijkste is d...
Homepage ‘usability’ <ul><li>Maak direct duidelijk wat je organisatie doet en wat je op de website kunt </li></ul><ul><li>...
Navigatie
HTML-editors <ul><li>HTML = HyperText Markup Language </li></ul><ul><li>Adobe Dreamweaver </li></ul><ul><li>Frontpage, nu:...
HTML-editors <ul><li>Open source : </li></ul><ul><li>www.kompozer.net </li></ul><ul><li>Vergelijking HTML-editors: </li></...
Toch enkele veel voorkomende html-codes  <ul><li><b> bold </b> </li></ul><ul><li><u> underline </u> </li></ul><ul><li><i> ...
Alternatieven ‘gehoste’ websites <ul><li>http://www.blogspot.com </li></ul><ul><li>http://www.wordpress.com </li></ul><ul>...
Weebly.com <ul><li>Met Weebly bouw je – dankzij een eenvoudig drag-and-drop systeem – in een handomdraai een mooie site.  ...
Weebly.com <ul><li>Voorbeeld:  www.heemkringosschaert.be </li></ul>
Weebly Aanmaken website
Weebly Tabs <ul><li>Elements  are the  details  you want to appear on your web page(s):   Text, Titles, Pictures, etc.   <...
Weebly Kies een lay-out
Weebly Voeg elementen toe
Weebly Voeg een afbeelding toe
Weebly Voeg een nieuwe pagina toe
Weebly Bewerk de site
Wordpress volgens Wikipedia <ul><li>WordPress is vrije weblog-software, die onder de GPL-licentie wordt gepubliceerd. Word...
Wordpress <ul><li>Ontstaan als blog-software… </li></ul>
Wordpress <ul><li>…  maar ook geschikt als CMS voor een ‘gewone’ website </li></ul>
Wordpress: praktisch Het ‘dashboard’
Wordpress: praktisch
Wordpress: praktisch
Wordpress: praktisch
Wordpress themes
Wordpress themes
Wordpress themes <ul><li>http://wordpress.org/extend/themes/ </li></ul>
Wordpress themes <ul><li>http://weblogtoolscollection.com/ </li></ul><ul><li>V oorbeelden: </li></ul><ul><li>http://www.we...
Wordpress themes Nederlandstalig <ul><li>http://www.wordpressthemes.nl/ </li></ul>
Wordpress plugins http://wordpress.org/extend/plugins/
RSS <ul><li>RSS is de afkorting van ‘Really Simple Syndication’. RSS wordt vooral gebruikt bij weblogs, fora of nieuwssite...
Contact <ul><li>Tijl Vereenooghe </li></ul><ul><li>Heemkunde Vlaanderen </li></ul><ul><li>Huis De Zalm </li></ul><ul><li>Z...
Upcoming SlideShare
Loading in …5
×

Een eenvoudige website maken

2,102 views
2,019 views

Published on

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

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

  • Be the first to like this

No Downloads
Views
Total views
2,102
On SlideShare
0
From Embeds
0
Number of Embeds
12
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Een eenvoudige website maken

  1. 1. Een eenvoudige website maken Tijl Vereenooghe
  2. 2. Overzicht workshop <ul><li>Algemene inleiding </li></ul><ul><li>Aan de slag met weebly.com </li></ul><ul><li>Aan de slag met Wordpress </li></ul>
  3. 3. 3 grote mogelijkheden <ul><li>HTML-editor </li></ul><ul><li>Gehoste oplossing </li></ul><ul><ul><li>Weebly.com </li></ul></ul><ul><ul><li>Blogger.com </li></ul></ul><ul><ul><li>Wordpress.com </li></ul></ul><ul><li>Content Management System (CMS) </li></ul><ul><ul><li>Joomla </li></ul></ul><ul><ul><li>Drupal </li></ul></ul><ul><ul><li>Pseudo-CMS: Wordpress </li></ul></ul>
  4. 4. Enkele voorbeelden <ul><li>HTML: Hoboken – Kasterlee – Merksem – Olmen </li></ul><ul><li>Gehost: </li></ul><ul><ul><li>Google Sites: Willebroek </li></ul></ul><ul><li>CMS: </li></ul><ul><ul><li>Joomla: Baarle-Hertog – Turnhout – Walem </li></ul></ul><ul><ul><li>Drupal: Boom </li></ul></ul><ul><ul><li>Wordpress: Beerse </li></ul></ul>
  5. 5. Te vermijden <ul><li>Frames: Deurne - Merksplas </li></ul><ul><li>Tekst als afbeeldingen: Brasschaat </li></ul><ul><ul><li>Seniorennet: Ekeren - Grobbendonk </li></ul></ul><ul><ul><li>Bloggen.be: Hemiksem - Rijmenam </li></ul></ul><ul><li>Te veel info: Duffel </li></ul><ul><li>Advertenties: Edegem </li></ul><ul><li>Bewegende tekst: Berchem - Hombeek </li></ul><ul><li>Homepagina die enkel doorverwijst: Klein-Brabant </li></ul><ul><li>Muziek: Herentals - Retie </li></ul><ul><li>Te uitgebreide navigatie: Ravels </li></ul>
  6. 6. Lay-out <ul><li>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. </li></ul>
  7. 7. Lay-out Enkele tips <ul><li>Vermijd onnodig geluid op je website. Niemand zit te wachten op een muziekje wanneer hij een website opent. </li></ul><ul><li>Vermijd het gebruik van bewegende ‘gif’- of ‘flash’-animaties. Dit zorgt voor een nodeloze vertraging bij het inladen van je website. </li></ul><ul><li>Een aparte intro-pagina (bijvoorbeeld met het logo van de vereniging en een link om door te klikken naar de website) is weinig zinvol </li></ul><ul><li>Vermijd schreeuwerige kleuren en kies voor een elegant lettertype </li></ul><ul><li>Vermijd te veel informatie op één pagina. Zorg dat ieder onderwerp zijn eigen pagina heeft. Dat is ook makkelijker om naar te verwijzen. </li></ul>
  8. 8. Lay-out Enkele tips <ul><li>Bied documenten aan in een standaard-formaat, bijvoorbeeld een pdf-document in plaats van een word-document. </li></ul><ul><li>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. </li></ul><ul><li>Zorg ervoor dat de contactgegevens van je vereniging duidelijk zijn opgenomen op de website </li></ul><ul><li>Test je website uit in verschillende browsers. Niet iedereen gebruikt Internet Explorer! </li></ul><ul><li>Vermeld op de website wanneer deze voor het laatst geüpdatet werd </li></ul>
  9. 9. Homepage ‘usability’ <ul><li>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. </li></ul><ul><li>www.useit.com/homepageusability/guidelines.html </li></ul>
  10. 10. Homepage ‘usability’ <ul><li>Maak direct duidelijk wat je organisatie doet en wat je op de website kunt </li></ul><ul><li>Maak de belangrijkste taken van bezoekers direct vanaf de homepage bereikbaar </li></ul><ul><li>Zorg voor een opvallende en zichtbare zoekfunctie </li></ul><ul><li>Denk na over de navigatie op je homepage </li></ul>
  11. 11. Navigatie
  12. 12. HTML-editors <ul><li>HTML = HyperText Markup Language </li></ul><ul><li>Adobe Dreamweaver </li></ul><ul><li>Frontpage, nu: Microsoft Web Expression </li></ul><ul><li>Nadelen: </li></ul><ul><ul><li>Kostprijs </li></ul></ul><ul><ul><li>Meer voor gevorderden </li></ul></ul>
  13. 13. HTML-editors <ul><li>Open source : </li></ul><ul><li>www.kompozer.net </li></ul><ul><li>Vergelijking HTML-editors: </li></ul><ul><li>http://en.wikipedia.org/wiki/Comparison_of_HTML_editors </li></ul>
  14. 14. Toch enkele veel voorkomende html-codes <ul><li><b> bold </b> </li></ul><ul><li><u> underline </u> </li></ul><ul><li><i> italic </i> </li></ul><ul><li>  </li></ul><ul><li>voor een link : <a href=&quot;http://www.heemkunde-vlaanderen.be&quot; target=&quot;new&quot;>Heemkunde Vlaanderen</a> </li></ul><ul><li>  </li></ul><ul><li>voor een e-mailadres : <a href=&quot; mailto:info@heemkunde-vlaanderen.be &quot;>Heemkunde Vlaanderen</a> </li></ul>
  15. 15. Alternatieven ‘gehoste’ websites <ul><li>http://www.blogspot.com </li></ul><ul><li>http://www.wordpress.com </li></ul><ul><li>http://www.tumblr.com </li></ul><ul><li>http://sites.google.com </li></ul>
  16. 16. Weebly.com <ul><li>Met Weebly bouw je – dankzij een eenvoudig drag-and-drop systeem – in een handomdraai een mooie site. </li></ul><ul><li>De dienst is volledig gratis, inclusief webruimte </li></ul>
  17. 17. Weebly.com <ul><li>Voorbeeld: www.heemkringosschaert.be </li></ul>
  18. 18. Weebly Aanmaken website
  19. 19. Weebly Tabs <ul><li>Elements are the details you want to appear on your web page(s):   Text, Titles, Pictures, etc.  </li></ul><ul><li>Designs are the Graphics - color, placement of menus, etc. that affect the overall appearance of your web site. </li></ul><ul><li>Pages are like pages in a book. Each 'page' on a web site is a new blank screen that you can fill. </li></ul><ul><li>Settings have to do with the whole site . In the beginning, you can just accept the defaults. </li></ul>
  20. 20. Weebly Kies een lay-out
  21. 21. Weebly Voeg elementen toe
  22. 22. Weebly Voeg een afbeelding toe
  23. 23. Weebly Voeg een nieuwe pagina toe
  24. 24. Weebly Bewerk de site
  25. 25. Wordpress volgens Wikipedia <ul><li>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. </li></ul><ul><li>WordPress maakt gebruik van de PHP-programmeertaal. Alle content wordt opgeslagen in een MySQL-database. </li></ul><ul><li>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. </li></ul><ul><li>WordPress-gebruikers wordt verzocht onderaan pagina's te linken naar de website van WordPress. </li></ul>
  26. 26. Wordpress <ul><li>Ontstaan als blog-software… </li></ul>
  27. 27. Wordpress <ul><li>… maar ook geschikt als CMS voor een ‘gewone’ website </li></ul>
  28. 28. Wordpress: praktisch Het ‘dashboard’
  29. 29. Wordpress: praktisch
  30. 30. Wordpress: praktisch
  31. 31. Wordpress: praktisch
  32. 32. Wordpress themes
  33. 33. Wordpress themes
  34. 34. Wordpress themes <ul><li>http://wordpress.org/extend/themes/ </li></ul>
  35. 35. Wordpress themes <ul><li>http://weblogtoolscollection.com/ </li></ul><ul><li>V oorbeelden: </li></ul><ul><li>http://www.webdesignlessons.com/redsteel-wordpress-theme/ </li></ul><ul><li>http://tntbase.com/wordpress-themes/straight-blue/ </li></ul><ul><li>http://xtc360.com/blog/2010/04/homage-free-wordpress-theme/ </li></ul><ul><li>http://www.dynamicwp.net/free-themes/halfcircle-theme/ </li></ul>
  36. 36. Wordpress themes Nederlandstalig <ul><li>http://www.wordpressthemes.nl/ </li></ul>
  37. 37. Wordpress plugins http://wordpress.org/extend/plugins/
  38. 38. RSS <ul><li>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. </li></ul><ul><li>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. </li></ul><ul><li>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. </li></ul>
  39. 39. Contact <ul><li>Tijl Vereenooghe </li></ul><ul><li>Heemkunde Vlaanderen </li></ul><ul><li>Huis De Zalm </li></ul><ul><li>Zoutwerf 5 </li></ul><ul><li>2800 Mechelen </li></ul><ul><li>[email_address] </li></ul>

×