De laatste tijd zijn er een aantal initiatieven opgedoken van mensen die een tijdje zonder Google proberen te leven. In NRC Next hebben journalisten een Google-loze week gehouden en hun conclusie was dat Google-loos leven wel kan, maar Google-loos surfen vrij lastig is.

Wat wij interessant vinden is hoe je Google juist zo goed mogelijk kan inzetten. Naast de zoekmachine en alle daaraan gerelateerde producten en diensten zijn er ook allerhande online producten die samen een zeer bruikbare backoffice vormen: Google Apps.

Iedereen die een Google Account heeft zal al wel kennis gemaakt hebben met Google Apps. Er bestaat ook een variant voor bedrijven: een Google Account dat gekoppeld kan worden aan de eigen domeinnaam, waardoor de e-mail op dat domein binnen Google apps beschikbaar is. Dit account bestaat uit de volgende onderdelen:

• Gmail voor bedrijven
  25 GB opslagruimte, minder spam, een beschikbaarheidsgarantie van 99,9% en verbeterde e-mailbeveiliging.
• Google Agenda
  Agendabeheer, planning, agenda’s online delen en mobiel synchroniseren.
• Google Documenten
  Documenten, spreadsheets en presentaties. Werk online zonder bijlagen.
• Google Discussiegroepen
  Door gebruikers gecreëerde groepen ten behoeve van verzendlijsten, het eenvoudig delen van content en doorzoekbare archieven.
• Google Sites
  Veilige webpagina’s zonder code voor intranetsites en door teams beheerde sites.
• Google Video
  Afgeschermd en veilig delen van gehoste video’s.

Nu kennen deze online diensten hun beperkingen. Verwacht niet dat je met Google Sites hele flitsende websites kan bouwen. Wel kan je simpele internet- of intranetpagina’s maken waarmee informatie gedeeld kan worden, maar wel met veel mogelijkheden. Een hele aardige uitgebreide site maakten we laatst voor een Hondenschool in Didam: www.hondenschoolmaik.nl. Voor Google Documenten (Docs) geldt hetzelfde: hele ingewikkelde spreadsheets zijn geen optie, maar bij alle tools geldt dat ze wel de functionaliteit bieden die het gros van de mensen daadwerkelijk gebruikt. In de praktijk zal de gemiddelde gebruiker niet snel misgrijpen. Bijkomend voordeel is dat meerdere mensen tegelijk aan hetzelfde document kunnen werken.

Voor kleine en middelgrote bedrijven kan Google Apps een goedkoop alternatief zijn voor een complete backoffice inclusief intranet.

Voor kleine en middelgrote bedrijven kan Google Apps een goedkoop alternatief zijn voor een complete backoffice inclusief intranet. Het enige dat je nodig hebt is een werkende internetverbinding. Veel issues m.b.t. thuiswerken lijken hiermee ook opgelost. Er zijn immers geen ingewikkelde VPN-verbindingen nodig.

Wil je meer informatie over het opzetten van je eigen zakelijk intranet en wil je weten wat wij hierin voor je kunnen betekenen? Neem contact met mij op.

Bij Occhio hebben we in de loop der jaren heel wat actiewebsites (kleine websites ten behoeve van een campagne) ontwikkeld voor onze opdrachtgevers. Zo begonnen we in 2000 met een presentatie voor het toen nog net beginnende Binck Bank en recentelijk voor de TNT Post – Blond Amsterdam actie. Vaak wordt er voor een campagne-websites een speciale domeinnaam gebruikt, zoals bijvoorbeeld www.mijnmensendoendatniet.nl van Hoffmann Bedrijfsrecherche.

campagne domeinnaam effectief?

Je kunt je echter afvragen of het effectief is om een hele afwijkende domeinnaam te communiceren voor je merk of organisatie. Campagne websites worden meestal gebruikt voor tijdelijke marketingdoeleinden. Doel is een product, dienst, onderwerp of thema centraal te stellen en attentionwaarde te genereren bij een bepaalde doelgroep. De actiewebsite heeft hiermee een ander doel dan de hoofdwebsite (de corporate site).

Welke domeinnaam moet je nu kiezen voor zo’n campagne en hoe zorg je ervoor dat je campagne online vindbaar is? Lees de volgende 15 tips, die ik verzameld heb:

Tips voor het kiezen van je actiedomeinnaam

1. Gebruik bestaande woorden in je domein en verzin geen nieuwe woorden waarvan mensen niet weten hoe ze geschreven worden.
2. Kies een makkelijk uitspreekbare domeinnaam (denk natuurlijk aan radio/tv of in een conversatie)
3. Vermijd cijfers in een domeinnaam. Het is vaak niet duidelijk of ze als cijfer of voluit geschreven moeten worden. (Je kunt dan natuurlijk beide domeinen registreren, maar kies dan wel 1 hoofddomein die je communiceert en laat het andere domein doorverwijzen.)
4. Maak een domeinnaam niet te lang. Korte domeinnamen zijn meestal makkelijker te onthouden en vooral verkleinen ze de kans op typefouten.
5. Let op alternatieve schrijfwijzen van een woord in je domein. Zoals dat ook bij het gebruik van cijfers geldt, leg domeinen met alternatieve schrijfwijzen of vaak voorkomende fouten ook vast. (Als je bezoeker je domein dan verkeerd intikt, komt je site toch boven en je voorkomt hiermee ook dat je concurrent je hiermee de loef afsteekt).
6. Koppeltekens zijn moeilijk om te communiceren in bijvoorbeeld een radioreclame maar op print hebben ze juist weer een betere leesbaarheid. Ook voor zoekmachines (SEO) is de leesbaarheid met koppeltekens tussen woorden beter. Registreer dus meerdere varianten als dat nodig is en gebruik 1 hoofddomein in je communicatie.
7. Onderzoek je domein via Google voordat het het domein vastlegt. Vaak nog wordt een domeinnaam bij het zoekscherm van Google ingevoerd in plaats van in de adresbalk van de browser. Doe dat ook eens vantevoren en kijk wat eruitkomt. Staan concurrenten bij de zoekresultaten? Is er een kans dat de bezoeker zich zal vergissen tusssen de zoekresultaten en een gelijksoortig domein aanklikt die niets met jouw campagne te maken heeft? Staan er onbetrouwbare sites (adult etc) in de zoekresultaten waarmee je niet geassocieerd wil worden?

