Een eenvoudige website maken
-
Upload
heemkunde-vlaanderen -
Category
Technology
-
view
2.400 -
download
2
description
Transcript of Een eenvoudige website maken
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:[email protected]">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