jQuery Autojumper

Dit is een kleine jQuery plugin geschreven door mij. Het springt tussen input velden welke een maxlength als attribuut hebben. Dit kun je gebruiken bij bijvoorbeeld (geboorte)datums.

Demo: http://www.robinvanwijngaarden.nl/lab/autojumper/

Twitter als maatstaf

Ik had al eens eerder een klein experiment gedaan om te kijken of er een verband is tussen het aantal tweets over een programma en de kijkcijfers van dat programma. Stel dat er 1.000 tweets over Nieuwsuur gaan en 800 over Shownieuws op een avond, dan zou het aantal kijkcijfers -die de volgende dag altijd gepubliceerd worden door Stichting KijkOnderzoek- van Nieuwsuur hoger moeten zijn (uitgaande van die aantallen tweets dus).

Uiteindelijk kwam ik er al snel achter dat het aantal tweets die over een programma gaan, sterk afhankelijk is van factoren zoals:

  • Het tijdstip van een programma (‘s avonds wordt vaker getwitterd dan ‘s ochtends)
  • De doelgroep van een programma (meeste jongeren hebben een smartphone en twitteren dus vaker)
  • Wordt er een hashtag in beeld gebracht

Het idee om te meten via Twitter bleef me fascineren! In sommige gevallen kun je hiermee iets in een vroeg stadium weten, zoals bijvoorbeeld een uitslag. Dat bracht me op het idee voor een nieuw experiment.

Vrijdag 10 juni 2011 was de finale van X Factor en die ging tussen Rochelle en Adlicious. Ik had ‘s middags een script gebouwd dat het aantal tweets over beide finalisten bijhield tussen het tijdstip 20:30 en 23:00 die avond.

Om 23:00 was de teller geëindigd op 25.274 tweets voor Rochelle en 9.194 tweets voor Adlicious. Respectievelijk in percentages: 73% en 27%.

Toevallig of niet, was dat percentage precies hetzelfde als bij de uitslag:

© NU.nl/Pierre Oitmann

Conclusie

Het was een leuk experiment en het meten van tweets blijkt voor dit soort doeleinden dus uiterst effectief.

Tips voor bijvoorbeeld een nieuw experiment of andere reacties zijn welkom.

 

Responsive Web Design

Terwijl de smartphone over de toonbank vliegt en de tabletoorlog op het punt van beginnen staat, is er tegelijkertijd een nieuw ‘probleem‘ (of: uitdaging) op komst. Al deze consumptie apparaten brengen nieuwe schermresoluties met zich mee, waardoor je website niet altijd goed wordt weergegeven.

Responsive Web Design is een term dat een website zich aanpast aan het gedrag en de omgeving van een gebruiker. Oftewel: een website die in elke schermresolutie, op elk platform en in elke oriëntatie werkt. Een computer heeft tegenwoordig een minimale resolutie van 1024 bij 768 pixels, maar bijvoorbeeld een iPhone 3Gs een resolutie van 480 bij 320 pixels.

Voorbeeld van Responsive Web Design

De techniek erachter is het gebruik van @media queries:
@media screen and (max-width:640px) { ... }
@media screen and (min-width: 400px) and (max-width: 700px) { … }
@media screen and (orientation: landscape) { ... }

Wanneer je bijvoorbeeld een kolom hebt met verschillende nieuwsberichten naast elkaar (float: left), kun je ze door middel van media queries weer onder elkaar zetten (float: none).

Voordelen

  • Een website wordt netjes weergegeven op elke type apparaat ongeacht schermresolutie, platform of oriëntatie.
  • Het kost weinig tijd en kosten, omdat je alleen de CSS aanpast.

Nadelen

  • Het laden van een webpagina duurt erg lang, omdat CSS alleen de opmaak aanpast en niet de inhoud.
  • Media queries werken niet in alle browsers. Hoewel hiervoor weer een oplossing is: css3-mediaqueries.js.
  • Het doel van een mobiele website is anders een een gewone website. Zo moet bijvoorbeeld contactinformatie prominenter op een mobiele website naar voren komen.

Gerelateerde artikelen

Slideshow

jQuery Parallax Effect

Waarschijnlijk heb je er nog nooit van gehoord. Dat is best logisch, omdat het nog niet lang bestaat en steeds vaker opduikt. Ondere andere Ben the Bodyguard en Nike Better World maken er gebruik van.

Het is simpelweg een scriptje dat een (background-)image laat bewegen, terwijl je aan het scrollen bent of wanneer je met je muis beweegt. Maar bij sommige plugins, beweegt het al uit zichzelf. Met dit effect creëer je diepte en geef je je website wat perspectief.

Hier volgen een paar jQuery Parallax Plugins:

Blytes

