Screenshots bij je links

28 juli 2009 door Erwin Kerk

Op veel pagina’s zie je tegenwoordig een screenshot bij een link staan. Voor wie in de veronderstelling is dat de webmaster op print-screen heeft gedrukt en het plaatje geupload heeft naar de server: dit is (hopelijk) niet het geval!

Er zijn op internet diverse diensten te vinden die dit vervelende klusje voor je willen opknappen. Een klein overzichtje vindt je bijvoorbeeld op http://sharebrain.info/articles/the-best-free-screenshot-services/2366/

Omdat voor een van onze projecten dergelijke functionaliteit nodig is, ben ik hier eens wat dieper ingedoken. Uiteindelijk kwam ik terecht bij http://webthumb.bluga.net/, een web-based dienst van Joshua Eichorn, een bekende naam in het PHP-wereldje.

We hebben dit als volgt geimplementeerd:

  • De bezoeker vraagt een thumbnail-url op, bijvoorbeeld: http://www.example.com/thumb/12345.jpg
    Het script wat hier achter verstopt zit, kijkt op het bestandssysteem of de thumb al gemaakt is. Is dit het geval, dan wordt deze natuurlijk netjes geserveerd.
  • In het geval dat de thumbnail nog niet gemaakt is, wordt in de database een vlaggetje omgezet, nl. screenshot_status=pending
  • Een achtergrond proces (daemon of cron-job) leest alle url’s uit met dit betreffende vlaggetje, en maakt vervolgens de webthumb-api-url voor het plaatje. Hier komt nog even wat php-werk bij kijken, omdat er een api-key en hash-code nodig zijn. Maar de handleiding helpt hier uitstekend bij.
  • Als het plaatje is gemaakt, wordt status op “available” gezet en werkt het naar behoren.

Het voordeel van deze aanpak is dat er geen afbeeldingen worden gemaakt die toch niet opgevraagd worden. We hebben overigens ook de mogelijkheid om thumbnails te “regeneraten”.

Voor 30.000 credits betaal je bij deze dienst 50 dollar, omgerekend 36 euro en een beetje. Mocht je minder dan 100 screenshots per maand maken, dan is het zelfs geheel gratis.

Wat mij betreft: een aanrader!

Genereer zelf Sitemaps

11 februari 2009 door Thijs Alberts

Heb je eindelijk na dagen, weken, maanden ploeteren een fatsoenlijke website in elkaar geknusteld, vol met de laatste snufjes conform de eisen van de web 2.0 websurfer (jQuery, FLIR image replacement, shadowbox, je eigen videoconverter a la Youtube, uiteraard XHTML correct, meertalige SEO vriendelijke URL’s) dan zou eigenlijk het hele internet alles uit hun handen moeten laten vallen en meteen naar je website moeten komen kijken.

Wat heb je aan een fatsoenlijke website als niemand er komt kijken? Bar weinig en daarom heb je natuurlijk een heleboel handige tools en weetikwat’s om je site te promoten.

Een goed begin is het maken van een degelijke sitemap. Sitemaps ze komen eigenlijk in 2 smaken, een gebruikersvriendelijke variant en een voor de zoekmachines/webcrawlers (zonder opmaak):

  • De HTMLvriendelijke; zie je vaak bij uitgebreide websites om bezoekers te helpen wegwijs te worden op de website. Alle beschikbare pagina’s staan er op.
  • Een voor Webcrawlers; die de website dan makkelijker kunnen doorlopen en indexeren, met o.a. een prioriteitstag, hoe belangrijk de pagina is. Wanneer de pagina voor het laatst is bijgewerkt

Het maken van een ingebakken Sitemap generator in een website is geen overbodige luxe. En een vaak vergeten functionaliteit. Alle beschikbare pagina’s van een website nalopen kan (afhankelijk van de opbouw van de website) een intensief proces zijn. Gelukkig zijn er ook tools om van buitenaf de website zelf te spideren en een sitemap te maken. Tuurlijk zijn er allerlei ‘handige’ plugins te vinden, maar als het echt wilt hebben zo als jij wilt hebben, dan doe je het zelf. Enter Wget…

Wget is your best friend

Wget is een krachtige unix tool die (ook beschikbaar voor Windows) die via http/ftp allerlei manieren (onderdelen van websites) kan nalopen, downloaden en archiveren. Het kan als spider worden gebruikt of als website mirror dienst, download tool en veel meer. In ons geval gebruiken we Wget om een website na te lopen en dan gevonden interne links ook te volgen. Alle resultaten worden opgeslagen in een log bestand wat we later gaan aanpassen om alle gevonden resultaten uit te filteren. In een console:
wget -m --follow-tags=a --reject=jpg,bmp,png,js,gif,css,flv,pdf,login --no-directories -o spider_results.txt --delete-after -erobots=off http://www.eeble.nl

  • -m = mirror de website
  • follow-tags = a levert alleen de anchor tags op
  • –reject = negeer links met deze woorden in de URL
  • –no-directories = geen lokale kopie van directories aanmaken (scheelt weer ruimte)
  • –delete-after = verwijder bestanden na downloaden (scheelt weer ruimte)
  • -erobots=off = negeer robots.txt

