Rubik Financial Limited Internet Banking

Rubik Financial Limited

Internet Banking

Internet Banking GUI Guidelines Internet Banking Graphic and Technical Methodology This is a description of the GUI features you need to be aware of when working with the Graphical User Interface code and elements on the screen. A description of how the flying boxes need to work through to the graphically representation of the main Internet Banking screens and CSS controlled corporate branding details.

Rubik Financial ABN 51 071 707 232

PO Box 441 Pymble NSW 2073 T: +61 2 9488 4000 F: +61 2 9449 1116

www.rubik.com.au

Table of Contents 1. ENTITY-RELATIONSHIP INTERNET BANKING MODEL ............................................................................................ P4 2. LOGIN PAGE DESIGN ................................................................................................................................... P5 3. MAIN PAGE DESIGN .................................................................................................................................... P6 4. MAXIMIZED OPTION SCREEN ......................................................................................................................... P7 5. CLASSIC PAGE DESIGN ................................................................................................................................ P8 6. LOGOUT PAGE DESIGN ................................................................................................................................ P8 7. FLYING BOXES: FLOATING DIVS, DHTML DROP & DROP BOXES ...................................................................... P9 8. SAMPLE CODE: TO MAKE CLOSED BOXES OPEN ONTO THE WORKING AREA ...................................................... P13 9. FUNCTIONAL CODE: TO MAKE THE BOXES DRAG-ABLE ................................................................................... P18 10. MAXIMIZED OPTION: HIDDEN DIV................................................................................................................. P33 11. CASCADING STYLE SHEETS: CSS ................................................................................................................. P37 12. BUSINESS BANKING ..................................................................................................................................... P39 13. MANAGEMENT TOOL AND MY PAYMENT FLYING BOXES ................................................................................ P41

Rubik Financial ABN 51 071 707 232

PO Box 441 Pymble NSW 2073 T: +61 2 9488 4000 F: +61 2 9449 1116

www.rubik.com.au

Rubik Financial - Confidential

Rubik Internet Banking Methodology Jan 2009 v1.doc

3

Document Control

Document Information

© Information

Document ID Rubik Internet Banking Methodology

Document Owner

John Raciti – Graphic UI Designer Web and Graphic Design

Document Contributor Maryam Davoodi - Web Developer

Issue Date 07/01/09

Last Saved Date 07/01/09

File Name Rubik Internet Banking Methodology Jan 2009 v1.doc

Document History

Version

Issue Date

Changes

1.0 07/01/09 First Release – added checklist

Document Approvals

Role Name Signature© Date Chief Operating Officer (COO)

Steve Kunkler



Internet Banking Methodology 1. Entity-relationship Internet Banking Model: GUI Design:

4

This is an entity-relationship diagram that depicts the overall GUI structure in terms of (Graphical User Interface) and how the internet banking screens relate to each other and the type of data that is called. Please note that these Internet Banking model has been designed in this manner – so that the user logs into a system and remains on one single page throughout the whole online banking process. It was important to design a system that allowed multiple sections to be displayed at once and to happy full screen access to data – within the one opened browser window. We are using many divs, hidden divs, iframes, css, html, dhtml and some tables to help manage all the content into Internet Banking container (Flying windows page). We have also created a classic option to view the internet Banking



data – for users who are more familiar with traditional screen designs and who are not ready to move onto a next generation of Flying Boxes screen technology.

2. Login Page Design:

The Login Page is a standard username and password pin form page. We should look at protecting Internet Banking with Factor 2. This page has a logo and a banner advert located in the header part of the page. The form is situated in the body part of the page and to keep to the Rubik branding – we have designed a branded footer feature on the page. We designed the screen in this manner to keep the composition simple and configurable to any bank, credit union or organization that comes on board who would like to implement the system and use our Rubik internet banking system. Most the graphic content on the page is now css driving and can be changed easily. We have designed the system in a way that we have ‘css files’ for each client – that manages the client’s corporate logos, buttons, adverts, and appropriate hex colours (corporate skins). These css - cascade style sheets ‘corporate skins’ will need to be designed according to the client’s corporate branding i.e. BSP like we designed their interface for i-phone mobile banking.

5



6

d

he most important columns i.e. like a preview of the ized option screen.

