Ooit de drang gehad om een tekstblok binnen een website even snel aan te passen? In de reeks HTML5 blog-items nu dan plaats voor  contenteditable. Met contenteditable kan je tekst binnen bijvoorbeeld een div direct aanpasbaar laten zijn, zonder input-veld of textarea.

Contenteditable toepassingen

Van veel html5 toepassingen wist ik meteen een manier hoe deze in te zetten. Opslag met Local Storage, get current location, Canvas en font-face zijn direct toepasbaar en een meerwaarde voor applicaties waar ik aan werk. Voor contenteditable heb ik eerst enkele malen moeten nadenken. Allereerst zou het natuurlijk perfect werken voor CMS systemen, amar daar verlang je al snel een rich text editor voor het toevoegen van stijlen, en grafische elementen. Voor formulieren zou het ook kunnen , maar is dat er nou voor gemaakt. Toch zit de bruikbaarheid van dit element hem het meest in de combinatie met andere elementen zoals local storage.

Compatibility van contenteditable

Contenteditable is te gebruiken in de huidige versies van alle browsers en lijkt het meest compatible html5 element te zijn. Ook in Internet Explorer 7 werkt het naar behoren. Opera, Chrome, Safari en Firefox ondersteunen allemaal het contenteditable element. Zie de vergelijking op caniuse.com

Welke elementen kunnen worden aangepast met contenteditbale

contenteditable is een nieuw attribuut van html5 en is bruikbaar in de meeste tekst-containers. Zo kunnen ze gebruikit worden in:

• div
• section
• a
• h1 tot h6
• ul, li etc
• span

Natuurlijk is het ook te gebruiken in bijvoorbeeld body of table, maar op die manier is er dus weinig controle over het aanpasbare element.

Gebruik van contenteditable

Hieronder een code voorbeeld van het gebruik van het contenteditbale attribuut.

   <section id="wrapper">
      <header>
         <h1>ContentEditable</h1>
      </header>
      <article>
         <section>
            <p>De elementen met <code>contenteditable</code> kunnen aangepast worden door de client in de browser.</p>
         </section>
         <section contenteditable="true">
             <h2>Deze kop is aanpasbaar</h2>
             <p>De tekst in deze paragraaf is aanpasbaar</p>
             <ol>
             <li>en deze lijst</li>
             <li>is ook</li>
             <li>aanpasbaar</li>
             </ol>
         </section>
      </article>
   </section>

Neemt stijl over van element

Door bovenstaand voorbeeld te gebruiken kan je zien dat de tekst aan te passen is van elle elementen binnen de aanpasbare element. Je kan bepaalde elementen binnen het aanpasbare element uitzetten door bijvoorbeeld:

<h1 contenteditable="false">Kop is niet aan te passen</h1>

In het aanpasbare element wordt de stijl van het omringende element over genomen. Zo blijft de list in bovenstaand voorbeeld een list, ook als er een enter wordt gegeven. Ook de paragraaf blijft de paragraaf en de kop blijft de kop. Er kan dus alleen binnen het element zelf aangepast worden. Er worden geen nieuwe elementen aangemaakt.

Een demo van content editable

Op de website van html5demos staat een demo soortgelijk aan bovenstaande code. Door middel van javascript en css kan het content-veld worden aangepast zodra er op gefocust wordt, zodat het duidelijker is dat deze aan ta passen is. Ook kan de inhoud van het editable deel met een id worden opgehaald of gereset.

Related articles by Zemanta

• JavaScript & HTML5 – Brave New World (slideshare.net)
• HTML 5 for Web Designers, by Jeremy Keith (37signals.com)
• The Future of the Web: HTML5 (slideshare.net)

Na het artikel over HTML5 Canvas en twee mogelijkheden voor lokale opslag (Local storage en Database Storage) ben ik lekker op dreef.  Daarom vandaag een stukje over geolocation. Met geolocation kunnen wij de locatie van iemand in de browser opvragen. Dit is uitermate geschikt voor mobiele toepassingen en het leveren van een gepersonaliseerde ervaring.

Realtime en locatiediensten steeds belangrijker

Realtime informatie en gepersonaliseerde locatie-diensten zijn sterk in opkomst. Zo zijn er initiatieven als Foursquare en Google Latitude die enorm aan populariteit winnen. Op dit moment moet een aparte mobiele applicatie geschreven worden die de locatie van de gebruiker kan doorgeven aan de server, maar door middel van geolocation in HTML5 kunnen we ook in de browser de locatie opvragen van een persoon. Dit geeft weer een enorm aantal toepassingen voor webapplicaties, vooral voor mobiele apparaten.

