From Desktop to Web – Getting it Right Jon Trelfa Adayana, Inc.
Project Goals <ul><li>Migrate Mediaflightplan from the desktop to a web-based application </li></ul><ul><li>Provide a regi...
What is “Mediaflightplan”? <ul><li>Media/Ad campaign planning simulation software </li></ul><ul><li>Target audience: Colle...
Basic Workflow
Goals of the Simulation <ul><li>Target demographic gets the best advertising coverage </li></ul><ul><li>Campaign is within...
Why? <ul><li>Software piracy ~ 50% </li></ul><ul><ul><li>1 CD -> all PCs in the lab </li></ul></ul><ul><ul><li>Professor’s...
<ul><li>Software updates were expensive </li></ul><ul><ul><li>CDs distributed with books </li></ul></ul><ul><ul><li>No int...
Demo Version 4: Last desktop release (Version 1 was released in 1986)
Demo Version 5: First Web Release: 2007
Advantages of V5 <ul><li>Significantly reduced piracy (increased sales!) </li></ul><ul><li>Reduced maintenance/upgrade cos...
Lessons Learned with V5 <ul><li>Bandwidth </li></ul><ul><ul><li>Off-peak 5GB/month </li></ul></ul><ul><ul><li>Peak – 60GB/...
<ul><li>Click-wait-click (web 1.0) broke the workflow of  previous versions </li></ul><ul><li>Colleges don’t like cookies ...
Demo Version 6: Current Release: 2009 (Ajax-ified)
Advantages over V5 - bandwidth <ul><li>V5 </li></ul><ul><li>125KB per page </li></ul><ul><li>Full page reload per step </l...
Advantages over V5 - Usability <ul><li>V5 </li></ul><ul><li>1 Click –> 1 page reload </li></ul><ul><li>Limited keyboard sh...
Disadvantage <ul><li>Had to rewrite the textbok </li></ul>
V6 - Technical <ul><li>Prototype/Scriptaculous </li></ul><ul><li>Modalbox.js </li></ul><ul><li>Blueprint CSS Framework </l...
JavaScript Tidbits <ul><li>$ and $$ become slower as the document becomes larger </li></ul><ul><ul><li>$(‘element’).select...
Browser issues <ul><li>parseFloat().toLocaleString(): </li></ul><ul><ul><li>FF: 1,024,123 </li></ul></ul><ul><ul><li>IE: 1...
Advice <ul><li>Identify your IP before putting anything into Javascript </li></ul><ul><ul><li>We use XHR calls to get the ...
Please complete an evaluation.
Questions? Question?
Upcoming SlideShare
Loading in …5
×

Jon Trelfa Presentation From Desktop To Web – Getting It Right

788 views