3. Main Page Design: The Main Page for Internet Banking is very complex. It contains many different technologies. We kept the screen clean and simple. It consists of a header part of the page – which contains the corporate logo and Advert. We have also includea welcome message. We have designed the body of the page to have ‘Flying Boxes’. We have a working area on the page – where the flying boxes are in an open state allowing the user to access different information about their banking at once. On the left side of the screen – we have other banking areas in a close state. Users are able to drag and drop any sectional content onto the stage/working area of the page – and gain access and update their banking details. Please note each flying box has an iframe link to each data grid/table. Also take note that the data that is displayed is only tmaxim



4. Maximized Option Screen:

The great feature about this optimized option on the screen is that – all data remains on the page within the one opened browser window. What happens is that the data grid/table that is called through the iframe – displays more columns – in comparison to the main page screen.

7



5. Classic Page Design:

We have provided a screen viewing option that enables users to view classic page view. These feature help older user – to view the system in a traditional way. We have also included a way of getting back to the Flying Boxes mode – for user to be able to experience the next generation of Rubik’s banking system.

6. Logout Page Design:

8



We have a Logout Page – that enables users to log back in. Also we have included an exit advert into the design – which would contribute to leads through sale & marketing campaigns. 7. Flying Boxes: Floating Divs, DHTML Drop & Drop Boxes.

We have a series of java script functions that allow the user to drag and drop boxes on the stage. We have developed a new approach of accessing information. Using opening and close functions – we allow users to update their banking details. Users are able to drag and drop flying boxes to and from the stage to a stacking area of the page. This stacking area has replaced the side navigation system – these flying boxes only open when placed on the stage for use. Open flying boxes – close when the user drags and drops them back to the stacked area of the screen.

9



Please note that Flying Boxes are divided into three columns. All of the stacked flying boxes can be placed onto the work area/stage. The more flying boxes the user places onto the stage – the browser screen will scroll – leaving the first column empty. The user has always the option to drag and drop flying boxes into the stacking area. Please note – Flying Boxes must be in pixel height – for reason that the page needs to grow in height and scroll. The width of the page columns are specified in percentages. Please note – the height of the flying boxes must be in pixels – i.e. if a user dropped all eight sections onto the stage – each flying boxes would occupy 20% height of the screen. This would then result into an auto scrolling within the eight boxes on the screen. We have designed the page in a way that its user friendly, easy to operate and the gui allow a much more personalized approach to banking online.

10



Each Flying Box is made up of Divs and iframes that are linked to other data grid location pages. The user can’t delete sections. They can open, close, and update the content inside the boxes. Please note that if you require updating any graphics from any data grid – you need to go to the location or the source of the link. The iframe is handled in the main page. But the source is a different page. The user – views one page at all times. The main flying boxes page acts as a vessel or container of the information it is calling. It’s calling from many pages that run data server queries that have been displayed through an iframe in drag-able divs.

11



12



13

8. Sample code to make closed boxes open onto the working area: I’ve attached some sample code you must have to make the flying boxes – open and close on the page.

if(this.a.parentNode.id == "c_1")

{

if(bxclassName=="minbox")

{

if(boxID =="m_11_zippy")

{

chgTT(boxObject);return _zm('11', '20');return true;

}


{


}


{


}


{


}




14

{


}


{


}


{


}


{


}

}

}

else

{

if(bxclassName=="maxbox")

{


{




15

}


{


}


{


}


{


}


{


}


{


}


{




}


{


}

}

}

These are some screen shots of how the graphic needs to look while the user drags the flying boxes element – i.e. box dash lines and a much lighter box opacity.

16



All dragging & dropping must look consistent; therefore operate in the same manner on stage or in the stacking areas of the page. Please note: All flying boxes must have individual property identification. Not one flying box – should have named the same or have the some property names or id’s. As a result the application will not work properly. This rule is so important when dragging and dropping flying boxes – i.e. what may happen is that one box may move another box in the process of drag & drop.

17



18

