Igor Escobar // Blog

Principalmente nas micro-empresas este é um dilema muito comum e recorrente na cabeça dos pobres desenvolvedores.

Muitas vezes o fator web standards nem é um pré requisito no projeto, acontece que a grande maioria dos programadores que entendem a essência dos Web Standards, gostam e sabem, o motivo da utilização dos padrões no projeto.

O grande problema surge, quando o cliente pede algo “lunar” e nós, desenvolvedores temos que entrar no mundo highlander do cliente e desenvolver soluções a altura.

Acontece que, geralmente, soluções mirabolantes requerem implementações mirabolantes, consecutivamente, o nível de manipulação do documento XHTML por meio de Javascript é alto e muitas informações são expostas na marcação HTML, para que o JavaScript possa se guiar.

Tenho certeza que de todos os meus leitores, pelo menos um! vai se identificar com um caso parecido.

O grande pensamento vem a cabeça:

- O sistema não esta validando, e agora? eu só consigo implementar esta solução desta forma, não consegui pensar em outra forma de implementar, e fazer com que meu código consiga se guiar de maneira eficiente, para manipular este documento.

- Perco mais 1, ou 3 dias pensando em uma nova solução somente para implementar esta solução sob o plano B ou deixo este erro de validação passar e sigo em frente com o cronograma?

Caros amigos, não se desesperem. Já se foi o tempo onde os programadores eram neuróticos por validação.

Isso já cansou de ser dito: - Validar o seu código pela W3C nada mais é do que verificar se o seu código esta “gramaticalmente” escrita de maneira correta, ele estar validado não garante que o seu código será renderizado da mesma forma em outros navegadores.

E entramos no dilêma da guerra dos browsers. Você segue os padrões, mas o browser do seu cliente não, e ai? o que acontece depois ? …

Se você se preocupa com os padrões, ótimo!, Deve!

Colocar em risco o ciclo de vida do projeto por causa de um erro de validação não compensa para você nem para sua empresa, pode ter certeza que se você tiver somente este erro, o seu site/sistema não vai se comprometer ou deixar a desejar para o seu cliente.

Pense muito bem na hora de fazer esta decisão. Se você tem um código 100% validado, ótimo! se você tem próximo a 95% validado, ótimo também!

A grande sacada deste texto é mostrar pra vocês que foi se o tempo onde as pessoas eram loucas e fissuradas pelo validador da W3C. O validador deve ser somente ser usado como parâmetro para verificar a sintaxe do seu código XHTML, muitas coisas podem passar despercebido na correria do desenvolvimento, da mesma forma que muitas coisas podem ser corrigidas sem comprometer o andamento do projeto com a “ajuda” do validador.

Use o validador como uma ferramenta aliada e não como uma ferramenta inimiga.

O W3C é uma organização que documenta “recomendações” e não “obrigações”, existe as recomendações que são extremamente fundamentais para a renderização e comportamento correto em diferentes plataformas, porém, temos que ter um meio termo para tudo.

Links

• Site Oficial da W3C
• W3C - Markup Validator Service
• W3C - CSS Validator Service
• W3C - RDF Validator Service
• Web Standards Group

Espero ter contribuído!
[]’s

Uma ferramenta de suma importância na hora de descobrir o tamanho da sua concorrência é o Google Trends. Com esta ferramenta você consegue medir a massividade das ocorrências no buscador da gigante Google.

A ferramenta funciona da seguinte forma, você coloca as palavras-chaves separadas por vírgula, e o google te retorna gráficos com os dados referentes a estas palavras-chaves.

Massividade

Para melhor fixação, fiz uma pesquisa para com para o player da Apple iPod e o player Zune da microsoft:

iPod - Linha Azul
Zune - Linha Vermelha

Observando o gráfico podemos ver a massividade e o crescimento das informações no decorrer dos anos e claro, a diferença gritante nas buscas entre iPod e Zune.

Tendências

Outro recurso interessantíssimo no Google Trends, é que com os dados que ele disponibiliza podemos ver a repercussão do nosso site, palavra-chave ou produto na internet. O Google Trends disponibiliza gráficos que exibem as regiões e idiomas que as palavras-chaves são afetadas e o quão elas são usadas nas regiões e idiomas afetados.

Se você utilizar esta ferramenta com inteligência, verá a quantidade de benefícios que uma ferramenta dessas pode gerar para você e/ou para sua empresa.

Espero ter contribuído!
[]’s

A AcidDrop lançou recentemente o PHP Speedy, o sistema funciona relativamente simples, tudo o que ele faz é além de comprimir os seus arquivos css, js e html o PHP Speedy agrupa todos eles em um só arquivo e faz a sua compressão.

Se você possui 15 arquivos javascript e 3 arquivos CSS em sua página ele vai unir tudo em 1 arquivo js e 1 arquivo css, além de também comprimir o seu código HTML.

Tudo isso traz benefícios enormes para o seu website ligado a velocidade de carregamento e performance. Além dele carregar até 500% mais rápido ele proporciona os seguintes benefícios:

• Diminui drasticamente as requisições HTTP.
• Adiciona um expire-header mais prolongado aos seus arquivos.
• Gzip os componentes da sua página.
• Minify seus códigos HTMl, JavaScript e CSS.

Como usar?

Basta colocar o código abaixo, no topo do seu arquivo:

E para terminar, coloque o código abaixo, no final do seu arquivo:

Opções Avançadas

No site do autor, também é disponibilizado dois links onde ele apresenta duas versões de um mesmo site, a versão comprimida e a versão não comprimida.

E baseando-se no mesmo site, o autor mostra alguns gráficos comprovando os benefícios do uso do PHP Speedy.

Site de testes antes da compressão

Tempo total de carregamento 3.68 segundos.

Site de testes depois da compressão

Tempo total de carregamento 875 microsegundos.

Agora o autor mostra os beneficios antes e depois do uso do PHP Speedy, os gráficos foram obtidos utilizando o plug-in YSlow da Yahoo!

Antes da compressão

Grade de performace: F(45)

Depois da compressão

Grande de performace: A(97)

Espero ter contribuído!
[]'s

Mais uma ferramenta gratuita que facilita e muito a vida dos desenvolvedores web. Durante muito tempo eu fazia esta otimização manualmente, criando uma sequencia de expressões regulares no Dreamweaver que fazia com que eu obtivesse o resultado parecido porém, o tempo despendido nestas tarefas nem se compara.

Apresento a vocês o Clean CSS.

A ferramenta oferece 5 niveis de compressão do seus arquivos CSS:

• Muito Alta (Sem legibilidade, máxima compressão)
• Alta (Legibilidade Moderada, compressão alta)
• Padrão (Balanceamento entre compressão e legibilidade do código)
• Baixa (Alta legibilidade)
• Personalizada (Permite que você crie um template de otimização)

Recomendações

Recomendo aos desenvolvedores que tenham em mãos duas versões do seu CSS, uma versão com nível baixo de compressão, para facilitar a manutenção do mesmo. Este arquivo deve ser de posse apenas do desenvolvedor.

E um arquivo CSS com o mais alto nível de compressão para ser publicado na internet. Assim o desenvolvedor garante o máximo desempenho do seu site/blog sem comprometer a continuidade do código.

Configurações recomendadas

As configurações passadas acima vale para qualquer nível de compressão, as que estão destacas em vermelho é que devemos ter uma atenção especial.

Resultados

Fiz a otimização do arquivo CSS do blog e veja o resultado que obtive:

Espero que tenha contribuído!
[]'s

Este artigo foi feito especialmente para você, caro designer, programador de respeito que se preocupa como seu site esta sendo exibido em diferentes navegadores.

Se você é realmente essa pessoa, com certeza, já passou por grandes apuros na hora de fazer com que seu site seja renderizado corretamente em todos os navegadores.

De uns tempos para cá tem se visto muito falar nos tais "CSS Resets". Antes de falar o que é o CSS Reset eu vou explicar por quê seu site aparece de um jeito no Firefox e no Internet Explorer de outro (ou vice-versa).

Este problema acontece por que os valores PADRÃO de um navegador para o outro variam, por exemplo, a margem padrão do body pode ser 10px no Internet Explorer e 8px no Firefox. Se você aumentar o numero de tags e possibilidades vai entender que isso acontece não por que o Internet Explorer seja uma bosta (não que não seja ;P) mas sim por que os navegadores dão valores dafaults diferentes para cada tag. Devido a esta falta de padronização de um navegador para o outro, causa a diferença na hora da renderização.

Claro que não são todos. Os navegadores tentam se aproximar um do outro mais sempre passa despercebido uma tag ou outra.

O CSS Reset veio para tentar minimizar estes problemas, o objetivo dele, é resetar todas as propriedades das tags htmls de marcação para que assim não importe de onde você acessa. A margem, a largura etc... sempre vão ser iguais independente do browser que estiver renderizando seu site.

Agora você ficou interessado né? (hehe)
No endereço abaixo você encontra um exemplo do CSS Reset em ação:
http://www.monc.se/tripoli/sample.html

Agora pegue o andereço que eu passei anteriormente e abra em qualquer navegador (IE, FF, OP, NS etc) que você tiver. Se você observar, logo notará não vai ocorrer diferença de posicionamento, margem, formatação, largura, se tiver vai ser insignificante ou seu browser é jurássico.

O Nome deste CSS Reset foi chamado pela MONC de Tripoli

Como posso começar a usar?

Você precisa de 4 arquivos:

• reset.css - reseta todas as propriedades independente do browser
• generic.css - re-constrói e atualiza a forma que o HTML é renderizado pelo navegador
• ie.css - este arquivo contem regras a parte para que o css reset funcione no Internet Explorer.
• print.css - torna o HTML legível quando impresso.

Como devo chama-los no meu cabeçalho?

Exemplo

Espero que tenha contribuído!
[]'s

Pronto!
Agora você só precisa criar o css do seu site e começar a definir as regras do seu layout.
Webtutoriais:B92473D6