<?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>Pixel com Café</title>
	<atom:link href="http://www.pixelcomcafe.com/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.pixelcomcafe.com</link>
	<description>Design - Blogosfera - Dicas</description>
	<lastBuildDate>Thu, 11 Mar 2010 12:00:14 +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>Vídeo Aula: Criando Logo do Windows XP Brazilian Edition</title>
		<link>http://www.pixelcomcafe.com/2010/03/video-aula-criando-logo-do-windows-xp-brazilian-edition/</link>
		<comments>http://www.pixelcomcafe.com/2010/03/video-aula-criando-logo-do-windows-xp-brazilian-edition/#comments</comments>
		<pubDate>Thu, 11 Mar 2010 12:00:14 +0000</pubDate>
		<dc:creator>Tiago Antunes</dc:creator>
				<category><![CDATA[CorelDraw]]></category>
		<category><![CDATA[Vídeo Aulas]]></category>

		<guid isPermaLink="false">http://www.pixelcomcafe.com/?p=2545</guid>
		<description><![CDATA[
			
				
			
		
Criaremos nesta vídeo aula uma logo um da edição brasileira do Windows XP, entre as técnicas que veremos estão &#8220;Power Clip&#8221; e &#8220;Duas Interseção formas&#8221;, entre outros.
Espero que gostem e fico a disposição para esclarecimentos, prepararemos novas aulas e seus pedidos nos ajudaram, fiquem a vontade.

Abs,
Tiago Antunes
 
		 
	Artigos Relacionados:Vídeo Aula: Criando um carrinho de [...]]]></description>
			<content:encoded><![CDATA[<div class="tweetmeme_button" style="float: right; margin-left: 5px;">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fwww.pixelcomcafe.com%2F2010%2F03%2Fvideo-aula-criando-logo-do-windows-xp-brazilian-edition%2F"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fwww.pixelcomcafe.com%2F2010%2F03%2Fvideo-aula-criando-logo-do-windows-xp-brazilian-edition%2F&amp;source=pixelcomcafe&amp;style=normal" height="61" width="50" /><br />
			</a>
		</div>
<p>Criaremos nesta vídeo aula uma logo um da edição brasileira do Windows XP, entre as técnicas que veremos estão &#8220;Power Clip&#8221; e &#8220;Duas Interseção formas&#8221;, entre outros.<br />
Espero que gostem e fico a disposição para esclarecimentos, prepararemos novas aulas e seus pedidos nos ajudaram, fiquem a vontade.</p>
<p><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="500" height="320" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="src" value=" http : / / www.videolog.tv/ajax/codigoPlayer.php?id_video=525067&amp;relacionados=N&amp;default=N&amp;cor_fundo=FFFFFF&amp;cor_titulo=7777777&amp;swf=1&amp;width=500&amp;height = 320 " /><embed type="application/x-shockwave-flash" width="500" height="320" src=" http : / / www.videolog.tv/ajax/codigoPlayer.php?id_video=525067&amp;relacionados=N&amp;default=N&amp;cor_fundo=FFFFFF&amp;cor_titulo=7777777&amp;swf=1&amp;width=500&amp;height = 320 "></embed></object></p>
<p>Abs,<br />
Tiago Antunes</p>
<a href="http://www.seomaster.com.br/bookmark.html" style="border:none; text-decoration:none" onmouseover="sb_plugin('http://www.pixelcomcafe.com/2010/03/video-aula-criando-logo-do-windows-xp-brazilian-edition/','Vídeo Aula: Criando Logo do Windows XP Brazilian Edition'); return sb_showMenu(this)" onmouseout="sb_close()" onclick="return sb_open()"> 
		<img src="http://www.seomaster.com.br/img/bookmark-buttons/bt-partilhar-services.gif" border="0" style="display:inline; border:none" alt="Bookmark e Compartilhe" /> 
	</a><h3  class="related_post_title">Artigos Relacionados:</h3><ul class="related_post"><li><a href="http://www.pixelcomcafe.com/2010/03/video-aula-criando-um-carrinho-de-compras-listando-itens-2-parte/" title="Vídeo Aula: Criando um carrinho de compras &#8211; Listando itens &#8211; 2ª parte">Vídeo Aula: Criando um carrinho de compras &#8211; Listando itens &#8211; 2ª parte</a> (0)</li><li><a href="http://www.pixelcomcafe.com/2010/03/video-aula-criando-um-carrinho-de-compras-base-dados-1-parte/" title="Vídeo Aula: Criando um carrinho de compras &#8211; base dados &#8211; 1ª parte">Vídeo Aula: Criando um carrinho de compras &#8211; base dados &#8211; 1ª parte</a> (5)</li><li><a href="http://www.pixelcomcafe.com/2010/03/novidades-artigos-tutoriais-e-pixel-com-cafe-fazem-fusao/" title="Novidades: Artigos &#038; Tutoriais e Pixel com Café fazem fusão">Novidades: Artigos &#038; Tutoriais e Pixel com Café fazem fusão</a> (0)</li><li><a href="http://www.pixelcomcafe.com/2010/02/video-aulas-gratuitas-de-wordpress-magento-oscommerce-e-joomla/" title="Vídeo aulas gratuitas de WordPress, Magento, osCommerce e Joomla">Vídeo aulas gratuitas de WordPress, Magento, osCommerce e Joomla</a> (0)</li><li><a href="http://www.pixelcomcafe.com/2009/04/concurso-em-comemoracao-aos-20-anos-do-coreldraw/" title="Concurso em comemoração aos 20 anos do CorelDraw">Concurso em comemoração aos 20 anos do CorelDraw</a> (1)</li></ul>]]></content:encoded>
			<wfw:commentRss>http://www.pixelcomcafe.com/2010/03/video-aula-criando-logo-do-windows-xp-brazilian-edition/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>2º Parte: Técnicas de Retoques e Maquiagem no Photoshop</title>
		<link>http://www.pixelcomcafe.com/2010/03/2%c2%ba-parte-tecnicas-de-retoques-e-maquiagem-no-photoshop/</link>
		<comments>http://www.pixelcomcafe.com/2010/03/2%c2%ba-parte-tecnicas-de-retoques-e-maquiagem-no-photoshop/#comments</comments>
		<pubDate>Thu, 11 Mar 2010 04:51:48 +0000</pubDate>
		<dc:creator>Raphael Bruno</dc:creator>
				<category><![CDATA[Photoshop]]></category>
		<category><![CDATA[Tutoriais]]></category>

		<guid isPermaLink="false">http://www.pixelcomcafe.com/?p=2547</guid>
		<description><![CDATA[
			
				
			
		
OLá Pessoal esta é a 2ª e última parte do tutorial &#8220;Técnicas de Retoques e Maquiagem no Photoshop&#8220;.
Vamos mudar a cor dos olhos, para isso crie uma nova camada fazendo o mesmo processo que fiz como é mostra a Fig 16.

Fig16
Com a camada criada selecione-a para podermos trabalhar nela, selecione a “Ferramenta Pincel” Fig17, e [...]]]></description>
			<content:encoded><![CDATA[<div class="tweetmeme_button" style="float: right; margin-left: 5px;">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fwww.pixelcomcafe.com%2F2010%2F03%2F2%25c2%25ba-parte-tecnicas-de-retoques-e-maquiagem-no-photoshop%2F"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fwww.pixelcomcafe.com%2F2010%2F03%2F2%25c2%25ba-parte-tecnicas-de-retoques-e-maquiagem-no-photoshop%2F&amp;source=pixelcomcafe&amp;style=normal" height="61" width="50" /><br />
			</a>
		</div>
<p>OLá Pessoal esta é a 2ª e última parte do tutorial &#8220;<em>Técnicas de Retoques e Maquiagem no Photoshop</em>&#8220;.</p>
<p>Vamos mudar a cor dos olhos, para isso crie uma nova camada fazendo o mesmo processo que fiz como é mostra a <strong>Fig 16</strong>.</p>
<p><img class="alignnone size-full wp-image-2549" title="tutorial-2-beleza-digital-1" src="http://www.pixelcomcafe.com/wp-content/uploads/2010/03/tutorial-2-beleza-digital-1.jpg" alt="" width="318" height="325" /><br />
Fig16</p>
<p>Com a camada criada selecione-a para podermos trabalhar nela, selecione a “<em>Ferramenta Pincel</em>” <strong>Fig17</strong>, e escolha uma cor para o olho, eu escolhi a cor azul <strong>Fig18</strong>.</p>
<p><img class="alignnone size-full wp-image-2550" title="tutorial-2-beleza-digital-2" src="http://www.pixelcomcafe.com/wp-content/uploads/2010/03/tutorial-2-beleza-digital-2.jpg" alt="" width="64" height="97" /><br />
Fig17</p>
<p><img class="alignnone size-full wp-image-2551" title="tutorial-2-beleza-digital-3" src="http://www.pixelcomcafe.com/wp-content/uploads/2010/03/tutorial-2-beleza-digital-3.jpg" alt="" width="401" height="287" /><br />
Fig18</p>
<p>Pinte a parte do olho com a “Ferramenta Pincel” na camada vazia <strong>Fig 19</strong>.</p>
<p><img class="alignnone size-full wp-image-2552" title="tutorial-2-beleza-digital-4" src="http://www.pixelcomcafe.com/wp-content/uploads/2010/03/tutorial-2-beleza-digital-4.jpg" alt="" width="401" height="291" /><br />
Fig19</p>
<p>Na combobox de propriedade da camada, selecione a opção “Matiz”, mostrada na <strong>Fig 20</strong>.</p>
<p><img class="alignnone size-full wp-image-2553" title="tutorial-2-beleza-digital-5" src="http://www.pixelcomcafe.com/wp-content/uploads/2010/03/tutorial-2-beleza-digital-5.jpg" alt="" width="401" height="401" /><br />
Fig20</p>
<p>Veja o resultado! (<strong>Fig21</strong>)</p>
<p><img class="alignnone size-full wp-image-2554" title="tutorial-2-beleza-digital-6" src="http://www.pixelcomcafe.com/wp-content/uploads/2010/03/tutorial-2-beleza-digital-6.jpg" alt="" width="401" height="179" /><br />
Fig21</p>
<p>Crie mais uma camada, assim como foi explicado na <strong>Fig16</strong>, selecione essa camada vazia para que possamos trabalhar nela, agora vamos mudar a cor dos lábios para realçá-lo, selecione toda a boca <strong>Fig22</strong>.</p>
<p><img class="alignnone size-full wp-image-2555" title="tutorial-2-beleza-digital-7" src="http://www.pixelcomcafe.com/wp-content/uploads/2010/03/tutorial-2-beleza-digital-7.jpg" alt="" width="400" height="279" /><br />
Fig22</p>
<p>Deixe a opção “Subtrair da seleção” Slecionada, como é mostrado em vermelho na <strong>Fig23</strong>.</p>
<p><img class="alignnone size-full wp-image-2556" title="tutorial-2-beleza-digital-8" src="http://www.pixelcomcafe.com/wp-content/uploads/2010/03/tutorial-2-beleza-digital-8.jpg" alt="" width="198" height="91" /><br />
Fig23</p>
<p>Agora selecione a parte de dentro dos lábios, fazendo isso a seleção fica só na parte dos lábios <strong>Fig24</strong>.</p>
<p><img class="alignnone size-full wp-image-2557" title="tutorial-2-beleza-digital-9" src="http://www.pixelcomcafe.com/wp-content/uploads/2010/03/tutorial-2-beleza-digital-9.jpg" alt="" width="401" height="249" /><br />
Fig24</p>
<p>Pinte com a “Ferramenta Pincel” da cor desejada, a parte selecionada na camada vazia que foi criada <strong>Fig 25</strong>, escolhi uma cor clara para realçar os lábios pois combina com a tonalidade da pele.</p>
<p><img class="alignnone size-full wp-image-2558" title="tutorial-2-beleza-digital-10" src="http://www.pixelcomcafe.com/wp-content/uploads/2010/03/tutorial-2-beleza-digital-10.jpg" alt="" width="401" height="291" /><br />
Fig25</p>
<p>Agora na combobox de propriedades da camada coloque “Luz Direta” e na propriedade de “Opacidade” coloque “50%” como mostrado em vermelho na <strong>Fig 26</strong>.</p>
<p><img class="alignnone size-full wp-image-2559" title="tutorial-2-beleza-digital-11" src="http://www.pixelcomcafe.com/wp-content/uploads/2010/03/tutorial-2-beleza-digital-11.jpg" alt="" width="401" height="393" /><br />
Fig26</p>
<p>Vamos realçar o todo, mesclaremos todas as camadas, vá no menu “Camada&gt;Mesclar Camadas Visíveis” ou “Shift+Ctrl+E”, nota-se que todas as camadas ficaram uma só <strong>Fig 27</strong>.</p>
<p><img class="alignnone size-full wp-image-2560" title="tutorial-2-beleza-digital-12" src="http://www.pixelcomcafe.com/wp-content/uploads/2010/03/tutorial-2-beleza-digital-12.jpg" alt="" width="465" height="372" /><br />
Fig27</p>
<p>Duplique a camada no menu “Camada&gt;Duplicar Camadas&#8230;” e dê “OK”, remova a saturação dessa cópia de camada, para isso vá ao menu “Imagem&gt; Ajustes&gt;Remover Saturação” ou “Shift+Ctrl+U” e na combobox de propriedades da camada selecione “Luz Suave” Como mostra de vermelho na <strong>Fig28</strong>.</p>
<p><img class="alignnone size-full wp-image-2563" title="tutorial-2-beleza-digital-13" src="http://www.pixelcomcafe.com/wp-content/uploads/2010/03/tutorial-2-beleza-digital-13.jpg" alt="" width="236" height="255" /><br />
Fig28</p>
<p>Faça alguns pequenos ajustes ao seu modo e é isso.</p>
<p>Abaixo segue o resultado do Produto Final, o <em>Antes e o Depois</em>.</p>
<p><img class="alignnone size-full wp-image-2562" title="tutorial-2-beleza-digital-14" src="http://www.pixelcomcafe.com/wp-content/uploads/2010/03/tutorial-2-beleza-digital-14.jpg" alt="" width="510" height="385" /></p>
<p>Bom, tecnicamente é isso, há uma infinidade de coisas que se pode fazer para deixar uma mulher mais bonita, como falei anteriormente, repito, vai depender de cada imagem, apresentei as ferramentas básicas.</p>
<p>O tutorial está concluído, espero que tenham gostado e  aprendido com esse tutorial, agradeço o carinho dos visitantes do site Pixel com Café, aos emails e comentários que tenho recebido, fico feliz em ajudá-los.</p>
<p>Fiquem a vontade em postar dúvidas, sugestões e pedidos de novos tutoriais.</p>
<p>Abraço e até a próxima!</p>
<p>Rafael Bruno</p>
<a href="http://www.seomaster.com.br/bookmark.html" style="border:none; text-decoration:none" onmouseover="sb_plugin('http://www.pixelcomcafe.com/2010/03/2%c2%ba-parte-tecnicas-de-retoques-e-maquiagem-no-photoshop/','2º Parte: Técnicas de Retoques e Maquiagem no Photoshop'); return sb_showMenu(this)" onmouseout="sb_close()" onclick="return sb_open()"> 
		<img src="http://www.seomaster.com.br/img/bookmark-buttons/bt-partilhar-services.gif" border="0" style="display:inline; border:none" alt="Bookmark e Compartilhe" /> 
	</a><h3  class="related_post_title">Artigos Relacionados:</h3><ul class="related_post"><li><a href="http://www.pixelcomcafe.com/2010/02/tutorial-e-psd-criacao-do-ipad-no-photoshop/" title="Tutorial e PSD: Criação do Ipad no Photoshop">Tutorial e PSD: Criação do Ipad no Photoshop</a> (0)</li><li><a href="http://www.pixelcomcafe.com/2010/02/20-tutoriais-para-photoshop-com-criacao-de-layouts-para-sites/" title="20 Tutoriais para Photoshop com criação de layouts para sites">20 Tutoriais para Photoshop com criação de layouts para sites</a> (2)</li><li><a href="http://www.pixelcomcafe.com/2009/04/tecnicas-avancadas-para-recorte-de-cabelos-no-photoshop/" title="Técnicas avançadas para recorte de cabelos no Photoshop">Técnicas avançadas para recorte de cabelos no Photoshop</a> (7)</li><li><a href="http://www.pixelcomcafe.com/2009/03/20-tutoriais-para-photoshop-com-efeitos-de-texto/" title="20 Tutoriais para Photoshop com Efeitos de Texto">20 Tutoriais para Photoshop com Efeitos de Texto</a> (4)</li><li><a href="http://www.pixelcomcafe.com/2010/03/tutorial-ensinando-a-criar-um-formulario-de-cadastro-com-ajax/" title="Tutorial ensinando a criar um formulário de cadastro com Ajax">Tutorial ensinando a criar um formulário de cadastro com Ajax</a> (0)</li></ul>]]></content:encoded>
			<wfw:commentRss>http://www.pixelcomcafe.com/2010/03/2%c2%ba-parte-tecnicas-de-retoques-e-maquiagem-no-photoshop/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Como criar um bom portfólio?</title>
		<link>http://www.pixelcomcafe.com/2010/03/como-criar-um-bom-portfolio/</link>
		<comments>http://www.pixelcomcafe.com/2010/03/como-criar-um-bom-portfolio/#comments</comments>
		<pubDate>Wed, 10 Mar 2010 09:32:04 +0000</pubDate>
		<dc:creator>Daniele Silva</dc:creator>
				<category><![CDATA[Dicas]]></category>
		<category><![CDATA[Design]]></category>
		<category><![CDATA[Portfólio]]></category>

		<guid isPermaLink="false">http://www.pixelcomcafe.com/?p=2523</guid>
		<description><![CDATA[
			
				
			
		
Projetar seu portfolio é provavelmente a coisa mais frustrante do mundo.
Todos os colegas com quem conversei falam da dificuldade de concluir e das dezenas de vezes que abandonam e recomeçam.
Por exemplo o meu site mesmo, que além de blog, serve como portfolio passou por umas 4 tentativas até terminar, ele inclusive chegou a ser rosa [...]]]></description>
			<content:encoded><![CDATA[<div class="tweetmeme_button" style="float: right; margin-left: 5px;">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fwww.pixelcomcafe.com%2F2010%2F03%2Fcomo-criar-um-bom-portfolio%2F"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fwww.pixelcomcafe.com%2F2010%2F03%2Fcomo-criar-um-bom-portfolio%2F&amp;source=pixelcomcafe&amp;style=normal" height="61" width="50" /><br />
			</a>
		</div>
<p>Projetar seu portfolio é provavelmente a coisa mais frustrante do mundo.</p>
<p>Todos os colegas com quem conversei falam da dificuldade de concluir e das dezenas de vezes que abandonam e recomeçam.</p>
<p>Por exemplo o meu site mesmo, que além de blog, serve como portfolio passou por umas 4 tentativas até terminar, ele inclusive chegou a ser rosa e com florzinhas coloridas, mas todos as versões estavam mal acabadas do tipo “vamos deixar assim por enquanto”. E confesso que ainda não estou completamente satisfeita com a versão atual, tenho ideias novas pra ele todos os dias…</p>
<p style="text-align: center;"><img class="size-full wp-image-2526 aligncenter" title="como-criar-um-bom-portfolio" src="http://www.pixelcomcafe.com/wp-content/uploads/2010/03/como-criar-um-bom-portfolio.jpg" alt="" width="500" height="250" /></p>
<p>Evidentemente é a nossa ligação com o trabalho que prejudica o julgamento na hora da criação.</p>
<p>As pessoas com quem converso e que reclamam de seus portfolios geralmente o fazem por motivos pequenos, por um perfeccionismo quase sem explicação. Em muitos casos o trabalho é fantástico, mas pra ele ainda falta alguma coisa… É quase uma lei básica da natureza &#8220;todos devem estar insatisfeitos com o próprio portfolio&#8221;.</p>
<p><strong>Em primeiro lugar o que é um portfólio?</strong></p>
<p>Basicamente é a forma de tornar seus trabalhos portáteis. É tê-los em mãos, reunidos em um só lugar (pasta, web, cd) para uma exibição rápida quando necessário. Através do portfolio, entre outras coisas, as empresas contratantes tem a chance de avaliar e traçar uma linha da sua evolução e crescimento profissional.</p>
<p>Como era o trabalho dele em 2000? E em 2006? Quanto o profissional evoluiu com relação ao mercado? Ele conseguiu acompanhar? As respostas para essas perguntas devem estar no seu portfolio</p>
<p><strong>Como começar?</strong></p>
<p>Do começo é claro, projetando, criando o layout. Nós sempre ouvimos falar do quanto é importante inovar e investir em coisas diferentes, mas na hora de criar um portfolio temos que ter certeza absoluta do que pretendemos alcançar com ele, e torná-lo familiar ao publico alvo.</p>
<p>Se você é programador, mostre programação, se vc trabalha com flash e interação, mostre isso! Se você que ser contratado como designer “layout em primeiro lugar” e assim por diante.</p>
<p>Não pense em trabalhar um portfolio com animações incríveis e interação absurdamente maluca se vc deseja trabalhar com padrões web…. Não faz sentido algum…. Já vi pessoas sendo criticadas por construir um portfolio em flash pois não era acessível a certas situações, mas o criador só trabalhava com flash! E muito bem por sinal! ele buscava uma colocação nessa área, porque ele tentaria usar de outras ferramentas e acabar prejudicando o resultado? É tudo uma questão de caso….</p>
<p>Voltando ao layout: Lembre-se que o portfolio será o seu conhecimento técnico aliado a sua capacidade de resolver problemas.</p>
<p>Você pode e deve seguir um conceito, mas quanto menos especifico ele for, mais amplo será seu publico alvo (evidentemente). Se você escolhe um estilo distressed dificilmente vai encher os olhos de uma empresa voltada para o desenvolvimento de sites corporativos e de negócios. Então tente ser neutro, mas sem ser previsível ou básico demais.</p>
<p><strong>O que colocar ?</strong></p>
<p>No portfolio digital você não vai poder estar ao lado para apresentar as peças e escolher a ordem que o contratante deve navegar, qual trabalho ver primeiro, etc, então todo o conteúdo deve ser agradável e interessante, pois eles podem começar de qualquer lugar, se, de inicio, se depararem com um longo texto sobre a sua infancia e as maravilhas do lugar onde nasceu, pode ser que nem cheguem a ver os trabalhos.</p>
<p>É importante constar informações resumidas de localização, contato, conhecimentos, formação acadêmica, áreas de interesse e seu currículo pra download.</p>
<p>É no currículo que as informações acima devem ser detalhadas, se o contratante quiser detalhes, é lá que ele vai procurar.</p>
<p>No portfolio, exponha o suficiente para despertar o interesse, mas não se esqueça que ele não substitui o currículo, apenas complementa. Muitas vezes o setor que analisa os concorrentes não é o mesmo que contrata, então é sempre necessário uma versão de fácil impressão que possa ser apresentada a parte competente.</p>
<p><strong>E os trabalhos ?</strong></p>
<p>Antes de começar esse artigo, eu dei uma procurada pela net para ver o que as pessoas estavam dizendo a respeito, e encontrei coisas bem interessantes como no webinsider.</p>
<p>Em geral as pessoas sugerem que se monte um portfolio apenas com seus melhores trabalhos alguns sugerem começar pelos seus 3 melhores. Eu penso que essa não é a melhor idéia.</p>
<p>Como falei no inicio, o portfolio deve mostrar a sua evolução como profissional e a sua capacidade de aprendizado.</p>
<p>Exponha o maior número de casos possível, ordene por ano de criação, deixando os mais recentes primeiro, é provável que esses sejam os melhores, então não há porque temer. Se não forem, faça um breve estudo do caso, explique suas dificuldade e como você trabalhou para superá-las, esclareça o que o impediu de atingir seu potencial, se foram exigências do cliente, publico alvo, dificuldades técnicas ou de equipe, investimento financeiro. Se o problema for o cliente, aquele tipo que gosta de alterações que comprometem todo o trabalho, seja critico no estudo do caso, mas nunca seja ofensivo.</p>
<p>E como eu falei, exponha o maior número de trabalhos possível, mostre não só a sua capacidade criativa, mas também a sua experiência profissional.</p>
<p><strong>Tá, mas e eu que ainda não tenho nenhum cliente?</strong></p>
<p>Eu encontrei muitas pessoas com essa dificuldade: como criar um portfolio se eu estou começando agora e ainda não tenho trabalhos pra mostrar?</p>
<p>O melhor jeito é criar e criar e criar.</p>
<p>Desenvolva sites para amigos e familiares, eu quando estava começando, costumava dar sites de presente de aniversário, fazia uma especie de fotolog comemorativo, foi assim que comecei a aprender o tratamento de fotos.</p>
<p>Fã clube também é uma ótima sugestão. Normalmente eles tem fotos maravilhosas de artistas e fáceis de trabalhar, vai agregar valor a sua apresentação e ao mesmo tempo alegrar o pessoal que se dedica ao artista.</p>
<p>Outra opção que me agrada muito são as ongs, ao mesmo tempo que você ganha portfolio, ajuda o desenvolvimento dos projetos sociais.</p>
<p>Em último caso existe a opção de inventar empresas. Se você tem uma idéia pra sapataria, por exemplo, mas não tem um cliente, desenvolva o site, hospede no seu domínio e dê a ela um nome como “Sapataria seu nome aqui” para deixar evidente que essa empresa não existe. Mais tarde você pode até conseguir vender o layout pra alguma empresa do ramo.</p>
<p><strong>Por fim&#8230;</strong></p>
<p>…Essas são as técnicas que sugiro pra montagem de um portfolio, pois esse artigo já se prolongou demais. Em postagens futuras pretendo considerar outras técnicas que podem ser agregadas ao portfolio, tendências, diferenciais e como divulgá-lo depois de pronto.</p>
<p>Para essa seleção de sites eu procurei escolher trabalhos com elementos bem distintos. Espero que seja inspirador pra vc que está procurando uma forma diferente de expor seu trabalho.</p>
<p>Boa sorte!</p>
<a href="http://www.seomaster.com.br/bookmark.html" style="border:none; text-decoration:none" onmouseover="sb_plugin('http://www.pixelcomcafe.com/2010/03/como-criar-um-bom-portfolio/','Como criar um bom portfólio?'); return sb_showMenu(this)" onmouseout="sb_close()" onclick="return sb_open()"> 
		<img src="http://www.seomaster.com.br/img/bookmark-buttons/bt-partilhar-services.gif" border="0" style="display:inline; border:none" alt="Bookmark e Compartilhe" /> 
	</a><h3  class="related_post_title">Artigos Relacionados:</h3><ul class="related_post"><li><a href="http://www.pixelcomcafe.com/2010/03/instituto-infnet-divulga-datas-para-o-cliclo-de-palestras-gratuitas-de-marco-de-2010/" title="Instituto Infnet divulga datas para o cliclo de palestras gratuitas de março de 2010">Instituto Infnet divulga datas para o cliclo de palestras gratuitas de março de 2010</a> (0)</li><li><a href="http://www.pixelcomcafe.com/2010/03/10-ergodesignusihc-acontecera-nos-dias-17-a-20-de-maio-de-2010-na-puc-rj/" title="10º Ergodesign/USIHC acontecerá nos dias 17 a 20 de maio de 2010 na PUC-RJ">10º Ergodesign/USIHC acontecerá nos dias 17 a 20 de maio de 2010 na PUC-RJ</a> (0)</li><li><a href="http://www.pixelcomcafe.com/2010/03/o-que-e-briefing-para-que-ele-serve/" title="O que é Briefing? Para que ele serve?">O que é Briefing? Para que ele serve?</a> (0)</li><li><a href="http://www.pixelcomcafe.com/2010/02/15-edted-percorrera-10-cidades-em-2010/" title="15º EDTED percorrerá 10 cidades em 2010">15º EDTED percorrerá 10 cidades em 2010</a> (1)</li><li><a href="http://www.pixelcomcafe.com/2010/02/pixel-com-cafe-2010-sigam-me-os-bons/" title="Pixel com Café 2010, sigam-me os bons !!!">Pixel com Café 2010, sigam-me os bons !!!</a> (0)</li></ul>]]></content:encoded>
			<wfw:commentRss>http://www.pixelcomcafe.com/2010/03/como-criar-um-bom-portfolio/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>MSXRio 2010 reunirá fãs e usuários no Sesc Engenho de Dentro</title>
		<link>http://www.pixelcomcafe.com/2010/03/msxrio-2010-reunira-fas-e-usuarios-no-sesc-engenho-de-dentro/</link>
		<comments>http://www.pixelcomcafe.com/2010/03/msxrio-2010-reunira-fas-e-usuarios-no-sesc-engenho-de-dentro/#comments</comments>
		<pubDate>Tue, 09 Mar 2010 14:46:48 +0000</pubDate>
		<dc:creator>Anderson Nascimento</dc:creator>
				<category><![CDATA[Agenda de Eventos]]></category>
		<category><![CDATA[MSXRio]]></category>
		<category><![CDATA[Palestras]]></category>

		<guid isPermaLink="false">http://www.pixelcomcafe.com/?p=2514</guid>
		<description><![CDATA[
			
				
			
		
No sábado [13.03.10] acontecerá o MSXRio 2010, &#8220;encontro de fãs e usuários do computador MSX&#8221;; o evento será no Sesc de Engenho de Dentro com entrada franca.O evento já acontece desde 1997.
Quer matar saudades ou conhecer melhor o MSX?  Então não deixe de passar por lá para trocar altas ideias com as feras que estarão [...]]]></description>
			<content:encoded><![CDATA[<div class="tweetmeme_button" style="float: right; margin-left: 5px;">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fwww.pixelcomcafe.com%2F2010%2F03%2Fmsxrio-2010-reunira-fas-e-usuarios-no-sesc-engenho-de-dentro%2F"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fwww.pixelcomcafe.com%2F2010%2F03%2Fmsxrio-2010-reunira-fas-e-usuarios-no-sesc-engenho-de-dentro%2F&amp;source=pixelcomcafe&amp;style=normal" height="61" width="50" /><br />
			</a>
		</div>
<p><img class="size-full wp-image-2520 alignleft" title="msx-rio-logo" src="http://www.pixelcomcafe.com/wp-content/uploads/2010/03/msx-rio-logo.jpg" alt="" width="250" height="64" />No sábado [13.03.10] acontecerá o MSXRio 2010, &#8220;encontro de fãs e usuários do computador MSX&#8221;; o evento será no Sesc de Engenho de Dentro com entrada franca.O evento já acontece desde 1997.</p>
<p>Quer matar saudades ou conhecer melhor o MSX?  Então não deixe de passar por lá para trocar altas ideias com as feras que estarão presentes.</p>
<p><strong>MSXRio 2010</strong><br />
<strong>DATA: </strong>13 de março de 2010<br />
<strong>LOCAL:</strong> Sesc Eng. de Dentro &#8211; Av. Amaro Cavalcante, 1661 &#8211; Eng. de Dentro<br />
<strong>INSCRIÇÕES:</strong> Entrada Franca<br />
<strong>MAIS INF:</strong> <a href="http://www.msxrio.com.br" target="_blank">www.msxrio.com.br</a> &#8211; <a href="http://www.twitter.com/msxrio" target="_blank">@msxrio</a></p>
<p>AN <img src='http://www.pixelcomcafe.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
<a href="http://www.seomaster.com.br/bookmark.html" style="border:none; text-decoration:none" onmouseover="sb_plugin('http://www.pixelcomcafe.com/2010/03/msxrio-2010-reunira-fas-e-usuarios-no-sesc-engenho-de-dentro/','MSXRio 2010 reunirá fãs e usuários no Sesc Engenho de Dentro'); return sb_showMenu(this)" onmouseout="sb_close()" onclick="return sb_open()"> 
		<img src="http://www.seomaster.com.br/img/bookmark-buttons/bt-partilhar-services.gif" border="0" style="display:inline; border:none" alt="Bookmark e Compartilhe" /> 
	</a><h3  class="related_post_title">Artigos Relacionados:</h3><ul class="related_post"><li><a href="http://www.pixelcomcafe.com/2010/03/instituto-infnet-divulga-datas-para-o-cliclo-de-palestras-gratuitas-de-marco-de-2010/" title="Instituto Infnet divulga datas para o cliclo de palestras gratuitas de março de 2010">Instituto Infnet divulga datas para o cliclo de palestras gratuitas de março de 2010</a> (0)</li><li><a href="http://www.pixelcomcafe.com/2010/03/photoshop-conference-2010-acontecera-em-sao-paulo-nos-dia-12-13-e-14-de-abril/" title="Photoshop Conference 2010 acontecerá em São Paulo nos dia 12, 13 e 14 de abril">Photoshop Conference 2010 acontecerá em São Paulo nos dia 12, 13 e 14 de abril</a> (0)</li><li><a href="http://www.pixelcomcafe.com/2010/03/tecnologia-cafe-mar-2010-flash-cs4-actionscript-30-em-fortaleza/" title="Tecnologia &#038; Café &#8211; Mar 2010: Flash CS4 &#038; ActionScript 3.0 em Fortaleza">Tecnologia &#038; Café &#8211; Mar 2010: Flash CS4 &#038; ActionScript 3.0 em Fortaleza</a> (0)</li><li><a href="http://www.pixelcomcafe.com/2010/03/10-ergodesignusihc-acontecera-nos-dias-17-a-20-de-maio-de-2010-na-puc-rj/" title="10º Ergodesign/USIHC acontecerá nos dias 17 a 20 de maio de 2010 na PUC-RJ">10º Ergodesign/USIHC acontecerá nos dias 17 a 20 de maio de 2010 na PUC-RJ</a> (0)</li><li><a href="http://www.pixelcomcafe.com/2010/03/cafe-com-internet-industria-no-e-commerce-x-varejo-tradicional-internet-ainda-e-um-canal-de-conflito/" title="Café com Internet: Indústria no e-commerce X Varejo Tradicional. Internet ainda é um canal de conflito?">Café com Internet: Indústria no e-commerce X Varejo Tradicional. Internet ainda é um canal de conflito?</a> (0)</li></ul>]]></content:encoded>
			<wfw:commentRss>http://www.pixelcomcafe.com/2010/03/msxrio-2010-reunira-fas-e-usuarios-no-sesc-engenho-de-dentro/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Conhecendo o Smarty Template Engine, já ouviu falar?</title>
		<link>http://www.pixelcomcafe.com/2010/03/conhecendo-o-smarty-template-engine-ja-ouviu-falar/</link>
		<comments>http://www.pixelcomcafe.com/2010/03/conhecendo-o-smarty-template-engine-ja-ouviu-falar/#comments</comments>
		<pubDate>Tue, 09 Mar 2010 12:50:41 +0000</pubDate>
		<dc:creator>Rafael Alencar</dc:creator>
				<category><![CDATA[Desenvolvimento]]></category>
		<category><![CDATA[PHP]]></category>

		<guid isPermaLink="false">http://www.pixelcomcafe.com/?p=2479</guid>
		<description><![CDATA[
			
				
			
		
Primeiramente olá para todos. É um grande prazer estar aqui compartilhando e adquirindo conhecimento com todos que fazem parte do Pixel com Café, espero que possamos aproveitar ao máximo todas as informações que serão transmitidas aqui.
Inicialmente, trago para vocês um conteúdo que é de grande importância no desenvolvimento de aplicações (uso de camadas), então vamos [...]]]></description>
			<content:encoded><![CDATA[<div class="tweetmeme_button" style="float: right; margin-left: 5px;">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fwww.pixelcomcafe.com%2F2010%2F03%2Fconhecendo-o-smarty-template-engine-ja-ouviu-falar%2F"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fwww.pixelcomcafe.com%2F2010%2F03%2Fconhecendo-o-smarty-template-engine-ja-ouviu-falar%2F&amp;source=pixelcomcafe&amp;style=normal" height="61" width="50" /><br />
			</a>
		</div>
<p>Primeiramente olá para todos. É um grande prazer estar aqui compartilhando e adquirindo conhecimento com todos que fazem parte do Pixel com Café, espero que possamos aproveitar ao máximo todas as informações que serão transmitidas aqui.</p>
<p>Inicialmente, trago para vocês um conteúdo que é de grande importância no desenvolvimento de aplicações (uso de camadas), então vamos aproveitar cada detalhe desse nosso conteúdo. Vão por mim, vale a pena. <img src='http://www.pixelcomcafe.com/wp-includes/images/smilies/icon_biggrin.gif' alt=':D' class='wp-smiley' /> </p>
<p>Hum, vamos lá?</p>
<p>Bom, vejamos o título dessa postagem. Pra quem reponde a pergunta com “já”, “sim” ou “conheço”, talvez essas palavras iniciais não sejam de fato de grande importância, mas quero na verdade começar do “zero”, pra que tudo fique bem esclarecido e principalmente entendido por todos, ok?</p>
<p>Ok, Smarty Template Engine nada mais é do que uma “Máquina de Modelos Esperta”, fácil né? Pois é! <img src='http://www.pixelcomcafe.com/wp-includes/images/smilies/icon_biggrin.gif' alt=':D' class='wp-smiley' />  (brincadeira). Vamos lá&#8230;</p>
<p>Acredito que todos, ou pelo menos a maioria, tenham começado a usar PHP adicionando algum conteúdo dinâmico em páginas HTML estáticas. Geralmente, apenas adicionamos elementos &lt;?php ?&gt; dentro do código HTML. Mas ao longo do tempo, se adicionarmos mais e mais código PHP, bases de dados,e outros recursos, os scripts podem se tornar realmente confusos, o que não é bom. Além disso, ao longo do tempo o PHP evoluiu do Hypertext Preprocessor (Processador de Hipertexto) para uma séria e poderosa linguagem de programação, o que causou uma abordagem diferente para sites / aplicações PHP. É uma má prática nos dias atuais misturar o PHP e HTML, lógica e apresentação. Em vez disso, devemos tentar distinguir o PHP e lógica a partir da apresentação (HTML e PHP – 2 camadas).</p>
<p>Podemos usar PHP para fazer isso. Separar a lógica e apresentação em dois grupos de scripts PHP. Poderiamos fazer todos os cálculos e preparação de dados no primeiro grupo de scripts e, em seguida, apresentar os dados com o outro grupo de scripts, que geralmente deveria conter código HTML com a adição de conteúdo gerado dinamicamente, que seria impresso por &lt;?php echo $ minha_variavel; ?&gt;. Mas se você já editou temas do Word Press (por exemplo), você vai ver que o código HTML se torna ilegível com o uso exagerado do elemento &lt;?php ?&gt;.</p>
<p>É aí onde entra Smarty. Podemos escrever templates HTML (modelos HTML) muito mais “limpos” usando variáveis  Smarty e commandos Smarty. Smarty também faz o intermédio  do template com o código PHP, que se parece com um tema do Word Press que foi mencionado anteriormente, mas a vantagem é que não precisamos nos preocupar com isso. Tudo que devemos fazer é criar os templates com HTML puro. O código PHP intermediário é armazenado em cache para que o seu desempenho não seja diminuído. Por isso que se chama “esperta”, smarty em inglês.</p>
<p>Smarty é uma ferramenta muito simples. Você cria o objeto*, atribuir valores às variáveis Smarty e no fim do script, você invoca o método* de exibição para “publicar” a página.</p>
<div class="dp-highlighter">
<p>1. $smarty-&gt;assign(&#8216;titulo&#8217;, &#8216;Artigos e Tutoriais&#8217;);<br />
2. $smarty-&gt;assign(&#8216;mensagem&#8217;, &#8216;Iniciando com Smarty!&#8217;);<br />
3. $smarty-&gt;display(&#8216;bemvindo.tpl&#8217;);</p>
<p>Uma das maiores vantagens do uso de Smarty é que podemos facilmente apresentar os dados em vários formatos diferentes. Por exemplo, podemos usar o mesmo código para recuperar dados da base de dados e preparar objetos e então usar os diferentes  templates Smarty para publicar conteúdo para as diferentes plataformas (uso de camadas).</p>
<p><img class="alignnone size-full wp-image-2485" title="diagrama_smarty" src="http://www.pixelcomcafe.com/wp-content/uploads/2010/03/diagrama_smarty.gif" alt="" width="500" height="126" /></p>
<p>Vamos dar uma olhada no diagrama acima. Vários scripts usam classes* para recuperar dados de bases de dados. Uma vez formatados e preparados para a publicação, usando diferentes templates Smarty, os mesmos conjuntos de dados podem ser utilizados para produzir vários conteúdos como página web, rss ou até memo conteúdo para dispositivos móveis.</p>
<p>Outra grande vantagem, que notamos nos casos mais práticos no ambiente de desenvolvimento, é o fato de separar definitivamente as funções do programador e do webdesigner. Como podemos notar, temos duas camadas em nossa aplicação (scripts PHP e modelos HTML), o programador se preocupa somente em cuidar da camada da aplicação que realmente é de seu conhecimento, enquanto o webdesigner se preocupa somente com a camada do HTML puro.</p>
<p>Legal né? É sim! Prometo que é mais legal ainda. <img src='http://www.pixelcomcafe.com/wp-includes/images/smilies/icon_biggrin.gif' alt=':D' class='wp-smiley' /> </p>
<p>Bem, antes de concluir essa primeira parte, gostaria de deixar claro uma coisa muito importante. Como podem perceber, alguns termos estão marcados com o asterisco (*), pois esses termos se referem ao uso de metodologia orientada à objetos, que de fato é necessário para o completo entendimento de Smarty, isso porque Smarty é uma ferramente desenvolvida com essa metodologia orientada a objetos, então eis o sentido de termos esse conhecimento. Mas não nos preocupemos, tiraremos quaisquer eventuais dúvidas que surgirem ao decorrer de nosso conteúdo, porém procurem se aprofundarem um pouco mais nesse assunto, ok?</p>
<p>Bom, para concluir gostaria simplesmente de pedir que façam previamente o download da nossa ferramenta pelo site <a href="http://www.smarty.net/download.php" target="_blank">http://www.smarty.net/download.php</a>. Procurem a versão mais recente, se possível. Peço isso porque, obviamente dando continuidade ao nosso conteúdo, estarei preparando um video para que possamos fazer a “instalação” e criarmos o ambiente para utilização de Smarty.</p>
<p>Então, é isso. Espero que tenha entendido e aguentado todo esse blá blá blá conceitual. <img src='http://www.pixelcomcafe.com/wp-includes/images/smilies/icon_biggrin.gif' alt=':D' class='wp-smiley' /> </p>
<p>Sei que queremos mesmo é por a mão na massa. Então estudem, pesquisem e leiam, leiam muito! Grande abraço a todos e até breve!</p></div>
<a href="http://www.seomaster.com.br/bookmark.html" style="border:none; text-decoration:none" onmouseover="sb_plugin('http://www.pixelcomcafe.com/2010/03/conhecendo-o-smarty-template-engine-ja-ouviu-falar/','Conhecendo o Smarty Template Engine, já ouviu falar?'); return sb_showMenu(this)" onmouseout="sb_close()" onclick="return sb_open()"> 
		<img src="http://www.seomaster.com.br/img/bookmark-buttons/bt-partilhar-services.gif" border="0" style="display:inline; border:none" alt="Bookmark e Compartilhe" /> 
	</a><h3  class="related_post_title">Artigos Relacionados:</h3><ul class="related_post"><li><a href="http://www.pixelcomcafe.com/2010/03/video-aula-criando-um-carrinho-de-compras-listando-itens-2-parte/" title="Vídeo Aula: Criando um carrinho de compras &#8211; Listando itens &#8211; 2ª parte">Vídeo Aula: Criando um carrinho de compras &#8211; Listando itens &#8211; 2ª parte</a> (0)</li><li><a href="http://www.pixelcomcafe.com/2010/03/video-aula-criando-um-carrinho-de-compras-base-dados-1-parte/" title="Vídeo Aula: Criando um carrinho de compras &#8211; base dados &#8211; 1ª parte">Vídeo Aula: Criando um carrinho de compras &#8211; base dados &#8211; 1ª parte</a> (5)</li><li><a href="http://www.pixelcomcafe.com/2010/02/2-encontro-de-desenvolvedores-php-do-maranhao/" title="2º Encontro de Desenvolvedores PHP do Maranhão">2º Encontro de Desenvolvedores PHP do Maranhão</a> (0)</li><li><a href="http://www.pixelcomcafe.com/2009/08/1-php-al-road-show/" title="1º PHP-AL Road Show">1º PHP-AL Road Show</a> (1)</li><li><a href="http://www.pixelcomcafe.com/2009/07/1-phpn-rio/" title="1º PHP&#8217;N RIO">1º PHP&#8217;N RIO</a> (1)</li></ul>]]></content:encoded>
			<wfw:commentRss>http://www.pixelcomcafe.com/2010/03/conhecendo-o-smarty-template-engine-ja-ouviu-falar/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>4 sites geradores de ícones para preloaders em Ajax</title>
		<link>http://www.pixelcomcafe.com/2010/03/4-sites-geradores-de-icones-para-preloaders-em-ajax/</link>
		<comments>http://www.pixelcomcafe.com/2010/03/4-sites-geradores-de-icones-para-preloaders-em-ajax/#comments</comments>
		<pubDate>Tue, 09 Mar 2010 10:50:01 +0000</pubDate>
		<dc:creator>Anderson Nascimento</dc:creator>
				<category><![CDATA[Ajax]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[Ícones]]></category>

		<guid isPermaLink="false">http://www.pixelcomcafe.com/?p=2422</guid>
		<description><![CDATA[
			
				
			
		
São 4 sites onde podemos baixar diversos ícones a serem utilizados em preloaders em Ajax, alguns permitem a edição de background, forma e etc&#8230;
1. PRELOADERS.NET - http://preloaders.net


2. AJAXLOAD.INFO - http://www.ajaxload.info


3. LOAD GENERATOR &#8211; http://www.loadinfo.net


4. ACTIVITY INDICATORS - http://mentalized.net/activity-indicators

*Essa dica vale uma vaga em seu favoritos, heim, heim&#8230; [ há   ]
AN  
 
		 [...]]]></description>
			<content:encoded><![CDATA[<div class="tweetmeme_button" style="float: right; margin-left: 5px;">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fwww.pixelcomcafe.com%2F2010%2F03%2F4-sites-geradores-de-icones-para-preloaders-em-ajax%2F"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fwww.pixelcomcafe.com%2F2010%2F03%2F4-sites-geradores-de-icones-para-preloaders-em-ajax%2F&amp;source=pixelcomcafe&amp;style=normal" height="61" width="50" /><br />
			</a>
		</div>
<p>São 4 sites onde podemos baixar diversos ícones a serem utilizados em preloaders em Ajax, alguns permitem a edição de background, forma e etc&#8230;</p>
<p><strong>1. PRELOADERS.NET </strong>- <a href="http://preloaders.net" target="_blank">http://preloaders.net</a></p>
<p><img class="alignnone size-full wp-image-2423" title="preloadersnet" src="http://www.pixelcomcafe.com/wp-content/uploads/2010/03/preloadersnet.jpg" alt="" width="360" height="200" /></p>
<p><strong><br />
2. AJAXLOAD.INFO -</strong> <a href="http://www.ajaxload.info" target="_blank">http://www.ajaxload.info</a></p>
<p><img class="alignnone size-full wp-image-2424" title="ajaxloadinfo" src="http://www.pixelcomcafe.com/wp-content/uploads/2010/03/ajaxloadinfo.jpg" alt="" width="360" height="200" /></p>
<p><strong><br />
3. LOAD GENERATOR</strong> &#8211; <a href="http://www.loadinfo.net" target="_blank">http://www.loadinfo.net</a></p>
<p><img class="alignnone size-full wp-image-2425" title="loader-generator" src="http://www.pixelcomcafe.com/wp-content/uploads/2010/03/loader-generator.jpg" alt="" width="360" height="200" /></p>
<p><strong><br />
4. ACTIVITY INDICATORS -</strong> <a href="http://mentalized.net/activity-indicators" target="_blank">http://mentalized.net/activity-indicators</a></p>
<p><img class="alignnone size-full wp-image-2426" title="activity-indicators" src="http://www.pixelcomcafe.com/wp-content/uploads/2010/03/activity-indicators.jpg" alt="" width="360" height="200" /></p>
<p>*Essa dica vale uma vaga em seu favoritos, heim, heim&#8230; [ há <img src='http://www.pixelcomcafe.com/wp-includes/images/smilies/icon_wink.gif' alt=';)' class='wp-smiley' />  ]</p>
<p>AN <img src='http://www.pixelcomcafe.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
<a href="http://www.seomaster.com.br/bookmark.html" style="border:none; text-decoration:none" onmouseover="sb_plugin('http://www.pixelcomcafe.com/2010/03/4-sites-geradores-de-icones-para-preloaders-em-ajax/','4 sites geradores de ícones para preloaders em Ajax'); return sb_showMenu(this)" onmouseout="sb_close()" onclick="return sb_open()"> 
		<img src="http://www.seomaster.com.br/img/bookmark-buttons/bt-partilhar-services.gif" border="0" style="display:inline; border:none" alt="Bookmark e Compartilhe" /> 
	</a><h3  class="related_post_title">Artigos Relacionados:</h3><ul class="related_post"><li><a href="http://www.pixelcomcafe.com/2010/03/tutorial-ensinando-a-criar-um-formulario-de-cadastro-com-ajax/" title="Tutorial ensinando a criar um formulário de cadastro com Ajax">Tutorial ensinando a criar um formulário de cadastro com Ajax</a> (0)</li><li><a href="http://www.pixelcomcafe.com/2009/08/vetores-de-bandeiras-escudos-de-clubes-e-mapas/" title="Vetores de bandeiras, escudos de clubes e mapas">Vetores de bandeiras, escudos de clubes e mapas</a> (4)</li><li><a href="http://www.pixelcomcafe.com/2009/04/icones-alternativos-de-validacao-w3c/" title="Ícones alternativos de validação W3C">Ícones alternativos de validação W3C</a> (0)</li><li><a href="http://www.pixelcomcafe.com/2009/04/botoes-social-bookmarks-para-blogs-e-sites-com-efeito-imac/" title="Botões social bookmarks para blogs e sites com efeito iMac">Botões social bookmarks para blogs e sites com efeito iMac</a> (4)</li><li><a href="http://www.pixelcomcafe.com/2009/04/excelente-selecao-de-icones-gratuitos-na-free-icons-web/" title="Excelente seleção de ícones gratuitos na Free Icons Web">Excelente seleção de ícones gratuitos na Free Icons Web</a> (3)</li></ul>]]></content:encoded>
			<wfw:commentRss>http://www.pixelcomcafe.com/2010/03/4-sites-geradores-de-icones-para-preloaders-em-ajax/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Tutorial ensinando como entrelaçar letras no Fireworks</title>
		<link>http://www.pixelcomcafe.com/2010/03/tutorial-ensinando-como-entrelacar-letras-no-fireworks/</link>
		<comments>http://www.pixelcomcafe.com/2010/03/tutorial-ensinando-como-entrelacar-letras-no-fireworks/#comments</comments>
		<pubDate>Mon, 08 Mar 2010 20:50:38 +0000</pubDate>
		<dc:creator>Danilo Bezerra</dc:creator>
				<category><![CDATA[Fireworks]]></category>
		<category><![CDATA[Efeitos]]></category>
		<category><![CDATA[Tutorial]]></category>

		<guid isPermaLink="false">http://www.pixelcomcafe.com/?p=2386</guid>
		<description><![CDATA[
			
				
			
		
Neste tutorial veremos como entrelaçar letras, criando assim um efeito bem interessante, utilizaremos o Fireworks.
1. Vamos criar um novo documento:


2. Agora digite as letras que deseja entrelaçar, no caso irei fazer com “B” e “C”.


3. Duplique o “B” de forma que suas layers fiquem desta maneira:


4. Vamos então criar uma forma com a ferramenta “Pen [...]]]></description>
			<content:encoded><![CDATA[<div class="tweetmeme_button" style="float: right; margin-left: 5px;">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fwww.pixelcomcafe.com%2F2010%2F03%2Ftutorial-ensinando-como-entrelacar-letras-no-fireworks%2F"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fwww.pixelcomcafe.com%2F2010%2F03%2Ftutorial-ensinando-como-entrelacar-letras-no-fireworks%2F&amp;source=pixelcomcafe&amp;style=normal" height="61" width="50" /><br />
			</a>
		</div>
<p>Neste tutorial veremos como entrelaçar letras, criando assim um efeito bem interessante, utilizaremos o Fireworks.</p>
<p><strong>1.</strong> Vamos criar um novo documento:</p>
<p><img class="alignnone size-full wp-image-2387" title="entrelacando-letras-fireworks-1" src="http://www.pixelcomcafe.com/wp-content/uploads/2010/03/entrelacando-letras-fireworks-1.jpg" alt="" width="397" height="313" /></p>
<p><strong><br />
2.</strong> Agora digite as letras que deseja entrelaçar, no caso irei fazer com “B” e “C”.</p>
<p><img class="alignnone size-full wp-image-2388" title="entrelacando-letras-fireworks-2" src="http://www.pixelcomcafe.com/wp-content/uploads/2010/03/entrelacando-letras-fireworks-2.jpg" alt="" width="225" height="196" /></p>
<p><strong><br />
3.</strong> Duplique o “B” de forma que suas layers fiquem desta maneira:</p>
<p><img class="alignnone size-full wp-image-2389" title="entrelacando-letras-fireworks-3" src="http://www.pixelcomcafe.com/wp-content/uploads/2010/03/entrelacando-letras-fireworks-3.jpg" alt="" width="268" height="200" /></p>
<p><strong><br />
4.</strong> Vamos então criar uma forma com a ferramenta “Pen Tool” sob as letras do palco, onde iremos entrelaçar</p>
<p><img class="alignnone size-full wp-image-2390" title="entrelacando-letras-fireworks-4" src="http://www.pixelcomcafe.com/wp-content/uploads/2010/03/entrelacando-letras-fireworks-4.jpg" alt="" width="185" height="192" /></p>
<p><strong><br />
5.</strong> Com nosso path criado selecione a primeira letra (nesse caso o B) e de os comandos: CNTRL + X. Note que o path sumiu, vamos agora finalizar selecionando novamente a primeira letra e ir em Edit &gt; Paste As Mask (ou CNTRL + ALT + V).</p>
<p><img class="alignnone size-full wp-image-2391" title="entrelacando-letras-fireworks-5" src="http://www.pixelcomcafe.com/wp-content/uploads/2010/03/entrelacando-letras-fireworks-5.jpg" alt="" width="191" height="178" /><br />
Importante: a cor do path criado deve ser a mesma que a primeira letra.</p>
<p><img class="alignnone size-full wp-image-2392" title="entrelacando-letras-fireworks-6" src="http://www.pixelcomcafe.com/wp-content/uploads/2010/03/entrelacando-letras-fireworks-6.jpg" alt="" width="257" height="214" /><br />
Pronto! Efeito concluído.</p>
<a href="http://www.seomaster.com.br/bookmark.html" style="border:none; text-decoration:none" onmouseover="sb_plugin('http://www.pixelcomcafe.com/2010/03/tutorial-ensinando-como-entrelacar-letras-no-fireworks/','Tutorial ensinando como entrelaçar letras no Fireworks'); return sb_showMenu(this)" onmouseout="sb_close()" onclick="return sb_open()"> 
		<img src="http://www.seomaster.com.br/img/bookmark-buttons/bt-partilhar-services.gif" border="0" style="display:inline; border:none" alt="Bookmark e Compartilhe" /> 
	</a><h3  class="related_post_title">Artigos Relacionados:</h3><ul class="related_post"><li><a href="http://www.pixelcomcafe.com/2010/03/1-parte-tecnicas-de-retoques-e-maquiagem-no-photoshop/" title="1º Parte: Técnicas de Retoques e Maquiagem no Photoshop">1º Parte: Técnicas de Retoques e Maquiagem no Photoshop</a> (3)</li><li><a href="http://www.pixelcomcafe.com/2009/04/info-disponibiliza-cursos-gratuitos-na-web/" title="Info disponibiliza cursos gratuitos na web">Info disponibiliza cursos gratuitos na web</a> (1)</li><li><a href="http://www.pixelcomcafe.com/2009/03/styles-web-20-para-fireworks/" title="Styles Web 2.0 para Fireworks">Styles Web 2.0 para Fireworks</a> (10)</li><li><a href="http://www.pixelcomcafe.com/2009/01/insira-baloezinhos-em-suas-fotos-e-divirta-se/" title="Divirta-se, inserindo balõezinhos em suas fotos!!!">Divirta-se, inserindo balõezinhos em suas fotos!!!</a> (4)</li><li><a href="http://www.pixelcomcafe.com/2008/07/iwconference-2008/" title="iwConference 2008">iwConference 2008</a> (11)</li></ul>]]></content:encoded>
			<wfw:commentRss>http://www.pixelcomcafe.com/2010/03/tutorial-ensinando-como-entrelacar-letras-no-fireworks/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Tutorial ensinando a criar um formulário de cadastro com Ajax</title>
		<link>http://www.pixelcomcafe.com/2010/03/tutorial-ensinando-a-criar-um-formulario-de-cadastro-com-ajax/</link>
		<comments>http://www.pixelcomcafe.com/2010/03/tutorial-ensinando-a-criar-um-formulario-de-cadastro-com-ajax/#comments</comments>
		<pubDate>Mon, 08 Mar 2010 12:50:20 +0000</pubDate>
		<dc:creator>Erle Carrara</dc:creator>
				<category><![CDATA[Ajax]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[Tutoriais]]></category>

		<guid isPermaLink="false">http://www.pixelcomcafe.com/?p=2433</guid>
		<description><![CDATA[
			
				
			
		
Olá pessoal, meu nome é Erle Carrara, e nesse artigo vou explicar como fazer aplicações para web usando Ajax junto a biblioteca jQuery.
Para quem não sabe o que é jQuery e nem Ajax vou dar uma breve explicação.
jQuery é uma biblioteca javascript, ou seja, um conjunto de com a intenção de facilitar a vida na [...]]]></description>
			<content:encoded><![CDATA[<div class="tweetmeme_button" style="float: right; margin-left: 5px;">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fwww.pixelcomcafe.com%2F2010%2F03%2Ftutorial-ensinando-a-criar-um-formulario-de-cadastro-com-ajax%2F"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fwww.pixelcomcafe.com%2F2010%2F03%2Ftutorial-ensinando-a-criar-um-formulario-de-cadastro-com-ajax%2F&amp;source=pixelcomcafe&amp;style=normal" height="61" width="50" /><br />
			</a>
		</div>
<p>Olá pessoal, meu nome é <strong>Erle Carrara</strong>, e nesse artigo vou explicar como fazer aplicações para web usando <strong>Ajax</strong> junto a biblioteca <strong>jQuery</strong>.</p>
<p>Para quem não sabe o que é jQuery e nem Ajax vou dar uma breve explicação.</p>
<p><span style="color: #ff0000;"><strong>jQuery</strong></span> é uma biblioteca javascript, ou seja, um conjunto de com a intenção de facilitar a vida na hora de programar sites. Existem outras bibliotecas Javascript como a <em>Prototype</em>,<em> Deliciuos</em>,<em> Mootools</em> entre outras mas com a <span style="text-decoration: underline;">jQuery</span> se destaca entre elas por ser  mais simples de utilizar (simples não é ter menos recursos, ok?) e pelo seu tamanho muito, mas muito pequeno mesmo, com cerca de 19KB na sua versão comprimida.</p>
<p>Já o <span style="color: #ff0000;"><strong>Ajax</strong></span>, não é um biblioteca Javascript e também não é muito correto falar que ele é um objeto Javascript. Ajax é uma forma de fazer sites interativos que não precisem recarregar a página para buscar uma única informação no servidor.</p>
<p>Veja um exemplo, se temos um formulário para cadastro e nele precisamos saber se o nome de usuário inserido pelo visitante já não existe em nosso banco de dados, normalmente teríamos que enviar para o servidor o formulário inteiro, um script no lado do servidor verificaria se o nome de usuário esta disponível ou não e retorna uma página inteira novamente. Mas tudo isso se agente só precisava de uma informação só? É aqui que entra a jQuery e o Ajax , com a jQuery vamos enviar só a informação que queremos e receberemos só a resposta sim ou não do servidor, indicando se o nome de usuário ta disponível ou não.</p>
<p>Vamos lá então!</p>
<p>Comecemos entendendo como o Ajax funciona. A base do Ajax é trocar informações com o servidor usando o objeto XmlHttpRequest sem que seja recarregada a pa?ina inteira. Com o Ajax ele simplificara o uso do objeto. Vamos criar uma página html com um formulário simples de cadastro contendendo os campos de nome, email, login e senha:</p>
<p><span style="color: #009900;">&lt;!doctype html&gt;<br />
&lt;<span style="color: #000000;"><strong>html</strong></span>&gt;<br />
&lt;<span style="font-weight: bold; color: #000000;">head</span>&gt;</span></p>
<pre class="html4strict" style="font-family: monospace;">    <span style="color: #009900;">&lt;<span style="font-weight: bold; color: #000000;">meta</span> <span style="color: #000066;">http-equiv</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"Content-type"</span> <span style="color: #000066;">content</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"text/html; charset=utf-8"</span> <span style="color: #66cc66;">/</span>&gt;</span>
    <span style="color: #009900;">&lt;<span style="font-weight: bold; color: #000000;">title</span>&gt;</span>Cadastro de Usu<span style="color: #ddbb00;">&amp;aacute;</span>rios<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="font-weight: bold; color: #000000;">title</span>&gt;</span>
    <span style="color: #009900;">&lt;<span style="font-weight: bold; color: #000000;">link</span> <span style="color: #000066;">rel</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"stylesheet"</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"css.css"</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"text/css"</span> <span style="color: #000066;">media</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"screen"</span> <span style="color: #66cc66;">/</span>&gt;</span>
    <span style="color: #009900;">&lt;<span style="font-weight: bold; color: #000000;">script</span> <span style="color: #000066;">src</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"jquery.js"</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"text/javascript"</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="font-weight: bold; color: #000000;">script</span>&gt;</span> <span style="font-style: italic; color: #808080;">&lt;!-- Não esqueça de colocar --&gt;</span>
    <span style="color: #009900;">&lt;<span style="font-weight: bold; color: #000000;">script</span> <span style="color: #000066;">src</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"app.js"</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"text/javascript"</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="font-weight: bold; color: #000000;">script</span>&gt;</span> <span style="font-style: italic; color: #808080;">&lt;!-- ... e esse também --&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="font-weight: bold; color: #000000;">head</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="font-weight: bold; color: #000000;">body</span>&gt;</span>

    <span style="color: #009900;">&lt;<span style="font-weight: bold; color: #000000;">form</span> <span style="color: #000066;">action</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"novo_usuario.php"</span> <span style="color: #000066;">method</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"post"</span> <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"cadastro"</span>&gt;</span>
        <span style="color: #009900;">&lt;<span style="font-weight: bold; color: #000000;">fieldset</span>&gt;</span>
            <span style="color: #009900;">&lt;<span style="font-weight: bold; color: #000000;">legend</span>&gt;</span>Cadastro<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="font-weight: bold; color: #000000;">legend</span>&gt;</span>
            <span style="color: #009900;">&lt;<span style="font-weight: bold; color: #000000;">label</span> <span style="color: #000066;">for</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"nome"</span>&gt;</span>Nome:<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="font-weight: bold; color: #000000;">label</span>&gt;</span>
            <span style="color: #009900;">&lt;<span style="font-weight: bold; color: #000000;">input</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"text"</span> <span style="color: #000066;">name</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"nome"</span> <span style="color: #000066;">value</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">""</span> <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"nome"</span> <span style="color: #66cc66;">/</span>&gt;</span>
            <span style="color: #009900;">&lt;<span style="font-weight: bold; color: #000000;">label</span> <span style="color: #000066;">for</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"email"</span>&gt;</span>Email:<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="font-weight: bold; color: #000000;">label</span>&gt;</span>
            <span style="color: #009900;">&lt;<span style="font-weight: bold; color: #000000;">input</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"text"</span> <span style="color: #000066;">name</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"email"</span> <span style="color: #000066;">value</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">""</span> <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"email"</span> <span style="color: #66cc66;">/</span>&gt;</span>
            <span style="color: #009900;">&lt;<span style="font-weight: bold; color: #000000;">label</span> <span style="color: #000066;">for</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"login"</span>&gt;</span>Login:<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="font-weight: bold; color: #000000;">label</span>&gt;</span>
            <span style="color: #009900;">&lt;<span style="font-weight: bold; color: #000000;">input</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"text"</span> <span style="color: #000066;">name</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"login"</span> <span style="color: #000066;">value</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">""</span> <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"login"</span> <span style="color: #66cc66;">/</span>&gt;</span>
            <span style="color: #009900;">&lt;<span style="font-weight: bold; color: #000000;">label</span> <span style="color: #000066;">for</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"senha"</span>&gt;</span>Senha:<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="font-weight: bold; color: #000000;">label</span>&gt;</span>
            <span style="color: #009900;">&lt;<span style="font-weight: bold; color: #000000;">input</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"password"</span> <span style="color: #000066;">name</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"senha"</span> <span style="color: #000066;">value</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">""</span> <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"senha"</span> <span style="color: #66cc66;">/</span>&gt;</span>
            <span style="color: #009900;">&lt;<span style="font-weight: bold; color: #000000;">label</span> <span style="color: #000066;">for</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"re-senha"</span>&gt;</span>Digite a senha novamente:<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="font-weight: bold; color: #000000;">label</span>&gt;</span>
            <span style="color: #009900;">&lt;<span style="font-weight: bold; color: #000000;">input</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"password"</span> <span style="color: #000066;">name</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"re-senha"</span> <span style="color: #000066;">value</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">""</span> <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"re-senha"</span> <span style="color: #66cc66;">/</span>&gt;</span>
            <span style="color: #009900;">&lt;<span style="font-weight: bold; color: #000000;">input</span> <span style="color: #000066;">type</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"submit"</span> <span style="color: #000066;">name</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"cadastrar"</span> <span style="color: #000066;">value</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"cadastrar"</span> <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"cadastrar"</span> <span style="color: #66cc66;">/</span>&gt;</span>
            <span style="color: #009900;">&lt;<span style="font-weight: bold; color: #000000;">small</span> <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">"resultado"</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="font-weight: bold; color: #000000;">small</span>&gt;</span>
            <span style="color: #009900;">&lt;<span style="font-weight: bold; color: #000000;">small</span>&gt;</span>* todos os campos s<span style="color: #ddbb00;">&amp;atilde;</span>o obrigatorios<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="font-weight: bold; color: #000000;">small</span>&gt;</span>
        <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="font-weight: bold; color: #000000;">fieldset</span>&gt;</span>
    <span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="font-weight: bold; color: #000000;">form</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="font-weight: bold; color: #000000;">body</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="font-weight: bold; color: #000000;">html</span>&gt;
</span></pre>
<p>A estilização do formulário pode ser feita como CSS, que não vou explicar aqui para o artigo não ficar muito grande, mas quem se interessar tem um artigo no meu blog explicando o css. Não se esqueça de inserir um link para a biblioteca jQuery e um para o nosso Javascript, chamado de app.js.\r\n</p>
<p>Repare que em action eu coloquei o endereço da pa?ina que processara os dados, por que caso o usuário não tenha javascript ele também fará o cadastro(se é que isso ainda existe, alguém com javascript desabilitado). Veja também que criei um elemento small com id resultado que receberá as informações do servidor(as menssagens de erro).</p>
<p>Com o formulário pronto, o que temos que fazer é a parte do servidor, que manipulara os dados, para criei um script em php que verifica se o usuário inseriu corretamente todos os dados, vamos usa ele, não esqueça de salvar como novo_usuario.php no ser servidor, junto com os outros arquivos criados até agora. O nosso cadastro também depende de um banco de dados, tem um arquivo sql no final do artigo, é só importa-lo para o seu banco de dados usando o phpmyadmin.</p>
<p>Agora que temos a pa?ina e nosso script para processar os dados no lado do servidor tudo já deve estar funcionando sem o Ajax. Só falta a um simples Javascript para enviar os dados e manipular a resposta do servidor(simples graça a jQuery).</p>
<p>Vamos criar o app.js e ver cada função dele:</p>
<p><img class="alignnone size-full wp-image-2436" title="form-ajax-1" src="http://www.pixelcomcafe.com/wp-content/uploads/2010/03/form-ajax-1.gif" alt="" width="500" height="146" /></p>
<p>A primeira linha é uma função da jQuery que é executada quando toda a estrutura da página é carregada, ou seja, tudo será feito se a página tiver sido carregada.</p>
<p>A segunda linha é a função a ser executada quando o visitante enviar os formulário</p>
<p>A terceira linha é nossa função que envia os dados ao servidor, o $.post, ela recebe basicamente 3 parametros, o primeiro a página para onde os dados serão enviados, o segundo os dados que a pa?ina vai receber(repare que foi enviado como se estivessem em uma url) e o terceiro a funçãoo que tratara a respota da pa?ina.</p>
<p>A quarta linha recebe a resposta da página e coloca dentro do elemento html que tenha id igual a resultado.</p>
<p>A função return false é só para assegurar que o formulário não será enviado novamente, já que os dados dele são foram enviados por que enviar denovo pelo metódo normal?</p>
<p>Se tudo foi feito corretamente você pode testar seu formulário usando Ajax agora.</p>
<p>Abraços a todos!</p>
<a href="http://www.seomaster.com.br/bookmark.html" style="border:none; text-decoration:none" onmouseover="sb_plugin('http://www.pixelcomcafe.com/2010/03/tutorial-ensinando-a-criar-um-formulario-de-cadastro-com-ajax/','Tutorial ensinando a criar um formulário de cadastro com Ajax'); return sb_showMenu(this)" onmouseout="sb_close()" onclick="return sb_open()"> 
		<img src="http://www.seomaster.com.br/img/bookmark-buttons/bt-partilhar-services.gif" border="0" style="display:inline; border:none" alt="Bookmark e Compartilhe" /> 
	</a><h3  class="related_post_title">Artigos Relacionados:</h3><ul class="related_post"><li><a href="http://www.pixelcomcafe.com/2010/03/o-que-e-jquery/" title="O que é Jquery?">O que é Jquery?</a> (0)</li><li><a href="http://www.pixelcomcafe.com/2010/03/2%c2%ba-parte-tecnicas-de-retoques-e-maquiagem-no-photoshop/" title="2º Parte: Técnicas de Retoques e Maquiagem no Photoshop">2º Parte: Técnicas de Retoques e Maquiagem no Photoshop</a> (0)</li><li><a href="http://www.pixelcomcafe.com/2010/03/4-sites-geradores-de-icones-para-preloaders-em-ajax/" title="4 sites geradores de ícones para preloaders em Ajax">4 sites geradores de ícones para preloaders em Ajax</a> (0)</li><li><a href="http://www.pixelcomcafe.com/2010/02/tutorial-e-psd-criacao-do-ipad-no-photoshop/" title="Tutorial e PSD: Criação do Ipad no Photoshop">Tutorial e PSD: Criação do Ipad no Photoshop</a> (0)</li><li><a href="http://www.pixelcomcafe.com/2010/02/20-tutoriais-para-photoshop-com-criacao-de-layouts-para-sites/" title="20 Tutoriais para Photoshop com criação de layouts para sites">20 Tutoriais para Photoshop com criação de layouts para sites</a> (2)</li></ul>]]></content:encoded>
			<wfw:commentRss>http://www.pixelcomcafe.com/2010/03/tutorial-ensinando-a-criar-um-formulario-de-cadastro-com-ajax/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Instituto Infnet divulga datas para o cliclo de palestras gratuitas de março de 2010</title>
		<link>http://www.pixelcomcafe.com/2010/03/instituto-infnet-divulga-datas-para-o-cliclo-de-palestras-gratuitas-de-marco-de-2010/</link>
		<comments>http://www.pixelcomcafe.com/2010/03/instituto-infnet-divulga-datas-para-o-cliclo-de-palestras-gratuitas-de-marco-de-2010/#comments</comments>
		<pubDate>Mon, 08 Mar 2010 10:50:38 +0000</pubDate>
		<dc:creator>Anderson Nascimento</dc:creator>
				<category><![CDATA[Agenda de Eventos]]></category>
		<category><![CDATA[Desenvolvimento]]></category>
		<category><![CDATA[Design]]></category>
		<category><![CDATA[Palestras]]></category>

		<guid isPermaLink="false">http://www.pixelcomcafe.com/?p=2472</guid>
		<description><![CDATA[
			
				
			
		
Estão abertas as inscrições para o Ciclo de Palestras Gratuitas do Instituto Infnet. O calendário do mês de março de 2010 apresenta novas propostas e oportunidades para que os profissionais de design digital conheçam ainda melhor as atuais ferramentas de trabalho, tendências e gestão no setor.

As palestras em destaque são: &#8220;Mini-curso de Matte Painting &#8211; [...]]]></description>
			<content:encoded><![CDATA[<div class="tweetmeme_button" style="float: right; margin-left: 5px;">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fwww.pixelcomcafe.com%2F2010%2F03%2Finstituto-infnet-divulga-datas-para-o-cliclo-de-palestras-gratuitas-de-marco-de-2010%2F"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fwww.pixelcomcafe.com%2F2010%2F03%2Finstituto-infnet-divulga-datas-para-o-cliclo-de-palestras-gratuitas-de-marco-de-2010%2F&amp;source=pixelcomcafe&amp;style=normal" height="61" width="50" /><br />
			</a>
		</div>
<p>Estão abertas as inscrições para o Ciclo de Palestras Gratuitas do Instituto Infnet. O calendário do mês de março de 2010 apresenta novas propostas e oportunidades para que os profissionais de design digital conheçam ainda melhor as atuais ferramentas de trabalho, tendências e gestão no setor.</p>
<p><img class="aligncenter size-full wp-image-2474" title="ciclo-palestras-infnet" src="http://www.pixelcomcafe.com/wp-content/uploads/2010/03/ciclo-palestras-infnet.jpg" alt="" width="500" height="250" /></p>
<p>As palestras em destaque são: &#8220;Mini-curso de Matte Painting &#8211; Composição e Pintura Digital de Cenários&#8221;, &#8220;Corel: da criação à Finalização&#8221;, &#8220;Manipulação e Montagens de Imagens no Photoshop&#8221;, &#8221; Mini-curso de Desenho de Observação no Photoshop &#8220;, além de muitas outras opções.</p>
<p>As inscrições são feitas no site do Infnet (<a href="http://www.infnet.edu.br/palestras" target="_blank">www.infnet.edu.br/palestras</a>) e o presente ainda ganha um certificado após a palestra.</p>
<p>Fonte: Instituto Infnet</p>
<p>AN <img src='http://www.pixelcomcafe.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
<a href="http://www.seomaster.com.br/bookmark.html" style="border:none; text-decoration:none" onmouseover="sb_plugin('http://www.pixelcomcafe.com/2010/03/instituto-infnet-divulga-datas-para-o-cliclo-de-palestras-gratuitas-de-marco-de-2010/','Instituto Infnet divulga datas para o cliclo de palestras gratuitas de março de 2010'); return sb_showMenu(this)" onmouseout="sb_close()" onclick="return sb_open()"> 
		<img src="http://www.seomaster.com.br/img/bookmark-buttons/bt-partilhar-services.gif" border="0" style="display:inline; border:none" alt="Bookmark e Compartilhe" /> 
	</a><h3  class="related_post_title">Artigos Relacionados:</h3><ul class="related_post"><li><a href="http://www.pixelcomcafe.com/2010/03/como-criar-um-bom-portfolio/" title="Como criar um bom portfólio?">Como criar um bom portfólio?</a> (1)</li><li><a href="http://www.pixelcomcafe.com/2010/03/msxrio-2010-reunira-fas-e-usuarios-no-sesc-engenho-de-dentro/" title="MSXRio 2010 reunirá fãs e usuários no Sesc Engenho de Dentro">MSXRio 2010 reunirá fãs e usuários no Sesc Engenho de Dentro</a> (0)</li><li><a href="http://www.pixelcomcafe.com/2010/03/tecnologia-cafe-mar-2010-flash-cs4-actionscript-30-em-fortaleza/" title="Tecnologia &#038; Café &#8211; Mar 2010: Flash CS4 &#038; ActionScript 3.0 em Fortaleza">Tecnologia &#038; Café &#8211; Mar 2010: Flash CS4 &#038; ActionScript 3.0 em Fortaleza</a> (0)</li><li><a href="http://www.pixelcomcafe.com/2010/03/video-aula-criando-um-carrinho-de-compras-listando-itens-2-parte/" title="Vídeo Aula: Criando um carrinho de compras &#8211; Listando itens &#8211; 2ª parte">Vídeo Aula: Criando um carrinho de compras &#8211; Listando itens &#8211; 2ª parte</a> (0)</li><li><a href="http://www.pixelcomcafe.com/2010/03/10-ergodesignusihc-acontecera-nos-dias-17-a-20-de-maio-de-2010-na-puc-rj/" title="10º Ergodesign/USIHC acontecerá nos dias 17 a 20 de maio de 2010 na PUC-RJ">10º Ergodesign/USIHC acontecerá nos dias 17 a 20 de maio de 2010 na PUC-RJ</a> (0)</li></ul>]]></content:encoded>
			<wfw:commentRss>http://www.pixelcomcafe.com/2010/03/instituto-infnet-divulga-datas-para-o-cliclo-de-palestras-gratuitas-de-marco-de-2010/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Photoshop Conference 2010 acontecerá em São Paulo nos dia 12, 13 e 14 de abril</title>
		<link>http://www.pixelcomcafe.com/2010/03/photoshop-conference-2010-acontecera-em-sao-paulo-nos-dia-12-13-e-14-de-abril/</link>
		<comments>http://www.pixelcomcafe.com/2010/03/photoshop-conference-2010-acontecera-em-sao-paulo-nos-dia-12-13-e-14-de-abril/#comments</comments>
		<pubDate>Sun, 07 Mar 2010 22:07:28 +0000</pubDate>
		<dc:creator>Anderson Nascimento</dc:creator>
				<category><![CDATA[Agenda de Eventos]]></category>
		<category><![CDATA[Photoshop]]></category>
		<category><![CDATA[Photoshop Conference 2010]]></category>

		<guid isPermaLink="false">http://www.pixelcomcafe.com/?p=2500</guid>
		<description><![CDATA[
			
				
			
		
O Photoshop Conference 2010 traz como tema &#8220;Mito ou Verdade&#8221;, através do qual pretende mostrar os incríveis truques e recursos do Photoshop e provar, de uma vez por todas, que milagres podem ser feitos com o aplicativo.

O evento acontece em 3 salas simultâneas, durante 3 dias. São um auditório principal (mais amplo) e duas outras [...]]]></description>
			<content:encoded><![CDATA[<div class="tweetmeme_button" style="float: right; margin-left: 5px;">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fwww.pixelcomcafe.com%2F2010%2F03%2Fphotoshop-conference-2010-acontecera-em-sao-paulo-nos-dia-12-13-e-14-de-abril%2F"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fwww.pixelcomcafe.com%2F2010%2F03%2Fphotoshop-conference-2010-acontecera-em-sao-paulo-nos-dia-12-13-e-14-de-abril%2F&amp;source=pixelcomcafe&amp;style=normal" height="61" width="50" /><br />
			</a>
		</div>
<p>O <strong>Photoshop Conference 2010</strong> traz como tema &#8220;Mito ou Verdade&#8221;, através do qual pretende mostrar os incríveis truques e recursos do Photoshop e provar, de uma vez por todas, que milagres podem ser feitos com o aplicativo.</p>
<p><img class="aligncenter size-full wp-image-2501" title="photoshop-conference-2010" src="http://www.pixelcomcafe.com/wp-content/uploads/2010/03/photoshop-conference-2010.jpg" alt="" width="510" height="275" /></p>
<p>O evento acontece em 3 salas simultâneas, durante 3 dias. São um auditório principal (mais amplo) e duas outras salas que oferecem toda a estrutura e conforto necessários para o melhor aproveitamento dos congressistas.</p>
<p>Fotógrafos, Publicitários, Diretores de Arte, Designers Gráficos, Web Designers, Vídeo Makers, enfim, profissionais que usam o Photoshop diariamente, formam o grande público que, por 3 dias seguidos de total imersão no mundo Photoshop, têm a oportunidade de escolher entre os mais de 50 tutoriais diferentes preparados especialmente para o evento.</p>
<p><strong>Photoshop Conference 2010<br />
DATA: </strong>12, 13 e 14 de abril de 2010<strong><br />
lOCAL: </strong>Centro de Convenções Rebouças, São Paulo &#8211; SP<br />
<strong> INSCRIÇÕES: </strong><a href="http://www.photoshopconference.com.br/photoshop2010/inscricoes.php" target="_blank">A partir de R$ 553,00</a></p>
<p>Fonte: Photoshop Conference</p>
<p>AN <img src='http://www.pixelcomcafe.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
<a href="http://www.seomaster.com.br/bookmark.html" style="border:none; text-decoration:none" onmouseover="sb_plugin('http://www.pixelcomcafe.com/2010/03/photoshop-conference-2010-acontecera-em-sao-paulo-nos-dia-12-13-e-14-de-abril/','Photoshop Conference 2010 acontecerá em São Paulo nos dia 12, 13 e 14 de abril'); return sb_showMenu(this)" onmouseout="sb_close()" onclick="return sb_open()"> 
		<img src="http://www.seomaster.com.br/img/bookmark-buttons/bt-partilhar-services.gif" border="0" style="display:inline; border:none" alt="Bookmark e Compartilhe" /> 
	</a><h3  class="related_post_title">Artigos Relacionados:</h3><ul class="related_post"><li><a href="http://www.pixelcomcafe.com/2010/03/2%c2%ba-parte-tecnicas-de-retoques-e-maquiagem-no-photoshop/" title="2º Parte: Técnicas de Retoques e Maquiagem no Photoshop">2º Parte: Técnicas de Retoques e Maquiagem no Photoshop</a> (0)</li><li><a href="http://www.pixelcomcafe.com/2010/03/msxrio-2010-reunira-fas-e-usuarios-no-sesc-engenho-de-dentro/" title="MSXRio 2010 reunirá fãs e usuários no Sesc Engenho de Dentro">MSXRio 2010 reunirá fãs e usuários no Sesc Engenho de Dentro</a> (0)</li><li><a href="http://www.pixelcomcafe.com/2010/03/adobe-lanca-versao-do-photoshop-mobile-para-android-11/" title="Adobe lança versão do Photoshop Mobile para Android 1.1">Adobe lança versão do Photoshop Mobile para Android 1.1</a> (0)</li><li><a href="http://www.pixelcomcafe.com/2010/03/10-ergodesignusihc-acontecera-nos-dias-17-a-20-de-maio-de-2010-na-puc-rj/" title="10º Ergodesign/USIHC acontecerá nos dias 17 a 20 de maio de 2010 na PUC-RJ">10º Ergodesign/USIHC acontecerá nos dias 17 a 20 de maio de 2010 na PUC-RJ</a> (0)</li><li><a href="http://www.pixelcomcafe.com/2010/03/cafe-com-internet-industria-no-e-commerce-x-varejo-tradicional-internet-ainda-e-um-canal-de-conflito/" title="Café com Internet: Indústria no e-commerce X Varejo Tradicional. Internet ainda é um canal de conflito?">Café com Internet: Indústria no e-commerce X Varejo Tradicional. Internet ainda é um canal de conflito?</a> (0)</li></ul>]]></content:encoded>
			<wfw:commentRss>http://www.pixelcomcafe.com/2010/03/photoshop-conference-2010-acontecera-em-sao-paulo-nos-dia-12-13-e-14-de-abril/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