9. Functional Code – to make the boxes drag-able: This is some sample code that we are using to make the boxes fly. This code has been sourced from igoogle.com. These functions are based on igoogle technologies. It is important not to alter or delete any of these functions. As a result – the boxes will have a problem working. Also by altering or deleting any of these function may cause IE7 browser errors. function _upc(){var a=[];_cbp||(a[a.length]=["medit","display",_uli?"":"none"]);a[a.length]=["panelo","display",_pnlo?"":"none"];a[a.length]=["panelc","display",_pnlo?"none":""];if(_mod){a[a.length]=["unmod","display","none"];a[a.length]=["mod","display",""]}else{a[a.length]=["mod","display","none"];a[a.length]=["unmod","display",""]}ig_p(a);_init_drag_drop()} function _init_drag_drop(){if(_pl)if(_cbp||_uli)if(!ig_B&&!_mpnlo){_IG_TriggerCustomEvent("initdrag",_table,_tabs);ig_B=ig_e}}

function ig_5a(a){this._urlMouseUp=ig_6a;this._urlMouseDown=ig_7a;this._urlClick=ig_8a;this._dragStart=ig_9a;this._drag=ig_$a;this._dragEnd=ig_ab;this.Z=ig_1;this.S=ig_bb;this.I=ig_2;this.j=ig_c;this.a=a;this.g=_gel(a.id+"_h");this.d=_gel(a.id+"_url");this.jb=this.a.getElementsByTagName("IFRAME").length>0;this.a.DND_Module=this;if(this.g){this.g.style.cursor="move";ig_3.init(this.g,this.a);this.a.onDragStart=ig_0.k(this,"_dragStart");this.a.onDrag=ig_0.k(this,"_drag");this.a.onDragEnd=ig_0.k(this,

"_dragEnd");if(this.d){this.d.style.cursor="pointer";if(ig_0.ja){this.d.onmousedown=ig_0.k(this,"_urlMouseDown");this.d.onclick=ig_0.k(this,"_urlClick")}else this.d.onmouseup=ig_0.k(this,"_urlMouseUp")}}}function ig_2(){if(this.g){if(this.d){this.d.onclick=ig_;this.d.onmouseup=ig_;this.d=ig_}ig_3.uninit(this.g,this.a);this.a.onDragStart=ig_;this.a.onDrag=ig_;this.a.onDragEnd=ig_;this.g=ig_}this.a=ig_}

function ig_$a(a,b){if(!this.j){this.a.style.filter="alpha(opacity=50)";this.a.style.opacity=0.5;this.j=ig_e;this.S("dragstart")}var c=ig_,d=100000000;for(var e=0;e<ig_0.i.length;e++){var f=ig_0.i[e],g=a;if(document.body.dir=="rtl"&&f.a.offsetWidth==1)g+=this.a.offsetWidth;var h=Math.sqrt(Math.pow(g-f.a.pagePosLeft,2)+Math.pow(b-f.a.pagePosTop,2));if(f==this)continue;if(isNaN(h))continue;if(h<d){d=h;c=f}}this.q=ig_;if(ig_0.F){var i=ig_0.F.getElementsByTagName("LI");if(_old_html)i=ig_0.F.tBodies[0].rows[0].cells;

for(var e=0;e<i.length;e++){var f=i[e];if(!f.isDraggableTo)continue;var j=ig_4();if(this.a.lastMouseX>=f.pagePosLeft&&this.a.lastMouseX<=f.pagePosRight&&



19

this.a.lastMouseY+j[1]>=f.pagePosTop&&this.a.lastMouseY+j[1]<=f.pagePosBottom){this.q=f;var k=ig_0.w();k.parentNode!=ig_&&k.parentNode.removeChild(k);break}}for(var e=0;e<i.length;e++){var f=i[e];if(f.id.indexOf("view")>=0)if(f==this.q){if(f.className.indexOf(" tab_hover")<0)f.className+=" tab_hover"}else f.className=f.className.replace(/ tab_hover/g,

"")}}var k=ig_0.w();if(this.q==ig_&&c!=ig_&&k.nextSibling!=c.a){c.a.parentNode.insertBefore(k,c.a);if(ig_0.ka){document.body.style.display="none";document.body.style.display=""}}}

function ig_bb(a){switch(a){case "titleclick":_IG_TriggerModuleEvent(this.a.id,a,this.d.href);_IG_TriggerEvent("module"+a,this.a.id,this.d.href);break;case "dragstart":case "dragend":_IG_TriggerDelayedModuleEvent(this.a.id,a);_IG_TriggerDelayedEvent("module"+a,this.a.id);break}}

