Deu bug no layout?

Quem nunca passou por esse problema? 

É incrível como há diferenças de interpretação nas CSS dentre diversos navegadores.

Mas existem meios de não ficarmos às escuras disso tudo.

CSS Reset:

Primeiro de tudo é preciso ter boas práticas de CSS. Se adquirirmos maus ensinamentos, fazendo gambi em todo o documento, é bem provavel que teremos muito mais problemas de compactibilidade entre os navegadores do que se adotarmos uma. Existem várias práticas para um "CSS Reset", há um post no blog do Tableless falando um pouco sobre o assunto. Particularmente, eu costumo utilizar apenas o reset dos atributos margin e padding de todos os elementos, como mostra o código a seguir, bem simples.

* {margin: 0; padding: 0;}

Browsershots.org:

Aqui você pode selecionar vários tipos de navegadores rodando no sistema operacional de sua escolha para aplicar seus testes, vai demorar em média 5min para tirar seus screenshots, mas ao menos você saberá como acabou ficando nos navegadores/SO's selecionados.

Internet Explorer, a maior dor de cabeça de todo o mundo:

É uma complicação para instalar mais de uma versão do Internet Explorer na mesma máquina. Por causa disso, existem um grupo de desenvolvedores que estão trabalhando em um único navegador, com a única finalidade de testar as páginas escolhendo em qual versão do IE você quiser. O IETester, atualmente em sua versão 0.3 ja permite abrir abas de IE5.5, 6, 7 e 8RC1.

Adorei este software pois ele não simula somente a interpretação de CSS e HTML, mas também toda a engine de Javascript dos respectivos IE's.

Enfim, a boa notícia é que você pode corrigir seu layout. A má é que isso vai dar um pouco de trabalho. :)

Infelizmente não existe fórmula mágica.

ExtJS: O que é bom, é opensource

A ExtJS é uma grande biblioteca escrita em Javascript para auxiliar na construção RIAs.

Com ela você é capaz de fazer formulários, validação, listagem em tabelas, User Interface, janelas dentro da aplicação, mensagens de diálogo, abas de navegação, campos de data, entre outros.

Não é necessário pesquisar por nenhum plugin de terceiros para você ter um certo componente funcionando como o esperado. Esta biblioteca é super completa.

O Combobox dela, por exemplo, é o componente do qual mais gostei. Veja aqui um exemplo dele em execução.

Seus códigos em lado servidor ficam mais limpos; a aplicação se torna mais intuitiva; o risco de bugs é menor; funciona perfeitamente nos browsers mais utilizados; e o melhor: tudo isso de graça. 

Para saber mais sobre ExtJs, visite o site oficial.

Firefox: Add-ons úteis para desenvolvedores

Veja abaixo alguns Addons selecionados para desenvolvedores:

Firebug: Com certeza, um dos melhores addons para o Firefox. Veja detalhes sobre todas as requisições HTTP (incluindo Ajax); depure HTML, CSS, Javascript; execute códigos diretamente na página e muito mais.

Web Developer Toolbar: Desativar Javascript e Cache são um dos seus maiores diferenciais; Você ainda pode checar todos os elementos de sua página; Redimensionar o navegador precisamente; Adicionar e editar seus Cookies; Validar HTML e CSS; etc.


ColorPicker: Descubra todas as cores utilizadas em uma página-alvo com este addon. É permitido copiar a definição da cor selecionada em diversos formatos (RGB, hexadecimal)




User Agent Switcher: Permite trocar o "User agent" do navegador com um simples clique.

Prós: Você não precisa mais abrir diversos navegadores para fazer seus testes.
Contras: A troca de User agent não afeta em nada na renderização das páginas.

ShowIP: Veja o IP, Whois, timing, traceroute, ip2country da página que estiver navegando e muito mais.

Os melhores plugins da jQuery

Se você é da área de Desenvolvimento Web, provavelmente já tenha utilizado, ou ao menos ouvido falar, na jQuery.

Um dos maiores benefícios desta biblioteca escrita em Javascript - além de ser robusta e lhe poupar muito trabalho em várias rotinas, de AJAX, por exemplo - são os seus mais diversos plugins.

Veja a seguir alguns dos plugins mais utilizados que selecionei. Verifique em cada um dos links as informações sobre como utilizá-los, em geral, por fazerem parte desta grande biblioteca, seu uso é bem fácil.

Opções para galeria de fotos:

• lightBox v0.5
• thickbox v3.1
  
• jqGalScroll v2.1

Tooltips:

• Tooltip inline via HTML (Inline HTML Tooltip)
  
• Tooltip via ajax (Ajax Tooltip script)
  

Outras utilidades:

• Validação de formulários (validate)
• Autocompletar (autocomplete)
• Cantos customizáveis (corner)
• Upload de múltiplos arquivos (multiFile v1.29)
• Aplicar máscara em inputs (maskedinput)
  
• Editor de texto avançado - WYSIWYG (FCKEditor)
• Pegar uma data por um calendário (datePicker)

Se quiser sugerir algum outro bom plugin, sinta-se à vontade para comentar!

Dicas para melhorar posicionamento e indexação no Google

Existem vários fatores que influenciam no posicionamento do seu website nos resultados dos buscadores. Mas alguns deles são excenciais para um melhor posicionamento, tentarei passá-los para você de uma forma bem simples e direta:

• Título: Crie títulos descritivos, não com apenas o título propriamente dito do seu website. Se você está na area de "Contato", por exemplo, Utilize: "Meu título - Entre em contato". Lembrando que são lidos apenas os 60 primeiros caracteres, então, não ultrapasse.
  Exemplo: <title>Tecnologia à tona - Dicas de SEO</title>


• Descrição: Nunca se esqueça de utilizar a meta tag "description". O conteúdo dela deve alguma ligação com o da sua página em si. Utilize também descrições diferentes para cada página no seu site.
  Exemplo: <meta name="description" content="Saiba como melhorar o posicionamento e aprimorar a indexação do seu website nos buscadores." />
  


• Palavras-chave: Utilize palavras-chave que existam no conteúdo da sua página; Crie palavras-chave diferentes para cada página do seu site. Se o seu assunto mudar, o mínimo que seja, de uma página para a outra, você ja tem motivos para adicionar alguma palavra, ou retirar outras; Suas palavras devem ser, obrigatóriamente, separadas por vírgula; É preferível utilizar todas as letras em minúsculo, porém não existe uma regra para isto;
  Muitas keywords não significam que seu site será encontrado facilmente, você deve selecioná-las com cuidado. O limite é de 120 caracteres (contando espaços e as vírgulas)
  Exemplo: <meta name="keywords" content="seo, dicas, marketing online, google, marketing de busca" />


• HTML semântico: Basicamente utilize tags html corretamente nos seus devidos lugares. Utilizar tableless é um bônus. Leia um pouco mais sobre o assunto neste artigo da Tableless
  Exemplos: <strong> para frases em destaque;
  <h1> para o título principal; <p> para parágrafos; atributo alt nas imagens (<img src="..." alt="Assunto da foto" />).


• Robots.txt e sitemap: Deixe sempre na raiz do seu site um arquivo chamado "robots.txt", e permita que ele acesse o(s) seu(s) sitemap(s).
  Exemplo:
  

  
  

  User-agent: *
  Allow: /sitemap.xml
  Disallow: /administrador

  
  

  
  Gere o seu sitemap automaticamente aqui, e o seu robots.txt aqui.

De otimizações manuais, estes são os pontos mais importantes. Também deve-se levar em conta que quanto maior o número de sites que apontam para o seu, melhor vai ser o seu posicionamento e o seu pagerank no Google.

Você ja ouviu falar no Google Webmaster tools? Vale a pena você participar lá. Completamente em português, ele te dará ainda mais algumas dicas, lhe informará sobre todas as palavras-chave realmente presentes no seu site e muito mais.
Basta você confirmar a autoridade do site fazendo upload de um arquivo HTML via FTP para o seu servidor, ou optar pela forma mais simples: adicionando uma meta tag de verificação.

Se você tem um blog, também é interessante adicionar a URL do seu RSS nos sitemaps desta ferramenta para Webmasters.

Analise e otimize o seu website

Atualmente otimização de um website é algo muito importante, tanto para o diminuir o tempo de carregamento, quanto para economizar na carga do seu servidor.
Como todo webdeveloper que preste, você precisará do Firefox instalado na sua máquina.

Um dos melhores recursos do Firefox, no ponto de vista do desenvolvedor, é a vasta quantidade de add-ons disponíveis para integração à este navegador, como IRC, buscador de cores, etc.

Chega de introdução e vamos ao assunto do post em si.
O add-on que ajuda a analisar e manipular todas as requisições, HTML, CSS, Javascript, rede e DOM, ja é bem conhecido pelos desenvolvedores, e você também ja deve conhecer: chama-se Firebug.

Mas a novidade agora é um outro add-on que é integrado ao próprio Firebug: chama-se YSlow. Desenvolvido pela Yahoo!, este add-on além de lhe mostrar um relatório super completo com vários tópicos do que pode ser otimizado na página analisada, ainda lhe mostra vários links com as informações necessárias para você conseguir colocar em prática esta otimização.

Na documentação da OpenSocial do Google (logo postarei mais sobre o assunto), eles estão indicando esta ferramenta para analisar as aplicações na plataforma.

Bom trabalho, porque o caminho não é muito curto! :)