Páginas

terça-feira, 3 de abril de 2012

8 fazes do planejamento de sites

Sei que muitos Web Designers que iniciam na carreira de 
Freelancers têm inúmeras dúvidas quanto à organização e planejamento de um projeto, bem como suas fazes. Por isso, resolvi escrever esse post e um slide sobre as principais etapas de um planejamento de websites.

Bons estudos!

segunda-feira, 23 de janeiro de 2012

SEO - Otimização de Sites - Desempenho - Parte 2

Desempenho na prática: Comprimindo arquivos no servidor e habilitando o cache

Este artigo é de nível avançado e está dividido em duas partes: 
  1. parte prática(que é esta), onde será mostrado como configurar o servidor para melhor desempenho de um site
  2. breve explicação de alguns termos e técnicas de desempenho para Search Engine Optimization (SEO) ou Otimização de Sites para Mecanismos de Busca


Primeiro deve-se habilitar os seguintes modos no servidor Apache:
  • Daflate "mod_deflate";
  • Expires "mod_expires".
  • Hearders "mod_headers";
Depois abrir o arquivo ".HTACCESS" e adicionar as linhas de código abaixo:

Compressão de arquivos

# Início da compressão de arquivos
<ifModule mod_deflate.c>
  AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml application/xhtml+xml text/css text/javascript application/javascript 
application/x-javascript image/png image/jpeg
</ifModule>
# Fim da compressão de arquivos

Cacheamento e optimização dos arquivos estáticos

# INÍCIO Expire headers
<ifModule mod_expires.c>
  ExpiresActive On
  ExpiresDefault "access plus 5 seconds"
  ExpiresByType image/x-icon "access plus 2592000 seconds"
  ExpiresByType image/jpeg "access plus 2592000 seconds"
  ExpiresByType image/png "access plus 2592000 seconds"
  ExpiresByType image/gif "access plus 2592000 seconds"
  ExpiresByType application/x-shockwave-flash "access plus 2592000 seconds"
  ExpiresByType text/css "access plus 604800 seconds"
  ExpiresByType text/javascript "access plus 216000 seconds"
  ExpiresByType application/javascript "access plus 216000 seconds"
  ExpiresByType application/x-javascript "access plus 216000 seconds"
  ExpiresByType text/html "access plus 600 seconds"
  ExpiresByType application/xhtml+xml "access plus 600 seconds"
</ifModule>
# FIM Expire headers

# INÍCIO Cache-Control Headers
<ifModule mod_headers.c>
  <filesMatch "\.(ico|jpeg|png|gif|swf|jpg|)$">
    Header set Cache-Control "public"
  </filesMatch>
  <filesMatch "\.(css)$">
    Header set Cache-Control "public"
  </filesMatch>
  <filesMatch "\.(js)$">
    Header set Cache-Control "private"
  </filesMatch>
  <filesMatch "\.(xhtml|php|html|htm)$">
    Header set Cache-Control "private, must-revalidate"
  </filesMatch>
</ifModule>
# FIM Cache-Control Headers
# INÍCIO Turn ETags Off, pois o modo expires está ativo
FileETag None
# FIM Turn ETags Off

Ferramentas para testar o desempenho dos sites

WebPageTest

A ferramenta WebPageTest oferece um completo relatório sobre o desempenho das páginas. O mais interessante é que pode-se criar uma conta e ver o histórico dos testes, para depois comparar os resultados.

Pingdom

A ferramenta oferece um ótimo elatório de desempenho e mostra em percentual algumas métricas de desempenho.

Pagespeed

Está ferramenta foi desenvolvida pelo Google e é a principal usada para testes de desempenho dos sites.

Testar HTACCESS on line


Referências Externas

  1. Blog do Celso Junior - Hacks para HTACCESS 
  2. Forum - Como otimizar o Apache com o mod_deflate 
  3. Melhorar as velocidades de carregamento 
  4. Aumentar a performance do site (em inglês) 
  5. Compressão de arquivos com Gzip 
  6. Vídeo Aula – Sistema de Cache com PHP no Linux 
  7. Cache para arquivos php, imagens, javascript e html (em inglês)

segunda-feira, 24 de outubro de 2011

Desenvolvimento de site - Parte 5 - Vídeo Aula

Neste post, especialmente, preparei uma vídeo aula onde vamos aprender a criar a Folha de Estilo (CSS) no Dreamweaver e a estruturar a página HTML para receber os conteúdos como imagens,
Related Posts Plugin for WordPress, Blogger...