function ig_ib(a){this._dragStart=ig_jb;this._drag=ig_kb;this._dragEnd=ig_lb;this.I=ig_2;this.Z=ig_1;this.j=ig_c;this.a=a;this.a.style.cursor="move";this.g=_gel(a.id+"_h");this.Da=_gel(a.id+"_b");this.g&&ig_3.init(this.g,this.a);this.Da&&ig_3.init(this.Da,this.a);this.a.onDragStart=ig_0.k(this,"_dragStart");this.a.onDrag=ig_0.k(this,"_drag");

this.a.onDragEnd=ig_0.k(this,"_dragEnd")}

function(a,b){a.onmousedown=ig_3.start;a.obj=b;if(isNaN(parseInt(b.style.left,10)))b.style.left="0px";if(isNaN(parseInt(b.style.top,10)))b.style.top="0px";b.onDragStart=new Function;

b.onDragEnd=new Function;b.onDrag=new Function},uninit:function(a,b){window.clearInterval(b.Qa);a.onmousedown=ig_;a.obj=ig_;b.onDragStart=ig_;

b.onDragEnd=ig_;b.onDrag=ig_},start:function(a){var b=ig_3.obj=this.obj;a=ig_3.fixE(a);if(a.which!=1)return ig_e;b.onDragStart(a);var c=a.clientY;ig_0.Ia||

function(a){var b=ig_3.obj=this.obj;a=ig_3.fixE(a);if(a.which!=1)return ig_e;b.onDragStart(a);var c=a.clientY;ig_0.Ia||

(c+=document.body.scrollTop);b.lastMouseX=a.clientX;b.lastMouseY=c;b.offsetMouseX=parseInt(b.style.left,10)-a.clientX;b.offsetMouseY=parseInt(b.style.top,10)-c;

b.Qa=window.setInterval(ig_cb(b,document.body.scrollHeight>document.documentElement.clientHeight?document.body.scrollHeight:document.documentElement.



20

clientHeight),10);document.onmouseup=ig_3.end;document.onmousemove=ig_3.drag;return ig_c},drag:function(a){a=ig_3.fixE(a);if(a.which==0)return ig_3.end();var b=ig_3.obj,c=a.clientY;ig_0.Ia||(c+=

document.body.scrollTop);var d=a.clientX;if(b.lastMouseX==d&&b.lastMouseY==c)return ig_c;var e=d+b.offsetMouseX,f=c+b.offsetMouseY;b.style.left=e+"px";b.style.top=f+"px";b.lastMouseX=d;b.lastMouseY=c;b.onDrag(e,f);return ig_c},end:

function(a){if(typeof a=="undefined")a=window.event;if(typeof a.layerX=="undefined")a.layerX=a.offsetX;if(typeof a.layerY==

"undefined")a.layerY=a.offsetY;if(typeof a.which=="undefined")a.which=a.button;return a}},_IG_initDrag=

function(){if(ig_0.F){var a=ig_0.F.getElementsByTagName("LI");if(_old_html)a=ig_0.F.tBodies[0].rows[0].cells;for(var b=0;b<a.length;b++){var c=a[b];if(c.className.indexOf("unselectedtab")<0)continue;if(c.style.display=="none")continue;c.isDraggableTo=ig_e;c.pagePosLeft=ig_0.h(c,ig_e);c.pagePosRight=c.pagePosLeft+c.offsetWidth;c.pagePosTop=ig_0.h(c,ig_c);c.pagePosBottom=c.pagePosTop+c.offsetHeight}}};

ig_0.Ya=

function(){var a="";for(var b=0;b<ig_0.u.length;b++){var c=ig_0.u[b];for(var d=0;d<c.childNodes.length-1;d++){var e=c.childNodes[d];if(e.tagName=="DIV"){a+=a!=""?":":"";a+=e.id.substring(2)+"_"+c.id.substring(2)}}}_xsetp("mp="+_esc(a))};_IG_AddCustomEventHandler("initdrag",

function(a,b){_IG_initDrag(a,b)});ig_0.Xa=function(a){for(var b=0;b<ig_0.l.length;b++){var c=ig_0.l[b];c.a.pagePosLeft=ig_0.h(c.a,ig_e);c.a.pagePosTop=ig_0.h(c.a,ig_c)}var d=a.a.nextSibling;while(d){d.pagePosTop-=a.a.offsetHeight;d=d.nextSibling}};ig_0.qa=

