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

Like this? Share it with your network

Share

Dinamizando Sites Estáticos

on

  • 779 views

Slides da apresentação feita no Flisol de Salvador

Slides da apresentação feita no Flisol de Salvador

Statistics

Views

Total Views
779
Views on SlideShare
778
Embed Views
1

Actions

Likes
1
Downloads
8
Comments
1

1 Embed 1

http://nodeslide.herokuapp.com 1

Accessibility

Categories

Upload Details

Uploaded via as OpenOffice

Usage Rights

CC Attribution-ShareAlike LicenseCC Attribution-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • 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”
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Dinamizando Sites Estáticos Presentation 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