O documento discute como dinamizar um site estático usando localStorage, Kizzy e Head.js para armazenar dados do usuário localmente, carregar scripts de forma assíncrona e manter o código limpo usando MVC e isolamento de views com Backbone.js.
1. Dinamizando um site estático
Musica.com.br
Rapidez de um site cacheado e a
interatividade de uma rede social.
2. Questões
Como 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...
7. Questões
Como 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?
9. JS Realmente assíncrono
Head.js(”script1.js”, ”script2.js”)
Baixando scripts em paralelo, executando em ordem
Lidando com botões que dependem de scripts
Conteúdo principal em primeiro lugar
10. Head.js
head.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”) });
12. Questões
Como 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?
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ões
Como 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...