visualisation


16
Jun 10

Safari tips voor IPhone en IPad (iOS)

iPad with on display keyboard
Image via Wikipedia

Ondertussen zijn wij ook mee gaan doen met de IPad gekte. Maar voordat je apps gaat ontwikkelen zijn er al heel wat mogelijkheden in de browser van deze aparaten. Safari biedt voor web-applicatie ontwikkelaars speciale tags. Hierdoor kunnen we applicaties ontwikkelen en deze via de website gelijk aanbieden, zonder gebruik te maken van de appstore.

Continue reading →

Popularity: 88% [?]


13
Jun 10

CSS Pseudo classes

Image via Wikipedia

Dit keer een kort stukje over een klein maar waardevolle mogelijkheden in CSS: Pseudo Classes. Pseudo classen worden gebruikt om een bepaald  effect aan een selector mee te geven. Het bekendste pseudo-class is wel de :hover die al aardig ingeburgerd is in het css gebruik. Met :hover kan je bijvoorbeeld  een link een andere css class geven als je er met de muis overheen beweegt. Recent zijn er enkele classen bijgekomen, zo ook de :before en :after elementen
Continue reading →

Popularity: 32% [?]


26
May 10

HTML5 contenteditable: Pas tekstblokken direct aan.

Dabbling with HTML5
Image by Marc Amos via Flickr

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. Continue reading →

Popularity: 55% [?]


22
May 10

CSS3; gebruik van lettertypen op het web met @font-face

Opera 10 Beta @font-face test
Image by Rodrigo Galindez via Flickr

Het gebruik van lettertypen op het web is meestal vrij saai. Ik heb enorm vaak een (web) designer het standaard lijstje met de web-safe fonts door moeten sturen. Dit beperkt het design en de vrijheid van de designer enorm. Een alternatief is om de tekst als plaatje te serveren, maar dit gaat ten koste van indexering en accesability. Maar er is nu een makkelijke en enorm bruikbare methode om fonts te ‘embedden’ in je webpagina: @font-face Continue reading →

Popularity: 57% [?]


21
May 10

HTML5: localisation. Vraag de locatie op in de browser met getCurrentLocation

Geolocation
Image by hawaii via Flickr

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. Continue reading →

Popularity: 57% [?]


22
Mar 10

Het bouwen van een mobiele website.

WURFL
Image via Wikipedia

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. Continue reading →

Popularity: 59% [?]


29
Nov 09

Besturingssysteem in de cloud

Gazelle: ¿El Google Chrome OS de Microsoft?
Image by Carlos Gutiérrez G. via Flickr

Steeds meer applicaties draaien in de ‘cloud‘, oftewel het internet. Deze applicaties worden niet meer geïnstalleerd op een computer  maar draaien op het internet binnen de browser. De eerste voorbeelden hiervan zijn de webmail applicaties. Ooit begonnen als een manier om tussendoor de email te controleren, maar door Gmail ontwikkeld tot een volwaardige email client.

Snellere browsers

De afgelopen jaren is er veel gebeurd met de browsers die wij gebruiken.Door de snellere internetverbindingen kon er meer naar de browser gestuurd worden. Die grotere hoeveelheid aan informatie moet ook verwerkt worden. Dit heeft geleid tot betere,snellere en krachtigere browsers.  Uiteindelijk heeft dit de weg vrij gemaakt voor geavanceerdere webapplicaties. Deze hebben weer een snellere internet-verbinding nodig en zo is de cirkel weer rond. Deze cyclus verloopt steeds sneller wat een enorme stimulans is voor ontwikkelaars van online webapplicaties.

Verandering van ons besturingssysteem

De verschuiving van applicaties naar de cloud heeft grote consequenties voor de besturingssystemen die wij gebruiken. Het doel van een besturingssysteem is snel toegang geven tot applicaties,maar webapplicaties hebben de tussenlaag van de browser. Hierdoor zijn er enkele besturingssystemen in de maak die het huidige idee van een besturingssysteem loslaten en zich richten op de cloud.

Google Chrome OS

Een van de bekendste van deze ‘nieuwe generatie’ besturingssystemen is Google Chrome OS. Dit systeem is uit gegaan van de bekende browser. Uitgebouwd met snelkoppelingen voor veel gebruikte webapplicaties. Hierin spelen de bekende webapplicaties van Google natuurlijk een grote rol, maar ook de nieuwe online office software van Microsoft werd getoond binnen Chrome OS

gOS

Door sommigen in het verleden gebombardeerd als GoogleOS omdat gOS gebruik maakt van de vele Google web-applicaties. gOS is eigenlijk Ubuntu met een eigen skin en de Google Cloud services er aan toegevoegd.  De “widgets” maken het geheel weer wat speelser en de verdere optimalisatie voor gebruikers van Netbooks  zijn welkom. De makers van gOS zijn nu ook bezig met een volledige cloud versie van hun OS, maar daar is nog niet genoeg over bekend.

