Downloaded 14 times
Uploaded byPeter Luit
Online usability - les 1 introductie WordPress - structuur en content
Online usability - les 1 introductie WordPress - structuur en content
More Related Content
Similar to Online usability - les 1 introductie WordPress - structuur en content
Online usability - les 1 introductie WordPress - structuur en content
- 1. Starten met eeneigen WordPress website versie 3.0 - maart 2016 door @peterluit 1
- 2. Voor wie bedoeld •eerste kennismaking met het zelf ‘bouwen’ van een WordPress weblog/ website • in aanvang (!) geen of (zeer) beperkte technische kennis van PHP, SQL, HTML, CSS • nieuwsgierig naar de mogelijkheden en graag (zelf) willen experimenteren • aanbevolen: beetje gevoel voor ‘look & feel’ • geen paniekgevoel krijgen als het niet meteen lukt..... ;-) • in deze training hier en daar een (*)….. 2
- 3. Programma omvat 3delen, globale inhoud • deel 1: introductie, content (de basis) • deel 2: vervolg content en menu’s • deel 3: thema’s, widgets en plugins 3
- 4. WordPress 1. wat isWordPress 4
- 5. Wat doen wevanmiddag doen? • wat is WordPress en wat voor typen websites kan je ermee maken? • voorbeelden • hoe installeer ik zelf WordPress? • wat is het dashboard? • wat is er allemaal in te stellen? • wat zijn thema’s? • onze eigen werkomgeving • huiswerk 5
- 6. Wat is WordPress? •volledig opensource • wereldwijd enorme grote (on-line) ontwikkelaars- en gebruikers communities • ca. 25% alle websites wereldwijd ‘draaien op’ WordPress • grote hoeveelheden plugins • grote hoeveelheden vormgevings thema’s • in basis/aanvang redelijk makkelijk te leren (geen complexe leercurve) 6
- 7. Een paar WordPresstoepassingen • eenvoudige weblog (zo begon WordPress) • volledige nieuwswebsites (met redactie systeem) • webshops (bekijken, kopen, afrekenen) • leden websites/communities (met inloggen leden) • vraag en antwoord (forum) • etc. etc. 7
- 8. • de ‘concurrenten’ WordPressin Google Trends 8
- 9. WordPress downloads: kijkzelf eens http://wordpress.org/download/counter/ 9
- 10. Principe van deWordPress installatie • download de .zip file vanaf http://nl.wordpress.org en pak deze uit • zorg voor een hostingpakket bij een provider welke SQL en PHP ondersteunt (resp. de database en de programmeertaal waarop WordPress is gebaseerd) • plaats alle WordPress files in de toegewezen map via FTP • maak een database en een gebruikersnaam aan • start de installatie met http://www.xxxxxx.nl/ • log in met http://www.xxxxxx.nl/wp-admin 10
- 11. De achterkant vanWordPress: een (!) dashboard 11
- 12. Inhoud: pagina’s enberichten - de verschillen bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla pagina’s: bestemd voor ‘statische’ informatie bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla 12 bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla wie zijn wij contactwat doen wij onze…..menu: kijk maar eens op https://www.luit.nl
- 13. Berichten in volgordevan tijd (weblog): nieuwste oudste tijdlijnberichten bestemd voor ‘dynamische’ informatie - onder elkaar vandaag: bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla (lees verder…) gisteren: bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla (lees verder…) eergisteren: bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla (lees verder…) vrijdag: bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla (lees verder…) 13 menu: nieuws (bij regelmatig nieuws, vaak de homepage) kijk maar eens op http://www.printmedianieuws.nl
- 14. Pagina’s en berichtenbeiden in WordPress WordPress kent beide typen ‘inhoud’ dus ‘pagina’s’ en ‘berichten’ bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla 14
- 15. ‘custom post types’(*) 15 • WordPress als volwaardig CMS, voor bijvoorbeeld: • evenementen - datum, lokatie, tijstip etc. • webshop (artikelen) - prijs, omschrijving, soort, voorraad etc. • foto album - fotograaf, resolutie, merk camera, diafragma etc. • bedrijvenlijst - naam, adres, plaats, website etc. • portfolio - klant, omschrijving, accountmanager • etc. etc.
- 16. WordPress - menustructuur:toegang tot inhoud bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla 1 2 3 2a 2b 16
- 17. WordPress - thema,vormgeving, sidebars, menu * * (body) inhoud: bericht(en) of pagina 1 2 3 2a 2b * * * * * * mogelijkheden afhankelijk per thema 17
- 18. WordPress - widgets:inhoud van sidebars .... .... 1 2 3 2a 2b - widgets zijn afzonderlijke stukjes in sidebars - een widget kan de resultaten weergeven van bijvoorbeeld een plugin, maar kan ook stukje tekst zijn (body) inhoud: bericht(en) of pagina 18
- 19. WordPress - header/footer(boven- en onderzijde) 1 2 3 2a 2b header en footer grootte/positie (body) inhoud: bericht(en) of pagina 19
- 20. (body) inhoud: bericht(en) of pagina WordPress -plug-ins (extra functies) wordpress kern plugin plugin plugin plugin 1 2 3 2a 2b toegevoegde functies, bijvoorbeeld contactformulier, social media icons, activiteiten overzicht….. plugin 20
- 21. thema WordPress - thema:overall look&feel plugin plugin plugin plugin plugin 1 2 3 2a 2b (body) inhoud: bericht(en) of pagina 21 wordpress kern
- 22. WordPress 2. voorbeelden indelingenwebsites: • header, menu, footer, sidebar(s), body 22
- 23.
- 24.
- 25.
- 26.
- 27.
- 28. Voorbeeld: viva.nl (jaargeleden) 28
- 29.
- 30. WordPress 3. oefenen metde ‘leeromgeving’ - mijnnieuwsmarkt.nl 30
- 31. Ga naar http://www.mijnnieuwsmarkt.nl/ Oefening:ga naar de ‘studenten portal’ 31
- 32. Belangrijk: zelfstudie inhoud! 32 •De weblog op ‘mijnnieuwsmarkt.nl’
- 33. Ga naar http://www.mijnnieuwsmarkt.nl/werksitex/wp-admin(x = 1..8) Inloggen: de ‘achterkant’ van WordPress 33 gebruikerx qwertyx
- 34. Ga naar http://www.mijnnieuwsmarkt.nl/werksitex(x = 1..8) Oefening: kijken waar een paar elementen staan 34 menu body sidebar admin
- 35. Ga naar http://www.mijnnieuwsmarkt.nl/werksitex/wp-admin(x = 1..8) Oefening: het ‘dashboard’ (kale versie) 35 plaats van blokken zelf in te delen: ga in de kop van een blok staan, klik aan en schuif….
- 36. Plugins kunnen zorgenvoor meer blokken op het dashboard Oefening: het ‘dashboard’ (met extra modules) 36 plaats van blokken zelf in te delen: ga in de kop van een blok staan, klik aan en schuif….
- 37. De linker kolomkan na installatie van plugin en/of thema’s Oefening: het ‘dashboard’ - de functies 37 basis functies na installatie diverse plugins en/of thema’s
- 38. WordPress instellingen 38 • Onder‘instellingen’ staan de belangrijkste basiswaarden voor de werking van je website • algemeen (naam, datum- en tijd instellingen) • schrijven (standaard categorie voor berichten) (*) • lezen (functie en indeling voorpagina etc.) • reacties (wie mag wat en wanneer) • media (grootte instellingen) • permalinks (belangrijk, instelling URL’s artikelen/pagina’s)
- 39. WordPress 4. de zoektochtnaar de juiste vormgeving 39
- 40. Begin eenvoudig: leereerst de structuur 40 • Vorm en inhoud kunnen onafhankelijk van elkaar bewerkt worden • Een ander thema kan dus altijd later worden gekozen en worden gebruikt, terwijl inhoud blijft behouden • Het gaat echter eerst om de structuur van de website aan de hand van de primaire doelstelling(en): • dus contentbeleid • navigatiestructuur • uitbreidingen
- 41. Oefening: bezoek éénvan deze sites 41 • Betaalde themes (meer support, meer updates, vaak beter geschreven, over het algemeen tussen de 40 en 80 euro) • http://www.themeforest.com • http://www.elegantthemes.com • http://www.woothemes.com • http://www.wordpress.org/themes (hier al meer dan 2000 - gratis)
- 42. Zelf themes maken(*) 42 • Vraagt (redelijk veel) kennis van PHP, SQL, CSS en HTML • PHP - programmeertaal die HTML genereert • SQL - database • CSS - vorm, kleur, typografie • HTML - opmaak
- 43. Parent- en childthemes(*) 43 • Een Parent Theme bevat de basis • Een Child Theme bevat alléén jouw aanpassingen • voordeel: makkelijker updaten van een Parent Theme, terwijl jouw instellingen bewaard blijven • te maken met bijvoorbeeld Genesis Framework • http://www.studiopress.com
- 44. WordPress - Parent-& ChildTheme (*) plugin plugin plugin plugin plugin 1 2 3 2a 2b inhoud: bericht(en) of pagina 44 wordpress kern Child Theme ParentTheme
- 45. Oefening: een geïnstalleerdthema kiezen 45
- 46. Oefening: een geïnstalleerdthema activeren 46 1 activeren van een thema verandert de gehele look&feel van een website
- 47. Een thema moetje leren kennen, dat kost tijd! 47
- 48. Werken met content 5.De basis 48
- 49. Berichten maken, welkeelementen • titel (en permalink) • de inleiding van je verhaal • waar is het blok ‘samenvatting’ voor bedoeld? • categorieën en tags (bij berichten) • notatie (meta data) • de uitgelichte afbeelding • de tekstverwerking • media toevoegen • reacties/trackbacks toestaan • revisies • publiceren 49
- 50. Pagina’s en keuzesvoor de homepage • herhaling verschillen tussen berichten en pagina’s • je eerste pagina maken • je homepage instellen (zie ‘Instellingen’ - ‘Lezen’) 50
- 51.
- 52. Titel van jebericht 52
- 53. Permalink belangrijk voorGoogle! 53
- 54. Inleiding kort enbondig: plaag om door te lezen! 54
- 55. Samenvatting is voorRSS feed, meestal inleiding 55
- 56. ‘Verder lezen…’ nade eerste alinea 56
- 57. • selecteer eenwoord of meerdere woorden in de tekst als bron voor de link • selecteer het kettingsymbool • het scherm ‘Link toevoegen/bewerken’ verschijnt Het maken van een in- of externe link 57
- 58. En publiceren (meerdereopties) 58
- 59.
- 60. Bericht en mogelijkheidtot reageren 60
- 61. Huiswerk: maak eenpaar berichten 5. Bestudeer de inleiding ‘Toelichting bij eerste huiswerkopdracht’ en ga vervolgens aan de slag. - We doen in deze oefening nog niets met vormgeving en menu’s 61
- 62.
- 63.
- 64.
- 65.