Niet alleen via GPS

De locatie van een client hoeft niet perse door middel van GPS te worden opgevraagd. Het is dus niet nodig om een apparaat te hebben met ingebouwd GPS maar het werkt ook op de normale desktop computer. Andere bronnen op locatie te bepalen zijn bijvoorbeeld het ip nummer, driehoeksmeting van GSM masten, Wifi, bluetooth etc. Het is dus niet altijd 100% zeker dat de geretourneerde waarde ook de werkelijke positie bevat, maar het geeft in ieder geval de meest betrouwbare positie van de client op dat moment weer.

Compatible browsers

Op dit moment is het nog onzeker of Microsoft het gaat  redden om de ondersteuning in Internet Explorer 9 te krijgen, maar het werkt al op Firefox (>3.5), Chrome (>5.0; komt later 2010 uit), Opera (>10.*), Ok op het Iphone OS 3+ kan er gebruik gemaakt worden van geolocation. Het moeilijke is dat het naast een aanpassing in de browser ook een aanpassing in het onderliggende besturingssysteem vraagt, omdat deze de hardware aanstuurt om de positie van de client te berekenen. Firefox is de enige browser die geheel

Positie opvragen in javascript met getCurrentPosition

De locatie opvragen binnen javascript is uiterst simpel en gebeurd met getCurrentPosition. Deze functie heeft 3 argumenten namelijk:

• succescallback (wat te doen bij succes)
• errorcallback (wat te doen bij een fout)
• casheoptions (hoe lang blijft de positie in de cache bewaard)

De succescallback is een functie waarin  de long-lat coördinaten gebruikt kunnen worden, hieronder een voorbeeld.

// locatie opvragen en doorgeven aan de functie 'verwerkLocatie', als er geen locatie opgevraagd kan worden wordt de functie 'locatieError' uitgevoerd.
navigator.geolocation.getCurrentPosition(verwerkLocatie, locatieError);

function verwerkLocatie(position) {
      alert("mijn locatie is:"+position.coords.latitude+" "+position.coords.longitude);
}

function locatieError() {
      alert("Locatie kon niet worden vastgesteld door middel van HTML5");
}

Locatie iopvragen vanuit de cache

Het kan voorkomen dat de locatie nu niet beschikbaar is, maar dat deze wel x aantal minuten geleden is vastgesteld. Mobiele telefoons doen dit om de batterijduur te verlengen. Hierdoor is het mogelijk om een positiebepaling vanuit de opgeslagen cache op te vragen. Hieronder een voorbeeld waarin er een positie wordt opgevraagd vanuit de cache die niet ouder is dan 10 minuten.

navigator.geolocation.getCurrentPosition(successCallback,
                                             errorCallback,
                                             {maximumAge:600000});

Locatie gebaseerde webapplicatie bouwen

Nu kan de locatie gebruikt worden om bijvoorbeeld weer te geven op een map (vind verkooppunten van product x in mijn omgeving), of kan de locatie gebruikt worden om de taal van de website te selecteren. er zijn natuurlijk veel verschillende toepassingen om de locatie te gebruiken. Uitproberen? kijk eens op de demo op html5demos.com

Related articles by Zemanta

• The Web Doesn’t Suck. Browsers Are Innovating. (yehudakatz.com)
• Google official reaffirms HTML5 readiness (infoworld.com)

Nu we toch lekker bezig zijn met HTML 5, wil ik in mijn derde artikel ingaan op de locale databaseStorage mogelijkheden. Deze methode kan complexere data opslaan en verweken aan de gebruikerskant.  Het is in principe een SQLite implementatie binnen de browser van de client. Omdat deze manier van opslag nog in draft is kan er nog veel gebeuren, daarom behandel ik de globale basis zoals hij nu bekend is.

Andere HTML5 artikelen

Heb je ze nog niet gelezen? dan raad ik je aan de twee eerdere artikelen over het canvas element en  local storage te lezen op Netsetters blog.

databaseStorage compatible browsers

Op dit moment kunnen maar een beperkt aantal browsers met de locale database storage overweg. Google’s Chrome (>3), Safari (> 3.2), Opera (>10.5). Bij de release van Firefox 4 in November zal ook de ondersteuning voor locale database toegang meekrijgen. En als we heel veel geluk hebben zou er een kleine kans bestaan dat de functionaliteit later aan versie 9 van Internet Explorer wordt toegevoegd.

