1. uPortal Framework and User Interface Demonstration
Justin Tilton

2. Overview What makes this Framework different
It’s Changing the web development paradigm
Benefits programmers and designers
Flexible structural design
Standardization of presentation
Powerful for nomadic users
Support for new devices
Lower total cost of ownership
The Web has become a visual experience. Programmers have teamed with designers to present text and images in a form that helps users become more productive. Experience and research have identified design principles—often remarkably similar to the traditional principles of good print design.
Web programmers have to deal with different monitor sizes, resolutions, and color capabilities. They could either write for the smallest, lowest resolution, limited-color monitors or develop complex code that provided different presentations for different monitors. Decreasing costs have made high-resolution color monitors ubiquitous – giving designers more visual real estate in which to work, and more importantly a common denominator to use as a target, giving rise to more flexible user interface designs.
Then came laptops, Web-enable cell phones, and personal digital assistants. The presentation of data became dependent upon a device, and programmers and designers were forced to develop different code to accommodate each. This began the nightmare of programmatic redirectors, duplication of code and the tough decisions of which devices to accommodate.
As the Internet and Web became more important to all of us, it became clear that the designs also needed features to accommodate to accessibility limitations. Research demonstrated that users had different learning and cognitive styles, and that they were more productive, more accurate, and more satisfied when the presentation of data matched their personal style. Adding these presentation features using traditional scripting techniques increased the complexity and cost of programming and typically decreased the applications reliability.
The VES Application Development Framework divides an application into business logic and presentation. Using a portal, a number of different presentations can be developed separate from the business logic. The appropriate presentation will be displayed based on the users role and preferences and the device the user is using to view the framework. This is accomplished by using new features of the XML language, namely XSL style sheets and XSL transformations. XML messages are used to transfer data from the application program to the portal; the portal invokes the appropriate style sheet for presentation.

3. New web development paradigm
Static sites – HTML
Dynamic sites – ASP, JSP
Transformed sites – XML, XSL, JAVA
Separate business logic & presentation
Reusable designs
Consistency

4. Benefits to programmers and designers
Division of expertise
Collaboration of experts
Max reuse, min development
Diverse learning environment
The most obvious benefit is concentration on tasks by division of expertise. Programmers can program, and designers can design. The skills and experience for programming business logic differ from the skills and experience of user interface and presentation design. Now programmers and designers can focus on what they can and want to best. Each can be more productive. Each can control and test their contributions separately.

5. Flexible structural design
Structure stylesheet
Theme stylesheet
Channel stylesheets
Supports multiple devices
Supports multiple markup languages

6. Structure Stylesheet Tab/Column/Row - VES Tab/Column - JASIG User XML
Tree/Column - JASIG
XSLT
Processor
User XML
Structure Stylesheet

10. Theme Stylesheet HTML 4.0 - Browser HTML 3.2 - PDA Structure XML
WML – Mobile Phone
XSLT
Processor
Structure XML
Theme Stylesheet

12. Channel Stylesheets Channel XML and Stylesheets Final Output
Output Stream to Device

14. Standardization of presentation
Consistency in look and feel
Consistency in navigation
A localized UI element repository
Powerful user customization
Research has shown users expect and benefit from consistency in look and feel and navigation. Because applications come from many different sources, they tend to have different organization of data, different icons, and different navigation. When presentation is separated from business logic, the presentation can be adapted to local standards, and a library of user interface elements - icons, look and feel, and navigation—can be used to achieve commonality and consistency.

15. UI element repository

16. User personalization

17. User personalization

18. User personalization

19. Powerful for nomadic users
Separates logic from presentation
Multiple target device support
Virtual environment – central storage
Events, calendars, addresses, files
The VES application development framework accommodates the various mobile devices in two different ways. First, by separating business logic from presentation, using stylesheets allows the framework to make the best use of the unique features of a specific device that a mobile user has. Second, the framework creates a virtual environment for a nomadic and multi-device user. It is not uncommon for many people to own a cell phone, a PDA, and a Laptop or some combination of web enabled devices. The framework accommodates to, and eliminates the frustration of issues like synchronization of calendars, address books, documents, etc. between devices by creating a virtual environment for the user. The users data – preferences, events, addresses, etc. is secured and stored by the framework in a central location for use by whatever device happens to be most convenient to the user in a particular circumstance. For example, at home a user might log onto the system from a laptop with a large display and upload pictures of their latest fieldtrip to their virtual hard drive and share them with their classmates. On the commute to school in the morning the same user might use a wireless palm to access a class syllabus for the days activities. During lunch this user might dial up the framework to get real-time driving directions to the MENSA Club meeting.

20. Multiple Target Devices

21. New devices, new languages
Framework has the future in mind
XML, XSLT and software engineering
Add a new device, add a stylesheet
Add a new markup language…
New devices and markup languages seem to be springing to life with more fervor than flavors of ice cream. Bring them on! The VES framework has been designed with future proofing in mind. As users continue to enthusiastically embrace the Internet and the web, and demand access to information using the latest and greatest devices and markup languages, the framework will be positioned to deliver, and in a fraction of the time it would take to recreate a traditional site to accommodate these demands.
How is this done? Stylesheets, XML, and excellent software engineering, allow the framework to individually address the unique features of specific devices and the languages they understand. For example, voice applications for mobile telephones are being driven by the requirement that mobile phone users cannot use the keyboard while driving. “Hands off” use can be convenient, and these applications can be developed for specific purposes using a markup language called VoiceML. VoiceML is an XML-based language, which fits nicely into the standards adopted by the framework. XSL transformations (style sheets) can be used to create VoiceML for these applications, and once they are developed, they can be adapted for other devices or markup languages without requiring programming changes to the business logic.

22. New devices

23. Lower total cost of ownership
Framework encourages good design
Focuses on best use of expertise
Reduces time to market
Increases quality of product
Facilitates technology transfer
Creates re-usable objects
Accommodates change
The VES Application Development Framework encourages good design; contributors are focused on their area of expertise, which reduces time to market, and increases the quality of the final product. Collaboration between experts creates a learning environment, and facilitates technology transfer for future development.
Changes can be made in presentation without changing the business logic and vise versa. And a common library of elements, and code encourages reuse and standardization of the user experience. Accommodating change, reusing components, and use of appropriate expertise all combine to lower the lifetime total cost of ownership.

24. Conclusion It’s Changing the web development paradigm
Benefits programmers and designers
Flexible structural design
Standardization of presentation
Powerful for nomadic users
New devices, new languages, it’s covered!
Lower total cost of ownership