gOS met widgets

gOS met widgets

Moblin

Door het bureaublad concept geheel los te laten en aansluiting te bieden op de populaire webapplicaties van het moment is Moblin een indrukwekkend besturingssysteem dat zeer intuïtief werkt. Moblin gaat uit van de taken die een gebruiker uitvoert. Muziek luisteren, websites bezoeken,mailen,sociale websites en contacten onderhouden,video’s kijken, etc. Alle functionaliteiten zijn verweven in verschillende panelen gemakkelijk bereikbaar. Tot nu toe ben ik zeer tevreden met Moblin maar het ene grota nadeel, ik krijg het niet draaiende op mijn EEEpc 900, omdat de processor niet ondersteund wordt. Jammer want ik had graag met dit systeem gewerkt.

Jolicoud

Omdat ik Moblin niet kon gebruiken op mijn eeepc 900 was ik op zoek naar een goed alternatief. Bij het zoeken stuitte ik op Jolicloud (zelfde makers als Netvibes). Bij het lezen van hun visie werd ik al enthousiast:

At Jolicloud we believe a movement has started. A movement that will change the computer industry forever: a world where computers are inexpensive, where operating systems are free and software is online. This is the world we dreamed of when we first discovered computers and the Internet.

Omdat het testen alleen bestemt was voor enkele mensen schreef ik me in voor een uitnodiging. 1 dag later kon ik Jolicloud installeren en proberen. Helaas viel me dit erg tegen. Het is eigenlijk gewoon de Netbook Remix versie van Ubuntu, plus Mozilla’s Prism en een set aan webapplicaties die binnen Prism draait. De meegeleverde USB bootdisk maker voor win/os x/linux was mooi, de installatie is wat we gewend zijn van Ubuntu; erg simpel, maar dan de tegenvaller. In de screenshots leek het heel wat maar het is niks meer dan een webpagina die ook draait binnen Prism bovenop Ubuntu.  Het is een goede visie, een leuk begin maar verkeerde uitvoering.  Misschien dat het idee in de komende tijd verder wordt doorontwikkeld zodat het geen tegenvaller meer zal zijn. Het zou fijn zijn om ook binnen de Jolicloud omgeving de web-apps te kunnen draaien zodat er niet steeds teruggegaan moet worden naar het conventionele Netbook Remix scherm.

Andere initiatieven

Er zijn vele andere initiatieven die ik niet allemaal op kan noemen. Microsoft is bezig zijn Live platform te combineren met een cloud OS Windows Azure. Daarnaast zijn er naast de ‘hybride’ cloud oplossingen die ik beschrijf enkele volledig gevirtualiseerde besturingssystemen online, zoals eyeOS. Toch denk ik dat een volledige overstap naar de cloud een stap te ver zal zijn… voor nu.

OS als betonblok

Door deze ontwikkelingen is het ‘originele’ OS een massief blok aan het been geworden van veel computergebruikers. Deze OS’en hebben zware dure computers nodig om goed te draaien om daarna alleen een tussenlaag te worden om webapplicatie te draaien. Voor ruim 80% van de computergebruikers is de computer te zwaar en een stroomvreter; en de software te duur. Deze ontwikkeling gaat de computerindustrie veranderen ten gunste van de consument. Het duurt niet lang voordat Het besturingssysteem voor een groot deel in de cloud zal gaan werken.  De vraag is alleen: hoe lang laat de consument zichzelf nog bespelen?

Reblog this post [with Zemanta]

Popularity: 3% [?]


5
Nov 09

Web elements: search-box

An eye-tracking Heatmap showing where a subjec...
Image via Wikipedia

Search is getting the dominant way to navigate trough the web.  The first web generation started out with a web-directory (the good old Yahoo, Altavista times), nowadays the start of every web-visit is search.  Websites changed a lot because of this. menu’s, sitemaps and breadcrumbs (the whole web experience) changed because the homepage of every website is not the usual landing page. A search-box is almost essential on every website.

Positioning of the search box

More websites are using a search-box the give users fast access to their information. Not only because websites are getting bigger, also because search is an automatic process. The “Google-Generation” does not care about menu’s they directly use the search-box to find the information they need, even if a website has just 5 pages.  To make the  search box accessible it needs to be on ‘the right spot’.
eye-tracking heatmaps tell us that most visitors are scanning a page in a ‘F’ figure. Two horizontal lines (mostly the horizontal menu and the first header) and a vertical line (a vertical menu). search-boxes are mostly places in the right-upper corner within this ‘F’.

Design of the search-box