Tips voor je campagne website

1. Zet je actiepagina niet op de dag van de campagne online maar al enkele weken eerder voor de actie bekend gemaakt wordt.
2. Maak de site goed vindbaar voor zoekmachines en zorg vooral dat deze indexeerbaar is.
3. Gebruik goede keywords waarop je actie vindbaar moet zijn. Verwerk die in de website.
4. Plaats zoveel mogelijk informatie (de details) van de actie op de campagne website.
5. Laat de actiewebsite of actiepagina nog enkele weken online staan na de actie.
6. Na de actie of campagne: pas de tekst aan (bijvoorbeeld naar de verleden tijd of geef aan wie er gewonnen heeft)
7. Behoud het domein met de actie website met de aangepaste tekst (vooral handig als je een terugkerende actie hebt, bijvoorbeeld bij een feestdag) of verwijs het domein door naar een andere relevante pagina op de reguliere website
8. Gooi na afloop geen opgebouwde linkwaarde weg.

Wil je meer informatie hierover of wil je weten wat wij voor je kunnen betekenen hierin? Neem contact op met Joris.

Veel systeembeheerders hebben er wakker van gelegen en veel websitebouwers hebben er stilletjes (en soms niet zo stil) op gehoopt: het einde van Internet Explorer 6 lijkt nog maar een kwestie van tijd. Internet Explorer 6 (IE6) is een browser van Microsoft die in 2001 het levenslicht zag. Inmiddels zijn er al 2 opvolgers, IE7 en IE8, maar IE6 lijkt hardnekkig stand te houden. In dit artikel willen we toelichten waarom dit van belang is.

Wat is de aanleiding van dit artikel?

De laatste tijd lijken steeds meer bedrijven de ondersteuning van IE6 te staken. Websitebouwers klagen al jaren steen en been en ze doen dit vaak onderling en in stilte, om hun klanten niet onnodig schrik aan te jagen. Maar naast dit webbouwers onderonsje zijn er een aantal grote spelers op het internet die aangekondigd hebben de ondersteuning voor IE6 niet langer te leveren: Google en YouTube.

Deze internetgiganten leveren zeer populaire online producten. Iedereen heeft op YouTube wel eens een filmpje gezien of gebruik gemaakt van de diensten van Google zoals Google Maps, GMail of Google Docs, het online office-pakket. Beide partijen hebben aangegeven dat de kernfunctionaliteiten van hun producten niet meer zullen werken als van IE6 gebruik gemaakt wordt.

Juist doordat deze zeer toonaangevende bedrijven deze stap genomen hebben lijken een hoop anderen zich gesteund om hetzelfde te doen, namelijk de volledige ondersteuning van IE6 afbouwen en stoppen.

Waarom moet IE6 verdwijnen?

Maar wat is er dan zo erg aan IE6 zult u zich afvragen? Nou, heeft u even…

IE6 was een prima browser toen deze werd gelanceerd. Echter, de ontwikkelingen hebben inmiddels niet stil gestaan. Webstandaarden [1] zijn wereldwijd geaccepteerd als DE manier om websites te bouwen. Met deze webstandaarden krijgt u een beter product. Echter, IE6 (en in mindere mate IE7) implementeert de webstandaarden niet juist. Dat betekent kort door de bocht dat een website die volledig volgens de webstandaarden is gebouwd er niet goed uitziet in IE6, terwijl dit in alle moderne browsers wel het geval is. Onder moderne browsers rekenen we o.a. Firefox, Opera, Safari, Chrome en IE8 (IE7 hoort niet in dit rijtje thuis, sorry). Saignant detail is dat Microsoft zelf heeft meegewerkt om de webstandaarden te ontwikkelen om vervolgens te wachten tot IE8 om ze correct toe te passen.

Naast layout problemen kunnen er ook problemen met JavaScript optreden. En last but not least is IE6 ook nog eens een onveilige browser, die relatief makkelijk door hackers kan worden overgenomen en niet voorzien is van voorzieningen die phishing en malware tegenhouden.

Wie gebruikt IE6 nog en waarom?

