data presentation in a web app
play

Data Presentation in a Web-App Journey of a start-up Simon Oxley - PowerPoint PPT Presentation

Data Presentation in a Web-App Journey of a start-up Simon Oxley Co-founder & CTO Aware Monitoring http://awaremonitoring.com @soxley We monitor web-services performance and availability. Websites APIs XML Feeds Forms


  1. Data Presentation in a Web-App Journey of a start-up Simon Oxley Co-founder & CTO Aware Monitoring http://awaremonitoring.com @soxley

  2. We monitor web-services performance and availability. › Websites › APIs › XML Feeds › Forms http://awaremonitoring.com

  3. We’re Bootstrapping

  4. Time vs. Cost

  5. Tough Decisions

  6. First, a tangent ... First, a tangent ...

  7. Software development is a creative art . Art | Music | Software

  8. a blank canvas = infinite possibilities

  9. Sometimes, a masterpiece is created.

  10. ... and sometimes, it’s not.

  11. Sometimes, the results are just painful!

  12. Monitoring can be painful . Pain = Opportunity

  13. This is pain.

  14. The unlimited canvas of the desktop has led to PAIN . No limits = No Restraints

  15. Sometimes we don’t know when to stop

  16. Restraints are a good thing.

  17. The web has grown up with restraints.

  18. Innovation is happening in the browser and on the web . We wanted to be part of it.

  19. We set some simple goals.

  20. Web Services Monitoring 2.0 1. Instant On - be up and running in minutes 2. Easy to setup and configure 3. Deliver information of real value quickly

  21. A small team on an epic journey

  22. Decisions, decisions ... Early technology choices have a big impact .

  23. Build the right foundations

  24. Considerations 1. Time 2. Skills 3. Cost

  25. It’s easy to take on too much

  26. Our decisions Python HTML / CSS JavaScript

  27. Heavy lifting can be made easier

  28. Maximising re-use Django Python › HTML / CSS jQuery + Dojo JavaScript ›

  29. Standing on the shoulders of giants

  30. User experience goals › Simple and Obvious › Fast in the browser › Quick and Easy set-up

  31. For our customers and us

  32. UI Delivery first: HTML / CSS then: JavaScript › Light touch

  33. No Flash

  34. Why no flash? Another piece to test + manage Another skill required CSS + JS is enough

  35. Two high-level use-cases 1. Configure a monitor 2. Access results

  36. Configuration

  37. Content Tabs

  38. Hide Optional Fields

  39. Interactive

  40. Data Presentation

  41. Limit top-level detail

  42. Drill down

  43. Let the browser do what it’s good at . It’s easier, and faster

  44. CSS Charts

  45. CSS Charts › Fast › Accessible › Styled

  46. JavaScript Charts (Dojo) Pie chart Custom time period

  47. We didn’t try to re -invent

  48. Some things inspired us along the way. Learning from others

  49. Key metrics

  50. Bringing data together

  51. Intelligence from data

  52. Some of our tools

  53. Balsamiq Mockups

  54. Firebug & IE Debugbar

  55. Page Speed & Y-Slow

  56. Django Debug Toolbar

  57. Observations

  58. The browser is becoming a container for applications . Not just for the web

  59. The original App Store

  60. S3Fox

  61. SQLite Manager

  62. Web Apps are now a real alternative to desktop . In some cases better

  63. Making life easy

  64. “We’re at the intersection of demand and capability ” Darrin Massena, Dec 2005 Picnik co-founder

  65. HTML5: Exciting times ahead › Canvas › Storage › Video › Drag + Drop

  66. Adoption is a barrier Not everybody is an early - adopter , some will take a while .

  67. We’ll pick cherries

  68. … and concentrate on value

  69. Thanks for listening @soxley

  70. Credits Bootstrapping: http://blog.guykawasaki.com/2006/01/the_art_of_boot.html Balance: http://www.flickr.com/photos/archeon/2941655917/ The Matrix: Warner Bros. Pictures 1999 Blank canvas: http://rainbowstripe.wordpress.com Stickman: Original artwork by @soxley Illusion: http://www.flickr.com/photos/enet/26521372/ HP OpenView: http://fajri.freebsd.or.id/index.php/2007/07/29/ OpenOffice Toolbar: http://www.openofficetips.com/2006/01/28/toolbar-crazy/ Naughty Children: http://www.funny-games.biz/pictures/728-naughty-children.html Mt Cook, NZ : Original photography by @soxley Two-man Sled: http://www.flickr.com/photos/johnmcnab/4216604416/ Titled Barrel: http://www.geograph.org.uk/photo/299980 Spinning Plates: http://www.globeparty.com Line-out: http://www.flickr.com/photos/woesinger/1464460733/ Keep it Simple: http://www.flickr.com/photos/wilderdom/3340381990/ Lever: http://en.wikipedia.org/wiki/File:Palanca-ejemplo.jpg Mixing Desk: http://www.flickr.com/photos/teliko82/3227659253/ Mandelbrot: http://resumbrae.com/ub/dms423_f05/06/ Tools: http://www.flickr.com/photos/19646481@N06/4299545598/ From the bridge: http://commons.wikimedia.org/wiki/File:Watching_operations_from_the_bridge.jpg Locomotive plans: Tools: http://www.flickr.com/photos/19646481@N06/4299545598/ Picnik: http://socialinnovationperspectives.blogspot.com/2010/02/guest-post-innovation-giving-birth-to.html Cherries: http://www.flickr.com/photos/43927576@N00/3655970324 Piggy Bank: http://www.flickr.com/photos/alancleaver/4279482716/

Recommend


More recommend