1. Dinamizando um site esttico Musica.com.brRapidez de um site cacheado e ainteratividade de uma rede social.

2. QuestesComo implementar uma rede social com baixo custo?Como entregar o contedo principal em 1o lugar?Como manter um cdigo limpo nessas condies? 3. Poupando o servidorlocalStorage para encantar o usurioEscopos Sesso e Lan-houseKizzy para abstrairExemplos: Tornar-se f, responder quiz... 4. localStorage e KizzylocalStorage.setItem(nome, valor)localStorage.getItem(nome)kizzy(namespace).set(nome, valor)kizzy(namespace).get(nome)kizzy(namespace).set(nome, valor, 10*60*1000)kizzy(namespace).clearExpireds() 5. Exemplo: Escopo de sessovar Sessao = { function SessaoLista(nome) {expire: 6*60*60*1000, this.nome = nome; } set:function(nome,valor) {SessaoLista.prototype = { this.store().set(nome + - +all:function() { this.cookie(), valor, this.expire);return Sessao.get(this.nome) || []; }, }, get:function(nome) { add:function(valor) { return this.store().get(nome + - + var todos = this.all(); this.cookie()) todos.push(valor); }, Sessao.set(this.nome,todos); cookie:function() {} return $.cookie(sessionCookieName);// ... },} store:function() { if (!this.cookie()) return NullStore; return kizzy(sessao); } // ...}; 6. Exemplo: Perguntas do quizfunction ListaQuiz(disponiveis) { this.respondidos = new SessaoLista(quiz); this.disponiveis = disponiveis;}ListaQuiz.prototype = { addRespondido:function(id) { this.respondidos.add(id); }, proximo:function(){ var naoRespondidos = _.difference(this.disponiveis, this.respondidos.all()); if( naoRespondidos.length > 0 ) { return naoRespondidos[0]; } return null; } //...} 7. QuestesComo implementar uma rede social com baixo custo?Como entregar o contedo principal em 1o lugar?Como manter um cdigo limpo nessas condies? 8. JavaScript assncronovar script = document.createElement(script);script.type = text/javascript;script.async = true;script.src = meu-script.js(document.getElementsByTagName(head)[0] ||document.getElementsByTagName(body)[0]).appendChild(script); 9. JS Realmente assncronoHead.js(script1.js, script2.js)Baixando scripts em paralelo, executando em ordemLidando com botes que dependem de scriptsContedo principal em primeiro lugar 10. Head.jshead.js(script.js, function() { console.log(carregou) }head.js(s1.js, s2.js, function() { console.log(carregou s1 es2 em paralelo e executou na ordem) });head.js(s1.js).js(s2.js);head.ready(function() { console.log(carregou s1 e s2 emparalelo e executou em paralelo) }); 11. Lidando com Facebookhead.js(global.js, artista.js, function() {head.js(facebook.js).js(twitter.js);}); 12. QuestesComo implementar uma rede social com baixo custo?Como entregar o contedo principal em 1o lugar?Como manter um cdigo limpo nessas condies? 13. Mantendo cdigo limpo Backbone.js Underscore.js Jasmine 14. Backbone.jsMVC no JavaScriptValeu a pena?Isolamento de viewsBind de eventos 15. Isolamento de viewsvar AlbunsRelacionadosView = Backbone.View.extend({events: { "click li.left":cliqueAlbumEsquerdo", "click li.right": "cliqueAlbumDireito", "click .setas-navegacao .prev": "cliqueSetaEsquerda", "click .setas-navegacao .next": "cliqueSetaDireita", "click li.middle":"visitarAlbum"},// });new AlbunsRelacionadosView({el: $(.albuns-relacionados)}); 16. Bind de Eventosvar Login = { entrou:function() { //.. this.trigger(entrou); }}_.extend(Login, Backbone.Events);Login.on(entrou,function(){console.log("Usuario acabou de se logar");});Login.on(atualizado,function(){console.log("Dados do usuario foram atualizados");}); 17. QuestesComo economizar hardware em uma rede social?Como entregar o contedo principal em 1o lugar?Como manter um cdigo limpo nessas condies?O que mais o Head.js me oferece? 18. QuestesComo implementar uma rede social com baixo custo?Como entregar o contedo principal em 1o lugar?Como manter um cdigo limpo nessas condies?O que mais o Head.js me oferece? 19. Mais do head.jsClasses CSS por funcionalidade:webkit root-section js gradient rgba opacity textshadowmultiplebgs boxshadow borderimage borderradiuscssreflections csstransforms csstransitionsfontface domloaded w-1300 lt-1280 lt-1440 lt-1680 lt-1920Habilita tags HTML5 em todos os browsers:Article, footer, aside... 20. Dvidas e comentrios 21. Mantenha contatotimotta@gmail.com@timottahttp://programandosemcafeina.blogspot.com