Best wel veel mensen eigenlijk… IE6 heeft op dit moment een marktaandeel van 13,5% wereldwijd. Er wordt dus nog flink wat afgesurft met het oude bakbeest. Toch zijn de meeste thuisgebruikers al overgestapt naar een modernere browser. Het lijken voornamelijk bedrijven te zijn die aan IE6 vastzitten wegens bedrijfsapplicaties die van IE6 afhankelijk zijn. Systeembeheerders weigeren vooralsnog te upgraden omdat dan mogelijkerwijs andere (dure) applicaties niet meer goed werken.

Er zijn naast initiatieven om IE6 de nek om te draaien ook initiatieven die juist deze groep internetgebruikers wil steunen. Hier wordt terecht gesteld dat eindgebruikers niet moeten worden gestraft voor de keuze van de systeembeheerder bij het bedrijf waar ze werken.

Hoe kunnen we deze mensen helpen?

Er zijn verschillende scenario’s mogelijk om met IE6 om te gaan. Wij geven onze klanten zelf de keuze voor gedeeltelijke- of volledige ondersteuning van IE6.

Gedeeltelijke ondersteuning

Er wordt een standaard pagina getoond met beperkte inhoud. IE6 gebruikers kunnen beperkt kennisnemen van de inhoud van de website. Er wordt in het kort uitgelegd waarom en er wordt gewezen op beter browsers. Voorbeeld.

Volledige ondersteuning

Hier wordt de gehele website ook voor IE6 geschikt gemaakt. Dit vereist een extra inspanning en die is in de prijsstelling terug te zien. Het optimaliseren voor IE6 neemt immers een redelijk aandeel van het ontwikkelbudget in beslag en wij hebben er voor gekozen om deze kosten inzichtelijk te maken en de klant de keuze te geven. Voorbeeld.

Conclusie

IE6 houdt de gemoederen nogal bezig. Wij als websitebouwers juichen het toe dat het aandeel IE6 langzaamaan minder wordt, maar bieden onze klanten de ondersteuning die ze nodig hebben zolang IE6 er nog is. Er wordt aan alle kanten druk gewerkt aan mooie nieuwe technologie. Een gedeelte ervan is er al, zoals CSS3, maar kan nauwelijks worden toegepast omdat met name de IE versies er niet mee om kunnen gaan, zie daarvoor ook Michele’s blogartikel.

De toekomst houdt wellicht in dat gebruikers met moderne browsers meer internet voor hun geld krijgen en andere gebruikers minder. De basisfunctionaliteit wordt aan alle gebruikers aangeboden, maar de een zal een betere user-experience hebben dan de ander. We zullen zien…

Wie de geschiedenis van IE6 nog eens in stripform wil bekijken moet beslist dit artikel op Smashing Magazine even bekijken.

Meer weten, of advies over welke keuze je moet maken? Neem contact met mij op.

Als PHP/ASP/.NET programmeur heb je het waarschijnlijk al vaker meegemaakt: Je vindt een mooie class die precies kan wat jij wilt. Maar hoe krijg je hem aan de praat? Je gaat op zoek naar documentatie over de class en vindt een redelijk stuk over de class. Maar wat blijkt: de documentatie is van een oudere versie van de class. Voorbeelden kloppen niet meer, er zijn methoden bij gekomen en de parameters van methoden zijn veranderd.
Uiteraard kom je daar pas na een paar uur achter.

Documentatie

Het bijhouden van documentatie is een lastig werkje en wordt door veel programmeurs niet als ‘leuk’ ervaren. De documentatie die in de class verwerkt wordt is vaak nog wel redelijk van kwaliteit, maar een goed voorbeeld en een volledige overzicht van alle documentatie ontbreekt vaak.

Gelukkig bestaat er zoiets als een automatische-documentatie-generator. phpDocumentor is daar een voorbeeld van . phpdocumentor leest het commentaar dat programmeurs bij de classes en methods hebben gezet, indexeert alle methods en genereert een html-bestand met documentatie.
Drie nadelen:

1. Je moet phpDocumentor hebben geïnstalleerd en geconfigureerd
2. Je moet de generator regelmatig laten ‘draaien’ (evt. via cronjob – maar dat is niet voor iedereen bekend)
3. Je documentatie komt ‘ergens’ op een webpagina te staan. De ‘link’ met de class is vaak weg.

De oplossing lag klaar bij Linux

Ik was al een tijdje op zoek naar een oplossing voor dit probleem. Op een gegeven moment was ik  in de Linux command-line met Subversion bezig en vond ik het antwoord:

Als je in Linux iets niet snapt, doe je ‘–help’ waarna je het antwoord krijgt. Bv.:

dev:~# svn add --help

geeft:

dev:~# svn add --help
add: Put files and directories under version control, scheduling
them for addition to repository.  They will be added in next commit.
usage: add PATH...

Valid options:
-N [--non-recursive]     : operate on single directory only
-q [--quiet]             : print as little as possible

.. en zo zou dat bij PHP ook zo moeten werken! De Help()-functie is geboren.

De Help()-functie is geboren

In elke php class zou een help-functie toegevoegd moeten worden. Dan zou het als volgt werken:

$o = new Utils_Email();
// als je iets even niet weet, roep je de Help-functie aan
$o->Help();

Vervolgens refresh je je browser en deze geeft als output in je scherm:

