Automating Google Workspace (GWS) & more with Apps Script
Prototyping user interactions in web apps
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
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.
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 ☺
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.
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