Archive for September, 2008

HTML 5: Seeing is believing

preamble

We have lived with HTML5 drafts for 4 years, last draft was published on 27 September 2008.
HTML5 has big number of features and probably will be major change of HTML for all history of Web.

Most prominent features are: Scripting API additionally to regular markup, and number of new APIs: Timed media playback, Storage, Offline work support, Drag and drop, Messaging/Networking, Back button management.
You can look at article on wikipedia [http://en.wikipedia.org/wiki/HTML_5] and at current draft [http://www.whatwg.org/specs/web-apps/current-work/] for more details about HTML5.

Come along

Many different words about HTML5 were already told, and we know that seeing is believing.
So today we have possibility to watch some of already implemented features of HTML5 thanks to Ian Hickson, Google employee that “heavily involved in Google’s work with the W3C, representing Google on the CSS working group and reviewing specifications of other working groups (SVG, CDF, etc)” according to Ian site [http://ian.hixie.ch/]

Following video include subsequent features:
* <video> (00:35)
* postMessage() (05:40)
* localStorage (15:20)
* sessionStorage (21:00)
* Drag and Drop API (29:05)
* onhashchange (37:30)
* Form Controls (40:50)
* <canvas> (56:55)
* Validation (1:07:20)

You can find detailed notes on: [http://www.whatwg.org/demos/2008-sept/]

Browsing Web with human interface: Mozilla Ubiquity

preamble

Mozilla Labs as always makes us happy with new innovative ideas.
Maybe you remember post of Vasiliy Kiryanov about Mozilla Prism: with that platform we can use web-applications like regular desktop applications [http://blogs.helion-prime.com/vasiliykiryanov/2008/06/03/new-web-experience-with-mozilla-prism.html]
And now new fresh idea from Mozilla Labs: Ubiquity as a way “connecting the Web with language”.

Ubiquity way

For a long time people have idea to create a way to store and query data of any application easy.
It can give enormous flexibly like everything is already here and in appropriate format. We know this idea as W3C Semantic Web[http://ru.wikipedia.org/wiki/Semantic_Web], as we are still far from it, software developers on Internet are using mashups [http://en.wikipedia.org/wiki/Mashup_(web_application_hybrid)] to get similar effect today.

But what can we do from user side when we want to connect many different applications together, and use them in a same way. Ubiquity propose a way to describe common tasks in the Web using language-based instructions, and then you can create you own mashups with help of existing open Web APIs.

To have a better understanding how it work you can watch following video:

Now if you like the idea you can continue reading about it from Ubiquity tutorial: [https://wiki.mozilla.org/Labs/Ubiquity/Ubiquity_0.1_User_Tutorial]

related links:
Ubiquity Commands: [https://labs.toolness.com/ubiquity-herd]
Get Help & give your suggestion: [http://getsatisfaction.com/mozilla/products/mozilla_ubiquity]
Report a Bug: [http://labs.toolness.com/trac/report]

Fresh toy from Google: Chrome browser

preamble

We have enough browsers today: IE, Firefox, Opera, Konqueror, Safari.
There is a question: do we need another one?
We have a lot of problems with compatibility, and almost any web-developer spends time on tuning pages for IE/Firefox.

Google Chrome

Chrome developers made a special page describing why they started new browser.

“What we really needed was not just a browser, but also a modern platform for web pages and applications, and that’s what we set out to build.”

“On the surface, we designed a browser window that is streamlined and simple. Under the hood, we were able to build the foundation of a browser that runs today’s complex web applications much better. We improved speed and responsiveness across the board. We also built V8, a more powerful JavaScript engine, to power the next generation of web applications that aren’t even possible in today’s browsers.”

“We’ve used components from Apple’s WebKit and Mozilla’s Firefox, among others - and in that spirit, we are making all of our code open source as well.”
A fresh take on the browser [http://www.google.com/chrome/intl/en/why.html?hl=en#]

And made comics to describe features: [http://www.google.com/googlebooks/chrome/]

As you see we should have browser with improved speed that will be modern platform for web-applications.
Unfortunately I can’t test it now due to we use GNU/Linux in our company and developers presented only version for Windows.

If you are Windows user maybe it worth a look, and make own opinion.
Go on: [http://www.google.com/chrome/intl/en/features.html]

Chrome screenshot

Easy user-interface(UI) prototyping

preamble

We need special software to make prototypes of user-interface everyday, and it doesn’t mater if we do new system or redesign of old one. Also we don’t have dedicated person for every task due to we use Agile approach [http://en.wikipedia.org/wiki/Agile_software_development] to development.

Certainly someone say that: they don’t need to prototype, they can use just pencil and paper, or even they have designer for such tasks. Don’t believe them, it’s task of developers as well as writing tests.

If you still think differently about test: check Test-Driven Development (TDD) [http://en.wikipedia.org/wiki/Test-driven_development],
if about prototyping read famous book of Alan Kuper “The Inmates Are Running the Asylum”. [http://www.amazon.com/Inmates-Are-Running-Asylum/dp/0672316498]

rapid prototyping

If you still reading.. then we just need to select some software to do it fast, pretty, and surely with Open-Source software. [http://en.wikipedia.org/wiki/Open_source]

On Interaction Design Association (IxDA) [http://www.ixda.org/] discussion forum we can find that  people use almost any tool to do prototyping: ACD Canvas, Microsoft Word, Microsoft Excel, Snapz Pro X, Eight Media, GUI Design Studio, LucidSpec,
Multimedia Fusion, SmartDraw, Inspiration, MockupScreens, Microsoft Power Point, Oversite, …

First of all forget about software for grapic manipulations like: adobe photoshop or corell draw, then  about software that don’t have any connection to prototyping at all. With such software you will lose your time, and will think that it is work for designers.

There are different special software to prototype software user-interfaces, and most of them are commercial.

As famous commercial I can note:
Axure [http://www.axure.com/],
Adobe inDesign [http://www.adobe.com/products/indesign/],
MS Visio [http://office.microsoft.com/en-us/visio/FX100487861033.aspx]

Sure we have open-source ones, I have checked several and unfortunately most of them are ugly.
But still we have wonderful rising star. It has basic amount of functionality at this time. But has all possibilities to became wonderful open-source project.
Here it is: Pencil project. [http://www.evolus.vn/Pencil/]

Top features:
* Built-in stencils for diagramming and prototyping
* Multi-page document with background page
* On-screen text editing with rich-text supports
* Installing user-defined stencils
* Standard drawing operations: aligning, z-ordering, scaling, rotating…
* Adding external objects
* Cross-platforms

I hope you will find yourself in UI prototyping, as well as architecture prototyping with Unified Modeling Language(UML) [http://en.wikipedia.org/wiki/Unified_Modeling_Language]

related links:
# http://Interaction-Design.org — an open-content encyclopedia about usability
# http://jthom.best.vwh.net/usability —Online guide to usability methods
# http://Usabilitybok.org
# http://usabilityfirst.com — Online guide to usability methods resource