WEBDESIGN met Wordpress
CVO Tervuren-Hoeilaart 2015-2016 sem 1 1
Doelstellingen van de cursus Wat je na deze cursus kan:
(de structuur van) een webpagina ontwerpen basiselementen voor opmaak gebruiken beeld, geluid, video en animatie invoegen hyperlinks maken formulieren ontwerpen en gebruiken plugins en widgets gebruiken scripts gebruiken een weblog of website onderhouden, beveiligen en publiceren
2
Hoe gaan we het doen?
Algemene inleiding: Internet , HTML, Webdesign
Theorie: webdesign Praktijk: Wordpress
Opdracht(en) eigen aan het lesthema Eigen webproject met verwerking lesthema(‘s)
3
Hoofdstuk 1: INLEIDING Internet HTML Webdesign
4
INTERNET Technische basis Schakeltechniek
Internet: “kind van Amerikaanse Defensie” Waarom?
Pakketgeschakeld netwerk ( Circuitgeschakeld)
Internet: open netwerkarchitectuur
(netwerk)protocol: communicatiespelregels tussen computers (verbinding, transport, gegevensinterpretatie) Internet: platformonafhankelijk dankzij TCP/IP
Kunnen Macintosh-computers en PC’s op het Internet met elkaar communiceren?
5
INTERNET Technische basis Addressering op Internet
Communicatie met het Internet: elk domein heeft een IP-adres nodig
IP-adres
syntax 195.21.129.34
195.21=domein 129.34=specifieke computer binnen het domein (=host)
lastig te onthouden ->woordelijke naamgeving
6
INTERNET Technische basis (Adressering op Internet)
Naamgeving
wereldwijd uniek
interNIC coördineert naamgeving Systematische naamopbouw www.teddy.com
.com = landcode of sectorcode (.be .edu .gov …) teddy.com = verwijst naar het domein www = computer binnen het domein (webserver) Zelfs elk bestand heeft dus een unieke locatie! www.teddy.com/catatlogus/nachtberen/art1234.jpg
wereldwijd bekend
dankzij Domeinnaamservers (DNS-servers)
Kun je via het Internet nog een weblocatie bereiken als de DNS ervan is uitgevallen? (zie ook centralops.net) 7
INTERNET Diensten op het Internet
Diensten
webpagina’s (zie verder) bestandsoverdracht computerbediening op afstand : telnet,… elektronische post
Dienstenoverkoepelende adressering: URL
aanduiding dienstenprotocol (=communicatieprotocol)
http: webpagina’s ftp: bestandsoverdracht
een domeinnaam eventueel een bestandslocatie (padnaam en bestandsnaam)
vb: www.teddy.com/catalogus/nachtberen/art1234.jpg
8
INTERNET HET WORLD WIDE WEB Netwerkgebaseerde hypertekst
Hypertekst (eerder hypermedia): elektronische documenten die onderling met elkaar verbonden zijn middels verwijzingen.
Webserver->-> web-cliënt (bvb. IE) WORLD WIDE WEB
Web site = internetlocatie = verzameling webpagina’s van een bepaald domein
welkompagina = home page, startpagina
Internet: geen hiërarchie, dus aanwending van
zoekmachines rubrieksystemen
Zijn het Internet en het world wide web synoniemen? 9
HTML Algemeen
Geboortejaar: 1990 (CERN) HTML: Hypertext Markup Language
protocol: http opmaaktaal die de afzonderlijke bestanddelen van een webpagina beschrijft voordeel: eenvoudige en handig (beginners en gevorderden!) nadelen en oplossingen:
verschillen tussen verschillende browsers (NetscapeMS) standaardisering: www.w3c.org (HTML1.0 > 2.0 > 3.2 > 4.01 > 5.0 ) uitgekiende opmaakopdrachten ontbreken stijlbladen initieel niet bedoeld voor multimedia en continu binnenstromende informatie uitbreidingen HTML, insteekmodules (platformafhankelijk->onafhankelijk), scripting, Java, Active X, …
Nieuwe invalshoek: XHTML
10
XHTML De toekomst
XHTML EXtensible HyperText Markup Language opvolger van HTML 4.01 een mix tussen HTML en XML(Extensible Markup Language) strengere en schonere versie van HTML
11
HTML Webpagina’s maken en bewerken
Kladblok HTML-editors: automatiseren van het coderen WYSIWYG-editors (Frontpage, …) Andere: Word, MS Office (bijv. Powerpoint,…)
Voordelen WYSIWIG intuïtieve grafische gebruikersinterface resultaat is direct zichtbaar controleert de geldigheid van de code geldigheid van links en verwijzigingen worden automatisch gecontroleerd
12
HTML HTML-code Structuur van de opdrachten
Tags in paren
Deze tekst wordt cursief weergegeven.Vanaf hier verschijnt de tekst weer normaal.
Deze tekst wordt cursief weergegeven. Vanaf hier verschijnt de tekst weer normaal.
Uitzondering: alleenstaande tags Hier is er geen sprake van een
afsluitende tag. Hier is er geen sprake van een afsluitende tag.
Nesting
Deze koptekst is op deze positie cursief weergegeven.
Deze koptekst is op deze positie cursief weergegeven.
Twee basistypes -
tekst: bijv. … ankers: … (hyperlinks)
13
HTML HTML-code
Opbouw van opdrachtregels
Tags zijn niet hoofdlettergevoelig
Deze tekst wordt cursief weergegeven. is hetzelfde als
Deze tekst wordt cursief weergegeven.
Een of meerdere opdracht regels Deze regel bevat meerdere tags
is hetzelfde als Deze regel bevat meerdere tags
14
HTML HTML-code
Waarden toekennen aan tags Deze koptekst is rechts uitgelijnd
Deze koptekst is rechts uitgelijnd.
ALIGN is de opdracht RIGHT is het sleutelwoord OPGELET: Gebruik geen spaties (mogelijke browserproblemen)
Bestandsnamen moeten tussen dubbele aanhalingstekens 
15
HTML HTML-code
Basis van een webpagina Drie containers Titel van de webpagina Inhoud van de pagina 16
HTML HTML-lessen
www.handleidinghtml.nl
www.homepagemaken.nl/htmlcursus/lessenoverzicht.php
17
Webdesign 3 aspecten webdesign
Technische” benadering
Cognitief-ergonomische benadering
HTML, kennis (WYSIWYG) editor(s), CMS systemen navigatie, schermindeling, tekstopmaak
Artistieke benadering
kleurgebruik, vormgeving, aantrekkelijkheid,…
18
Webdesign De 10 geboden 1.
Bereid eerst een structuur voor
2.
Zet waardevolle inhoud op de pagina’s Test de site vooraf en tijdens De eerste indruk is (alles)bepalend Gebruik technologie met verstand (keuze !!!!) Bied keuzes, bewust en onbewust Design met mate en intelligentie Een heldere en consistente navigatie Webdesign is dynamisch en proactief En vooral niet…
3. 4. 5. 6. 7. 8. 9. 10.
bijv.: vermijd drukke achtergronden die de tekst in de voorgrond moeilijk leesbaar maken, …
19
Bereid eerst een structuur voor
Ontwerp site
stroomdiagram van inhoud + navigatie Bedrijf X
Wie zijn we ?
Onze produkten
Contacteer ons
Verdelers gezocht
braadpannen ketels
steakmessen
20
Zet waardevolle inhoud op de pagina’s !
Informatieverzameling
projectmanager verzamelt digitale informatie indien groot project dan kan men werken met paginaspecimens gegevens worden éénduidig en georganiseerd verzameld Wat is mijn publiek?(kinderen,sporters…)
21
Test de site vooraf en tijdens
taalfouten ?(laten nalezen!) alle links werken ? schikking ok ? algemeen uitzicht ? weergave op populaire browsers ?
22
Gebruik technologie met verstand
zijn de programma’s om de site te maken betaalbaar ? zijn ze handig in gebruik, ingewikkeld ? zijn ze duurzaam, zullen ze binnen x jaar nog bestaan ? zullen meerdere personen inhoud toevoegen aan de site ?
23
Bied keuzes, bewust en onbewust
alle info toegankelijk maken vanaf de homepagina (bvb. voorgerechten,hoofdschotels, nagerechten, tips & trucs…) zorg voor overzichtelijkheid
24
Design met mate en intelligentie
niet teveel afleidingen (muziek…) een ontwerp kan snel saai worden kostprijs van design ? makkelijk wijzigbaar ?
25
Een heldere en consistente navigatie
gelijkvormige menu’s zelfde terugkerende structuur eventueel een “sitemap” vb. www.cvoth.be
26
Webdesign is dynamisch en proactief
regelmatig up to date houden! (bv. datums, opendeurdag… ) nieuwe foto’s, berichten… anticiperen : bv. opendeurdag reeds op voorhand op de site !
27
En vooral niet…
http://thebiguglywebsite.com
http://jayj.dk/grim/
http://www.angelfire.com/uglinesstothemax/index.ht ml
28
Keuze van tool om site te maken 3 mogelijkheden :
1.
Met HTML, CSS zelf schrijven
2.
Met WYSIWYG-editor maken
3.
Met CMS-systeem maken
29
Met HTML zelf schrijven
Voordelen
vrijer in het bepalen van uiterlijk controle over elk aspect van je website HTML is relatief eenvoudig te leren
Nadelen
er kan veel tijd in gaan zitten HTML is beperkt in mogelijkheden, je moet ook op een goed niveau met CSS, JavaScript en PHP werken
30
Met WYSIWYG-editor maken
Voordelen
geen kennis van HTML nodig je kunt snel online zijn met een eenvoudige website
Nadelen
hebt meestal niet overal invloed op leveren vaak slechtgeschreven code op, of overbodige code
31
Met CMS-systeem maken
Voordelen
Je hoeft geen kennis van HTML te hebben Zeer gebruiksvriendelijk Zowel voor eenvoudige als complexe sites geschikt Snel online Er zijn voor de grote CMS-en veel (gratis) thema's beschikbaar
Nadelen
gebonden aan mogelijkheden en onmogelijkheden van het gekozen CMS regelmatig onderhoud, bvb updaten van het CMS en bijbehorende plugins
32
CMS-systeem kiezen Een overzicht van de top 14 CMS systemen : http://www.cubrid.org/blog/devplatform/comprehensive-overview-of-top-14-contentmanagement-systems/
CMS systemen uittesten :
http://www.opensourcecms.com/
33
Voordelen Wordpress
WordPress is een “gratis” content management systeem (het is ontwikkeld door Matthew Mullenweg, maar wordt door een flinke groep ontwikkelaars ondersteund)
Miljoenen weblogs en websites maken gebruik van WordPress.
Een heel toegankelijk content management systeem (iedereen kan ermee werken). Door middel van Themes (thema’s) is de opmaak van pagina’s aan te passen.Er zijn duizenden gratis WordPress Themes te vinden op het internet Er is een grote “community” aan gebruikers die ervaring en hulp delen
34
Voordelen Wordpress
Er zijn talloze Plugins beschikbaar die allerlei functies aan het weblog toevoegen De scripts en codering van WordPress is erg licht en zorgt dat de website snel laadt WordPress is altijd up-to-date (te houden), beveiligingslekken worden door de community snel gedicht en gelanceerd Als standaard is WordPress ontzettend SEO-vriendelijk en met de juiste Plugins en instellingen, sta je al snel hoog in de zoekmachines
35
Voordelen Wordpress
Er zijn met WordPress heel eenvoudig koppelingen te maken met de sociale media platforms (Facebook, Twitter …) Wordpress volgt de w3c-standaarden (zodat je blog of site op alle browsers (ook in de toekomst) goed zal weergegeven worden
36
Nadelen Wordpress
Beveiliging kan een probleem opleveren -> regelmatig updaten nodig Geen rechtstreekse technische ondersteuning bij Wordpress zelf (wel bij kleine bedrijven die Wordpress ondersteuning bieden) Minder geschikt om toe te passen in heel grote organisaties
37
Officiële Wordpress site Oefening : Bezoek enkele website die met Wordpress gemaakt zijn.
Welke vind je erg geslaagd, welke minder ? Waarom ?
http://wordpress.org/ (doorklikken op Showcase)
Ook : http://nl.wordpress.org (in het Nederlands)
38
Wordpress : 2 mogelijkheden 1.
2.
Op www.wordpress.com een account maken en op de online versie meteen starten Op www.wordpress.org de software downloaden en bij je eigen provider installeren
39
Wordpress.com
Je bent heel snel aan het werk Je hebt geen te grote eisen op vlak van functionaliteiten en design Steeds gratis Vast aan aantal standaard templates (kleine aanpassingen mogelijk), mits betaling toch meer aanpassingen Beperkt aantal plugins te gebruiken Geen eigen plugins mogelijk
40
Wordpress.com
Max 35 gebruikers Video is mits betaling mogelijk Advertenties op je blog/site Overbrengen van je blog of site naar wordpress.org (zelf gehost systeem) naderhand is mogelijk !!
41
Oefening (facultatief)
Ga naar p.18 in het handboek Ga naar nl.wordpress.com maak een gratis account op wordpress.com Kies een goed blogadres (blogadres.wordpress.com) Volg de richtlijnen van het boek Deze account kan dienen om een en ander uit te proberen Wij zullen kiezen voor een eigen installatie van Wordpress (via software op wordpress.org)
42
Wordpress.org
Webserver (provider of eigen server op je PC) Domeinnaam (bvb. cvoth.be) PHP 5.2.4 ondersteuning (of hoger)= server-side scripttaal MySql 5.0 of hoger mod_rewrite Apache-module FTP-client op je PC Fotobewerkingsprogramma Wordpress software (nu 4.3) 43
1ste mogelijkheid: AMPPS webserver op je PC
Waarom ? testdoeleinden Surf naar www.ampps.com Ga naar Downloads (kies Win of Mac OSX) Sla het installatiebestand op Start de installatie en doorloop de standaard stappen Start de webserver (knoppen PHP en MySQL)
50
1ste mogelijkheid: AMPPS webserver op je PC
51
Wordpress installeren op AMPPSserver
Op de ampps server staan vele “installatiescripts” Surf naar: localhost/ampps Klik op Blogs, Wordpress
Klik dan op de blauwe knop Install
52
Wordpress installeren op AMPPSserver
53
Wordpress installeren op AMPPSserver
54
Wordpress installeren op AMPPSserver
55
Wordpress installeren op AMPPSserver
56
2e mogelijkheid :Eigen webserver op je PC: Instantwordpress installeren Ga naar www.instantwp.com Kies Download Now en sla het bestand op waar je de WP-installatie wil gebruiken (bvb. je USB-stick) (Zet nu eventueel even je antivirusprogramma uit) Start het programma InstantWP.exe en kies een map waarin je WP wil installeren klik op de Install knop -> Instant WP wordt geïnstalleerd
57
InstantWP kenmerken
Instant WordPress is volledig “portable” en draait vanuit de map waarin het geïnstalleerd werd. Instant WordPress kan dus op een USB-stick geïnstalleerd worden en draait dan vanop die stick. De map waarin je Instant WordPress installeert kan worden herbenoemd en Instant WordPress zal dan op dezelfde wijze van daaruit functioneren -> je kan meerdere installaties op je PC (of USB-stick) plaatsen !
58
InstantWP.exe starten
59
InstantWP : taal vh Dashboard -> Nederlands
60
InstantWP : taal vh Dashboard -> Nederlands
61
H3 Werken met WordPress : Dashboard
Admin-bar : zwart Inloggen : ketkroket.co.nf/wp-admin
62
Dashboard
63
Wordpress blogs zoeken Bvb. Blogs over koken
64
Oefening : Wordpress instellingen Ga naar p.40 in het boek Doe de algemene instellingen (p.41) Doe de commentaar instellingen (p.42…) Stel permalinks in (p.45) Maak één extra gebruiker aan , geef deze als rol redacteur (p.47) OPGELET : deze moet een eigen e-mailadres hebben !
65
Oefening : Wordpress instellingen
66
Oefening : Wordpress instellingen
67
Gebruikersrollen
Beheerder
Redacteur
Alle rechten Enkel jezelf beheerder maken beheert enkel de inhoud van je site kan berichten en commentaren van anderen wijzigen of verwijderen
Auteur
Kan berichten schrijven, activeren Kan enkel eigen geplaatste inhoud wijzigen
68
Gebruikersrollen
Schrijver Kan bericht schrijven maar niet activeren Een beheerder of redacteur moet tussenkomen om de berichten te activeren -> controle (censuur?) van inhoud
Abonnee
Een lid van je site/blog Nuttig als je hebt ingesteld dat alleen geregistreerde gebruikers reacties mogen geven
69
Tip
Werk met Chrome of Firefox InstantWP werkt enkel met IE Zet tabs open
70