Dit levert een bestand genaamd spider_results.txt waar alle gevonden resultaten in terecht komen. Met een simpel cat opdrachtje wordt de output leesbaar. In een console type:

cat spider_results.txt | grep http://www.eeble.nl | cut -d ' ' -f4 | sort -u

En dat ziet er dan weer zo uit:

http://www.eeble.nl/
http://www.eeble.nl/11/home
http://www.eeble.nl/11/tetris.html
http://www.eeble.nl/13/research.html
http://www.eeble.nl/15/playground.html
http://www.eeble.nl/16/technieken.html
http://www.eeble.nl/17/links.html
http://www.eeble.nl/18/hosting.html
http://www.eeble.nl/1/home.html
http://www.eeble.nl/4/vacature.html
http://www.eeble.nl/6/contact.html
http://www.eeble.nl/blog
http://www.eeble.nl/blog/2008/08
http://www.eeble.nl/blog/2008/09
...

Dan is nog een php script om de resultaten weer te geven als XML bestand:

<php?

$logfile =  sitemap.txt;
if (is_readable($logfile)) {
 if ($links = file($logfile)) {
  if (count($links = array_filter(array_map('trim', $links),'strlen'))>0) {
   sort($links, SORT_STRING);
   $out ="\n
         xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\"\n
         xsi:schemaLocation=\"http://www.sitemaps.org/schemas/sitemap/0.9
         http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd\">\n";
   foreach($links as $link) {
      $num = substr_count($link,'/')-3;
      $out .= " \n ".trim(htmlentities($link))."\n";
      $out .= sprintf("%F\n \n",(1-$num/10*2));
  }
  $out .= "</urlset>";

  //output maken
  header ("content-type: text/xml");
  echo $out;
  exit(0);
 }
}
} else { //404 terug geven
  header("HTTP/1.0 404 Not Found");
  header("Cache-Control: no-cache, must-revalidate");
  header("Expires: Sat, 26 Jul 1997 05:00:00 GMT");
  exit(0);
}
?>

Amazon Cloudfront als hele snelle webserver

6 februari 2009 door Erwin Kerk

We liepen afgelopen week tegen een probleem aan: een advertentie. Nou ja, niet de advertentie, maar wel de frequentie waarmee deze werd opgevraagd van onze server. Meer dan een miljoen keer per dag.

Nu is dat op zich niet zo heel bijzonder, maar als de advertentie dan staat op de server die ook de kliks “achter” de advertentie verwerkt, dan kun je begrijpen dat dit toch best wat van de server vraagt.

We kunnen in een hele discussie belanden over hoe je je server dan dient te configureren, maar wij hebben dit “voorval” aangegrepen om eens te kijken naar een Content Delivery Network.

Bij Amazon bleek dit erg eenvoudig en hadden we binnen een uur de boel aan de gang. Je slaat je bestanden op bij Amazon S3 en zij verdelen dit onder de razendsnelle servers van het Cloudfront netwerk.

1. Account bij Amazon Web Services aangemaakt

2. Mapje op de server gemaakt waar de content in gestopt mag worden

3. s3cmd geinstalleerd en geconfigureerd (om de bestanden naar de S3 opslag van Amazon te sturen)

4. incron geinstalleerd. Net als een gewone cron, maar deze werkt niet op tijd maar op het detecteren van nieuwe, gewijzigde of verwijderde bestanden.

5. Incron-job aangemaakt met het s3cmd sync commando

En voila, dat was eigenlijk alles. Nou ja, voor het instellen van S3 en Cloudfront hebben we gebruik gemaakt van deze handleiding.

Als onze advertentie-bouwende-webmaster nu zijn bestanden netjes naar onze eigen server stuurt, dan wordt incron geactiveerd en deze verstuurd de bestanden naar Amazon.

Na een dag of 3 hebben we nu al meer dan 10 miljoen GET requests gehad op onze “bucket”. Met dank aan de hele snelle servers van Amazon.

Oh, voor ik het vergeet: het is ook nog eens erg gunstig geprijsd.

Je eigen Youtube

6 januari 2009 door Thijs Alberts