Niet compatible, waarom toch gebruiken?

Het is nou eenmaal zo dat ‘maar’ de helft van de browser deze manier van opslag ondersteund, net als met vele andere HTML5 specifieke eigenschappen. Ondanks deze magere ondersteuning kan er nu al winst worden gehaald uit de techniek. Op de Iphone en Android telefoons zijn deze technieken namelijk al geheel beschikbaar gezien deze met Webkit browsers werken (safari en chrome). De tweede reden is dat de nu inspringen de kennis straks vergroot, ook zal het gebruik van de techniek door ontwikkelaars de ondersteuning van HTML5 hoger op de prioriteitenlijst bij de browser-ontwikkelaars komen te staan. want als de consument echt eerlijk mocht kiezen tussen verschillende gratis browsers, dan gebruik je toch een browser die de nieuwe technieken ondersteund? Ook kan de combinatie van oude en nieuwe techniek al een voordeel hebben.

De eerste stap van databaseStorage, een database aanmaken

Met openDatabase() kunnen we een database openen of creëren. Deze JavaScript functie neemt 4 argumenten aan.

• De database naam
• De database versie
• De leesbare naam van de database
• De grote van de database in bytes (ongeveer)

Om een database te creëren en browsers die het niet kunnen af te vangen kunnen we de volgende code gebruiken:

var db;
try {
    if (window.openDatabase) {
        db = openDatabase("DatabaseTest", "1.0", "HTML5 Database voorbeeld", 200000);
        if (!db)
            alert("Kan database niet openen: verkeerde versie of over het limiet heen");
    } else
        alert("Kan database niet aanmaken, uw browser ondersteund geen databaseStorage");
} catch(err) { }

Query uitvoeren op locale database

Om een query uit te voeren gebruiken we de transaction() methode, deze heeft 1 t/m 3 argumenten, namelijk:

1. transaction callback
2. error callback
3. success callback

De transactie bestaat uit een anonieme functie met executeSQL() methode. Deze heeft tot 4 argumenten, namelijk:

1. SQL statement
2. Argumenten
3. SQL callback
4. Error Callback

Schematisch gebeurd er dus het volgende:

db.transaction(function(tx)
  {
    tx.executeSql('SELECT * FROM MyTable WHERE CategoryField = ?',
      [ selectedCategory ],
      function (tx, rs) { displayMyResult(rs); },
      function (tx, err) { displayMyError(err); } );
  });

Waar displayMyResult en displayMyError de succes en error functies zijn.

Voorbeelden, een tabel aanmaken

db.transaction(function (tx)
        {
             tx.executeSql("CREATE TABLE WebKitStickyNotes (id REAL UNIQUE, note TEXT, timestamp REAL, left TEXT, top TEXT, zindex REAL)", [], function(result) {loadNotes();
})
});

Een rij toevoegen

db.transaction(function (tx)
        {
            tx.executeSql("INSERT INTO Adressen (id, naam, adres, woonplaats) VALUES (?, ?, ?, ?)", [id, naam, adres, woonplaats]);
      });

Een rij verwijderen

De meest korte uitvoering, zonder error en succes handlers

 db.transaction(function(tx)
        {
            tx.executeSql("DELETE FROM WebKitStickyNotes WHERE id = ?", [note.id]);
        });

Een select uitvoeren

Een select maken uit tabelnaam MyTable waar de categorie gelijk is aan selectedCategory

db.transaction(function(tx)
  {
    tx.executeSql('SELECT * FROM MyTable WHERE CategoryField = ?',
      [ selectedCategory ],
      function (tx, rs) { displayMyResult(rs); },
      function (tx, err) { displayMyError(err); } );
  });

Meer lezen

Meer kan je vinden op de pagina van het W3C met de offline web applicaties notitie.
Ook een goede aanvullende uitleg is te vinden op de website van creativepark

Related articles by Zemanta

• How to build a html5 websites.v1 (slideshare.net)
• Five Things IE9 is (Actually) Doing Right (sixrevisions.com)
• Google official reaffirms HTML5 readiness (infoworld.com)
• The State of HTML5 Local Data Storage (rethink.unspace.ca)

