tag:blogger.com,1999:blog-66117206099355291232024-03-13T13:54:25.004+01:00paqqaPaqqa ontwerpt en bouwt internet-applicaties en optimaliseert websites.
<br><br>
Paqqa is Paul van Eck | Sliedrecht | tel. 06-41888895 | info@paqqa.nl | <a href="https://www.paqqa.nl">www.paqqa.nl</a>Anonymoushttp://www.blogger.com/profile/17522857060117418408noreply@blogger.comBlogger11125tag:blogger.com,1999:blog-6611720609935529123.post-30783825810891387852015-03-23T20:20:00.003+01:002015-03-23T20:27:28.468+01:00Weg met de captcha's!Formulier-spam is al jaren een enorm probleem. Talloze 'robots' speuren het web af naar html-formulieren om die, al of niet voorzien van de nodige links en spamteksen, automatisch te versturen. Webmasters en website-eigenaars hebben er een hekel aan.<br />
<br />
<h4>
Doe je bezoekers geen captcha's aan</h4>
Dus gaan webbouwers en programmeurs op zoek naar oplossingen. Heel vaak kiest men dan voor een oplossing zoals een captcha, een methode waarbij de bezoeker op één of andere manier moet aantonen dat hij een echt mens is en geen stukje software. Vaak moet de bezoeker bijvoorbeeld een paar cijfers of letters intoetsen, of een eenvoudig rekensommetje oplossen.<br />
<br />
Op zich werkt een captcha prima natuurlijk, maar eigenlijk wil je dat je bezoekers toch niet aandoen? Immers, elke strohalm die je jouw bezoeker in de weg legt om een actie te nemen (in dit geval om een formulier te versturen) is er eentje die de kans vergroot dat de bezoeker afhaakt. En dat is het laatste wat je wil bereiken natuurlijk.<br />
<br />
<h4>
Alternatieve anti-formulierspam zónder de bezoeker lastig te vallen</h4>
Ik vond een eenvoudig alternatief voor de captcha. Een anti-spam oplossing waar geen enkele websitebezoeker iets van zal merken. Met een heel klein stukje jQuery zorg je ervoor dat er een automatische 'robot' controle plaats vindt. Het werkt als volgt:<br />
<br />
<i><b>stap 1</b>:</i><br />
Zorg dat je html-formulier een uniek id krijgt ( <i><form id="mijnFormulier"</i> .. )<br />
<br />
<i><b>stap 2</b>:</i><br />
Voeg dit hele kleine scriptje toe aan je pagina, bijvoorbeeld vlak boven je formulier of in de head van je html-document:<br />
<br />
<i><span style="color: #660000;"><script></span></i><br />
<i><span style="color: #660000;">function pqAntiSpam(){</span></i><br />
<i><span style="color: #660000;"> jQuery("#formulier").append('<input type="hidden" name="isHuman" value="1"/>');</span></i><br />
<i><span style="color: #660000;"> return true;</span></i><br />
<i><span style="color: #660000;">}</span></i><br />
<i><span style="color: #660000;"></script></span></i><br />
<br />
<i><b>stap 3</b>:</i><br />
Voeg de volgende onsubmit-opdracht toe aan je form-tag: <i><span style="color: #660000;">onsubmit="return pqAntiSpam();"</span></i><br />
De html-code van je formulier zou dus kunnen beginnen met:<br />
<i><form id="mijnFormulier" onsubmit="return pqAntiSpam()" method="post" action=""</i><i>></i><br />
<br />
<i><b>stap 4</b>:</i><br />
De werking van het scriptje is heel simpel: Op het moment dat een menselijke bezoeker het formulier verstuurt wordt er door de jQuery-opdracht een extra (hidden) veld toegevoegd aan het formulier, vlak voordat het formulier wordt verzonden.<br />
<br />
<i><b>stap 5</b>:</i><br />
Het serverside script (meestal je PHP-script) hoeft nu alleen maar te controleren of de variabele 'isHuman' is ge-POST. Indien de variabele is ge-POST is het formulier dus middels jQuery (javascript) 'behandeld' <b>en dus verstuurd door een mens, en niet door een spam-robot</b>. En vervolgens kan je in je PHP-script dus voorkomen dat het ingevulde formulier wordt verwerkt wanneer het niet door een menselijke actie is verzonden.<br />
<br />
--<br />
<i>Ik gebruikte in mijn voorbeeld jQuery code. Uiteraard kan dit ook zonder jQuery worden gerealiseerd, dus puur met javascript. Omdat de jQuery code het kortst is, en vrijwel iedere website tegenwoordig met jQuery 'draait' heb ik voor dit voorbeeld gekozen.</i><br />
<div>
<i><br /></i></div>
<br />
<h4>
Niet waterdicht, wél een bruikbaar en gebruikersvriendelijk alternatief</h4>
Waterdicht? Nee, vast niet. Maar de meeste spammers werken toch écht met robots die geen javascript of jQuery kunnen uitvoeren. Dus ik ga er vanuit dat je hiermee efficiënt veel fornulierspam kunt voorkomen. En je valt je bezoekers er dus helemaal niet mee lastig.<br />
<br />
En nog een potentieel nadeel: er zijn gebruikers die javascript op hun computer volledig hebben uitgeschakeld. Ook daar zal het niet zomaar werken. Maar dat zijn er zo weinig dat dat geen probleem zal zijn. En bovendien werken dan de bekende captcha's natuurlijk ook niet..<br />
<br />
Nog een laatste opmerking, speciaal voor webmasters en programmeurs: bij veel CMS-systemen (Joomla, WordPress enzovoorts) is het niet heel eenvoudig om in de formulierafhandeling te controleren op de aanwezigheid van de dynamisch toegevoegde POST-variabele. Maar het kán natuurlijk wel, en ik geloof dat je met deze methode een prima oplossing hebt voor de formulierspam, en een in veel gevallen bruikbaar alternatief voor die klant-onvriendelijke captcha's.<br />
<br />
<br />
<div>
<br /></div>
Anonymoushttp://www.blogger.com/profile/17522857060117418408noreply@blogger.com0tag:blogger.com,1999:blog-6611720609935529123.post-12620194365257742192015-02-11T12:41:00.000+01:002015-02-11T12:41:22.038+01:00case study: warmteklacht.nl<div style="margin-bottom: 0cm;">
<b>Als PHP-programmeur ben ik breed
inzetbaar. Hieronder vindt u een beknopte beschrijving van één van
de door mij uitgevoerde opdrachten.</b></div>
<div style="margin-bottom: 0cm;">
<b><br /></b></div>
<div style="margin-bottom: 0cm; page-break-before: always;">
<i>Project</i>:
<b>warmteklacht.nl</b></div>
<div style="margin-bottom: 0cm;">
<i>Opdrachtgever</i>:
Lamain Technical Support</div>
<div style="margin-bottom: 0cm;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-jAiy1hPbQxM/VBQa472OPmI/AAAAAAAAAKc/ZgxD6ua8szs/s1600/wasstraat_1.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" src="http://4.bp.blogspot.com/-jAiy1hPbQxM/VBQa472OPmI/AAAAAAAAAKc/ZgxD6ua8szs/s1600/wasstraat_1.png" height="107" width="320" /></a></div>
<div style="margin-bottom: 0cm;">
<i>Opdracht</i>:
</div>
<div style="margin-bottom: 0cm;">
Opdrachtgever wilde een website die als
doel heeft te helpen bij het oplossen van storingen aan
verwarmingsketels. Moderne verwarmingsketels tonen, wanneer ze in
storing zijn gevallen, meestal een specifieke storingscode in het
display van de ketel.</div>
<div style="margin-bottom: 0cm;">
Opdrachtgever heeft de meeste van deze
storingscodes in kaart gebracht en tevens oplossingen voor de
storingen beschreven.
</div>
<div style="margin-bottom: 0cm;">
De te bouwen website moest de volgende
mogelijkheden bieden:</div>
<ul>
<li><div style="margin-bottom: 0cm;">
invoeren van een storingscode door
de gebruiker, waarna de website direct de oorzaak & oplossing
van de storing dient te tonen;</div>
</li>
<li><div style="margin-bottom: 0cm;">
Opzoeken van storingscodes door
middel van het zoeken door ketelmerken en -types;</div>
</li>
</ul>
<div style="margin-bottom: 0cm;">
<br /></div>
<div style="margin-bottom: 0cm;">
<br /></div>
<div style="margin-bottom: 0cm;">
<i>Uitvoering</i>:</div>
<div style="margin-bottom: 0cm;">
Ik heb een beheersysteem gebouwd waarin
opdrachtgever op een eenvoudige manier merken, keteltypes en
storingscodes/oorzaken/oplossingen kan invoeren. Alle gegevens worden
in een database opgeslagen.</div>
<div style="margin-bottom: 0cm;">
De front-end van de website biedt op
een eenvoudige manier aan de bezoeker de mogelijkheid een
storingscode op te zoeken. Wanneer de storing gevonden is ziet de
bezoeker de oorzaak en mogelijke oplossing van de storing.
</div>
<div style="margin-bottom: 0cm;">
Belangrijk onderdeel van het
verdienmodel is het tonen van advertenties op de website.
Functionaliteit voor het toevoegen of wijzigen van advertentiecode is
daarom ook in het beheersysteem ingebouwd.</div>
<div style="margin-bottom: 0cm;">
<br /></div>
<div style="margin-bottom: 0cm;">
Sinds het 'live' gaan in 2013 is onder
andere de volgende extra functionaliteit toegevoegd:</div>
<ul>
<li><div style="margin-bottom: 0cm;">
Er werd een complete webshop
gekoppeld aan de website. Deze webshopsoftware is volledig door mij
ontwikkeld en aangepast voor deze specifieke opdrachtgever. In die
webshop verkoopt opdrachtgever allerlei onderdelen en accessoires op
het gebied van (verwarmings-) installatie techniek.</div>
<div style="margin-bottom: 0cm;">
Indien een gevonden oplossing voor een
storing het nodig maakt een onderdeel te vervangen, dan wordt de
bezoeker middels een link direct verwezen naar het webshop-artikel
om daarmee de storing op te lossen.</div>
</li>
<li><div style="margin-bottom: 0cm;">
Wanneer een oplossing van een
storing in beeld is, wordt de bezoeker aangeboden om online offerte
aan te vragen bij meerdere installateurs in zijn/haar omgeving. Door
in een eenvoudig formuliertje enkele gegevens in te vullen ontvangen
een geselecteerd aantal installateurs een uitnodiging tot het doen
van offerte. Daarbij wordt de installateur al direct op de hoogte
gesteld van de aard van de storing zodat hij gericht een aanbieding
kan doen.</div>
</li>
</ul>
<div style="margin-bottom: 0cm;">
<br /></div>
<div style="margin-bottom: 0cm;">
In een later stadium is een mobiele
versie van de website gebouwd die specifiek gericht is op gebruikers
van tablets en smartphones.</div>
<div style="margin-bottom: 0cm;">
Bovendien zijn inmiddels een versie
voor de Engelse markt en voor de Duitse markt gerealiseerd.<br />
<br />
En begin 2015 is een 'overkoepelende' en meertalige website gerealiseer die realtime middels een API gegevens uit de diverse databases opvraagt en presenteert.</div>
<div style="margin-bottom: 0cm;">
<br /></div>
<div style="margin-bottom: 0cm;">
</div>
<div style="margin-bottom: 0cm;">
<br /></div>
Anonymoushttp://www.blogger.com/profile/17522857060117418408noreply@blogger.com0tag:blogger.com,1999:blog-6611720609935529123.post-53713677736210328572014-09-13T12:31:00.002+02:002014-09-13T12:31:57.657+02:00case study: autowasstraten online verkoop<div style="margin-bottom: 0cm;">
<b>Als PHP-programmeur ben ik breed
inzetbaar. Hieronder vindt u een beknopte beschrijving van één van
de door mij uitgevoerde opdrachten.</b></div>
<div style="margin-bottom: 0cm;">
<b><br /></b></div>
<div style="margin-bottom: 0cm;">
<i>Project</i>: <b>autowasstraten
online verkoop</b></div>
<div style="margin-bottom: 0cm;">
<i>Opdrachtgever</i>: <b><a href="http://www.webbio.nl/" target="_blank">webbio.nl</a></b></div>
<div style="margin-bottom: 0cm;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-PlbQBl39Xzk/VBQZ3hN0VQI/AAAAAAAAAKQ/S6rQskHqHKk/s1600/wasstraat1.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" src="http://4.bp.blogspot.com/-PlbQBl39Xzk/VBQZ3hN0VQI/AAAAAAAAAKQ/S6rQskHqHKk/s1600/wasstraat1.png" height="239" width="320" /></a></div>
<div style="margin-bottom: 0cm;">
<i>Opdracht</i>:</div>
<div style="margin-bottom: 0cm;">
Een keten van auto-wasstraten in het
westen van het land had al een website. Men wilde echter diverse
zaken via internet gaan verkopen:</div>
<ul>
<li><div style="margin-bottom: 0cm;">
losse wasbeurten</div>
</li>
<li><div style="margin-bottom: 0cm;">
abonnementen</div>
</li>
<li><div style="margin-bottom: 0cm;">
prepaid saldokaarten</div>
</li>
</ul>
<div style="margin-bottom: 0cm;">
Ook wilde men dat de diverse
wasstraat-vestigingen middels eigen software ook abonnementen en
prepaid waspassen konden gaan verkopen. Bovendien moest de
afhandeling van alle aangekochte producten volledig web-based kunnen
worden afgehandeld.
</div>
<div style="margin-bottom: 0cm;">
Als laatste moest er een beheersysteem
worden gebouwd waarin de eigenaar van de wasstraten het beheer kon
voeren over vestigingen, klanten, abonnementen en marketingacties.</div>
<div style="margin-bottom: 0cm;">
<br /></div>
<div style="margin-bottom: 0cm;">
</div>
<div style="margin-bottom: 0cm;">
Een standaard webshop is niet geschikt
voor het verkopen van abonnementen en prepaid saldokaarten. Een
maatwerk oplossing moest gebouwd worden.</div>
<div style="margin-bottom: 0cm;">
<br /></div>
<div style="margin-bottom: 0cm;">
<i>Uitvoering</i>:</div>
<div style="margin-bottom: 0cm;">
Ik heb bestaande, door mijzelf
ontwikkelde webshopsoftware aangepast en sterk uitgebreid zodat het
voldoet aan de wensen van de opdrachtgever.
</div>
<div style="margin-bottom: 0cm;">
<br /></div>
<div style="margin-bottom: 0cm;">
Zo kunnen klanten losse wasbeurten
kopen, maar ook abonnementen voor een door de klant zelf te bepalen
periode en ingangsdatum. Bovendien kan men online een prepaid waspas
aanschaffen, opwaarderen of de transacties op de prepaid kaart
bekijken.</div>
<div style="margin-bottom: 0cm;">
<br /></div>
<div style="margin-bottom: 0cm;">
De verkochte losse wasbeurten,
abonnementen of prepaid waspas worden automatisch direct na ontvangst
van de betaling (via iDeal of PayPal kan men betalen) via email
uitgeleverd aan de klant. Men ontvangt dan een afhaalbon (pdf) met
daarop een unieke afhaalcode, in de vorm van een QR-code. Deze
afhaalbon kan de klant printen en meenemen naar de autowasstraat,
maar men kan hem ook op de smartphone laten staan.
</div>
<div style="margin-bottom: 0cm;">
<br /></div>
<div style="margin-bottom: 0cm;">
De medewerker op de wasstraat leest met
een barcodescanner de QR-code in, vanaf papier of rechtstreeks vanaf
het beeldscherm van de smartphone. De software herkent de gescande
afhaalcode en controleert of de code nog geldig is. De medewerker
ziet op zijn scherm precies welk product de klant online heeft
aangekocht en kan de wasbeurt leveren.
</div>
<div style="margin-bottom: 0cm;">
<br /></div>
<div style="margin-bottom: 0cm;">
In geval van een prepaid waspas wordt
de waarde van een wasbeurt afgeboekt van het pre-paid saldo en
ontvangt de klant per email netjes een bevestiging van zijn
transactie.
</div>
<div style="margin-bottom: 0cm;">
Uiteraard kan de medewerker op de
wasstraat zelf ook online prepaid waspassen en abonnementen verkopen.</div>
<div style="margin-bottom: 0cm;">
<br /></div>
<div style="margin-bottom: 0cm;">
Aan het eind van de dag worden alle
transacties netjes op een dagstaat verzameld.</div>
<div style="margin-bottom: 0cm;">
<br /></div>
<div style="margin-bottom: 0cm;">
</div>
<div style="margin-bottom: 0cm;">
Voor de eigenaar van de wasstraten heb
ik software gebouwd waarmee hij inzicht krijgt in de transacties die
hebben plaatsgevonden op de wasstraten. Men kan o.a. resultaten
opvragen per periode, per wasstraat of per marketing-actie (mailing).
Maar ook het toevoegen/wijzigen/verwijderen van wasstraat-vestigingen
en gebruikers is mogelijk gemaakt.</div>
Anonymoushttp://www.blogger.com/profile/17522857060117418408noreply@blogger.com0tag:blogger.com,1999:blog-6611720609935529123.post-86855240103960521452014-09-13T12:30:00.001+02:002014-09-13T12:31:57.662+02:00case study: beheer van vaccinatietrajecten<b>Als PHP-programmeur ben ik breed inzetbaar. Hieronder vindt u een beknopte beschrijving van één van de door mij uitgevoerde opdrachten.</b><br />
<b><br /></b>
<br />
<div style="margin-bottom: 0cm; page-break-before: always;">
<i>Project</i>:
<b>beheer van vaccinatietrajecten</b></div>
<div style="margin-bottom: 0cm;">
<i>Opdrachtgever</i>:
Een opdrachtgever in de medische branche</div>
<div style="margin-bottom: 0cm;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-wHqrTASESZE/VBQbVZptY_I/AAAAAAAAAKk/YtPf4NytTs8/s1600/vaccinaties1.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" src="http://1.bp.blogspot.com/-wHqrTASESZE/VBQbVZptY_I/AAAAAAAAAKk/YtPf4NytTs8/s1600/vaccinaties1.png" height="207" width="320" /></a></div>
<div style="margin-bottom: 0cm;">
<i>Opdracht</i>:</div>
<div style="margin-bottom: 0cm;">
Opdrachtgever voert
vaccinatie-programma's uit. Voornamelijk op onderwijsinstellingen,
maar ook voor particulieren. Denk daarbij aan vaccinatietrajecten
voor Hepatitis B of aan vaccinaties voor reizigers naar exotische
bestemmingen waarbij vaccinaties aangeraden worden of verplicht zijn.</div>
<div style="margin-bottom: 0cm;">
<br /></div>
<div style="margin-bottom: 0cm;">
Een vaccinatietraject bestaat vaak uit
een reeks van vaccinaties gedurende een bepaalde periode, gevolgd
door bijvoorbeeld een bloedafname om de titerwaarde te kunnen
bepalen.</div>
<div style="margin-bottom: 0cm;">
<br /></div>
<div style="margin-bottom: 0cm;">
Opdrachtgever hield voorheen alle
vaccinatietrajecten bij middels excel-documenten maar wilde een
andere, meer werkbare oplossing. Bovendien wilde opdrachtgever dat
het verwerken en administreren van uitgevoerde vaccinaties online zou
plaatsvinden omdat men erg vaak op locatie de vaccinaties uitvoerde
met meerdere gebruikers.</div>
<div style="margin-bottom: 0cm;">
<br /></div>
<div style="margin-bottom: 0cm;">
<i>Uitvoering</i>:</div>
<div style="margin-bottom: 0cm;">
Een uitgebreide database met
bijbehorend beheersysteem werd door mij ontworpen op basis van de
wensen van de opdrachtgever. Zo werd het mogelijk om
vaccinatietrajecten te definiëren, klanten en hun eventuele
vestigingen in te voeren en te beheren, assistenten en
contactpersonen te beheren enzovoorts.</div>
<div style="margin-bottom: 0cm;">
<br /></div>
<div style="margin-bottom: 0cm;">
Per klant of vestiging kunnen
vaccinatieprojecten worden gekoppeld waaraan dan weer een aantal
cliënten kan worden toegevoegd (handmatig of door middel van het
importeren van excel-documenten). Uitgevoerde vaccinaties worden
automatisch geregistreerd in het systeem waardoor voor alle
gebruikers altijd actueel inzicht is wie wanneer en door wie er is
gevaccineerd.</div>
<div style="margin-bottom: 0cm;">
<br /></div>
<div style="margin-bottom: 0cm;">
Opdrachtgever kan middels
managementlijsten inzicht krijgen in de status van
vaccinatieprojecten en gebruikt deze gegevens als basis voor zijn
facturatie.</div>
<div style="margin-bottom: 0cm;">
<br /></div>
<div style="margin-bottom: 0cm;">
De web-applicatie biedt verder
mogelijkheden als het versturen van mailings (gepersonaliseerd en
indien gewenst met bijlages) naar cliënten, en beschikt over een
nieuwsberichten-systeem om gebruikers in informeren, al of niet
gepersonaliseerd.</div>
<div style="margin-bottom: 0cm;">
<br /></div>
<br />
<div style="margin-bottom: 0cm;">
</div>
<br />
<div style="margin-bottom: 0cm;">
Een complete en uitgebreide
web-applicatie is het resultaat. Voor opdrachtgever een aanzienlijke
verbetering van de workflow, minder kans op administratieve fouten en
daardoor een structureel betere bedrijfsvoering.</div>
Anonymoushttp://www.blogger.com/profile/17522857060117418408noreply@blogger.com0tag:blogger.com,1999:blog-6611720609935529123.post-18410046466262983862014-09-13T12:30:00.000+02:002014-09-13T12:31:57.653+02:00case study: klantbeheer voor online taalcursussen<b>Als PHP-programmeur ben ik breed inzetbaar. Hieronder vindt u een beknopte beschrijving van één van de door mij uitgevoerde opdrachten.</b><br />
<b><br /></b>
<br />
<div style="margin-bottom: 0cm;">
<i>Project</i>:
<b>klantbeheer voor online taalcursussen</b><br />
<i>Opdrachtgever</i>:
<a href="http://www.addisco.nl/" target="_blank">addisco.nl</a></div>
<div style="margin-bottom: 0cm;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-dTVGEc3tCJk/VBQb9TuSYoI/AAAAAAAAAKw/WZssT4lWc5s/s1600/addisco.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" src="http://4.bp.blogspot.com/-dTVGEc3tCJk/VBQb9TuSYoI/AAAAAAAAAKw/WZssT4lWc5s/s1600/addisco.png" height="151" width="320" /></a></div>
<div style="margin-bottom: 0cm;">
<i>Opdracht</i>:
</div>
<div style="margin-bottom: 0cm;">
Opdrachtgever is
een bedrijf dat talencursussen geeft (Latijn en Grieks).</div>
<div style="margin-bottom: 0cm;">
Men wilde een
systeem waarbij het mogelijk werd ook online talencursussen aan te
bieden. Men beschikte al over een website en ook de online cursussen
waren al gereed voor gebruik. Wat nog ontbrak was een systeem om de
toegang tot de online cursussen te beheren.</div>
<div style="margin-bottom: 0cm;">
<br /></div>
<div style="margin-bottom: 0cm;">
<i>Uitvoering</i>:</div>
<div style="margin-bottom: 0cm;">
Een
web-applicatie werd door mij ontworpen die onder andere de volgende
mogelijkheden biedt:</div>
<ul>
<li><div style="margin-bottom: 0cm;">
Opdrachtgever
kan cursussen definiëren, een aanmeldlinks genereren waarmee
cursisten zichzelf kunnen aanmelden voor een cursus.</div>
</li>
<li><div style="margin-bottom: 0cm;">
Hij kan
beheren welke cursisten toegang hebben tot welke online cursussen en
gedurende welke periode die toegang geldig is.</div>
</li>
<li><div style="margin-bottom: 0cm;">
Cursisten
kunnen inloggen om een online-cursus te openen. Er is ervoor gezorgd
dat een cursist niet vaker dan 1x tegelijk ingelogd kan zijn en een
cursist krijgt alleen toegang binnen de door opdrachtgever
gedefinieerde periode.</div>
</li>
<li><div style="margin-bottom: 0cm;">
De
front-end pagina's voor de cursisten zijn meertalig (Nederlandstalig
en Engelstalig).</div>
</li>
</ul>
<div style="margin-bottom: 0cm;">
<br /></div>
<br />
<div style="margin-bottom: 0cm;">
Met deze web-app
heeft opdrachtgever haar dienstenpakket uitgebreid met online
cursussen en zijn er mogelijkheden geopend voor verdere uitbreiding
van de bedrijfsactiviteiten.</div>
Anonymoushttp://www.blogger.com/profile/17522857060117418408noreply@blogger.com0tag:blogger.com,1999:blog-6611720609935529123.post-65913062377991210332014-03-24T11:03:00.000+01:002014-03-24T11:03:28.480+01:00css-tip: steeds de laatste css-versie aanbieden met phpTijdens het wijzigen van de opmaak van een website zal je als designer geregeld de css-code aanpassen. En je weet ook dat je, om de nieuwe css te laten renderen, de webpagina met de F5-toets (windows) moet verversen. Doe je dat niet, dan gebruikt de browser nog de oude css-code omdat die nog in de cache staat.<br /><br />Je weet dus ook dat wanneer je je css-bestand gewijzigd hebt en op je webserver geplaatst, dat dan de bezoekers van je website in principe ook niet meteen de nieuwe css-code krijgt, en dus geen bijgewerkte opmaak. En dat is niet wat je wilt natuurlijk.<br /><br />Er zijn verschillende oplossingen. De meest voor de hand liggende (en beste) oplossing is om de naam van je css-bestand te wijzigen zodra je wijzigingen in je css-bestand heb aangebracht. De browsercache van de bezoekers kent die nieuwe naam niet en zal dus het nieuwe bestand downloaden en renderen.<br />Alleen soms is dat een beetje gedoe, zeker als je regelmatig kleine wijzigingen aanbrengt.<br /><br />Er is een simpel trucje om niet steeds de bestandsnaam te hoeven wijzigen. Wanneer je in je html de aanroep naar het css-bestand uitbreidt met een klein stukje PHP-code dan wordt altijd de meest recente css-versie van de server gehaald en gerenderd.<br /><br />De oorspronkelijke aanroep is bijvoorbeeld:<br /><i><link rel="stylesheet" type="text/css" href="css/mijncss.css" media="screen, projection"> </i><br /><br />Wijzig deze aanroep door dit kleine stukje code in te voegen: <i>?v=<?php echo time()?></i><br /><br />De nieuwe aanroep wordt dus:<br /><i><link rel="stylesheet" type="text/css" href="css/paqqa2.css?v=<?php echo time()?>" media="screen, projection"></i> <br /><br />Nu is de url van het css-bestand bij elke pagina-aanroep anders, en dus krijgt de bezoeker elke pagina-aanroep het meest recente css-bestand te zien.<br /><br />Let op: dit is slechts een trucje wat handig is als je in je 'live' website aan het werken bent en je je bezoekers gelijk het aangepaste css-bestand wil aanbieden. Nadeel is natuurlijk dat bij elke pagina-aanroep het css-bestand geladen moeten worden en dat vertraagt de weergave van je website, en het kost onnodige bandbreedte.<br /><br />Dus zodra je wijzigingen definitief zijn: wijzig de naam van je css-bestand alsnog daadwerkelijk (en je aanroep in de html natuurlijk ook). Op die manier zal geen enkele gebruiker nog de oude css te zien krijgen.<br /><br />
<span style="font-family: monospace; white-space: pre-wrap;"><br /></span>Anonymoushttp://www.blogger.com/profile/17522857060117418408noreply@blogger.com0tag:blogger.com,1999:blog-6611720609935529123.post-88931445473881720372012-10-17T19:54:00.003+02:002013-02-26T14:30:28.292+01:00Vraag toestemming voor cookies van Google Analytics<h2>
Eenvoudig cookie-toestemmings-script voor Google Analytics</h2>
Enorm veel webshops en andere websites maken gebruik van cookies om de website aan te sturen, winkelwagentjes te vullen, enzovoorts. Handige en noodzakelijke cookies dus. <br />
Maar heel veel site gebruiken ook Google Analytics. En de cookies die Google Analytics op de computer van je websitebezoeker installeert, die zijn niet persé noodzakelijk voor het goed functioneren van je website. <br />
<br />
Nu is er <a href="http://www.rijksoverheid.nl/onderwerpen/ict/veilig-online-en-e-privacy/internetbezoek-volgen-met-cookies" target="_blank">sinds 5 juni 2012 een wettelijke verplichting</a> in Nederland om bezoekers de keus te geven of ze cookies van onder andere Google Analytics willen accepteren. En die wet verplicht iedere (ja, iedere) website aan de bezoeker expliciet toestemming te vragen voor het plaatsen van die niet-noodzakelijke cookies. Dat geldt dus ook voor jouw website, als je daar Google Analytics op geïnstalleerd hebt.<br />
Je website zal je dus moeten aanpassen om expliciet toestemming te krijgen van je bezoekers voor het plaatsen van de Google Analytics cookies. <br />
<br />
<h3>
Hierbij een oplossing die je simpel in je website kunt toepassen om de toestemming voor de cookies van Google Analytics te regelen.</h3>
Met dit script kan de bezoeker van je website eenvoudig aangeven of hij wél of geen toestemming geeft om de niet-essentiële cookies van Google Analytics te accepteren. Google Analytics wordt alleen opgestart indien er wel toestemming is gegeven. De gebruiker kan op ieder moment met 1 klik de cookie-instelling wijzigen. <br />
<br />
Het script werkt in principe in alle websites. Dus ook in je Joomla, Wordpress of welk ander CMS je ook gebruikt. En dus ook in VirtueMart en andere webshops! <br />
<br />
Het script kan ook simpel worden uitgebreid naar andere niet-persé-noodzakelijke cookies op je website, maar ik denk dat heel veel sites alleen de Google Analytics cookies hoeven te 'regelen'. <br />
<h3>
</h3>
<h3>
Downloaden en installeren</h3>
Download het volgende bestandje en sla het op in een map op je webserver met de naam 'js' *:<br />
<a href="http://www.paqqa.nl/downloads/cookie-permissie.js" target="_blank">cookie-permissie.js</a><br />
<br />
Vervolgens plak je de volgende code in de head van je webpagina(s), bijvoorbeeld vlak voor de afsluitende </head>-tag:<br />
<br />
<div style="font-family: courier; font-size: 12px;">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><br />
<script src="js/cookie-permissie.js" type="text/javascript"></script><br />
<script type="text/javascript"><br />
if (getCookie('_paqqa') == 'allow')<br />
{<br />
var _gaq = _gaq || [];
_<br />
gaq.push(['_setAccount', '<b>JOUW-GOOGLE-ID</b>']);<br />
_gaq.push(['_gat._anonymizeIp']);<br />
_gaq.push(['_trackPageview']);<br />
(function()<br />
{<br />
var ga = document.createElement('script');<br />
ga.type = 'text/javascript';<br />
ga.async = true;<br />
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + <br />
'.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0];<br />
s.parentNode.insertBefore(ga, s);<br />
})();<br />
}<br />
</script>
</div>
<div style="font-family: courier; font-size: 12px;">
</div>
<div>
<br />
<b>Let op</b>:<br />
<span style="background-color: white; color: #272727; font-family: Tahoma, Arial; font-size: 14px; line-height: 20px;">De eerste regel in bovenstaande code is een aanroep naar jQuery. Nu gebruiken veel websites al jQuery en is het dus goed mogelijk dat in de head van jouw website de aanroep naar jQuery al gedaan wordt. Als dat zo is, dan even de jQuery-regel uit bovenstaande code verwijderen. Dat voorkomt conflicten.</span><br />
<span style="background-color: white; color: #272727; font-family: Tahoma, Arial; font-size: 14px; line-height: 20px;"><br /></span>
<em>(*) In plaats van de map 'js' kan je natuurlijk ook een andere map gebruiken. Zorg dan wel dat je die map-naam in de derde regel van bovenstaande code aanpast.</em></div>
<h3>
</h3>
<h3>
Werkt het?</h3>
Als alles goed is ben je nu al bijna klaar. Vul alleen in het bovenstaande script nog even je eigen Google-Analytics-ID in, anders worden je statistieken niet bijgehouden. <br />
Let op: de cookie-instelling bovenin je scherm zie je slechts één keer, namelijk de eerste keer dat je de pagina bezoekt. Zo wordt je bezoeker dus niet bij ieder bezoek lastig gevallen door de opvallende cookie-keuzemogelijkheid bovenin het scherm. Onderaan de webpagina blijft wél altijd de keuzemogelijkheid staan. Precies zoals de Nederlandse wetgever het graag wil dus.<br />
<br />
<h3>
Werkt het niet?</h3>
Wanneer je alles goed geïnstalleerd hebt zou je bovenin óf onderin je webpagina's voortaan een mogelijkheid moeten zien om de cookie-instelling te veranderen. Zie je dat niet, dan is er iets nog niet goed gegaan. Als het script niet lijkt te werken controleer dan of je het javascript-bestandje hebt geplaatst in de map 'js'. Als die map nog niet bestaat, moet je die eerst even aanmaken. <br />
<br />
<br />
<h3>
Waarom is dit script nou zo handig?</h3>
Er zijn online veel vergelijkbare oplossingen te vinden voor de cookie-wetgeving. Veel daarvan hebben het nadeel dat ze, iedere keer als een webpagina wordt geladen, verbinding maken met een andere server dan die van jou, omdat ze daar de scripts vanaf moeten halen. Dat is slecht voor de snelheid van je website. Je hebt bovendien geen invloed op hoe de opmaak van de cookie-venstertjes eruit ziet. En de installatieprocedure is soms nogal ingewikkeld (..). <br />
Mijn script draait op je eigen webserver, en de opmaak van de vensters kan je 100% zelf instellen. Hetzij met je eigen css-sheet, óf door het aanpassen van de opmaakinstellingen in het script zelf. Lekker snel dus, en lekker makkelijk. <br />
<br />
<br />
<h2 style="background-color: white; color: #272727; font-family: Tahoma, Arial; font-size: 15px;">
Waarom is dit script nou zo ónhandig?</h2>
<div>
<div style="background-color: white; color: #272727; font-family: Tahoma, Arial; font-size: 14px; line-height: 20px;">
Het is bekend dat heel veel mensen, als ze de vraag gesteld wordt, géén expliciete toestemming geven voor het plaatsen van niet-essentiële cookies. Meer dan 90% zelfs zou het weigeren. En dat vinden veel webmasters niet leuk omdat ze dan veel minder informatie krijgen van hun Google Analytics account.<br /></div>
<div style="background-color: white; color: #272727; font-family: Tahoma, Arial; font-size: 14px; line-height: 20px;">
Daarom wordt door webmasters vaak een variant gebruikt waarbij de bezoeker van de website wel wordt geïnformeerd over het gebruik van de cookies, maar niet expliciet om toestemming wordt gevraagd.<br /></div>
<div style="background-color: white; color: #272727; font-family: Tahoma, Arial; font-size: 14px; line-height: 20px;">
Mijn script werkt volgens het principe van expliciete toestemming. Met een klein beetje kennis van javascript pas je het echter snel aan naar een versie die werkt volgens het principe van niet-expliciete toestemming.</div>
</div>
<br />
<h4>
Disclaimer</h4>
<em>Iedere eigenaar van een website is zelf verantwoordelijk voor de inhoud van zijn website. Ik bied deze oplossing voor de cookie-wetgeving aan, maar accepteer geen enkele verantwoordelijkheid voor wat je ermee doet. De software is naar eer en geweten gemaakt en voldoet naar mijn idee aan de nieuwe wetgeving. Maar ik zal nooit en te nimmer aansprakelijkheid accepteren voor welke schade dan ook, ontstaan uit het gebruik van mijn software. "As is", noemen ze dat in goed engels. En voel je volledig vrij de software te gebruiken voor je eigen websites, commercieel of niet. </em>Anonymoushttp://www.blogger.com/profile/17522857060117418408noreply@blogger.com0tag:blogger.com,1999:blog-6611720609935529123.post-87052979025880611372012-09-27T11:37:00.000+02:002012-09-27T18:53:40.691+02:00<div align="center" style="margin-bottom: 0cm; text-decoration: none;">
<span style="font-size: medium;"><b>AjaxClickSensor:</b></span></div>
<div align="center" style="margin-bottom: 0cm;">
<br /></div>
<div align="center" style="margin-bottom: 0cm;">
<span style="font-size: medium;"><i><u>Eenvoudig clicks op je webpagina's registreren</u></i></span></div>
<div style="margin-bottom: 0cm;">
<br /></div>
<div style="margin-bottom: 0cm;">
<br /></div>
<div style="margin-bottom: 0cm;">
<span style="font-size: medium;"><b>Wat is de AjaxClickSensor?</b></span></div>
<div style="margin-bottom: 0cm;">
De AjaxClickSensor is een eenvoudig php-script in combinatie met javascript/jQuery dat clicks op een pagina registreert en meldt aan de beheerder of SEO-manager van een website.</div>
<div style="margin-bottom: 0cm;">
<br /></div>
<div style="margin-bottom: 0cm;">
Een 'onClick'-event handler wordt gekoppeld aan een willekeurige link op een webpagina. Wanneer de link door een bezoeker wordt aangeklikt dan wordt middels een ajax-aanroep een emailbericht gestuurd naar de beheerder van de website zodat hij weet cq meet dat die betreffende link is geklikt.</div>
<div style="margin-bottom: 0cm;">
<br /></div>
<div style="margin-bottom: 0cm;">
<br /></div>
<div style="margin-bottom: 0cm;">
<span style="font-size: medium;"><b>Wanneer is deze clicksensor handig?</b></span></div>
<div style="margin-bottom: 0cm;">
De AjaxClickSensor kan je op diverse manieren toepassen.</div>
<div style="margin-bottom: 0cm;">
Bijvoorbeeld wanneer je voor SEO-doeleinden wil weten hoe vaak op een bepaalde link is geklikt. Handig bijvoorbeeld bij email-links (<a href="mailto:..) want die worden door Google Analytics niet gemeten.</div>
<div style="margin-bottom: 0cm;">
Maar ook is dit handig bij de tegenwoordig steeds vaker voorkomende 'one-page design'-websites. Die one-page websites reageren wel op clicks van gebruikers, maar laden dan geen nieuwe html-pagina. Analyseprogramma's als Google Analytics zullen die clicks dus ook niet noteren. Een website eigenaar die geïnteresseerd is in het clickgedrag van de bezoekers kan met de AjaxClickSensor alsnog over die informatie gaan beschikken en kan er gebruik van maken om bijvoorbeeld de usability te verbeteren of ten behoeve van de SEO.</div>
<div style="margin-bottom: 0cm;">
<br /></div>
<div style="margin-bottom: 0cm;">
Een andere mogelijke toepassing is voor de zogenaamde anchor-links in de html. Een link dus die verwijst naar een anchor-tekst binnen dezelfde webpagina. Ook clicks op die links kan je simpel meten met de AjaxClickSensor. Bijvoorbeeld wanneer je een faq-pagina hebt met 'veelgestelde vragen en antwoorden'. De AjaxClickSensor maakt het erg simpel om er achter te komen welke vraag & antwoord het meest door de bezoekers van die pagina is gelezen. </div>
<div style="margin-bottom: 0cm;">
<br /></div>
<div style="margin-bottom: 0cm;">
<span style="font-size: medium;"><b>Wanneer is de clicksensor niet handig?</b></span></div>
<div style="margin-bottom: 0cm;">
De AjaxClickSensor is deels een javascript toepassing en werkt dus niet bij gebruikers die javascript in hun browser hebben uitgeschakeld.</div>
<div style="margin-bottom: 0cm;">
<br /></div>
<div style="margin-bottom: 0cm;">
<span style="font-size: medium;"><b>Uitbreidingsmogelijkheden</b></span></div>
<div style="margin-bottom: 0cm;">
De AjaxClickSensor is in dit voorbeeld gekoppeld aan de onClick event handler. Natuurlijk kan je er ook een andere event handler aan hangen, zoals onSubmit(), onBlur(), onChange(), onLoad(), … enzovoorts.</div>
<div style="margin-bottom: 0cm;">
<br /></div>
<div style="margin-bottom: 0cm;">
In dit voorbeeld is de actie die de AjaxClickSensor uitvoert eenvoudig: het stuurt een emailbericht naar de beheerder van de website met daarin de boodschap dat er een click is geregistreerd. </div>
<div style="margin-bottom: 0cm;">
Maar je kunt er natuurlijk ook andere dingen mee doen. Zoals het registreren van de click in een database ten behoeve van je bezoekersstatistieken bijvoorbeeld. </div>
<div style="margin-bottom: 0cm;">
<br /></div>
<div style="margin-bottom: 0cm;">
Ook zou je alle clicks op alle links op je pagina's op deze manier kunnen registreren. Je legt daarmee dan feitelijk de basis voor een systeem waarin je de bezoekersstatistieken van je complete site kunt gaan bijhouden. Je eigen Google Analytics dus.. zonder dat je ook maar iets met Google te maken hebt. Interessant, gezien de huidige wetgeving rond privacy en cookies.</div>
<div style="margin-bottom: 0cm;">
<br /></div>
<div style="margin-bottom: 0cm;">
En zo zou je nog wel andere dingen kunnen bedenken.. Automatisch tweets.. automatische Facebook-updates.. registreren van advertentie-clicks.. </div>
<div style="margin-bottom: 0cm;">
<br /></div>
<div style="margin-bottom: 0cm;">
Doe er je voordeel mee!</div>
<div style="margin-bottom: 0cm;">
<br /></div>
<div style="margin-bottom: 0cm; page-break-before: always;">
<span style="font-size: medium;"><b>Wat zijn de vereisten?</b></span></div>
<div style="margin-bottom: 0cm;">
Om de AjaxClickSensor te kunnen gebruiken moet jouw hosting-provider php ondersteunen. </div>
<div style="margin-bottom: 0cm;">
Dat doen ze allemaal voor zover ik weet, dus eigenlijk zou het altijd moeten werken.</div>
<div style="margin-bottom: 0cm;">
<br /></div>
<div style="margin-bottom: 0cm;">
<br /></div>
<div style="margin-bottom: 0cm;">
<span style="font-size: medium;"><b>Installatiehandleiding:</b></span></div>
<div style="margin-bottom: 0cm;">
Maak op de server in de www-map van je website een map 'ajax' aan en plaats daarin een bestandje met als naam acs.php. De volgende php-code plaats je in dat bestand:</div>
<div style="margin-bottom: 0cm;">
<br /></div>
<div style="margin-bottom: 0cm;">
<span style="font-family: Courier New, monospace;"><span style="font-size: xx-small;"><?php </span></span></div>
<div style="margin-bottom: 0cm;">
<span style="font-family: Courier New, monospace;"><span style="font-size: xx-small;">/**</span></span></div>
<div style="margin-bottom: 0cm;">
<span style="font-family: Courier New, monospace;"><span style="font-size: xx-small;">* @file acs.php (Ajax Click Sensor)</span></span></div>
<div style="margin-bottom: 0cm;">
<span style="font-family: Courier New, monospace;"><span style="font-size: xx-small;">* @param $txt : bevat de linktekst (string)</span></span></div>
<div style="margin-bottom: 0cm;">
<span style="font-family: Courier New, monospace;"><span style="font-size: xx-small;">* @param $src : bevat de url van de aanroepende pagina, of null (string)</span></span></div>
<div style="margin-bottom: 0cm;">
<span style="font-family: Courier New, monospace;"><span style="font-size: xx-small;">* @const GEADRESSEERDE : emailadres van de persoon waar de clickmelding naartoe gemaild moet worden</span></span></div>
<div style="margin-bottom: 0cm;">
<span style="font-family: Courier New, monospace;"><span style="font-size: xx-small;">* @author Paul van Eck (www.paulvaneck.nl)<br />* Dit script ontvangt minimaal 1 en maximaal 2 parameters van een aanroepend programma en stuurt een<br />email-bericht naar GEADRESSEERDE</span></span></div>
<div style="margin-bottom: 0cm;">
<span style="font-family: Courier New, monospace;"><span style="font-size: xx-small;">*/</span></span></div>
<div style="margin-bottom: 0cm;">
<br /></div>
<div style="margin-bottom: 0cm;">
<span style="font-family: Courier New, monospace;"><span style="font-size: xx-small;">if (isset($_POST['param_1'])) $txt = $_POST['param_1']; else $txt='ajax/acs.php aanroep zonder parameter 1.';</span></span></div>
<div style="margin-bottom: 0cm;">
<span style="font-family: Courier New, monospace;"><span style="font-size: xx-small;">if (isset($_POST['param_2'])) $src = $_POST['param_2']; else $src='Onbekend.';</span></span></div>
<div style="margin-bottom: 0cm;">
<br /></div>
<div style="margin-bottom: 0cm;">
<span style="font-family: Courier New, monospace;"><span style="font-size: xx-small;">if (isset($_POST['param_1'])) {</span></span></div>
<div style="margin-bottom: 0cm;">
<span style="font-family: Courier New, monospace;"><span style="font-size: xx-small;">// alleen verder gaan als tenminste parameter 1 is gestuurd </span></span></div>
<div style="margin-bottom: 0cm;">
</div>
<div style="margin-bottom: 0cm;">
<span style="font-family: Courier New, monospace;"><span style="font-size: xx-small;">define('GEADRESSEERDE','jouwemail@jouwdomein.nl');</span></span></div>
<div style="margin-bottom: 0cm;">
<br /></div>
<div style="margin-bottom: 0cm;">
<span style="font-family: Courier New, monospace;"><span style="font-size: xx-small;">$to=GEADRESSEERDE;</span></span></div>
<div style="margin-bottom: 0cm;">
<span style="font-family: Courier New, monospace;"><span style="font-size: xx-small;">$subject = $txt;</span></span></div>
<div style="margin-bottom: 0cm;">
<span style="font-family: Courier New, monospace;"><span style="font-size: xx-small;">$message = $txt."\n";</span></span></div>
<div style="margin-bottom: 0cm;">
<span style="font-family: Courier New, monospace;"><span style="font-size: xx-small;">$message .= $src."\n\n";</span></span></div>
<div style="margin-bottom: 0cm;">
<span style="font-family: Courier New, monospace;"><span style="font-size: xx-small;">$message .= "Tijd: ".date('Y-m-d H:i:s')."\n";</span></span></div>
<div style="margin-bottom: 0cm;">
<span style="font-family: Courier New, monospace;"><span style="font-size: xx-small;">$message .= "Einde bericht.\n\n\n";</span></span></div>
<div style="margin-bottom: 0cm;">
<span style="font-family: Courier New, monospace;"><span style="font-size: xx-small;">$fromEmail=GEADRESSEERDE;</span></span></div>
<div style="margin-bottom: 0cm;">
<span style="font-family: Courier New, monospace;"><span style="font-size: xx-small;">$headers = "From: ".$fromEmail . "\r\n" . </span></span></div>
<div style="margin-bottom: 0cm;">
<span style="font-family: Courier New, monospace;"><span style="font-size: xx-small;">"Reply-To: ".$fromEmail . "\r\n" .</span></span></div>
<div style="margin-bottom: 0cm;">
<span style="font-family: Courier New, monospace;"><span style="font-size: xx-small;">"X-Mailer: PHP/" . phpversion();</span></span></div>
<div style="margin-bottom: 0cm;">
<span style="font-family: Courier New, monospace;"><span style="font-size: xx-small;">$resultaat=mail($to, $subject, $message, $headers); </span></span></div>
<div style="margin-bottom: 0cm;">
</div>
<div style="margin-bottom: 0cm;">
<span style="font-family: Courier New, monospace;"><span style="font-size: xx-small;">} </span></span></div>
<div style="margin-bottom: 0cm;">
<br /></div>
<div style="margin-bottom: 0cm;">
<span style="font-family: Courier New, monospace;"><span style="font-size: xx-small;">if ($resultaat) $antwoord="1"; else $antwoord="0";</span></span></div>
<div style="margin-bottom: 0cm;">
<span style="font-family: Courier New, monospace;"><span style="font-size: xx-small;">// 1 = email goed verstuurd, 0 = email niet goed verstuurd</span></span></div>
<div style="margin-bottom: 0cm;">
<span style="font-family: Courier New, monospace;"><span style="font-size: xx-small;">echo $antwoord;</span></span></div>
<div style="margin-bottom: 0cm;">
<span style="font-family: Courier New, monospace;"><span style="font-size: xx-small;">?></span></span></div>
<div style="margin-bottom: 0cm;">
<br /></div>
<div style="margin-bottom: 0cm;">
Let er op dat je de waarde van <i>GEADRESSEERDE</i> goed invult. Vervang in het script dus jouwemail@jouwdomein.nl door je eigen emailadres, anders raakt er iemand bij jouwdomein.nl gestrest..</div>
<div style="margin-bottom: 0cm;">
<br /></div>
<div style="margin-bottom: 0cm;">
Vlak voor de afsluitende tag </head> in je html-document (je webpagina dus) plaats je vervolgens het volgende stukje javascript:</div>
<div style="margin-bottom: 0cm;">
<br /></div>
<div style="margin-bottom: 0cm;">
<span style="font-family: Courier New, monospace;"><span style="font-size: xx-small;"><script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script></span></span></div>
<div style="margin-bottom: 0cm;">
<br /></div>
<div style="margin-bottom: 0cm;">
<span style="font-family: Courier New, monospace;"><span style="font-size: xx-small;"><script type="text/javascript"></span></span></div>
<div style="margin-bottom: 0cm;">
<span style="font-family: Courier New, monospace;"><span style="font-size: xx-small;">/** @author: Paul van Eck (<a href="http://www.paulvaneck.nl/">www.paulvaneck.nl</a>) </span></span><br />
<span style="font-family: Courier New; font-size: xx-small;">*/</span></div>
<div style="margin-bottom: 0cm;">
<span style="font-family: Courier New, monospace;"><span style="font-size: xx-small;">function ajaxClickSensor(tekst) </span></span></div>
<div style="margin-bottom: 0cm;">
<span style="font-family: Courier New, monospace;"><span style="font-size: xx-small;">{</span></span></div>
<div style="margin-bottom: 0cm;">
<span style="font-family: Courier New, monospace;"><span style="font-size: xx-small;">var p1 = tekst;</span></span></div>
<div style="margin-bottom: 0cm;">
<span style="font-family: Courier New, monospace;"><span style="font-size: xx-small;">$.ajax(</span></span></div>
<div style="margin-bottom: 0cm;">
<span style="font-family: Courier New, monospace;"><span style="font-size: xx-small;">{</span></span></div>
<div style="margin-bottom: 0cm;">
<span style="font-family: Courier New, monospace;"><span style="font-size: xx-small;">url: "http://www.mijnwebsite.nl/ajax/acs.php",</span></span></div>
<div style="margin-bottom: 0cm;">
<span style="font-family: Courier New, monospace;"><span style="font-size: xx-small;">type: "POST",</span></span></div>
<div style="margin-bottom: 0cm;">
<span style="font-family: Courier New, monospace;"><span style="font-size: xx-small;">data: {</span></span></div>
<div style="margin-bottom: 0cm;">
<span style="font-family: Courier New, monospace;"><span style="font-size: xx-small;">param_1: tekst,</span></span></div>
<div style="margin-bottom: 0cm;">
<span style="font-family: Courier New, monospace;"><span style="font-size: xx-small;">param_2: 'www.mijnwebsite.nl.'</span></span></div>
<div style="margin-bottom: 0cm;">
<span style="font-family: Courier New, monospace;"><span style="font-size: xx-small;">}</span></span></div>
<div style="margin-bottom: 0cm;">
<span style="font-family: Courier New, monospace;"><span style="font-size: xx-small;">});</span></span></div>
<div style="margin-bottom: 0cm;">
<span style="font-family: Courier New, monospace;"><span style="font-size: xx-small;">return true; // zodat de standaard-functie van de link gewoon wordt uitgevoerd.</span></span></div>
<div style="margin-bottom: 0cm;">
<span style="font-family: Courier New, monospace;"><span style="font-size: xx-small;">}</span></span></div>
<div style="margin-bottom: 0cm;">
<span style="font-family: Courier New, monospace;"><span style="font-size: xx-small;"></script></span></span></div>
<div style="margin-bottom: 0cm;">
<br /></div>
<div style="margin-bottom: 0cm;">
<span style="font-family: Times New Roman, serif;"><span style="font-size: small;">Hier moet je even de tekst </span></span><span style="font-family: Times New Roman, serif;"><span style="font-size: small;"><i>www.mijnwebsite.nl </i></span></span><span style="font-family: Times New Roman, serif;"><span style="font-size: small;">wijzigen naar domeinnaam van jouw eigen website.</span></span></div>
<div style="margin-bottom: 0cm;">
De AjaxClickSensor verstuurt 2 parameters. Parameter 1 is de tekst die door de click-sensor gemaild moet worden. Parameter 2 bevat de url van de aanroepende pagina.</div>
<div style="margin-bottom: 0cm;">
<br /></div>
<div style="margin-bottom: 0cm;">
In de body van je html-pagina kan je nu aan iedere willekeurige link de AjaxClickSensor hangen met de javascript event handler 'onClick()'. Hier een voorbeeld dus van een email-link:</div>
<div style="margin-bottom: 0cm;">
<br /></div>
<div style="margin-bottom: 0cm;">
<span style="font-family: Courier New, monospace;"><span style="font-size: x-small;"><a onClick="ajaxClickSensor('Email-link geklikt op de contactpagina.')" href="mailto:mijnemail@mijndomein.com">Email mij!</a</span></span>></div>
<div style="margin-bottom: 0cm;">
<br /></div>
<div style="margin-bottom: 0cm;">
Natuurlijk kan je ook andere event handlers gebruiken zoals onMouseOver(), onSubmit() enzovoorts.</div>
<div style="margin-bottom: 0cm;">
<br /></div>
<div style="margin-bottom: 0cm;">
Hiermee is de installatie al compleet en zou het moeten werken.</div>
<div style="margin-bottom: 0cm;">
<br /></div>
<div style="margin-bottom: 0cm;">
<br /></div>
<div style="margin-bottom: 0cm;">
<span style="font-size: medium;"><b>Copyright?</b></span></div>
<div style="margin-bottom: 0cm;">
Dit script mag je van mij vrij gebruiken in al je projecten, commercieel of privé. Pas hem aan waar je wilt en doe er iets goeds mee.</div>
<div style="margin-bottom: 0cm;">
<br /></div>
<div style="margin-bottom: 0cm;">
<span style="font-size: medium;"><b>En even dit nog..</b></span></div>
<div style="margin-bottom: 0cm;">
Nog een opmerking over de veiligheid van het php-script: Dit voorbeeld is eenvoudig gehouden om de werking van het script goed te kunnen laten zien. Wanneer je het script toepast denk dan altijd even na over het controleren van de aan het php-script doorgegeven parameters. Zeker wanneer je door het php-script database-bewerkingen laat uitvoeren is een goede controle van de invoerparameters vereist!</div>
<div style="margin-bottom: 0cm;">
<br /></div>
Anonymoushttp://www.blogger.com/profile/17522857060117418408noreply@blogger.com0tag:blogger.com,1999:blog-6611720609935529123.post-66036172376567334012012-09-12T11:25:00.000+02:002012-09-12T11:25:53.633+02:00Captcha's? Alleen als het écht niet anders kan.<em>Het gebruik van captcha's is de laatste jaren in een grote stroomversnelling gekomen. Je ziet ze bijna overal. Naar mijn mening zijn ze een vervelend onderdeel van een online formulier en moet het gebruik ervan vermeden worden tenzij het écht niet anders kan. Er zijn goede alternatieven.</em><br />
<br />
<h3>
Wat zijn captcha's?</h3>
<div style="border-bottom: medium none; border-left: medium none; border-right: medium none; border-top: medium none;">
Captcha's, je kent ze wel, die blokjes met vervormde letters of cijfers aan het eind van online formulieren. Die letters of cijfers moet je dan foutloos na-typen en pas daarna kan je je bij een website aanmelden als klant, of als lid van een forum of zo. Maar ook heel vaak om een contactformulier te 'beveiligen' bijvoorbeeld.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-qMWWL-szWso/UFBUotfa3lI/AAAAAAAAAFA/vDcSlO5LbAo/s1600/captchas.png" imageanchor="1" style="clear: left; cssfloat: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" hea="true" src="http://3.bp.blogspot.com/-qMWWL-szWso/UFBUotfa3lI/AAAAAAAAAFA/vDcSlO5LbAo/s1600/captchas.png" /></a></div>
</div>
<div style="border-bottom: medium none; border-left: medium none; border-right: medium none; border-top: medium none;">
</div>
<div style="border-bottom: medium none; border-left: medium none; border-right: medium none; border-top: medium none;">
<div class="separator" style="clear: both; text-align: center;">
</div>
Captcha's worden erg veel toegepast en ook op heel veel kleine websites zie je ze. De bedoeling van zo'n captcha is dus te voorkomen dat spammers en spambots toegang krijgen tot fora, of dat de eigenaar van de website wordt overladen met spam-emails.</div>
<br />
<h3>
Captcha's kosten je klanten</h3>
Captcha's werken, technisch gezien, meestal prima. Maar ze hebben ook enkele grote nadelen. En die nadelen komen er vrijwel allemaal op neer dat je als bedrijf met je website een barrière opwerpt voor je klanten. Het lezen van de letters of cijfers in een captcha is vaak lastig, zeker wanneer er ook nog onderscheid gemaakt wordt in hoofdletters en kleine letters (nog afgezien van het feit dat blinden en slechtzienden bijna onmogelijk met captcha's overweg kunnen). <br />
<br />
Regelmatig zal de websitebezoeker dus geïrriteerd raken wanneer hij (of zij) een captcha tegenkomt. Waarom zou hij überhaupt die letters willen lezen en intypen? Wanneer de klant in de echte wereld voor de winkel staat zit de deur toch ook niet op slot? Als een potentiële klant je belt dan vraag je toch ook niet als eerste of hij wel serieus geïnteresseerd is in je product? Waarom dan wel online?<br />
<br />
Een captcha is naar mijn idee een vervelende onderbreking. En elke onderbreking is, hoe je het wendt of keert, een moment waarop de potentiële klant kan afhaken. Of op z'n minst een heel klein beetje geïrriteerd raken. Captcha's kosten je dus klanten.<br />
<br />
<h3>
"Maar ik krijg zonder captcha's zoveel spam-mails .."</h3>
Dat valt in de meeste gevallen wel mee, is mijn ervaring. Láten het er per dag een stuk of 5 zijn. Wat dan nog? Voor de meeste kleinere websites zal het probleem echt niet groter zijn dan dat. Die mails gooi je gewoon in de prullenbak, toch? Volgens mij is dat een betere tactiek dan je échte klanten met een captcha op te zadelen.<br />
<br />
Ik geloof stellig dat het opwerpen van wélke barrière dan ook uiteindelijk klanten zal kosten. Iedere website-eigenaar zal dus moeten afwegen welk soort beveiliging hij wil toepassen op de in zijn websites gebruikte formulieren, en welke effecten dat kan hebben op zijn klanten. Als iets niet echt nodig is, doe het dan niet.<br />
<br />
Captcha's raad ik sowiese af voor kleine ondernemers. Gooi die paar spam-mailtjes per dag gewoon in je prullenbak en lig er niet wakker van.<br />
<br />
<h3>
Alternatieven voor captcha's</h3>
Er zijn goede alternatieven voor captcha's. Een webformulier (contactformulier, inschrijfformulier, aanmeldformulier et cetera) kan met diverse trucjes worden uitgerust die net als captcha's het aantal spam-berichten drastisch kunnen verminderen.<br />
<br />
Alternatieven voor captcha's zijn bijvoorbeeld het door een gebruiker laten oplossen van een simpel rekensommetje, of het laten antwoorden op een vraag. Maar feitelijk hebben deze alternatieven het zelfde nadeel als een captcha: er wordt voor de websitebezoeker een barrière opgeworpen. Ze zijn eigenlijk een variant op een captcha, niet echt een alternatief.<br />
<br />
<h4>
Echt alternatief 1: verborgen velden in een formulier</h4>
Een echt alternatieve oplossing die ik als programmeur zelf graag gebruik is, en nu wordt het wat technischer, een verborgen veld toevoegen aan een webformulier. Dat veld ziet er uit als een gewoon invoerveld dat door een gebruiker zou moeten worden ingevuld. Een website bezoeker ziet dat veld echter niet omdat het door de website software (css: <em>display:none;</em>) verborgen wordt. Een spambot ziet dat veld wél, en zal proberen het in te vullen. Wanneer het formulier dan wordt verstuurd controleert de software of het verborgen veld is ingevuld. Is het ingevuld, dan is het dus duidelijk dat er een spambot aan het werk is geweest en kan het verwerken van het formulier dus worden afgebroken (en wordt er dus geen spam-mail verstuurd bijvoorbeeld). Een simpele maar effectieve oplossing waar de klant zelf helemaal niets van merkt.<br />
<br />
<h4>
Echt alternatief 2: meet de tijd waarin het formulier is ingevuld</h4>
Een andere goed werkende manier is met behulp van een tijdmeting. Het werkt heel simpel: bereken de tijd die de websitebezoeker nodig heeft gehad om het formulier in te vullen. Als die tijd zodanig kort is dat een mens dit nooit voor elkaar zou hebben gekregen, dan is de kans vrijwel 100% dat een spambot het formulier heeft ingestuurd. Immers, een spambot is een stukje software dat razendsnel is. <br />
<span style="font-size: x-small;">(let op: doe de tijdmeting server-side en niet met javascript, want een bezoeker kan javascript uitgeschakeld hebben staan).</span><br />
<br />
<h3>
Captcha's? Alleen als het écht niet anders kan.</h3>
Zo zijn er nog wel meer mogelijkheden om spammails te verminderen. Gebruik deze mogelijkheden eerst, voordat je besluit tot klantonvriendelijke captcha's en de varianten daarop. Gebruik captcha's alleen als het écht niet anders kan.<br />
<br />
<br />Anonymoushttp://www.blogger.com/profile/17522857060117418408noreply@blogger.com0tag:blogger.com,1999:blog-6611720609935529123.post-73872248658731001442012-08-15T11:24:00.002+02:002012-08-15T11:33:08.326+02:00SQL-injecties grote bedreiging voor vrijwel alle websites<h3>
Wat is SQL?</h3>
SQL betekent letterlijk Structured Query Language. SQL is niet de database zélf, maar het is simpel gezegd de programmeertaal waarmee de gegevens in de database kunnen worden gelezen of gewijzigd. Iedere website die gebruik maakt van een database (en dat zijn <strong>vrijwel alle websites</strong> tegenwoordig, van CMS systemen als Joomla en Wordpress tot webshops en social media sites) heeft in zijn programmatuur SQL-opdrachten verwerkt om de gegevens in de database te kunnen lezen en schrijven. <br />
<br />
<h3>
Wat is een SQL-injectie?</h3>
Een SQL-injectie (spreek uit: 'sie-kwul'-injectie) is een methode die door hackers wordt gebruikt om de beveiliging van een database te omzeilen en op die manier toegang te krijgen tot de gegevens in die database. Wanneer er toegang is tot de gegevens in de database kan de hacker in principe alle gegevens in die database bekijken, wijzigen, vernietigen of kopiëren. Meestal heeft een hacker weinig goede bedoelingen wanneer hij toegang heeft gekregen tot een database..<br />
<br />
<h3>
Een SQL-injectie is een inbraak in uw website.</h3>
Wanneer een hacker een SQL-injectie uitvoert stuurt hij SQL-opdrachten naar de database die niet de bedoeling van de programmeur waren. De programmeur wilde bijvoorbeeld dat de database alleen bepaalde gegevens kon opslaan (denk aan emailadressen en wachtwoorden van gebruikers), maar niet dat die gegevens door website-bezoekers konden worden opgevraagd. Een hacker kan er met een SQL-injectie in slagen om die gegevens toch op te vragen, er er vervolgens alles mee te doen wat hij wil.<br />
Een SQL-injectie is dus niets minder dan een inbraak in uw website met mogelijk grote gevolgen, en moet zo goed mogelijk voorkomen worden.<br />
<br />
<h3>
Verklein het risico op een SQL-injectie.</h3>
SQL-injecties kunnen worden voorkomen. Een goede programmeur weet wat hij moet doen om veilige 'scripts' (blokken programmeeropdrachten) te schrijven waarmee SQL-injecties onmogelijk zijn.<br />
Zo zal een goede programmeur onder andere op de volgende zaken letten:<br />
<ul>
<li>Alle ontvangen formuliergegevens van een website worden automatisch gecontroleerd op de aanwezigheid van SQL-injectiescripts;</li>
<li>Waar mogelijk maakt men gebruik van white-lists voor ingevoerde gegevens in plaats van black-lists;</li>
<li>Men stelt permissies in voor de database toegang zodanig dat de website alleen díe opdrachten mag uitvoeren die voor het functioneren van de site benodigd zijn en blokkeer het uitvoeren van alle overige (supervisor-) opdrachten;</li>
<li>Men gebruikt zogenaamde prepared statements;</li>
<li>et cetera..</li>
</ul>
<h3>
Beveiliging is complex maar noodzakelijk.</h3>
Het gevaar van SQL-injecties is groot, maar kan met onder andere bovenstaande methodes vrijwel geheel worden voorkomen. Dat wil dan niet meteen zeggen dat de website en de database dan goed beveiligd zijn. Immers, wanneer wachtwoorden en login-gegevens niet veilig zijn, dan is er überhaupt geen SQL-injectie nodig om toegang tot de gegevens te krijgen. <br />
<br />
Website beveiliging is een complex geheel, en verdient alle aandacht. Laat u bij twijfel goed informeren door uw website-bouwer of een onafhankelijk adviseur. De kosten wegen vrijwel altijd ruimschoots op tegen de baten. De bedrijfs- en imagoschades die het gevolg zijn van gehackte websites kunnen enorm zijn..<br />
<br />
<br />
<br />
<em>Uitgebreidere informatie specifiek voor programmeurs lees je onder andere op </em><a href="http://www.unixwiz.net/techtips/sql-injection.html"><em>http://www.unixwiz.net/techtips/sql-injection.html</em></a><em>.</em>Anonymoushttp://www.blogger.com/profile/17522857060117418408noreply@blogger.com0tag:blogger.com,1999:blog-6611720609935529123.post-57224459248404991332012-07-03T20:49:00.000+02:002012-07-03T21:05:36.766+02:00Een website is nooit af. Blijf optimaliseren.Als webdeveloper & -optimaliseerder zie ik veel websites. Ik bekijk ze vanuit het perspectief van een bezoeker om mezelf een beeld te vormen over de usability, maar zeker ook vanuit het oogpunt van een ontwikkelaar. Ik leer er van, want ik zie hoe anderen bepaalde dingen opgelost hebben. <br />
<br />
Nu testte ik onlangs de website van de Wehkamp omdat ik zelf bezig was met het ontwikkelen van een webshop. Prima Sony laptop in de aanbieding, direct leverbaar, van 1999,- nu voor 1488 euro. Dit artikel gekozen, geplaatst in mijn winkelmand, en alles leek in orde.<br />
<br />
<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://4.bp.blogspot.com/-n7SgiRISCCU/T_M3TQko1jI/AAAAAAAAADU/CePTKKG97_c/s1600/wehkamp_1.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="" border="0" height="348" sca="true" src="http://4.bp.blogspot.com/-n7SgiRISCCU/T_M3TQko1jI/AAAAAAAAADU/CePTKKG97_c/s640/wehkamp_1.png" style="border-bottom: green 1px solid; border-left: green 1px solid; border-radius: 5%; border-right: green 1px solid; border-top: green 1px solid; box-shadow: 2px 2px 5px lightgray;" title="1 stuks is geen probleem. Direct leverbaar." width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Goeie deal, en op voorraad..</td></tr>
</tbody></table>
<br />
Goeie deal, dus ik neem er gelijk maar 5. Eens even kijken wat er dan gebeurt, dacht ik. Ik had al een vermoeden namelijk. En ja, mijn vermoeden bleek juist: het artikel was uitverkocht, aldus de website, en of ik zo vriendelijk zou willen zijn het artikel te verwijderen of een andere maat te kiezen (..).<br />
<br />
<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://2.bp.blogspot.com/-_uStSpGNawM/T_M3stjE5xI/AAAAAAAAADc/72TVw4i_uqI/s1600/wehkamp_2.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="" border="0" height="380" sca="true" src="http://2.bp.blogspot.com/-_uStSpGNawM/T_M3stjE5xI/AAAAAAAAADc/72TVw4i_uqI/s640/wehkamp_2.png" style="border-bottom: green 1px solid; border-left: green 1px solid; border-radius: 5%; border-right: green 1px solid; border-top: green 1px solid; box-shadow: 2px 2px 5px lightgray;" title="5 stuks: uitverkocht. Terwijl er toch echt nog 4 zijn.." width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Waarom krijg ik er geen 4 aangeboden?</td></tr>
</tbody></table>
<br />
Blijkbaar was 1 exemplaar wél beschikbaar, maar de voorraad strekte niet tot de door mij gevraagde 5 stuks. Vandaar de 'uitverkocht'-melding. En blijkbaar denkt Wehkamp dat als ik er geen 5 kan krijgen, dat ik er dan liever helemaal geen wil. Jammer natuurlijk, want niet alle klanten zullen er zo over denken. Jammer dus, maar ook een gemiste kans op omzet, want waarom meldt de site niet dat er wél 4 stuks* te krijgen zijn? Daarmee de kans verhogend dat er toch een transactie plaats zal vinden.<br />
Een paar regeltjes ontbrekende programmeercode kosten Wehkamp zo ongetwijfeld aardig wat euro's per jaar.<br />
<br />
<h2>
Quick-wins voor het oprapen</h2>
Je ziet, zelfs bij de grootste websites valt nog te verbeteren en liggen er regelmatig zelfs quick-wins voor het oprapen. Een website is nooit helemaal af. Altijd blijven zoeken dus is het devies, en misschien je site eens door laten lichten. Kan zomaar eens wat opleveren..!<br />
<br />
<span style="font-size: smaller;">(* Even puzzelen leidde tot de conclusie dat er op dat moment nog 4 stuks voorradig en leverbaar waren. Echter, het werd mij niet verteld; ik moest het zelf uitvogelen, en veel bezoekers zullen die moeite niet nemen).</span><br />
<br />Anonymoushttp://www.blogger.com/profile/17522857060117418408noreply@blogger.com