1 / 16

This Time

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/. JSON-P and Proxies. 1. Gimme. 2. Ok here. PS go get Data.

abla
Download Presentation

This Time

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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/

  2. 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!

  3. JSON-P and Proxies 1. Gimme 2. Ok here. PS go get Data 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 ?callback=LARRY -P 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…

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

  5. 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

  6. 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

  7. 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); } };

  8. 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

  9. 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.

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

  11. HTML5: Nice Semantic Markup <body> <nav></nav> <header></header> <aside></aside> <div id="container"> <section> <header></header> <p>Some Text</p> <footer></footer> </section> <section> <header></header> <p>Some Text</p> <footer></footer> </section> </div> <footer></footer> </body>

  12. HTML5: Cooler Forms • http://www.html5rocks.com/en/tutorials/forms/html5forms/ • Types: tel, search, email, date • Attributes: placeholder, pattern, required

  13. 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

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

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

More Related