Como ganhei 2,4s no carregamento do meu blog (6ª regra: Coloque os scripts no final da página)

Estava analisando o tempo de carregamento do meu blog pelo Google Analytics, e percebi que estava com um tempo muito alto, e que variava muito dentro de um curto período.

Resolvi dar uma lida no html que meu blog reenderizava, lembrando que no caso do WordPress, o html final depende de vários elementos como: tema, plugins e configurações.

No meu caso, identifiquei facilmente que alguns scripts eram carregado no header da pagina: Continue reading

Crie introduções e guias passo a passo com o Intro.js

Os aplicativos web trazem cada vez mais recursos e features, e, por diversos fatores (usabilidade, falta de informação, etc) muito destes recursos acabam nem sendo utilizados pelos usuários.

Existem diversas formas para demonstrar e guiar o uso de uma aplicação, o Intro.js é uma excelente biblioteca javascript que é utilizada para criar guias passo a passo e introduções de elementos e features de nossos aplicativos.

O Intro.js é composto por um arquivo javascript de aproximadamente 7kb, e de um arquivo de estilo (css) de 3kb, o seu funcionamento consistem em destacar visualmente elementos html que estão marcados com algumas tags especificas, além de criar uma navegação ordenada entre estes elementos. Continue reading

Introdução JSON (JavaScript Object Notation)

Após ter que aprender a utilizar JSON em uma novo projeto, decidi fazer um post sobre esse formato de transmissão de dados. Uma de suas principais vantagens é ser baseado em um subconjunto do JavaScript. Sendo um objeto JavaScript, sua manipulação com JavaScript é mais intuitiva do que, por exemplo, a manipulação de um xml.

JSON (JavaScript Object Notation) é construído em duas estruturas:

* Uma coleção de pares nome / valor. O que pode ser definido como um objeto, registro, estrutura, quadro, dicionário de hash, keyed list, ou vetors associativos.
* Uma lista ordenada de valores. Na maioria das linguagens isto é percebido como um vetor, lista ou sequência.

Sendo uma estrutura de dados a maioria das linguagens modernas possuem um tipo de suporte para o uso do JSON, assim é um dos melhores jeitos de trafegar informações.

Estas estrutiras podem ter os seguintes formatos:

Objeto:

Um objeto é um conjunto não ordenado de pares nome / valor. Um objeto que começa com {(chave esquerda) e termina com } (chave direita). Cada nome é seguido por: (dois pontos) e os pares nome / valor são separados por, (vírgula).

ex:

 

var objeto = { nome1: “valor1″, nome2: “valor2″, nome3: “valor4″ };

alert(objeto.nome1);

//”valor1″

 

Vetor

Um vetor é uma coleção ordenada de valores. Um vetor começa com [(colchete esquerdo) e termina com] (colchete direito). Os valores são separados por, (vírgula).

ex:

var vetor = ["valor1", "valor2", "valor3"];

alert(vetor[1]);

//”valor2″

O valor pode ser uma string entre aspas, ou um número, ou verdadeiro ou falso ou nulo, ou um objeto ou um array. Estas estruturas podem ser aninhadas.

Estruturas aninhadas

ex:

var pessoa = { nome:"Rodolfo", Idade: 20, Sexo: 'M', Certificações:["MCP", "MCTS" , "MCPD"]};

alert( pessoa.Certificações[1]);

//”MCTS”

alert( pessoa.Idade);

//20

var pessoa = { nome: "Rodolfo", Idade: 20, Sexo: "M", Certificações: ["MCP", "MCTS", "MCPD"] };
var certif = "";
for (var item in pessoa.Certificações) {
certif = pessoa.Certificações[item] + " "+ certif;
}

alert(certif);

//”MCP MCTS MCDP”

Uma coisa muito util é o intellisense do js reconhecendo a estrutura

Manipulando via js

ex:

var pessoas= new Array;
pessoas.push(
{ nome: "Rodolfo", Idade: 20, Sexo: "M", Certificações: ["MCP", "MCTS", "MCPD"] }
);

pessoas.push(
{ nome: "Fadino", Idade: 25, Sexo: "M", Certificações: ["MCP", "MCTS", "MCPD"] }
);

pessoas.push(
{ nome: "Junior", Idade: 25, Sexo: "M", Certificações: ["MCP", "MCTS", "MCPD"] }
);

alert(pessoas[1].Certificações);

// “MCP, MCTS,MCPD”

ex:

var pessoas= new Array;
pessoas.push(
{ nome: "Rodolfo", Idade: 20, Sexo: "M", Certificações: ["MCP", "MCTS", "MCPD"] }
);

pessoas.push(
{ nome: "Fadino", Idade: 25, Sexo: "M", Certificações: ["MCP", "MCTS", "MCPD"] }
);

pessoas.push(
{ nome: "Junior", Idade: 25, Sexo: "M", Certificações: ["MCP", "MCTS", "MCPD"] }
);

var pessoa = pessoas.pop();
alert(pessoa.nome);

//”Junior”

var pessoas= new Array;
pessoas.push(
{ nome: "Rodolfo", Idade: 20, Sexo: "M", Certificações: ["MCP", "MCTS", "MCPD"] }
);

pessoas.push(
{ nome: "Fadino", Idade: 25, Sexo: "M", Certificações: ["MCP", "MCTS", "MCPD"] }
);

pessoas.push(
{ nome: "Junior", Idade: 25, Sexo: "M", Certificações: ["MCP", "MCTS", "MCPD"] }
);

alert(pessoas.length);

//3

Bem, espero que tenha sido útil, em breve farei um post sobre Linq to JSON em C#,

Obrigado

Rodolfo