Most search-boxes are just a text input field with a button to start search. Sometimes they got a ‘advanced’ search possibility. After examining loads of boxes I came to some general conclusions:

  • There seems to be a trend to filter a search-result after searching instead of offering an advanced search option.
  • Most searches give results with the search-term emphasized and placed in their context.
  • Wildcards like % and * are not used anymore.
  • Websites with a lots of content place a search-box in the center, and do not offer a classic menu anymore.

Examples of search boxes

yahoo_searchbox

wordpress_search

msn_search

myspace_search

twitter_search

ebay_search

flickr_search

digitalbuzz_search

cnn_search

wikipedia_search

Reblog this post [with Zemanta]

Popularity: 6% [?]


14
Oct 09

Start with wireframes.

OmniGraffle
Image via Wikipedia

Want to start a project, start with a wireframeWireframes are an essential part of the project process. Wireframing has some benefits like: Faster web development, a good project guideline and Better user testing. I can advise everyone to start creating wireframes.

Why using wireframes?

By creating wireframes first, you outline the basic layouts for pages (what goes where)   and functionality (what has pagination, what happens when you click “this”, etc.) . You can easily move elements around and ensure that you’re creating a very usable product, while keeping everyone on the project informed. Some reasons for using wireframes are:

  • Users are emotional. Wireframes and prototypes are generally gray or monochromatic in color. This lends itself well to initial user testing. They/You can focus more on actual functionality than users’ reactions to colors, pictures, text, etc. User testing can be hard because people have biased and emotional responses to certain things, this helps alleviate those situations. Wireframes also help you test earlier on in the process. You can see what’s working and what needs some revising before the design is set in stone.
  • Designers can make it too pretty. This will give your designers a place to start, even if you both decide to move things around, it’s at least a non-blank canvas. Graphic designers typically don’t want to design forms, am I correct? This lets them do what they do best without wondering what needs to happen on the page.
  • Programmers can program. Knowing what functionality needs to exist upfront will make your programmers happy and make teamwork easier for them. This allows them to breakdown what/where/when action happens and how to account for it, as well as how best to delegate the work among themselves.

Wireframing on paper

I started out wireframing with pencils on paper, but it did not quite work out for me. I even have difficulties drawing a straight line. So I stopped with this technique as soon as I found Omnigraffle. Last month I stumbled upon the website of Jason Robb, that gave me again new inspiration to start on paper, so I bought some markers and started again.  Wireframes on “real” paper just look better, the counter side is that it’s really hard to edit.

Wireframe software

Ready to start with wireframes? There are some great tools out there that you can use creating them.

  • OmniGraffle Pro, Personally I’m using this one. First because it is easy, second because there are tons of  stencils for it, en third.. I own a Mac, so I can’t use Visio. Want to find a stencil, go to Graffletopia. And really, Omnigraffle Pro is worth the money.
  • Adobe Fireworks. The new Fireworks has loads of rapid prototyping and Wireframe possibilities. Sometimes I like to use it but the bloated possibilities often let you create too detailed wireframes.
  • Microsoft Visio.  For a long time Visio has been the standard for diagrams on the PC and a lot of people have continued to carry on with it for wireframing. You won’t get the same presentation modes that OmniGraffle offers, but you will find more stencils and templates available on the web.

Start today!

I started one year ago with wireframes, and I’m glad I did.  I can’t imagine a project without a wireframe. Never used a wireframe? start today and you’ll see how easy it is. You do not have to be an artist to draw one; keep it simple stupid!

Reblog this post [with Zemanta]

Popularity: 7% [?]


1
Oct 09

How JavaScript frameworks contribute to a consistent experience

JQuery new site
Image by Phillie Casablanca via Flickr

JavaScript Libraries started out as easy frameworks for web developers.  Why write code that’s already been written and, in most cases, better than home-made JavaScript? It also provides a consistent way of programming throughout a project and a fast way to build applications.

JQuery UI and Ext JS, Prototype,  YahooUI all grew to complete JavaScript platforms with familiar design elements that help programmers build an interface that people are used to.  JQuery even has an own themeroller where programmers can generate a whole css theme for their interface.

Building bridges

The new generation of JavaScript libraries are building a small (but hopeful) bridge between designers and developers. Designers can understand the concept, en have consistent elements to work with. Developers can integrate these elements easily within their projects.

Cross browser, cross OS

The acceptance of these libraries among developers and designers is a great step to a consistent experience of web applications. we all recognize widgets, sliders, tabs,  tree’s and we know how to operate them. Consistency is crucial when building rich web-applications. It does not depend on browser or OS, just the library used.

Skepticism

Of course there are some reasons why NOT to use a library. Programmers want to know what’s happening, mainly for debugging reasons, It can be a bit bloated when only using one or two functions and the biggest reason: You shouldn’t trust the code of others for your professional purposes. The latest versions of the various frameworks take away most of these worries with good debug option and even better performance.

Reblog this post [with Zemanta]

Popularity: 9% [?]