Internetsurfers zijn verwend. Elke website moet mooier, beter, gelikter, sneller. Dankzij Web 2.0, AJAX websites (vul hier uw eigen buzz-woorden in) krijgen we gelikte snelle interfaces, die er voor zorgen we niet hoeven na te denken over welke knop je eigenlijk indrukt. Alle pagina’s hebben standaard interactieve foto-gallerijen en webvideo. Vooral dat laatste is natuurlijk vooral te danken aan Youtube en de Youtube-klonen die proberen een graantje mee te pikken.

Youtube

Zet een video op Youtube, en automatisch wordt deze verspreid over het internet. De miljoenen gebruikers van Youtube zijn een dankbare verspreidingsmethode. Als je filmpje maar interessant genoeg is ontstaat de kans dat jou filmpje als relevante suggestie wordt getoond. Uiteindelijk wordt deze ook op andere websites gezet en je bekendheid wordt, zonder er iets voor te hoeven doen, nog groter. Uiteindelijk weten anderen je snel te vinden op het internet. Dank u Youtube, dank u Youtube gebruikers.

Youtube Branding

Maar je dan krijg je er wel rechtsonderin een Youtube logo bij. Voor sommigen niet storend, voor professionele websites in mijn ogen altijd een beetje stuntelig. Heb je een eigen website, eigen beeldmerk, eigen huistijl, mooi consistent filmpje: staat er op alle video’s het logo van Youtube. Jammer. De oplossing is gelukkig ook niet moeilijk en ik verbaas me over de hoe weinig het nog gebeurd.

FFMPEG + watermarking

FFMPEG is een opensource video/audio converteerder. Bakt in een handomdraai jouw filmpje tot een Flash filmpje (of elk ander  formaat). Door middel van watermarking voeg je je eigen logo toe aan een filmpje rechts of links onderin. Een leuk filmpje met jou beeldmerk klaar voor op de eigen website.

Daarna stuur je je film (met eigen beeldmerk) ook door naar Youtube. Plaats het filmpje op je eigen Youtube channel. En via de Youtube API kan dat hele proces ook nog automatisch verlopen. Je film met beeldmerk staat op Youtube, waar het immens aantal bezoekers hopelijk vaak op gaat klikken. Op je eigen site staat jou film + met alleen jouw beeldmerk voor professionele uitstraling.

FFMPEG is bijna in alle smaken platformen. Probeer het eens!
Voor de windows gebruikers is er MediaCoder. En voor vele programmeertalen zijn er extensies geschreven: PHP, ASP

jQuery valkuil: werken met niks

9 december 2008 door Erwin Kerk

Voor wie jQuery gebruikt en de volgende valkuil nog niet kent: doe er je voordeel mee!

Controleer de aanwezigheid van een element (of: werk niet met niks)

Ik kwam een prachtig stuk code tegen om middels een mooie animatie een begrippenlijst op het scherm te toveren. Toetscombinaties, transparantie, alles. Omdat ik aan het betreffende project het een en ander moest sleutelen, uitbreiden en aanpassen, kwam een onvermijdelijk moment: een javascript error in de firebug console. En toen bleek dat de code ongeveer zo in elkaar zat (namen van objecten zijn gefingeerd):

var eenObject = jQuery('#een #moeilijke #selector:eq(0)');
eenObject.show();
eenObject.doeErVanAllesMee();

Waar zat nu het probleem?

Als het object niet bestaat, bevat eenObject niets, nada, noppes, en gaat het dus grandioos fout. De oplossing?

jQuery('#een #moeilijke #selector:eq(0)').each(function(){
  this.show();
  this.doeErVanAllesMee();
});

Met deze constructie wordt de code alleen uitgevoerd op elk element uit de collectie. Lege collectie? dan geen code!

Popups en links vanuit Flash AS3

3 december 2008 door wouter

De resultaten van een klein onderzoekje naar het gedrag van popup blockers in combinatie met flash:

Gebruikte software: Flash CS3, IE7 en Firefox 2.0

Via de volgende actionscript code (AS3) roepen we een nieuw venster aan:

navigateToURL(new URLRequest("http://www.website.com/"), "_blank");

Met de popup blockers aan levert dit geen problemen op in zowel IE als Firefox. Alleen als de popup blocker instelling in internet explorer op maximum wordt gezet wordt deze tegengehouden. Dit is te voorkomen door de link niet meer in een nieuw venster te opnemen maar in hetzelfde venster. Heeft wat nadelen maar het is onwaarschijnlijk dat dit ooit geblokt zal worden.

navigateToURL(new URLRequest("http://www.website.com/"), "_self");

Er zijn ook manieren om het via javascript te doen:
artikel van Sergey Kovalyof

Let ook op dat de HTML parameter “AllowScriptAccess” goed staat, deze heeft ook invloed op het gedrag van navigateToUrl:
artikel op de Adobe website.

