Hyperlocal Academy - deel 2: techniek

• uitgaande van het gebruik van het WordPress CMS• mogelijk gemaakt door Stimuleringsfonds voor de Journalistiek, Centrum voor Communicatie en Journalistiek en Journalism Lab!!!door @peterluit

1

Wat gaan we doen?

• Onderhouden van de achterliggende techniek

• Externe content aggregatie - hoe werkt dat?

• koppelingen social media

• betaalde of gratis content - de techniek

• meten van resultaten - analytics

• nieuwsbrief, webapps, apps…..

• overige plugins voor uitgeef doeleinden

2

Waar gaan we een beetje van uit?

• basiswerking van WordPress is redelijk bekend

• je kent nut en noodzaak van het toepassen van plugins

• je weet wat een vormgevingsthema is en de keuzecriteria voor een website met uitgeefdoelen te bepalen

• je hebt een idee/visie over advertentie- en redactiestrategie op basis waarvan de website verder moet worden ontwikkeld

• je bent uiterst nieuwsgierig naar mooie en goed toepasbare technieken voor je nieuwssite……..

3

theme

WordPress - het overzicht

pluginplugin

pluginplugin

plugin

1 2 3

2a

2b

(body) inhoud:

bericht(en) of pagina

4

wordpress kern

Onderhoud van de achterliggende techniek

• de WordPress basis software• de plugins• de thema’s

5

WordPress basis

• WordPress is opensource software, ca. 20% van alle websites wereldwijd draaien op dit platform

• Dat maakt WordPress kwetsbaar(der) voor ‘aanvallen’

• De eisen die WordPress stelt aan plugins en thema’s zijn niet overdreven streng, daardoor kunnen ‘lekjes’ makkelijk ontstaan

• Updates verschijnen dus niet alleen maar voor nieuwe functies, maar ook voor het verbeteren van bestaande functies

6

Testomgeving

• Het is zinvol een (kopie) testomgeving te hebben, die alleen intern bereikbaar is om de volgende tests te kunnen uitvoeren:

• testen van WordPress updates ten opzichte van bestaande plugins

• blijft een plugin na een update in de totale samenhang van plugins werken

• werken alle plugins in samenhang met het thema

7

Upgrades en updates

• WordPress major upgrades lopen via 3.9 - 4.0 - 4.1 en moeten handmatig worden geïnstalleerd (per jaar ca. 2 upgrades)

• WordPress minor updates lopen van 4.0 - 4.01 - 4.02 en worden automatisch uitgevoerd (als de webserver het toestaat) (per versie doorgaans 2-3 updates)

• Plugins en thema’s hebben geen ‘afgedwongen’ versie volgorde binnen WordPress (zeer willekeurige update cycli)

8

Elimineer kwetsbaarheden rondom plugins

• installeer alleen plugins voor echt noodzakelijke functies

• analyseer de meerwaarde van betaalde plugins, gratis is niet altijd automatisch goed, maar betaald is ook geen garantie

• verwijder plugins die niet (meer) worden gebruikt

• let altijd op updates van plugins, installeer ze niet meteen, ga altijd naar de website van de ontwikkelaar en zoek naar vragen en antwoorden op forum of weblog

9

Elimineer kwetsbaarheden rondom plugins

10

Kwetsbaarheden van thema’s

• Thema’s zijn er in vele varianten en vormen de basis voor het genereren van de output code naar de browser

• maak zorgvuldige afwegingen bij het kiezen van een thema

• ook hier is gratis niet zomaar een afdoende norm

• niet elk thema maakt bijzonder vriendelijke SEO code

• ontwikkel zelf voldoende kennis om eigen instellingen te verwerken in een zogenaamd ChildTheme op basis van een Framework

11

Backup procedures

• bij shared IP hosting pakketten meestal niet het geval

• dan zelf doen dmv plugin(s), helaas: er zijn er velen: WP-DB-Backup (helaas wat verouderd), BackWPup, WP-DB ManagerLees beoordelingen: http://www.stateofdigital.com/top-6-wordpress-backup-plugin-recommendations-for-2013/

• bij VPS (Virtual Private Server), meestal zelf in te stellen, of bij zogenaamde managed VPS, binnen de SLA met de provider. Ga dit goed na!

• plugin dan niet noodzakelijk

12

Optimaliseren database

• Plugins en thema’s schrijven in de MySQL database

• bij het verwijderen worden niet altijd netjes de niet meer gebruikte tabellen verwijderd