Dit is het tweede artikel over HTML5. HTML5 heeft verschillende methoden om lokaal en offline elementen op te slaan. De meest simpele is localStorage. Hiermee kunnen simpele “sleutel”-”waarde” Paren worden opgeslagen zonder database, zonder plugins, zonder server.

We kunnen niet altijd online zijn

We kunnen al een groot deel van de dag continue online zijn. Door draadloze verbindingen als wifi,(3)G, UMTS etc kunnen we ten alle tijden met verschillende apparaten gebruik maken van het internet. Hierdoor wordt het aantrekkelijk om web-applicaties te gebruiken. Deze hoeven niet op een apparaat geïnstalleerd te worden en hebben alleen een browser nodig.  Toch kunnen we niet altijd aaneengesloten online zijn, dit was het grote struikelblok voor webapplicaties. In HTML5 zijn verschillende technieken beschikbaar om lokaal (tijdelijk) data op te slaan wanneer de verbinding er even niet is namelijk: sessionStorage, databaseStorage en localStorage

localStorage de simpele opslag

Als je alleen één of meerdere waarden op wilt slaan is de localStorage methode voldoende. Hiermee kan er binnen een website een sleutel met waarde worden opgeslagen. Zolang de gebruiker op de website is, is deze informatie beschikbaar. Ook als de gebruiker later terugkomt op dezelfde site zal de informatie beschikbaar zijn. Een goede methode om instellingen op te slaan. een voorbeeld is bijvoorbeeld het wegschrijven van iemands gepersonaliseerde instellingen zoals kleur, de gebruikte lettergrote of naam.

Waarde wegschrijven

Een waarde wegschrijven in localStorage is eenvoudig, mits je browser localStorage ondersteund. Met 1 regel code binnen JavaScript staat er een waarde opgeslagen:

localStorage.setItem("lettergrootte", "12px");

Op deze manier wordt er in de lokale opslag een waarde van 12px aan de sleutel “lettergrootte” gegeven. Dit moet natuurlijk wel binnen

LocalStorage elementen ophalen.

Ook het ophalen van een waarde om deze verder te gebruiken is te doen met 1 regel code.

var lettergrootte = localStorage.getItem("lettergrootte");
document.body.fontSize = lettergrootte;

Zo wijs je de variable lettergrootte in JavaScript de gezette 12px toe. Dit kan dan bijvoorbeeld zoals hierboven gebruikt worden om de lettergrootte van een pagina te zetten naar de wensen die eerder zijn ingevuld.

Waarden verwijderen

Natuurlijk kunnen er ook waarden uit de localStorage worden verwijderd.

localStorage.remove('lettergrootte');

om de sleutel en waarde van “lettergrootte te verwijderen. OM alle waarden van de website te verwijderen kan er gebruik gemaakt worden van;

localStorage.clear();

Een volledig voorbeeld

Hier vind je een voorbeeld waarbij waarden gezet, opgehaald en verwijderd kunnen worden. Als je naar de code kijkt zie je al snel dat de functies eenvoudig en begrijpelijk zijn;

 <script> 

     function doSetItem() {
       var name = document.forms.editor.name.value;
       var data = document.forms.editor.data.value;
       localStorage.setItem(name, data);
       doShowAll();
     }

     function doGetItem() {
       var name = document.forms.editor.name.value;
       document.forms.editor.data.value = localStorage.getItem(name);
       doShowAll();
     }

     function doRemoveItem() {
       var name = document.forms.editor.name.value;
       document.forms.editor.data.value = localStorage.removeItem(name);
       doShowAll();
     }

     function doClear() {
       localStorage.clear();
       doShowAll();
     }

     function doShowAll() {
       var key = "";
       var pairs = "<tr><th>Name</th><th>Value</th></tr>\n";
       var i=0;
       for (i=0; i<=localStorage.length-1; i++) {
         key = localStorage.key(i);
         pairs += "<tr><td>"+key+"</td><td>"+localStorage.getItem(key)+"</td></tr>\n";
       }
       if (pairs == "<tr><th>Name</th><th>Value</th></tr>\n") {
         pairs += "<tr><td><i>empty</i></td><td><i>empty</i></td></tr>\n";
       }
       document.getElementById('pairs').<a class="zem_slink" href="http://en.wikipedia.org/wiki/Internet_Explorer" title="Internet Explorer" rel="wikipedia">innerHTML</a> = pairs;
     }
   </script>