function(a){var b="",c=_gel("mobile_screen");for(var d=0;d<c.childNodes.length;d++){var e=c.childNodes[d];if(e.style.display!="none"){b+=b!=""?":":"";b+=e.id.substring(9)}}_xsetp("mobile_mp="+_esc(b)+"&action="+_esc(a))};

var _IG_initMobileDrag=



This is a view of the content element of the main page – through Dreamweaver. You can clearly see – how the iframes sit inside the divs. You can also notice how each flying boxes is made up of a header part and a hidden part of the flying box. There is also other divs that sit into the header part of the box i.e. titles, minimize & maximize icons. Each header has a gif graphic sitting as a background. Titles are written in a white css driven linkage. Each icon refers to a co-ordinate of a single gif graphic. It’s important to keep the ‘DM’ classed object below each column.

As you can see – three columns sit inside a div. Each column had cell padding and spacing. Each box sits below each other with a ‘DM’ classed element (for spacing). Make sure if you need to create a new flying box – you name the box and all it element like other boxes – except its number. Note the number needs to be different.

21



Column 1 = c_1, Column 2 = c_2, Column 3 = c_3 and so on…

22



This is the dm element I mentioned before. It needs to be after the new box you create. It’s so important – for spacing and for drag and drop functions.

This is some sample code of the iframe elements in the container. It’s important that you check all boxes – open or closed state. In this area of the code you can manage the information feed coming from the data grid into the main page.

<div id="remote_93" style="border: 0pt none ; margin: 0pt; padding: 0pt; width: 100%; height: 27%">

23

This is an example of how a flying box - sample code should look like. It’s important to replace the number 11 with a new number within the code. It is important that you don’t use the same number of another flying box.

<div style="left: 0%; top: 0%;" id="m_11" class="modbox" tabindex="0">

<div class="modtitle" id="accountbalanceModtitle">

<h2 id="accountbalanceHeader" class="nlnk"><span class="modtitle_text" id="accountbalanceSpan">Account Balances </span></h2>

<a title="Maximize" class="ddbox" id="accountbalanceTitle" href="#" onclick=""><span class="athidden">Maximize</span></a>

<a title="Minimize" class="minbox" id="m_11_zippy" href="#" onclick="chgTT(this);return _zm('11', '20');return false;"><span class="athidden">Minimize</span></a> <span class="my_gadget" style="display: none;"></span>

<div style="cursor: move;" class="dt" id="m_11_h"></div>

<div style="clear: both;"></div>

<div class="meditbox" id="accountbalancemeditbox"> </div>

</div>



25



26

<div id="m_11_b" class="modboxin">

<div id="GM11msg" style="display: none;">

<div id="GM11filler-label" class="modlabel loadingstyle"><span> </span></div>

<span class="tls loadingstyle">

<input style="visibility: hidden; width: 1%;" type="checkbox" />

</span><span class="tls loadingstyle">




<span id="GM11statusmsg">Loading...</span></span><span class="tls loadingstyle">




</span></div>

<div id="GM11noaccount" style="display: none;">

<table width="100%">

<tbody>

<tr>

<td class="td1ltr" valign="center" align="center"><a href="#"><img src="ig_files/gmaillogo.gif" /></a></td>

<td class="td2ltr" valign="center" align="center">

<div style="border: 1% solid rgb(221, 221, 221); padding: 6%; background-color: rgb(248, 248, 251); cursor: pointer; font-weight: bold;" onclick="javascript:document.location=create_account_url">Create an Account</div></td>

</tr>

<tr>

<td class="td1ltr" valign="center" align="center">#</td>



<td class="td2ltr" style="font-weight: bold;" valign="center" align="center">#<br />

<a href="#">#</a></td>

</tr>

</tbody>

</table>

</div>

<div id="Div1" style="border: 0pt none ; margin: 0pt; padding: 0pt; width: 100%; height: 16%">

<iframe src="Accountbalance.htm" id="accbalIframe" name="" style="border: 0pt none ; margin: 0pt; padding: 0pt; overflow: hidden; width: 100%; height: 16%;" onload="_ifr_ol(this)" scrolling="yes" frameborder="0"></iframe>

</div>

</div>

</div>

Please be aware that the iframe sits inside a div. It is easy to make a mistake selecting an iframe rather than the div that sits around the iframe.

27