• verwijderen van niet gebruikte tabellen kan o.a. met de pluginWP-Optimize (https://wordpress.org/plugins/wp-optimize/)

• maak altijd eerst een volledige back-up van de database!

13

Optimaliseren database

14

Externe content aggregatie

• RSS feeds zijn voor dit doel het meest geschikt• Aantal tools beperkt, maar goed genoeg

15

Content overnemen van andere bronnen

• Altijd nagaan in hoeverre de bron dat toestaat.

• controleer of mogelijke plugins welke inhoud waar wordt overgenomen en in welke status inhoud wordt gezet (liefst status ‘draft', want je wilt doorgaans niet alle content per keer publiceren)

• controleer of je de artikelen al dan niet met een extra ‘editorial plugin’ kunt plannen (datum/tijd) voor publicatie (al dan niet met een redactionele bewerking)

• ga na in hoeverre bronnen van derden de overname van gedeeltelijke - of gehele artikelen toestaan i.v.m. auteursrechtelijke aspecten

16

Content overnemen van andere bronnen

• Vier mogelijke oplossingen

• WP RSS Aggregator (basis is eenvoudig, add-ons moeten betaald worden)

• WPeMatico

• WP RSS Multi Importer (gratis en uitgebreid)

• AutoBlog van http://premium.wpmudev.org (betaald)

17

Voorbeeld WP RSS Aggregator

18

Voorbeeld AutoBlog

19

Waar plaatsen?

• Let bij alle mogelijk plugin op de mogelijke locaties waar geaggregeerde content geplaatst kan worden:

• in de body als ‘samenvatting’ met link naar de bron, afhankelijk van datum/tijd (probeer creatief onderscheid te maken met eigen content)

• in de body als geheel bericht (pas op copyright aspecten)

• in widgets in de sidebars, meestal weergegeven als feed, titel met een link naar de bron

20

Koppelingen social media

• algemene knoppen voor een link naar gebruikte kanalen• knoppen om getoonde inhoud te delen• mogelijkheden om tijdlijnen van social media kanalen te tonen

21

Koppelingen social media - mogelijkheden

• Tweet genereren bij publicatie van een artikel (WP to Twitter)

• maak geautomatiseerd een tweet met Titel en URL

• Via Twitter doorsturen naar Facebook (dat doe je in Twitter instellingen)

• is dat echt wenselijk - bepaal doelen rondom je social media beleid

• Talloze ‘share’ buttons, per bericht, algemene volg knoppen etc.

22

website

eigen inhoud

brochures

filmpjes

presentaties

twitter

Facebook

LinkedIn

nieuwsbrief

Wat staat centraal?

je eigen website centraal!

eigen inhoud

brochures

filmpjes

presentaties

twitter

Facebook

LinkedIn

nieuwsbrief

Verkeer genereren naar centraal medium

Verwijzing naar social media kanalen, feed en email

25

Delen van een artikel, tonen van een tijdlijn

26

Twitterberichten als tijdlijn doe je via Twitter widget

27

Plaatsen in WordPress widget

28

Betaalde content versus gratis content

• wie betaalt wat?• belang adverteerders• betaal bereidheid abonnees

29

Betaalde content versus gratis content

• De vraagstukken

• betalen consumenten on-line voor nieuws of voor gedegen achtergronden?

• hoe regel je het betalen?

• hoe regel je de login gegevens?

• welk financieel belang mag/moet een adverteerder hebben in het gehele businessmodel van de titel?

30

Verschillende betaalmuren

• meteen voor alles bij aangaan van een (jaar)abonnement - all you can read

• eerst gratis proefperiode (tijd, aantal), daarna betalen - let goed op mogelijke aanwezige functionaliteit bij plugin keuze

• soms gratis content om betaalde content te promoten (bijvoorbeeld gratis artikel per week, of gratis promotie periodes)

• betalen per artikel (eventueel gedifferentieerd) - pay per view

• betalen voor een auteur

• Leren van Elinea, Blendle, MyJour, de Correspondent etc.

31

Abonnementenbeheer: zelf doen of uitbesteden?

• de criteria

• aantallen te verwachten abonnees voor premium content

• administratieve handelingen (verschillen B2B en B2C), eenmalig, herhalend

32

Informatiebronnen

• Leadin: http://leadin.com/plugins/wordpress-paywall/

• op http://www.chrislema.com veel artikelen over ‘lidmaatschap websites’, keuzes plugin, betaalmogelijkheden etc.

33

Een start met S2Member Pro

34

• http://www.s2member.com/pro/

• Paypal integratie

• API’s voor koppelingen externe systemen

• verschillende toegang niveaus (per artikel in te stellen)

• toegang restricties per account

• eigen te maken inschrijf formulieren

Voorbeeld op printmedianieuws.nl

35

Meten van resultaten, SEO en Google Analytics

• wat doe je met SEO voor wat?• Google Analytics integreren

36

Zoekmachine optimalisatie met ‘yoast’ plugin

37

Zoekmachine optimalisatie (SEO)

38

Zoekmachine optimalisatie (SEO)

39

Zoekmachine optimalisatie (SEO)

40

Zoekmachine optimalisatie (SEO)

41

Google Analytics

• maak account aan bij http://www.google.com/analytics/

• voeg de te analyseren website toe

• je krijgt een UA code, bijvoorbeeld UA-12345678-9

42

De meest gebruikte plugin

43

Extra in je dashboard, nu nog met Google Analytics Dashboard for WP

44

Gebruik maken van MailChimp voor nieuwsbrief

• Wat is MailChimp?• Hoe maak je er gebruik van binnen WordPress?

45

Wat is MailChimp?

• Een Amerikaans web-based e-mail marketing systeem

• een forse omgeving op zichzelf (vergt echt wel wat tijd)

• integratie met WordPress door middel van MailChimp plugin of stukje JavaScript code in een widget voor meer geavanceerde e-mail nieuwsbrief inschrijfformulier

46

Wat is MailChimp?

• Hoe kan het volledig geautomatiseerd werken?

• RSS feed van berichten op basis van bepaalde frequentie

47

Wat is MailChimp?

• MailChimp werkt met zogenaamde ‘tags’ die per bericht de content vanaf de website ophaalt

• *|RSSITEM:TITLE|* = de titel van elk artikel

• *|RSSITEM:CONTENT|* = de inhoud van elk artikel

48

Wat is MailChimp?

• Wat moet je dus doen (samenvattende aandachtspunten)

• account aanmaken in MailChimp

• een lijst van ontvangers (handmatig of via excel sheet) #toestemming?

• MailChimp plugin activeren en lijst kiezen, formulier in widget plaatsen

• een campagne maken op basis van RSS feed (voor geautomatiseerde nieuwsbrief), frequentie, tijd ontvangst instellen

• een template kiezen voor de vormgeving en inhoud plaatsen (tags)

• de campagne starten49

Relevante plugins voor uitgever

• een paar voorbeelden

50

Typen plugins

• advertenties

• gerelateerde berichten

• print-to-web

• auteursprofielen

• betaalmuren/ledenwebsites

51

Advertenties

• door middel van een slider (zie http://www.golfbaanspraarwoude.nl)

• https://wordpress.org/plugins/logo-slider/

52

Advertenties

• door middel van een ‘roulerende’ banner in een widget

• https://wordpress.org/plugins/useful-banner-manager/

53

Advertenties

• De volgende plugin leunt al tegen on-line advertentie management aan

• AdRotate: https://www.adrotateplugin.com

• Vanaf 29 euro voor één website

54

Advertenties (*)

• OpenX integratie: plaats advertenties vanuit een extern on-line advertentie management systeem

• https://wordpress.org/plugins/openx-wordpress-widget/

• OpenX heet tegenwoordig Revive Addserver (http://www.revive-adserver.com/)

• webservice voor het meten van advertentie bewegingen

• is een vak op zichzelf, termen als CPM, CPC, CPA etc.

55

Revive Addserver - opensource

56

Gerelateerde berichten

• De bekende ‘Lees ook…’

• https://wordpress.org/plugins/yet-another-related-posts-plugin/

57

Print-to-web

• Een op papier lijkende online PDF-Reader

• https://wordpress.org/plugins/issuu-embed/

58

Auteursprofielen

• Onderaan een artikel: gegevens en (optioneel) koppelingen social media kanalen per auteur

• https://wordpress.org/plugins/author-bio-box/

59

Tot slot: mobiel

• responsive• webapps• apps

60

Aspecten bij responsive design

• ontwerper bepaalt in principe de volgorde van de opbouw

• stel: website is linker sidebar, content, rechter sidebar

• voorbeeld op mobiel: content, linker sidebar, rechter sidebar

• aanpassen in style.css via @media (*)

• let goed op of thema responsieve design aanbiedt!

• responsive design is geen vervanging van een native app!

61

Voorbeelden smartphone

• ontwerper bepaalt in principe de volgorde van de opbouw

• stel: website is linker sidebar, content, rechter sidebar

• voorbeeld op mobiel: content, linker sidebar, rechter sidebar

62

Voorbeelden tablet

• ontwerper bepaalt in principe de volgorde van de opbouw

• stel: website is linker sidebar, content, rechter sidebar

• voorbeeld op mobiel: content, linker sidebar, rechter sidebar

63

Webapp met WPTouch

• WPTouch is een plug-in met ingebouwde thema’s voor mobiele weergave op smartphone en tablets

64

Native apps

• Native apps worden geleverd via de appstores van o.a. Apple, Google en Microsoft

• Bepaal doelstellingen rondom responsieve, webapps of native

• Let goed op integratie mogelijkheden van bestaande content

• Inmiddels vele ‘app generatoren’ vanaf bijna gratis…..

65

Hyperlocal Academy - techniek

!!!!!!door @peterluit

66