O IETester em sua versão 0.2.2 é um navegador que permite testarmos como nossos sites estão sendo renderizados pelos IE6, 7 e 8 Beta1.

Achei a alternativa muito mais interessante que o Multiple IE, mais simples por não ter que abrir várias janelas diferentes, você pode abrir uma aba renderizando cada versão do IE.

Não testei contra virus, adware, etc… portanto baixem por sua conta e risco, como eu fiz e todos aqui no trabalho.

Bom, sem enrolar muito peguem ai o IETester v0.2.2

Categories: Browsers, Novidades, WebStandards
7 Comentarios »

Muita gente por ai prega webstandards muitas vezes sem saber o que é.
Independente da palavra em si que serve meramente como referencial, como já disse, as favas com brigas por defender terminologia, chega de fanáticos tecnológicos.
Me empolguei
Voltando ao tema, webstandards não é somente um código xhtml limpo e validado na W3C, o conceito vai muito além, mas eu costumo dizer que para fazer um site corretamente é preciso trabalhar com camadas, lembram as camadas do Photoshop? Certo, nada a ver, mas serve para visualizar o que seria.
As chamadas camadas no desenvolvimento para web são 3, apresentação, comportamento e conteúdo, sendo a última a mais importante, por trazer toda informação contida no site.
Rapidamente vou explicar como funciona cada uma dessas camadas.

Conteúdo

Como escrevi algumas linhas acima esta é a camada mais importante de todas, o conteúdo é o que motiva uma pessoa a acessar um site, o site pode ser feio, lento, mas tendo um conteúdo bom, o visitante retorna, claro, tendo um outro site com conteúdo tão bom quanto o primeiro, mas bonito e rápido de acessar o visitante certamente não pensará duas vezes em abandonar o site bom, mas feio.
Logo, o conteúdo é o mais importante, mas o design também conta e muito.
Para desenvolver essa camada você usará linguagens de marcação de hipertexto, como HTML ou XHTML.
Definido o layout, a montagem do seu site deve começar aqui, não é uma regra, seu site não explodirá se usar outra ordem, mas é o aconselhável.
Digo isso porque antes de começar a pensar na parte visual, devemos estruturar a forma como será exibida a informação a fim de evitar misturar as camadas.
Será difícil porque o layout vai ficar na sua cabeça louco para aparecer na tela, mas resista, pense primeiro na estrutura, lembre-se de definir o que é importante no conteúdo com as tags devidas, isso facilita a acessibilidade, usabilidade, indexação nos mecanismos de busca e ainda facilitará a implementação da parte estética do site, da camada de apresentação.

Apresentação

Como o próprio nome diz e vocês devem imaginar, essa camada diz respeito a forma como o site é exibido na tela, é a parte visual, é aqui que vamos definir as propriedades visuais dos elementos da página com o tão famoso CSS
Lembrem-se menos as vezes é mais, e a ordem do dia aqui é simplicidade, muita gente gosta de montar um CSS cheio de código proprietário, como por exemplo o “filter” da Microsoft, lembrem-se que isso afeta a experiência e a acessibilidade do seu visitante.
Hacks não são proibidos, mas não são também recomendados, fuja de todos se possível, se não for, use o mínimo, prefira os comentários condicionais para carregar um css a parte do principal somente com os ajustes.
Fuja da coceirinha, é, quem nunca durante a montagem do HTML não sentiu coçar a mão para definir alguma propriedade do elemento diretamente nas tags html, parecia tão mais simples, tão fácil, até se lembrar que um dia aquilo vai precisar de atualização, não misture as camadas, o html diz respeito somente a camada de conteúdo, caso contrário você certamente no futuro se perderá no próprio código.

Comportamento

Muita gente adora essa camada, é a parte das ditas “frescuras”, aqui a linguagem normalmente utilizada é Javascript interagindo com o esqueleto do site, com o HTML, com a árvore de elementos do HTML, para os íntimos simplesmente DOM.
Essa camada tem má fama pelo uso exagerado por parte de alguns desenvolvedores dos recursos que oferece, é também por ser a única das 3 camadas dispensável, seu site pode tranquilamente viver sem ela
Um exemplo de código javascript que interage com a DOM:

document.getElementById(id)

Esse código seleciona algum elemento da árvore DOM para ser manipulado.
Nesta camada que surgem efeitos muito vistos em alguns sites, como o esmaecimento de textos, imagens que somem, aparecem, que mudam de lugar, validação de formulários, a sugestão aqui é o bom senso como sempre.
Essa camada é importante por melhorar a forma de interagir como o visitante do site, mas os recursos usados em excesso ou de forma errada, podem afetar a acessibilidade e a boa experiência do usuário.

Para finalizar, não esqueça o principal, teste no maior número possível de browsers o seu site, garanta a acessibilidade do mesmo e a felicidade do seu visitante, tem coisa mais chata do que entrar em um site escrito:

Melhor visualizado na resolução 800×600, com Internet Explorer, monitor Samsung, e sentado inclinado ligeiramente a direita.

Hoje uma mensagem dessas pega muito mal, mas seja sincero, quem aí que desenvolvia no tempo das trevas da internet nunca usou esse recurso extremamente agradável.

Categories: Acessibilidade, Desenvolvimento, Usabilidade, WebStandards
2 Comentarios »