This talk will guide you through the prototyping of javascript interactions in web applications using a great and fun tool called iXEdit.

1. YOU TALK JAVASCRIPT?
PROTOTYPE IT WITH IXEDIT.
Patrick NDJIENTCHEU, ,
Billing designer at Orange Cameroon,
Software Engineer at koutchoumi.com,
patrick@koutchoumi.com
p
BARCAMP CAMEROON, YAOUNDE, 12 June 2010.

2. WHO I AM ?
Software Engineer working as Billing designer
at Orange Cameroon since October 2007.
Project Lead of koutchoumi.com : a real
estate ads website launched in december
2009.
A pure Lions fan ☺
pu e o s a

3. WHAT IS THE PLAN?
The need for j p pp
javascript in web apps
Why does prototyping matter in user interface
design?
Prototyping javascript interactions: IxEdit
Demo

4. JAVASCRIPT GREATLY IMPROVES USER EXPERIENCE
More efficiency
More f
M fun
Better form experience
Brings Desktop UI patterns to the web

5. JAVASCRIPT: BETTER FORM EXPERIENCE
> Dependant
combo box: « Ville »
and « Quartier »
> I t t feedback
Instant f db k

6. JAVASCRIPT BRINGS DESKTOP UI PATTERNS TO THE WEB
> Modal dialog
>T b
Tabs

7. PROTOTYPING MATTERS IN UI DESIGN
UI design is an iterative process.
> In early stages of « implementation »,
you prototype.
> More prototypes mean
better UI.
> Cheap prototypes mean
faster results.

8. PROTOTYPING STATIC STATES
> Paper prototyping
> Balsamiq Mockups

9. PROTOTYPING JAVASCRIPT INTERACTIONS: IXEDIT
IxEdit (ixedit.com) is a JavaScript-based interaction
design tool for the web.
It helps d i
h l designers practice j
ti javascript and DOM
i t d DOM-
scripting without coding.
It is useful to try various interactions rapidly in the
prototyping phase.
It’s free and absolutely fun to use ☺

10. SOME INTERACTIONS WITH IXEDIT

11. 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.
Then, it’ amazingly simple:
Th it’s i l i l

12. HOW IT WORKS [DEPLOYMENT]?
IxEdit generates Javascript code designed to work
with JQuery and JQueryUI.
This code is cross-browser compatible:
p
Internet Explorer 6+
Firefox 2+
Safari
S f i 3+
Opera 9+
Chrome.
Once you are done with the design, just remove
IxEdit javascript and css i l i
I Edit j i t d inclusions f
from th h d
the head
element of the HTML.

13. DEMO TIME
Want to
W t t see more? L t’ d
? Let’s demo it!

14. Q
QUESTIONS ?

15. THANK YOU
YOU.
Be h Lions you want to see.
B the Li
http://www.koutchoumi.com
http://slideshare.net/pattchen
http://facebook.com/pattchen
Feedback? patrick@koutchoumi.com