uPortal Framework and User Interface Demonstration Justin Tilton

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.

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

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.

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

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

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

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

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.

UI element repository

User personalization

User personalization

User personalization

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.

Multiple Target Devices

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.

New devices

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.

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