/**
* Class for sending e-mail messages.
*
* $oEmail = new Utils_Email();
* $oEmail->SetRecipient('info@test.nl', 'Occhio Web Development');
* $oEmail->SetSender('oebe@test.nl', 'Oebe Rombout');
* $oEmail->SetSubject('end my subscription');
* $oEmail->SetBody('I would like to end my subscription etc...');
* $oEmail->Send();
*
* @copyright  2010 Occhio bv
* @author     Oebe Rombout
* @version    $Rev 300$
*/
=== Public methods from class Utils_Email ===
/**
* Set the receiver of the e-mail
*
* Example of usage:
*   $oEmail->SetRecipient("oebe@test.nl");
*   $oEmail->SetRecipient("oebe@test.nl", "Rombout, Oebe");
*
* @param  string  $email      E-mail address of the recipient
* @param  string  $fullName   Fullname of the recipient (optional)
* @return void
*/
SetRecipient($email, $fullName)
/**
* Set the subject of the e-mail
*
* @param  string  $value   Subject of the e-mail
* @return void
*/
SetSubject($value)
etc

Hoe werkt het? Reflection-class

PHP heeft sinds enkele jaren de Reflection-class (phpDocumentor maakt daar ook gebruik van). Hiermee kan je o.a. een class ‘onderzoeken’. Zo kan je van een class opvragen welke methods hij heeft, maar kan je ook het commentaar opvragen.
De output van de Help-functie hoef je dus niet zelf te schrijven. Het wordt gegenereerd uit het commentaar dat je al bij de class en methods gezet hebt. Geen dubbel werk dus.
Daarbij kan je nog allemaal handige dingen toevoegen:

• als het een database-wrapper betreft: genereer een lijst met de veldnamen en hun datatype (scheelt je kijken in phpMyAdmin)
• Geef codevoorbeelden
• Toon constanten uit class

Op deze manier creëer je een class die tevens zichzelf kan ‘uitleggen’. Code en documentatie op één plek; bij Linux werkt het al jaren.

Als je nog meer goede ideeën voor deze Help-class hebt, mail ze me dan.

Code voorbeelden

De method die je in elke class (of superclass daarvan) moet toevoegen:

public function Help()
	{
		$file = __FILE__;
		$class = __CLASS__;
		$className = get_class($this);

		// get comment of class
		$reflectClass = new ReflectionClass($class);
		$classDocComment =  $reflectClass->getDocComment();

		$help = <<<EOHTML
Help-functie van de {$class}-class in {$file}.
<pre>
{$classDocComment}

=== Public methods from class {$className} ===

EOHTML;

		echo $help;

		// Read public methods from class
		Odc_System_Utils_Reflection::GetPublicMethods($this);

		exit;
	}
 

De class die een lijst met public methods genereerd:

/**
 * @filesource
 * @package		Utils
 */

/**
 * Show handy data of Classes
 *
 * Example:

	public function Help()
	{
		$file = __FILE__;
		$class = __CLASS__;
		$className = get_class($this);

		$help = <<<EOHTML
Help-functie van de {$class}-class.
EOHTML;

		$methodsList = implode("\n- " , get_class_methods($this));

		// get comment of GenericObject-class
		$reflectClass = new ReflectionClass(__CLASS__);
		$goComment =  $reflectClass->getDocComment();

		$help .= <<<EOHTML
<pre>
$goComment

=== Public methods read from class {$className} ===

EOHTML;

		echo $help;
		Odc_System_Reflection::GetPublicMethods($this);

		exit;
	}

 * @author      Oebe Rombout
 * @copyright   2009 Occhio Design
 * @package     Utils
 */

class Odc_System_Utils_Reflection
{

	/**
	* Get names of the public methods of this class, to display in Help()
	*/
	function GetPublicMethods($oThis) {
		// Init the return array
		 $returnArray = array();

		 // Iterate through each method in the class
		 foreach (get_class_methods($oThis) as $method) {

			// Get a reflection object for the class method
			$reflect = new ReflectionMethod($oThis, $method);

			// For private, use isPrivate(). For protected, use isProtected()
			// See the Reflection API documentation for more definitions
			if($reflect->isPublic()) {

				// Skip deprecated methods
				if (strpos($reflect->getDocComment(), '@deprecated')) {
					continue;
				}
				//$reflect->export($oThis, $method);

				echo str_replace("\t", "", $reflect->getDocComment());

				// make list of parameters
				$aParameters = array();
				foreach ($reflect->getParameters() as $oReflectionParameter) {
					$aParameters[] = '$' . $oReflectionParameter->getName();
				}
				$parameters = implode(', ', $aParameters);
				echo "\n" .  $method . "($parameters)\n\n";

				// The method is one we're looking for, push it onto the return array
				array_push($returnArray,$method);
			}
		}
		// return the array to the caller
		return $returnArray;
	}

	public function Help()
	{
		$file = __FILE__;
		$class = __CLASS__;
		$className = get_class(self);

		$help = <<<EOHTML
Help-functie van de {$class}-class.
EOHTML;

		$methodsList = implode("\n- " , get_class_methods($this));

		// get comment of GenericObject-class
		$reflectClass = new ReflectionClass(__CLASS__);
		$goComment =  $reflectClass->getDocComment();

		$help .= <<<EOHTML
<pre>
$goComment

=== Public methods read from class {$className} ===

EOHTML;

		echo $help;
		Odc_System_Reflection::GetPublicMethods(self);

		exit;
	}
}

Samen naar het Zuiderzeemuseum in Enkhuizen. Iedereen maakt foto’s, maar hoe krijg je samen één fotoalbum? Door op Hyves de foto’s allemaal van dezelfde tag te voorzien! Heel modern voor een museum vol oudheden.

