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.
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 →
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 →
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 →
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 →
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 →
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.
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
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.
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.
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?
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.
Want to start a project, start with a wireframe! Wireframes 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!
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.
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.