Storyboarding Ajax Applications (ppt)
Upcoming SlideShare
Loading in...5

Storyboarding Ajax Applications (ppt)






Total Views
Views on SlideShare
Embed Views



0 Embeds 0

No embeds



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment
  • Image From
  • Image from
  • Use the word document versions of this in presentation along with all other flows since it is big and scrolls!

Storyboarding Ajax Applications (ppt) Storyboarding Ajax Applications (ppt) Presentation Transcript

  • Storyboards and Flow Charting Presented By: Eric Pascarello
  • Ajax and Web 2.0
    • Breaks the ways we have been thinking about web application design.
    • Multiple – integrated features add a new level of complexity.
    • Dynamic Content showing, hiding, and changing can not always be expressed in words.
    • Ajax introduces new paths in flow.
  • Storyboards and Flow Charting brings everyone on the same page Boss Programmer Web Guru SME/Client
  • But doesn’t this slow down the project?
    • Storyboards and flowcharting add time to the software development cycle.
    • The managers are saying: “That does not save us money!”
  • MANAGERS: A poorly written requirements document slows down development!
  • DEVLOPERS: When deadline time comes around…
    • Do you want to be stuck behinds the bars of your desk on a Saturday because you misinterpreted a requirement?
    • Or do you want to be able to leave early on a Friday afternoon and enjoy life?
    • No missed information
    • No surprises
    • No I meant it to be…
    • No fixing up Developers bad designs
    • No wondering what in the world the client is after design wise.
    • On time releases
    • No wasted money $$$$
    • CLIENT / SME
    • No saying “That is not what I pictured”
    • No need to have a “Geek Speak” Dictionary when you have cute pictures
    • No extra waiting needed.
    What do we all gain from taking the extra time?
  • Storyboarding or “Displayed Thinking”
    • Uses images, text, audio, video, animations, prototypes, diagrams, colors, little imaginary trolls, and whatever else you can cram into a document to emphasize the scope of the problem.
    • There is no right and wrong way to do it!
  • So why use a storyboard over traditional req. documents?
    • Not a single person in this room thinks alike!
    • We need to make us think alike
    • Let us look at a quick example
  • Adaptive Path’s Original Diagram
  • The Real Life Diagram of Ajax – How to explain Ajax to your non-geek friends
  • The Bleak Situation
  • The Non-Ajax Solution
    • Figure out what is more important and rank order of operation.
    • Should I clean the mess, get food, or update the outdated music collection?
    • Perform one task and do the others after each other. Hopefully I have enough time!
      • Go to Store, Download Music, Clean Apartment so it can be trashed again.
  • The Ajax Solution
    • Do multiple things at once!
    • Hire a maid to do the cleaning!
    • Order delivery pizza!
    • And I can download new music while others do the dirty work! Ajax Clean!
  • Storyboards should include
    • Description/Title/File Name
    • Text (the real text!)
    • Graphics (sketches or the real thing)
    • Links
    • Navigation
    • Notes of the actions
    • Flash/animations
    • Videos/sounds
    • CSS/Fonts/Display Information
  • Storyboards can also include
    • Storyboard Number (number them in 5’s or 10’s)
    • Date of Storyboard
    • Page Numbers
    • Revision Number
    • Screen Name
    • Attachments (external JS libraries, etc)
    • Any thing else that you can think of
  • Storyboards should not…
    • … be busy.
      • To much information on one page can be a pain to read!
      • K.I.S.S.
      • Multiple pages should be used for complicated designs
    • … be open to interpretation.
    • … require anyone to ask questions.
  • Do I have to draw?
    • You can if you are an inspiring artist!
    • Most people use Viso, MSPaint, Dreamweaver, Photoshop, white board with digital camera, post it notes, and so on to build the screens.
    • Electronic format is best
      • Easy to share around
      • East to edit
      • Easy to make changes
  • Is there a standard to storyboards?
    • Some hardcore people say yes!
    • You need to find what works for your team.
    • You may need more text, more pages, more forms
    • You may need to develop custom storyboard formats
      • Layout, CSS, Images, Interaction Matrix , Audio/ Video, User Experience , Flow Charting , etc.
  • What do storyboards look like?
  • The Great Requirements
    • Show Our Available hosting plans using an Ajax powered double combo filled with special effects.
      • Must show step instructions with images pointing out the step. Instructions change with each step. (See Marketing for exact copy).
      • Animation should be shown when request is made with the Ajax call to the server.
      • Plan details should be shown in an area when the user selects a plan from the dynamically filled second list.
      • Website should have web 2.0 look and feel.
  • Interaction Storyboard Matrix
    • Probably the most important storyboard element you can produce!
    • Everyone here SHOULD DO THIS STEP!
    • Yahoo! has great examples of these:
  • Double Combo Interaction Storybook Matrix Hidden Hidden Hidden Hidden Visible Visible Hidden Action Indicator Hidden Visible Hidden Visible Hidden Hidden Hidden Arrow 3 Hidden Hidden Visible Hidden Hidden Hidden Hidden Arrow 2 Hidden Hidden Hidden Hidden Hidden Hidden Visible Arrow 1 Submit Form Visible Hidden Hidden Hidden Hidden Hidden Buy Button Plan Details Displayed From JSON Child Message Error Message Action Message Action Message Default Message Output Text Area (Use Yellow Fade Effect) Selected Value Obtained w/ JSON Options Added Options Emptied Child DDL Selected Value Obtained Filled From Server w/ default Parent DDL Posted Page Buy Button Clicked Child DDL Option Selected DDL Data Retrieval Complete DDL Retrieval Error Child DDL Data Requested Parent DDL Option Selected Page Load
  • Program Flow Charting
    • Ajax introduces new application paths that we traditionally never dealt with.
      • Browser Unsupported
      • Errors
      • Clientside Caching
      • Successful/Unsuccessful Requests
      • Dynamic User Controlled Content
      • “ Sessionless” State
  • Basic Program Flow of the Page
  • Integrating ClientSide Caching
  • The Serverside Basic Flow
  • Validating Response From the Server
  • Example #1 from my server log
    • Client Error Message/Detail: ERROR: BAD RESPONSE FROM SERVER
    • <!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;;>
    • <html>
    • <head>
    • <title>User Login</title>
  • Example #2 from my server log
    • Client Error Message/Detail: ERROR: BAD RESPONSE FROM SERVER: <script language=&quot;JavaScript&quot;>
    • <!-- // Start of AdSubtract JavaScript block; you can ignore this.
    • // It is used when AdSubtract blocks cookies or pop-up windows.
    • document.iMokie = &quot;cookie blocked
  • This simple Ajax functionality has multiple paths to take.
    • Imagine larger applications using a large amount of Ajax calls with different functionality.
      • How do you handle errors?
      • How do you handle injections?
      • How do you handle older browsers?
  • Two most important things you should get from this talk
    • Make sure to make a Interaction Storyboard Matrix
    • Make sure to make a program flow chart!
    • The main benefit is manual testers will understand the flow of the program and all of the interactions that HAVE to take place!
    • Easier for them to build a test plan!
  • If you change requirements!
      • I see so many people that do not do this.
      • Storyboards are great for new developers on the team
        • No more having to read code to figure out what is happening
        • No more guessing what the application is supposed to do!
  • So you plan on how you spend your weekend before a deadline! Stock photos from http:// / OR