De foto’s taggen

Het museum neemt hiervoor het initiatief door per groep of dag een fotoalbum en een bijbehorende ‘Hyves tag’ aan te maken. De klederdracht-foto’s die gemaakt worden door het museum worden hiermee getagged en toegevoegd aan de Hyves pagina van het museum.

Een bezoeker van het museum die ook een Hyves pagina heeft kan dit  ook doen. Momenteel heeft Hyves bijna 10 miljoen profielen (op 9/1/2010 waren het er 9.752.400). Bijna iedere jeugdige bezoeker van het museum heeft er één, dus iedereen kan mee doen.

De koppeling met Hyves

Voor de koppeling tussen de website van het Zuiderzeemuseum en Hyves maken we gebruik van een service van Hyves om hun ‘data’ uit te kunnen lezen. Zo’n type service heet een API. Hyves heeft een uitgebreide API. De API biedt ons bijvoorbeeld de mogelijk om aan de hand van de tag foto’s bij verschillende gebruikers op te halen en in één album te verzamelen. Zo komen de foto’s van het museum en de bezoekers samen.

Upload je foto op je Hyves en enkele momenten later staat hij op de ZZM-site

API’s – korte uitleg

“Een application programming interface (API) is een verzameling definities op basis waarvan een computerprogramma kan communiceren met een ander programma of onderdeel (meestal in de vorm van bibliotheken) ” (bron wikipedia.nl)

Kort gezegd: de ene website kan informatie delen met een andere website. In dit geval worden foto’s opgehaald. Maar er zijn nog vele andere voorbeelden. Zo kan de API van Twitter worden gebruikt om nieuws op je site plaatsen, of bijvoorbeeld de publicatie van je Google Calender op een website is ook een optie. Of, zoals we op de Occhio site gebruiken, de Last.fm-playlist van je medewerkers tonen.

Momenteel zit in iedere website die wij maken wel ergens een API van een andere site verborgen. Een trend die alleen maar meer gaat doorzetten, denken wij. Wil je meer weten hierover, neem contact met me op.

De laatste tijd wordt er steeds meer gepraat over CSS3. CSS, ofwel cascading style sheets, zorgen er voor dat webpagina’s visueel weergegeven kunnen worden. CSS3 is de nieuwste aanwinst in de stylesheet familie. Deze nieuwkomer zou interessante mogelijkheden bieden om een design nog sneller en efficienter te vertalen naar een werkende website.

De paradepaardjes van CSS3 zijn vooral layouttechnische zaken, zoals afgeronde hoekjes, gradients, het embedden van exotische lettertypes en zelfs animatie! Dankzij het laatste is het zelfs een mogelijkheid om minder gebruik te maken van Javascript. Kortom, CSS3 zorgt er voor om veel sneller en simpeler die rijke online beleving, die wij allemaal willen, te creëren.

CSS3, wanneer dan?

Helemaal geweldig toch? Dat zou je denken: helaas is CSS3 nog niet klaar. Alles wijst er vooralsnog op dat het nog zeker 3 jaar duurt voordat alle grote browsers, met name Internet Explorer, deze nieuwe mogelijkheden volledig ondersteunen.
Toch wordt er al eens een CSS3 kunstgreep gebruikt omdat het tijdbesparend zou zijn. Maar, is dit op dit moment wel zo? Het overgrote deel van de gebruikers verdraagt nog steeds een verouderde browser, dus er zal dubbel werk verricht moeten worden om deze groep ook tevreden te houden. Zelfs de modernste browsers zoals Firefox, Safari en Chrome struikelen nog wel eens over een CSS3 foefje.

Bekijk deze prachtige CSS3 polaroid gallery in Chrome of Safari (klik op de foto)

Onze mobiele pagina’s maken ook gebruik van CSS3, wanneer je een iPhone en dus Safari gebruikt zie je mooi afgeronde hoekjes. Mocht je een andere mobiele browser gebruiken die geen CSS3 ondersteunt dan zie je enkel de ronde hoekjes niet, maar de pagina blijft gewoon toegankelijk.

Links zie je onze mobiele website in een CSS3 ondersteundende browser, rechts is dit niet het geval

CSS, hype of echt handig?

Achter de hype aanrennen of met beide benen op de grond blijven staan, is nu de vraag. Gelukkig kunnen we nu al deels genieten van CSS3, mits er vantevoren goed over nagedacht wordt. Het is bijvoorbeeld heel goed mogelijk CSS3 enkel ter decoratie te gebruiken, de website is in dit geval nog goed toegankelijk zijn als er een achterhaalde browser gebruikt wordt. Wil je wel alvast optimaal genieten van CSS3, geef jezelf een moderne browser zoals Firefox, Safari of Chrome cadeau!

Lange link, kort van geheugen

Lange links (URLs) zijn vaak moeilijk door te geven. De links worden vaak ongewild afgebroken in e-mail, zijn moeilijker mondeling door te geven, en zijn vaak moeilijk of niet te onthouden. Het is daarom geen wonder dat URL shorteners binnen korte tijd razend populair zijn geworden. Ze werken als slimme machientjes waar je een onhandig lange URL in stopt en een mooi compact variantje terugkrijgt om vervolgens te gebruiken.

Link shorteners en Twitter

