1. This Time One more presentation Assignment 3 – questions? No, seriously, ask questions. I like mobile. Recap based on dot-voting – JSON-P and Proxies – Mobile UX – JS OOP Next Up http://endlessorigami.com/

3. JSON-P and Proxies 1. Gimme 2. Ok here. PS go get Data 3. I was told to get this BUT I'M NOT ALLOWED!

4. 3. I was told to get this So I load it like a JavaScript Library And it plays nice by passing the results to a function of my choosing JSON-P and Proxies 1. Gimme 2. Ok here. PS go get Data -P ?callback=LARRY LARRY({THEDATA}); Requires the place you are getting the data from to play nice and have server-side code, which means harder to cache and scale…

5. JSON-P and Proxies 1. Gimme 2. Ok here. PS go get Data 3. Ok, but you have to get it for me 4 Fine. 5. Here you go

6. proxy.php <?php header('Cache-Control: no-cache, must-revalidate'); header('Expires: Mon, 26 Jul 1997 05:00:00 GMT'); header('Content-type: application/json'); $url = 'http://api.zemanta.com/services/rest/0.0?'. http_build_query(array('method'=>$_REQUEST['method'], 'format'=>'json', 'api_key'=>$_REQUEST['api_key'], 'text'=>$_REQUEST['text'])); echo file_get_contents($url); Avoid any caching Browser hint, might not be needed Build the POST or GET request, careful with what gets passed through Spit it back out

7. Mobile UX Everyone is obsessed with sliding transitions So they put all the content in one page and get fancy JS- powered CSS to bounce around. With hardware-accelerated animations That is cross-device compatible Which is actually kinda neat But means more AJAX to load data without bouncing between pages http://jquerymobile.com/demos/1.0rc1/docs/pages /multipage-template.html

8. JS OOP Do you need it? Are you trying to over-do it? Are you sure? Sounds like a lot of work for a 3-week project… var timObject = { property1 : "Hello", property2 : "MmmMMm", property3 : ["mmm", 2, 3, 6, "kkk"], method1 : function(){ alert("Method had been called" +this.property1); } };

9. But that was just one object function cat(name) { this.name = name; this.talk = function() { alert( this.name + " say meeow!" ) } cat1 = new cat("felix"); (Hey, isn't that just a function? Yes. The "new" is the special part) http://www.javascriptkit.com/javatutors/oopjs2.shtml

10. Why JS is strange cat.prototype.changeName = function(name) { this.name = name; } Yes, you can go back and add new stuff to the parent "class" by using "prototype". But, again, if you're doing this you might be over-doing it.

11. HTML5 Semantic Tags Audio/Video Local Storage Geo Location …what else do you want to know?

12. HTML5: Nice Semantic Markup Some Text Some Text

13. HTML5: Cooler Forms http://www.html5rocks.com/en/tutorials/forms/h tml5forms/ http://www.html5rocks.com/en/tutorials/forms/h tml5forms/ – Types: tel, search, email, date – Attributes: placeholder, pattern, required

14. HTML5: Local Storage Really basic: key/value pairs …but JSON is a really nice way to encode an object as a String… so really, you can stuff anything in there. Perfect for preferences, user names, search results, etc. As long as it all fits in 5 MB

15. HTML5: Canvas Why? Use Vis instead unless you need very low- level drawing access. (perfect segue)

16. Jump into Vis (or oAuth?) Just do your own w/ Canvas – Fast easy graphics, no fuss – http://www.wordle.net/ http://www.wordle.net/ – http://imagecharteditor.appspot.com/ http://imagecharteditor.appspot.com/ JavaScript http://sixrevisions.com/javascript/20-fresh-javascript- data-visualization-libraries/http://sixrevisions.com/javascript/20-fresh-javascript- data-visualization-libraries/ – http://mbostock.github.com/d3/ Super fast. Nice force-directed layout. http://mbostock.github.com/d3/ – http://processingjs.org/ http://fizz.bloom.io/ very slick, nice oAuth http://processingjs.org/http://fizz.bloom.io/ http://code.google.com/apis/fusiontables/ Nice API, acts like a DB http://code.google.com/apis/fusiontables/ Public Datasets, so don't be hiding anything – http://www-958.ibm.com/software/data/cognos/manyeyes/ http://www-958.ibm.com/software/data/cognos/manyeyes/ – http://www.google.com/publicdata/home http://www.google.com/publicdata/home