Leandro Garcia

Yslow (Porque está devagar) – Como medir performance de carregamento das páginas…

Volto eu aqui para escrever sobre performance de websites.

No mundo atual, as pessoas tem cada vez menos tempo e paciência para esperar por alguma coisa, muito menos se o que devem esperar é uma página ser carregada. Motivo este pelo qual nós, desenvolvedores para internet, devemos pensar na praticidade e velocidade que a página é carregada pelo usuário.

Existem algumas práticas que podem fazer com que seu código mais rapidamente carregado:

Diminua a quantidade de requisições http.

Em cada requisição que um site faz ao servidor, seja qual for (CSS, JS, Imaem, etc), há um trafego de informações, ou seja, sua página envia uma requisição e depois recebe a resposta do servidor, quanto menos requisições você fizer, menor será esse trafego, logo, mais rápido seu site carregará;

Você pode diminuir a rquisição de imagens background através de CSS sprites, já expliquei como fazê-los neste post.

Utilizar o menor número possível de arquivos CSSs, O ideal é usar apenas um, eventualmente um segundo, mas evitar o terceiro, o quarto a todo custo.

Se possível utilizar apenas um arquivo JS.

Cachear a página ou Header Expires

A inconveniência deste é que ele é server-side, ou seja, é feita através do servidor, mas serve para guardar na memória do usuário os arquivos das páginas que ele visitou, ou seja, um re-acesso ao site seria bem mais rápido.

Compressão de componentes (Gzip Components)

Esta é uma outra técnica de redução server-side. Com ela, o servidor entende que deve comprimir (ou “zipar”) os código, os CSSs os JSs e, inclusive o HTML.

Colocar as folhas de estilo no Header

Uma outra maneira eficaz de ganhar tempo no carregamento das páginas é, além de usar uma única folha de estilos, chamá-la de um arquivo externo e através da tag link posicionada dentro do header

Colocar os Scripts na parte inferior

O ideal é colocar os scripts logo antes da tag </body>, pois desta a página é carregada mais rapidamente. Quando o script está no header, a página primeiro carrega o script depois as demais informações, agora quando esle está posicionado abaixo, a página tem toda a informação carregado e só após isso os scripts são carregados.

Evite expressões em CSSs

Embora existam, as expressões em CSS não são a maneira mais eficaz de criar o seu layout, pois exigem demasiado tempo para serem entendidas pelos navegadores.

ex. background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );

Folhas de Estilo (CSS) e Scripts (JS) externo

Evite colocar estilos e scripts em qualquer lugar no HTML, prefira sempre chama-los através de um arquivo externo. CSSs e JSs, são geralmente caheados pelo browser, o que significa que em uma próxima vista o usuário já terá esses arquivos preveamente carregados.

Otimize seus CSSs e JSs.

Quanto menor for seus códigos, menor tamanho eles terão, logo, mais rápido serão carregado.

Neste link, eu escrevi como se pode otimizar os códigos CSSs

Evite redirecionamentos

Evite ao máximo que suas páginas redirecionem para uma outra, pois desta maneira seu usuário terá que carregar duas ou mais páginas ao invés de uma.

Remova scripts duplicados

Remova todos os scripts duplicados, afinal, não há a necessidade de se carregar duas vezes a mesma coisa.

Reduza o número de DOMs

Reduza ao máximo as “firulas” via DOM do seu código.

Iframes

Se necesário for utilizá-los, utilize o menos possível, pois um ifram,e é uma outra página a ser carregada.

Escolha <link> ao invés de @import

Há duas maneiras de se carregar uma folha de estilo externa, através das tags <link> e @import. Prefira sempre a <link>, pois o @import se comporta da mesma maneira como se você colocasse o <link> lá embaixo.

E tem várias outras maneiras.

O Yahoo, disponibiliza um link onde eles explicam maneiras de se melhorar a performance. Além dessas que eu listei acima, há algumas outras. O line é este.

Como verificar como está  o carregamento de meu site?

Não sei dizer quantas maneiras há para se fazer isso, a única que eu conheço, e acredito que a mais eficaz, é o YSLOW (Uái islou)  (Porque está devagar).

O YSLOW, é um complemento para o Firefox que pode ser encontrado neste link.

No Próximo Post eu vou explicar como funciona o Yslow.

• 4 comentários
• Comentar
• Permalink
• Compartilhe

Desabilitar o Enter em um form com Javascript

Recentemente, estive trabalhando em um sistema com cadastros, quando me deparei com um problema, o Enter.