Vooral voor doorsturen van links in Twitterberichten (waar je maximaal 140 karakters per bericht kunt gebruiken) worden Link shorteners of URL shorteners, zoals ze ook genoemd worden, gebruikt.
Bekende URL shorteners zijn bit.ly of tinyurl, maar ook Goo.gl en Facebook hebben nu Link shorteners ontwikkeld.

De occh.io link shortener

Vandaag lanceert Occhio haar eigen link shortener, en wel met 2 aliassen: occh.io en sn3l.nl. De eerste wordt het uitgangspunt van veel links in onze eigen modules. Met de tweede hebben we meteen ook de eerste écht lekker bekkende Nederlandse variant van dit fenomeen te pakken. Het ultieme adres voor snelle, eenvoudige en onthoudbare links.

Meer voordelen

Maar onze link shortener biedt nog meer voordelen:

• Je kunt uit 2 opties kiezen: de verkorte URL occh.io of sn3l.nl
• Je kunt je eigen verkorte link bedenken; met andere woorden je kunt dus je eigen keyword gebruiken voor een link, wat de ‘onthoudbaarheid’ nog meer vergroot.
• Je kunt de verkorte link direct doorsturen naar Twitter (dus gebruiken in je twitterbericht)
• Je kunt een snelkoppeling aanmaken en zo een webpagina direct verkorten door op de knop in je Firefox of Safari Bookmarks toolbar te klikken.

Occhio modules worden geüpgraded

Op dit moment zijn we bezig om de Link Shortener in te bouwen in onze modules, de Occhio NewsManager, de Occhio SiteEditor, en de Occhio MailingManager, waardoor je automatisch profijt kunt halen uit de verkorte URLs in combinatie met onze modules. Hier later uitgebreid meer over in een nieuw artikel. Maar je kunt nu al direct profiteren van de mogelijkheden op http://occh.io

Voor meer informatie, neem contact op met Joris

Foursquare is een van die social media applicaties die steeds meer aan de weg timmert, met name op de mobiele telefoon. Met dit programma kan je tips over locaties (vooral horeca) krijgen en zien waar je vrienden zich bevinden.

Wat is Foursquare?

Je neemt pas echt deel aan de community als je bij elke bijzondere locatie waar je binnenkomt even ‘incheckt’. Stel dat je naar museum de Hermitage gaat. Al wachtend in de rij pak je je telefoon. Je start de Foursquare-app op en ziet een aantal ‘locaties in buurt’ waaronder de Hermitage. Als je de Hermitage aanklikt, zie je of vrienden van je er ook zijn. Ook staan er een aantal tips van bezoekers. Door op ‘Check-in’ te klikken, kunnen jouw vrienden ook zien dat jij er bent

Een spel… dus punten..

Aan het nut van Foursquare kan je twijfelen.. het is leuk dat je kan zien waar je vrienden zijn en aardig dat je kan zien dan een vriend van je ‘nu ook met jou in het museum is’, maar dat zijn voor veel mensen geen overtuigende redenen om actief aan Foursquare bij te dragen. Foursquare heeft echter nog een troef in de app verwerkt: het spelelement.
Voor elke check-in krijg je punten, voor elke nieuwe locatie die je toevoegt krijg je PUNTEN.. als je tips toevoegt krijg je P-U-N-T-E-N en als je op een bepaalde locatie het meest bent, word je tot ‘burgermeester’ van die locatie gekroond en krijg je allerlei gave ‘badges’… de padvinder komt weer in ons boven. Hierdoor wordt het een strijd. En voordat je het weet ben je actief lid van Foursquare. Slim opgezet dus…

Zakelijk gebruik

Als sociaal gereedschap en als eetgids kan je het gebruiken, maar wellicht kan je het ook nog zakelijk inzetten. Dat begint natuurlijk bij het ‘netjes’ aanmaken van jouw bedrijf als locatie. Let op dat je dit netjes doet, want achteraf veranderen is lastig (kan wel via de website).

Als je een voor het pubiek toegankelijk bedrijf hebt (museum, horeca) ben je uiteraard gebaat bij positieve tips op je Foursquare-pagina. Die zelf plaatsen is natuurlijk not-done, maar je kan je bezoekers wellicht stimuleren om tips te plaatsen. In bepaalde landen worden er zelfs al kortingen aan Foursquare gebruikers/-burgemeesters gegeven.
Als er veel mensen op jouw locatie ingecheckt zijn, krijgen Foursquare gebruikers die toevallig in de buurt zijn een ‘trending’-bericht dat het bij jou erg gezellig is.

Via Foursquare kan je reguliere bezoekers belonen met een mooie aanbieding, zie boven. Helaas nu nog vrij omslachtig…

Als je events organiseert kan je er veel meer mee. Occhio kan de ‘data’ uit Foursquare ophalen en in een bewerkte vorm op een website of scherm zetten. Voor meer info daarover kan je contact opnemen met mij (oebe@occhio.nl).

Meer info

• http://foursquare.com/
• http://foursquare.com/venue/491563 – Occhio op foursquare
• http://foursquare.com/businesses/ – Foursquare for businesses
• http://www.brooklynmuseum.org/foursquare – Gebruik door Brooklyn Museum
• http://mashable.com/2010/01/16/foursquare-world/ – 5 Ways Foursquare is Changing the World
• http://itunes.apple.com/nl/app/foursquare/id306934924?mt=8 Foursquare App voor iPhone (via iTunes)
• http://nos.nl/audio/128301-foursquare-koppelt-internet-aan-het-echte-leven.html.html
• http://webwereld.nl/nieuws/65121/mediabedrijven-massaal-in-zee-met-foursquare.html

