this time one more presentation assignment 3 – questions? no, seriously, ask questions. i like...
Post on 22-Dec-2015
218 views
TRANSCRIPT
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
3. I was told to get thisBUT I'M NOT ALLOWED!
3. I was told to get thisSo I load it like a JavaScript LibraryAnd 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…
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
proxy.php<?phpheader('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 cachingAvoid any caching
Browser hint, might not be needed
Browser hint, might not be needed
Build the POST or GET request, careful
with what gets passed through
Build the POST or GET request, careful
with what gets passed through
Spit it back outSpit it back out
Mobile UX
Everyone is obsessed with sliding transitionsSo they put all the content in one page and get fancy JS-powered CSS to bounce around. With hardware-accelerated animationsThat is cross-device compatibleWhich is actually kinda neatBut means more AJAX to load data without bouncing between pages
http://jquerymobile.com/demos/1.0rc1/docs/pages/multipage-template.html
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);
}};
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
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.
HTML5
• Semantic Tags• Audio/Video• Local Storage• Geo Location• …what else do you want to know?
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>
HTML5: Cooler Forms
• http://www.html5rocks.com/en/tutorials/forms/html5forms/ – Types: tel, search, email, date– Attributes: placeholder, pattern, required
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
HTML5: Canvas
• Why? Use Vis instead unless you need very low-level drawing access. (perfect segue)
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