Não podia Permitir que o usuário desse o action do form ao pressionar o enter, geralemente para mudar de campo.

Pesquisei na Internet, achei algumas opções, mas acabei criando a minha do jeito que eu realmente precisava. Cheguei ao script abaixo.

function arrumaEnter (field, event) {
var keyCode = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode;
if (keyCode == 13) {
var i;
for (i = 0; i < field.form.elements.length; i++)
if (field == field.form.elements[i])
break;
i = (i + 1) % field.form.elements.length;
field.form.elements[i].focus();
return false;
}
else
return true;
}

<input onkeypress="return arrumaEnter(this, event)" maxlength="60" name="emitente" type="text" />

Linha a linha

function arrumaEnter (field, event) { - Nome da funcção, que recebe o campo e o evento utilizado

var keyCode = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode; – Recebe o evento utilizado

if (keyCode == 13) { – Se a tecla é o Enter

var i; - Cria a variável

for (i = 0; i < field.form.elements.length; i++) – Roda todos os camposdo form

if (field == field.form.elements[i]) - Se o campo utilizado é o atual

break; Para

i = (i + 1) % field.form.elements.length; – Adiciona 1 ao campo atual

field.form.elements[i].focus(); – Dá um foco no próximo campo

return false; – Retorna Falso, ou seja, não permite o submit

else – Caso contrário

return true; – Permite o Submit

onkeypress=“return arrumaEnter(this, event)” – Chama a função

Veja

download

• 4 comentários
• Comentar
• Permalink
• Compartilhe

Trabalhando com querystring e Javascript

Resolvi escrever o post anterior, pois percebi que algumas pessoas que estão começando com internet ou programação não sabiam o que era. Meu intuito em principio era falar apenas sobre como trabalhar com querystring no javascript.

Quando trabalhamos apenas com a interface de um projeto, ou com um site sem backend, não temos acesso a linguagens Servidor (ASP, JSP, PHP…). Isso se torna um problemão quando nos pedem que determinada página realiza uma ação, como por exemplo um alert, apartir do clique em uma outra página. Ficou confuso? Vou tentar melhorar.

Uma página, vou chamar de teste, ao ser aberta exibe um texto escrito “teste”, e mais nada. Uma segunda página, chamarei de index, exibe um link direcionado para a página “teste”, mas o projeto requer que após o clique no link, ao acessar a página seja exibido um alert dizendo “trabalhando com querystrings”. Como fazer isso? Com querystrings. Como? Utilize  a função abaixo.

function QueryString(variavel){
   var variaveis=location.search.replace(/\x3F/,"").replace(/\x2B/g," ").split("&")
   var nvar
   if(variaveis!=""){
      var qs=[ ]
      for(var i=0;i<variaveis.length;i++){
         nvar=variaveis[i].split("=")
         qs[nvar[0]]=unescape(nvar[1])
      }
      return qs[variavel]
   }
   return null
}

Explicando linha por linha:

function QueryString(variavel){ – define a função com o nome

var variaveis=location.search.replace(/\x3F/,”").replace(/\x2B/g,” “).split(“&”) – cria uma variável onde são pegadas todos itens da query.

var nvar - caria uma variável

if(variaveis!=”"){ - pergunta se a variável que criamos anteriormente com os itens da query tem conteúdo

var qs=[ ] - Cria uma variável array chamada qs

for(var i=0;i<variaveis.length;i++){ – faz um looping para percorrer todas as variáveis encontradas na query

nvar=variaveis[i].split(“=”) – define o valor da variáve

qs[nvar[0]]=unescape(nvar[1]) – define o valor para cada iten do array } - fecha o loop;

return qs[variavel] – retorna o que encontrou. Agora você tem como pegar os itens da query, mas ainda não está funcionando, pois você precisa chamar esta função de alguma maneira. Vou chamá-la através de uma escrita.

<script>
document.write('A query é:' + QueryString('id') )
</script>

A variável id chamada é a que passamos via barra de endereços. Ex.

http://tutoriais.leandrogarcia.com/query/query.html?id=1

Vai ser exibido na tela A query é: 1 Abraços.

• Nenhum comentário
• Comentar
• Permalink
• Compartilhe

Calculadora de Juros

Vira e mexe alguns de nós, por falta de dinheiro ou por displicência, acabamos atrasando o pagamento de alguma conta.

Tinha que pagar o IPTU de minha casa, me esqueci de pagar a primeira parcela e “temendo” ir ao banco acabei atrasando algumas parcelas. Resolvi pagá-las, mas precisava saber quanto, mais ou menos, eu pagaria de juros para que pudesse sacar do banco. Pensando nisso, acabei criando um script que calcula o valor do juros e da mora.

A primeira versão, faz o cálculo de porcentagem, ou seja, você coloca o valor do boleto o valor em porcentagem da multa, o valor em porcentagem da mora e a data data para pagamento. O script calcula quantos meses está atrasado e a partir daí dá o valor que, provavelmente, você terá que pagar. Eu digo provavelmente, pois não conheço muito bem as nuances dessas coisas.

Se por um acaso vocês acharem que os cálculos estão errados e puderem me dizer o porque, eu fico agradecido, assim posso alterar e deixar bem funcional para que todos possamos usá-lo.

Clique aqui para abrir a calculadora

• 7 comentários
• Comentar
• Permalink
• Compartilhe

Como imprimir em Javascript?

Certa vez precisei incluir a funcionalidade de impressão em um sistema. Deveria imprimir um relatório, mas tendo a opção de imprimir ao clicar em um botão.

Pesquisei e encontrei uma fucionalidade em Javascript que faz isso, window.print();

Essa funcionalidade passou a estar disponível a partir da versão 4.0 do internet explorer. Hoje, até  onde sei, está presente em todos os browsers atuais.

Qual é a vantagem desta funcionalidade?

Não obriga o usuário a ir em arquivo -> imprimir ou Ctrl+p. Além desta facilidade, lhe dá mais opções para layout.

Abaixo a função para impressão

<script type="text/javascript">
   function DoPrinting(){
      if (!window.print){
         alert("Use o Netscape  ou Internet Explorer \n nas versões 4.0 ou superior!")
         return
      }
      window.print()
   }

</script>

Esta função deve ser incluída entre as tags header de seu HTML ou em um arquivo externo .js que você deve linkar.

dentro do body

<input type="button" value="imprimir" onClick="DoPrinting" id="botao" />

Legal, mas o botão também foi impresso. Eu não preciso do botão impresso.

Temos como não imrprimir o botão, mas vamos fazer de uma maneira melhor. Vamos configurar o layout de impressão.

Como?

Através de CSS.

<style rel="stylesheet" type="text/css" media="print">
   #botao{display:none}
</style>

Como formatar, vai da sua imaginação.

Abraços

• 11 comentários
• Comentar
• Permalink
• Compartilhe

Flash validado pelo W3C

Buenas, assiduos leitores de de vez em quando….

Boa parte de quem desenvolve interface HTML e se preocupa com a validação do código já se deparou com um problema grave: Minha página precisa conter um arquivo em flash, um vídeo do You Tube, porém isso deixa o código impossível de ser validado. Não mais… Eu lhes trago a solução pra isso.

Há duas maneiras de se fazer isso, um por Javascript, onde você inclue o código na página através de um innerHTML, ou através de um código mais suscinto. Abaixo mostro as três maneiras de se por o código.

A gerada pelo flash e o Youtube, porém errada.

<object>
<param name="movie" value="http://www.youtube.com/v/izSOrOmxRgE"></param>
<param name="wmode" value="transparent"> </param>
<embed src="http://www.youtube.com/v/izSOrOmxRgE" type="application/x-shockwave-flash" wmode="transparent" width="390" height="321"> </embed>
</object>

A Gerada por innerHTML

function iniciaFlash(){
var flash = “<object id=’imgflash’ width=’514′ height=’250′ align=’middle’ codebase=’http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0′ classid=’clsid:d27cdb6e-ae6d-11cf-96b8-444553540000′>”+
“        <param value=’sameDomain’ name=’allowScriptAccess’/>”+
“        <param value=’images/imgflash.swf’ name=’movie’/>”+
“        <param value=’high’ name=’quality’/>”+
“        <param value=’#324b2e’ name=’bgcolor’/>”+
“        <param value=’transparent’ name=’wmode’/>”+
“        <embed width=’514′ height=’250′ align=’middle’ pluginspage=’http://www.macromedia.com/go/getflashplayer’ type=’application/x-shockwave-flash’ allowscriptaccess=’sameDomain’ name=’imgflash’ bgcolor=’#324b2e’ quality=’high’ src=’images/imgflash.swf’/>”+
“</object>”
document.getElementById(”imagensflash”).innerHTML = flash;
}

Dentro da função iniciaFlash, crio uma variável com os dados do flash e incluo dentro da div que tem o id “imagensflash”.

Após isso inicio a função dentro do onload do body.

<body onLoad=”iniciaFlash()”>

E a mais simples e talvez a melhor.

<object type=”application/x-shockwave-flash” data=”arquivo.swf” width=”390” height=”321“>
<param name=”movie” value=”arquivo.swf” />
</object>

Agora você pode escolher a que melhor se encaixar no seu projeto.

Abraços e até o próximo Post.

• 8 comentários
• Comentar
• Permalink
• Compartilhe

Função para abertura de pop-up

Esta é uma função simples que criei tem algum tempo e utilizo sempre que preciso abrir algum tipo de Janela em formato pop-up.

Eu poderia utilizar uma função específica para cada tipo de pop-up, mas pesem: Se um site tiver links para abrir 5 pop-ups, seria 5 códigos diferentes, ou seja, como resultado o dódigo da página seria maior e a necessidade de ampliar a bande de acesso ao site poderia aumentar.

A função:

<script type=”text/javascript”>

function abre(caminho,largura,altura,rolagem){
w = largura;
h = altura;
rol = rolagem;
largura = screen.width;
altura = screen.height;
XX = (largura-w)/2;
YY = (altura-h)/2;
janela = window.open(caminho,nm_janela, ‘width=’+w+’, height=’+h+’, left=’+XX+’, top=’+YY+’menubar=no, toolbar=no,status=no,scrollbars=’+rol+’,');
janela.focus(); }

</script>

Vamos ver linha a linha como funciona.

Linha 1

function abre(caminho,nm_janela,largura,altura,rolagem){

Esta linha é onde se inicia a função, ou seja, é o nome da função e as variáveis que ela utiliza (caminho,largura,altura,rolagem).

As linhas 2, 3 e 4, nestas linhas eu coloco o conteúdo das variáveis que eu recebi via função em uma variáel que com um nome de minha preferência. Não há a necessidade de iniciar essas variáveis, uma vez que eu poderia usar os nomes que vem entre os parênteses, mas a títuli de clareza das informações, eu prefiro utilizar.

As Linhas 5 e 6 iniciam as variáveis largura e altura com o tamanho da tela de pessoa que está acessando o site utiliza. ex. 1024×768 px

Linhas 7 e 8, estas linhas são a chave para que a pop-up seja aberta centralizada na tela. É iniciada as variáveis XX e YY com a largura(altura) – a largura(altura) que você enviou via função w(h) e divide por 2.

Linha 9 inicia a veriável que abrirá a pop-up, mais uma vez, eu não precisaria iniciar a variável, bastaria que eu escrevesse o caminho depois do igual, mas para deixar o código claro, prefiro iniciar a variável.

window.open = abre a janela

caminho, esta é a variável recebida via função. Ex. “www.leandrogarcia.com/blog”

nm_janela, está é uma outra variável reebida pela função que diz qual é o nome da Janela, é o que dirá se você clicar em um outro link com esta função se deve abrir a nova página na Janela já aberta ou em uma nova. Ex. nm_janela = um, abre uma Janela; segundo clique, nm_janela = um, abre por cima da outra janela. nm_janela = dois, abre uma nova janela

width=’+w+’, é a largura da Janela

height=’+h+, é a altura da Janela

left=’+XX+’, é onde o browser entede que deve centralizar a abertura da Janela horizontalmente

top=’+YY+’, é onde o browser entede que deve centralizar a abertura da Janela verticalmente

menubar=no,toolbar=no,status=no, diz ao browser para não exibir a barra de menus, de ferramentas e a barra de status.

scrollbars=’+rol+’, diz ao rowser se haverá barra de rolagem, yes, no e auto (eu defini como variável da função, pois posso dizer se vai ou não ter barra de rolagem, mas poderia ter iniciado com yes, no ou auto.

e por último, janela.focus(); é onde o browser recebe a ordem de excutar a variável janela

Legal, coloquei esta função no meu site, como eu faço para executála?

Simples, você chama ela via link. Ex. <a href=”javascript:abre(‘http://www.leandrogarcia.com/blog’,'blog do Garcia’,’500′,’500′,’no’);”>Abrir Janela</a> ou, <a href=”#” onClick=”abre(‘http://www.leandrogarcia.com/blog’,'blog do Garcia’,’500′,’500′,’no’);”>Abrir Janela</a>

A função descrita deve ser colada entre as tags <head> e </head> do seu html, ou chamada externamente, mas isso deixa pra uma outra hora.

Espero que esta Função Ajude.

• 2 comentários
• Comentar
• Permalink
• Compartilhe