Planejamento do Site (2) - Dois itens obrigatórios em sua caixa de ferramentas.

Planejar um website para o sucesso, ainda que seja um blog simples como este, requer algumas ferramentas de software. Algumas são obrigatórias, outras são opcionais que podem facilitar muito a manutenção da qualidade do site, principalmente à medida que ele for crescendo.

Alerta: Quanto aos programas de SEO (SEO Softwares) é preciso MUITO cuidado e critério para utilizá-los. A maior parte dos softwares disponíveis, na melhor das hipóteses, são simplesmente inúteis. Na pior, podem ter efeito contrário ao desejado: usam táticas black-hat, enchem sua página de código inútil e o induzem o Google penalizar seu site por prática de spam-dexing.

Vamos começar com o kit básico: editores de html e navegadores web.

Editores de HTML:

Se você usa um serviço público de blogs, como o blogger, ele mesmo já oferece editores básicos de html e templates (modelos de páginas que podem ser adaptadas para personalização). Esses editores e templates são muito bons se o objetivo do seu blog, como o deste aqui, se limitar a publicações de texto, algumas imagens estáticas e você não pretende se aprofundar em técnicas de programação e webdesign.

Cedo ou tarde, porém, a maior parte dos blogueiros deseja personalizar o visual dos seus blogs. É um desejo justo, pois, como dissemos no post anterior, o design funciona como o cenário de uma peça de teatro: destaca e dá mais brilho ao conteúdo. É nesse momento que suas necessidades se igualam às de um webdesigner.

Praticamente todos os softwares editores de textos e apresentações oferecem a opção de salvar documentos em formato html e, inclusive, oferecem alguns templates bastante práticos para quem está começando a se aventurar no design de páginas web. A desvantagem está no fato de que esses programas não são primariamente projetados para webdesign e, portanto, seus recursos são muito limitados. É muito difícil obter páginas web com aparência minimamente profissional usando esses programas.

Uma opção mais avançada, usada por profissionais, são os programas de webdesign WYSIWYG (sigla para “what-you-see-is-what-you-get” – “o que você vê é o resultado que você obtém”), como o Microsoft Front-Page e o Adobe Dreamweaver. Esses softwares oferecem interfaces amigáveis que, teoricamente, permitem ao designer distribuir os elementos na página sem que o desingner precise se preocupar com programação.

Note que eu disse “teoricamente”. De fato, nenhum programa de webdesign é 100% WYSIWYG. o que esses programas fazem é interpretar as suas ações na tela do computador e transformá-las em código. Nem sempre eles “entendem” corretamente o que você quis fazer e deixam “sujeira” no código de sua páginas. O resultado é um site mais lento, pesado e cujas páginas não são exibidas do jeito que você pretendia.

No fim das contas, os softwares de design com tecnologia mais avançada que existem continuam sendo os editores de textos mais simples, como o bloco de notas do Windows! Cedo ou tarde, não importa a tecnologia empregada na criação de sua página, você terá que revisar o código html linha por linha, para “limpar” os bugs na exibição de sua página. Textos que se sobrepõem a imagens, links e parágrafos que aparecem em fontes diferentes das que você escolheu, imagens que aparecem no “lugar errado”, todos esses são problemas que só podem ser resolvidos corrigindo o código-fonte de sua página em um editor de textos. Isso nos leva ao segundo item obrigatório em sua caixa de ferramentas.

Navegadores Web:

Um outro tipo de problema mais sutil, ainda ignorado por mais de 90% dos webdesigners é a incompatibilidade do código de sua páginas com certos navegadores. Por exemplo, o seu site aparece perfeito no Internet Explorer 6 mas fica horrível no Internet Explorer 7.

Não, não é maldade da Microsoft. Se você visualizar o mesmo site no navegador Mozilla Firefox ou no Opera, vai encontrar os mesmos defeitos de visualização... Ou outros ainda piores.

Qual é a causa do problema?

A resposta não é simples. O HTML não é exatamente uma “linguagem de programação”, pois você não cria “softwares” em html. Na verdade, o html é uma linguagem de comunicação com o navegador web (web browser), ele sim um software. Através do código html, você informa ao browser qual é a fonte do texto, tamanho do título, posicionamento das imagens e parágrafos, etc. O software do browser usa essas informações para desenhar (“renderizar”) as suas páginas na tela do computador.

O Internet Explorer, até a versão 6, era um navegador muito “flexível” na interpretação dessas instruções, com uma faixa de tolerância muito larga para códigos mal-escritos.

Essa tolerância não era por acaso. Afinal, seria contraditório exibir incorretamente no Internet Explorer uma página gerada no Microsoft Word, no PowerPoint ou Front-Page. O navegador da Microsoft tinha que ser compatível com os bugs de codificação html dos próprios softwares da Microsoft.

Isso não era um problema para os webmasters enquanto o Internet Explorer detinha praticamente o monopólio do mercado de navegadores, após a derrocada da Netscape. Se você fizesse um site com boa visualização em Internet Explorer, ele seria bem visualizado por quase 100% dos usuários de Internet e podia ignorar os poucos “nerds excêntricos” que usavam outros navegadores.

Mas essa babel de códigos mal-escritos não poderia durar para sempre. O esforço de padronização da programação para a web empreendido pela W3C encontrou eco no projeto Mozilla com seu excelente navegador Firefox. O Firefox é um navegador muito pouco tolerante com código mal-escrito e segue estritamente as regras de padronização da W3C.

Com a crescente popularização do Firefox como navegador preferido de um número cada vez maior de internautas, aquelas “lindas” páginas web criadas no Microsoft Word expuseram ao mundo todos os seus defeitos de codificação. Por mais que a Microsoft quisesse ignorar as normas W3C, ela se viu forçada a adotá-las na versão 7 do Internet Explorer, sob ameaça de desaparecer do mercado ante o avanço do Firefox... Inclusive porque a versão 8 do navegador Netscape ameaçava ressurgir das cinzas ao oferecer a opção de visualizar qualquer página web “à moda Internet Explorer” ou “à moda Firefox”.

Portanto, seja você um webdesigner profissional, um blogueiro que quer criar o próprio template, um empresário que mantém um website institucional ou comercial, você PRECISA fazer o download, instalar e testar a visualização de seu site em todos os navegadores. Se a codificação de suas páginas não estiver 100% de acordo com as normas W3C, muito em breve seu site vai se tornar “invisível” para a esmagadora maioria dos usuários, à medida que cada vez mais internautas migrarem para o Internet Explorer 7, Firefox e Opera. Confira no gráfico abaixo a participação de mercado dos diferente navegadores em Dezembro de 2006 e coloque a barba de molho...