Net toen het me helemaal niet interessant leek om mobiele sites te bouwen kreeg ik een opdracht binnen hiervoor. Een klant wil dat hun site geoptimaliseerd is voor mobiel gebruik. Dat betekend lichter, rekening houden met beperkte ruimte, JavaScript verwijderen en plaatjes beter uitserveren.

Detectie van het platform en zijn mogelijkheden

Om het wiel niet een tweede keer uit te vinden gebruiken wij WURFL.  Dit is een grote verzameling van XML bestanden waarin alle mogelijkheden per telefoon zijn beschreven. Door de detectie van de user-agent en dus de telefoon kan ik met behulp van WURFL alle gegevens er bij vinden zoals resolutie, JavaScipt ondersteuning, etc.

Indelen van categorieën telefoons

Met tweakers.net als voorbeeld hebben we apparaten onderverdeeld in verschillende classen. We hebben ook dezelfde classen gebruikt als Tweakers welke staan beschreven op de ‘device detect‘ pagina’. De onderscheid tussen de versie A tot en met F ligt hem vooral in resolutie en JavaScript support.

Omgaan met resolutie

Net nu we eindelijk er toch vanuit kunnen gaan dat een standaard beeldscherm minimaal 1024 breed is (de 800 x 600 resolutie-schermen zijn verwaarloosbaar) moete we dus weer rekening gaan houden met lagere resoluties. Het fijne is dat de modernere telefoons wel kunnen zoomen.In ons project gaan we er vanuit dat de meeste telefoons niet hoeven te zoomen. Maar niet alleen de resolutie-verschillen maken het erg, maar ook de verschillende verhoudingen.

Om het ons niet te moeilijk te maken testen we met de meest voorkomende resoluties:

• 128 x 160 pixels
• 176 x 220 pixels
• 240 x 320 pixels
• 320 x 480 pixels

De meeste smartphones (waarbij IPhone een grote speler is) hebben de laatst genoemde resolutie, iets  wat ons heeft laten kiezen voor een breedte van 310px.

Het I-phone zoom probleem

De eerste mobiele versie was al vrij snel een feit, maar op de IPhone hadden we een gek probleem. De Iphone lijkt alles te schalen. Eerst dacht ik een fout te maken meteen en veel te breed element er in, maar naar een paar test werdt al vrij snel duidelijk dat Iphone (mijn zijn resolutie van 320px) maar al te graag 1024 wilt laten zien. Standaard toont hij dus altijd alles kleiner. Om dit op te lossen kan de volgende meta-tag worden gebruikt:

<meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0;”>

Een enorm simpele oplossing dus. Hiermee vertel je de browser van de Iphone dat de initiele schaal 1 is (dus 100%) en dat de maximale schaal ook 1 is. Zo kan er wel niet meer ingezomd worden. Door de maximale schaal te vergroten kan er wel worden gezoomd (wat weer fijner is voor de mensen die het niet goed kunnen lezen).

Roteren naar “landscape” en terug

De volgende stap is om de website bij een landscape positie de bredere ruimte te laten gebruiken. Hiervoor kunnen we javascript gebruiken. Op het moemnt dat de orientatie veranderd moet er een actie komen die het geheel kleiner of juist groter maakt. Dit is te realiseren met de event-handler “onorientationchange”:

<body onorientationchange=”updateOrientation();”>

Related articles by Zemanta

• MIX10: Designing and Developing for the Rich Mobile Web (lukew.com)
• Mobile Development with Apache MyFaces Trinidad (nofluffjuststuff.com)
• Designing for the mobile web (sitepoint.com)
• The iPad Web Design & Development Toolbox (iphone.appstorm.net)

Buiten zijn is zo beperkt. Je ziet alleen tot  waar het oog reikt, informatie die je ontvangt kan je niet vergelijken en verkopers moet je maar op het woord geloven. Internet heeft onze wereld verkleint en onze toegang naar kennis vergroot. Waar je enkele jaren geleden nog de deur uit gingen om mensen te ontmoeten zijn er nu sociale netwerken waar je binnen een week meer vrienden kan krijgen dan dat je enkele jaren geleden in je hele leven had.

Matrix taferelen

Even leek het er op dat de beelden die we ooi in de film ‘Matrix’ zagen dichterbij kwamen dan ooit. De mens vastgeplakt aan zijn digitale informatievoorziening. een scherm, een alziend oog van de wereld met een gigantische stroom aan informatie. Doordat we platgegooid worden met de informatie doet het ons ook steeds minder. Het voelt niet echt omdat er altijd een scherm tussenzit. Een glasplaat die ons beschermt van de vele dingen die we dagelijks op ons af krijgen.

