Screencasting Your Presentation

1
Screencasting Your Presentation

• CSCI 196 Kunal Johar

Template Used with Permission
2
What is a Screencast?

• Recording of a screen
• Often has a mouse pointer overlayed so a viewer
  can follow along

3
Why Make One?

• Well cover this today
• What are your thoughts?

4
Record vs Live Video vs In-Person

• Recap from our September Workshop
• What are some things to consider for a live
  presentation (in person)
• How about live via a webinar / video conferene
• What factors are important when presenting
  asynchronously (pre-recorded)

5
Screencasting your Project

• Lets take a sample project
• This is a tool I have been working on
• As with a new audience, you have no context and
  are jumping in
• http//www.screencast-o-matic.com/watch/cXnl0AIbP
  

6
Mobi-Center

• What is it?
• Who would use Mobi-Center?
• How would they use it?

7
Mobi-Center

• Thoughts on the screencast?
• Was it fine as is?
• Can anything be improved?

8
A Bit of Context

• Sylvan Learning is an after school tutoring
  franchise (1000 locations)
• They commissioned me to develop a mobile website
  for them
• Must look good on most mobile browsers
• Must support SMS signup
• Must show nearest location to zip code

9
Original Plan

• Sylvan provides graphics
• I code into a mobile website
• Sylvan provides SMS API
• I capture users phone number via this API
• Sylvan provides location finder API
• I use API Google Maps API to render nearest
  locations

10
Welcome to the Real World

• Splicing a Mockup into a Website
• How to do this
• http//net.tutsplus.com/articles/news/slice-and-di
  ce-that-psd/

11
Ooops 1

• Mockups provided have a menu button, but no menu
  style
• How should it be? Drop down? Its own page?
• Real world lesson Client ! EngineerClient
  Needs ! What Client Asks For

12
Welcome to the Real World

• Mobile XHTML / CSS
• TEL Tag
• View Port
• OnOrientChange
• How to do this
• http//www.screencast-o-matic.com/watch/cXnl0ZIbN
  

13
Welcome to the Real World

• Connect to SMS System
• Input users phone number
• Store to database (using API)

14
Ooops 2

• Such APIs do not Exist, nor was there any plan on
  what to do with phone numbers once they were
  captured
• How would you use SMS technology with regards to
  an after school program?
• Real world lesson while(Scope of project)
  price price
• while(Scope of project--) price--

15
Welcome to the Real World

• Get Nearest Location using Targus API
• Output on a Google Map

16
Ooops 3

• Yea.ummm we dont know our API username and
  password and cant get it for you either. By the
  way we still want the project done on time
• Real world lesson int x Random(0,
  10)fairness_of_life / x //yes x
  can be 0

17
Computer Science to the Rescue

• What CS problem do I have to solve?
• Find the nearest location to a given zip code

18
The Naive Method

• k-Nearest Neighbors
• k 10
• Given N points and location k, find the k
  closest neighbors
• What is the naive solution?

19
The Naive Method

• GetKNearestSylvanCenters(int k, GeoPoint
  newLocation, GeoPoint allCenterLocations)
• //assume all points have been geocoded using
  Address2GeocodeAPI
• //GeoPoint has 2 float values GeoPoint.lat and
  GeoPoint.lng
• //GeoPoint.getDistanceBetween (GeoPoint p1,
  GeoPoint p2) gives the distance between two
  points
• KeyValuePairltint, floatgt minPoints array of
  length k //stores the closest locations and
  dist
• //initialize minPoints with float.MAXVALUE for
  each element
• for (int i 0 i lt allCenterLocations.length
  i) //foreach GeoPoint
• float distance GeoPoint.getDistanceBetween(new
  Location, allCenterLocationsi)
• foreach (item in minPoints)
• if (distance lt item.value)
• item.id i
• item.value distance
• sort(minPoints)
• break

20
The Naive Method

• Great, got this working, phew!
• Any problems with the algorithm?
• What is the Big O() for time?
• What is the Big O() for memory?
• We have 1000 locations
• About how long to get the k-nearest neighbors on
  relatively modern web server / platform?

21
Exactly!
Suboptimal!
Disappointed!
weeks of nightmares involving past professors
22
Algorithm Improvements

• Storage is not an issue
• Perhaps we can speed this up with preprocessing?

23
Improvement 1

• Precompute k-nearest neighbors for each point
• Big O of pre-computation speed
• Big O of memory usage?
• Search for a Neighbor
• Big O of Search?
• Once I found a match, I list the k-Nearest
  Neighbors
• O(1)

24
Improvement 1

• Searching
• Speed from O(kN) to O(N)
• Memory from O(k) to O(kN)
• One problem...

25
Napkin of Intelligence

• Doesnt work unless points are distributed evenly

