Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
Dinamizando um site estático             Musica.com.br    Rapidez de um site cacheado e a    interatividade de uma rede so...
QuestõesComo implementar uma rede social com baixo custo?Como entregar o conteúdo principal em 1o lugar?Como manter um cód...
Poupando o servidor    localStorage para encantar o usuário    Escopos Sessão e Lan-house    Kizzy para abstrair    Exempl...
localStorage e KizzylocalStorage.setItem(nome, valor)localStorage.getItem(nome)kizzy(namespace).set(nome, valor)kizzy(name...
Exemplo: Escopo de sessãovar Sessao = {                                               function SessaoLista(nome) {  expire...
Exemplo: Perguntas do quizfunction ListaQuiz(disponiveis) {   this.respondidos = new SessaoLista(quiz);   this.disponiveis...
QuestõesComo implementar uma rede social com baixo custo?Como entregar o conteúdo principal em 1o lugar?Como manter um cód...
JavaScript assíncrono    var script = document.createElement(script);    script.type = text/javascript;    script.async = ...
JS Realmente assíncronoHead.js(”script1.js”, ”script2.js”)Baixando scripts em paralelo, executando em ordemLidando com bot...
Head.jshead.js(”script.js”, function() { console.log(”carregou”) }head.js(”s1.js”, ”s2.js”, function() { console.log(”carr...
Lidando com Facebookhead.js(”global.js”, ”artista.js”, function() {      head.js(”facebook.js”).js(”twitter.js”);});      ...
QuestõesComo implementar uma rede social com baixo custo?Como entregar o conteúdo principal em 1o lugar?Como manter um cód...
Mantendo código limpo     Backbone.js     Underscore.js     Jasmine               
Backbone.js    MVC no JavaScript    Valeu a pena?    Isolamento de views    Bind de eventos                       
Isolamento de views    var AlbunsRelacionadosView = Backbone.View.extend({        events: {           "click li.left":    ...
Bind de Eventos    var Login = {       entrou:function() {         //..         this.trigger(entrou);       }    }    _.ex...
Questões    Como economizar hardware em uma rede social?    Como entregar o conteúdo principal em 1o lugar?    Como manter...
QuestõesComo implementar uma rede social com baixo custo?Como entregar o conteúdo principal em 1o lugar?Como manter um cód...
Mais do head.js    Classes CSS por funcionalidade:    webkit root-section js gradient rgba opacity textshadow    multipleb...
Dúvidas e comentários              
Mantenha contatotimotta@gmail.com@timottahttp://programandosemcafeina.blogspot.com                      
Nächste SlideShare
Wird geladen in …5
×

Dinamizando Sites Estáticos

811 Aufrufe

Veröffentlicht am

Slides da apresentação feita no Flisol de Salvador

Veröffentlicht in: Technologie
  • 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”
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier

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   

×