Going mobile

Maar nu computers steeds kleiner worden en de gemiddelde telefoon al meer kan dan een laptop van 2 jaar geleden zijn er nieuwe mogelijkheden.  Mobiele applicaties zijn ‘booming’ en ontwikkelingen als ‘toegevoegde realiteit’ (eng: Augmented reality) zorgen ervoor dat deze mobiele applicaties  reageren op onze omgeving.   Doordat smartphones nu al bijna altijd GPS, kompas en accelerometer hebben kunnen er applicaties gebouwd worden die zich bewust zijn van hun plaats en richting. Zo kan de beschikbare informatie van het internet gecombineerd worden met de wereld om ons heen.

FourSquare

Sinds vandaag heb ik FourSquare gedownload. Een mobiele applicatie waarmee je bijzondere punten in je omgeving kan taggen. Loop je een restaurant binnen en is deze al eerder ‘getagged’ dan kan je jezelf aanmelden als bezoeker. Ook zie je welke vrienden waar zitten, handig bij de gemiddelde kroegentocht. Zelf kan je ook nieuwe plaatsen toevoegen, en kijken wie er daarna allemaal komen. Je kan batches winnen als je veel plekken bezoekt en zelf burgemeester worden van een plaats als je veel getagged hebt. Zo is het een combinatie van een sociale applicatie, stadsgids en spel:

Foursquare is a cross between a friend-finder, a social city-guide and a game that rewards you for doing interesting things.  We aim to build things to not only help you keep up with the places your friends go, but that encourage you to discover new places and challenge you to explore your neighborhood in new ways.

Mijn huis uit

Nu woon ik (nog enkele weken)  in Zierikzee dat nog redelijk onbekend is op foursquare en daarom ligt er dit weekeinde een grote taak voor me. Ik voel het als mijn morele plicht om alle kroegen te gaan taggen. Zo ben ik in mum van tijd burgemeester hier. Door de koppeling met Facebook, Twitter en de Foursquare website weten anderen ook waar je uithangt. Ik vraag me alleen af of mijn toekomstige werkgever me net zo graag zal aannemen als op internet blijkt dat ik een kroegtijger ben geworden. Misschien moet ik me toch maar houden bij culturele hotspots.

Related articles by Zemanta

• 5 Ways to Use Foursquare for Business (kylelacy.com)
• How to Commit Social Suicide Online (time.com)
• Where You Are and Why It Matters: Twitter and Local Trending (thenextweb.com)

De afgelopen dagen worden we om de oren geslagen met artikelen over de trends van 2010. Wat gaat er gebeuren volgend jaar blijft natuurlijk een groot raadsel, maar toch zijn er enkele trends die overal terugkomen. Zo blijkt dat 2010 ons niet veel nieuws gaat brengen, maar vooral een verbetering gaat brengen van de trends die in 2009 zijn gezet. Een onderwerp dat zich steeds herhaalt is toch wel het real-time web, maar waar komt dat vandaan? en waar gaat het naartoe?

Het begin van real-time

Met de komst van Twitter werd de waarde van het real-time web ingezien. Nieuws kan zich in enkele seconden de hele wereld over razen. Iedereen is reporter geworden van normale alledaagse dingen. Sta je in de file, kijk op Twitter, Zie je rook, kijk op Twitter. Alles staat er bijna direct op. Zelfs internet-storingen zijn sneller op Twitter te vinden dan op de websites van betreffende aanbieders. Door velen wordt Twitter gezien als een keuvel-netwerk, maar het laat zien dat realtime toch echt een grote potentie heeft. Steeds meer bedrijven erkennen dit dan ook, en maken gebruik van de vele mogelijkheden die de berichtendienst biedt.

Zoekmachines en realtime

Afgelopen jaar hebben zowel Google als Microsoft deals gesloten met Twitter om de berichten in de zoekresultaten op te nemen. Google  bouwde extra opties om resultaten te filteren op tijd, zodat er alleen zoekresultaten gezien kunnen worden die bijvoorbeeld afgelopen week geschreven zijn. De oorzaak hiervan is de alsmaar groeiende informatie op het web, maar ook de grote hoeveelheid verouderde informatie. Nu het web al wat jaren oud is zijn er steeds meer sites en artikelen die niet meer relevant/up-to-date zijn. Om relevante informatie aan te bieden moet er dus wel gekeken worden naar informatie die de afgelopen tijd bijgehouden is.

