Picking & choosing for a rich user interface
description
Transcript of Picking & choosing for a rich user interface
![Page 1: Picking & choosing for a rich user interface](https://reader035.fdocuments.in/reader035/viewer/2022081604/56816762550346895ddc3abe/html5/thumbnails/1.jpg)
Picking & choosing for a rich user interface
Manu Vermeyen
The case of Flanders Investment & Trade
![Page 2: Picking & choosing for a rich user interface](https://reader035.fdocuments.in/reader035/viewer/2022081604/56816762550346895ddc3abe/html5/thumbnails/2.jpg)
DISCLAIMERS
![Page 3: Picking & choosing for a rich user interface](https://reader035.fdocuments.in/reader035/viewer/2022081604/56816762550346895ddc3abe/html5/thumbnails/3.jpg)
AGENDA
Why ‘classic’ domino web dev Rich User Experience: javascript frameworks Who is FIT? Examples
• Structure: why ajax?• Important notices : what is dojo?• Searching: YUI• Phototheque: MooTools• Forms: Dojo• Agenda: Dojo
![Page 4: Picking & choosing for a rich user interface](https://reader035.fdocuments.in/reader035/viewer/2022081604/56816762550346895ddc3abe/html5/thumbnails/4.jpg)
CLASSIC WEB VS XPAGES
Pre 8.5 period
Learning curve for xpages for all involved
Sense of control
Quick wins
New web developers
Future direction : sharpen your axe
![Page 5: Picking & choosing for a rich user interface](https://reader035.fdocuments.in/reader035/viewer/2022081604/56816762550346895ddc3abe/html5/thumbnails/5.jpg)
RICH USER INTERFACE
Modern web sites offer (full) client functionality
Rely on javascript and/or XML
AJAX based models for speed and bandwidth
DOM Manipulation
CSS & Javascript frameworks
![Page 6: Picking & choosing for a rich user interface](https://reader035.fdocuments.in/reader035/viewer/2022081604/56816762550346895ddc3abe/html5/thumbnails/6.jpg)
WHAT ARE JAVASCRIPT FRAMEWORKS
Library of utilities and functions
Manipulate DOM objects
Event handling
AJAX support
Not necessary to use the complete framework
![Page 7: Picking & choosing for a rich user interface](https://reader035.fdocuments.in/reader035/viewer/2022081604/56816762550346895ddc3abe/html5/thumbnails/7.jpg)
WHICH FRAMEWORKS AND WHY
DOJO
MooTools
Yui
Completeness of the set
Development and documentation
Specific functionality
![Page 8: Picking & choosing for a rich user interface](https://reader035.fdocuments.in/reader035/viewer/2022081604/56816762550346895ddc3abe/html5/thumbnails/8.jpg)
WHO IS FIT: MISSION
Improve the international entrepreneurship of Flemish companies, especially SMB
Attract foreign investments to Flanders
Stimulate international entrepreneurship focussing on a sustainable and ethical approach
Provide an excellent service to our Flemish and foreign customers
F.I.T is close to its customers, present not only in Brussels but also in:
• Every Flemish province: close-knit domestic network
• Abroad: more than 90 offices worldwide
![Page 9: Picking & choosing for a rich user interface](https://reader035.fdocuments.in/reader035/viewer/2022081604/56816762550346895ddc3abe/html5/thumbnails/9.jpg)
WHO IS FIT: SERVICES
Towards local companies
• Events & Actions
• Subsidies.
• Opportunities & International information
• Contact data of prospects and partners
• Foreign presence
• Foreign expertise
![Page 10: Picking & choosing for a rich user interface](https://reader035.fdocuments.in/reader035/viewer/2022081604/56816762550346895ddc3abe/html5/thumbnails/10.jpg)
WHO IS FIT: SERVICES
Towards foreign companies
• Promote Flanders as investment location
• Advise companies wanting to invest in Flanders
![Page 11: Picking & choosing for a rich user interface](https://reader035.fdocuments.in/reader035/viewer/2022081604/56816762550346895ddc3abe/html5/thumbnails/11.jpg)
WHO IS FIT: LOTUS NOTES
Role of Lotus Notes
• Primary communication end collaboration tool between central and descentralised offices
• On/offline collaboration• RAD in a fast changing environment
![Page 12: Picking & choosing for a rich user interface](https://reader035.fdocuments.in/reader035/viewer/2022081604/56816762550346895ddc3abe/html5/thumbnails/12.jpg)
FIT THE INTRANET: REQUIREMENTS
Simplicity
Performance
Easily ‘click in’ new and existing notes applications
Roles and functions (security)
![Page 13: Picking & choosing for a rich user interface](https://reader035.fdocuments.in/reader035/viewer/2022081604/56816762550346895ddc3abe/html5/thumbnails/13.jpg)
EXAMPLES: STRUCTURE
Reasons
• Simplicity to ‘click in’ new blocks
• Change of mind / importance
• Extensible
Technical
Form preloading all necessary classes shared and structure of the site
documents describing the individual blocks
Framework
Dojo: loading of individual blocks using xhrget (ajax call for html)
![Page 14: Picking & choosing for a rich user interface](https://reader035.fdocuments.in/reader035/viewer/2022081604/56816762550346895ddc3abe/html5/thumbnails/14.jpg)
IMPORTANCE NOTICES
Reason
• Show top notices on restricted screen real estate• Look
Technical
• One form, one view
Framework
• Dojo : Rotator
![Page 15: Picking & choosing for a rich user interface](https://reader035.fdocuments.in/reader035/viewer/2022081604/56816762550346895ddc3abe/html5/thumbnails/15.jpg)
![Page 16: Picking & choosing for a rich user interface](https://reader035.fdocuments.in/reader035/viewer/2022081604/56816762550346895ddc3abe/html5/thumbnails/16.jpg)
TYPE AHEAD SEARCH
Reason
• Help users enter correct search criteria that lead to answers (no ‘nothing found’), fast response
Technical
• Field and a lookup view
Framework
• YUI, Autocomplete
![Page 17: Picking & choosing for a rich user interface](https://reader035.fdocuments.in/reader035/viewer/2022081604/56816762550346895ddc3abe/html5/thumbnails/17.jpg)
5
![Page 18: Picking & choosing for a rich user interface](https://reader035.fdocuments.in/reader035/viewer/2022081604/56816762550346895ddc3abe/html5/thumbnails/18.jpg)
FOTOTHEEK
Reason
• Modern way to present picture series• Easy navigation (and extra info)
Technical
• Form and view for lookup
Framework
• MooTools: copying functionality of example web site• And Dojo lightbox
![Page 19: Picking & choosing for a rich user interface](https://reader035.fdocuments.in/reader035/viewer/2022081604/56816762550346895ddc3abe/html5/thumbnails/19.jpg)
![Page 20: Picking & choosing for a rich user interface](https://reader035.fdocuments.in/reader035/viewer/2022081604/56816762550346895ddc3abe/html5/thumbnails/20.jpg)
VARIOUS FORMS
Reason
• Enhanced user experience
Technical
• Field properties
Framework
• DOJO
![Page 21: Picking & choosing for a rich user interface](https://reader035.fdocuments.in/reader035/viewer/2022081604/56816762550346895ddc3abe/html5/thumbnails/21.jpg)
FORM EXAMPLES
![Page 22: Picking & choosing for a rich user interface](https://reader035.fdocuments.in/reader035/viewer/2022081604/56816762550346895ddc3abe/html5/thumbnails/22.jpg)
RENDEZ VOUS?
• POT days : Deep dive in web dev (javascript framework DOJO, YUI,…) – week 16/5 (FREEFREEFREE!)
• www.groupwave.com• [email protected]• Tungle.me/ManuV
![Page 23: Picking & choosing for a rich user interface](https://reader035.fdocuments.in/reader035/viewer/2022081604/56816762550346895ddc3abe/html5/thumbnails/23.jpg)
CONCLUSIONS
Choose one framework
You’ve got friends
Decide on some ‘standards’ up front
Don’t want to do everything ‘like Google LotusLive’
When starting from scratch : sharpen your axe
![Page 24: Picking & choosing for a rich user interface](https://reader035.fdocuments.in/reader035/viewer/2022081604/56816762550346895ddc3abe/html5/thumbnails/24.jpg)