There is also another element – a hidden div that sits on top of the header part of the box. This must not be edited in any way. This ‘dt’ in the modtitle - controls the drag & drop area (a whole area) of the header part of the flying box.

Please make sure you don’t edit the div layer - .dd_layer below:

Here is the sample code of the .dd_layer. This controls easy drag & drop behaviors. It must be included into any new boxes you include into the design of the page.

.dd_layer{position:absolute;display:block;z-index:2000;left:0;top:0;background-image:url(../images/cleardot.gif)}

28



Div class ‘nlnk’ controls the title of the flying boxes. This is linked to a white css drive colour. Please note close boxes – display the height doubled up. It is best to keep title words down to two words.

Remember all icon buttons within the header div part of the flying boxes refer to a background gif graphic and are co-ordinate specified by pixels. Please note: we may have changed this into percentages.

29



This is a sample of the code:

<style type="text/css">

.fbox {margin-top:1%;margin-right:1%;display:block;overflow:hidden;background-position:0% 0%;background-repeat: no-repeat;

cursor:hand;cursor:pointer;}.fmaxbox, .fmaxbox_reverse_directionality {background-position:0% -2%;}.fminbox,

.fminbox_reverse_directionality {background-position:-1% -2%;}a.fmaxbox:hover,

a.fmaxbox_reverse_directionality:hover{background-position:0% -3%;}a.fminbox:hover,

a.fminbox_reverse_directionality:hover{background-position:-1% -3%;}a.ddbox, a.ddbox:hover, a.delbox, a.delbox:hover,a.minbox,

a.minbox:hover, a.maxbox, a.maxbox:hover,a.enlargebox, a.enlarge:hover, a.shrinkbox,

a.shrink:hover{background-image:url(../Graphic/images/sprite_arrow_enlarge_max_min_shrink_x_blue.gif)}a.ddbox {background-position:0% 0%;}

a.ddbox:hover {background-position:0% -12px;}a.enlargebox {background-position:-12px 0%;}

a.enlargebox:hover {background-position:-1% -1%;}a.maxbox {background-position:-24px 0%;}a.maxbox:hover {background-position:-24px -12px;}

30



a.minbox {background-position:-36px 0px;}a.minbox:hover {background-position:-36px -12px;}

a.shrinkbox {background-position:-48px 0px;}a.shrinkbox:hover {background-position:-48px -12px;}

a.delbox {background-position:-60px 0px;}a.delbox:hover {background-position:-60px -12px;}

.f_tbl {font-size:12px;margin-right:2px;margin-left:2px;padding-top:4px;padding-bottom:4px;}

.fr_tbl {margin-right:2px;margin-left:2px;padding-top:4px;padding-bottom:4px;}