Grote veranderingen voor ‘content creation’

Deze verandering legt grote druk bij organisaties die een website bijhouden. Als er namelijk een tijd niks gedaan wordt zakken ze weg in zoekresultaten. Het wordt dus ook een jaar waarin content-creation erg belangrijk gaat worden. Bedrijven zullen moeten gaan ‘bloggen’ en nieuws moeten gaan ‘feeden’ om hun digitale hoofd boven water te kunnen houden. Niet alleen woord, maar ook beeld zoals video zullen hierin een belangrijke rol gaan spelen. Het aanbieden van nieuws buiten de eigen website wordt ook steeds belangrijker, zo belangrijk zelfs dat ik denk dat een groot aantal bedrijven eigenlijk geen website meer nodig hebben, maar alleen een basis om hun informatie over verschillende platformen te communiceren.

Email en samenwerken in Realtime

Ook Google Wave verraste ons afgelopen jaar met een nieuwe techniek die in de toekomst het e-mailen wel eens zou kunnen vervangen. Door realtime een ‘wave’ gezamenlijk bij te houden weten de deelnemers precies wie  wat leest en wanner.  Door  het centraliseren van berichten is het afgelopen met meerdere kopijen van hetzelfde bericht. Hetzelfde principe heeft ervoor gezorgd dat ook Google Docs populair  is geworden. Samenwerken in realtime.

Real-time als voorwaarde voor ‘Augmented reality’

Ook zijn er grote verwachtingen voor Augmented reality, en manier de realiteit  zoals wij hem zien aan te vullen met digitale data. Om deze techniek succesvol te maken dient de data bijna realtime te zijn zodat de ‘reality’ ook realtime is.  Anders zou deze niet aansluiten op wat wij om ons heen zien.

Oppassen voor information-overload

Het grote gevaar van real-time informatie is de enorme hoeveelheid informatie die op ons afkomt, 24 uur per dag. De tijden dat we om 8 uur met zijn allen het nieuws  gingen kijken zijn voorbij. Deze grote hoeveelheid van informatie dienen in goede banen te worden geleid. Hiervoor zullen het komende jaar weer verschillende mooie  initiatieven worden bedacht. Ook verschillende publishing platforms zullen worden ontwikkeld om het publiceren van berichten onafhankelijk te maken van het platform waarop gepubliceerd gaat worden.

Related articles by Zemanta

• Predictions for Google’s 2010 (thaibrother.com)
• Top Google Apps in 2009 (thaibrother.com)
• #%*@#! The top 10 tech ‘fails’ of 2009 (cnn.com)
• 9 Great Document Collaboration Tools for Teams (mashable.com)

Bijna iedereen is wel lid van een ‘sociaal netwerk’, of het nou een netwerk is met een ‘fun factor’ zoals Hyves of Facebook, of zakelijk als LinkedIn.  Door de vele sociale netwerken beginnen gebruikers een beetje ‘netwerk-moe’ te worden. Niet voor niets is het woord van 2009 ‘ontvrienden’ geworden. Dit is jammer omdat we pas aan het begin staan van de vele ontwikkelingen die social media ons kan geven.

Ergernissen

De grootste ergernis is het bijhouden van vele sites terwijl ze eigenlijk allemaal dezelfde data gebruiken. Een oplossing hiervoor is OpenID, een digitale identiteit die decentraal wordt opgeslagen. Een tweede ergernis is dat ‘alle sites maar alles weten’. OAuth geeft de gebruiker de controle over welke informatie gebruikt wordt op de andere site.

Voorbeeld: je hebt een profiel op Facebook, hiervoor heb je een gebruikersnaam en wachtwoord.  Je favoriete foto’s sla je ook op in Facebook. Nu bestaat er een dienst waarmee je deze foto’s kan laten afdrukken en per post kan ontvangen. Door OpenID kan je jezelf inschrijven met je Facebook gegevens op de fotoservice. De fotoservice controleert dan bij Facebook je gegevens. Zo heb je 1 gebruikersnaam en wachtwoord voor beide diensten. Daarnaast kan er door middel van OAuth permissie worden gegeven om je foto’s en je adres van Facebook naar de fotodienst over te hevelen. Zo is er duidelijk welke gegevens aan wie worden doorgegeven.