Published on

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
788
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
28
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Jon Trelfa Presentation From Desktop To Web – Getting It Right

  1. 1. From Desktop to Web – Getting it Right Jon Trelfa Adayana, Inc.
  2. 2. Project Goals <ul><li>Migrate Mediaflightplan from the desktop to a web-based application </li></ul><ul><li>Provide a registration mechanism tied to the student’s textbook </li></ul><ul><li>Reduce or eliminate the ability to share a license </li></ul>
  3. 3. What is “Mediaflightplan”? <ul><li>Media/Ad campaign planning simulation software </li></ul><ul><li>Target audience: College Students and Professors </li></ul><ul><li>Used in conjunction with a textbook </li></ul>
  4. 4. Basic Workflow
  5. 5. Goals of the Simulation <ul><li>Target demographic gets the best advertising coverage </li></ul><ul><li>Campaign is within budget </li></ul>
  6. 6. Why? <ul><li>Software piracy ~ 50% </li></ul><ul><ul><li>1 CD -> all PCs in the lab </li></ul></ul><ul><ul><li>Professor’s instructions included the use of whiteout on reports to update the student’s name </li></ul></ul>
  7. 7. <ul><li>Software updates were expensive </li></ul><ul><ul><li>CDs distributed with books </li></ul></ul><ul><ul><li>No internet updates </li></ul></ul><ul><ul><ul><li>College network restrictions </li></ul></ul></ul><ul><ul><ul><li>Internet not prevalent in the first releases anyway </li></ul></ul></ul>
  8. 8. Demo Version 4: Last desktop release (Version 1 was released in 1986)
  9. 9. Demo Version 5: First Web Release: 2007
  10. 10. Advantages of V5 <ul><li>Significantly reduced piracy (increased sales!) </li></ul><ul><li>Reduced maintenance/upgrade costs: </li></ul><ul><ul><li>V4->V5 upgrade ~20% cheaper than desktop software upgrade </li></ul></ul><ul><ul><li>3 subsequent updates ~90% cheaper </li></ul></ul>
  11. 11. Lessons Learned with V5 <ul><li>Bandwidth </li></ul><ul><ul><li>Off-peak 5GB/month </li></ul></ul><ul><ul><li>Peak – 60GB/month </li></ul></ul><ul><li>Performance </li></ul><ul><ul><li>Too many simultaneous users caused timeouts </li></ul></ul>
  12. 12. <ul><li>Click-wait-click (web 1.0) broke the workflow of previous versions </li></ul><ul><li>Colleges don’t like cookies </li></ul><ul><li>Shared hosting model lasted 2 months </li></ul><ul><li>Larger code base </li></ul><ul><li>Limited Browser Compatibility (IE/Firefox only) </li></ul>
  13. 13. Demo Version 6: Current Release: 2009 (Ajax-ified)
  14. 14. Advantages over V5 - bandwidth <ul><li>V5 </li></ul><ul><li>125KB per page </li></ul><ul><li>Full page reload per step </li></ul><ul><li>Complete Simulation: 12MB </li></ul><ul><li>V6 </li></ul><ul><li>600KB initial download </li></ul><ul><li>XHR – 1KB each </li></ul><ul><li>Complete Simulation: 700KB </li></ul>
  15. 15. Advantages over V5 - Usability <ul><li>V5 </li></ul><ul><li>1 Click –> 1 page reload </li></ul><ul><li>Limited keyboard shortcuts </li></ul><ul><li>Have to remember where you left off </li></ul><ul><li>IE/FF Only </li></ul><ul><li>V6 </li></ul><ul><li>No page reloads </li></ul><ul><li>Keyboard shortcuts similar to a desktop application </li></ul><ul><li>Immediate feedback </li></ul><ul><li>All Major Browsers </li></ul>
  16. 16. Disadvantage <ul><li>Had to rewrite the textbok </li></ul>
  17. 17. V6 - Technical <ul><li>Prototype/Scriptaculous </li></ul><ul><li>Modalbox.js </li></ul><ul><li>Blueprint CSS Framework </li></ul><ul><li>CodeIgniter PHP Framework </li></ul><ul><li>FamFamFam Silk Icon Set </li></ul>
  18. 18. JavaScript Tidbits <ul><li>$ and $$ become slower as the document becomes larger </li></ul><ul><ul><li>$(‘element’).select() </li></ul></ul><ul><li>Bound events are lost when you clone an element </li></ul><ul><ul><li>$(‘element’).remove() </li></ul></ul>
  19. 19. Browser issues <ul><li>parseFloat().toLocaleString(): </li></ul><ul><ul><li>FF: 1,024,123 </li></ul></ul><ul><ul><li>IE: 1,024,123.00 </li></ul></ul><ul><ul><li>Safari: 1024123 </li></ul></ul><ul><li>Have to explicitly trap the Enter key in Safari or it will submit whatever form you’re in </li></ul><ul><li>IE8 Broke my IE-specific fixes </li></ul>
  20. 20. Advice <ul><li>Identify your IP before putting anything into Javascript </li></ul><ul><ul><li>We use XHR calls to get the IP-related data (calculation results) </li></ul></ul><ul><li>Try to hack your app: </li></ul><ul><ul><li>can it run standalone? </li></ul></ul><ul><ul><li>Have I reduced the barrier of entry? </li></ul></ul>
  21. 21. Please complete an evaluation.
  22. 22. Questions? Question?

×