Foursquare apps zijn er voor iPhone, BlackBerry, Android, Palm. Helaas nu (januari 2010) nog niet voor Symbian (Nokia)

Voor een groot deel van onze websites installeren we de door Occhio ontwikkelde PhotoPresenter zodat de beheerder website gemakkelijk fotoalbums kan toevoegen, ordenen en onderhouden. Wat content management betreft een standaard-oplossing die voor veel doeleinden ingezet kan worden: de beheerder maakt fotoalbums aan en kan per fotoalbum weer foto’s toevoegen. Dit kan per foto of met een groot aantal foto’s tegelijk, door een zip-bestand te uploaden.

Wat het tonen van de fotoalbums op de website (de front-end) betreft, doen wij juist ons best nooit met een standaard-oplossing te komen. De albums en hun foto’s kunnen namelijk op talloze manieren weergegeven worden: met thumbnails, vergrotingen, animaties, popupvensters*, of filmstrips; inmiddels is er een compleet arsenaal aan photogalleries beschikbaar. Tijd om er een aantal onder elkaar te zetten.

Alle in dit overzicht getoonde voorbeelden linken door naar een werkende toepassing.

1. Het alles-in-één overzicht

Waarschijnlijk één van de eerste photogalleries op het web. Alle foto’s van het album worden in thumbnailformaat weergegeven zodat ze in één oogopslag te bekijken en te beklikken (het zou een woord moeten zijn) zijn. Na een klik op een thumbnail wordt de grote versie boven (of onder, of naast) het thumbnailoverzicht weergegeven.

Het alles-in-één overzicht op de Heren 5 website (ontwerp door beukers scholma)

2. De filmstrip

Een variant op het alles-in-één overzicht. Het principe blijft hetzelfde: je ziet een aantal thumbnails en na klikken verschijnt de grote versie op de pagina. Je ziet echter niet alle thumbnails in een album tegelijkertijd, maar ze komen voorbij in een horizontale “filmstrip”. Het grote voordeel hiervan is dat je photogallery in zijn geheel altijd dezelfde afmetingen heeft, ongeacht hoeveel foto’s er in een album zitten. Waar het thumbnailoverzicht van de alles-in-één optie in sommige gevallen ontzettend groot kan worden, hoef je met de filmstrip nooit bang te zijn dat de layout van je pagina de dupe is van variërende albumgroottes. Het nadeel van deze variant is natuurlijk dat je nergens je totale thumbnailoverzicht in één oogopslag kunt bekijken. Het ligt dan natuurlijk vaak aan de aard van de website en de fotoalbums welke voor- en nadelen het zwaarst wegen.

Op de Zuiderzeemuseum website vinden we een mooi voorbeeld van de Filmstrip Photogallery: alle foto’s die bezoekers op hun Hyves-pagina toevoegen en taggen met het kernwoord “zuiderzeemuseum” komen automatisch in de photogallery op de website. Dit inclusief bijschrift en kudos voor de fotograaf.

3. De Lightbox

De Lightbox, uitgevonden door programmeur Lokesh Dhakar, was lange tijd veruit de meest populaire variant. Na een klik op een thumbnailversie van een foto verschijnt er een nieuwe laag over de website, waarop de grote versie van de foto weer in een nog hoger liggende laag wordt  getoond. Duidelijk? Niet echt he? Precies hierom is een afbeelding vaak sterker dan duizend woorden:

De lightbox op de website van CODART

Het belangrijkste voordeel van de Lightbox is absoluut dat je de grootte van een beeldscherm maximaal kunt benutten. Door de afbeelding als het ware over de website heen te leggen, hoef je geen rekening te houden met de layout van je pagina. De afbeelding is dus zo groot mogelijk weer te geven. En dit zonder een traditioneel popupvenster te gebruiken, die door het grootste deel van je bezoekers automatisch geblokkeerd worden. Daarnaast ziet de Lightbox er fraai uit, mede dankzij de animatiemogelijkheden die deze oplossing biedt.

4. De fade

Fotoalbums kunnen echter ook een ander doel hebben dan een overzicht van foto’s over een bepaald onderwerp bieden. Ook op een manier die de layout van de webpagina wat meer ondersteunt kan men prima gebruik maken van een photogallery. Denk bijvoorbeeld aan de header-afbeelding, die steeds via een animatie overgaat van de ene naar de andere foto. Deze animatie kan op veel manieren, maar zelf gaan we het vaakst voor de cross-fade. Als je niet oppast, doen veel andere animaties toch snel aan slechte Powerpoint-presentaties denken. En dat kunnen we natuurlijk niet hebben.

De header-afbeelding van de Stichting Musical Awards Website ondersteunt de layout. De afbeeldingen worden in willekeurige volgorde ingeladen en faden in elkaar over.

5. En de rest

En zo zijn er natuurlijk nog talloze andere oplossingen. Vaak een combinatie of variant op bovengenoemde voorbeelden, maar daardoor niet minder interessant. Occhio blijft de mogelijkheden en ontwikkelingen binnen dit onderwerp nauw volgen en verkennen, wat natuurlijk tot uiting zal komen in onze toekomstige projecten.