26
Improvement 2

• Instead of precomputing the k-NN for N points,
  lets compute them for G evenly distributed points
• How many points g should be in G?
• They should cover the 48 contiguous states
• For each g, compute k-NN
• Big O?
• Memory Usage?

27
Improvement 2

• Big O of pre-computation
• Time is O(GN)
• Memory Usage is now O(kG)
• Accuracy problem solved
• Search is now O(G) instead of O(N)
• Good for large data sets, but slower than N2 if
  we have a few 100 points
• How fast can we make search?

28
Improvement 3

• Quad Tree
• Segments an X/Y space into a series of recursive
  quadrants
• What points should we store in the treeG or N?

Wikipedia Commons
29
Improvement 3

• We can get search from k to nearest g to log(G)
• Is there any way we can avoid having G points?

30
Improvement 4

• Quad-Tree solves the problem of Find the nearest
  k locations
• k-Nearest Neighbors
• If the nearest neighbor is 100 miles away would
  you still want to go?
• k-Nearest Neighbors with Bounding Box

31
Improvement 4

• R-Tree
• Traversal of rectangular data types

Wikipedia Commons
32
Improvement 4

• R-Tree
• Traversal of rectangular data types
• Storage N
• Traversal log(N)
• k-NN with bounding box
• log(N) to find box
• O(m log(m)) where m points in box
• Sort resultant set
• Above assumes balanced tree

33
Realizations

• The k-NN with bounding box problem is
• A searching problem
• A sorting problem
• Balanced R-Trees are hard to implement!
• Even harder to implement in a database

34
Improvement 3.9

• Use a Hash Table to track cells

35
Improvement 3.9

• Given a point k it is easy to determine which
  cell that point should be in
• O(1)

36
Improvement 3.9

• Lets now search around all neighboring cells
• O(1)
• Sort the distance from k to each point in these
  9 cells
• O (m log (m))

37
Improvement 3.95

• Using SQL and Haversines
• 1 degree Latitude 69 miles
• 1 degree Longitude 69 miles x
• Haversine distance between 2 spherical points
• SQL
• Select points where lat within 100 miles of
  lat and lng within 100 miles of lng
• Order by Haversine Distance

38
Improvement Conclusion

• Balanced R-Tree is great
• In almost all cases
• Hash or Haversine Method
• Good as long as there are not too many points in
  a given bounding box
• I can sleep easy once again

39
Back to Reality

• ClientBTW - We found the Targus API info, here
  you go!
• Turns out, Targus uses a Priority R-Tree data
  structure
• Real world lesson Procrastination turned out to
  be the optimal solution

40
Mobi-Center vs Senior Design

• 50 time spent dealing with tedious issues
• 50 time spent solving an algorithmically
  challenge
• Outside of yourself
• No one cares about the 100 sweat that went into
  your project
• Only desire is to see a polished product

41
Mobi-Center Screencast

• What is the most interesting part about
  Mobi-Center to you?
• What do you think non-CS people think is most
  interesting?

42
My Thoughts?

• Both CS and Non-CS people find the same parts
  interesting
• Only I, the developer, differs in opinion
• Goal?
• Build interest into the details for all audiences
• How?

43
Presentation Interest Levels
44
Presentation Interest Levels
45
Mobi-Center Screencast

• What are the important points we should cover for
  Mobi-Center?

46
Mobi-Center Screencast

• My thoughts 
• Algorithm Development
• How easy it is to update
• How the geocoder works
• How the system works
• The polish
• Tilting your phone refreshes the screen
• Google Maps integration

47
Mobi-Center Screencast

• A bit more refined with a timeline
• Grand Overview (30 seconds)
• Give a situation (2 minutes)
• Do a mini-demo of the software based on the
  situation (3 minutes)
• Present algorithm (30 seconds)
• Present other key features (1 minute)
• Conclude and close (15 seconds)

48
Activity

• Form 3 groups
• Devise an idea for a script for Mobi-Center
• You have 8 minutes to work on this
• Prepare to present and defend your general
  outline to the class for a 5 minute video

49
The Script

• Grand Overview
• Talk about mobile web becoming the future
• 1-liner describing product (Thoughts?)

50
The Script

• One-Liner
• Mobi-center gives a mom-and-pop feeling to the
  largest most distributed businesses and services

51
The Script

• The Situation
• Using Sylvan Learning as an example
• Parent wants their child to do better in school
• Uses mobi-center to find a location

52
The Script

• Explain the Algorithm
• Explain what the problem is and why we need an
  algorithm
• Explain the algorithm
• Explain how the algorithm solved the problem

53
The Script

• Show Other Features
• Use of Mobile Features
• TEL tag
• Orientation Flipping
• Content Management System
• Show how I tested on many devices

54
The Script