OAuth is geen OpenID extentie.

Alhoewel ze goed samenwerken is OAuth geen extensie voor openID en werkt perfect op zichzelf. Wel is de combinatie van de twee technieken een sterk open standaard om sociale platformen met elkaar te verbinden en gebruikersgegevens zover mogelijk te beschermen.Op OAUTH.net wordt dit nogmaals goed onderbouwd:

OAuth is not an OpenID extension and at the specification level, shares only few things with OpenID – some common authors and the fact both are open specification in the realm of authentication and access control. ‘Why OAuth is not an OpenID extension?’ is probably the most frequently asked question in the group. The answer is simple, OAuth attempts to provide a standard way for developers to offer their services via an API without forcing their users to expose their passwords (and other credentials). If OAuth depended on OpenID, only OpenID services would be able to use it, and while OpenID is great, there are many applications where it is not suitable or desired. Which doesn’t mean to say you cannot use the two together. OAuth talks about getting users to grant access while OpenID talks about making sure the users are really who they say they are. They should work great together.

Is er toekomst voor OpenID en OAuth?

OpenID is ondergebracht inde OpenID Foundation.  Grote spelers als Microsoft, Google en Yahoo hebben zich hierbij aangesloten. OAuth wordt inmiddels gebruikt door Twitter, Flickr en Digg. Dit is natuurlijk een goede start, maar het heeft pas echt kans van slagen als ontwikkelaars van nieuwe sociale netwerken dezelfde standaarden gebruiken. Ik zie zelf ook een taak voor (semi)overheids organisaties om dit soort technieken tegen he licht te houden. Misschien dat  uiteindelijk het gewraakte DigID meer open en bruikbaar wordt.

Zelf beginnen met Oauth en OpenID?

• OAuth libraries voor de populaire programmeertalen
• OpenID libraries voor de populaire programmeertalen

Related articles by Zemanta

• Twitter and The Case Against oAuth (cristianobetta.com)
• OAuth Beginning to Rock the World (cloudave.com)
• OpenID: Over One Billion (Potentially) Served (webmonkey.com)
• Google Experimenting With Browser Login For Chrome OS (techcrunch.com)

Since I’m not an expert in Adwords (and never will be) I was a bit anxious of not getting any results. The tools and information on the web really helped me getting started and improving my campaign.

First results

After 3 days of mediocre results I found out that some of the adds / words where not accepted because of their quality. After reading alot about Adword quality and how to improve I got 300% increase of clicks.  After installing the conversion optimizer I can keep track of real conversions. Clicks do not mean anything without conversions.  We found that the cost per conversion is 30% lower.

Getting better

Since Google is changing their Adwords interface almost every week I noticed the new “possibilities tab”. Here I got almost 16.000 new suggestions and valuable tips. This helps me getting better results every day.Some general tips (by Google) are:

Organize your campaign by theme

In each campaign, create separate ad groups for each of your products, brands, or types of services you offer. Each ad group can then have a highly related set of keywords and ads that match the specific theme. By doing this, your ads can highlight exactly what a customer is searching for.

Choose your keywords carefully

Use specific keywords that directly relate to the theme of your ad group and landing page. Keywords that are too broad can lower your performance by generating many ad impressions but few clicks. One-word keywords are likely to be too generic, so try using two- or three-word phrases. Use the Keyword Tool to generate keyword ideas.

Include keywords in your ad text

Include your keywords in your ad text (especially the title) to show users that your ad relates to their search. If your ad shows when a user searches on a keyword in your ad group, the keyword will appear in bold in your ad text.

Use the right destination URL

Make sure that the destination URL (landing page) you use for each ad is the most relevant page within your website — ideally, a page dedicated to the specific product or service that’s highlighted in your ad.

Track your success

To make informed decisions about how to optimize your campaigns, review your campaign statistics. To measure your success, use conversion tracking to see which ads and keywords bring the most to your business.

Related articles by Zemanta

• How to Research Keywords for Your Business Blog (wordsellinc.com)
• Find Keywords That Nobody Else Uses with Keyword Shack (johnchow.com)
• Google Export Advisor Helps AdWords Advertiser Market Globally (seroundtable.com)
• Updated Versions of the Keyword and Placement Tools – Now in Beta (adwords.blogspot.com)
• Improving Your Adwords Quality Score Factors (davidnaylor.co.uk)