Wanneer je de Duitse taal meester bent, kun je voor het zover is dit vrij complete overzicht al vast eens bekijken, met 23 prachtige voorbeelden. Mocht je de Duitse taal links hebben laten liggen na de middelbare school: wees niet bang! Het gaat natuurlijk vooral om de afbeeldingen en de voorbeelden.

*Voor de technici: natuurlijk zijn de traditionele popupvensters hopeloos achterhaald en heb ik het hier puur over een popup-achtig grafisch effect met HTML-elementen. De popup-blocker mag netjes aan blijven staan.

Mobiel internet heeft een behoorlijke ontwikkeling doorgemaakt, maar wie regelmatig met een iPhone of Blackberry een willekeurige website bezoekt weet dat er nog een hoop te verbeteren valt. De meeste websites bieden geen mobiele versie die is geoptimaliseerd voor gebruik met een mobiele telefoon. Wellicht dat de opkomst van Android deze ontwikkeling een extra impuls zal geven.

Wat is Android?

Android is een open source platform voor mobiele telefoons gebaseerd op de Linux-kernel en het Java-programmeerplatform. Dit besturingssysteem wint snel aan populariteit. Nadat Apple met de iPhone een nieuwe trend heeft gezet voor mobiele telefoons is Android hard bezig aan een inhaalrace. Analisten voorspellen dat Android in 2012 de iPhone heeft ingehaald [1].

De Android toestellen

Begin 2009 is het eerste Android toestel geïntroduceerd, de T-Mobile G1. Een goed begin, maar zeker nog geen bedreiging voor de iPhone. Er zijn inmiddels een aantal opvolgers en meerdere fabrikanten van mobiele telefoons voegen een Android toestel toe aan hun assortiment, waarbij Motorola, HTC, Sony Ericsson en Google zelf de interessantste mogelijkheden lijken te bieden. Op dit moment zijn er een aantal interessante toestellen gelanceerd of aangekondigd, die in de eerste helft van 2010 op de Nederlandse markt worden verwacht. In tegenstelling tot de eerste toestellen zijn dit toestellen die een werkelijk alternatief bieden aan de iPhone.

De Motorola Milestone (Droid) heeft in de V.S. een ware rage ontketend. De verkoopcijfers zijn zeer goed en Time Magazine heeft de Motorola Milestone als gadget van het jaar gekozen. Android is aan het doorbreken en het lijkt erop dat dit jaar het grote publiek Android zal omarmen en zal zien als een serieus alternatief voor andere smartphones. Fabrikanten zoals Motorola, Sony Ericsson, HTC, Samsung, LG en recentelijk ook Google zelf zetten vol in op Android en het is dan ook de verwachting dat er dit jaar heel wat moois op de markt zal komen voor een ieder die aan een nieuw toestel toe is.

Sterke punten van Android

Android heeft een paar sterke punten die het succesvol maken:

• open source
• applicaties kunnen worden ontwikkeld in Java  (groot aantal  developers)
• Google zit erachter (betrouwbaar, innovatief)
• het besturingssysteem is niet beperkt tot 1 fabrikant/toestel

Wat betekent dit voor jou en mij?

Wie de strijd ook mag winnen, de consument wint in ieder geval. Deze nieuwe generatie telefoons hebben mooie aanraakschermen, handige features en een keur aan applicaties. De integratie tussen telefonie, internet en applicaties wordt steeds beter en het gebruik veranderd mee met de nieuwe ontwikkelingen. Alleen bellen of sms-en is niet genoeg: je wil je e-mailaccounts en sociale netwerken beheren, Google Maps gebruiken, shoppen, gamen en (nu al in de V.S.) met Google Maps Navigation naar de volgende bestemming navigeren.

Maak mobiele websites i.p.v. apps

Met de opkomst van deze nieuwe toestellen wordt de behoefte aan een nieuw soort mobiele website ook groter. Een website die geoptimaliseerd is voor een klein scherm, die snel is en handige navigatie biedt. Een website die er soms uitziet als een applicatie. Een website die naadloos integreert met andere functies op het toestel.

Echter, met traditionele webtechnologie zoals HTML, CSS en JavaScript kunnen prachtige websites en webapplicaties worden gebouwd, die niet alleen in een iPhone of Android toestel werkt, maar op alle platforms.

Natuurlijk, je kan voor ieder platform specifieke applicaties maken, maar dan moet je talen als Objective-C en/of Java beheersen. Echter, met traditionele webtechnologie zoals HTML, CSS en Javascript kunnen prachtige websites en webapplicaties worden gebouwd, die niet alleen in een iPhone of Android toestel werken, maar op alle platforms. Google is deze weg al met succes ingeslagen door applicaties op het internet beschikbaar te stellen. voor mobiele websites/applicaties geldt ook: 1 keer bouwen, overal gebruiken.

Conclusie

De ontwikkeling van dit soort websites is relatief jong, maar de mogelijkheden lijken oneindig. Wij hebben er in ieder geval zin in! En we hebben de kennis in huis om mooie mobiele websites ontwikkelen. Als het aan ons ligt wordt 2010 het jaar waarin mobiele websites een grotere rol gaan spelen. En misschien ook wel het jaar voor een mooi nieuw glanzend Android toestel… of een iPhone natuurlijk.

Meer weten?

• Onze ‘mobiele’ projecten
• Onze blogs over mobiel