Spam checklist: Hoe kom je in de inbox van hotmail / live mail

18 september 2008 door wouter

Als je mail verstuurd vanaf websites komen die vaak in de spam box of ongewenste post van Hotmail terecht. Waarom dat is kom je nooit precies achter, hotmails wegen zijn ondoorgrondelijk. Wel zijn er een aantal zaken om rekening mee te houden. Na erg veel frustraties is de volgende checklist tot stand gekomen:

  • Zorg dat je afzender adressen goed staan en verwijzen naar bestaande emailadressen: From, Reply-to en Return-Path;
  • Geef een geldig To adres op, deze header is gek genoeg niet per se nodig om een bericht te bezorgen;
  • Zet SPF records voor je domein. Hotmail is hier speciaal gevoelig voor. Zij noemen het Sender ID Als deze ingesteld zijn kan je ze dat laten weten via een formulier. Je krijgt dan een bevestiging dat het een aantal dagen duurt voor het doorgevoerd is;
  • Zorg voor een correcte reverse DNS entry voor je uitgaande mailserver, check via mxtoolbox;
  • Check de inhoud van de mail, bijvoorbeeld via deze tool;
  • Check of de uitgaande mailserver niet op een blacklist staat, via mxtoolbox;

Browsershots

13 augustus 2008 door rene

Doelstelling is om van een ingevoerde url op geautomatiseerde wijze een afbeelding van de webpagina terug te geven,
Zo’n dergelijke visuele voorstelling levert een extra bijdrage aan de content waar websites bij betrokken zijn.
Er zijn betaalde webservices, zoals thumbshots die deze dienst aanbieden, echter een vereiste is wel dit in eigen beheer te hebben.

Om tot een oplossing te komen worden verschillende mogelijkheden onderzocht. Een mogelijkheid zou zijn om een opensource programma die vanuit linux aangestuurd kan worden te gebruiken die html omzet naar een afbeelding, zoals bijvoorbeeld er ook al reeds toepassingen bestaan om html naar pdf om te zetten. Meer veel van de beschikbare programma’s op dit gebied hebben geen goede html ondersteuning.
De programma’s die dit wel hebben zijn uiteraard de veelgebruikte browsers, maar dit kan niet zomaar op een linux server zonder grafische omgeving draaien.
De oplossing hiervoor heet ‘headless’. Xvfb onder linux zorgt er op de achtergrond voor dat er geen fysiek scherm nodig is om applicaties te draaien die een grafische omgeving vereisen.

Xvfb staat voor: X virtual framebuffer, en plaatst de grafische toepassingen rechtstreeks in het geheugen zonder hier maar ook een grafische kaart of beeldscherm voor nodig te hebben. Het kan meerdere virtuele schermen aanmaken.
Op zo’n virtueel scherm kan elke browser onder linux geopend worden, en vervolgens door imagemagick, een beeldbewerking programma, een screenshot maken.

Een andere toepassing binnen headless Xvfb zou kunnen zijn om openoffice documenten te laten converteren voor Enterprise Content Management (ECM) zoals dit ook door Alfresco wordt gedaan.

Geef je website een facelift

12 augustus 2008 door Erwin Kerk

Al enige tijd ben ik bekend met sIFR, een techniek waarbij je bepaalde tekstuele elementen op je pagina kunt vervangen door een specifiek lettertype. Omdat je er bijna niet van uit mag gaan dat iedereen het desbetreffende lettertype in huis heeft, maakt sIFR gebruik van een ingenieus trucje: het lettertype wordt in een flash-movie ingebakken en on-the-fly over je pagina heen geplakt. Hier vindt je een voorbeeld.

Nu kwam ik pas op Ajaxian een variant van sIfR tegen, genaamd Facelift. Met Facelift kun je hetzelfde bereiken als met sIFR, maar dan zonder gebruik te maken van flash. Met behulp van een stukje javascript en een PHP script, wordt de tekst vervangen door een plaatje van die tekst in het juiste lettertype. Voorbeelden vindt je hier.

Implementatie? Fluitje van een cent. Het is een kwestie van downloaden, uitpakken, uploaden en een paar regels code aanpassen aan je eigen wensen. De juiste lettertypebestanden in het mapje, “font-family” instellen en voila, een kind kan de was doen.

Wel liep ik tegen een klein dingetje aan: stokken en staarten in de tekst vormen geen probleem, maar daarvoor moet je wel even in de configuratie sleutelen en de waarde “realFontHeight” op “true” zetten.

Al met al een handige tool om je website net dat beetje meer te geven.

Facelift: http://facelift.mawhorter.net/
sIFR: http://www.mikeindustries.com/blog/sifr/


Eeblog wordt gemaakt door medewerkers van Eeble Internet Innovations