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                      
Upcoming SlideShare
Loading in...5
×

Dinamizando Sites Estáticos

552

Published on

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
552
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
9
Comments
1
Likes
1
Embeds 0
No embeds

No notes for slide

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   
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×