730 likes | 743 Views
Learn about screencasting, its benefits, and how to create screencasts for your projects. Follow along with a real-world example of developing a mobile website for Sylvan Learning. Discover the challenges faced and the solutions implemented. Explore improvements to the algorithm used to find the nearest location to a given zip code. Gain insights into the world of computer science and problem-solving.
E N D
Screencasting Your Presentation CSCI 196 | Kunal Johar Template Used with Permission
What is a Screencast? Recording of a screen Often has a mouse pointer overlayed so a viewer can follow along
Why Make One? We’ll cover this today What are your thoughts?
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)
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
Mobi-Center What is it? Who would use Mobi-Center? How would they use it?
Mobi-Center Thoughts on the screencast? Was it fine as is? Can anything be improved?
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
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
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/
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
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
Welcome to the Real World • Connect to SMS System • Input user’s phone number • Store to database (using API)
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--}
Welcome to the Real World • Get Nearest Location using Targus API • Output on a Google Map
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
Computer Science to the Rescue • What CS problem do I have to solve? • “Find the nearest location to a given zip code”
The Naive Method • k-Nearest Neighbors • k = 10 • Given N points and location k’, find the k closest neighbors • What is the naive solution?
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; } } } }
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?
Exactly! Suboptimal! Disappointed! weeks of nightmares involving past professors
Algorithm Improvements Storage is not an issue Perhaps we can speed this up with preprocessing?
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)
Improvement #1 • Searching: • Speed from O(k*N) to O(N) • Memory from O(k) to O(k*N) • One problem...
Napkin of Intelligence Doesn’t work unless points are distributed evenly
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?
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?
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?
Improvement #3 We can get search from k’ to nearest g to log(G) Is there any way we can avoid having G points?
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
Improvement #4 • R-Tree • Traversal of rectangular data types Wikipedia Commons
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
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
Improvement #3.9 Use a Hash Table to track “cells”
Improvement #3.9 • Given a point k’ it is easy to determine which cell that point should be in • O(1)
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))
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
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
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
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
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?
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?
Mobi-Center Screencast What are the important points we should cover for Mobi-Center?
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
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)
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
The Script • Grand Overview • Talk about mobile web becoming the future • 1-liner describing product (Thoughts?)
The Script • One-Liner • Mobi-center gives a mom-and-pop feeling to the largest most distributed businesses and services