• Lets get the details right
• For each item, write a script
• Develop slides or animations if necessary
• Determine segments of application to show
• Practice!

55
Why Practice?

• Screencasting software ! Word Processor
• Undo is unforgiving / non-existent
• Cant hit backspace to make quick edits
• May crash often

56
Story Board

• Helps plan your script http//www.incompetech.com
  /graphpaper/storyboard/

57
Story Boarding Steps

• Much of this class was spent on the first stages
  of storyboarding
• Think of your story.
• Determine what is important
• Filter out what others may not care much for
• Add details and plan where slides/video will help

58
Next Steps

• Record your screen cast
• Crop out load time and other issues using a basic
  editor
• Highlight important notes using post-production
  techniques

59
Post Production

• Zoom
• Instead of showing your application at a constant
  resolution, zoom into important pieces
• Overlays
• Dim the screen and highlight important elements
• http//www.screencast-o-matic.com/channels/c6irbHV
  nT

60
Mobi-Center

• Updated video based on our script /
  storyboardhttp//www.youtube.com/watch?v87TO2ag
  dOQA

61
Types of Screencasts

• Short Presentations (2 minutes)
• Longer Demo (5-10 minutes)
• Walkthrough (10 minutes)
• How-to Series (lt 2 minutes each)

62
For this Course

• Long Demo
• 8 Minutes
• Similiar in format to todays class
• Walkthrough
• Not to exceed 15 minutes

63
Walkthrough

• Storyboard your features
• Start at the entry point (configuration)
• Show basic features
• Show more advanced features
• Assume audience has seen overview demo and is
  already interested in your product.
• Audience is technical

64
Why Screencast?

• Modalitieshttp//en.wikipedia.org/wiki/Modality_(
  semiotics)
• Humans learn better when multiple senses are
  impacted
• Reading (Documentation/Brochure)
• Doing (Hands-on workshop)
• Seeing (Screenshots)
• Hearing

65
Why Screencast?

• Screencasts simultaneously impact multiple senses
• Screencast with subtitles
• Module based screencasts (watch this video, then
  take action)
• Provide instant context (e.g. Screencast shows
  different version of software than what user has)

66
Your Turn

• Develop script / story board
• What are the most important points of this
  project to me?
• What would others find most interesting?
• How can I lead my audience in without alienating
  them?
• How can I tune down my ego?
• I spent 100 hours on feature X but maybe in the
  big picture that is not what is important

67
Your Turn

• Order your ideas into a compelling story
• Tell the story
• Enhanced with slides and animations
• Interjected with footage of your project
• Close meaningfully!
• Clean up with post production

68
Screencast vs 100 Demo

• Very similiar in content and flow
• Can act as your backup demo if there is a
  hardware or network failure
• Plan to mute the audio and talk through your
  entire demo
• Enthusiastically!

69
Screencast vs 100 Demo

• Real demo has no post production
• However, it has you!
• Real demo will have real failures
• You must be able to gracefully recover from them
• Recorded demo cannot have errors
• Real demo has real live audience
• Be prepared!

70
Other Resources

• http//thescreencastinghandbook.com/
• Discusses storyboarding techniques
• Evaluates screencast production and post
  production software
• Contains many reference videos(GW has a license
  of this e-book for each student)
• http//www.screencast-o-matic.com/
• Free screencasting tool for production
• Has post production features at a nominal
  cost(GW is working to license the pro version
  for this course)

71
Great Screencasts

• Within the grasp of what you can accomplish using
  Screencast-O-Matic
• http//www.youtube.com/watch?vSuNprTu5Y5c (good
  / ok)
• http//www.youtube.com/watch?vvW3N6jlhi4g (good)
• http//www.youtube.com/watch?v-0a86-byVo8 (good)
• http//procasts.co.uk/screencast-examples.html (ve
  ry good)
• http//www.slideshare.net/robertmhoehn/ideascale-c
  ocoa-widget-scraster (very good)
• Fancy
• http//www.slideshare.net/scraster/rockets-tape-va
  ult-expert-a-professional-screencast-by-scraster  
  (Start at minute 1)
• http//www.slideshare.net/scraster/ideascale-a-pro
  fessional-screencast-from-scraster-4386137 (start
  at 40 seconds in)
• http//scraster.com/work/
• http//video.techsmith.com/jing/2.1/overview/defau
  lt.asp
• Really fancy (combination presentation /
  screen-cast)
• http//rubyonrails.org/screencasts/rails3/getting-
  started-action-dispatch
• http//www.youtube.com/watch?v0QRO3gKj3qw

72
Screencasts and Society

• Show Me Do http//showmedo.com/
• E-Learning / Distance Learning
• Industry Uses
• Product Demos
• Support Systems

73
Questions?
Template Used with Permission