Melhorando a performance do seu site com a nova ferramenta do Yahoo!

O Yahoo! lançou na semana passada o smush it! uma ferramenta para auxiliar desenvolvedores a reduzir o peso das imagens, e assim otimizar o carregamento de seus sites, tornando-os mais leves. Não parece nada demais para programadores de interface que sabem (e precisam lidar com) o Photoshop, já que nele o comando “Save for the web” ou o querido CRTL + ALT + SHIFT + S, ajuda a escolher a versão mais reduzida da imagem.

Mas a vantagem do smush it!, é que segundo seus desenvolvedores, apesar de já exisitirem vários editores que otimizam o tamanho do arquivo da imagem, ainda ficam uma tonelada de dados extras (e inúteis) no arquivo. Por exemplo, informação sobre a data de edição ou criação do arquivo, o nome do editor utilizado, etc. – que são os dados que o smush it! vai remover.

Nessa aplicação web, as imagens, enviadas através de uma url ou por upload, são otimizadas e disponibilizadas para o download novamente. Uma grande sacada é que se pode enviar várias imagens de uma vez, e depois baixá-las com um arquivo único zipado.

Quando a foto é otimizada, aparecem os percentuais de redução. Nos testes que fiz, variaram de 2% a 48% de acordo com a imagem. Mesmo para os valores mais baixos, parece compensar passar as imagens pelo Smuthit, considerando que pra sites grandes, diminuir qualquer 2% do peso de cada imagem, já é um grande otimizador de performance. É legal comentar que em todos os testes que fiz, não houve perda da qualidade da imagem.

Tela de resultado do smush it!

O smush it! também tem uma extensão de Firefox, que cria um ícone na barra de status do navegador. Quando se está em um site, basta clicar com sobre o ícone, e ele irá abrir o smush it em uma nova aba, carregando todas as imagens da página, sendo “smushadas” e com o link para o download do .zip. Mais fácil que isso não tem né? ;)

Cross Browser: garanta a qualidade do seu site em todos os navegadores

As muitas opções de navegadores aos usuários, se tornam grandes problemas para desenvolvedores de front end, pois precisam lidar com interpretações diferentes de cada browsers, alguns deles que mal seguem os padrões W3C.

Para isso, um site bem feito exige certa validação do css e html em vários desses navegadores, o que torna o trabalho exaustivo. Existem atualmente algumas ferramentas para auxiliar nesse trabalho. Neste post estou trazendo algumas dessa ferramentas:

Serviços Online
1. Browser Shots
Esse site tira uma screenshot de seu site em todos navegadores. O screenshot pode não ser a opção mais atraente, mas é a única (se desconsiderarmos a possibilidade de você instalar todos os browsers e sistemas operacionais possíveis… rs).

2. Markup Validate Service by W3C
Verifica se o código está semanticamente correto, e indica algums erros que costumam ser problemáticos em alguns browsers.

Softwares
1. IE Tester
O IE Tester é uma emulador de IE, que permite abertura de abas de várias versões do IE, desde o 5.5 até o 8. Já que os usuários não abandonam… os desenvolvedores que se ferrem!

2. DebugBar
Da mesma empresa que desenvolveu o IE Tester, a DebugBar é uma espécie de Firebug com Webdeveloper (essas últimas, extensões para Firefox praticamente obrigatórias para programadores de front end – se você não conhece, corra no Google agora!).

Recursos de Desenvolvimento
1. IE.js do Dean Edwards
O Danilo já postou sobre esse js, que minimiza os problemas do IE. Mais informações, volte ao post “Como eliminar as diferenças de CSS do IE6 e IE5x com o IE7.js”.

2. CSS Global Resets
O resets.css é um recurso para minimizar através do css as diferenças entre browsers, equilibrando todas as propriedades antes de começar a criar o CSS. Para aplicá-lo é bem simples: basta incluir o código abaixo em seu css.

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0; }
table { border-collapse:collapse; border-spacing:0; }
fieldset,img { border:0; }
address,caption,cite,code,dfn,em,strong,th,var { font-style:normal; font-weight:normal; }
ol,ul { list-style:none; }
caption,th { text-align:left; }
h1,h2,h3,h4,h5,h6 { font-size:101.1%; font-weight:normal; }
q:before,q:after { content:''; }
abbr,acronym { border:0; }

Vida mais fácil com o novo Dreamweaver CS4

Essa semana a Adobe anunciou o novo pacote de Creative Suite, o CS4 após 1 ano e meio de CS3 no mercado. O CS3, que foi o primeiro pacote a integrar os softwares da Adobe com os da extinta Macromedia não trouxe grandes mudanças aos usuários do Dreamweaver. Na versão CS4, essa integração ficou ainda maior, e as mudanças no Dreamweaver parecem deixar o software mais atrativo.

Em evento online realizado hoje pelo pessoal do MXStudio, as mudanças foram apresentadas e indicam melhorias. Os principais novos recursos são:

– Live View: O Live View é um browser dentro do Dreamweaver. A idéia é que as modificações feitas no código (em layout ou interação), possam ser visualizadas no próprio arquivo, sem precisar ficar abrindo o browser para teste. Parece promissor, desde que funcione com mais fidelidade que o tal modo “Visual” do Dreamweaver atual.

– Code Hint para frameworks e Ajax: Esse recurso é uma novidade importante. No post anterior, o Danilo comentou sobre o crescimento do Jquery e das bibliotecas de interação em Javascript, que vêm ganhando mercado. Que bom que a Adobe está prestando atenção nisso, e ajudou os desenvolvedores na tarefa. Segundo o site oficial da Adobe, vai ser possível “incorporar estruturas JavaScript populares, incluindo jQuery, Prototype e Spry”.

– Related files: Mais um recurso que promete ser bem interessante. Vai ser familiar para quem costuma utilizar o “Inspect” do Firebug. Ao clicar em um elemento no modo de visualização do Dreamweaver, os arquivos que determinam aquele elemento são imediatamente relacionados, tornando bem mais fácil encontrar e editar o código.

Alguns outros recursos foram adicionados também, mas como eles são excessivamente WYSIWYG não procurei saber em detalhes. Só para constar, são recursos como o Photoshop Smart Objects (uma espécie de integração entre o arquivo .PSD e o Dreamweaver, fazendo com que alterações feitas em um, sejam simultaneamente aplicadas no outro) e o Adobe InContext Edit (cria áreas com “permissão” de edição pra usuários finais – socorro!).

De modo geral, parece que vai agregar funcionalidades interessantes ao Dreamweaver. Particularmente, acho um software bacana, desde que usado como um editor de código, e não como uma ferramenta essencial para o desenvolvimento. Já vi muita porcaria feita, zilhões de ids de css chamados de style1, style2, style3 e htmls com tabelas geradas automaticamente pelo Dreamweaver.

Mas nesse caso, o problema são os usuários do produto, que ao invés de tratá-lo como ferramenta, utilizam como matéria-prima para desenvolvimento. Se você gosta do Dreamweaver, as novas funcionalidades do CS4 vão ser de grande valia. ;)

Para quem quiser saber mais assista à palestra online de apresentação do Pacote CS4 feita pelo Danilo Santana.