<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" media="screen" href="/~d/styles/rss2full.xsl"?><?xml-stylesheet type="text/css" media="screen" href="http://feeds.feedburner.com/~d/styles/itemcontent.css"?><rss xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:wfw="http://wellformedweb.org/CommentAPI/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:sy="http://purl.org/rss/1.0/modules/syndication/" xmlns:slash="http://purl.org/rss/1.0/modules/slash/" xmlns:feedburner="http://rssnamespace.org/feedburner/ext/1.0" version="2.0">

<channel>
	<title>Revolução Etc</title>
	
	<link>http://revolucao.etc.br</link>
	<description>Site pessoal do Henrique C. Pereira sobre web standards e desenvolvimento.</description>
	<lastBuildDate>Thu, 02 Sep 2010 11:19:00 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.1</generator>
		<feedburner:info uri="revolucao" /><image><link>http://www.revolucao.etc.br</link><url>http://www.revolucao.etc.br/upload/feedburner_revolucao.gif</url><title>Visite o Revolução Etc</title></image><feedburner:feedFlare href="http://add.my.yahoo.com/rss?url=http%3A%2F%2Ffeeds.feedburner.com%2FRevolucao" src="http://us.i1.yimg.com/us.yimg.com/i/us/my/addtomyyahoo4.gif">Subscribe with My Yahoo!</feedburner:feedFlare><feedburner:feedFlare href="http://www.newsgator.com/ngs/subscriber/subext.aspx?url=http%3A%2F%2Ffeeds.feedburner.com%2FRevolucao" src="http://www.newsgator.com/images/ngsub1.gif">Subscribe with NewsGator</feedburner:feedFlare><feedburner:feedFlare href="http://feeds.my.aol.com/add.jsp?url=http%3A%2F%2Ffeeds.feedburner.com%2FRevolucao" src="http://o.aolcdn.com/favorites.my.aol.com/webmaster/ffclient/webroot/locale/en-US/images/myAOLButtonSmall.gif">Subscribe with My AOL</feedburner:feedFlare><feedburner:feedFlare href="http://www.bloglines.com/sub/http://feeds.feedburner.com/Revolucao" src="http://www.bloglines.com/images/sub_modern11.gif">Subscribe with Bloglines</feedburner:feedFlare><feedburner:feedFlare href="http://www.netvibes.com/subscribe.php?url=http%3A%2F%2Ffeeds.feedburner.com%2FRevolucao" src="http://www.netvibes.com/img/add2netvibes.gif">Subscribe with Netvibes</feedburner:feedFlare><feedburner:feedFlare href="http://fusion.google.com/add?feedurl=http%3A%2F%2Ffeeds.feedburner.com%2FRevolucao" src="http://buttons.googlesyndication.com/fusion/add.gif">Subscribe with Google</feedburner:feedFlare><feedburner:feedFlare href="http://www.pageflakes.com/subscribe.aspx?url=http%3A%2F%2Ffeeds.feedburner.com%2FRevolucao" src="http://www.pageflakes.com/ImageFile.ashx?instanceId=Static_4&amp;fileName=ATP_blu_91x17.gif">Subscribe with Pageflakes</feedburner:feedFlare><feedburner:browserFriendly>Este é o conteúdo alteranativo do Revolução Etc. Selecione ao lado o agregador de feed que você utiliza para poder assinar o feed do meu site.</feedburner:browserFriendly><atom10:link xmlns:atom10="http://www.w3.org/2005/Atom" rel="self" type="application/rss+xml" href="http://feeds.feedburner.com/feedburner/Revolucao" /><feedburner:info uri="feedburner/revolucao" /><atom10:link xmlns:atom10="http://www.w3.org/2005/Atom" rel="hub" href="http://pubsubhubbub.appspot.com/" /><xhtml:meta xmlns:xhtml="http://www.w3.org/1999/xhtml" name="robots" content="noindex" /><item>
		<title>Otimização de imagens para web com o Smush.it</title>
		<link>http://feedproxy.google.com/~r/feedburner/Revolucao/~3/QyTwGfP2Xnk/</link>
		<comments>http://revolucao.etc.br/archives/otimizacao-imagens-web-smush-it/#comments</comments>
		<pubDate>Sun, 22 Aug 2010 12:14:59 +0000</pubDate>
		<dc:creator>Henrique Pereira</dc:creator>
				<category><![CDATA[HTML / CSS / JavaScript]]></category>
		<category><![CDATA[GIF]]></category>
		<category><![CDATA[JPG]]></category>
		<category><![CDATA[Otimização de imagens]]></category>
		<category><![CDATA[PNG]]></category>
		<category><![CDATA[Smush.it]]></category>
		<category><![CDATA[Yahoo]]></category>

		<guid isPermaLink="false">http://revolucao.etc.br/?p=1428</guid>
		<description><![CDATA[Otimizar imagens para web já foi uma atividade mais trabalhosa. Desenhar sites na época das conexões dial-up exigia mais esforço dos designers para não deixar o site pesado. Apesar de não estarmos mais naquela época otimizar imagens ainda é uma valiosa boa prática. Uma razão para se preocupar com o tamanho delas no seu projeto [...]]]></description>
			<content:encoded><![CDATA[<p><strong>Otimizar imagens para web</strong> já foi uma atividade mais trabalhosa. Desenhar sites na época das conexões <em lang="en">dial-up</em> exigia mais esforço dos designers para não deixar o site pesado. Apesar de não estarmos mais naquela época otimizar imagens ainda é uma valiosa boa prática. Uma razão para se preocupar com o tamanho delas no seu projeto hoje é o fato do Google considerar o <a href="http://googlewebmastercentral.blogspot.com/2010/04/using-site-speed-in-web-search-ranking.html" rel="external" hreflang="en">tempo de carregamento</a> do site como uma das variáveis do Pagerank. Ou seja, quanto mais rápido e mais leve for seu site, mais <em lang="en">score</em> você ganha no <a href="http://revolucao.etc.br/tag/seo/">SEO</a>.</p>
<p><span id="more-1428"></span>O <strong><a href="http://www.smushit.com/ysmush.it/">Smush.it</a></strong> é um otimizador de imagens desenvolvido pelo <a href="http://yahoo.com/">Yahoo!</a> que remove bytes desnecessários e que não afetam a aparência ou a qualidade da imagem. Ele otimiza <strong>PNG</strong>, <strong>GIF</strong> e <strong>JPG</strong>. As imagens são submetidas a vários algoritmos para terem seus tamanhos reduzidos.</p>
<p><img src="http://revolucao.etc.br/imagens/smushit-tela.png" class="banner_full_inline" alt="Tela do Smush.it que mostra os ganhos de otimização de imagens em uma lista." /></p>
<p>Funciona assim: você faz o upload de todas suas imagens para o <a href="http://www.smushit.com/ysmush.it/">Smushi.it</a> &mdash; ele aceita múltiplos uploads &mdash; e ele te devolver um arquivo compactado em <em>.zip</em> com todas suas imagens otimizadas. Para cada imagem que você subir ele te informa o tamanho original e o tamanho final depois da otimização, além de exibir os ganhos totais ao submeter várias imagens juntas. Uma observação importante é que ao subir as imagens em GIF elas serão automaticamente convertidas para PNG quanto a conversão for responsável por gerar uma imagem de tamanho físico menor do que o GIF.</p>
<p>A <strong>otimização de imagens</strong> no meu fluxo de trabalho com o <strong>Smush.it</strong> é a última coisa a ser feita, no final do projeto e antes de publicar o site. Não precisa se preocupar com isso antes. <strong>Legal né?</strong><strong>Artigos relacionados:</strong>
<ul class="similar-posts">
<li><a href="http://revolucao.etc.br/archives/principio-de-pareto-a-teoria-8020-aplicada-ao-desenvolvimento-de-web/" rel="bookmark" title="12/12/2006">Princípio de pareto: A teoria 80/20 aplicada ao desenvolvimento de web</a></li>
<li><a href="http://revolucao.etc.br/archives/yahoo-search-por-uma-web-cada-vez-mais-semantica/" rel="bookmark" title="17/03/2008">Yahoo! Search por uma web cada vez mais semântica</a></li>
<li><a href="http://revolucao.etc.br/archives/yahoo-google-e-microsoft-em-esforco-conjunto-no-protocolo-sitemaps/" rel="bookmark" title="28/02/2008">Yahoo!, Google e Microsoft em esforço conjunto no protocolo sitemaps</a></li>
</ul>
<p><!-- Similar Posts took 31.036 ms --></p>
Similar Posts:<ul><li><a href="http://revolucao.etc.br/archives/imagens-gratuitas-e-com-a-stockxchng/" rel="bookmark" title="22/11/2006">Imagens gratuitas é com a Stock.XCHNG</a></li>

<li><a href="http://revolucao.etc.br/archives/geotagging-meta-informacoes-de-geoposicionamento-cada-vez-mais-populares/" rel="bookmark" title="04/05/2008">Geotagging, meta informações de geoposicionamento cada vez mais populares!</a></li>

<li><a href="http://revolucao.etc.br/archives/swfir-swf-image-replacement/" rel="bookmark" title="28/02/2007">swfir &#8211; SWF Image Replacement</a></li>

<li><a href="http://revolucao.etc.br/archives/novas-features-de-mapas-estaticos-no-google-maps-e-futuras-adaptacoes-no-geopress/" rel="bookmark" title="30/04/2008">Novas features de mapas estáticos no Google Maps e futuras adaptações no Geopress</a></li>

<li><a href="http://revolucao.etc.br/archives/roi-retorno-de-investimento-com-web-standards/" rel="bookmark" title="05/12/2006">ROI &#8211; Retorno de investimento com web standards</a></li>
</ul><!-- Similar Posts took 18.024 ms --><div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/Revolucao?a=JVF91NKID4k:_WgNrycGV2w:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/Revolucao?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Revolucao?a=JVF91NKID4k:_WgNrycGV2w:dnMXMwOfBR0"><img src="http://feeds.feedburner.com/~ff/Revolucao?d=dnMXMwOfBR0" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Revolucao?a=JVF91NKID4k:_WgNrycGV2w:aKCwKftKxY0"><img src="http://feeds.feedburner.com/~ff/Revolucao?i=JVF91NKID4k:_WgNrycGV2w:aKCwKftKxY0" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Revolucao?a=JVF91NKID4k:_WgNrycGV2w:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/Revolucao?d=7Q72WNTAKBA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Revolucao?a=JVF91NKID4k:_WgNrycGV2w:D7DqB2pKExk"><img src="http://feeds.feedburner.com/~ff/Revolucao?i=JVF91NKID4k:_WgNrycGV2w:D7DqB2pKExk" border="0"></img></a>
</div><img src="http://feeds.feedburner.com/~r/Revolucao/~4/JVF91NKID4k" height="1" width="1"/><img src="http://feeds.feedburner.com/~r/feedburner/Revolucao/~4/QyTwGfP2Xnk" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://revolucao.etc.br/archives/otimizacao-imagens-web-smush-it/feed/</wfw:commentRss>
		<slash:comments>5</slash:comments>
		<feedburner:origLink>http://revolucao.etc.br/archives/otimizacao-imagens-web-smush-it/</feedburner:origLink><feedburner:origLink>http://feedproxy.google.com/~r/Revolucao/~3/JVF91NKID4k/</feedburner:origLink></item>
		<item>
		<title>Book Review: Coleção Design Básico – Formato, Layout, Impressão e Acabamento, Cor, Imagem e Grids</title>
		<link>http://feedproxy.google.com/~r/feedburner/Revolucao/~3/rsuXNA97Ei8/</link>
		<comments>http://revolucao.etc.br/archives/design-basico-formato-layout-cor-imagem-grid/#comments</comments>
		<pubDate>Thu, 05 Aug 2010 16:04:23 +0000</pubDate>
		<dc:creator>Henrique Pereira</dc:creator>
				<category><![CDATA[Design]]></category>
		<category><![CDATA[Reviews]]></category>
		<category><![CDATA[Book Review]]></category>
		<category><![CDATA[Cor]]></category>
		<category><![CDATA[Formato]]></category>
		<category><![CDATA[Grids]]></category>
		<category><![CDATA[Imagem]]></category>
		<category><![CDATA[Impressão e Acabamento]]></category>
		<category><![CDATA[Layout]]></category>
		<category><![CDATA[review]]></category>

		<guid isPermaLink="false">http://revolucao.etc.br/?p=1419</guid>
		<description><![CDATA[Acabei de ler a coleção Design Básico dos autores Gavin Ambrose e Paul Harris, um achado para quem se interessa por design, impressão, etc. Trata-se de uma coleção de 6 livros focados em diferentes aspectos do design como Formato, Layout, Impressão e Acabamento, Cor, Imagem e Grids. Veja abaixo um pouco sobre cada um deles: [...]]]></description>
			<content:encoded><![CDATA[<p>Acabei de ler a coleção <strong><a href="http://www.artmed.com.br/WEB-PRODUTOS/produto_detalhe.aspx?id_produto=3249">Design Básico</a></strong> dos autores <em>Gavin Ambrose</em> e <em>Paul Harris</em>, um achado para quem se interessa por <strong>design</strong>, impressão, etc. Trata-se de uma coleção de 6 livros focados em diferentes aspectos do design como <strong>Formato, Layout, Impressão e Acabamento, Cor, Imagem e Grids</strong>. Veja abaixo um pouco sobre cada um deles:</p>
<p><span id="more-1419"></span><br />
<h2>Formato</h2>
<p><img src="http://revolucao.etc.br/imagens/colecao-design-basico-formato.jpg" alt="Capa do livro &quot;Formato&quot; da Coleção Design Básico dos autores Gavin Ambrose e Paul Harris, publicado pela editora Bookman" class="ilustration" /> O livro <a href="http://www.artmed.com.br/WEB-PRODUTOS/produto_detalhe.aspx?id_produto=2657#self">Formato</a> (ISBN: 9788577802739, 176 páginas) foca na relação ergonômica e utilitária dos objetos de design, como o livro, o pôster, a revista, o objeto, a tela do monitor, etc. Trata-se da reflexão de como o uso de diferentes formatos com objetivos diferentes é fator importante na concepção do design.</p>
<p>O foco deste livro está muito mais nos materiais impressos do que em outros tipos de produtos, preocupando-se com tipos de papel, tipos de dobras, escala, encadernação, cortes, brochuras, relevos, acabamentos e vários outros detalhes do universo do design gráfico e publicitário. Apesar de ter um capítulo sobre &#8220;<em>A tela do monitor</em>&#8220;, trata-se apenas de 6 páginas sobre o assunto e muito bem ilustrado.</p>
<h2>Layout</h2>
<p><img src="http://revolucao.etc.br/imagens/colecao-design-basico-layout.jpg" alt="Capa do livro &quot;Layout&quot; da Coleção Design Básico dos autores Gavin Ambrose e Paul Harris, publicado pela editora Bookman" class="ilustration" /> O livro <a href="http://www.artmed.com.br/WEB-PRODUTOS/produto_detalhe.aspx?id_produto=2658#self">Layout</a> (ISBN: 9788577803088, 176 páginas) é um compilado de exemplos de como a disposição e o arranjo dos elementos de texto e imagem influencia na percepção do design e do espaço que eles ocupam, considerando-se aspectos emocionais, estéticos, clareza, concisão, etc.</p>
<p>Aborda a introdução aos Grids (que possui um livro dedicado sobre o assunto como você verá a seguir) além de alinhamento dos elementos, forma e função, escala, estrutura. Apesar deste livro também conter a maioria dos exemplos focados no impresso, a reflexão de posicionamento e layout é universal. Os conceitos e exemplos são claramente transferíveis para web.</p>
<h2>Impressão e Acabamento</h2>
<p><img src="http://revolucao.etc.br/imagens/colecao-design-basico-impressao-acamento.jpg" alt="Capa do livro &quot;Impressão e Acabamento&quot; da Coleção Design Básico dos autores Gavin Ambrose e Paul Harris, publicado pela editora Bookman" class="ilustration" /> O livro <a href="http://www.artmed.com.br/WEB-PRODUTOS/produto_detalhe.aspx?id_produto=2660#self">Impressão e Acabamento</a> (ISBN: 9788577803071, 176 páginas), junto com o livro &quot;Formato&quot; são os dois livros basicamente focados em mídia impressa, onde o aproveitamento no universo do design para web é mínimo. Como eu vim da mídia impressa há mais de 10 anos atrás adorei rever conceitos e materiais usados na impressão e acabamento de impressos.</p>
<p>Tipos de impressão como offset, serigrafia, termografia, além de tipos de papeis, acabamentos, encadernação, texturas, aplicações de cores, etc são o conjunto de assuntos abordados neste livro. Esta edição possui várias páginas com tipos de acabamento e impressões diferentes. Tudo muito impecável.</p>
<h2>Cor</h2>
<p><img src="http://revolucao.etc.br/imagens/colecao-design-basico-cor.jpg" alt="Capa do livro &quot;Cor&quot; da Coleção Design Básico dos autores Gavin Ambrose e Paul Harris, publicado pela editora Bookman" class="ilustration" /> O livro <a href="http://www.artmed.com.br/WEB-PRODUTOS/produto_detalhe.aspx?id_produto=2875#self">Cor</a> (ISBN: 9788577804993, 176 páginas) junto com o de &quot;<strong>Grid</strong>&quot; são os dois livros da coleção que eu acho fundamentais para todos os designers. O livro introduz os vários elementos essenciais do estudo de cores como sistemas e círculos cromáticos, simbolismo das cores, percepção, combinações, técnicas de aplicações, etc.</p>
<p>Assim como nos outros livros há também certa atenção para os impressos mas não limitando-se a isso. Achei também que, devido a complexidade do assunto, poderia ter dado mais atenção a parte teórica. Isso torna essa edição, na minha opinião, mais interessante pra quem já estudou teoria das cores e quer um belo livro de referência do que para os não iniciados.</p>
<h2>Imagem</h2>
<p><img src="http://revolucao.etc.br/imagens/colecao-design-basico-imagem.jpg" alt="Capa do livro &quot;Imagem&quot; da Coleção Design Básico dos autores Gavin Ambrose e Paul Harris, publicado pela editora Bookman" class="ilustration" /> O livro <a href="http://www.artmed.com.br/WEB-PRODUTOS/produto_detalhe.aspx?id_produto=2876#self">Imagem</a> (ISBN: 9788577805006, 176 páginas) é um emaranhado de conceitos e relações com a aplicação de imagens. De todos os livros da coleção, eu achei que esse foi o que mais explorou o assunto com variadas aplicações do uso de imagens.</p>
<p>Este livro traz conceitos como resolução, cores, canais de cores, técnicas de impressão, ilustração, fotografia, significados da imagem como processos cognitivos, semiótica, tipografia, sinédoque, metáfora, analogia, metonímia, além de usos de imagens, fotojornalismo, manipulação, montagem, enquadramento, marcação, etc. São vários os relacionamentos criados na aplicação de imagem. Possui também vários exemplos de impressos mas também em contextos onde o conceito é transponível para outras disciplinas de design.</p>
<h2>Grids</h2>
<p><img src="http://revolucao.etc.br/imagens/colecao-design-basico-grids.jpg" alt="Capa do livro &quot;Grids&quot; da Coleção Design Básico dos autores Gavin Ambrose e Paul Harris, publicado pela editora Bookman" class="ilustration" /> O livro <a href="http://www.artmed.com.br/WEB-PRODUTOS/produto_detalhe.aspx?id_produto=2878#self">Grids</a> (ISBN: 9788577805228, 176 páginas) foi o meu preferido da coleção. Sou suspeito por ser apaixonado por Grids. Se você é designer de interfaces para web, pelo menos este você precisa comprar. O grid é a base sobre a qual um design é construído e organizado. O foco do livro está muito mais nos princípios e diferentes abordagens da utilização de grids do que impor um caminho prescritivo.</p>
<p>O livro começa com a defesa do por que usar grids e percorre os diferentes aspectos como formato, medidas, proporções, regra dos terços, simetria, grids compostos, e vários exemplos de aplicações e modelos já estabelecidos principalmente na mídia impressa.</p>
<h2>Pontos negativos</h2>
<p>Esta coleção da Bookman de Design Básico foi publicada incompleta. A coleção original é da editora suíça <a href="http://www.avabooks.ch/">AVA Publishing</a> e ficaram de fora o <a href="http://www.avabooks.ch/index.php/ava/bookdetails/978-2-940411-17-7">Design Thinking</a> e o <a href="http://www.avabooks.ch/index.php/ava/bookdetails/978-2-940373-35-2">Typography</a>, que são dois temas muito fundamentais para o design. Não sei as razões da não publicação, mas os dois temas são muito importantes na reflexão do design do que os livros <em>Impressão e Acabamento</em> e <em>Formato</em>, que são mais característicos dos profissionais focados em impressos. Se refletirmos do ponto de vista do Design como disciplina, os dois livros fazem muita falta e os outros dois citados acima, nem tanto. Estou inclusive considerando a possibilidade de comprá-los em inglês mesmo.</p>
<p>Outro ponto negativo para quem trabalha com web é a pegada no mundo dos impressos que a coleção possui. Apesar de ser uma reflexão sobre design, os elementos típicos da impressão estão presentes em todos os livros. Não necessariamente isso torna os livros interessantes somente para designers gráficos, mas para os profissionais de web, nem todos são importantes.</p>
<h2>Considerações finais</h2>
<p>O acabamento de todos os livros é muito bonito e impecável. Papel especial, principalmente no livro de impressão e acabamento onde algumas páginas estão com o tipo de papel e impressão indicado no contexto. Nenhum destes livros é um compêndio completo e esgotado sobre os assuntos propostos. Todos eles são compilações de conceitos e boas práticas que abrem a sua cabeça pra ir explorar esses assuntos em outras fontes.</p>
<p>Se você trabalha com web e desenvolvimento e precisa focar ou está sem grana pra comprar a coleção inteira, minha sugestão é que você compre na seguinte ordem de importância (minha opinião): Grids, Cor, Imagem, Layout, Formato e por último Impressão e Acabamento. Os <a href="http://www.artmed.com.br/WEB-PRODUTOS/produto_detalhe.aspx?id_produto=3249" rel="external">livros podem ser adquiridos</a> no site da própria editora Bookman. Em breve tem mais reviews dos livros que etsou lendo!<strong>Artigos relacionados:</strong>
<ul class="similar-posts">
<li><a href="http://revolucao.etc.br/archives/book-review-manual-de-tipografia-a-historia-a-tecnica-e-a-arte/" rel="bookmark" title="04/06/2010">Book Review: Manual de Tipografia &#8211; a história, a técnica e a arte</a></li>
<li><a href="http://revolucao.etc.br/archives/book-review-ansiedade-de-informacao-2-de-richard-saul-wurman/" rel="bookmark" title="21/09/2006">Book Review: Ansiedade de Informação 2 de Richard Saul Wurman</a></li>
<li><a href="http://revolucao.etc.br/archives/book-review-250-segredos-para-web-designers-de-molly-holzschlag/" rel="bookmark" title="05/05/2006">Book Review: 250 segredos para web designers de Molly Holzschlag</a></li>
<li><a href="http://revolucao.etc.br/archives/book-review-o-design-do-dia-a-dia-de-donald-a-norman/" rel="bookmark" title="27/02/2008">Book Review: O Design do dia a dia de Donald A. Norman</a></li>
<li><a href="http://revolucao.etc.br/archives/book-review-projetando-web-sites-compativeis-de-jeffrey-zeldman/" rel="bookmark" title="08/05/2006">Book Review: Projetando Web Sites Compatíveis de Jeffrey Zeldman</a></li>
<li><a href="http://revolucao.etc.br/archives/book-review-refatorando-html-aplicacoes-web/" rel="bookmark" title="06/05/2010">Book Review: Refatorando HTML &#8211; Como melhorar o projeto de aplicações web existentes</a></li>
<li><a href="http://revolucao.etc.br/archives/book-review-web-standards-solutions-de-dan-cerderholm/" rel="bookmark" title="02/05/2006">Book Review: Web Standards Solutions de Dan Cerderholm</a></li>
</ul>
<p><!-- Similar Posts took 31.250 ms --></p>
Similar Posts:<ul><li><a href="http://revolucao.etc.br/archives/ate-que-enfim-sandman-entes-queridos/" rel="bookmark" title="22/02/2008">Até que enfim, Sandman, Entes queridos</a></li>

<li><a href="http://revolucao.etc.br/archives/design-de-navegacao-web/" rel="bookmark" title="29/12/2009">Book Review: Design de Navegação Web</a></li>

<li><a href="http://revolucao.etc.br/archives/book-review-manual-de-tipografia-a-historia-a-tecnica-e-a-arte/" rel="bookmark" title="04/06/2010">Book Review: Manual de Tipografia &#8211; a história, a técnica e a arte</a></li>

<li><a href="http://revolucao.etc.br/archives/despertar-sandman-chega-ao-fim-pela-segunda-vez-no-brasil/" rel="bookmark" title="24/07/2008">Despertar: Sandman chega ao fim, pela segunda vez no Brasil</a></li>

<li><a href="http://revolucao.etc.br/archives/book-review-ansiedade-de-informacao-2-de-richard-saul-wurman/" rel="bookmark" title="21/09/2006">Book Review: Ansiedade de Informação 2 de Richard Saul Wurman</a></li>
</ul><!-- Similar Posts took 9.350 ms --><div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/Revolucao?a=F7MwifpvFYY:f99hU8rsScg:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/Revolucao?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Revolucao?a=F7MwifpvFYY:f99hU8rsScg:dnMXMwOfBR0"><img src="http://feeds.feedburner.com/~ff/Revolucao?d=dnMXMwOfBR0" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Revolucao?a=F7MwifpvFYY:f99hU8rsScg:aKCwKftKxY0"><img src="http://feeds.feedburner.com/~ff/Revolucao?i=F7MwifpvFYY:f99hU8rsScg:aKCwKftKxY0" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Revolucao?a=F7MwifpvFYY:f99hU8rsScg:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/Revolucao?d=7Q72WNTAKBA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Revolucao?a=F7MwifpvFYY:f99hU8rsScg:D7DqB2pKExk"><img src="http://feeds.feedburner.com/~ff/Revolucao?i=F7MwifpvFYY:f99hU8rsScg:D7DqB2pKExk" border="0"></img></a>
</div><img src="http://feeds.feedburner.com/~r/Revolucao/~4/F7MwifpvFYY" height="1" width="1"/><img src="http://feeds.feedburner.com/~r/feedburner/Revolucao/~4/rsuXNA97Ei8" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://revolucao.etc.br/archives/design-basico-formato-layout-cor-imagem-grid/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
		<feedburner:origLink>http://revolucao.etc.br/archives/design-basico-formato-layout-cor-imagem-grid/</feedburner:origLink><feedburner:origLink>http://feedproxy.google.com/~r/Revolucao/~3/F7MwifpvFYY/</feedburner:origLink></item>
		<item>
		<title>Links quebrados e páginas de Erro 404</title>
		<link>http://feedproxy.google.com/~r/feedburner/Revolucao/~3/htJKj47U5u4/</link>
		<comments>http://revolucao.etc.br/archives/links-quebrados-erro-404/#comments</comments>
		<pubDate>Mon, 19 Jul 2010 16:47:42 +0000</pubDate>
		<dc:creator>Henrique Pereira</dc:creator>
				<category><![CDATA[Experiência de usuário]]></category>
		<category><![CDATA[HTML / CSS / JavaScript]]></category>
		<category><![CDATA[Internet / Web]]></category>
		<category><![CDATA[Broken Links]]></category>
		<category><![CDATA[Erro 404]]></category>
		<category><![CDATA[hyperlinks]]></category>
		<category><![CDATA[Link rot]]></category>
		<category><![CDATA[Links quebrados]]></category>
		<category><![CDATA[W3C]]></category>

		<guid isPermaLink="false">http://revolucao.etc.br/?p=1397</guid>
		<description><![CDATA[Links quebrados, também conhecido em inglês como broken Links ou link rot (link podre ou estragado) são links que não mais levam o usuário para onde originalmente deveria levar. Em outras palavras, são links para páginas inexistentes. As causas disso são variadas, como um site que deixou de existir ou uma página que foi migrada [...]]]></description>
			<content:encoded><![CDATA[<p><img src="http://revolucao.etc.br/imagens/chains.gif" class="ilustration" alt="Imagem ilustrativa de uma corrente sendo quebrada para ilustrar o conceito de links quebrados." /> <strong class="enfase">Links quebrados</strong>, também conhecido em inglês como <em lang="en">broken Links</em> ou <em lang="en">link rot</em> (link podre ou estragado) são links que não mais levam o usuário para onde originalmente deveria levar. Em outras palavras, <strong>são links para páginas inexistentes</strong>. As causas disso são variadas, como um site que deixou de existir ou uma página que foi migrada para outro local devido ao redesign do site ou a página foi deletada, etc. <span id="more-1397"></span>O fato é que links quebrados são responsáveis por basicamente dois problemas distintos que você deve evitar em qualquer site. O primeiro deles é uma péssima experiência de usuário que os visitantes vão ter no seu site ao se depararem com &#8220;páginas inexistentes&#8221; &#8211; o famoso erro 404 &#8211; e o segundo problema é o desperdício de tráfego inútil na web ao requisitar ao servidor uma página que não mais existe.</p>
<p>Se você se preocupa com a indexação do seu site pelos mecanismos de busca você também precisa se preocupar em deixar seu site livre dos links quebrados. A internet é interligada por hyperlinks. Mecanismos de busca são estruturados em torno de links. Quanto mais links apontando pra um endereço mais relevante ele é. Se você possui muitos links quebrados ou páginas com erro 404, o Google pode não encontrar razão em dar alguma relevância para seu site, visto que o mesmo não oferece uma boa experiência de usuário. E isso é razão mais do que suficiente pra você se preocupar em manter seu site sempre atualizado e livre de <strong>links quebrados</strong>.</p>
<h2>Erro 404 e como minimizar uma péssima experiência de usuário</h2>
<p><img src="http://revolucao.etc.br/imagens/error404.gif" class="ilustration" alt="Imagem de uma tela exibindo uma página com erro 404 devido a um olink quebrado no site." /> <a href="http://en.wikipedia.org/wiki/HTTP_404">Erro 404</a> é a denominação da famosa mensagem de &#8220;<strong>Página não encontrada</strong>&#8221; que todo mundo já se deparou alguma vez. Trata-se de uma resposta enviada pelo servidor informando que o endereço que você está tentando acessar não existe. E sabe quando essa tela aparece? Quando você deixou algum link interno quebrado ou removeu alguma página e não fez nenhum redirect para um novo endereço.</p>
<p>Geralmente a mensagem enviada pelo servidor, por padrão, não é muito útil como você pode ver na imagem acima. O correto é você personalizar essa página de <strong>erro 404</strong> com uma mensagem mais amigável e mais explicativa para o usuário. Infelizmente a maioria dos sites não a personalizam deixando o usuário perdido e sem qualquer possibilidade de encontrar algum conteúdo similar no seu site. A <a href="http://www.smashingmagazine.com/2007/08/17/404-error-pages-reloaded/">Smashing Magazine</a> publicou um texto sobre várias boas práticas relacionadas com <strong>páginas de erro 404</strong> que vale a pena dar uma olhada antes de construir a sua. <a href="http://googlewebmastercentral.blogspot.com/2008/08/make-your-404-pages-more-useful.html">O Google também publicou</a> algumas observações importantes sobre o assunto.</p>
<h2>Evite round-trip times desnecessários</h2>
<p><strong><a href="http://code.google.com/speed/page-speed/docs/rtt.html">Round-trip Times</a></strong> (<strong>tempo de ida e volta</strong> em português), também abreviado por <abbr title="Round-Trip Times">RTT</abbr> é o tempo gasto para que uma aplicação client side (um browser por exemplo) gasta para enviar uma requisição ao servidor somado ao tempo que o servidor vai gastar para responder esse pedido. O RTT não inclui o tempo de transferência desses dados, trata-se apenas do tempo de comunicação entre cliente e servidor.</p>
<p>Vamos supor que na sua folha de estilos de CSS você chama uma imagem de background que não existe. Vamos supor que você nem notou que essa imagem não existe mas a regra de CSS que &#8220;linka&#8221; essa imagem continua lá. Toda vez que alguém acessa o seu site ou blog, sua folha de estilos vai enviar uma requisição ao seu servidor desnecessariamente. Pode parecer pequeno, mas em sites com grande audiência isso é um grande desperdício de recursos do servidor, consequentemente menos grana no seu bolso. Uma boa prática em desenvolvimento web para deixar sites mais rápidos é minimizar a quantidade <a href="http://code.google.com/speed/page-speed/docs/rtt.html">round-trip times</a>. Principalmente os desnecessários como aqueles originados dos maditos links quebrados. </p>
<h2>Detectando e combatendo links quebrados</h2>
<p>Depois de identificado 2 grandes problemas relacionados com <em lang="en">broken links</em>, o que você precisa fazer agora é colocar a mão na massa. Se seu site possui muitos links quebrados, ela passa uma impressão amadora e descuidada. Quanto mais importante &mdash; financeiramente falando &mdash; seu site representar pra você, mais cuidadoso com ele você deve ser. E combater links quebrados é uma tarefa que você não deveria esquivar-se nunca. Não há outra forma de combatê-los senão verificando link por link. Como fazer isso manualmente seria um tanto desumano, existem ferramentas que fazem isso por você.</p>
<p>Há várias soluções de <a href="http://www.google.com/#hl=en&amp;source=hp&amp;q=broken+link+checker&amp;aq=0&amp;aqi=g10&amp;aql=&amp;oq=broken+link&amp;gs_rfai=&amp;fp=c1641e62d4943f81">ferramentas que checam links quebrados</a>, mas neste artigo vou indicar apenas algumas que eu já utilizei.</p>
<p><strong class="enfase">W3C Link Checker:</strong> O <a href="http://validator.w3.org/checklink" rel="external">W3C Link Checker</a> é um verificar de links quebrados online parte de um grupo de ferramentas de qualidade da W3C. A vantagem desse verificador é que você não precisa instalar nada no seu computador.</p>
<p><strong class="enfase">Xenu&#8217;s Link Sleuth:</strong> O <a href="http://home.snafu.de/tilman/xenulink.html" rel="external" hreflang="en">Xenu</a> trata-se de um aplicativo desktop (roda somente em plataforma Windows) muito popular entre os desenvolvedores.  Ele verifica imagens, JavScripts e CSS. Possui algumas informações em relatórios interessantes.</p>
<p><strong class="enfase">Firefox extension: LinkChecker:</strong> O <a href="https://addons.mozilla.org/en-US/firefox/addon/532/" rel="external">LinkChecker</a> é bem popular e fácil de usar. Basta instalá-lo como uma extension no <a href="http://br.mozdev.org/" rel="external">Mozilla Firefox</a>.</p>
<p><strong class="enfase">WordPress: Broken Link Checker</strong> <a href="http://wordpress.org/extend/plugins/broken-link-checker/">Plugin para o WordPress</a> que estará sempre monitorando seu blog atrás de links quebrados, te poupando muito esforço.</p>
<p>Além dessas ferramentas é sempre bom nunca tirar os olhos do <a href="http://www.google.com/webmasters/" rel="external">Google Webmasters Tools</a> e do <a href="http://siteexplorer.search.yahoo.com/" rel="external">Yahoo! Site Explorer</a> atrás de problemas de indexação e report de erros. Nada substitui essas duas ferramentas.</p>
<p>P.S.: Sim, eu tenho alguns links quebrados por aqui e pretendo exterminá-los em breve. Eu disse que é algo que precisa ser feito e não que era um trabalho fácil.<strong>Artigos relacionados:</strong>
<ul class="similar-posts">
<li><a href="http://revolucao.etc.br/archives/declarando-encodings-em-xhtml/" rel="bookmark" title="11/04/2006">Declarando encodings em XHTML</a></li>
<li><a href="http://revolucao.etc.br/archives/configurando-encodings-em-ferramentas-de-desenvolvimento/" rel="bookmark" title="13/04/2006">Configurando encodings em ferramentas de desenvolvimento</a></li>
<li><a href="http://revolucao.etc.br/archives/acessibilidade-validacoes-e-mecanismos-de-busca/" rel="bookmark" title="12/11/2005">Acessibilidade, Validações e Mecanismos de Busca</a></li>
<li><a href="http://revolucao.etc.br/archives/hacks-hack-hacks/" rel="bookmark" title="19/12/2005">Hacks hack hacks!</a></li>
<li><a href="http://revolucao.etc.br/archives/algumas-questoes-em-torno-do-desenvolvimento-de-sites-para-dispositivos-moveis/" rel="bookmark" title="20/05/2007">Algumas questões em torno do desenvolvimento de sites para dispositivos móveis</a></li>
<li><a href="http://revolucao.etc.br/archives/validacao-e-semantica/" rel="bookmark" title="06/01/2006">Validação e Semântica</a></li>
<li><a href="http://revolucao.etc.br/archives/rubens-de-freitas/" rel="bookmark" title="27/10/2005">Rubens de Freitas</a></li>
</ul>
<p><!-- Similar Posts took 33.312 ms --></p>
Similar Posts:<ul><li><a href="http://revolucao.etc.br/archives/a-usabilidade-de-informar-ao-usuario-que-um-link-e-externo-ao-seu-site/" rel="bookmark" title="31/10/2006">A &quot;usabilidade&quot; de informar ao usuário que um link é externo ao seu site</a></li>

<li><a href="http://revolucao.etc.br/archives/smart-start-e-book-sobre-links-patrocinados-gratuito/" rel="bookmark" title="02/07/2008">Smart Start, e-book sobre Links Patrocinados gratuito</a></li>

<li><a href="http://revolucao.etc.br/archives/gmail-lockdown-in-sector-6/" rel="bookmark" title="12/04/2007">Gmail: Lockdown in sector 6</a></li>

<li><a href="http://revolucao.etc.br/archives/google-insights-for-search-mais-uma-ferramenta-para-facilitar-a-vida-dos-analistas-e-anunciantes-de-links-patrocinados/" rel="bookmark" title="07/08/2008">Google Insights for Search, mais uma ferramenta para facilitar a vida dos analistas e anunciantes de Links Patrocinados</a></li>

<li><a href="http://revolucao.etc.br/archives/design-acessivel-daltonismo-e-a-cegueira-das-cores/" rel="bookmark" title="14/11/2007">Design acessível, Daltonismo e a cegueira das cores</a></li>
</ul><!-- Similar Posts took 9.343 ms --><div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/Revolucao?a=SL3fToFTw-o:SEiMORzdRmY:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/Revolucao?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Revolucao?a=SL3fToFTw-o:SEiMORzdRmY:dnMXMwOfBR0"><img src="http://feeds.feedburner.com/~ff/Revolucao?d=dnMXMwOfBR0" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Revolucao?a=SL3fToFTw-o:SEiMORzdRmY:aKCwKftKxY0"><img src="http://feeds.feedburner.com/~ff/Revolucao?i=SL3fToFTw-o:SEiMORzdRmY:aKCwKftKxY0" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Revolucao?a=SL3fToFTw-o:SEiMORzdRmY:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/Revolucao?d=7Q72WNTAKBA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Revolucao?a=SL3fToFTw-o:SEiMORzdRmY:D7DqB2pKExk"><img src="http://feeds.feedburner.com/~ff/Revolucao?i=SL3fToFTw-o:SEiMORzdRmY:D7DqB2pKExk" border="0"></img></a>
</div><img src="http://feeds.feedburner.com/~r/Revolucao/~4/SL3fToFTw-o" height="1" width="1"/><img src="http://feeds.feedburner.com/~r/feedburner/Revolucao/~4/htJKj47U5u4" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://revolucao.etc.br/archives/links-quebrados-erro-404/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		<feedburner:origLink>http://revolucao.etc.br/archives/links-quebrados-erro-404/</feedburner:origLink><feedburner:origLink>http://feedproxy.google.com/~r/Revolucao/~3/SL3fToFTw-o/</feedburner:origLink></item>
		<item>
		<title>Book Review: Manual de Tipografia – a história, a técnica e a arte</title>
		<link>http://feedproxy.google.com/~r/feedburner/Revolucao/~3/Wfowu8-It8E/</link>
		<comments>http://revolucao.etc.br/archives/book-review-manual-de-tipografia-a-historia-a-tecnica-e-a-arte/#comments</comments>
		<pubDate>Fri, 04 Jun 2010 15:10:48 +0000</pubDate>
		<dc:creator>Henrique Pereira</dc:creator>
				<category><![CDATA[Reviews]]></category>
		<category><![CDATA[Avaliação]]></category>
		<category><![CDATA[Book Review]]></category>
		<category><![CDATA[História]]></category>
		<category><![CDATA[livro]]></category>
		<category><![CDATA[review]]></category>
		<category><![CDATA[Tipografia]]></category>

		<guid isPermaLink="false">http://revolucao.etc.br/?p=1316</guid>
		<description><![CDATA[O livro &#8220;Manual de Tipografia &#8211; a história, a técnica e a arte&#8221; da Editora Bookman (Do original A Typographic Workbook: A Primer to History, Techniques, and Artistry por Kate Clair &#038; Cynthia Busic-Snyder, 400 páginas, Segunda Edição, ISBN: 9788577803712, Ano 2009) é um livro de estudo (workbook) que tem sido usado em algumas universidades [...]]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.artmed.com.br/WEB-PRODUTOS/produto_detalhe.aspx?id_produto=2623"><img src="http://revolucao.etc.br/imagens/manual-tipografia.jpg" class="ilustration" alt="Capa do livro &quot;Manual de Tipografia - a história, a técnica e a arte&quot; da Editora Bookman, ISBN: 9788577803712, Ano: 2009" /></a> O livro &#8220;<strong>Manual de Tipografia &#8211; a história, a técnica e a arte</strong>&#8221; da <a href="http://www.artmed.com.br/">Editora Bookman</a> (Do original <em>A Typographic Workbook: A Primer to History, Techniques, and Artistry</em> por <strong>Kate Clair</strong> &#038; <strong>Cynthia Busic-Snyder</strong>, 400 páginas, Segunda Edição, ISBN: 9788577803712, Ano 2009) é um livro de estudo (<em>workbook</em>) que tem sido usado em algumas universidades americanas desde sua primeira edição em 1995. Cada capítulo traz exercícios relacionados (técnicos e teóricos) o que deixa bem claro que a autora, <a href="https://portal.kutztown.edu/common/catalog/facultyinfo.asp?a=sf&amp;FID=clair" rel="external" hreflang="en">professora do curso de design</a> de uma universidade na Pensilvânia, realmente preparou o livro para a sala de aula.<span id="more-1316"></span></p>
<p>O <strong>Manual de Tipografia</strong> cobre a história desde os antigos sistemas de escrita até a revolução tecnológica dos computadores, incluindo a evolução das formas de aplicação tipográfica, anatomia dos caracteres, características, classificação, composição tipográfica, etc. Quase que do meio do livro em diante você encontra um apêndice com amostras de várias fontes famosas, contendo uma breve história delas além de exemplos da aplicação da fonte em diferentes tamanhos. </p>
<p><strong class="enfase">Pontos negativos</strong>: O livro é para iniciantes no estudo de tipografia e poderá frustrar os mais experientes. Praticamente cada capítulo do livro esta com uma tipografia diferente e um modelo interno de grid variável (hora em 2, 3, 4 ou 5 colunas) e em outros trechos o modelo de grid parece inexistir. Pesquisei antes de escrever esse texto e esse estranho modelo de organização é uma <a href="http://designorati.com/articles/t1/typography/338/a-typographic-workbook-second-edition.php" rel="external">herança da edição americana</a>.</p>
<p><strong class="enfase">Pontos positivos</strong>: Para o iniciante alguns capítulos são uma mão cheia de informações preciosas compartilhadas de uma forma muito didática. Os capítulos de características (anatomia) dos caracteres e composição de textos tipográficos são muito bem escritos, claros e trazem informações preciosas que todo mundo que trabalha com web deveria saber, como alinhamento, peso de fonte, contraste, serifada ou não serifada, uso de kernel negativo, etc.</p>
<p>Se você nunca parou para estudar tipografia de forma mais organizada recomendo que compre o livro. Mas se você já estudou um pouco ou tem boas noções, recomendo procurar livros mais elaborados com foco em composição, aplicação, etc. Você pode comprar o livro no <a href="http://www.submarino.com.br/produto/1/21457537/manual+de+tipografia:+a+historia,+a+tecnica+e+a+arte" rel="nofollow external">Submarino</a> ou no próprio site da <a href="http://www.artmed.com.br/WEB-PRODUTOS/produto_detalhe.aspx?id_produto=2623" rel="external">Editora Bookman</a>.<strong>Artigos relacionados:</strong>
<ul class="similar-posts">
<li><a href="http://revolucao.etc.br/archives/book-review-nao-me-faca-pensar-de-steve-krug/" rel="bookmark" title="12/09/2006">Book Review: Não me faça pensar de Steve Krug</a></li>
<li><a href="http://revolucao.etc.br/archives/book-review-o-design-do-dia-a-dia-de-donald-a-norman/" rel="bookmark" title="27/02/2008">Book Review: O Design do dia a dia de Donald A. Norman</a></li>
<li><a href="http://revolucao.etc.br/archives/book-review-refatorando-html-aplicacoes-web/" rel="bookmark" title="06/05/2010">Book Review: Refatorando HTML &#8211; Como melhorar o projeto de aplicações web existentes</a></li>
<li><a href="http://revolucao.etc.br/archives/design-basico-formato-layout-cor-imagem-grid/" rel="bookmark" title="05/08/2010">Book Review: Coleção Design Básico &#8211; Formato, Layout, Impressão e Acabamento, Cor, Imagem e Grids</a></li>
<li><a href="http://revolucao.etc.br/archives/book-review-css-mastery-de-andy-budd/" rel="bookmark" title="04/05/2006">Book Review: CSS Mastery de Andy Budd</a></li>
<li><a href="http://revolucao.etc.br/archives/book-review-bulletproof-web-design-de-dan-cederholm/" rel="bookmark" title="03/05/2006">Book Review: Bulletproof Web Design de Dan Cederholm</a></li>
<li><a href="http://revolucao.etc.br/archives/estrategias-de-e-mail-marketing/" rel="bookmark" title="10/03/2009">Review do livro: Estratégias de e-mail marketing</a></li>
</ul>
<p><!-- Similar Posts took 23.555 ms --></p>
Similar Posts:<ul><li><a href="http://revolucao.etc.br/archives/book-review-nao-me-faca-pensar-de-steve-krug/" rel="bookmark" title="12/09/2006">Book Review: Não me faça pensar de Steve Krug</a></li>

<li><a href="http://revolucao.etc.br/archives/book-review-o-design-do-dia-a-dia-de-donald-a-norman/" rel="bookmark" title="27/02/2008">Book Review: O Design do dia a dia de Donald A. Norman</a></li>

<li><a href="http://revolucao.etc.br/archives/book-review-refatorando-html-aplicacoes-web/" rel="bookmark" title="06/05/2010">Book Review: Refatorando HTML &#8211; Como melhorar o projeto de aplicações web existentes</a></li>

<li><a href="http://revolucao.etc.br/archives/gadget-de-natal-monitor-widescreen-19-lcd-aoc-193fw/" rel="bookmark" title="12/12/2006">Gadget de Natal: Monitor Widescreen 19&#8221; LCD AOC 193FW</a></li>

<li><a href="http://revolucao.etc.br/archives/design-basico-formato-layout-cor-imagem-grid/" rel="bookmark" title="05/08/2010">Book Review: Coleção Design Básico &#8211; Formato, Layout, Impressão e Acabamento, Cor, Imagem e Grids</a></li>
</ul><!-- Similar Posts took 10.040 ms --><div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/Revolucao?a=Aqdp0KL5Q2w:icxx6NrohN8:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/Revolucao?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Revolucao?a=Aqdp0KL5Q2w:icxx6NrohN8:dnMXMwOfBR0"><img src="http://feeds.feedburner.com/~ff/Revolucao?d=dnMXMwOfBR0" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Revolucao?a=Aqdp0KL5Q2w:icxx6NrohN8:aKCwKftKxY0"><img src="http://feeds.feedburner.com/~ff/Revolucao?i=Aqdp0KL5Q2w:icxx6NrohN8:aKCwKftKxY0" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Revolucao?a=Aqdp0KL5Q2w:icxx6NrohN8:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/Revolucao?d=7Q72WNTAKBA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Revolucao?a=Aqdp0KL5Q2w:icxx6NrohN8:D7DqB2pKExk"><img src="http://feeds.feedburner.com/~ff/Revolucao?i=Aqdp0KL5Q2w:icxx6NrohN8:D7DqB2pKExk" border="0"></img></a>
</div><img src="http://feeds.feedburner.com/~r/Revolucao/~4/Aqdp0KL5Q2w" height="1" width="1"/><img src="http://feeds.feedburner.com/~r/feedburner/Revolucao/~4/Wfowu8-It8E" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://revolucao.etc.br/archives/book-review-manual-de-tipografia-a-historia-a-tecnica-e-a-arte/feed/</wfw:commentRss>
		<slash:comments>8</slash:comments>
		<feedburner:origLink>http://revolucao.etc.br/archives/book-review-manual-de-tipografia-a-historia-a-tecnica-e-a-arte/</feedburner:origLink><feedburner:origLink>http://feedproxy.google.com/~r/Revolucao/~3/Aqdp0KL5Q2w/</feedburner:origLink></item>
		<item>
		<title>Desenvolvedores são de Marte e profissionais de UX são de Vênus</title>
		<link>http://feedproxy.google.com/~r/feedburner/Revolucao/~3/7G58hrWyUkE/</link>
		<comments>http://revolucao.etc.br/archives/desenvolvedores-sao-de-marte-e-profissionais-de-ux-sao-de-venus/#comments</comments>
		<pubDate>Wed, 02 Jun 2010 16:51:30 +0000</pubDate>
		<dc:creator>Henrique Pereira</dc:creator>
				<category><![CDATA[Acessibilidade]]></category>
		<category><![CDATA[Design]]></category>
		<category><![CDATA[Experiência de usuário]]></category>
		<category><![CDATA[Arquitetura da informação]]></category>
		<category><![CDATA[desenvolvimento]]></category>
		<category><![CDATA[Programação de Interface]]></category>
		<category><![CDATA[Server Side]]></category>
		<category><![CDATA[UX]]></category>

		<guid isPermaLink="false">http://revolucao.etc.br/?p=1337</guid>
		<description><![CDATA[A história desse artigo começou assim: a Ale Nahra (@alenahra) fez a seguinte afirmação no Twitter: &#8220;Finalmente entendi a diferença entre sites ruins e bons: a integração entre equipe de UX e desenvolvedores.&#8221; Eu retuitei e em seguida a Aline Couto (@alineideias) fez algumas considerações direcionadas a mim, o que foi o suficiente pra começarmos [...]]]></description>
			<content:encoded><![CDATA[<p>A história desse artigo começou assim: a <a href="http://www.typewriter.com.br/">Ale Nahra</a> (@alenahra) fez a <a href="http://twitter.com/alenahra/status/15130886816">seguinte afirmação</a> no Twitter: </p>
<blockquote cite="http://twitter.com/alenahra/status/15130886816"><p>&#8220;Finalmente entendi a diferença entre sites ruins e bons: a integração entre equipe de UX e desenvolvedores.&#8221;</p></blockquote>
<p><span id="more-1337"></span>Eu retuitei e em seguida a <a href="http://www.google.com/profiles/alineideias">Aline Couto</a> (@alineideias) fez algumas considerações direcionadas a mim, o que foi o suficiente pra começarmos uma discussão interessante sobre os problemas relacionados com a integração de equipes de experiência de usuário e desenvolvedores. E como as frases jogadas no Twitter me fizeram conectar alguns pontos interessantes, eu não gostaria de deixar que isso morresse por lá.</p>
<h2>O problema</h2>
<p>Desenvolvimento de projetos para web envolve pessoas com formação e especialidades diferentes. Desde o planejamento até a publicação no servidor, um projeto passa por várias fases nas mãos de diferentes profissionais. Podemos dividir estes profissionais em 2 grandes grupos. De um lado temos profissionais de <strong>design, experiência de usuário (<abbr title="User Experience">UX</abbr>) e arquitetos da informação</strong>. De outro temos os <strong>programadores de interface e os desenvolvedores server side</strong>.  <strong class="pullquote">Geralmente os profissionais de experiência do usuário não entendem de tecnologia e desenvolvimento como deveriam e de igual modo os desenvolvedores não entendem de usabilidade, acessibilidade e design centrado no usuário como deveriam entender.</strong> Cada grupo com suas especialidades e cada grupo com, digamos, &#8220;objetivos&#8221; diferentes. Os profissionais de UX querem que o projeto seja fácil de navegar, de encontrar informações e intuitivo. Os desenvolvedores querem que a aplicação funcione sem erros e que cumpra os requisitos que receberam no início do projeto. O que faz com que esses dois grupos tenham tantas divergências no desenvolvimento do projeto?</p>
<p>Eu atribuo esse dilema a um problema característico de cada grupo. Geralmente os profissionais de experiência do usuário não entendem de tecnologia e desenvolvimento como deveriam e de igual modo os desenvolvedores não entendem de <strong>usabilidade, acessibilidade e <a href="http://revolucao.etc.br/archives/design-centrado-usuario/">design centrado no usuário</a></strong> como deveriam entender. Estou sendo simplista? Talvez, mas eu acredito que este seja a raiz dos principais problemas de divergência entre equipes.</p>
<p>Eu comecei a trabalhar com internet focado em desenvolvimento, design e programação de interfaces e só depois de muito tempo é que migrei para arquitetura da informação e design centrado no usuário. Até hoje eu perambulo pelos dois mundos. Este texto é uma reflexão de problemas que observei cumprindo os diferentes papeis e eu adoraria muito saber a opinião de vocês sobre eles. Vamos lá:</p>
<h2>Não entender nada de tecnologia e de desenvolvimento</h2>
<p>Essa é a principal acusação que os desenvolvedores fazem aos designers de interface, planejadores, arquitetos da informação e outros profissionais de UX. Muitas vezes os desenvolvedores estão certos. Vejamos alguns problemas:</p>
<p><strong class="enfase">Falta de alinhamento com escopo:</strong> Os profissionais de UX acham que sempre é possível alterar a interface sem mexer em banco de dados, etc. Nem sempre. Se o projeto, por exemplo, for uma manutenção em um sistema legado, onde apenas a camada de apresentação será alterada, nem sempre dá para tratar as informações de forma diferente como implementada na versão anterior. Tudo depende de como o banco foi estruturado. As vezes dá e as vezes não dá. As vezes o profissional de UX cria uma interface fantástica, muito útil ao usuário, muito fácil de navegar e de encontrar mas não existe tempo hábil para alterar toda a estrutura de banco de dados só para sustentar a tal interface foda. Ou seja, por mais que o profissional de planejamento esteja bem intencionado, ele também precisa seguir o escopo do projeto. Porque os gerentes de projetos e líderes vão cobrar exatamente isso dos desenvolvedores: seguir os requisitos conforme foram definidos. Quer alterar alguma parte do escopo? Então chame os gerentes e o representante dos desenvolvedores para solicitar alterações de escopo e deixar claro pra todos as justificativas de alteração.</p>
<p><strong class="enfase">Demonstrar na cara do desenvolvedor que você acha que tudo é fácil de ser feito:</strong> Profisisonais de experiência de usuário muitas vezes acham que alterar uma interface no meio do projeto é algo &#8220;fácil&#8221;. Banco de dados são estruturados para serem otimizados de acordo com o que foi planejado. Se um projeto está no meio, muito provavelmente todo o banco já foi modelado e estruturado. É possível alterá-lo? Claro que sim, mas tudo depende do prazo e do tempo hábil para fazer. Não considere e não fique aborrecido se algo não der para ser feito (sempre considerando, prazo, cobrança e tempo hábil). Nem tudo é fácil de ser implementado.</p>
<p><strong class="enfase">Desconhecer contextos de desenvolvimento:</strong> Eu sei o valor que uma busca bem desenvolvida agrega a um projeto. Mas alguns tratamentos finos são muito, muito complexos de serem colocados em prática. Um dicionário de sinônimos (ou tesauro), por exemplo, é uma funcionalidade &#8220;linda&#8221;. Desenvolvedores precisam lidar com mensuração de carga no servidor, quantidade de consultas, precisam definir se buscas serão pré-indexadas ou não, quantos usuários o servidor aguenta se buscas forem realizadas no mesmo segundo sem derrubar o site, onde ele ficará hospedado etc. Implementar uma funcionalidade &#8220;fina&#8221; em um site com uma infra-estrutura muito pequena, poderá acarretar em um site muito lento devido a toda carga gerada no servidor. Nestes casos, se aquilo que o profissional de UX planejou for implementado, poderá acarretar em uma experiência de usuário lenta e desestimulante. Em resumo, conhecer o contexto de desenvolvimento é fundamental. E uma boa experiência de usuário no resultado final de um projeto, depende de alinhamento do contexto do projeto.</p>
<p><strong class="enfase">Desenhar telas sem consultar os analistas:</strong> Essa é clássica. Nunca mostre uma interface, wireframe ou o que for ao cliente sem ter certeza que dá pra ser feito, se a informação vai existir em banco, etc. Estamos falando de projetos já fechados. Se você está em fase de planejamento do projeto, apenas certifique que o analista entendeu como será o funcionamento e a natureza do tipo de informação que você pretende printar na tela. Tudo dá para ser feito e não custa nada perguntar e definir com quem vai desenvolver. Não estamos falando em &#8220;pedir bença&#8221; pro desenvolvedor, estamos falando apenas de alinhar com o que você está em mente. Consultar o desenvolvedor sobre certa implementação não deve fazer você se sentir inferior, com o tempo, você verá que você vai aprender muito sobre como as coisas são desenvolvidas e certas dúvidas que você tem hoje, não as terá no futuro.</p>
<h2>Não entender nada de design e experiência de usuário</h2>
<p>Esta é a principal acusação dos profissionais de experiência de usuário, arquitetura da informação, etc. Desenvolvedores na maioria das vezes não sabem o que é <a href="http://revolucao.etc.br/archives/design-centrado-usuario/">design centrado no usuário</a>. E sabe o que é curioso? <strong>Eles também estão certos</strong>. Muitos desenvolvedores são hábeis e excelentes em programação mas desconsideram boas práticas de interface, funcionalidade, etc. Vejamos alguns problemas:</p>
<p><strong class="enfase">Não seguir boas práticas de desenvolvimento:</strong> Muitos desenvolvedores acham que o sucesso de um projeto está no fato de ele &#8220;não dar pau&#8221;. Ou seja, se tudo &#8220;funciona&#8221;, se o site não cai, o projeto foi um sucesso. <strong>Estes são os piores tipos de desenvolvedores que eu conheço</strong>. São capazes de ignorar qualquer outro requisito que não seja os &#8220;explícitos&#8221;. <strong class="pullquote">Deixar de seguir boas práticas de desenvolvimento é deixar de pensar no usuário.</strong> SEO, acessibilidade, separar conteúdo da apresentação e outros detalhes do desenvolvimento melhoram a experiência de usuário e nem sempre são requisitos que chegam documentados. Depende do &#8220;bom senso&#8221; do desenvolvedor. Deixar de seguir boas práticas de desenvolvimento é deixar de pensar no usuário. E muitas vezes os desenvolvedores poderiam fazer algo a respeito mas preferem colocar a culpa na falta de documentação.</p>
<p><strong class="enfase">Achar que design é apenas deixar uma tela bonitinha</strong>: Se você pensa assim, precisa se informar melhor do que é <a href="http://revolucao.etc.br/archives/design-centrado-usuario/">design</a>. Se tivesse um pouco mais de conhecimento saberia que desenvolvimento de software e aplicações web também <a href="http://en.wikipedia.org/wiki/Design#Design_disciplines">é uma disciplina de design</a>. E design é feito para usuários. Existem milhares de boas práticas relacionadas a interação do usuário, comunicação de erros, agrupamentos de informação, organização, feedback ao usuário, etc. Design é um conjunto de definições que deve ser centrado no usuário. A tela nem precisa ser &#8220;bonitinha&#8221; mas precisa ser fácil de usar.</p>
<p><strong class="enfase">Achar que a atenção a detalhes é frescura:</strong> Uma vez ocorreu o seguinte caso: um sistema possuía um grid de resultado de busca com paginação. Se você estava em um intervalo x da paginação (página 15 de 40, por exemplo) e acessasse um dos registros, ao dar backspace ou usar o voltar do browser ou salvar o registro, o usuário era sempre levado a página 1 do resultado de busca. Eu disse que, ao &#8220;voltar&#8221;, o usuário deveria ser levado exatamente para a página da paginação em que ele estava anteriormente. Um dos desenvolvedores achou aquilo uma &#8220;frescura&#8221;. Mas são detalhes assim que tornam a vida do usuário útil. Estes detalhes poupam tempo quando pensamos que o usuário do tal sistema faz isso várias vezes ao dia. Imagine que toda vez que o usuário volta para a página 1 da paginação, ele precisa dar pelo menos 1 clique (no mínimo) a mais para voltar na página 15. Pense em quantos cliques e carregamentos de página eu não conseguiria economizar em 15 usuários que trabalham no sistema 6 horas por dia. Entendeu o porque eu preciso <strong>pensar no usuário</strong>?</p>
<h2>Como essa relação pode ser melhor?</h2>
<p>Em todos os projetos de sucesso que eu trabalhei, os projetos só foram um sucesso por causa do alinhamento entre os profissionais sobre qual é o objetivo do projeto, e não o objetivo individual de cada um como profissional. E para isso é fundamental todo mundo entender qual será a contribuição de cada um. O desenvolvedor só odeia os profissionais de UX quando estes se acham superiores aos desenvolvedores. Acham que por eles não &#8220;entenderem&#8221; de design centrado no usuário, não deveriam participar do planejamento. Se você deixar o desenvolvedor entender a importância do trabalho de UX, se mostrar sobre quais bases seu trabalho está fundamentado é bem possível que ele se interesse por boas práticas de desenvolvimento para alcançar seus objetivos.</p>
<p>Já os profissionais de UX odeiam os desenvolvedores quando os mesmos os tratam como ignorantes em TI. Tratam os profisisonais como se não fossem profissionais de &#8220;web&#8221;, quando na verdade os dois grupos lidam com tecnologia o tempo inteiro. Acham que tudo o que vem dos caras de UX é frescura e tudo o que eles planejam só serve para tornar o projeto mais caro. Profisisonais de UX não precisam ser especialistas em desenvolvimento como você, e eles são muito capazes de compreender como as coisas são gravadas e recuperadas em banco, assim como você. O que é necessário é treiná-los para entender mais sobre desenvolvimento e fugir das pequenas armadilhas do dia a dia.</p>
<p>Não estou falando que todo profisisonal de experiência de usuário precisa estudar programação e nem que todo desenvolvedor precisa ser especialista em arquitetura da informação. Mas eu defendo que os dois lados precisam conhecer melhor a especialidade do outro. Cursos e workshops de tecnologia, desenvolvimento e experiência de usuário irá agregar muito em todos os times. Um não é mais importante que o outro, porque um trabalho excelente nunca vai existir sem um desenvolvimento decente e uma boa usabilidade.</p>
<h2>TI influencia na experiência final</h2>
<p>Veja abaixo apenas 3 exemplos de como a forma com que um site é desenvolvido pode contribuir ou atrapalhar a experiência que o usuário terá:</p>
<ul>
<li><strong class="enfase">Site lento:</strong> Implemente <a href="http://developer.yahoo.com/yslow/">cache, etags, expire header</a>, reduza o número de consultas o quanto for possível. Isso é tão sério do ponto de vista do usuário que o <a href="http://googlewebmastercentral.blogspot.com/2010/04/using-site-speed-in-web-search-ranking.html">Google resolver atualizar o algoritmo do pagerank</a> e colocou o tempo de carregamento como um fator importante para a relevância de um site. Sites mais lentos faz com que os usuários permaneçam menos tempo navegando dentro deles.</li>
<li><strong class="enfase">Acessibilidade:</strong> Desde atribuir o pseudo elemento <em>:focus</em> no CSS até fazer com que um formulário funcione sem javascript, são implementações que melhoram a <a href="http://revolucao.etc.br/archives/vamos-falar-de-acessibilidade/">acessibilidade</a> para os usuários. Já navegou com a tecla tab em um site que não possui o <em>:focus</em> definido? Acessibilidade não é só para cegos.</li>
<li><strong class="enfase">SEO:</strong> SEO não são macetes para trapacear com os mecanismos de busca. SEO trata-se de fazer com que seu site seja mais amigável para os mecanismos de busca, para que consequentemente seja também mais fácil de ser encontrado pelos usuários que precisam da informação que o site que você está desenvolvendo possui. Isso chama-se &#8220;encontrabilidade&#8221;. A forma com que o conteúdo do site é tratada (semanticamente falando) pode facilitar (código semântico) ou dificultar (código porco dependente de JavaScript) o acesso ao mesmo.</li>
</ul>
<p>Pronto, desabafei! Até a próxima!<strong>Artigos relacionados:</strong>
<ul class="similar-posts">
<li><a href="http://revolucao.etc.br/archives/o-que-diabos-um-web-designer-faz/" rel="bookmark" title="25/09/2006">O que diabos um web designer faz?</a></li>
<li><a href="http://revolucao.etc.br/archives/comecando-a-desenvolver-para-a-web-a-partir-do-usuario-e-nao-da-maquina/" rel="bookmark" title="01/05/2007">Começando a desenvolver para a web à partir do usuário e não da máquina</a></li>
<li><a href="http://revolucao.etc.br/archives/qual-o-papel-dos-web-standards-na-arquitetura-da-informacao/" rel="bookmark" title="09/09/2006">Qual o papel dos web standards na arquitetura da informação?</a></li>
<li><a href="http://revolucao.etc.br/archives/foco-na-experiencia-do-usuario-e-para-todos/" rel="bookmark" title="09/11/2007">Foco na experiência do usuário é para todos</a></li>
<li><a href="http://revolucao.etc.br/archives/tutorial-de-arquitetura-da-informacao-em-portugues/" rel="bookmark" title="02/05/2008">Tutorial de arquitetura da informação em português</a></li>
<li><a href="http://revolucao.etc.br/archives/top-7-paradigmas-de-um-projeto-para-web/" rel="bookmark" title="13/05/2007">Top 7 paradigmas de um projeto para web</a></li>
<li><a href="http://revolucao.etc.br/archives/book-review-o-design-do-dia-a-dia-de-donald-a-norman/" rel="bookmark" title="27/02/2008">Book Review: O Design do dia a dia de Donald A. Norman</a></li>
</ul>
<p><!-- Similar Posts took 36.268 ms --></p>
Similar Posts:<ul><li><a href="http://revolucao.etc.br/archives/design-de-navegacao-web/" rel="bookmark" title="29/12/2009">Book Review: Design de Navegação Web</a></li>

<li><a href="http://revolucao.etc.br/archives/wasp-interact-curso-gratuito-de-desenvolvimento-para-web/" rel="bookmark" title="31/03/2010">WaSP Interact &#8211; Curso gratuito de desenvolvimento para web</a></li>

<li><a href="http://revolucao.etc.br/archives/3%c2%ba-encontro-brasileiro-de-arquitetura-de-informacao-ebai/" rel="bookmark" title="30/09/2009">3º Encontro brasileiro de Arquitetura de Informação &#8211; EBAI</a></li>

<li><a href="http://revolucao.etc.br/archives/design-centrado-usuario/" rel="bookmark" title="30/03/2010">Diferença entre &#8220;Design Centrado no Usuário&#8221; e &#8220;Design Centrado no Designer&#8221;</a></li>

<li><a href="http://revolucao.etc.br/archives/o-que-diabos-um-web-designer-faz/" rel="bookmark" title="25/09/2006">O que diabos um web designer faz?</a></li>
</ul><!-- Similar Posts took 11.625 ms --><div class="feedflare">
<a href="http://feeds.feedburner.com/~ff/Revolucao?a=lvvNcOH5E8o:Tr0kp7xdswk:yIl2AUoC8zA"><img src="http://feeds.feedburner.com/~ff/Revolucao?d=yIl2AUoC8zA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Revolucao?a=lvvNcOH5E8o:Tr0kp7xdswk:dnMXMwOfBR0"><img src="http://feeds.feedburner.com/~ff/Revolucao?d=dnMXMwOfBR0" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Revolucao?a=lvvNcOH5E8o:Tr0kp7xdswk:aKCwKftKxY0"><img src="http://feeds.feedburner.com/~ff/Revolucao?i=lvvNcOH5E8o:Tr0kp7xdswk:aKCwKftKxY0" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Revolucao?a=lvvNcOH5E8o:Tr0kp7xdswk:7Q72WNTAKBA"><img src="http://feeds.feedburner.com/~ff/Revolucao?d=7Q72WNTAKBA" border="0"></img></a> <a href="http://feeds.feedburner.com/~ff/Revolucao?a=lvvNcOH5E8o:Tr0kp7xdswk:D7DqB2pKExk"><img src="http://feeds.feedburner.com/~ff/Revolucao?i=lvvNcOH5E8o:Tr0kp7xdswk:D7DqB2pKExk" border="0"></img></a>
</div><img src="http://feeds.feedburner.com/~r/Revolucao/~4/lvvNcOH5E8o" height="1" width="1"/><img src="http://feeds.feedburner.com/~r/feedburner/Revolucao/~4/7G58hrWyUkE" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://revolucao.etc.br/archives/desenvolvedores-sao-de-marte-e-profissionais-de-ux-sao-de-venus/feed/</wfw:commentRss>
		<slash:comments>15</slash:comments>
		<feedburner:origLink>http://revolucao.etc.br/archives/desenvolvedores-sao-de-marte-e-profissionais-de-ux-sao-de-venus/</feedburner:origLink><feedburner:origLink>http://feedproxy.google.com/~r/Revolucao/~3/lvvNcOH5E8o/</feedburner:origLink></item>
	</channel>
</rss><!-- Dynamic page generated in 1.000 seconds. --><!-- Cached page generated by WP-Super-Cache on 2010-09-02 20:31:53 --><!-- Compression = gzip -->
