Your SlideShare is downloading. ×
Dinamizando Sites Estáticos
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Dinamizando Sites Estáticos

522

Published on

Slides da apresentação feita no Flisol de Salvador

Slides da apresentação feita no Flisol de Salvador

Published in: Technology
1 Comment
1 Like
Statistics
Notes
  • 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
No Downloads
Views
Total Views
522
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
8
Comments
1
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Dinamizando um site estático Musica.com.br Rapidez de um site cacheado e a interatividade de uma rede social.   
  • 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. 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. 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 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. 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. 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. 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. 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. 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. Lidando com Facebookhead.js(”global.js”, ”artista.js”, function() { head.js(”facebook.js”).js(”twitter.js”);});   
  • 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. Mantendo código limpo Backbone.js Underscore.js Jasmine   
  • 14. Backbone.js MVC no JavaScript Valeu a pena? Isolamento de views Bind de eventos   
  • 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. 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. 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. 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. 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. Dúvidas e comentários   
  • 21. Mantenha contatotimotta@gmail.com@timottahttp://programandosemcafeina.blogspot.com   

×