<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	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/"
	>

<channel>
	<title>blog.webtopia &#187; Webdesigner</title>
	<atom:link href="http://webtopia.com.br/blog/tag/webdesigner/feed/" rel="self" type="application/rss+xml" />
	<link>http://webtopia.com.br/blog</link>
	<description></description>
	<lastBuildDate>Wed, 18 Aug 2010 17:58:53 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>10 Dicas para Otimização de Imagens</title>
		<link>http://webtopia.com.br/blog/10-dicas-para-otimizacao-de-imagens/</link>
		<comments>http://webtopia.com.br/blog/10-dicas-para-otimizacao-de-imagens/#comments</comments>
		<pubDate>Wed, 30 Jun 2010 02:05:47 +0000</pubDate>
		<dc:creator>rafab</dc:creator>
				<category><![CDATA[Developer]]></category>
		<category><![CDATA[SEO]]></category>
		<category><![CDATA[Tutoriais]]></category>
		<category><![CDATA[Development]]></category>
		<category><![CDATA[Imagens]]></category>
		<category><![CDATA[Otimização]]></category>
		<category><![CDATA[Webdesigner]]></category>

		<guid isPermaLink="false">http://webtopia.com.br/blog/?p=661</guid>
		<description><![CDATA[<a href=http://webtopia.com.br/blog/10-dicas-para-otimizacao-de-imagens/><img src=http://webtopia.com.br/blog/wp-content/uploads/2010/06/otimizacao-de-imagens-1-150x150.jpg class=imgtfe hspace=5 align=left width=100  border=0></a>É fato que a busca por imagem leva o usuário a conhecer o site, eu mesmo conheço bons sites e blogs quando procuro por alguma imagem. A otimização de imagens ainda é sub-aproveitada. Profissionais de SEO precisam estar antenados a este detalhe, a imagem leva o usuário ao site e isso é extremamente importante. O ]]></description>
			<content:encoded><![CDATA[<p style="text-align: justify;">É fato que a busca por imagem leva o usuário a conhecer o site, eu mesmo conheço bons sites e blogs quando procuro por alguma imagem. A otimização de imagens ainda é sub-aproveitada. Profissionais de SEO precisam estar antenados a este detalhe, a imagem leva o usuário ao site e isso é extremamente importante. O Google recentemente mudou a forma de apresentação dos resultados de pesquisa e deu grande relevância as imagens, tanto é que agora miniaturas de imagens são exibidas no resultado da busca.</p>
<p style="text-align: justify;">Veja imagem abaixo.</p>
<p style="text-align: center;"><img class="size-full wp-image-662 aligncenter" style="border: 0px none currentColor;" title="otimizacao-de-imagens-1" src="http://webtopia.com.br/blog/wp-content/uploads/2010/06/otimizacao-de-imagens-1.jpg" alt="" width="480" height="271" /></p>
<p style="text-align: justify;">Nós consumidores somos visuais, precisamos ver para comprar. Os e-commerces já estão percebendo esta oportunidade e já trabalham para melhorar seu rankeamento nos motores de buscas. O mercado ainda irá falar muito sobre isso e otimização de imagens será de grande importância para qualquer planejamento de SEO.</p>
<p style="text-align: justify;">Vantagens da otimização de imagens:</p>
<p style="text-align: justify;">- Menos competição. Otimização de imagem ainda é sub-aproveitada;</p>
<p style="text-align: justify;">- Consumidores prezam anúncios com imagens;</p>
<p style="text-align: justify;">- Suas imagens serão utilizadas por outros usuários e assim seu site será divulgado. Para isso, não esqueça da marca d’agua;</p>
<p style="text-align: justify;">- Não se paga pelo clique como ocorre com Links Patrocinados.</p>
<p><BR></p>
<h2 style="text-align: justify;">10 Dicas para Otimização de Imagens</h2>
<p><BR></p>
<p style="text-align: justify;">1 – Utilize imagens originais. Fotografe você mesmo as fotos ou pague para alguém fotografar. Assim você poderá inserir sua marca d’agua e divulgar seu site quando usuários replicarem;</p>
<p style="text-align: justify;">2 – Imagens com alto contraste são as mais indicadas para miniaturas pois ajudam o usuário a discenir melhor o conteúdo da foto. Reparem na miniatura abaixo, a imagem da esquerda foi alterada aumentando seu contraste, já a imagem da direita permaneceu original. A imagem com contraste exibe maiores detalhes do produto, dando mais destaque ao que realmente interessa;</p>
<p style="text-align: center;"><img class="size-full wp-image-663 aligncenter" style="border: 0px none currentColor;" title="otimizacao-de-imagens-contraste" src="http://webtopia.com.br/blog/wp-content/uploads/2010/06/otimizacao-de-imagens-contraste.jpg" alt="" width="257" height="216" /></p>
<p style="text-align: justify;">3 – Utilize imagens em JPG. Imagens nesta extensão são representadas como fotos pelos motores de buscas, fotos = milhões de cores, ou seja, mais qualidade. Já as GIFs são representadas como imagem padrão de 256 cores;</p>
<p style="text-align: justify;">4 – Nomeie as imagens com a keyword do conteúdo. Por exemplo: viagem-europa.jpg. É claro que o nome do arquivo precisa realmente representar o que a imagem exibe. O nome do arquivo será exibido logo abaixo da miniatura da imagem, ajudando assim a reforçar a comunicação aos usuários;</p>
<p style="text-align: justify;">5 – Tag Alt com keywords relevantes ao conteúdo. Por exemplo: &lt;img src=”viagem-europa.jpg” alt=”Viagem para Europa nas férias” /&gt;. Jamais esqueça da Tag Alta das imagens, ela é extremamente importante e muito significativa;</p>
<p style="text-align: justify;">6 – Otimize o conteúdo do site próximo a imagem. Mecanismos de buscas, principalmente o Google, prezam quando há texto com keywords semelhantes as utilizadas para nomear o arquivo e na Tag Alt;</p>
<p style="text-align: justify;">7 – Além de otimizar o conteúdo próximo a imagem,  lembre-se também de otimizar a Meta Title, Meta Description e Heading Tags (H1, H2…);</p>
<p style="text-align: justify;">8 – Qualidade das imagens. Procure reduzir o tamanho e a qualidade das imagens. Mas não deixe perder a nitidez. Se puder deixar um link para a imagem em alta resolução é interessante;</p>
<p style="text-align: justify;">9 – Compartilhe as fotos no Flickr e outros álbuns online que permitem buscas externas;</p>
<p style="text-align: justify;">10 – Não use Javascript para linkar imagens, motores de buscas não seguem links em Javascript.</p>
<p style="text-align: justify;">
<p style="text-align: right;"><span style="color: #888888;"><em>fonte: eunaoseiseo</em></span></p>
]]></content:encoded>
			<wfw:commentRss>http://webtopia.com.br/blog/10-dicas-para-otimizacao-de-imagens/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Ferramentas para combinação de cores</title>
		<link>http://webtopia.com.br/blog/ferramentas-para-combinacao-de-cores/</link>
		<comments>http://webtopia.com.br/blog/ferramentas-para-combinacao-de-cores/#comments</comments>
		<pubDate>Sat, 13 Mar 2010 13:37:49 +0000</pubDate>
		<dc:creator>rafab</dc:creator>
				<category><![CDATA[Design]]></category>
		<category><![CDATA[Dica]]></category>
		<category><![CDATA[Ferramentas]]></category>
		<category><![CDATA[Webdesigner]]></category>

		<guid isPermaLink="false">http://webtopia.com.br/blog/?p=534</guid>
		<description><![CDATA[<a href=http://webtopia.com.br/blog/ferramentas-para-combinacao-de-cores/><img src=http://webtopia.com.br/blog/wp-content/uploads/2010/03/kuler-150x150.jpg class=imgtfe hspace=5 align=left width=100  border=0></a>Os artistas, designers e arquitetos usam as cores para causar situações na percepção humana. As cores podem se combinar para geração destes efeitos]]></description>
			<content:encoded><![CDATA[<h2><a href="http://kuler.adobe.com/#" target="_blank">Kuler</a></h2>
<p><a href="http://kuler.adobe.com/#" target="_blank"><img class="alignnone size-full wp-image-535" style="border: 0px none currentColor;" title="kuler" src="http://webtopia.com.br/blog/wp-content/uploads/2010/03/kuler.jpg" alt="" width="400" height="183" /> </a></p>
<h2><a href="http://www.com/online.html" target="_blank">Color Schemer Online </a></h2>
<p><a href="http://www.com/online.html" target="_blank"><img class="alignnone size-full wp-image-536" style="border: 0px none currentColor;" title="colorschemerv2" src="http://webtopia.com.br/blog/wp-content/uploads/2010/03/colorschemerv2.jpg" alt="" width="400" height="183" /></a></p>
<h2><a href="http://www.com/online.html" target="_blank">Color Schemer </a></h2>
<p><a href="http://www.colorschemer.com/schemes/" target="_blank"><img class="alignnone size-full wp-image-537" style="border: 0px none currentColor;" title="colorschemer" src="http://webtopia.com.br/blog/wp-content/uploads/2010/03/colorschemer.jpg" alt="" width="400" height="183" /></a></p>
<h2><a href="http://colorschemedesigner.com/previous/colorscheme2/index-en.html" target="_blank">Color Scheme  Generator</a></h2>
<p><a href="http://colorschemedesigner.com/previous/colorscheme2/index-en.html" target="_blank"><img class="alignnone size-full wp-image-539" style="border: 0px none currentColor;" title="colorschemedesignprevious" src="http://webtopia.com.br/blog/wp-content/uploads/2010/03/colorschemedesignprevious.jpg" alt="" width="400" height="183" /></a></p>
<h2><a href="http://colorschemedesigner.com/" target="_blank">Color Scheme Designer</a></h2>
<p><a href="http://colorschemedesigner.com/" target="_blank"><img class="alignnone size-full wp-image-540" style="border: 0px none currentColor;" title="colorschemedesign" src="http://webtopia.com.br/blog/wp-content/uploads/2010/03/colorschemedesign.jpg" alt="" width="400" height="183" /></a></p>
<h2><a href="http://www.colorcombos.com/" target="_blank">Color Combos </a></h2>
<p><a href="http://www.colorcombos.com/" target="_blank"><img style="border: 0px none currentColor;" title="colorcombos" src="http://webtopia.com.br/blog/wp-content/uploads/2010/03/colorcombos.jpg" alt="" width="400" height="183" /> </a><BR><BR></p>
<h2>ColourLovers</h2>
<p>E o mais abrangende site sobre o tema, o <a href="http://www.colourlovers.com/" target="_blank">ColourLovers</a>:</p>
<p><a href="http://www.colourlovers.com/" target="_blank"><img class="alignnone size-full wp-image-541" style="border: 0px none currentColor;" title="colourlovers" src="http://webtopia.com.br/blog/wp-content/uploads/2010/03/colourlovers.jpg" alt="" width="500" height="172" /></a></p>
]]></content:encoded>
			<wfw:commentRss>http://webtopia.com.br/blog/ferramentas-para-combinacao-de-cores/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Grids são bons (certo?)</title>
		<link>http://webtopia.com.br/blog/grids-sao-bons-certo/</link>
		<comments>http://webtopia.com.br/blog/grids-sao-bons-certo/#comments</comments>
		<pubDate>Wed, 10 Feb 2010 04:02:29 +0000</pubDate>
		<dc:creator>rafab</dc:creator>
				<category><![CDATA[Design]]></category>
		<category><![CDATA[Tutoriais]]></category>
		<category><![CDATA[Webdesigner]]></category>

		<guid isPermaLink="false">http://webtopia.com.br/blog/?p=433</guid>
		<description><![CDATA[<a href=http://webtopia.com.br/blog/grids-sao-bons-certo/><img src=http://webtopia.com.br/blog/wp-content/uploads/2010/02/grids_are_good-150x150.jpg class=imgtfe hspace=5 align=left width=100  border=0></a>"A grade é a manifestação mais viva da vontade de ordem no design gráfico".
Artigo sobre o uso de grids, no Web-design. Apresentação muito boa para designers]]></description>
			<content:encoded><![CDATA[<p><object style="margin:0px" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="425" height="355" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="allowFullScreen" value="true" /><param name="allowScriptAccess" value="always" /><param name="src" value="http://static.slidesharecdn.com/swf/ssplayer2.swf?doc=grids-are-good-right-29523&amp;rel=0&amp;stripped_title=grids-are-good-right" /><param name="allowfullscreen" value="true" /><embed style="margin:0px" type="application/x-shockwave-flash" width="425" height="355" src="http://static.slidesharecdn.com/swf/ssplayer2.swf?doc=grids-are-good-right-29523&amp;rel=0&amp;stripped_title=grids-are-good-right" allowscriptaccess="always" allowfullscreen="true"></embed></object></p>
<p><img class="size-full wp-image-436  alignleft" title="grids_are_good" src="http://webtopia.com.br/blog/wp-content/uploads/2010/02/grids_are_good.jpg" alt="grids_are_good" width="180" height="178" /><BR>2007<BR>152 pages<BR> PDF<BR> 5Mb<BR> Article about using grid in Web-design.<br />
<a href="http://rapidshare.com/files/89116842/grids_are_good.rar" target="_blank">Download</a><br />
<BR><br />
<em>http://www.ebookpdf.net/</em></p>
]]></content:encoded>
			<wfw:commentRss>http://webtopia.com.br/blog/grids-sao-bons-certo/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Etapas do Desenvolvimento de Sites</title>
		<link>http://webtopia.com.br/blog/etapas-do-desenvolvimento-de-sites-2/</link>
		<comments>http://webtopia.com.br/blog/etapas-do-desenvolvimento-de-sites-2/#comments</comments>
		<pubDate>Tue, 03 Nov 2009 23:08:20 +0000</pubDate>
		<dc:creator>rafab</dc:creator>
				<category><![CDATA[Developer]]></category>
		<category><![CDATA[Webtopia]]></category>
		<category><![CDATA[Development]]></category>
		<category><![CDATA[tutorial]]></category>
		<category><![CDATA[Webdesigner]]></category>

		<guid isPermaLink="false">http://webtopia.com.br/blog/?p=308</guid>
		<description><![CDATA[<a href=http://webtopia.com.br/blog/etapas-do-desenvolvimento-de-sites-2/><img src=http://webtopia.com.br/blog/wp-content/uploads/2009/11/01-150x150.jpg class=imgtfe hspace=5 align=left width=100  border=0></a>Antes de inciar a construção de um website é importante que haja um planejamento do projeto dividindo-o em etapas para melhor organizar a execução das tarefas. Apresentamos a seguir uma sugestão de metodologia para este desenvolvimento]]></description>
			<content:encoded><![CDATA[<p style="text-align: justify;">Antes de inciar a construção de um website é importante que haja um planejamento do projeto dividindo-o em etapas para melhor organizar a execução das tarefas. Apresentamos a seguir uma sugestão de metodologia para este desenvolvimento dividindo o processo nas seguintes etapas:</p>
<p style="text-align: center;"><strong>Definição,  Arquitetura, Design, Implementação</strong></p>
<p style="text-align: justify;">A divisão do trabalho nestas etapas não significa a existência exata de uma fronteira entre elas. Na verdade, no decorrer do processo as etapas interagem enquanto são redefinidos detalhes do projeto. Grandes empresas geralmente têm equipes formadas por especialistas nas diversas tarefas de criação de um site. Cada um deles responsável por um assunto específico no projeto.</p>
<p><BR><br />
<h2>Definição</h2>
<p style="text-align: justify;">Esta é a primeira etapa do projeto de um website e tem início na primeira reunião com o cliente,  onde a equipe de projeto tem o primeiro envolvimento com o material que deve ser disponibilizado no site.</p>
<p>O material coletado nesta fase deve ser analisado pela equipe e os objetivos e soluções começam a se delinear. Aqui já podemos ter uma idéia incial dos módulos que teremos dentro do site.</p>
<p>É importante ressaltar que nesta fase o projeto deve se adequar às exigências de orçamento e prazos impostas e assim podemos limitar o escopo do projeto, considerando os diferentes módulos e tecnologias a serem empregadas.</p>
<p style="text-align: justify;"><strong>Pontos importantes : </strong></p>
<p style="text-align: justify"><strong><img class="alignleft" title="01" src="http://webtopia.com.br/blog/wp-content/uploads/2009/11/01.jpg" alt="01" width="208" height="160" />Objetivos X Orçamento </strong><br />
É importante definir qual o objetivo do site e o que o cliente está esperando de retorno deste trabalho; também precisamos definir o tempo estimado para finalização e disponibilização do site na rede. Estes parâmetros nos ajudam a delimitar o escopo do projeto e o tamanho do site em termos gerais.</p>
<p style="text-align: justify;"><strong>Levantamento de Fontes </strong><br />
As informações passadas pelo cliente nas reuniões iniciais devem ser anotadas para posterior discussão pela equipe, assim como devemos coletar todo o material disponível na forma de impressos ( folders, manuais, guias, etc )  ou já digitalizados em diferentes formatos eletrônicos ( textos em fomatos doc , pdf, outros;  planilhas Excel ; etc ) . Da mesma forma devemos coletar  imagens como fotografias (digitalizadas ou não ), logotipos , e também , se for o caso imagens em vídeo.</p>
<p style="text-align: justify;"><strong>Análise do Conteúdo </strong><br />
A equipe de projeto deve decidir num primeiro momento , frente ao material coletado , o que é interessante para constar no site e o que pode ser deixado de lado. Cada mídia tem sua especifidade e peculiaridades. Devemos ter em mente as limitações e recursos da Web ao selecionarmos o material passado pelo cliente.</p>
<p style="text-align: justify;">Observar também a qualidade de conservação do material, o que pode compremeter o resultado final da digitalização, e a atualidade das informações contidas em impressos. Nesta etapa podemos identificar diferentes ferramentas necessárias para manipular o material coletado e também para converter o que  já está digitalizado.</p>
<p style="text-align: justify;"><strong>Análise de Contexto </strong><br />
Uma vez que já temos definido o objetivo do nosso site devemos observar também em que cenário o trabalho estará sendo inserido. Para tanto é aconselhável uma visita a alguns  sites &#8220;concorrentes&#8221;  na procura de um certo diferencial que traria maior notoriedade ao site em desenvolvimento e eventualmente amior valor ao produto veiculado.</p>
<p style="text-align: justify;"><strong><img class="alignleft size-full wp-image-247" title="09" src="http://webtopia.com.br/blog/wp-content/uploads/2009/11/09.jpg" alt="09" width="208" height="160" />Público Alvo e Tecnologias Empregadas </strong><br />
Estar usando as últimas tecnologias disponíveis na rede nem sempre é o ideal em um site, uma vez que muitas destas tecnologias dependem de um plug-in instalado ou de uma configuração mínima de processador, vídeo, etc.  Precisamos ter uma idéia do perfil do nosso público alvo no que se refere ao tipo de equipamento e de software que utiliza, o tipo de resolução de vídeo mais comum (800&#215;600 ou 480&#215;640),  além de situar este público em termos sócio-culturais e econômicos. Conhecer o público alvo é um fator determinante não só na escolha das tecnologias, como também na linguagem que o site deve transmitir.</p>
<p style="text-align: justify;"><strong>Protótipo e Aprovação </strong><br />
Considerados os pontos citados acima, a equipe de projeto tem condições de apresentar um protótipo do site proposto contendo já alguns dos elementos de design e um primeiro nível de navegação para que o cliente possa ter uma idéia mais concreta sobre o produto que estará sendo desenvolvido. Uma vez aprovado este protótipo a equipe pode passar às novas fases do projeto.<br />
<BR><br />
<h2>Arquitetura</h2>
<p style="text-align: justify;">Nesta fase a equipe de projeto analisa as informações levantadas na etapa anterior , determinando a relevância do material recolhido, a estrutura da informação,  os diferentes grupos de informação que serão tratados no site, a prioridade como estas informações devem ser apresentadas.</p>
<p style="text-align: justify">Aqui devemos ter um bom senso em privilegiar as informações mais relevantes, considerando o objetivo do site, e colocar em destaque as seções mais importantes para o público alvo, facilitando ao máximo o acesso às informações procuradas.</p>
<p><strong>Pontos Importantes :</strong></p>
<p style="text-align: justify"><strong><img class="alignleft size-full wp-image-248" title="02" src="http://webtopia.com.br/blog/wp-content/uploads/2009/11/02.jpg" alt="02" width="208" height="160" />Definição da &#8220;Mensagem do site&#8221;</strong><br />
O que consideramos como objetivo do site deve aparecer de forma bem definida pela estrutura proposta.</p>
<p style="text-align: justify;"><strong>Estrutura da Informação</strong><br />
Esta tarefa consiste em agrupar as  informações, identificando-as  e separando em blocos  organizados por seções ou assuntos principais. Aqui podemos utilizar  gráficos que representem  toda a árvore de navegação onde podemos identificar a profundidade em níveis de hierarquia da informação e a largura do site referente ao número de blocos de informação em cada um dos níveis. É interessante que haja um certo equilíbrio entre largura e profundidade, pois sites com grande largura significam  opções e saídas em excesso a partir de uma mesma página (o que pode confundir o navegante) , e sites com muitos níveis de profundidade representam muitas páginas a serem carregadas até se chegar à informação procurada o que pode fazer com que o visitante desista de chegar ao final de sua busca.</p>
<p style="text-align: justify;"><strong>Recursos da Interface </strong><br />
Para cada um dos blocos de informação definidos devemos aproveitar os recursos que a interface nos oferece, determinando a melhor maneira de apresentar estas informações considerando diferentes mídias.  Não devemos esquecer das possibilidades de integração do site com recursos de Bancos de Dados que podem enriquecer o site propiciando um maior número de serviços a oferecer; tecnologias como ASP, Active Server Pages, da Microsoft possibilitam a geração de páginas dinâmicas a partir de informações previamente cadastradas em um banco de dados  Access. Programação Cgi ( C++,Perl, Java, &#8230; ) , e outros recursos e tecnologias proprietárias ou abertas ,  são de grande ajuda na implementação de funções mais complexas e tarefas  mais sofisticadas.<br />
Outra possibilidade é a inclusão de módulos de Comércio Eletrônico onde o visitante poderia estar adquirindo produtos e serviços on-line.</p>
<p style="text-align: justify;"><strong>Interatividade </strong><br />
Pensar como a interatividade deve estar presente no site quando ela se fizer necessária, e de que maneira, ou a que níveis. A interatividade deve estar presente se encaixar perfeitamente no contexto do site.</p>
<p style="text-align: justify"><strong><img class="alignleft size-full wp-image-249" title="03" src="http://webtopia.com.br/blog/wp-content/uploads/2009/11/03.jpg" alt="03" width="208" height="160" />Navegabilidade </strong><br />
Também definimos como será o processo de navegação pela interface, como o visitante poderá navegar pelo site. Podemos definir o trajeto como exploratório onde  ao interagir com o site o navegante vai aos poucos descobrindo suas diversas informações, funções e serviços, ou explanatório, onde de início já aparecem informadas e descritas de forma explícita o que se pode conseguir do site. As duas formas são válidas dependendo da situação em que apresentam.</p>
<p style="text-align: justify">Ainda em relação ao trajeto podemos definir diferentes formas de ligação entre os módulos definidos na estrutura do site permitindo possibilidades diferentes aos navegantes.</p>
<p style="text-align: justify">Podemos chamar de  navegação de  &#8220;circular&#8221;  onde de qualquer ponto podemos chegar diretamente aos outros módulos do site; neste caso a partir de qualquer página podemos alcançar as demais existentes no site , ou as páginas das seções principais.  Isto, a princípio, e o que mais facilitaria ao navegante percorrer o site.</p>
<p style="text-align: justify">Outro tipo de estrutura permite a navegação de forma sequencial, como se estivéssemos lendo um livro página após página. Em alguns casos isso pode ser interessante.</p>
<p style="text-align: justify">Podemos ainda pensar em estruturas rigidamente hierárquicas o que a princípio não parece ser interessante pois exige um excesso de vai e vem no site até que o navegante chegue ao final de sua busca.</p>
<p><BR><br />
<h2>Design</h2>
<p style="text-align: justify;">Uma vez definida a estrutura do site e sua funcionalidade, passamos a pensar na proposta gráfica apresentada pelo designer.  Aqui temos o encaixe da Arquitetura das Informações com o Projeto Gráfico, onde as metáforas visuais são incorporadas ao site auxiliando e melhorando a navegação proposta na fase anterior.</p>
<p><strong>Pontos Importantes :</strong></p>
<p style="text-align: justify"><strong><img class="alignleft size-full wp-image-250" title="04" src="http://webtopia.com.br/blog/wp-content/uploads/2009/11/04.jpg" alt="04" width="208" height="160" />Tipografia</strong><br />
Este é um detalhe de extrema importancia que muitas vezes não é levado em conta.  Existe uma série de estudos em relação ao uso de diferentes tipos de fonte possíveis. O tipo de fonte usado em seu site deve-se adequar à mensagem que você está querendo transmitir. Considere também o aspecto legal que rege a utilização e veiculação.</p>
<p style="text-align: justify">A lnguagem é bastante limitada no que se refere à tipografia. Alguns tipo de fonte são definidos no Html padrão e outras podem ser utilizadas através de diretivas específicas que referenciam fontes supostamente instaladas no cliente; como nem sempre o cliente tem a fonte especificada perdemos o controle sobre o que será apresentado.</p>
<p style="text-align: justify">A disponibilização de imagens na forma de gráficos contorna este problema mas depara em outros como descrito a seguir. Via de regra utilizamos gráficos para representar textos quando se trata de títulos, banners ou outras chamadas na forma de ícones dentro do site.</p>
<p style="text-align: justify"><strong></p>
<p style="text-align: justify">
<p></strong></p>
<p style="text-align: justify">
<p style="text-align: justify">
<p style="text-align: justify">
<p style="text-align: justify;"><strong>Redação de textos </strong><br />
Na fase de definição levantamos parte do material na forma de textos que deverão ser revistos, algumas vezes redigitados, ou importados de diferentes formatos. Devemos nos lembrar que a forma de apresentação de textos na rede tem suas peculiaridades; geralmente o visitante do site não dispõe de tempo e paciência para ler textos demasiadamente extensos na frente de um monitor. É aconselhável então apresentar textos na forma resumida e possibilitar o acesso a textos na íntegra no forma de documentos no formato PDF ( Adobe )  ou  DOC ( Microsoft ).   A apresentação do texto em colunas que não preencham toda a extensão horizontal da tela também facilitam a leitura.</p>
<p style="text-align: justify;">O tipo de fonte utilizado também devem seguir alguns padrões. Sugerimos a utilização da fonte Arial ( ou Helvética ) , tamanho 10 para textos genéricos, 12 para textos em destaque, e 8 para observações sem muito destaque.   Também é possível disponibilizar textos na forma de imagem, eliminando assim o problema de visualização caso o visitante não possua a fonte usada no site;  no entanto esse procedimento recebe algumas críticas devido ao tamanho das imagens e impossibilidade de pesquisa por palavra chave dentro destes textos.</p>
<p style="text-align: justify;"><strong><img class="alignleft size-full wp-image-251" title="05" src="http://webtopia.com.br/blog/wp-content/uploads/2009/11/05.jpg" alt="05" width="208" height="160" />Criação de Imagens </strong><br />
As imagens utilizadas em um site são, via de regra, nos formatos .GIF (Graphics Interchange Format)  e .JPG ( Joint Photographics Experts Group )  , assim sendo , algumas das imagens já digitalizadas , obtidas na fase incial, talvez devam ser transformadas para os padrões citados.</p>
<p style="text-align: justify;">Para visualização das imagens no vídeo não necessitamos de alta resolução nas imagens, sendo aconselhável a densidade de 72 dpi, o que resulta em imagens mais reduzidas em bytes que facilitam o tráfego pela rede.</p>
<p style="text-align: justify;">As imagens coletadas na fase inicial e que ainda não estão digitalizadas devem então ser escaneadas ( observando a densidade de 72 dpi já citada ) e tratadas em softwares específicos como  Adobe Photoshop ,  Paint Shop Pro , ou similares.</p>
<p style="text-align: justify"><strong> </strong></p>
<p><BR></p>
<h2 style="text-align: justify">Implementação</h2>
<p style="text-align: justify;">Esta é a fase final do desenvolvimento do site que já aprovado pelo cliente deve ser então ser disponibilizado na rede.  Temos assim uma finalização da criação de todas as páginas, imagens, e outras mídias.</p>
<p style="text-align: justify"><strong>Pontos Importantes :</strong></p>
<p style="text-align: justify"><strong> </strong></p>
<p style="text-align: justify"><strong><img class="alignleft size-full wp-image-252" title="07" src="http://webtopia.com.br/blog/wp-content/uploads/2009/11/07.jpg" alt="07" width="208" height="160" />Programação</strong><br />
Nesta etapa temos a finalização e integração de todas as páginas e  programação cgi , verificação de todos os links, etc.  Uma especial atenção deve ser dada ao caminho dos links que eventualmente não serão os mesmo no servidor.</p>
<p style="text-align: justify"><strong>Teste da Interface</strong><br />
É importante uma verificação final de todo o site enfim de analisar se a interface está correspondendo ao esperado na fase de Definição. Verficar a visualização em diferentes browsers e versões e também em diferentes modos de configuração de monitor e definição de cores. Observar se não há falhas na lógica de navegação.</p>
<p style="text-align: justify"><strong>Definição do servidor</strong><br />
Faça um estudo prévio das necessidades de hardware e software antes de decidir por um ou outro servidor.<br />
Empresas que hospedam páginas têm diferentes políticas de preços de acordo com  tamanho do site e o tipo de serviços disponíveis, como endereços e-mail, contadores de acesso, tratamemto de formulários, integração com banco de dados, etc.  A definição do endereço também interfere no preço como descrito a seguir.</p>
<p style="text-align: justify">Além do preço, devemos considerar as especificações técnicas sem as quais o site se tornará deficiente.  Existem diferentes servidores Web disponíveis no mercado; o uso de certas tecnologias como disponibilização de bancos de dados integrados ao site por exemplo, depende de servidores específicos de determinados fabricantes; o mesmo para disponibilização de outras mídias como som e vídeo. Também questões referentes à velocidade do link devem ser levadas em conta.</p>
<p><strong>Definição do endereço (URL)</strong><br />
O endereço do site (URL &#8211; Uniforme Resource Locator)  indica o entrada inicial de nosso site.</p>
<p style="text-align: justify">Pode aparecer como um domínio próprio  (www.suaempresa.com.br)  ou sublocado (www.servidor.com.br/suaempresa) ; as duas formas de disponibilização são válidas sendo que o endereço com domínio próprio depende de cadastramento junto aos órgãos que controlam a definição de endereços (registro.br, no Brasil e Internic nos Estados Unidos).</p>
<p style="text-align: justify"><strong><img class="alignleft size-full wp-image-253" title="10" src="http://webtopia.com.br/blog/wp-content/uploads/2009/11/10.jpg" alt="10" width="180" height="227" />Upload  de  arquivos</strong><br />
Uma vez definido o servidor e o domínio devemos tranferir todos os arquivos para a máquina onde ficará instalado nosso site. Via de regra isso acontece utilizando diferentes programas de FTP.</p>
<p style="text-align: justify"><strong>Lançamento do site</strong><br />
Existem milhares de sites disponíveis na rede. Para que seu trabalho não passe desapercebido neste mar de informações é necessário um trabalho de divulgação utilizando vias impressas convencionais como mala direta, revistas, jornais, outdoors, panfletos, etc, e até mesmo propaganda em televisão.</p>
<p style="text-align: justify">A divulgação via eletrônica através de listas, ou grupos de discussão deve ser feita de forma criteriosa para não criar spams indesejáveis o que pode comprometer a imagem do cliente.</p>
<p style="text-align: justify;">
<p style="text-align: right"><span style="color: #888888;"><em>Fonte: http://www.unicamp.br/~everaldo/websites/arquitetura_websites.html</em></span></p>
]]></content:encoded>
			<wfw:commentRss>http://webtopia.com.br/blog/etapas-do-desenvolvimento-de-sites-2/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Cinto de utilidades para Webdesigners</title>
		<link>http://webtopia.com.br/blog/cinto-de-utilidades-para-webdesigners/</link>
		<comments>http://webtopia.com.br/blog/cinto-de-utilidades-para-webdesigners/#comments</comments>
		<pubDate>Mon, 02 Nov 2009 17:17:13 +0000</pubDate>
		<dc:creator>rafab</dc:creator>
				<category><![CDATA[Developer]]></category>
		<category><![CDATA[Css]]></category>
		<category><![CDATA[Development]]></category>
		<category><![CDATA[Ferramentas]]></category>
		<category><![CDATA[Webdesigner]]></category>

		<guid isPermaLink="false">http://webtopia.com.br/blog/?p=180</guid>
		<description><![CDATA[<a href=http://webtopia.com.br/blog/cinto-de-utilidades-para-webdesigners/><img src=http://webtopia.com.br/blog/wp-content/uploads/2009/11/scaffold-150x150.gif class=imgtfe hspace=5 align=left width=100  border=0></a>Apresentamos 27 ferramentas de desenvolvimento extremamente útil, templates, geradores, e sugestões de segurança, esperando que você se inspirou para utilizar estas ferramentas úteis para tornar sua vida mais fácil]]></description>
			<content:encoded><![CDATA[<p style="text-align: justify">O desenvolvimento web consome tempo e é bastante desafiador. Existem muitas maneiras de ajudar a combater esse desafio, aplicações úteis de segurança para análise de tráfego, bem como CSS &#8211; conceitos que nos dê um código limpo, condensado e o tempo de carregamento mais rápido, reduzindo o tempo e os esforços de assistência designers e desenvolvedores com melhorias fundamentais para fluxos de trabalho.</p>
<p style="text-align: justify">Abaixo, apresentamos 30 ferramentas de desenvolvimento extremamente útil, templates, geradores, e sugestões de segurança, esperando que você se inspirou para utilizar estas ferramentas úteis para tornar sua vida mais fácil.</p>
<p><BR><br />
<h2>1. CSS e Ferramentas de Desenvolvimento</h2>
<p>
<a title="Scaffold" href="http://wiki.github.com/anthonyshort/csscaffold" target="_blank">Scaffold</a></p>
<p style="text-align: justify;">CSScaffold CSS é um framework escrito em PHP. Ao invés de tentar criar um quadro estático, que utiliza as capacidades padrão de CSS, como Blueprint, ele usa o PHP para estender CSS. A sintaxe olha e se sente exatamente como CSS, exceto que você tem alguns novos, habilidades poderosas.</p>
<p style="text-align: justify;"><img class="aligncenter size-full wp-image-181" title="scaffold" src="http://webtopia.com.br/blog/wp-content/uploads/2009/11/scaffold.gif" alt="scaffold" width="464" height="355" /></p>
<p></p>
<p style="text-align: justify;"><a title="Compass" href="http://wiki.github.com/chriseppstein/compass" target="_blank">Compass</a></p>
<p style="text-align: justify;">Compass é uma ferramenta de criação de estilo que usa a linguagem de estilo Sass para fazer o seu estilo menor e seu Web site mais fácil de manter.</p>
<p style="text-align: center"><img class="aligncenter" title="compass" src="http://webtopia.com.br/blog/wp-content/uploads/2009/11/compass.gif" alt="compass" width="471" height="126" /></p>
<p></p>
<p style="text-align: justify;"><a title="Css_doc" href="http://github.com/imedo/css_doc" target="_blank">css_doc</a></p>
<p style="text-align: justify;">css_doc Ruby é uma biblioteca e uma ferramenta de linha de comando para extrair documentação de arquivos CSS. O formato da documentação é muito semelhante ao JavaDoc.</p>
<p style="text-align: justify;"><a title="csshttprequest" href="http://nb.io/hacks/csshttprequest" target="_blank">CSSHttpRequest</a></p>
<p style="text-align: justify;">Como JavaScript inclui, isto funciona porque o CSS não está sujeita à política de mesma origem que afeta XMLHttpRequest. Funções CSSHttpRequest à semelhança JSONP, e está limitada a solicitações GET. Ao contrário JSONP, não confiáveis de terceiros JavaScript não pode executar no contexto da página de chamada.</p>
<p><a title="css sandbox" href="http://aurelio.net/css-sandbox/" target="_blank">CSS Sandbox</a></p>
<p style="text-align: justify;">Diga adeus à tentativa e erro, mas dizer Olá a uma ferramenta e um brinquedo para testar CSS em tempo real. É uma alternativa simples e rápida de recarregar uma página e ver os últimos ajustes para o seu código. Role o mouse sobre o botão de código ea formatação para o código CSS necessário estará pronto para o seu site.</p>
<p style="text-align: justify;"><img class="aligncenter size-full wp-image-183" title="css_sandbox" src="http://webtopia.com.br/blog/wp-content/uploads/2009/11/css_sandbox.gif" alt="css_sandbox" width="471" height="142" /><br />
<a title="CodeBurner" href="http://tools.sitepoint.com/codeburner/" target="_blank">CodeBurner</a></p>
<p style="text-align: justify;">Esta é uma ferramenta útil para desenvolvedores da Web para verificar as propriedades CSS ou elementos HTML. Após a instalação, você pode executar uma busca ou clicar em um item na página para ver as informações de compatibilidade do navegador, sintaxe e exemplos de código. Ele fornece uma referência rápida disponível no seu navegador.</p>
<p style="text-align: justify;"><img class="aligncenter size-full wp-image-184" title="codeburner" src="http://webtopia.com.br/blog/wp-content/uploads/2009/11/codeburner.gif" alt="codeburner" width="450" height="322" /> <br /><a title="Validator sac" href="http://habilis.net/validator-sac/" target="_blank">Markup Validator SAC</a></p>
<p style="text-align: justify;">Esta versão stand-alone de HTML do W3C / XHTML Markup Validator não requer instalação. Basta colocar o Validator onde você precisa, como um flash drive, CD ou disco rígido. É possível validar os arquivos locais, sites, ou ser configurado como um serviço Web para permitir que os usuários para validar através da rede local. Basta arrastar e soltar arquivos e URLs para o ícone do aplicativo, ou usar o comando Arquivo&gt; Abrir.</p>
<p style="text-align: justify;"><img class="aligncenter size-full wp-image-186" title="validator" src="http://webtopia.com.br/blog/wp-content/uploads/2009/11/validator.gif" alt="validator" width="450" height="274" /></p>
<p></p>
<p style="text-align: justify;"><a title="Code run" href="http://www.coderun.com/" target="_blank">CodeRun</a></p>
<p style="text-align: justify;">Ferramenta útil que nos permite fazer upload de pesquisa e projetos de código executável, modificar ou criar um código com coloração conclusão, depuração de código cliente / servidor, bem como publicar links código. Para a nuvem, podemos implantar com um clique, gerir os recursos de nuvens, e as versões completa com SVN. Ele suporta várias línguas.</p>
<p style="text-align: justify;"><img class="aligncenter size-full wp-image-187" title="coderun" src="http://webtopia.com.br/blog/wp-content/uploads/2009/11/coderun.gif" alt="coderun" width="450" height="148" /></p>
<p></p>
<p style="text-align: justify;"><a title="Google code" href="http://code.google.com/apis/ajax/playground/" target="_blank">Google Code Playground</a></p>
<p style="text-align: justify;">Ferramentas de desenvolvimento online script vamos implementar ricos, sites dinâmicos em menos tempo. Com este parque AJAX API, podemos experimentar com novas funções como o JavaScript ou mapas, ou mesmo baixar feeds. Então, essas funções podem ser exportados, totalmente pronto para implementar. Novas ferramentas de continuar a ser adicionados, por isso este é um bom lugar para se revisitar a linguagem, blogger, gráficos e outros códigos de visualização.</p>
<p style="text-align: justify;"><img class="aligncenter size-full wp-image-188" title="googleplayground" src="http://webtopia.com.br/blog/wp-content/uploads/2009/11/googleplayground.gif" alt="googleplayground" width="483" height="294" /></p>
<p style="text-align: justify;"><a title="Boks" href="http://toki-woki.net/p/Boks/" target="_blank">Boks</a></p>
<p style="text-align: justify;">Boks é um aplicativo AIR, o que significa que funciona em Windows, Mac e Linux. Ele fornece uma interface de usuário para Blueprint quadro CSS e pode lidar com grade e configuração do ritmo de base, antes de exportar grid.png e comprimido CSS.</p>
<p style="text-align: justify;"><img class="aligncenter size-full wp-image-189" title="bok" src="http://webtopia.com.br/blog/wp-content/uploads/2009/11/bok.gif" alt="bok" width="306" height="366" /></p>
<p style="text-align: justify;"><a title="Bluefish" href="http://bluefish.openoffice.nl/" target="_blank">Bluefish</a></p>
<p style="text-align: justify;">Este editor Open Source é voltada para programadores e web designers e funcionará na maioria dos sistemas operacionais, incluindo Linux, FreeBSD, MacOS X, OpenBSD e Solaris. Bluefish centra-se na edição de sites dinâmicos e interativos e os scripts, e suporta muitos programação e linguagens de marcação. Não será neste momento executado no Windows, mas um nativo Bluefish 1.0.7 binário.<br />
<img class="aligncenter size-full wp-image-191" title="bluefish" src="http://webtopia.com.br/blog/wp-content/uploads/2009/11/bluefish.gif" alt="bluefish" width="425" height="386" /></p>
<p style="text-align: justify;"><a title="FireCrystal" href="http://www.ajaxrain.com/script?sId=6543" target="_blank">FireCrystal</a></p>
<p style="text-align: justify;">FireCrystal é uma extensão do Firefox para ajudar os programadores e designers descobrir como comportamentos interativos na web funcionam. Ele permite aos usuários &#8220;rewind&#8221; suas interações com as páginas da web ao mesmo tempo mostrando o código correspondente. No entanto, é atualmente uma versão alfa e podem sofrer de tempos de carregamento longos ou falhar em Javascript intensivo páginas.</p>
<p style="text-align: justify;"><img class="aligncenter size-full wp-image-192" title="firecrystal" src="http://webtopia.com.br/blog/wp-content/uploads/2009/11/firecrystal.jpg" alt="firecrystal" width="450" height="285" /></p>
<p></p>
<p style="text-align: justify;"><a title="Adobe BrowserLab" href="http://labs.adobe.com/technologies/browserlab/" target="_blank">Adobe BrowserLab</a></p>
<p style="text-align: justify;">Esta ferramenta está disponível como um trecho da música, assim que os profissionais da web deve experimentá-lo, enquanto podem. Adobe BrowserLab fornece web designers com uma cópia exata de suas páginas em vários navegadores e sistemas operacionais. É uma solução para testes de compatibilidade cross-browser e pode ser personalizado com suas preferências, além de ser um serviço online que pode ser acessado a partir de praticamente qualquer computador conectado à web.</p>
<p style="text-align: justify;"><img class="aligncenter size-full wp-image-193" title="adobebrowser" src="http://webtopia.com.br/blog/wp-content/uploads/2009/11/adobebrowser.jpg" alt="adobebrowser" width="500" height="302" /></p>
<p style="text-align: justify;">
<p style="text-align: justify;"><a title="Checkmycolours" href="http://www.checkmycolours.com/" target="_blank">checkmycolors </a></p>
<p style="text-align: justify;">Esta ferramenta é para verificar novos e combinações de cor de fundo de todos os elementos do DOM para determinar se eles fornecem um contraste suficiente quando visualizados por alguém que tenha défices de cor. Você digita um endereço web e checkmycolors retorna resultados de teste com base em algoritmos sugeridos pela W3C.</p>
<p style="text-align: justify;"><img class="aligncenter size-full wp-image-194" title="checkcolor2" src="http://webtopia.com.br/blog/wp-content/uploads/2009/11/checkcolor2.jpg" alt="checkcolor2" width="450" height="263" /></p>
<p style="text-align: justify;">
<p><BR><br />
<h2>2. Tipografia</h2>
<p></p>
<p style="text-align: justify;"><a title="Typography Keyboard" href="http://www.smashingmagazine.com/2009/04/02/typography-keyboard-layout-download-now/" target="_blank">Typography Keyboard Layout</a></p>
<p style="text-align: justify;">Uma ferramenta simples, mas útil, que permite que você digite os caracteres que são geralmente não disponível em um teclado com facilidade. Esta coisa é um layout de teclado normal, só que com a tecla Alt no Mac ou a tecla Alt Gr no Windows que permite que você digite todas estas personagens perfeitamente agradável. O layout também suporta vários tipos de sinais diacríticos, assim você pode digitar palavras como ingênuos ou café e se divertir.</p>
<p style="text-align: justify;"><img class="aligncenter size-full wp-image-196" title="keyboard" src="http://webtopia.com.br/blog/wp-content/uploads/2009/11/keyboard.gif" alt="keyboard" width="471" height="337" /></p>
<p></p>
<p style="text-align: justify;"><a title="Typedia" href="http://typedia.com/" target="_blank">Typedia</a></p>
<p style="text-align: justify;">Enciclopédia compartilhada de fontes, com recursos para classificar, categorizar e ligar fontes.</p>
<p style="text-align: justify;"><img class="aligncenter size-full wp-image-197" title="typedia" src="http://webtopia.com.br/blog/wp-content/uploads/2009/11/typedia.gif" alt="typedia" width="471" height="331" /></p>
<p></p>
<p style="text-align: justify;"><a title="Fontbook" href="http://www.myfontbook.com/app/" target="_blank">FontBook</a></p>
<p style="text-align: justify;">Esta web telespectador com fonte permite que você olhar para todas as fontes com seu texto amostra através da incorporação de fontes HTML5. Você pode visualizar as métricas, glifos ou o corpo do texto fonte. Suporte em breve deverá estar disponível para a marcação, classificação e favoriting.</p>
<h2><img class="aligncenter size-full wp-image-198" title="fontbook" src="http://webtopia.com.br/blog/wp-content/uploads/2009/11/fontbook.gif" alt="fontbook" width="420" height="412" /></h2>
<p><BR><br />
<h2>3. Ferramentas de Referência</h2>
<p>
<a title="Regex Widget" href="http://www.apple.com/downloads/dashboard/developer/regexwidget.html" target="_blank">Regex Widget </a><br />
Este widget interactivo é útil para testar JavaScript, Sed, Ruby, Perl ou expressões. A interface de usuário é simples, maiúsculas e minúsculas, tem interruptor global, e corresponder ver índice de matriz para codificadores para implementar testes de forma fácil e eficaz.</p>
<p><img class="aligncenter size-full wp-image-199" title="RegexWidget" src="http://webtopia.com.br/blog/wp-content/uploads/2009/11/RegexWidget.gif" alt="RegexWidget" width="382" height="251" /></p>
<p style="text-align: justify;">
<p></p>
<p style="text-align: justify;"><a title="HTML Entity Character" href="http://leftlogic.com/lounge/articles/entity-lookup/" target="_blank">HTML Entity Character Lookup</a></p>
<p style="text-align: justify;">Utilizando entidades de HTML é o caminho certo para garantir todos os personagens em sua página são validados. No entanto, muitas vezes, encontrar o código de entidade de direito requer a digitalização através de 250 linhas de caracteres. Essa pesquisa permite-lhe encontrar rapidamente a entidade com base na sua aparência, por exemplo, como um &lt;ou a letra C.</p>
<p style="text-align: justify;"><img class="aligncenter size-full wp-image-201" title="lookup" src="http://webtopia.com.br/blog/wp-content/uploads/2009/11/lookup.gif" alt="lookup" width="430" height="363" /><br /> <a title="Phpquickreference" href="http://www.emeraldion.it/software/widgets/phpquickreference.html" target="_blank">PHPQuickReference</a> (Mac Dashboard Widget)</p>
<p style="text-align: justify;">PHPQuickReference lhe dá o direito de referência útil PHP no Dashboard. Pesquisa com autocompletar e sugestões e copiar e colar o código de exemplo para seu projeto. Você pode achar mais útil Mac Dashboard Widgets para web designers e desenvolvedores <a href="http://speckyboy.com/2009/08/05/30-mac-dashboard-widgets-for-web-designers-and-developers/" target="_blank">aqui</a> e <a href="http://www.engadget.com/2007/07/07/enwidget-ten-useful-apple-dashboard-widgets/" target="_blank">aqui</a>.</p>
<p style="text-align: justify;"><img class="aligncenter size-full wp-image-202" title="php" src="http://webtopia.com.br/blog/wp-content/uploads/2009/11/php.jpg" alt="php" width="350" height="290" /></p>
<p><BR><br />
<h2>4. Edição de imagem e Otimização</h2>
<p></p>
<p style="text-align: justify;"><a title="Punypng" href="http://www.gracepointafterfive.com/pun.png" rel="lightbox[180]" target="_blank">punypng</a></p>
<p style="text-align: justify;">Punypng é uma ferramenta gratuita que reduz drasticamente os tempos de carregamento da página, reduzindo o tamanho do arquivo de uma imagem sem qualquer perda de qualidade.</p>
<p style="text-align: justify;"><img class="aligncenter size-full wp-image-204" title="punypng" src="http://webtopia.com.br/blog/wp-content/uploads/2009/11/punypng.gif" alt="punypng" width="479" height="370" /></p>
<p style="text-align: justify;"><a title="Smush it" href="http://developer.yahoo.com/yslow/smushit/" target="_blank">Smush.it</a></p>
<p style="text-align: justify;">Smush.it é uma ferramenta de otimização de edição de imagem que leva a maioria dos tipos de formatos de imagem e converte para PNGs menores sem mudar sua aparência ou qualidade visual. Ele irá fornecer dados sobre quantos bytes seriam salvos por meio da otimização, bem como produzir um arquivo zip para download com os arquivos de imagem minimizada.</p>
<p style="text-align: justify;"><img class="aligncenter size-full wp-image-205" title="smushit" src="http://webtopia.com.br/blog/wp-content/uploads/2009/11/smushit.gif" alt="smushit" width="258" height="294" /><br />
<a title="png8" href="http://blog.themeforest.net/tutorials/image-types-and-usage-in-web-design/" target="_blank">PNG8</a></p>
<p style="text-align: justify;">Most of us use Photoshop, but Fireworks allows us to use an alpha transparency with PNG8 for a smaller file size while maintaining edges that blend smoothly and look great. Select the number of colors needed or setup a color matte and save a PNG8 image with alpha transparency. In the Optimize pallet, select PNG8 format with alpha transparency selected, and then click “Rebuild” in the lower right corner. Smaller file sizes equal faster page loads and this works the best for logos, shadows and gradients to be fully optimized.</p>
<p style="text-align: justify;"><img class="aligncenter size-full wp-image-206" title="png8" src="http://webtopia.com.br/blog/wp-content/uploads/2009/11/png8.gif" alt="png8" width="200" height="270" /></p>
<p style="text-align: justify;"><a title="Finetuna" href="http://www.finetuna.com/" target="_blank">Finetuna</a></p>
<p style="text-align: justify;">Finetuna editor de imagens pode ser usado para divertimento ou para locais mais grave. Você pode fazer upload de uma imagem ou uma escolha de uma página web, antes de adicionar rapidamente os seus comentários para qualquer imagem. A única coisa que resta a fazer é compartilhar.</p>
<p style="text-align: justify;"><img class="aligncenter size-full wp-image-207" title="finetuna" src="http://webtopia.com.br/blog/wp-content/uploads/2009/11/finetuna.gif" alt="finetuna" width="450" height="312" /></p>
<p></p>
<p style="text-align: justify;"><a title="iConvert" href="http://iconverticons.com/" target="_blank">iConvert</a></p>
<p style="text-align: justify;">Esta ferramenta faz a conversão de imagens para ícones rápido e simples. É um processo um passo para a criação de ícones para Windows, Mac e Linux.</p>
<p style="text-align: justify;"><img class="aligncenter size-full wp-image-208" title="iconvert" src="http://webtopia.com.br/blog/wp-content/uploads/2009/11/iconvert.gif" alt="iconvert" width="450" height="255" /></p>
<p style="text-align: justify;">
<p><BR><br />
<h2>5. Freelancing</h2>
<p></p>
<p style="text-align: justify;"><a title="Astuteo" href="http://estimator.astuteo.com/" target="_blank">Astuteo</a></p>
<p style="text-align: justify;">Web designers e desenvolvedores de sites podem utilizar esta ferramenta simples para estimar o tempo rapidamente e materiais necessários para um projeto da proposta. Digite o título do projeto e sua taxa horária padrão, em seguida, ajustar o seu horário antecipado para gerar sua estimativa total do projeto. Os resultados podem ser impressos ou salvos em um PDF.</p>
<p style="text-align: justify;"><img class="aligncenter size-full wp-image-210" title="astuteo" src="http://webtopia.com.br/blog/wp-content/uploads/2009/11/astuteo.gif" alt="astuteo" width="500" height="273" /></p>
<p style="text-align: justify;"><a title="redmark" href="http://www.redmark.com/" target="_blank">redmark</a></p>
<p style="text-align: justify;">Redmark é uma ferramenta útil para os designers e os seus clientes para se comunicar visualmente em três passos simples. Carregue o seu design, e-mail automaticamente para os clientes que podem fazer comentários, fazer revisões e repetir, automaticamente, antes de publicação.</p>
<p style="text-align: justify;"><img class="aligncenter size-full wp-image-211" title="redmark" src="http://webtopia.com.br/blog/wp-content/uploads/2009/11/redmark.gif" alt="redmark" width="500" height="375" /></p>
<p style="text-align: justify;">
<p><BR><br />
<h2>6. Melhorar o fluxo de trabalho</h2>
<p>
<a title="web form factory" href="http://www.webformfactory.com/" target="_blank">Web Form Factory</a></p>
<p>Web Form Factory é uma fonte aberta gerador de formulários Web que gera automaticamente o código necessário backend para amarrar o seu formulário para uma base de dados.</p>
<p><img class="aligncenter size-full wp-image-216" title="factory" src="http://webtopia.com.br/blog/wp-content/uploads/2009/11/factory.gif" alt="factory" width="471" height="346" /><br />
<br />
<a title="printliminator" href="http://css-tricks.com/examples/ThePrintliminator/" target="_blank">Printliminator</a></p>
<p>O Printliminator é um bookmarklet com algumas ferramentas simples que você pode usar para websites de impressão faz melhor. Um clique para activar e, em seguida, clique para remover elementos da página, remover gráficos, e aplicar um estilo de impressão melhor.</p>
<p><img class="aligncenter size-full wp-image-215" title="printl" src="http://webtopia.com.br/blog/wp-content/uploads/2009/11/printl.gif" alt="printl" width="471" height="334" /><br />
<br />
<a title="Split browser" href="https://addons.mozilla.org/en-US/firefox/addon/4287" target="_blank">Split Browser</a></p>
<p>Multitarefa é obrigatória. Dependendo da memória RAM e tamanho da tela, essa ferramenta permite que o navegador FireFox para ser dividida infinitamente. A janela de configuração pode ser dividido em colunas ou no entanto, é necessário comparar várias páginas da Web. Escolha o &#8220;Split Browser para&#8221; menu e, em seguida, arrastar e soltar links, bookmarks, calendários, agendas ou guias nas janelas divididas.</p>
<p><img class="aligncenter size-full wp-image-214" title="splitbrowser" src="http://webtopia.com.br/blog/wp-content/uploads/2009/11/splitbrowser.gif" alt="splitbrowser" width="450" height="350" /><br />
<br />
<a title="Liberkey" href="http://www.liberkey.com/en/" target="_blank">LiberKey</a></p>
<p>LiberKey  é o &#8220;canivete suíço&#8221; equivalente a 250 programas de softwares que oferecem locais e / ou utilização portátil. Os melhores programas Open Source ou Freeware foram selecionados para atender às necessidades mais práticas, mantendo 100% de portabilidade.</p>
<p><img class="aligncenter size-full wp-image-213" title="liberkey" src="http://webtopia.com.br/blog/wp-content/uploads/2009/11/liberkey.gif" alt="liberkey" width="450" height="328" /></p>
<p style="text-align: justify;">
<p style="text-align: right"><em><span style="color: #888888;">Fonte: http://www.noupe.com/design/fresh-web-development-goodies-bag.html</span></em></p>
<p style="text-align: justify;">
]]></content:encoded>
			<wfw:commentRss>http://webtopia.com.br/blog/cinto-de-utilidades-para-webdesigners/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
