This page (revision-11) was last changed on 26-Nov-2021 10:22 by JMyers

This page was created on 26-Nov-2021 10:22 by JMyers

Only authorized users are allowed to rename pages.

Only authorized users are allowed to delete pages.

Page revision history

Version Date Modified Size Author Changes ... Change note
11 26-Nov-2021 10:22 6 KB JMyers to previous
10 26-Nov-2021 10:22 6 KB JMyers to previous | to last
9 26-Nov-2021 10:22 6 KB JMyers to previous | to last
8 26-Nov-2021 10:22 6 KB JMyers to previous | to last
7 26-Nov-2021 10:22 6 KB JMyers to previous | to last
6 26-Nov-2021 10:22 6 KB JMyers to previous | to last
5 26-Nov-2021 10:22 6 KB JMyers to previous | to last
4 26-Nov-2021 10:22 6 KB JMyers to previous | to last
3 26-Nov-2021 10:22 6 KB JMyers to previous | to last
2 26-Nov-2021 10:22 6 KB JMyers to previous | to last
1 26-Nov-2021 10:22 6 KB JMyers to last

Page References

Incoming links Outgoing links
SELF SERVICE 2.0
SELF SERVICE 2.0

Version management

Difference between version and

At line 3 changed 5 lines
The purpose of this document is to describe the technical aspects of the Self-Service 2.0 Layout. Self-Service 2.0 was designed and implemented with the following technical goals in mind:
1 Should be free of the screen realty and browser-sizing issues, which plague the former Self-Service layout.
2 Should conform to current web-standards and trends.
3 Should be compatible across standards-based browsers such as Microsoft Internet Explorer 7 and Mozilla FireFox 2.
4 Prototype should conform to High Line standard screen resolution of 800x600.
The purpose of this document is to describe the technical aspects of the Self-Service 2.0 Layout. Self-Service 2.0 was designed and implemented with the following technical goals in mind: \\
#Should be free of the screen realty and browser-sizing issues, which plague the former Self-Service layout.
#Should conform to current web-standards and trends.
#Should be compatible across standards-based browsers such as Microsoft Internet Explorer 7 and Mozilla FireFox 2.
#Prototype should conform to High Line standard screen resolution of 800x600.
At line 9 changed 2 lines
Layout
The first thing the user will notice is the layout itself. Gone is the over-crowding of boxes in the action bar, gone is the row of ambiguous Business Role icons and gone is the side navigation bar.
!!Layout
The first thing the user will notice is the layout itself. Gone is the over-crowding of boxes in the action bar, gone is the row of ambiguous Business Role icons and gone is the side navigation bar.\\
At line 12 changed 3 lines
Maximizing Screen Realty
Several things were done in the layout to maximize screen realty including trimming the action bar and Business Roles layouts, and changing the side navigation bar into a popup.
The Business Roles layout is now a widget, which displays the current Business Role and displays a drop-down menu of all available Business Roles when a mouse pointer hovers over it.
!!Maximizing Screen Realty
Several things were done in the layout to maximize screen realty including trimming the action bar and Business Roles layouts, and changing the side navigation bar into a popup.\\
The Business Roles layout is now a widget, which displays the current Business Role and displays a drop-down menu of all available Business Roles when a mouse pointer hovers over it.\\
At line 16 changed one line
The Action bar layout has been trimmed down to display only application-level buttons. The form action buttons (Save, Revert and Print) were relocated to just above the top-right corner of the content area and will be visible when a form is
The Action bar layout has been trimmed down to display only application-level buttons. The form action buttons (Save, Revert and Print) were relocated to just above the top-right corner of the content area and will be visible when a form is\\
At line 18 changed 3 lines
open and hidden when the splash screen is displayed.
The show navigation menu button was relocated to the immediate left of the content title.
The side navigation bar has been replaced by a floating menu, which is hidden by default. The floating menu is “brought up” by clicking the show navigation button. The navigation menu floats over the content area and will display a submenu of menu items when hovering over a menu item in the first menu. The floating menu is dismissed by clicking anywhere in the layout not belonging to the menu layout.
open and hidden when the splash screen is displayed.\\
The show navigation menu button was relocated to the immediate left of the content title. \\
The side navigation bar has been replaced by a floating menu, which is hidden by default. The floating menu is “brought up” by clicking the show navigation button. The navigation menu floats over the content area and will display a submenu of menu items when hovering over a menu item in the first menu. The floating menu is dismissed by clicking anywhere in the layout not belonging to the menu layout. \\
At line 23 changed 3 lines
Handling various browser-sizes and screen resolutions
The former Self-Service layout was “liquid” as it would stretch or contract to fit the dimensions of the browser window. Various browser-sizes and screen resolutions often cause issues in such layouts including unwanted wrapping of web objects or over-expanded text-areas.
This issue is addressed and resolved in the prototype layout by making it a “fixed-width” type layout. Whether the browser size or screen resolution is at 800x600 or 1600x1200, there will be no contraction or expansion issues.
!!Handling various browser-sizes and screen resolutions
The former Self-Service layout was “liquid” as it would stretch or contract to fit the dimensions of the browser window. Various browser-sizes and screen resolutions often cause issues in such layouts including unwanted wrapping of web objects or over-expanded text-areas. \\
This issue is addressed and resolved in the prototype layout by making it a “fixed-width” type layout. Whether the browser size or screen resolution is at 800x600 or 1600x1200, there will be no contraction or expansion issues.\\
At line 27 changed 4 lines
800x600 1024x768 1280x1024
Cross-Browser Compatibility and Web Standards
Browser Compatibility and following Web Standards actually go hand-in-hand. In order to be compatible with Mozilla FireFox 2, all HTML, CSS and JavaScript had to conform to current Web Standards.
The process of ensuring browser compatibility also involved making the layout completely frameless and replacing all HTML TABLE elements with DIV and SPAN elements. In addition, all HTML is completely styled using CSS ensuring a clear separation between style and content.
800x600 1024x768 1280x1024 \\
!!Cross-Browser Compatibility and Web Standards
Browser Compatibility and following Web Standards actually go hand-in-hand. In order to be compatible with Mozilla FireFox 2, all HTML, CSS and JavaScript had to conform to current Web Standards. \\
The process of ensuring browser compatibility also involved making the layout completely frameless and replacing all HTML TABLE elements with DIV and SPAN elements. In addition, all HTML is completely styled using CSS ensuring a clear separation between style and content. \\
At line 33 changed 2 lines
Ditching the FRAME but keeping the functionality
It is also worth mentioning that although we didn’t want to work with FRAME elements we wanted to keep the FRAME functionality as it is very convenient to keep the application header static.
!!Ditching the FRAME but keeping the functionality
It is also worth mentioning that although we didn’t want to work with FRAME elements we wanted to keep the FRAME functionality as it is very convenient to keep the application header static. \\
At line 36 changed one line
Frame action minus the FRAME.
!!Frame action minus the FRAME.
At line 38 changed 2 lines
Self Service 2.0 Walk Through
Technical Features
!!Self Service 2.0 Walk Through
!Technical Features
At line 50 changed one line
Application
!!Application
At line 58 changed one line
Role Bar
!!Role Bar
At line 64 changed one line
Side Menu
!!Side Menu
At line 70 changed one line
Splash
!!Splash
At line 78 changed one line
Better usage of loading animation
!!Better usage of loading animation
At line 86 changed one line
Find Area
!!Find Area
At line 91 changed one line
Fonts
!!Fonts
At line 97 changed one line
Dialogs
!!Dialogs
At line 103 changed 3 lines
LOV’s
Searches reduce list dynamically
Completely revamped to eliminate screen flashing
!!LOV’s
*Searches reduce list dynamically
*Completely revamped to eliminate screen flashing
At line 107 changed 3 lines
Tabs
Improved UI
Dynamic Loading
!!Tabs
*Improved UI
*Dynamic Loading
This page (revision-11) was last changed on 26-Nov-2021 10:22 by JMyersTop