Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Dinamizando Sites Estáticos

800 views

Published on

Slides da apresentação feita no Flisol de Salvador

Published in: Technology
  • Falae! No slide 10 eu só mudaria: ”carregou s1 e s2 em paralelo e executou em paralelo”
    pra: ”carregou s1 e s2 em paralelo e executou em ordem arbitrária”
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Dinamizando Sites Estáticos

  1. 1. Dinamizando um site estático Musica.com.br Rapidez de um site cacheado e a interatividade de uma rede social.   
  2. 2. QuestõesComo implementar uma rede social com baixo custo?Como entregar o conteúdo principal em 1o lugar?Como manter um código limpo nessas condições?   
  3. 3. Poupando o servidor localStorage para encantar o usuário Escopos Sessão e Lan-house Kizzy para abstrair Exemplos: Tornar-se fã, responder quiz...   
  4. 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. 5. Exemplo: Escopo de sessãovar 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. 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. 7. QuestõesComo implementar uma rede social com baixo custo?Como entregar o conteúdo principal em 1o lugar?Como manter um código limpo nessas condições?   
  8. 8. JavaScript assíncrono var 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. 9. JS Realmente assíncronoHead.js(”script1.js”, ”script2.js”)Baixando scripts em paralelo, executando em ordemLidando com botões que dependem de scriptsConteúdo principal em primeiro lugar   
  10. 10. Head.jshead.js(”script.js”, function() { console.log(”carregou”) }head.js(”s1.js”, ”s2.js”, function() { console.log(”carregou s1 e s2 em paralelo e executou na ordem”) });head.js(”s1.js”).js(”s2.js”);head.ready(function() { console.log(”carregou s1 e s2 em paralelo e executou em paralelo”) });   
  11. 11. Lidando com Facebookhead.js(”global.js”, ”artista.js”, function() { head.js(”facebook.js”).js(”twitter.js”);});   
  12. 12. QuestõesComo implementar uma rede social com baixo custo?Como entregar o conteúdo principal em 1o lugar?Como manter um código limpo nessas condições?   
  13. 13. Mantendo código limpo Backbone.js Underscore.js Jasmine   
  14. 14. Backbone.js MVC no JavaScript Valeu a pena? Isolamento de views Bind de eventos   
  15. 15. Isolamento de views var 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. 16. Bind de Eventos var 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. 17. Questões Como economizar hardware em uma rede social? Como entregar o conteúdo principal em 1o lugar? Como manter um código limpo nessas condições? O que mais o Head.js me oferece?   
  18. 18. QuestõesComo implementar uma rede social com baixo custo?Como entregar o conteúdo principal em 1o lugar?Como manter um código limpo nessas condições?O que mais o Head.js me oferece?   
  19. 19. Mais do head.js Classes CSS por funcionalidade: webkit root-section js gradient rgba opacity textshadow multiplebgs boxshadow borderimage borderradius cssreflections csstransforms csstransitions fontface domloaded w-1300 lt-1280 lt-1440 lt-1680 lt-1920 Habilita tags HTML5 em todos os browsers: Article, footer, aside...   
  20. 20. Dúvidas e comentários   
  21. 21. Mantenha contatotimotta@gmail.com@timottahttp://programandosemcafeina.blogspot.com   

×