Beveilig WordPress
Posted by Erwin in Internet, Tips & Tricks, Tools, Tutorials on 19/04/2013
De laatste tijd zijn banken negatief in het nieuws doordat hun dienstverlening in het gevaar komt bij grootschalige DDos aanvallen.
Hierachter zitten vermoedelijk kwaadwillende figuren, die zich toegang willen verschaffen tot de server om daar rekeninggegevens vanaf te plukken.
Onlangs (11 april 2013) werd geconstateerd dat er een grootscheepse ‘brute force’ aanval werd gedaan op WordPress sites. Bron: Cloudflare
Het doel van deze aanval is uiteraard niet het leegplukken van rekeninggegevens, maar waarschijnlijk om toegang te krijgen tot de servers waarop je WordPress site draait, zodat die server gebruikt kan worden om een botnet op te bouwen. Bron: Arstechnica
De methode die wordt gebruikt is dat met een botnet wordt gezocht naar WordPress installaties die als gebruikersnaam admin hebben en vervolgens met een lijst met veelgebruikte wachtwoorden proberen in te breken. Dat botnet gebruikt wisselende ip adressen, over de hele wereld en is daardoor bijzonder moeilijk te stoppen.
Admin is de standaard gebruikersnaam die als suggestie wordt gegeven door WorPress op het moment dat je WordPress installeert op een server (en ook nog eens het beheerdersaccount).
Als je dat niet hebt gewijzigd, heeft de aanvaller dus al de helft van je login te pakken, en hoeft alleen het wachtwoord nog maar te worden gekraakt.
En omdat admin vaak alle rechten heeft, kun je als kwaadwillende iemands hele site overhoop halen.
Wat kan je doen om inbraak in je site te voorkomen?
Natuurlijk is het van belang om altijd zo snel mogelijk WordPress te updaten zodra er een nieuwe versie beschikbaar is, maar dat is in dit geval geen oplossing.
De beste oplossing is om ervoor te zorgen dat op jouw site de gebruikersnaam van het beheerders account (of van andere accounts) niet admin is.
Als dat wel zo is, is het aan te raden om dat aan te passen. Dat doe je als volgt:
1). In WordPress kun je een gebruikersnaam niet aanpassen, er is dus een omweg nodig om dit goed te regelen.
2). Login met je admin account, en maak een nieuwe gebruiker aan, met een andere gebruikersnaam dan admin.
Bij voorkeur een gebruikersnaam met daarin bijzondere leestekens, een handige tool daarvoor die ik veel gebruik is de Random Password Generator. Die kun je gebruiken om een veilige gebruikersnaam mee te genereren, en daarna om een nog veiliger wachtwoord aan te maken.
3). Zorg ervoor dat je dat nieuwe account beheerdersrechten geeft.
4). Je kunt in WordPress niet twee keer hetzelfde e-mail adres gebruiken voor een login, gebruik dus een ander e-mail adres (je kunt dat later wel weer veranderen, daar kom ik zo op).
5). Loguit met het admin account, en login met je nieuwe, veilige account.
6). Verander het e-mail adres van je nieuwe, veilige account en stel een normaal leesbare ‘nickname’ in. Dat is het alias waaronder je berichten plaatst, en wat dus zichtbaar is op je site.
7). Verwijder het admin account.
Gefeliciteerd, het is nu stukken moeilijker om je site te hacken!
As aanvullende maatregel kun je deze plugin installeren: WordfenceDeze plugin zorgt voor een extra laag van veiligheid, en je kunt er ook mee controleren of je site al is geinfecteerd.
Na installatie verschijnt er een kopje Wordfence onderaan in je menu, via dat kopje kun je naar de opties van de plugin navigeren.
Je kunt een scan laten uitvoeren, Wordfence vergelijkt dan alle bestanden in je installatie met die zoals ze origineel horen te zijn. Als er een bestand wordt gevonden dat afwijkt van het originele installatie bestand wordt dat gerapporteerd en kun je actie ondernemen.
Overigens gebruik ik altijd op alle sites die ik bouw een veilige loginnaam, en een achterlijk lang hexadecimaal wachtwoord (ik heb wel eens het woord paranoïde horen vallen zelfs), omdat WordPress zo populair is dat veel hackers hun talent erop loslaten. En je kunt beter voorkomen dan genezen…
Gebruik Google.com in plaats van Google.nl
Posted by Erwin in Internet, Seo & Analytics on 10/04/2013
Google probeert iedere bezoeker het best mogelijke resultaat te bieden. Daarom wordt je in veel landen in plaats van naar google.com naar de lokale variant geleid. Google.nl in dit geval dus, als je in Nederland iets zoekt.
Heel handig, en inderdaad krijg je veel relevantere resultaten voor je zoekopdracht via een lokale variant van Google.
Het is alleen vervelend als je een site wilt optimaliseren voor Engelssprekende landen. Gelukkig heeft Google ook daar een oplossing voor.
Via deze link: http://www.google.com/ncr leidt Google je niet naar een lokale variant, maar naar google.com.
Maakt niet uit vanuit welk land je naar google.com wilt, bovenstaande link werkt altijd.
Aangepaste overflow scrollbar
Voor mijn meest recent voltooide project moest ik een aantal technische hindernissen overwinnen, vanwege de wens om WordPress als cms te gebruiken (de wens was om zelf relatief eenvoudig afbeeldingen en teksten te kunnen beheren, dan kun je natuurlijk niet om WordPress heen) en het ontwerp dat voorzag in een gefixeerde hoogte van alle pagina’s.
De combinatie zelf aan kunnen passen van teksten en een gefixeerde hoogte leidde tot de noodzaak om alle body elementen een gefixeerde hoogte te geven, en in css een overflow te declareren op al die elementen.
Allemaal geen probleem.
Maar de standaard overflow scrollbar ziet er niet uit:
En je hebt er als webbouwer ook totaal geen controle over, want browsers bepalen hoe die scrollbar eruit ziet. En je wilt dat het ook op een ipad/iphone bruikbaar is…
Het moest dus in Javascript, niet in Flash worden gebouwd.
Om dit geheel op te lossen heb ik de WordPress plugin: Jscroll pane gebruikt.
Die zorgt ervoor dat door middel van Javascript de scrollbalk een html element wordt, waarna je hem kunt stylen met css.
Het default uiterlijk van de scrollbar wordt dan:
Al iets beter!
Na wat kleine aanpassingen aan het formaat, kleur, grootte van de ‘stops’ aan de uiteinden boven en onder en aanpassingen aan het gedrag van de balk als je er met de muis overheen zweeft, was dit het eindresultaat:
Een tweede uitdaging was dat er voor iedere pagina een andere achtergrondafbeelding nodig was, waarbij die afbeeldingen ook achter de tekst gebruikt moesten worden (zoals je hierboven ook kunt zien). Gelukkig geeft WordPress iedere pagina een eigen ID mee, zodat je die kunt gebruiken om css op los te laten zonder dat dat op andere pagina’s ook te zien is.
Om de tekst leesbaar te houden was in het ontwerp een semi transparante laag achter de tekst voorzien.
Om het mogelijk te maken dat gebruikers van (de inmiddels stokoude, als je hem nog gebruikt, ga je diep schamen) Internet Explorer 6 ook deze transparantie konden zien heb ik eerst geprobeerd om deze transparantie met css te bereiken. Helaas, daarmee wordt ook de tekst binnen het element transparant, omdat die tekst de transparantie van het element eromheen erft. En uiteraard was dit te geavanceerd voor IE 6. Uiteindelijk heb ik besloten een transparante afbeelding te gebruiken, een .PNG. Omdat IE6 niet overweg kan met de alpha channel eigenschap die in een .PNG een browser laat weten hoe transparant de .PNG moet worden weergegeven, zien IE6 gebruikers een witte achtergrond.
Nog steeds functioneel en bruikbaar, alleen iets minder mooi. Ik heb bewust geen .GIF gebruikt, omdat ondanks dat die wel zou werken in IE6, die in alle browsers een minder mooi resultaat op zou leveren.
De derde uitdaging was dat voor de koppen en het menu een niet-standaard-lettertype gebruikt moest worden.
Met een standaard (of ‘websafe’) lettertype wordt in webjargon een lettertype bedoeld dat standaard is geïnstalleerd op je computer als je ‘m koopt. Dat zijn lettertypen als Arial, Verdana en Helvetica.
Als je op je site een afwijkend lettertype gebruikt omdat dat mooi bij de uitstraling van het ontwerp past, en je zou het simpelweg in je stijlsheet declareren met:
font-family:”je afwijkende, funky lettertype”,”Times New Roman”,Georgia,Serif;
kan waarschijnlijk meer dan 98% van de bezoekers van je site dat mooie lettertype niet zien.
Ze zullen in plaats daarvan Times New Roman, Georgia of het eerste het beste lettertype met schreef dat op je computer te vinden is zien.
Dat is perfect op te lossen, met Google webfonts of @font face (waarbij je een webkit font gebruikt), maar de echte uitdaging was om in alle 680 bij Google beschikbare lettertypen die ene te vinden die de grootste gelijkenis met het lettertype uit het ontwerp vertoonde…
Maar ook dat is uiteindelijk bijzonder goed gelukt!
Bekijk hier de website www.boulan.nl die ik in opdracht van vmcommunities heb gebouwd live.
Bijzondere lettertypen op websites
Posted by Erwin in Tips & Tricks, Webdesign on 17/03/2013
Ik krijg de laatste tijd steeds vaker de vraag of het mogelijk is om een bepaald lettertype in een huisstijl te verwerken.
Bij drukwerk is dat uiteraard geen enkel probleem, er zijn meerdere manieren waarop een drukker probleemloos ieder lettertype kan drukken dat je wilt hebben.
Bij websites ligt dat ietwat anders.
Het is namelijk zo dat je in de stylesheet van een website wel eenvoudig een willekeurig lettertype kan declareren voor ieder element:
{
font-family:”Times New Roman”,Georgia,Serif;
}
Maar die lettertypes zijn niet daadwerkelijk opgenomen in een website, die worden door de browser vanaf de computer van de bezoeker van je site ingelezen. Als je dus een lettertype declareert dat iemand niet op zijn computer heeft, zal die dat niet kunnen zien. Daarom declareer je altijd in plaats van één specifiek lettertype, een familie.
In bovenstaand voorbeeld zoekt een browser eerst naar “Times New Roman”, als iemand dat niet op zijn computer heeft zoekt de browser verder naar “Georgia”, als die ook niet kan worden gevonden, wordt het allereerste Serif (In Nederlands ‘Schreef”) lettertype gebruikt dat kan worden gevonden.
Maar wat nu als je een handgeschreven, gothisch of ander hip lettertype wilt gebruiken?
De twee methoden die ik gebruik zijn:
@font-face
Dit is een methode, ontwikkeld door www.FontSquirrel.com. Hiermee kun je van lettertypen niet alleen de versie voor op je computer kopen en downloaden maar ook de webfont kit.
In die webfont kit zitten alle declaraties voor de verschillende browsers, je kunt dat pakket op je server installeren.
Vervolgens kun je het met de @font-face declaratie in je website embedden. Het lettertype wordt nu niet op de computer van je bezoekers gezocht, maar op de webserver waar je site is ondergebracht.
Google Web Fonts
Google biedt een bibilotheek met daarin een groot aantal lettertypen die in je website kunnen worden gebruikt.
Deze methode is net wat eenvoudige in gebruik dan de bovenstaande methode, zo hoef je alleen maar in je html de stylesheet van het lettertype dat je wilt gebruiken aan te roepen, waarna het lettertype rechtstreeks op de servers van Google wordt opgezocht.
In je stylesheet declareer je het lettertype zoals gebruikelijk.
Het enige nadeel is dat Google maar 622 (op het moment van schrijven) verschillende lettertypen biedt, de kans bestaat dus dat het lettertype dat je zoekt er niet tussen zit.
Verander veelgebruikte websites in desktop apps
Posted by Erwin in Lifehacking, Slimmer Werken, Tips & Tricks, Tools on 27/11/2012
Een paar dagen geleden attendeerde een vriend me op deze app:
Handig, want als je een Mac hebt, kun je er van alle websites die je vaak bezoekt iconen mee maken die je in je dock kunt plaatsen.
Een beetje zoals je snelkoppelingen naar webpagina’s kan maken op windows, maar dan iets geraffineerder.
Persoonlijk vind ik het erg handig omdat je browser z’n handen vrij heeft om andere dingen te doen, dat gaat allemaal net even sneller als je geen 12 (of meer) tabbladen open hebt (zoals ik vaak heb).
Een logo is een afbeelding, geen h1
Posted by Erwin in Internet, Seo & Analytics on 24/09/2012
Een paar dagen geleden had ik een discussie met de bouwer van een site waarvan ik het tekstuele component moest optimaliseren voor zoekmachines.
Hij had het logo (afbeelding bovenaan zijn pagina) bestempeld als h1 in zijn html, onder het motto: “dit is de titel van je site, dus het allerbelangrijkste op je pagina”.
Dit is een gedachtegang die ik weliswaar kan volgen, en één die veel wordt toegepast op diverse websites, maar toch is het fout.
Dit is zoals het er in code uitziet:
<div class="logo-placeholder">
<h1><a href="http://www.fakewebsite.com/">
<img title="Logo" alt="Logo" src="http://www.fakewebsite.com/images/Logo.jpg"></img></a></h1>
</div>Wat je hiermee aangeeft is dat je logo een belangrijke heading is.
Om er nog verder in te duiken, dit is wat je ook wel eens ziet. een logo-afbeelding als achtergrond opgemaakt in html.
<h1><a href="/" title="Logo">Bedrijfsnaam</a></h1>Met bijbehorende CSS:
h1 a{
width:;
height:;
display:block;
text-indent:-9999px; (zodat 'bedrijfsnaam' niet zichtbaar is door je logo heen)
background:url(/images/logo.gif); }Het probleem met bovenstaande code is:
De belangrijkste paginaheader is nu een afbeelding, en zoekrobots kunnen afbeeldingen niet lezen… Zoekbots kunnen wel iets met de img title en alt tags, maar die worden niet belangrijker omdat die in een h1 element zitten.
In het geval dat je je logo als achtergrondafbeelding hebt verwerkt, heb je geen alt element voor je afbeelding. Daarmee wordt het lastiger voor mensen die een screenreader gebruiken om je site te bezoeken, screenreaders maken gebruik van die alt tag om kenbaar te maken waar de afbeelding over gaat. En ook Google gebruikt die alt tag, voor hetzelfde doel…
Volgens W3schools:
“Search engines use your headings to index the structure and content of your web pages.
Since users may skim your pages by its headings, it is important to use headings to show the document structure.”
Het logo komt doorgaans op alle pagina’s van een site voor. Dus hebben alle pagina’s nu hetzelfde, onleesbare, h1 element. Dus een onbegrijpelijke structuur.
Google geeft weliswaar toe dat het geen probleem is om meer dan één h1 per pagina te gebruiken (zie hier de video van Matt Cutts), dus je zou kunnen overwegen je tekstuele inhoud te structureren met een tweede h1 element…
Alleen heb je dan dat probleem van het onleesbare logo nog niet opgelost, en het probleem van de h1 die op iedere pagina hetzelfde is.
Hoe het wel moet:
<a href="/" title="Logo" id="logo"> <img src="/images/Logo.jpg" alt="Logo" /> </a>Vervolgens heb je je h1 vrij om te gebruiken waar ‘ie voor bedoeld is, het laten weten wat de belangrijkste paginaheader is. Voor SEO kan dit voordelen hebben.
Ik hoor je denken: ‘hoeveel invloed heeft dit nou helemaal’? Het antwoord daarop kan ik niet onderbouwen met keiharde cijfers, omdat zoekmachines geen inzicht geven in de formule waarmee ze de ranking van een site bepalen.
Wat ik wel met zekerheid kan zeggen is dat als je hoger wilt scoren dan een concurrent met dezelfde zoekwoorden, en die concurrent heeft zijn structuur wèl goed geregeld, is het des te moeilijker om die concurrent te evenaren…
Chrome tab remix commercial
Ik kwam deze tegen als commercial bij een andere video, vond ‘m werkelijk briljant:
- Abonneer je op m'n rss feed