.fb {font-size:12px;padding:2px;padding-top:4px;border: 1px solid #d1d3d4;border-top:none;overflow:auto;}

.sftl {border: 1px solid #d1d3d4;border-bottom:none;}

.sftl_reverse_directionality {border: 1px solid #d1d3d4;border-bottom:none;clear: right;text-align: right;}

.uftl {border:1px solid white;border-bottom:none;}.uftl_reverse_directionality {border:1px solid white;border-bottom:none;clear: right;text-align: right;}

#footerwrapinner {height:100%;}#themeinfo {position:absolute;right:0%;

}

#aboutthistheme {display:block;margin-right:5%;margin-top:5%;}

</style>

Please note all icons need to be linked to the appropriate maximized windows – onclick behavior; “showMaximize ()”…

31



32



33

10. Maximized Option – hidden div: This is a sample of how the maximized hidden div option should be coded. The data feed can be 100% of the data grid. i.e. show all the columns of information and rows of cases. The great thing about this hidden div is that all data remains in a single browser window – and also allowing the user to see the main page at 30% opacity. This gives the user a sense of direction and is once step away from the main page (8 other sections). The user always has easy access to their banking details. The div is made up of an iframe link to the data grid and has a window header like the flying boxes.

<iframe id="hiddendivIframe" src="" width="100%" height="100%"></iframe>

<table width="80%" border="0" cellspacing="0" cellpadding="0" bordercolor="#FFFFFF">

<tr>

<td background="../Graphic/images/modern_blue_header_v2.gif" bgcolor="#CCCCCC">

<TABLE width="100%" border="0" cellPadding="0" cellSpacing="0" bordercolor="#FFFFFF"></TABLE>

<div class="modtitle"><a title="Close" class="delbox" href="#" onclick="hideMaximize()"></a></div>

<table width="100%" border="1" cellpadding="0" cellspacing="0" bordercolor="#FFFFFF" >

<tbody>

<tr>

<td><iframe id="hiddendivIframe" src="" width="100%" height="100%"></iframe></td>

</tr>

<tr>

<th colspan="11" bgcolor="#b0c4de">1 </th>

</tr>

</tbody>

</table></td>



34

</tr>

</table>

.hiddendiv1 {

width:100%;

height:100%;

z-index:2004;

left: 0px;

top: 0px;

visibility: hidden;

position :fixed;

}

.hiddendiv2 {

width:100%;

height:100%;

z-index:2004;

background-color: #000000;

opacity:0.6;

filter: alpha(opacity=60);

visibility: hidden;

position :fixed;

}

.hiddendiv3 {

width:100%;

height:100%;

z-index:2006;

left: 0px;

top: 0px;

visibility: hidden;

position :fixed;



}

.hiddendiv4 {

width:77%;

height:16px;

z-index:2004;

left: 313px;

top: 157px;

visibility: visible;}

The whole flying box property for e.g is m_93, the class is ‘modbox’. Make sure any new flying you code has a different number/name in both the flying boxes and drag & drop behavior properties. All Flying boxes are floating divs.

35

The whole flying box property for e.g is m_97, the class is ‘modbox’. Make sure any



new flying you code has a different number/name in both the flying boxes and drag & drop behavior properties. All Flying boxes are floating divs.

The whole flying box property for e.g is m_94, the class is ‘modbox’. Make sure any new flying you code has a different number/name in both the flying boxes and drag & drop behavior properties. All Flying boxes are floating divs.

This is a sample of a close flying box:

<div class="modtitle" id="quickpayModtitle">

<h2 id="quickpayHeader" class="nlnk"><span class="modtitle_text" id="quickpaySpan">Quick Payment</span></h2>

36

<a title="Maximize" class="ddbox" id="quickpayTitle" href="#" onclick="showMaximize()"><span class="athidden">Maximize</span></a>



<a title="Restore" class="maxbox" id="m_86_zippy" href="#" onclick="chgTT(this);return _zm('86', '25');return false;"><span class="athidden">Restore</span></a>

<span class="my_gadget" style="display: none;"></span>

<div style="cursor: move;" class="dt" id="m_86_h"></div>

<div style="clear: both;"></div><div class="meditbox" id="quickpaymeditbox">

</div>

</div>

11. CSS: Cascading Style Sheets Since making this document we have linked all Internet Banking pages to appropriate CSS files.

Make sure the header title in the flying boxes is contrasted with the background image in the div. We have applied white on the blue gradient background. We used a css link to control the white text and font.

37



Font size = 110%, remember that there is padding. This is important – the divs need to be spaced correctly according to the design. We are in the process of addressing this.

38

Using the linkage to the CSS files from the Internet Banking pages is a great idea to keep all the styles filed in way that it is easy to change – for any branding. This would made skinning later easier to apply to the IB application.



12. Business Banking: These are some concepts I’ve designed for Internet Business Banking. We are in the process of discussing & defining further features in BB. We are looking at designing the second screens. We plan to create an easier and much more simplified way of process business banking details. Designs:

We are looking at developing a desktop with graphical representational features with statistical budget forecaster for Banking Financial planning.

39



The rollover message sample code. It works like Alt tags but they are different. We can use title= for the message we want the user to know of.

We can use this method – to explain cases per row in the data table.

Here is the code:

<a href="#" title="Full Description of Payee" class="first">Name</a>

<span> | <a id="folder_list_empty_trash" href="#" title="To 123456789 and From Saver Account" class="last">

<span class="offscreen">Payee</span></a> | </span></li>

40



13. Management Tool and My Payment Flying Boxes: Please take note below how we have tried to keep all the information in the flying boxes – compacted. I like the idea of keep the rows down to five cases at a time – with page links below. This will avoid scrolling in the flying boxes. If the user needs more information – they need to click on ‘view my options’ – this would then open the maximized hidden div option – that shows the full screen feed option with more columns and rows of information.

41



42

Rubik Financial Limited Internet Banking

Documents

Transcript of Rubik Financial Limited Internet Banking