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? We’ll 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 • Let’s 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 user’s 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-dice-that-psd/

11. Ooops #1 • Mockups provided have a menu button, but no menu style • How should it be? Drop down? It’s 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 user’s 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 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” 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 KeyValuePair<int, float>[] minPoints = [array of length k] ; //stores the closest locations and dist //initialize minPoints with float.MAXVALUE for each element for (int i = 0; i < allCenterLocations.length; i++) //foreach GeoPoint { float distance = GeoPoint.getDistanceBetween(newLocation, allCenterLocations[i]); foreach (item in minPoints) { if (distance < 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(k*N) to O(N) • Memory from O(k) to O(k*N) • One problem...

25. Napkin of Intelligence Doesn’t 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(G*N) • Memory Usage is now O(k*G) • Accuracy problem solved • Search is now O(G) instead of O(N) • Good for large data sets, but slower than N^2 if we have a few 100 points • How fast can we make search?

28. Improvement #3 Wikipedia Commons • Quad Tree • Segments an X/Y space into a series of recursive quadrants • What points should we store in the treeG or N?

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 • Let’s 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 • Client:“BTW - 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