From Desktop to Web – Getting it Right Jon Trelfa Adayana, Inc.

Project Goals Migrate Mediaflightplan from the desktop to a web-based application Provide a registration mechanism tied to the student’s textbook Reduce or eliminate the ability to share a license

Migrate Mediaflightplan from the desktop to a web-based application

Provide a registration mechanism tied to the student’s textbook

Reduce or eliminate the ability to share a license

What is “Mediaflightplan”? Media/Ad campaign planning simulation software Target audience: College Students and Professors Used in conjunction with a textbook

Media/Ad campaign planning simulation software

Target audience: College Students and Professors

Used in conjunction with a textbook

Basic Workflow

Goals of the Simulation Target demographic gets the best advertising coverage Campaign is within budget

Target demographic gets the best advertising coverage

Campaign is within budget

Why? Software piracy ~ 50% 1 CD -> all PCs in the lab Professor’s instructions included the use of whiteout on reports to update the student’s name

Software piracy ~ 50%

1 CD -> all PCs in the lab

Professor’s instructions included the use of whiteout on reports to update the student’s name

Software updates were expensive CDs distributed with books No internet updates College network restrictions Internet not prevalent in the first releases anyway

Software updates were expensive

CDs distributed with books

No internet updates

College network restrictions

Internet not prevalent in the first releases anyway

Demo Version 4: Last desktop release (Version 1 was released in 1986)

Demo Version 5: First Web Release: 2007

Advantages of V5 Significantly reduced piracy (increased sales!) Reduced maintenance/upgrade costs: V4->V5 upgrade ~20% cheaper than desktop software upgrade 3 subsequent updates ~90% cheaper

Significantly reduced piracy (increased sales!)

Reduced maintenance/upgrade costs:

V4->V5 upgrade ~20% cheaper than desktop software upgrade

3 subsequent updates ~90% cheaper

Lessons Learned with V5 Bandwidth Off-peak 5GB/month Peak – 60GB/month Performance Too many simultaneous users caused timeouts

Bandwidth

Off-peak 5GB/month

Peak – 60GB/month

Performance

Too many simultaneous users caused timeouts

Click-wait-click (web 1.0) broke the workflow of previous versions Colleges don’t like cookies Shared hosting model lasted 2 months Larger code base Limited Browser Compatibility (IE/Firefox only)

Click-wait-click (web 1.0) broke the workflow of previous versions

Colleges don’t like cookies

Shared hosting model lasted 2 months

Larger code base

Limited Browser Compatibility (IE/Firefox only)

Demo Version 6: Current Release: 2009 (Ajax-ified)

Advantages over V5 - bandwidth V5 125KB per page Full page reload per step Complete Simulation: 12MB V6 600KB initial download XHR – 1KB each Complete Simulation: 700KB

V5

125KB per page

Full page reload per step

Complete Simulation: 12MB

V6

600KB initial download

XHR – 1KB each

Complete Simulation: 700KB

Advantages over V5 - Usability V5 1 Click –> 1 page reload Limited keyboard shortcuts Have to remember where you left off IE/FF Only V6 No page reloads Keyboard shortcuts similar to a desktop application Immediate feedback All Major Browsers

V5

1 Click –> 1 page reload

Limited keyboard shortcuts

Have to remember where you left off

IE/FF Only

V6

No page reloads

Keyboard shortcuts similar to a desktop application

Immediate feedback

All Major Browsers

Disadvantage Had to rewrite the textbok

Had to rewrite the textbok

V6 - Technical Prototype/Scriptaculous Modalbox.js Blueprint CSS Framework CodeIgniter PHP Framework FamFamFam Silk Icon Set

Prototype/Scriptaculous

Modalbox.js

Blueprint CSS Framework

CodeIgniter PHP Framework

FamFamFam Silk Icon Set

JavaScript Tidbits $ and $$ become slower as the document becomes larger $(‘element’).select() Bound events are lost when you clone an element $(‘element’).remove()

$ and $$ become slower as the document becomes larger

$(‘element’).select()

Bound events are lost when you clone an element

$(‘element’).remove()

Browser issues parseFloat().toLocaleString(): FF: 1,024,123 IE: 1,024,123.00 Safari: 1024123 Have to explicitly trap the Enter key in Safari or it will submit whatever form you’re in IE8 Broke my IE-specific fixes

parseFloat().toLocaleString():

FF: 1,024,123

IE: 1,024,123.00

Safari: 1024123

Have to explicitly trap the Enter key in Safari or it will submit whatever form you’re in

IE8 Broke my IE-specific fixes

Advice Identify your IP before putting anything into Javascript We use XHR calls to get the IP-related data (calculation results) Try to hack your app: can it run standalone? Have I reduced the barrier of entry?

Identify your IP before putting anything into Javascript

We use XHR calls to get the IP-related data (calculation results)

Try to hack your app:

can it run standalone?

Have I reduced the barrier of entry?

Please complete an evaluation.

Questions? Question?