Iedereen die een beetje op internet zit en NU.nl of Twitter leest, heeft de afgelopen week de naam Blytes wel voorbij zien komen. Iedereen heeft zijn eigen mening over het nieuwe sociale netwerk van Tim van Elsloo. Mijn mening is dat hij trots moet zijn op zijn werk en zich niet moet laten afblaffen door anderen. Tuurlijk zijn er andere 16-jarigen die ook zoiets kunnen bouwen, maar dat zijn er niet veel. En tuurlijk is de website niet de beste qua caching en security, maar wat verwacht je dan van zo iemand? Aan de andere kant lokt hij opmerkingen ook uit met zijn gewaagde uitspraken in het artikel op NU.nl.

Hij zal in ieder geval veel opgestoken hebben van deze rumoerige week. Zijn doelstelling om binnen een jaar minimaal 10.000 leden te behalen, haalt hij met gemak.

Resizable en draggable <canvas> element

Ik kwam deze week een web-based mockup application tegen, genaamd Mockingbird. Ik stond versteld van de techniek die erachter zit en wilde daarom het één en ander nabouwen. Onder andere het slepen en vergroten/verkleinen van een <div> en de <canvas> die erin zit om een border met ankerpunten weer te geven.

Ik ben er dus mee aan de slag gegaan. Het eerste wat ik had gedaan, was het bouwen van het <canvas> element met border en ankerpunten. Dat had ik redelijk snel voor elkaar, dus stap 2 was het integreren van jQuery UI om straks aan de slag te kunnen gaan met draggable en resizable. Uiteindelijk ook nog Modernizr geïntegreerd om een alert te geven, wanneer de browser geen <canvas> elementen ondersteunt. Ik weet dat dit opgelost kon worden met de if statement van getContext(), maar ik wilde Modernizr gewoon een keer testen.

Het eindresultaat met bijbehorende code is te bezichtigen op: http://www.robinvanwijngaarden.nl/lab/canvas/

Opmerkingen betreft code of iets anders zijn welkom.

Beveiligingslek op Frankwatching

Nadat ik eerst twee bugs bij Hyves had gevonden en als dank een rondleiding kreeg, heb ik nu een cross-site scripting (XSS) issue gevonden op Frankwatching. Momenteel hebben de beheerders het opgelost door middel van een WordPress plugin, nadat ik een melding had gedaan. Had niet per se nodig geweest te zijn, als ze gewoon htmlspecialchars() hadden gebruikt, maar goed.

Het leuke van deze issue was, dat het de login pagina van de website betrof. Door middel van emailaddress als GET-parameter in de URL, kon je de value wijzigen van de desbetreffende <input />.

Met wat extra HTML en Javascript code heb ik ervoor kunnen zorgen dat je een normaal formulier voorgeschoteld krijgt met alleen ‘Vul hier uw e-mailadres in om in te loggen’ als tekst.

Wanneer iemand dit formulier zou invullen en verzenden, zouden alle POST gegevens naar (in dit geval) Google.nl worden gestuurd. Een kwaadwillend persoon had dit naar zijn eigen website kunnen sturen en zo het e-mailadres inclusief wachtwoord kunnen bemachtigen.

Ik weet niet zo veel van security af, maar als ik dit al voor elkaar krijg: waartoe zouden echte hackers dan wel niet tot in staat kunnen zijn…

Verslag van Kvk18 United (deel 2)

Dit is het vervolg op Verslag van Kvk18 United (deel 1).

Na Bernd Damme was het tijd voor Martijn Aslander. Hij kwam er op jonge leeftijd al achter dat je de kennis die je al hebt, erg goed kon benutten om er vervolgens geld mee te verdienen. Zo huurde hij koelkasten tegenover zijn school en wanneer het pauze was, rende hij daarheen en pakte hij zijn voorraad Magnum ijsjes uit de koelkasten. Die verkocht hij weer op het schoolplein en zo verkocht hij elke pauze zo’n 400 à 500 ijsjes. Een ander voorbeeld wat hij gaf, was dat hij bij de padvindersclub (tegenwoordig scouting) zat. Hij bedacht een personeelsuitje: een parkour door het bos en bij het water een vlot bouwen. De personeelsleden vonden het hartstikke leuk en zo verdiende Martijn geld met zijn passie. Tegenwoordig vraagt hij nergens meer geld voor. Ondernemen doet hij om zijn plezier, niet voor het geld.

Momenteel verkoopt hij Wooden iPad Stands voor €4 en is er ook een bamboe versie te koop voor €8, want bamboe is duurzaam natuurlijk. Hij is hiermee op Wired gekomen, één van de grootste websites op het gebied van technologie en de manier waarop het onze cultuur, economie en politiek beïnvloedt.

De laatste spreker was Monique van Loon. Zij is op 14-jarige leeftijd begonnen met een website over fashion, beauty en lifestyle, genaamd Divided.nl. Ze kwam erachter dat zo’n website nog niet bestond in Nederland of niet gerund werd door iemand uit de doelgroep: meiden tussen de 12 en 18 jaar. Een halfjaar na het opstarten kreeg ze steeds meer media-aandacht, ook vanwege haar jonge leeftijd. Haar tip die avond was dan ook: profiteer van je leeftijd. Een jaar na haar naamswijziging van Divided.nl naar Minettes.nl, werd ze benaderd door internetbedrijf YourScene. In 2007 is de website overgenomen door dat bedrijf en heeft het een plaats gekregen op GirlScene.nl. De website blijft maar groeien en bereikt vandaag de dag zo’n 1,1 miljoen unieke bezoekers per maand. Sinds 1 januari 2011 is ze gestopt met haar werkzaamheden bij GirlScene.nl met de reden dat ze zich geen ondernemer meer voelde.

