Screencasting and Presenting for Engineers


Published on

Engineers often think about the 'how' as the most exciting part of their work. These details often bore what would be candid listeners.

Take a step back, think about what excites others, then ease in your grand challenges. Tie it all together in a story.

Published in: Education, Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Screencasting and Presenting for Engineers

  1. 1. Screencasting Your Presentation CSCI 196 | Kunal Johar Template Used with Permission
  2. 2. What is a Screencast? <ul><li>Recording of a screen </li></ul><ul><li>Often has a mouse pointer overlayed so a viewer can follow along </li></ul>
  3. 3. Why Make One? <ul><li>We’ll cover this today </li></ul><ul><li>What are your thoughts? </li></ul>
  4. 4. Record vs Live | Video vs In-Person <ul><li>Recap from our September Workshop </li></ul><ul><ul><li>What are some things to consider for a live presentation (in person) </li></ul></ul><ul><ul><li>How about live via a webinar / video conferene </li></ul></ul><ul><ul><li>What factors are important when presenting asynchronously (pre-recorded) </li></ul></ul>
  5. 5. Screencasting your Project <ul><li>Let’s take a sample project </li></ul><ul><ul><li>This is a tool I have been working on </li></ul></ul><ul><li>As with a new audience, you have no context and are jumping in: </li></ul><ul><li> </li></ul>
  6. 6. Mobi-Center <ul><li>What is it? </li></ul><ul><li>Who would use Mobi-Center? </li></ul><ul><li>How would they use it? </li></ul>
  7. 7. Mobi-Center <ul><li>Thoughts on the screencast? </li></ul><ul><li>Was it fine as is? </li></ul><ul><li>Can anything be improved? </li></ul>
  8. 8. A Bit of Context <ul><li>Sylvan Learning is an after school tutoring franchise (1000 locations) </li></ul><ul><li>They commissioned me to develop a mobile website for them </li></ul><ul><ul><li>Must look good on most mobile browsers </li></ul></ul><ul><ul><li>Must support SMS signup </li></ul></ul><ul><ul><li>Must show nearest location to zip code </li></ul></ul>
  9. 9. Original Plan <ul><li>Sylvan provides graphics </li></ul><ul><ul><li>I code into a mobile website </li></ul></ul><ul><li>Sylvan provides SMS API </li></ul><ul><ul><li>I capture user’s phone number via this API </li></ul></ul><ul><li>Sylvan provides location finder API </li></ul><ul><ul><li>I use API + Google Maps API to render nearest locations </li></ul></ul>
  10. 10. Welcome to the Real World <ul><li>Splicing a Mockup into a Website </li></ul><ul><ul><li>How to do this: </li></ul></ul><ul><ul><li> </li></ul></ul>
  11. 11. Ooops #1 <ul><li>Mockups provided have a menu button, but no menu style </li></ul><ul><ul><li>How should it be? Drop down? It’s own page? </li></ul></ul><ul><li>Real world lesson: Client != Engineer Client Needs != What Client Asks For </li></ul>
  12. 12. Welcome to the Real World <ul><li>Mobile XHTML / CSS </li></ul><ul><ul><li>TEL Tag </li></ul></ul><ul><ul><li>View Port </li></ul></ul><ul><ul><li>OnOrientChange </li></ul></ul><ul><ul><li>How to do this: </li></ul></ul><ul><ul><li> </li></ul></ul>
  13. 13. Welcome to the Real World <ul><li>Connect to SMS System </li></ul><ul><ul><li>Input user’s phone number </li></ul></ul><ul><ul><li>Store to database (using API) </li></ul></ul>
  14. 14. Ooops #2 <ul><li>Such APIs do not Exist, nor was there any plan on what to do with phone numbers once they were captured </li></ul><ul><ul><li>How would you use SMS technology with regards to an after school program? </li></ul></ul><ul><li>Real world lesson: while(Scope of project++) { price == price} </li></ul><ul><li>while(Scope of project--) { price--} </li></ul>
  15. 15. Welcome to the Real World <ul><li>Get Nearest Location using Targus API </li></ul><ul><li>Output on a Google Map </li></ul>
  16. 16. Ooops #3 <ul><li>“ Yea….ummm we don’t know our API username and password and can’t get it for you either. By the way we still want the project done on time” </li></ul><ul><li>Real world lesson: int x = Random(0, 10) fairness_of_life /= x //yes x can be 0 </li></ul>
  17. 17. Computer Science to the Rescue <ul><li>What CS problem do I have to solve? </li></ul><ul><ul><li>“ Find the nearest location to a given zip code” </li></ul></ul>
  18. 18. The Naive Method <ul><li>k-Nearest Neighbors </li></ul><ul><ul><li>k = 10 </li></ul></ul><ul><li>Given N points and location k’, find the k closest neighbors </li></ul><ul><li>What is the naive solution? </li></ul>
  19. 19. The Naive Method <ul><li>GetKNearestSylvanCenters(int k, GeoPoint newLocation, GeoPoint[] allCenterLocations) </li></ul><ul><li>{ //assume all points have been geocoded using Address2GeocodeAPI </li></ul><ul><li>//GeoPoint has 2 float values and GeoPoint.lng </li></ul><ul><li>//GeoPoint.getDistanceBetween (GeoPoint p1, GeoPoint p2) gives the |distance| between two points </li></ul><ul><li>KeyValuePair<int, float>[] minPoints = [array of length k] ; //stores the closest locations and dist </li></ul><ul><li>//initialize minPoints with float.MAXVALUE for each element </li></ul><ul><li>for (int i = 0; i < allCenterLocations.length; i++) //foreach GeoPoint </li></ul><ul><li>{ </li></ul><ul><li>float distance = GeoPoint.getDistanceBetween(newLocation, allCenterLocations[i]); </li></ul><ul><li>foreach (item in minPoints) </li></ul><ul><li>{ </li></ul><ul><li>if (distance < item.value) </li></ul><ul><li>{ </li></ul><ul><li> = i; </li></ul><ul><li>item.value = distance; </li></ul><ul><li>sort(minPoints); </li></ul><ul><li>break; </li></ul><ul><li>} </li></ul><ul><li>} </li></ul><ul><li>} </li></ul><ul><li>} </li></ul>
  20. 20. The Naive Method <ul><li>Great, got this working, phew! </li></ul><ul><ul><li>Any problems with the algorithm? </li></ul></ul><ul><ul><li>What is the Big O() for time? </li></ul></ul><ul><ul><li>What is the Big O() for memory? </li></ul></ul><ul><li>We have 1000 locations </li></ul><ul><ul><li>About how long to get the k-nearest neighbors on relatively modern web server / platform? </li></ul></ul>
  21. 21. Exactly! Suboptimal! Disappointed! weeks of nightmares involving past professors
  22. 22. Algorithm Improvements <ul><li>Storage is not an issue </li></ul><ul><li>Perhaps we can speed this up with preprocessing? </li></ul>
  23. 23. Improvement #1 <ul><li>Precompute k-nearest neighbors for each point </li></ul><ul><ul><li>Big O of pre-computation speed </li></ul></ul><ul><ul><li>Big O of memory usage? </li></ul></ul><ul><li>Search for a Neighbor </li></ul><ul><ul><li>Big O of Search? </li></ul></ul><ul><li>Once I found a match, I list the k-Nearest Neighbors </li></ul><ul><ul><li>O(1) </li></ul></ul>
  24. 24. Improvement #1 <ul><li>Searching: </li></ul><ul><ul><li>Speed from O(k*N) to O(N) </li></ul></ul><ul><ul><li>Memory from O(k) to O(k*N) </li></ul></ul><ul><li>One problem... </li></ul>
  25. 25. Napkin of Intelligence <ul><li>Doesn’t work unless points are distributed evenly </li></ul>
  26. 26. Improvement #2 <ul><li>Instead of precomputing the k-NN for N points, lets compute them for G evenly distributed points </li></ul><ul><li>How many points g should be in G? </li></ul><ul><ul><li>They should cover the 48 contiguous states </li></ul></ul><ul><li>For each g, compute k-NN </li></ul><ul><ul><li>Big O? </li></ul></ul><ul><ul><li>Memory Usage? </li></ul></ul>
  27. 27. Improvement #2 <ul><li>Big O of pre-computation </li></ul><ul><ul><li>Time is O(G*N) </li></ul></ul><ul><ul><li>Memory Usage is now O(k*G) </li></ul></ul><ul><li>Accuracy problem solved </li></ul><ul><li>Search is now O(G) instead of O(N) </li></ul><ul><ul><li>Good for large data sets, but slower than N^2 if we have a few 100 points </li></ul></ul><ul><li>How fast can we make search? </li></ul>
  28. 28. Improvement #3 <ul><li>Quad Tree </li></ul><ul><ul><li>Segments an X/Y space into a series of recursive quadrants </li></ul></ul><ul><ul><li>What points should we store in the tree G or N? </li></ul></ul>Wikipedia Commons
  29. 29. Improvement #3 <ul><li>We can get search from k’ to nearest g to log(G) </li></ul><ul><li>Is there any way we can avoid having G points? </li></ul>
  30. 30. Improvement #4 <ul><li>Quad-Tree solves the problem of “Find the nearest k locations” </li></ul><ul><ul><li>k-Nearest Neighbors </li></ul></ul><ul><li>If the nearest neighbor is 100 miles away would you still want to go? </li></ul><ul><ul><li>k-Nearest Neighbors with Bounding Box </li></ul></ul>
  31. 31. Improvement #4 <ul><li>R-Tree </li></ul><ul><ul><li>Traversal of rectangular data types </li></ul></ul>Wikipedia Commons
  32. 32. Improvement #4 <ul><li>R-Tree </li></ul><ul><ul><li>Traversal of rectangular data types </li></ul></ul><ul><ul><li>Storage = N </li></ul></ul><ul><ul><li>Traversal = log(N) </li></ul></ul><ul><ul><li>k-NN with bounding box = </li></ul></ul><ul><ul><ul><li>log(N) to find box </li></ul></ul></ul><ul><ul><ul><li>O(m * log(m)) where m = points in box </li></ul></ul></ul><ul><ul><ul><ul><li>Sort resultant set </li></ul></ul></ul></ul><ul><ul><li>Above assumes balanced tree </li></ul></ul>
  33. 33. Realizations <ul><li>The k-NN with bounding box problem is </li></ul><ul><ul><li>A searching problem </li></ul></ul><ul><ul><li>A sorting problem </li></ul></ul><ul><li>Balanced R-Trees are hard to implement! </li></ul><ul><ul><li>Even harder to implement in a database </li></ul></ul>
  34. 34. Improvement #3.9 <ul><li>Use a Hash Table to track “cells” </li></ul>
  35. 35. Improvement #3.9 <ul><li>Given a point k’ it is easy to determine which cell that point should be in </li></ul><ul><ul><li>O(1) </li></ul></ul>
  36. 36. Improvement #3.9 <ul><li>Let’s now search around all neighboring cells </li></ul><ul><ul><li>O(1) </li></ul></ul><ul><li>Sort the distance from k’ to each point in these 9 cells </li></ul><ul><ul><li>O (m log (m)) </li></ul></ul>
  37. 37. Improvement #3.95 <ul><li>Using SQL and Haversines </li></ul><ul><ul><li>1 degree Latitude = 69 miles </li></ul></ul><ul><ul><li>1 degree Longitude = 69 miles x </li></ul></ul><ul><ul><li>Haversine = distance between 2 spherical points </li></ul></ul><ul><li>SQL = </li></ul><ul><ul><li>Select * points where lat within 100 miles of lat’ and lng within 100 miles of lng’ </li></ul></ul><ul><ul><li>Order by Haversine Distance </li></ul></ul>
  38. 38. Improvement Conclusion <ul><li>Balanced R-Tree is great </li></ul><ul><ul><li>In almost all cases </li></ul></ul><ul><li>Hash or Haversine Method </li></ul><ul><ul><li>Good as long as there are not too many points in a given bounding box </li></ul></ul><ul><li>I can sleep easy once again </li></ul>
  39. 39. Back to Reality <ul><li>Client: “BTW - We found the Targus API info, here you go!” </li></ul><ul><ul><ul><li>Turns out, Targus uses a Priority R-Tree data structure </li></ul></ul></ul><ul><li>Real world lesson: Procrastination turned out to be the optimal solution </li></ul>
  40. 40. Mobi-Center vs Senior Design <ul><li>50% time spent dealing with tedious issues </li></ul><ul><li>50% time spent solving an algorithmically challenge </li></ul><ul><li>Outside of yourself </li></ul><ul><ul><li>No one cares about the 100% sweat that went into your project </li></ul></ul><ul><ul><li>Only desire is to see a polished product </li></ul></ul>
  41. 41. Mobi-Center Screencast <ul><li>What is the most interesting part about Mobi-Center to you? </li></ul><ul><li>What do you think non-CS people think is most interesting? </li></ul>
  42. 42. My Thoughts? <ul><li>Both CS and Non-CS people find the same parts interesting </li></ul><ul><li>Only “I”, the developer, differs in opinion </li></ul><ul><li>Goal? </li></ul><ul><ul><li>Build interest into the details for all audiences </li></ul></ul><ul><ul><li>How? </li></ul></ul>
  43. 43. Presentation Interest Levels
  44. 44. Presentation Interest Levels
  45. 45. Mobi-Center Screencast <ul><li>What are the important points we should cover for Mobi-Center? </li></ul>
  46. 46. Mobi-Center Screencast <ul><li>My thoughts:  </li></ul><ul><ul><li>Algorithm + Development </li></ul></ul><ul><ul><li>How easy it is to update </li></ul></ul><ul><ul><li>How the geocoder works </li></ul></ul><ul><ul><li>How the system works </li></ul></ul><ul><ul><li>The polish </li></ul></ul><ul><ul><ul><li>Tilting your phone refreshes the screen </li></ul></ul></ul><ul><ul><ul><li>Google Maps integration </li></ul></ul></ul>
  47. 47. Mobi-Center Screencast <ul><li>A bit more refined with a timeline </li></ul><ul><ul><li>Grand Overview (30 seconds) </li></ul></ul><ul><ul><li>Give a situation (2 minutes) </li></ul></ul><ul><ul><li>Do a mini-demo of the software based on the situation (3 minutes) </li></ul></ul><ul><ul><li>Present algorithm (30 seconds) </li></ul></ul><ul><ul><li>Present other key features (1 minute) </li></ul></ul><ul><ul><li>Conclude and close (15 seconds) </li></ul></ul>
  48. 48. Activity <ul><li>Form 3 groups </li></ul><ul><li>Devise an idea for a script for Mobi-Center </li></ul><ul><ul><li>You have 8 minutes to work on this </li></ul></ul><ul><li>Prepare to present and defend your general outline to the class for a ~5 minute video </li></ul>
  49. 49. The Script <ul><li>Grand Overview </li></ul><ul><ul><ul><li>Talk about mobile web becoming the future </li></ul></ul></ul><ul><ul><ul><li>1-liner describing product (Thoughts?) </li></ul></ul></ul>
  50. 50. The Script <ul><li>One-Liner </li></ul><ul><ul><ul><li>Mobi-center gives a mom-and-pop feeling to the largest most distributed businesses and services </li></ul></ul></ul>
  51. 51. The Script <ul><li>The Situation </li></ul><ul><ul><ul><li>Using Sylvan Learning as an example </li></ul></ul></ul><ul><ul><ul><li>Parent wants their child to do better in school </li></ul></ul></ul><ul><ul><ul><li>Uses mobi-center to find a location </li></ul></ul></ul>
  52. 52. The Script <ul><li>Explain the Algorithm </li></ul><ul><ul><ul><li>Explain what the problem is and why we need an algorithm </li></ul></ul></ul><ul><ul><ul><li>Explain the algorithm </li></ul></ul></ul><ul><ul><ul><li>Explain how the algorithm solved the problem </li></ul></ul></ul>
  53. 53. The Script <ul><li>Show Other Features </li></ul><ul><ul><ul><li>Use of Mobile Features </li></ul></ul></ul><ul><ul><ul><ul><li>TEL tag </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Orientation Flipping </li></ul></ul></ul></ul><ul><ul><ul><li>Content Management System </li></ul></ul></ul><ul><ul><ul><li>Show how I tested on many devices </li></ul></ul></ul>
  54. 54. The Script <ul><li>Let’s get the details right </li></ul><ul><ul><ul><li>For each item, write a script </li></ul></ul></ul><ul><ul><ul><li>Develop slides or animations if necessary </li></ul></ul></ul><ul><ul><ul><li>Determine segments of application to show </li></ul></ul></ul><ul><ul><ul><li>Practice! </li></ul></ul></ul>
  55. 55. Why Practice? <ul><li>Screencasting software != Word Processor </li></ul><ul><ul><ul><li>Undo is unforgiving / non-existent </li></ul></ul></ul><ul><ul><ul><li>Can’t hit backspace to make quick edits </li></ul></ul></ul><ul><ul><ul><li>May crash often </li></ul></ul></ul>
  56. 56. Story Board <ul><li>Helps plan your script </li></ul>
  57. 57. Story Boarding Steps <ul><li>Much of this class was spent on the first stages of storyboarding </li></ul><ul><ul><li>Think of your story. </li></ul></ul><ul><ul><li>Determine what is important </li></ul></ul><ul><ul><li>Filter out what others may not care much for </li></ul></ul><ul><ul><li>Add details and plan where slides/video will help </li></ul></ul>
  58. 58. Next Steps <ul><li>Record your screen cast </li></ul><ul><li>Crop out load time and other issues using a basic editor </li></ul><ul><li>Highlight important notes using post-production techniques </li></ul>
  59. 59. Post Production <ul><li>Zoom </li></ul><ul><ul><li>Instead of showing your application at a constant resolution, zoom into important pieces </li></ul></ul><ul><li>Overlays </li></ul><ul><ul><li>“ Dim” the screen and highlight important elements </li></ul></ul><ul><ul><li> </li></ul></ul>
  60. 60. Mobi-Center <ul><li>Updated video based on our script / storyboard </li></ul>
  61. 61. Types of Screencasts <ul><li>Short Presentations (2 minutes) </li></ul><ul><li>Longer Demo (5-10 minutes) </li></ul><ul><li>Walkthrough (10+ minutes) </li></ul><ul><li>How-to Series (< 2 minutes each) </li></ul>
  62. 62. For this Course <ul><li>Long Demo </li></ul><ul><ul><li>~8 Minutes </li></ul></ul><ul><ul><li>Similiar in format to today’s class </li></ul></ul><ul><li>Walkthrough </li></ul><ul><ul><li>Not to exceed 15 minutes </li></ul></ul>
  63. 63. Walkthrough <ul><li>Storyboard your features </li></ul><ul><ul><li>Start at the entry point (configuration) </li></ul></ul><ul><ul><li>Show basic features </li></ul></ul><ul><ul><li>Show more advanced features </li></ul></ul><ul><li>Assume audience has seen overview demo and is already interested in your product. </li></ul><ul><ul><li>Audience is technical </li></ul></ul>
  64. 64. Why Screencast? <ul><li>Modalities </li></ul><ul><li>Humans learn better when multiple senses are impacted </li></ul><ul><ul><li>Reading (Documentation/Brochure) </li></ul></ul><ul><ul><li>Doing (Hands-on workshop) </li></ul></ul><ul><ul><li>Seeing (Screenshots) </li></ul></ul><ul><ul><li>Hearing </li></ul></ul>
  65. 65. Why Screencast? <ul><li>Screencasts simultaneously impact multiple senses </li></ul><ul><ul><li>Screencast with subtitles </li></ul></ul><ul><ul><li>Module based screencasts (watch this video, then take action) </li></ul></ul><ul><li>Provide instant context (e.g. Screencast shows different version of software than what user has) </li></ul>
  66. 66. Your Turn <ul><li>Develop script / story board </li></ul><ul><ul><li>What are the most important points of this project to me? </li></ul></ul><ul><ul><li>What would others find most interesting? </li></ul></ul><ul><ul><li>How can I lead my audience in without alienating them? </li></ul></ul><ul><ul><li>How can I tune down my ego? </li></ul></ul><ul><ul><ul><li>I spent 100 hours on feature X but maybe in the big picture that is not what is important </li></ul></ul></ul>
  67. 67. Your Turn <ul><li>Order your ideas into a compelling story </li></ul><ul><li>Tell the story </li></ul><ul><ul><li>Enhanced with slides and animations </li></ul></ul><ul><ul><li>Interjected with footage of your project </li></ul></ul><ul><ul><li>Close meaningfully! </li></ul></ul><ul><li>Clean up with post production </li></ul>
  68. 68. Screencast vs 100% Demo <ul><li>Very similiar in content and flow </li></ul><ul><li>Can act as your backup demo if there is a hardware or network failure </li></ul><ul><ul><li>Plan to mute the audio and talk through your entire demo </li></ul></ul><ul><ul><li>Enthusiastically! </li></ul></ul>
  69. 69. Screencast vs 100% Demo <ul><li>Real demo has no post production </li></ul><ul><ul><li>However, it has you! </li></ul></ul><ul><li>Real demo will have real failures </li></ul><ul><ul><li>You must be able to gracefully recover from them </li></ul></ul><ul><ul><li>Recorded demo cannot have errors </li></ul></ul><ul><li>Real demo has real live audience </li></ul><ul><ul><li>Be prepared! </li></ul></ul>
  70. 70. Other Resources <ul><li> </li></ul><ul><ul><li>Discusses storyboarding techniques </li></ul></ul><ul><ul><li>Evaluates screencast production and post production software </li></ul></ul><ul><ul><li>Contains many reference videos ( GW has a license of this e-book for each student) </li></ul></ul><ul><li> </li></ul><ul><ul><li>Free screencasting tool for production </li></ul></ul><ul><ul><li>Has post production features at a nominal cost (GW is working to license the pro version for this course) </li></ul></ul>
  71. 71. Great Screencasts <ul><li>Within the grasp of what you can accomplish using Screencast-O-Matic </li></ul><ul><ul><li>  (good / ok) </li></ul></ul><ul><ul><li>  (good) </li></ul></ul><ul><ul><li>  (good) </li></ul></ul><ul><ul><li>  (very good) </li></ul></ul><ul><ul><li>  (very good) </li></ul></ul><ul><li>Fancy </li></ul><ul><ul><li>    (Start at minute 1) </li></ul></ul><ul><ul><li>   (start at 40 seconds in) </li></ul></ul><ul><ul><li> </li></ul></ul><ul><ul><li> </li></ul></ul><ul><li>Really fancy (combination presentation / screen-cast) </li></ul><ul><ul><li> </li></ul></ul><ul><ul><li> </li></ul></ul>
  72. 72. Screencasts and Society <ul><li>Show Me Do </li></ul><ul><li>E-Learning / Distance Learning </li></ul><ul><li>Industry Uses </li></ul><ul><ul><li>Product Demos </li></ul></ul><ul><ul><li>Support Systems </li></ul></ul>
  73. 73. Questions? Template Used with Permission