YOU TALK JAVASCRIPT? YOU TALK JAVASCRIPT? PROTOTYPE IT WITH IXEDIT.

Patrick NDJIENTCHEU,,Billing designer at Orange Cameroon,Software Engineer at koutchoumi.com, patrick@koutchoumi.comp

BARCAMP CAMEROON, YAOUNDE, 12 June 2010.

WHO I AM ?WHO I AM ?

Software Engineer working as Billing designer Software Engineer working as Billing designer at Orange Cameroon since October 2007.

Project Lead of koutchoumi.com : a real estate ads website launched in december2009.

A pure Lions fan ☺pu e o s a ☺

WHAT IS THE PLAN?WHAT IS THE PLAN?

The need for javascript in web appsj p pp

Why does prototyping matter in user interface Why does prototyping matter in user interface design?

Prototyping javascript interactions: IxEdit

Demo

JAVASCRIPT GREATLY IMPROVES USER EXPERIENCEJAVASCRIPT GREATLY IMPROVES USER EXPERIENCE

More efficiencyMore efficiency

M fMore fun

Better form experience

Brings Desktop UI patterns to the web

JAVASCRIPT: BETTER FORM EXPERIENCE

> Dependantcombo box: « Ville » combo box: Ville and « Quartier »

I t t f db k> Instant feedback

JAVASCRIPT BRINGS DESKTOP UI PATTERNS TO THE WEB

> Modal dialog

T b> Tabs

PROTOTYPING MATTERS IN UI DESIGN

UI design is an iterative process.UI design is an iterative process.

> In early stages of « implementation », you prototype.

> More prototypes meanbetter UI.

> Cheap prototypes meanfaster results.

PROTOTYPING STATIC STATESPROTOTYPING STATIC STATES

> Paper prototyping

> Balsamiq Mockups

PROTOTYPING JAVASCRIPT INTERACTIONS: IXEDIT

IxEdit (ixedit.com) is a JavaScript-based interaction design tool for the web.

It h l d i ti j i t d DOMIt helps designers practice javascript and DOM-scripting without coding.

It is useful to try various interactions rapidly in the prototyping phase.

It’s free and absolutely fun to use ☺

SOME INTERACTIONS WITH IXEDIT

HOW IT WORKS [DEVELOPMENT]?HOW IT WORKS [DEVELOPMENT]?

Your favorite browser is your dev environment:Safari 3.1+, Chrome, Firefox 3+, or Internet Explorer 7+.Eventually, Google Gears to use the local database.

Th it’ i l i lThen, it’s amazingly simple:

HOW IT WORKS [DEPLOYMENT]?HOW IT WORKS [DEPLOYMENT]?IxEdit generates Javascript code designed to workwith JQuery and JQueryUI.with JQuery and JQueryUI.

This code is cross-browser compatible:pInternet Explorer 6+Firefox 2+S f i 3+Safari 3+Opera 9+Chrome.

Once you are done with the design, just removeI Edit j i t d i l i f th h dIxEdit javascript and css inclusions from the headelement of the HTML.

DEMO TIME

W t t ? L t’ d it!Want to see more? Let’s demo it!

QUESTIONS ?Q

THANK YOUTHANK YOU.B h Li Be the Lions you want to see.

http://www.koutchoumi.comhttp://slideshare.net/pattchenhttp://facebook.com/pattchen

Feedback? patrick@koutchoumi.com