Nadat iedereen gesproken had, was er nog tijd voor 2 workshops. Eén van Omar Kbiri en de ander van Tom Rovers en Thomas Meddens. Omar ging praten met Bernd Damme, Adriaan Mol, Edo van Royen en Danny Mekic’ over de kracht van netwerken. De workshop van Tom & Thomas ging over hoe je goed nadenkt over het opzetten van een bedrijf en je ging brainstormen over het opzetten van een bepaald product. Van beide workshops kan ik weinig vertellen, want ik moest alweer vroeg naar huis.

Al met al was het een inspirerende avond. Veel leuke mensen ontmoet en hierbij wil ik Robert en Thijl bedanken voor het organiseren van het event.

Laten we hopen op een snel vervolg!

Verslag van Kvk18 United (deel 1)

Gisteravond was het dan zover, het allereerste event van Kvk18 genaamd United. Nadat het eerst was afgelast op vrijdag 17 december vanwege heftige sneeuwval, is het gisteren wel doorgegaan. Kvk18 is in het leven geroepen door Robert van Hoesel en Thijl Klerkx met als doel jonge ondernemers te helpen met hun eigen onderneming of als je van plan bent er één te beginnen.

Met een groep van 6 man (@robinvw1, @rianouwendijk, @martijndwars, @bengreeve, @Vingerloos, @Anexamedia), hadden we afgesproken bij Amsterdam Centraal. Helaas konden 3 anderen (@frank, @peterwessels, @vincetries) niet meer komen, vanwege de lange reistijd. We kenden elkaar allemaal (een beetje) van internet, maar hadden elkaar nog nooit in real life gezien.

Om 19:00 waren we binnen in de New Business School. Het was eerst een halfuur praten met andere jonge ondernemers. Vervolgens mochten we naar boven en plaatsnemen op de stoelen om te luisteren naar de sprekers.

De allereerste spreker was Danny Mekic’. Hij richtte op 15-jarige leeftijd internetprovider Domeinbalie.nl op. Tegenwoordig is hij inspirator/spreker, dagvoorzitter, jurist, gastdocent en verzorgt meerdere trainingen en workshops. Hij gaf vooral tips voor startende ondernemers. Eén daarvan was netwerken en dan niet alleen contacten op doen, maar ook écht een connectie met je contacten vormen. Daarnaast is hij van mening dat een bedrijf 6 fases ondergaat. Zijn eigen bedrijf zit in de laatste fase: het zoeken naar een optimale bedrijfsvoering.

Toen kwam Annemarie van Gaal even naar voren. Bekend als vrouwelijk ondernemer,  investeerder, uitgever en treedt op in tv programma’s als Dragon’s Den en Een Dubbeltje Op Zijn Kant. Ze vertelde een verhaal over haar eigen uitgeverij samen met Derk Sauer in Rusland, genaamd Independent Media. Het ging over jongetjes die op straat bananen verkochten. Ze stapte op die jongetjes af met de vraag of zij haar tijdschriften wilden verkopen. Ze had immers een manier nodig om haar tijdschriften aan de man te krijgen. Dat wilden de jongetjes en zo kreeg ze haar eigen ‘distributiekanaal’. Ze werd belachelijk gemaakt door andere mediabedrijven, want welke uitgeverij verkoopt zijn tijdschriften nou via jongetjes van 13/14 jaar? Binnen vijf jaar verkocht Independent Media zo’n 20 verschillende kranten- en tijdschriftentitels, bereikte ze een omzet van $61 miljoen in 1997 en had ze 700 werknemers. Veelal waren dat jongetjes die mee waren gegroeid in het bedrijf en werkten in een distributiecentrum. Zonder de hulp van die jongetjes, was ze nooit zover gekomen en tegenwoordig zijn de jongetjes volwassen ondernemers.

De tweede spreker was Bernd Damme van het bedrijf Eye-Wear.nl. Hij vertelde over de start-up van zijn eigen bedrijf dat gespecialiseerd is in de verkoop van merkzonnebrillen. Met een omzet van €1.500 in 2006, toen zijn bedrijf begon, heeft hij in 2010 een omzet weten te behalen van €1,8 miljoen. Hij beschikt over 7 man aan personeel. Het ging niet helemaal van een leien dakje, want zijn compagnon had destijds gefraudeerd. Bernd had zijn compagnon voor het blok gezet en uiteindelijk is Bernd alleen verdergegaan. Hij had dankzij zijn compagnon een schuld opgelopen, maar is daar uitgekomen. Tegenwoordig is hij bezig met een internationale expansie van zijn bedrijf (Eye-Wear Europe BV).
Lees hier deel 2 van mijn verslag van Kvk18 United.