<?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 Fellyph Cintra &#187; Desenvolvimento Web</title>
	<atom:link href="http://www.fellyph.com.br/blog/category/desenvolvimento-web/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.fellyph.com.br/blog</link>
	<description></description>
	<lastBuildDate>Thu, 12 Jan 2012 21:34:08 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>WordPress para iOS</title>
		<link>http://www.fellyph.com.br/blog/desenvolvimento-web/wordpress-para-ios/</link>
		<comments>http://www.fellyph.com.br/blog/desenvolvimento-web/wordpress-para-ios/#comments</comments>
		<pubDate>Thu, 12 Jan 2012 20:52:39 +0000</pubDate>
		<dc:creator>Fellyph</dc:creator>
				<category><![CDATA[Desenvolvimento Web]]></category>
		<category><![CDATA[Wordpress]]></category>
		<category><![CDATA[configurações]]></category>
		<category><![CDATA[iOS]]></category>
		<category><![CDATA[mobile]]></category>
		<category><![CDATA[wordpress]]></category>
		<category><![CDATA[xml-rpc]]></category>

		<guid isPermaLink="false">http://www.fellyph.com.br/blog/?p=1969</guid>
		<description><![CDATA[<div class="addthis_toolbox addthis_default_style " addthis:url='http://www.fellyph.com.br/blog/desenvolvimento-web/wordpress-para-ios/' addthis:title='WordPress para iOS '  ><a class="addthis_button_facebook_like" fb:like:layout="button_count"></a><a class="addthis_button_tweet"></a><a class="addthis_button_google_plusone" g:plusone:size="medium"></a><a class="addthis_counter addthis_pill_style"></a></div>Preparando a palestra de wordpress que aconteceu na última quarta dia 11 de janeiro, testei a app do wordpress para iOS. O aplicativo está disponível na apple store sem nenhum custo e vôce pode baixar no seguinte link :
 <a href="http://www.fellyph.com.br/blog/desenvolvimento-web/wordpress-para-ios/">Continue lendo <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<div class="addthis_toolbox addthis_default_style " addthis:url='http://www.fellyph.com.br/blog/desenvolvimento-web/wordpress-para-ios/' addthis:title='WordPress para iOS '  ><a class="addthis_button_facebook_like" fb:like:layout="button_count"></a><a class="addthis_button_tweet"></a><a class="addthis_button_google_plusone" g:plusone:size="medium"></a><a class="addthis_counter addthis_pill_style"></a></div><p>Nessa semana eu testei a app do wordpress para iOS. O aplicativo está disponível na apple store sem nenhum custo e você pode baixar no seguinte link :</p>
<p><a href="http://itunes.apple.com/us/app/wordpress/id335703880?mt=8" target="_blank">http://itunes.apple.com/us/app/wordpress/id335703880?mt=8</a></p>
<p>Com a App instalada, você deve adicionar um blog wordpress ele pode ser um blog da comunidade wordpress.com aqueles blogs que ficam hospedados no wordpress.com, por exemplo,  www.fellyph.wordpress.com ou um blog próprio com este. Selecionei a opção que se aplica ao meu caso um &#8220;site wordpress.org&#8221;.</p>
<p><img src="http://www.fellyph.com.br/blog/wp-content/uploads/2012/01/foto-1-600x900.png" alt="" title="foto (1)" width="360" height="540" class="alignnone size-large wp-image-1978" /></p>
<p>Em seguida informei os dados do meu blog, endereço , usuário e senha. Quando tentei logar o aplicativo deu um alerta pedindo para autorizar uma opção de &#8220;publicação em XML-RPC&#8221; por padrão o wordpress vem com essa opção desabilitada. Para habilitar essa opção logue no admin do seu blog e vá na tela de configurações de escrita que fica na seção de  configurações do seu blog, e habilite a opção &#8220;Ativar os protocolos de publicação XML-RPC do WordPress, Movable Type, MetaWeblog e Blogger.&#8221; como você pode conferir na imagem abaixo :</p>
<p><img class="alignnone size-large wp-image-1971" title="Configurações de Escrita" src="http://www.fellyph.com.br/blog/wp-content/uploads/2012/01/FireShot-Screen-Capture-047-Configurações-de-Escrita-‹-Blog-Fellyph-Cintra-—-WordPress-www_fellyph_com_br_blog_wp-admin_options-writing_php-600x350.png" alt="" width="600" height="350" /></p>
<p>E o que é o XML-RPC? Traduzindo em português a sigla RPC significa protocolo de chamada de procedimento remoto, ele trabalha com um XML que lista suas chamadas. Isso possibilita ao aplicativo fazer acesso remoto ao worpdress via HTTP.</p>
<p><img class="alignnone size-large wp-image-1972" title="foto" src="http://www.fellyph.com.br/blog/wp-content/uploads/2012/01/foto-600x900.png" alt="" width="360" height="540" /></p>
<p>Acima temos uma imagem da aplicação devidamente logada, temos listagem dos últimos posts do blog, nela você tem a possibilidade de criar ou administrar posts. O aplicativo permite adicionar a sua geolocalização nos posts.</p>
<p>Na imagem seguinte vemos o editor de texto nele temos algumas tags html, como b(bold), i(itálico), link, quote, ul, li, code e a tag do wordpress more.</p>
<p><img src="http://www.fellyph.com.br/blog/wp-content/uploads/2012/01/foto2-600x900.png" alt="" title="foto2" width="360" height="540" class="alignnone size-large wp-image-1975" /></p>
<p>Também tem a possibilidade de criar páginas e responder e administras seus comentários e visualizar as estatísticas do seu blog caso esteja conectado com o wordpress.org.</p>
<p>Claro que você não vai criar posts quilométricos com um iphone, mas é uma boa opção para fazer posts rápidos, compartilhar images e responder comentários. ´</p>
<p>A versão iOS está disponível para iphone, ipod touch e ipad. Além da plataforma iOS, existem apps para :</p>
<ul>
<li>Android <a href="http://android.wordpress.org/" target="_blank">http://android.wordpress.org/</a></li>
<li>Blackberry <a href="http://blackberry.wordpress.org/" target="_blank">http://blackberry.wordpress.org/</a></li>
<li>Windows Phohe <a href="http://windowsphone.wordpress.org/" target="_blank">http://windowsphone.wordpress.org/</a></li>
<li>Nokia <a href="http://nokia.wordpress.org/" target="_blank">http://nokia.wordpress.org/</a></li>
</ul>
<p>Agora é só escolher a sua versão de acordo com a sua plataforma.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.fellyph.com.br/blog/desenvolvimento-web/wordpress-para-ios/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Palestra &#8211; WordPress: Mais que um blog</title>
		<link>http://www.fellyph.com.br/blog/eventos/palestra-wordpress-mais-que-um-blog/</link>
		<comments>http://www.fellyph.com.br/blog/eventos/palestra-wordpress-mais-que-um-blog/#comments</comments>
		<pubDate>Tue, 10 Jan 2012 13:44:49 +0000</pubDate>
		<dc:creator>Fellyph</dc:creator>
				<category><![CDATA[Desenvolvimento Web]]></category>
		<category><![CDATA[Eventos]]></category>
		<category><![CDATA[Wordpress]]></category>
		<category><![CDATA[drc]]></category>
		<category><![CDATA[palestra]]></category>
		<category><![CDATA[treinamento]]></category>
		<category><![CDATA[wordpress]]></category>

		<guid isPermaLink="false">http://www.fellyph.com.br/blog/?p=1957</guid>
		<description><![CDATA[<div class="addthis_toolbox addthis_default_style " addthis:url='http://www.fellyph.com.br/blog/eventos/palestra-wordpress-mais-que-um-blog/' addthis:title='Palestra &#8211; WordPress: Mais que um blog '  ><a class="addthis_button_facebook_like" fb:like:layout="button_count"></a><a class="addthis_button_tweet"></a><a class="addthis_button_google_plusone" g:plusone:size="medium"></a><a class="addthis_counter addthis_pill_style"></a></div>Quer conhecer um pouco sobre Wordpress? Amanhã dia 11 de janeiro estarei palestrando sobre Wordpress ma drc treinamentos. Mostrando seu ambiente e algumas questões básicas mostrando que o wordpress não se resume apenas ao formato de blog. <a href="http://www.fellyph.com.br/blog/eventos/palestra-wordpress-mais-que-um-blog/">Continue lendo <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<div class="addthis_toolbox addthis_default_style " addthis:url='http://www.fellyph.com.br/blog/eventos/palestra-wordpress-mais-que-um-blog/' addthis:title='Palestra &#8211; WordPress: Mais que um blog '  ><a class="addthis_button_facebook_like" fb:like:layout="button_count"></a><a class="addthis_button_tweet"></a><a class="addthis_button_google_plusone" g:plusone:size="medium"></a><a class="addthis_counter addthis_pill_style"></a></div><p>Quer conhecer um pouco sobre WordPress? Amanhã dia 11 de janeiro estarei palestrando sobre WordPress ma drc treinamentos. Mostrando seu ambiente e algumas questões básicas mostrando que o wordpress não se resume apenas ao formato de blog.</p>
<p>A apresentação está organizada da seguinte forma: </p>
<p>- Ambiente necessário para se trabalhar com WordPress<br />
- Novidades da versão 3.3<br />
- Estrutura padrão do wordpress<br />
- Cases de até onde podemos ir com o WordPress</p>
<p><strong>Data: 11/01/2012<br />
Horário: 19:30 às 21:00<br />
Local: Rua Joaquim Floriano, 733, 8.º Andar &#8211; Itaim Bibi &#8211; São Paulo </strong></p>
<p><a href="http://www.drcconference.com.br/int_agenda/mostra_agenda.php?valor=b2a8104f32b221048aj42c8&#038;valor2=f6b1eb8f32b222064aj42c8" target="_blank">Mais informações </a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.fellyph.com.br/blog/eventos/palestra-wordpress-mais-que-um-blog/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Flash Camp SP um evento como poucos</title>
		<link>http://www.fellyph.com.br/blog/flash/flash-camp-sp-um-evento-como-poucos/</link>
		<comments>http://www.fellyph.com.br/blog/flash/flash-camp-sp-um-evento-como-poucos/#comments</comments>
		<pubDate>Wed, 30 Nov 2011 17:35:07 +0000</pubDate>
		<dc:creator>Fellyph</dc:creator>
				<category><![CDATA[Desenvolvimento Web]]></category>
		<category><![CDATA[Eventos]]></category>
		<category><![CDATA[Flash]]></category>

		<guid isPermaLink="false">http://www.fellyph.com.br/blog/?p=1919</guid>
		<description><![CDATA[<div class="addthis_toolbox addthis_default_style " addthis:url='http://www.fellyph.com.br/blog/flash/flash-camp-sp-um-evento-como-poucos/' addthis:title='Flash Camp SP um evento como poucos '  ><a class="addthis_button_facebook_like" fb:like:layout="button_count"></a><a class="addthis_button_tweet"></a><a class="addthis_button_google_plusone" g:plusone:size="medium"></a><a class="addthis_counter addthis_pill_style"></a></div>Sábado dia 19 de novembro rolou o Flash Camp SP como o título fala um evento como poucos, organizado pelo ASDEVS um evento sem objetivo comercial simplismente motivado pelo fato de desenvolver a comunidade. Sem essa história de que "essa ferramenta é a melhor" e nem "essa tecnologia é a melhor" e sim o que realmente interessa "o que é melhor para você?".  <a href="http://www.fellyph.com.br/blog/flash/flash-camp-sp-um-evento-como-poucos/">Continue lendo <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<div class="addthis_toolbox addthis_default_style " addthis:url='http://www.fellyph.com.br/blog/flash/flash-camp-sp-um-evento-como-poucos/' addthis:title='Flash Camp SP um evento como poucos '  ><a class="addthis_button_facebook_like" fb:like:layout="button_count"></a><a class="addthis_button_tweet"></a><a class="addthis_button_google_plusone" g:plusone:size="medium"></a><a class="addthis_counter addthis_pill_style"></a></div><p>Sábado dia 19 de novembro rolou o Flash Camp SP como o título fala um evento como poucos, organizado pelo ASDEVS um evento sem objetivo comercial simplismente motivado pelo fato de desenvolver a comunidade. Sem essa história de que &#8220;essa ferramenta é a melhor&#8221; e nem &#8220;essa tecnologia é a melhor&#8221; e sim o que realmente interessa &#8220;o que é melhor para você?&#8221;. O que você precisa para ser um profissonal melhor, vou citar três pontos chaves que ouvi durante o evento :</p>
<ul>
<li>Compartilhe sempre</li>
<li>Flash is not dead.(but)</li>
<li>Você escreve código ou desenvolver soluções</li>
</ul>
<p>Isso eu posso extrair das 3 palestras que eu assisti, a primeira palestra foi com o Janderson Cardoso, falou sobre sua trajetória, o início de sua carreira como desenvolvedor, suas fontes e como organizou suas metas e um ponto chave foi pesquisar e compartilhar tudo que aprendeu, isso é um fator importante na carreira de TI.</p>
<p>Em seguida o Lee Brimelow evangelista da Adobe(Flash) veio para esclarecer muitos pontos sobre o panorama atual do flash e começou com o seguinte slide &#8220;Flash is not dead&#8221;. Mas iria tomar um rumo diferente o que o HTML5 não era capaz ainda de fazer isso seria responsabilidade do Flash. Investimentos em 3D, AIR  e games são as apostas do Flash para o próximo ciclo do cs6. Mostrou um pouco do edge e falou sobre a morte do flash player mobile.</p>
<p>Dois pontos foram chave para ele: a experiência de um site em Flash em um mobile é muito diferente para um desktop. E outro ponto muita coisa que o flash player mobile oferecia o HTML5 já oferecia e a adesão de apalhos mobile com html5 é maior que nos desktops graças ao domínio do mercado feito pelo ios e android.</p>
<p>Depois acompanhei um pouco o workshop sobre processing js que depois em outro post vou falar sobre. A última palestra do evento foi com Arthur Debert experiente programador desenvolveu a conhecida classe bulkloader. Falou sobre a historia das linguagens e suas evoluções como muita coisa se fala em novidade e está no mercado a muito tempo ou tem origem em algo mais antigo ainda. Criticou o comportamento do mercado como alguns profissionais são taxados como &#8220;Criativo&#8221;.</p>
<p>Desenvolver uma solução é algo que não necessita de criatividade? Pensar em arquitetura de soluções digitais é algo pobre? Outra crítica veio quando surgiu a pergunta &#8220;você gosta de algum trecho de código&#8221;? Isso parece estranho mas nós programadores produzimos códigos, mas não temos o costume de admira-los ou até simplesmente analisa-lós, contrario a outras profissões como um músico é difícil achar um músico que não tenha uma música ou artista preferido. Então foi uma dica que ele deixou leia código tente entender o que se passa na cabeça de grandes programadores.</p>
<p>Você escreve código ou desenvolve soluções? Outra pergunta que ecoou no auditório, isso também é um fator importante se você cria soluções você consequentemente não vai estrar preso a nenhuma tecnologia.</p>
<p>No final teve uma mesa redonda onde voltaram o assuntos HTML5 , morte FLEX, morte Flash Player mobile. E assim terminou o Flash Camp São Paulo um evento com  a mesma pegada do Flash Camp Rio. Um ambiente informal, mas de palestras sempre de alto nível, mesmo sendo patrocinado pela Adobe o evento tem opinião própria se apelo a ferramentes e sim a soluções. Agradecimentos ao Filipe Cunha e Jay Moretti pelo belo trabalho</p>
]]></content:encoded>
			<wfw:commentRss>http://www.fellyph.com.br/blog/flash/flash-camp-sp-um-evento-como-poucos/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Introdução a canvas(HTML5) &#8211; parte 2</title>
		<link>http://www.fellyph.com.br/blog/tutoriais/introducao-a-canvashtml5-parte-2/</link>
		<comments>http://www.fellyph.com.br/blog/tutoriais/introducao-a-canvashtml5-parte-2/#comments</comments>
		<pubDate>Fri, 11 Nov 2011 19:54:55 +0000</pubDate>
		<dc:creator>Fellyph</dc:creator>
				<category><![CDATA[Desenvolvimento Web]]></category>
		<category><![CDATA[Tutoriais]]></category>

		<guid isPermaLink="false">http://www.fellyph.com.br/blog/?p=1328</guid>
		<description><![CDATA[<div class="addthis_toolbox addthis_default_style " addthis:url='http://www.fellyph.com.br/blog/tutoriais/introducao-a-canvashtml5-parte-2/' addthis:title='Introdução a canvas(HTML5) &#8211; parte 2 '  ><a class="addthis_button_facebook_like" fb:like:layout="button_count"></a><a class="addthis_button_tweet"></a><a class="addthis_button_google_plusone" g:plusone:size="medium"></a><a class="addthis_counter addthis_pill_style"></a></div>Com um delay de um ano estou dando continuidade a um post sobre canvas <a href="http://www.fellyph.com.br/blog/tutoriais/introducao-a-canvas-html5/">Introdução a canvas</a>. Isso porque eu escutei de um amigo no face "oh fellyph achei um post seu sobre canvas, não tem nada lá". Realmente tem pouca coisa no post foi um post bem básicão, só utilizar a tag canvas e criar um box. Os demos desse post vou adicionar no "JSdo.it".  <a href="http://www.fellyph.com.br/blog/tutoriais/introducao-a-canvashtml5-parte-2/">Continue lendo <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<div class="addthis_toolbox addthis_default_style " addthis:url='http://www.fellyph.com.br/blog/tutoriais/introducao-a-canvashtml5-parte-2/' addthis:title='Introdução a canvas(HTML5) &#8211; parte 2 '  ><a class="addthis_button_facebook_like" fb:like:layout="button_count"></a><a class="addthis_button_tweet"></a><a class="addthis_button_google_plusone" g:plusone:size="medium"></a><a class="addthis_counter addthis_pill_style"></a></div><p>Com um delay de um ano estou dando continuidade a um post sobre canvas <a href="http://www.fellyph.com.br/blog/tutoriais/introducao-a-canvas-html5/">Introdução a canvas</a>. Isso porque eu escutei de um amigo no face &#8220;oh fellyph achei um post seu sobre canvas, não tem nada lá&#8221;. Realmente tem pouca coisa no post foi um post bem básicão, só utilizar a tag canvas e criar um box. Os demos desse post vou adicionar no &#8220;JSdo.it&#8221;. </p>
<p>Neste Post vou tratar um pouco mais sobre a questão de cores, linhas e animação. </p>
<p>Revisando um pouco sobre cores função que define a cor de um context é a função fillStyle() com ela podemos passar os valores da seguinte forma:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">ctx.<span style="color: #660066;">fillStyle</span> <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;black&quot;</span><span style="color: #339933;">;</span>  
ctx.<span style="color: #660066;">fillStyle</span> <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;#000000&quot;</span><span style="color: #339933;">;</span>  
ctx.<span style="color: #660066;">fillStyle</span> <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;rgb(0,0,0)&quot;</span><span style="color: #339933;">;</span>  
ctx.<span style="color: #660066;">fillStyle</span> <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;rgba(0,0,0,1)&quot;</span><span style="color: #339933;">;</span></pre></div></div>

<p>No exemplo abaixo vou fazer um loop com quadrados randomizando duas posição x , y e sua transparência :</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">&lt;html&gt;
	&lt;head&gt;
             <span style="color: #339933;">&lt;</span>script language<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;javascript&quot;</span><span style="color: #339933;">&gt;</span> 
<span style="color: #003366; font-weight: bold;">var</span> posx <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">;</span>
<span style="color: #003366; font-weight: bold;">var</span> posy <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">;</span>
<span style="color: #003366; font-weight: bold;">var</span> alphaRandom <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #003366; font-weight: bold;">function</span> init<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
	<span style="color: #003366; font-weight: bold;">var</span> ctx <span style="color: #339933;">=</span> document.<span style="color: #660066;">getElementById</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'meucanvas'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">getContext</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'2d'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
 	<span style="color: #000066; font-weight: bold;">for</span><span style="color: #009900;">&#40;</span>i<span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">;</span> i <span style="color: #339933;">&lt;</span> <span style="color: #CC0000;">250</span><span style="color: #339933;">;</span> i<span style="color: #339933;">++</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
	    	posx <span style="color: #339933;">=</span> Math.<span style="color: #660066;">random</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">*</span><span style="color: #CC0000;">340</span><span style="color: #339933;">;</span>
	    	posy <span style="color: #339933;">=</span> Math.<span style="color: #660066;">random</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">*</span><span style="color: #CC0000;">340</span><span style="color: #339933;">;</span>
	    	alphaRandom <span style="color: #339933;">=</span> Math.<span style="color: #660066;">random</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
  		ctx.<span style="color: #660066;">fillStyle</span> <span style="color: #339933;">=</span> <span style="color: #3366CC;">'rgba(230,0,0,'</span> <span style="color: #339933;">+</span> alphaRandom <span style="color: #339933;">+</span><span style="color: #3366CC;">')'</span> <span style="color: #339933;">;</span>
	    	ctx.<span style="color: #660066;">fillRect</span><span style="color: #009900;">&#40;</span>posx<span style="color: #339933;">,</span> posy<span style="color: #339933;">,</span> <span style="color: #CC0000;">15</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">15</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    	<span style="color: #009900;">&#125;</span>
&nbsp;
<span style="color: #009900;">&#125;</span>
             <span style="color: #339933;">&lt;/</span>script<span style="color: #339933;">&gt;</span>
	&lt;/head&gt;
	&lt;body onload=&quot;init()&quot;&gt;
	&lt;canvas id=&quot;meucanvas&quot; width=&quot;400&quot; height=&quot;400&quot;&gt; &lt;/canvas&gt;
	&lt;/body&gt;
&lt;/html&gt;</pre></div></div>

<p>O resultado é o seguinte :</p>
<p><script type="text/javascript" src="http://jsdo.it/blogparts/3ujk/js?view=design"></script>
<p class="ttlBpJsdoit" style="width: 465px; margin: 0; text-align: right; font-size: 11px;"><a href="http://jsdo.it/Fellyph.Cintra/3ujk" title="Quadrados randomicos">Quadrados randomicos &#8211; jsdo.it &#8211; share JavaScript, HTML5 and CSS</a></p>
<p>O demo desse exemplo completo vocês conferem aqui : <a href="http://jsdo.it/Fellyph.Cintra/3ujk" target="_blank">http://jsdo.it/Fellyph.Cintra/3ujk</a></p>
<p>Além das função &#8220;fillRect&#8221; podemos trabalhar com, &#8220;strokeRect&#8221;, &#8220;clearRect&#8221;,  &#8220;arc&#8221; e &#8220;lineTo&#8221;.<br />
strokeRect cria uma forma retangular com apenas seu contorno(linhas), clearRect limpa a área especificada e a função arc serve para criar arcos e circulos junto com a lineTo ela entra no grupo dos path, gosto de traduzir um path como um elemnto complexo. Para trabalhar com o grupo dos &#8220;paths&#8221; precisamos de um número maior de passos que vamos ver depois desse primeiro exemplo. </p>
<p>Vamos a um exemplo usando as 3 funções(fillRect, strokeRect, clearRect) abaixo vou mostrar apenas a parte do js:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">function</span> init<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
   	<span style="color: #003366; font-weight: bold;">var</span> ctx <span style="color: #339933;">=</span> document.<span style="color: #660066;">getElementById</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'meucanvas'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">getContext</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'2d'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
    	<span style="color: #000066; font-weight: bold;">for</span><span style="color: #009900;">&#40;</span>i <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span> <span style="color: #339933;">;</span> i <span style="color: #339933;">&lt;</span> <span style="color: #CC0000;">4</span><span style="color: #339933;">;</span> i<span style="color: #339933;">++</span> <span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span> 
	    <span style="color: #000066; font-weight: bold;">for</span><span style="color: #009900;">&#40;</span>j <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">;</span> j <span style="color: #339933;">&lt;</span> <span style="color: #CC0000;">4</span><span style="color: #339933;">;</span> j<span style="color: #339933;">++</span> <span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
		<span style="color: #003366; font-weight: bold;">var</span> posx <span style="color: #339933;">=</span> j <span style="color: #339933;">*</span> <span style="color: #CC0000;">100</span>
		<span style="color: #003366; font-weight: bold;">var</span> posy <span style="color: #339933;">=</span> i <span style="color: #339933;">*</span> <span style="color: #CC0000;">100</span>    
	    	ctx.<span style="color: #660066;">fillStyle</span> <span style="color: #339933;">=</span> <span style="color: #3366CC;">'rgb(230,0,0)'</span> <span style="color: #339933;">;</span>
    		ctx.<span style="color: #660066;">fillRect</span><span style="color: #009900;">&#40;</span>posx<span style="color: #339933;">,</span>posy<span style="color: #339933;">,</span><span style="color: #CC0000;">100</span><span style="color: #339933;">,</span><span style="color: #CC0000;">100</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		ctx.<span style="color: #660066;">clearRect</span><span style="color: #009900;">&#40;</span>posx  <span style="color: #339933;">+</span> <span style="color: #CC0000;">10</span><span style="color: #339933;">,</span> posy <span style="color: #339933;">+</span> <span style="color: #CC0000;">10</span><span style="color: #339933;">,</span><span style="color: #CC0000;">80</span><span style="color: #339933;">,</span><span style="color: #CC0000;">80</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		ctx.<span style="color: #660066;">strokeRect</span><span style="color: #009900;">&#40;</span>posx <span style="color: #339933;">+</span> <span style="color: #CC0000;">25</span><span style="color: #339933;">,</span>posy <span style="color: #339933;">+</span> <span style="color: #CC0000;">25</span><span style="color: #339933;">,</span><span style="color: #CC0000;">50</span><span style="color: #339933;">,</span><span style="color: #CC0000;">50</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	    <span style="color: #009900;">&#125;</span>
	<span style="color: #009900;">&#125;</span> 
&nbsp;
<span style="color: #009900;">&#125;</span></pre></div></div>

<p>o resultado é o seguinte :</p>
<p><script type="text/javascript" src="http://jsdo.it/blogparts/ckrp/js?view=design"></script>
<p class="ttlBpJsdoit" style="width: 465px; margin: 0; text-align: right; font-size: 11px;"><a href="http://jsdo.it/Fellyph.Cintra/ckrp" title="padrão">padrão &#8211; jsdo.it &#8211; share JavaScript, HTML5 and CSS</a></p>
<p>Como podemos ver o fillStyle interfere apenas no fillRect  o desenho gerado pela strokeRect não, isso por que função strokeRect trabalha com linhas para modicar as cores das linhas trabalhamos com a função strokeStyle que trabalha com os mesmos parâmetros utilizados pela função fillStyle. </p>
<p>Para trabalhar com elementos complexos precisamos de um número maior de passos em relação ao exemplo anterior. trabalhamos com quatro funções : beginPath(), closePath(), stroke(), fill(). No próximo exemplo vou usar um exercício que tinha usado em um post <a href="http://www.fellyph.com.br/blog/flash/trabalhando-com-shape-em-actionscript-30/" target="_blank">trabalhando com gráficos com Flash</a>. Vou converter esse exercício em canvas.</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">function</span> init<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
&nbsp;
   	<span style="color: #003366; font-weight: bold;">var</span> ctx <span style="color: #339933;">=</span> document.<span style="color: #660066;">getElementById</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'meucanvas'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">getContext</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'2d'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #006600; font-style: italic;">// separei em três funções cada elemento do meu desenho</span>
    	<span style="color: #006600; font-style: italic;">// uma para criar o quadrado, outra para o lozango e o circulo</span>
    	criaQuadrado<span style="color: #009900;">&#40;</span>ctx<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	criaLosango<span style="color: #009900;">&#40;</span>ctx<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	criaBola<span style="color: #009900;">&#40;</span>ctx<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #009900;">&#125;</span>
&nbsp;
<span style="color: #003366; font-weight: bold;">function</span> criaQuadrado<span style="color: #009900;">&#40;</span>_ctx<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
			_ctx.<span style="color: #660066;">fillStyle</span> <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;#008300&quot;</span><span style="color: #339933;">;</span>
			_ctx.<span style="color: #660066;">fillRect</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">0</span><span style="color: #339933;">,</span><span style="color: #CC0000;">0</span><span style="color: #339933;">,</span><span style="color: #CC0000;">330</span><span style="color: #339933;">,</span><span style="color: #CC0000;">240</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span>
&nbsp;
<span style="color: #006600; font-style: italic;">//essa função é resposável por criar o losango</span>
<span style="color: #003366; font-weight: bold;">function</span> criaLosango<span style="color: #009900;">&#40;</span>_ctx<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
&nbsp;
 		_ctx.<span style="color: #660066;">fillStyle</span> <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;#FCFF00&quot;</span><span style="color: #339933;">;</span>
   	  	_ctx.<span style="color: #660066;">beginPath</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
   		_ctx.<span style="color: #660066;">moveTo</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">165</span><span style="color: #339933;">,</span> <span style="color: #CC0000;">10</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		_ctx.<span style="color: #660066;">moveTo</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">310</span><span style="color: #339933;">,</span><span style="color: #CC0000;">120</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		_ctx.<span style="color: #660066;">lineTo</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">165</span><span style="color: #339933;">,</span><span style="color: #CC0000;">230</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		_ctx.<span style="color: #660066;">lineTo</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">20</span> <span style="color: #339933;">,</span> <span style="color: #CC0000;">120</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		_ctx.<span style="color: #660066;">lineTo</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">165</span><span style="color: #339933;">,</span><span style="color: #CC0000;">10</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    		_ctx.<span style="color: #660066;">fill</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		_ctx.<span style="color: #660066;">closePath</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> 	
<span style="color: #009900;">&#125;</span>
&nbsp;
<span style="color: #006600; font-style: italic;">// essa função é responsável por criar um circulo</span>
<span style="color: #003366; font-weight: bold;">function</span> criaBola<span style="color: #009900;">&#40;</span>_ctx<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
   	 _ctx.<span style="color: #660066;">beginPath</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	_ctx.<span style="color: #660066;">fillStyle</span> <span style="color: #339933;">=</span> <span style="color: #3366CC;">&quot;#00027F&quot;</span><span style="color: #339933;">;</span>
	_ctx.<span style="color: #660066;">arc</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">165</span><span style="color: #339933;">,</span><span style="color: #CC0000;">120</span><span style="color: #339933;">,</span><span style="color: #CC0000;">70</span><span style="color: #339933;">,</span><span style="color: #CC0000;">0</span><span style="color: #339933;">,</span>Math.<span style="color: #660066;">PI</span><span style="color: #339933;">*</span><span style="color: #CC0000;">2</span><span style="color: #339933;">,</span><span style="color: #003366; font-weight: bold;">true</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
   	_ctx.<span style="color: #660066;">fill</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
   	 _ctx.<span style="color: #660066;">closePath</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> 
&nbsp;
<span style="color: #009900;">&#125;</span></pre></div></div>

<p>Como no exemplo anterior deixei só a parte do js o exemplo completo você confere aqui : <a href="http://jsdo.it/Fellyph.Cintra/c5qu" target="_blank">http://jsdo.it/Fellyph.Cintra/c5qu</a> e o resultado é o seguinte :</p>
<p><script type="text/javascript" src="http://jsdo.it/blogparts/c5qu/js?view=design"></script>
<p class="ttlBpJsdoit" style="width: 465px; margin: 0; text-align: right; font-size: 11px;"><a href="http://jsdo.it/Fellyph.Cintra/c5qu" title="Exemplo gráficos">Exemplo gráficos &#8211; jsdo.it &#8211; share JavaScript, HTML5 and CSS</a></p>
<p>Nos primeiros testes vi que a coisa funciona bem manual definir cada elemento dentro do contexto. Também tentei adicionar eventos de click, mas essa questão tem que ser tratado de uma forma especial porque o evento é aplicado em todo o canvas e não no contexto. Então se eu crio um quadrado dentro do canvas eu preciso tratar o over dele utilizando x e y mas claro que alguma alma iluminada já fez uma biblioteca para essa questão. Quando eu fiz o primeiro post sobre canvas achei essa biblioca <a href="http://jcotton.sourceforge.net/" target="_blank">jCotton</a> quando estava pesquisando para o segundo post achei a biblioteca <a href="http://www.kineticjs.com/" target="_blank">Kinetic JS</a>. Deixo esses dois links para vocês pesquisarem serão base para meu próximo post sobre canvas.</p>
<p>Minha fonte para o post foi <a href="https://developer.mozilla.org/en/Canvas_tutorial" target="_blank">MDN Mozilla developer network</a></p>
<p>Vou parando por aqui e até o próximo post</p>
]]></content:encoded>
			<wfw:commentRss>http://www.fellyph.com.br/blog/tutoriais/introducao-a-canvashtml5-parte-2/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Iseminar 2011 vem ai</title>
		<link>http://www.fellyph.com.br/blog/eventos/iseminar-2011-vem-ai/</link>
		<comments>http://www.fellyph.com.br/blog/eventos/iseminar-2011-vem-ai/#comments</comments>
		<pubDate>Tue, 18 Oct 2011 12:24:57 +0000</pubDate>
		<dc:creator>Fellyph</dc:creator>
				<category><![CDATA[Desenvolvimento Web]]></category>
		<category><![CDATA[Eventos]]></category>
		<category><![CDATA[Iseminar]]></category>
		<category><![CDATA[design]]></category>
		<category><![CDATA[evento]]></category>
		<category><![CDATA[geek]]></category>
		<category><![CDATA[mobile]]></category>
		<category><![CDATA[recife]]></category>
		<category><![CDATA[web]]></category>

		<guid isPermaLink="false">http://www.fellyph.com.br/blog/?p=1876</guid>
		<description><![CDATA[<div class="addthis_toolbox addthis_default_style " addthis:url='http://www.fellyph.com.br/blog/eventos/iseminar-2011-vem-ai/' addthis:title='Iseminar 2011 vem ai '  ><a class="addthis_button_facebook_like" fb:like:layout="button_count"></a><a class="addthis_button_tweet"></a><a class="addthis_button_google_plusone" g:plusone:size="medium"></a><a class="addthis_counter addthis_pill_style"></a></div>Olá pessoal, faltam menos de uma semana para o iSeminar. Um dos maiores eventos de tecnologia do nordeste que eu tenho o prazer de apoiar todo ano. Esse ano o evento evoluiu ainda mais, agora em um novo espaço com capacidade para mais de 1.400 pessoas. E para não perder o costume realizei uma entrevista com André Fontenelle o organizador e criador do evento.
 <a href="http://www.fellyph.com.br/blog/eventos/iseminar-2011-vem-ai/">Continue lendo <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<div class="addthis_toolbox addthis_default_style " addthis:url='http://www.fellyph.com.br/blog/eventos/iseminar-2011-vem-ai/' addthis:title='Iseminar 2011 vem ai '  ><a class="addthis_button_facebook_like" fb:like:layout="button_count"></a><a class="addthis_button_tweet"></a><a class="addthis_button_google_plusone" g:plusone:size="medium"></a><a class="addthis_counter addthis_pill_style"></a></div><p>Olá pessoal, faltam menos de uma semana para o iSeminar. Um dos maiores eventos de tecnologia do nordeste que eu tenho o prazer de apoiar todo ano. Esse ano o evento evoluiu ainda mais, agora em um novo espaço com capacidade para mais de 1.400 pessoas entre outras novidades que vamos conferir a seguir. Para ter idéia do tamanho do evento confere a galera que vai palestrar esse ano.</p>
<p><img src="http://www.fellyph.com.br/blog/wp-content/uploads/2011/10/iseminar_2011-600x588.jpg" alt="" title="iseminar_2011" width="600" height="588" class="alignnone size-large wp-image-1880" /></p>
<p> E para não perder o costume realizei uma entrevista com André Fontenelle o organizador e criador do evento. Que vocês conferem logo abaixo :</p>
<p>No mundo Web é uma evolução muito grande, em um ciclo de um ano muita coisa muda, novos temas são inseridos no mercados. Ano passado temas como desenvolvimento web, mobile e designer estiveram presentes. Esse ano quais serão os temas abordados no evento?</p>
<p><strong>André Fontenelle:</strong> Neste ano, vamos aprofundar ainda mais o tema mobile, será tema do evento principal e ainda criamos um workshop exclusivo para o tema. Também estamos abordando Mídias Sociais, Acessbilidade, Desenvolvimento de alto nível, Blog e Interação. Este ano os temas estão muito bem divididos, em:</p>
<p>- Empreendedorismo<br />
- Acessibilidade<br />
- Mercado Mobile<br />
- Mídias Sociais<br />
- Publicidade online<br />
- Desenvolvimento Web<br />
- Blog e interação</p>
<p>Acho que abordando estes temas, estamos falando com todos do mundo Geek.</p>
<p>Como todo ano auditório sempre lotado, como já anunciado no twitter. O iSeminar terá um novo espaço no teatro da ufpe, além dessas quais serão as novidades relacionadas a estrutura no evento ?</p>
<p><strong>André Fontenelle: </strong>A mudança para o Teatro da UFPE foi bastante significativa, além do espaço ser maior, há o conforto dos acentos, uma melhor visibilidade do palco, dos palestrantes e internet Wifi. A experiência do usuário conta muito e desejamos atingir esta expectativa neste novo espaço. </p>
<p>O iseminar já foi um evento que tinha um foco muito grande em design + desenvolvimento web, com o passar do tempo o evento evoluiu bastante. Hoje como você classifica o iseminar?</p>
<p><strong>André Fontenelle:</strong>  Atualmente o iSeminar é um evento de tecnologia mais abrangente, feito para o público que interage com mídias sociais, que desenvolve projetos web, aplicativos para dispositivos móveis, enfim tudo que abrange o mundo Geek.</p>
<p>O que você diria para aquela pessoa que ainda está com dúvida em ir ao evento ?</p>
<p><strong>André Fontenelle:  </strong>Eu sugiro a todos os profissionais, seja de qual área for, tirar alguns dias do ano para conhecer outras realidades, novas pessoas, novas idéias, fazer networking e o iSeminar é o lugar ideal para isto.</p>
<p>Então ficou com vontade de ir para o evento  ?</p>
<p>O iSeminar acontece no dia 22 de outubro de 2011<br />
Horário: 08:30h ás 18h<br />
Local : Centro e convenções da ufpe</p>
<p>Mapa do local :</p>
<p><iframe width="500" height="400" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://www.google.com/maps?q=centro+conven%C3%A7%C3%B5es+ufpe&amp;hl=pt-PT&amp;ie=UTF8&amp;sll=37.0625,-95.677068&amp;sspn=39.371738,79.013672&amp;vpsrc=6&amp;radius=15000&amp;t=h&amp;hq=centro+conven%C3%A7%C3%B5es+ufpe&amp;hnear=&amp;cid=11853652640111867383&amp;ll=-8.041383,-34.950256&amp;spn=0.033995,0.04283&amp;z=14&amp;iwloc=A&amp;output=embed"></iframe><br /><small><a href="http://www.google.com/maps?q=centro+conven%C3%A7%C3%B5es+ufpe&amp;hl=pt-PT&amp;ie=UTF8&amp;sll=37.0625,-95.677068&amp;sspn=39.371738,79.013672&amp;vpsrc=6&amp;radius=15000&amp;t=h&amp;hq=centro+conven%C3%A7%C3%B5es+ufpe&amp;hnear=&amp;cid=11853652640111867383&amp;ll=-8.041383,-34.950256&amp;spn=0.033995,0.04283&amp;z=14&amp;iwloc=A&amp;source=embed" style="color:#0000FF;text-align:left">Ver mapa maior</a></small></p>
<p>Agenda : <a href="http://www.iseminar.com.br/v2011/#/agenda/" target="_blank">http://www.iseminar.com.br/v2011/#/agenda/</a><br />
Workshop : <a href="http://www.iseminar.com.br/v2011/#/workshop/ " target="_blank">http://www.iseminar.com.br/v2011/#/workshop/ </a></p>
<p>Ps: Roubei a imagem do <a href="http://irvingsuna.com.br/blog/2011/10/17/5-4-3-2-1/" target="_blank">post do Irving Suna</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.fellyph.com.br/blog/eventos/iseminar-2011-vem-ai/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Curso de JavaScript DRC</title>
		<link>http://www.fellyph.com.br/blog/geral/curso-de-javascript-drc/</link>
		<comments>http://www.fellyph.com.br/blog/geral/curso-de-javascript-drc/#comments</comments>
		<pubDate>Tue, 27 Sep 2011 20:05:53 +0000</pubDate>
		<dc:creator>Fellyph</dc:creator>
				<category><![CDATA[Desenvolvimento Web]]></category>
		<category><![CDATA[Geral]]></category>
		<category><![CDATA[curso]]></category>
		<category><![CDATA[Desenvolvimento]]></category>
		<category><![CDATA[drc]]></category>
		<category><![CDATA[javaScript]]></category>

		<guid isPermaLink="false">http://www.fellyph.com.br/blog/?p=1826</guid>
		<description><![CDATA[<div class="addthis_toolbox addthis_default_style " addthis:url='http://www.fellyph.com.br/blog/geral/curso-de-javascript-drc/' addthis:title='Curso de JavaScript DRC '  ><a class="addthis_button_facebook_like" fb:like:layout="button_count"></a><a class="addthis_button_tweet"></a><a class="addthis_button_google_plusone" g:plusone:size="medium"></a><a class="addthis_counter addthis_pill_style"></a></div>No mês passado tive a oportunidade de fazer um curso agora como aluno na DRC, participei da turma de JavaScript com o professor Moacyr Minero. Ultimamente estava tendo muito contato com javascript e como professor da DRC tinha acesso aos cursos. Fiz a união do útil ao agradável e participei do curso de js. <a href="http://www.fellyph.com.br/blog/geral/curso-de-javascript-drc/">Continue lendo <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<div class="addthis_toolbox addthis_default_style " addthis:url='http://www.fellyph.com.br/blog/geral/curso-de-javascript-drc/' addthis:title='Curso de JavaScript DRC '  ><a class="addthis_button_facebook_like" fb:like:layout="button_count"></a><a class="addthis_button_tweet"></a><a class="addthis_button_google_plusone" g:plusone:size="medium"></a><a class="addthis_counter addthis_pill_style"></a></div><p>No mês passado tive a oportunidade de fazer um curso agora como aluno na DRC, participei da turma de JavaScript com o professor Moacyr Minero. Ultimamente estava tendo muito contato com Javascript e como professor da DRC tinha acesso aos cursos. Fiz a união do útil ao agradável e participei do curso de js.</p>
<p>Aqui o programa do curso :</p>
<p><a href="http://www.drc.com.br/site/cursos/Javascript-e-JQuery" target="_blank"><br />
Curso drc Javascript e jQuery</a></p>
<p>Curti bastante o curso como JavaScript tem base ECMA-262 mesma base para o ActionScript. São liguagens quase idênticas, mas claro com plataformas diferentes. Hoje o Javascript ressurgiu  e ganhou força com a nova onda dos dipositivos móveis. O Javascript hoje roda nos principáis dispositivos sem restrição.</p>
<p>Hoje existem vários frameworks para a linguagem ,por exemplo, jQuery, mootools e prototype.</p>
<p>Para quem já programa em ActionScript, aprender Javascript é um pulo, existe muita coisa similar entre as duas linguagens, como podemos ver abaixo:</p>
<p>Função que retorna valor randômico em ActionScript:</p>

<div class="wp_syntax"><div class="code"><pre class="actionscript" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">function</span> retornaRandom<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">int</span><span style="color: #66cc66;">&#123;</span>
&nbsp;
<span style="color: #000000; font-weight: bold;">var</span>  valor:<span style="color: #0066CC;">int</span>= <span style="color: #0066CC;">Math</span>.<span style="color: #0066CC;">round</span><span style="color: #66cc66;">&#40;</span><span style="color: #0066CC;">Math</span>.<span style="color: #0066CC;">random</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">*</span> <span style="color: #cc66cc;">10</span><span style="color: #66cc66;">&#41;</span>;
&nbsp;
<span style="color: #b1b100;">return</span> valor;
&nbsp;
<span style="color: #66cc66;">&#125;</span></pre></div></div>

<p>Função que retorna valor randômico em JavaScript:</p>
<pre>
  function retornaRandom(){

    var  valor = Math.round(Math.random() * 10);

    return valor;

  }
</pre>
<p>Claro o que define uma linguagem é algo mais do que 3 linhas de código. Além dessas existem várias particularidades.</p>
<p>Uma boa referência é o <a href="http://www.w3schools.com/js/default.asp" target="_blank">w3cschool</a>.</p>
<p>Uma conta legal no twitter é o <a href="http://twitter.com/#!/del_javascript" target="_blank">@del_javascript</a> </p>
<p>Bons estudos para que quiser se aventurar no Javascript.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.fellyph.com.br/blog/geral/curso-de-javascript-drc/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Personalizando o resumo(the_excerpt) do WordPress</title>
		<link>http://www.fellyph.com.br/blog/tutoriais/personalizando-o-resumo-the_excerpt-do-wordpress/</link>
		<comments>http://www.fellyph.com.br/blog/tutoriais/personalizando-o-resumo-the_excerpt-do-wordpress/#comments</comments>
		<pubDate>Thu, 18 Aug 2011 01:14:11 +0000</pubDate>
		<dc:creator>Fellyph</dc:creator>
				<category><![CDATA[Desenvolvimento Web]]></category>
		<category><![CDATA[Tutoriais]]></category>
		<category><![CDATA[Wordpress]]></category>
		<category><![CDATA[add_filter]]></category>
		<category><![CDATA[cms]]></category>
		<category><![CDATA[functions.php]]></category>
		<category><![CDATA[PHP]]></category>
		<category><![CDATA[resumo]]></category>
		<category><![CDATA[wordpress]]></category>

		<guid isPermaLink="false">http://www.fellyph.com.br/blog/?p=1828</guid>
		<description><![CDATA[<div class="addthis_toolbox addthis_default_style " addthis:url='http://www.fellyph.com.br/blog/tutoriais/personalizando-o-resumo-the_excerpt-do-wordpress/' addthis:title='Personalizando o resumo(the_excerpt) do WordPress '  ><a class="addthis_button_facebook_like" fb:like:layout="button_count"></a><a class="addthis_button_tweet"></a><a class="addthis_button_google_plusone" g:plusone:size="medium"></a><a class="addthis_counter addthis_pill_style"></a></div>Um dos recursos que o Wordpress oferece na leitura do conteúdo do post é a função de resumo(the_excerpt()), No painel editar post existe um campo chamado resumo, mas nas versões 3.1 ou superiores do wordpress esta função ficou oculta. Para exibir esta opção vá em opções de tela no canto superior direito dentro do painel de posts, como na imagem abaixo: 

<img src="http://www.fellyph.com.br/blog/wp-content/uploads/2011/08/Screen-shot-2011-08-17-at-10.00.37-PM-600x86.png" alt="" title="Screen shot 2011-08-17 at 10.00.37 PM" width="600" height="86" class="alignnone size-large wp-image-1831" /> <a href="http://www.fellyph.com.br/blog/tutoriais/personalizando-o-resumo-the_excerpt-do-wordpress/">Continue lendo <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<div class="addthis_toolbox addthis_default_style " addthis:url='http://www.fellyph.com.br/blog/tutoriais/personalizando-o-resumo-the_excerpt-do-wordpress/' addthis:title='Personalizando o resumo(the_excerpt) do WordPress '  ><a class="addthis_button_facebook_like" fb:like:layout="button_count"></a><a class="addthis_button_tweet"></a><a class="addthis_button_google_plusone" g:plusone:size="medium"></a><a class="addthis_counter addthis_pill_style"></a></div><p>Um dos recursos que o WordPress oferece na leitura do conteúdo do post é a função de resumo(the_excerpt()), No painel editar post existe um campo chamado resumo. Mas nas versões 3.1 ou superiores do wordpress esta função ficou oculta. Para exibir esta opção vá em opções de tela no canto superior direito dentro do painel de posts, como na imagem abaixo: </p>
<p><img src="http://www.fellyph.com.br/blog/wp-content/uploads/2011/08/Screen-shot-2011-08-18-at-11.45.41-AM-600x489.png" alt="" title="Screen shot 2011-08-18 at 11.45.41 AM" width="600" height="489" class="alignnone size-large wp-image-1838" /></p>
<p><strong>Fazendo isso um campo de resumo aparecerá em sua página de edição de post:</strong></p>
<p><img src="http://www.fellyph.com.br/blog/wp-content/uploads/2011/08/Screen-shot-2011-08-18-at-11.45.55-AM-600x469.png" alt="" title="Screen shot 2011-08-18 at 11.45.55 AM" width="600" height="469" class="alignnone size-large wp-image-1839" /></p>
<p>Cadastrando essa informação, se você quer exibi-lá é só utilizar a função the_excerpt() dentro de seu loop.</p>
<p>Se o campo resumo não for definido, o WordPress criará um resumo automaticamente através do que foi postado no conteúdo principal de seu post. Por padrão esse resumo automático possui 55 caracteres, para alterar essa quantidade de caracteres temos que adicionar um função no arquivo functions.php em seu tema. O functions.php resumindo em meias palavras é o arquivo que define algumas funções extras do seu tema, além de criar menus, shortcodes e adicionar filtros para conteúdo como vamos fazer agora. Então, utilizando a função add_filter ela ajuda a modificar a saída de algumas informações no WordPress.</p>
<p>Para editar o tamanho do resumo adicionamos o seguinte código no functions.php :</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">function</span> novo_tamanho_do_resumo<span style="color: #009900;">&#40;</span><span style="color: #000088;">$length</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	<span style="color: #b1b100;">return</span> <span style="color: #cc66cc;">30</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
add_filter<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'excerpt_length'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'novo_tamanho_do_resumo'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p>No código acima modificamos o tamanho do resumo de 55(valor padrão) para 30 caracteres.</p>
<p>Quando não cadastramos nada no campo resumo, o WordPress resgata parte do conteúdo do post e adiciona no final do resumo [...] para sinalizar que o possui mais texto naquele conteúdo. Para modificar essa sinalização também dentro do functions.php adicionamos o seguinte filtro:</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #666666; font-style: italic;">//Para versões 2.9 ou superiores</span>
&nbsp;
<span style="color: #000000; font-weight: bold;">function</span> new_excerpt_more<span style="color: #009900;">&#40;</span><span style="color: #000088;">$more</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	<span style="color: #b1b100;">return</span> <span style="color: #0000ff;">'...'</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
&nbsp;
add_filter<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'excerpt_more'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'new_excerpt_more'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>


<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;">&nbsp;
<span style="color: #666666; font-style: italic;">//para versão 2.8.x  e anteriores </span>
&nbsp;
<span style="color: #000000; font-weight: bold;">function</span> new_excerpt_more<span style="color: #009900;">&#40;</span><span style="color: #000088;">$excerpt</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	<span style="color: #b1b100;">return</span> <span style="color: #990000;">str_replace</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'[...]'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'...'</span><span style="color: #339933;">,</span> <span style="color: #000088;">$excerpt</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
add_filter<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'wp_trim_excerpt'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'new_excerpt_more'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p>Nesse caso temos uma mudança de código entre versões antes e depois da 2.9,mas nos dois momentos trocamos o &#8216;[...]&#8216; por &#8216;&#8230;&#8217;.  </p>
<p>Além dessa possibilidade também temos uma segunda opção adicionar um link ao final so resumo, trocar o &#8216;[...]&#8216; por um link leia mais o código ficaria da seguinte forma:</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">function</span> add_resumo_com_link<span style="color: #009900;">&#40;</span><span style="color: #000088;">$more</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
       <span style="color: #000000; font-weight: bold;">global</span> <span style="color: #000088;">$post</span><span style="color: #339933;">;</span>
	<span style="color: #b1b100;">return</span> <span style="color: #0000ff;">'&lt;a href=&quot;'</span><span style="color: #339933;">.</span> get_permalink<span style="color: #009900;">&#40;</span><span style="color: #000088;">$post</span><span style="color: #339933;">-&gt;</span><span style="color: #004000;">ID</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">.</span> <span style="color: #0000ff;">'&quot;&gt;Leia mais +&lt;/a&gt;'</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
add_filter<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'excerpt_more'</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">'add_resumo_com_link'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

]]></content:encoded>
			<wfw:commentRss>http://www.fellyph.com.br/blog/tutoriais/personalizando-o-resumo-the_excerpt-do-wordpress/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Tutorial Post Thumbnail (imagem destacada)</title>
		<link>http://www.fellyph.com.br/blog/desenvolvimento-web/tutorial-post-thumbnail-imagem-destacada/</link>
		<comments>http://www.fellyph.com.br/blog/desenvolvimento-web/tutorial-post-thumbnail-imagem-destacada/#comments</comments>
		<pubDate>Tue, 07 Jun 2011 20:32:39 +0000</pubDate>
		<dc:creator>Fellyph</dc:creator>
				<category><![CDATA[Desenvolvimento Web]]></category>
		<category><![CDATA[Wordpress]]></category>
		<category><![CDATA[the_post_thumbnail]]></category>
		<category><![CDATA[thumbnail]]></category>
		<category><![CDATA[wordpress]]></category>

		<guid isPermaLink="false">http://www.fellyph.com.br/blog/?p=1759</guid>
		<description><![CDATA[<div class="addthis_toolbox addthis_default_style " addthis:url='http://www.fellyph.com.br/blog/desenvolvimento-web/tutorial-post-thumbnail-imagem-destacada/' addthis:title='Tutorial Post Thumbnail (imagem destacada) '  ><a class="addthis_button_facebook_like" fb:like:layout="button_count"></a><a class="addthis_button_tweet"></a><a class="addthis_button_google_plusone" g:plusone:size="medium"></a><a class="addthis_counter addthis_pill_style"></a></div>A algum tempo pensava em fazer alguns posts sobre wordpress, pegando o embalo do curso de wordpress na DRC, treinamentos aqui em São Paulo. Um dos recursos do wordpress que todo mundo fica ansioso em aprender é Post Thumbnail ou na tradução Imagem Destacada, este recurso permite adicionar uma imagem vinculada ao post. <a href="http://www.fellyph.com.br/blog/desenvolvimento-web/tutorial-post-thumbnail-imagem-destacada/">Continue lendo <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<div class="addthis_toolbox addthis_default_style " addthis:url='http://www.fellyph.com.br/blog/desenvolvimento-web/tutorial-post-thumbnail-imagem-destacada/' addthis:title='Tutorial Post Thumbnail (imagem destacada) '  ><a class="addthis_button_facebook_like" fb:like:layout="button_count"></a><a class="addthis_button_tweet"></a><a class="addthis_button_google_plusone" g:plusone:size="medium"></a><a class="addthis_counter addthis_pill_style"></a></div><p>A algum tempo pensava em fazer alguns posts sobre wordpress, pegando o embalo do curso de wordpress na DRC, treinamentos aqui em São Paulo. Um dos recursos do wordpress que todo mundo fica ansioso em aprender é Post Thumbnail ou na tradução Imagem Destacada, este recurso permite adicionar uma imagem vinculada ao post.</p>
<p>Para habilitar o recurso que apareceu desde as versões 2.9 do wordpress temos que adicionar no nosso arquivo functions.php o seguinte código :</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">&lt;?php</span>
 add_theme_support<span style="color: #009900;">&#40;</span> <span style="color: #0000ff;">'post-thumbnails'</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #000000; font-weight: bold;">?&gt;</span></pre></div></div>

<p>Agora vamos acessar o painel do wordpress, crie um novo post e adiconar uma imagem destacada. O painel de imagem destacada na versão 3.0 e 3.1 do worpdress, fica no canto inferior direito.</p>
<p><img class="alignnone size-large wp-image-1779" title="Captura de tela 2011-05-08 às 11.59.48" src="http://www.fellyph.com.br/blog/wp-content/uploads/2011/05/Captura-de-tela-2011-05-08-às-11.59.48-1024x521.png" alt="" width="640" height="325" /></p>
<p>Faça o upload de uma imagem e selecione a opção usar como imagem destacada.</p>
<p><img class="alignnone size-large wp-image-1783" title="Captura de tela 2011-05-15 às 20.32.58" src="http://www.fellyph.com.br/blog/wp-content/uploads/2011/05/Captura-de-tela-2011-05-15-às-20.32.58-1024x640.png" alt="" width="640" height="400" /></p>
<p>Lembre-se caso o post já estiver publicado não esqueça de atualiza-lo. Adicionando a imagem destacada não significa, que a imagem já irá aparecer em seu post. Para a imagem aparecer em seu post é preciso chamar a a template tag the_post_thumbnail() em algum lugar do seu loop, no arquivo da página que vc quer que apareça: index.php, single.php, category.php, search.php&#8230; O importante é estar dentro do loop.</p>
<p>Agora vamos aplicar um thumbnail ao nosso tema. no arquivo index.php adicionamos o sequinte código :</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;">&lt;!-- get_header pra chamar o header.php --&gt;
<span style="color: #000000; font-weight: bold;">&lt;?php</span>
get_header<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>
&nbsp;
		&lt;div id=&quot;container&quot;&gt;
			&lt;div id=&quot;content&quot; role=&quot;main&quot;&gt;
			&lt;!-- em nosso loop vamos exibir apenas título e thumbnail --&gt;
            <span style="color: #000000; font-weight: bold;">&lt;?php</span>  <span style="color: #b1b100;">while</span> <span style="color: #009900;">&#40;</span> have_posts<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#41;</span> <span style="color: #339933;">:</span> the_post<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>
					&lt;div <span style="color: #000000; font-weight: bold;">&lt;?php</span> post_class<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>&gt;
						&lt;h2&gt;&lt;a href=&quot;<span style="color: #000000; font-weight: bold;">&lt;?php</span> the_permalink<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>&quot; rel=&quot;bookmark&quot; title=&quot;Permanent Link to <span style="color: #000000; font-weight: bold;">&lt;?php</span> the_title_attribute<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>&quot;&gt;<span style="color: #000000; font-weight: bold;">&lt;?php</span> the_title<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>&lt;/a&gt;&lt;/h2&gt;
						&lt;div class=&quot;entry&quot;&gt;
							<span style="color: #000000; font-weight: bold;">&lt;?php</span> the_post_thumbnail<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>	 <span style="color: #000000; font-weight: bold;">?&gt;</span>
						&lt;/div&gt;
					&lt;/div&gt;
            <span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #b1b100;">endwhile</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>
&nbsp;
			&lt;/div&gt;&lt;!-- #content --&gt;
		&lt;/div&gt;&lt;!-- #container --&gt;
&nbsp;
&lt;!-- get_footer pra chamar o footer.php --&gt;
&lt;!-- esse tema não tem sidebar chamo apenas o footer --&gt;
<span style="color: #000000; font-weight: bold;">&lt;?php</span> get_footer<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span></pre></div></div>

<p>No código acima chamamos um thumbnail ou com tamanho original ou com o tamanho padrão caso tenha sido definido no admin. É um loop simple que puxa o título e o thumbnail, existe a possibilidade de definir o tamanho do thumbnail quando carregado passando os seguintes parâmetros:</p>
<p>the_post_thumbnail(&#8216;thumbnail&#8217;);  &#8211; resolução thumbnail (default 150px x 150px )<br />
the_post_thumbnail(&#8216;medium&#8217;);     &#8211;  resolução média (default 300px x 300px max)<br />
the_post_thumbnail(&#8216;large&#8217;);          &#8211;  resolução alta (default 640px x 640px max)</p>
<p>the_post_thumbnail( array(100,100) );  &#8211; tamanhos personalizados onde passamos um array com os valores de altura e largura.</p>
<p>Como no exemplo abaixo, nesse caso irei utilizar o mesmo código apenas modificando o esquem dentro do loop :</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"> <span style="color: #000000; font-weight: bold;">&lt;?php</span>  <span style="color: #b1b100;">while</span> <span style="color: #009900;">&#40;</span> have_posts<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#41;</span> <span style="color: #339933;">:</span> the_post<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>
					&lt;div <span style="color: #000000; font-weight: bold;">&lt;?php</span> post_class<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>&gt;
						&lt;h2&gt;&lt;a href=&quot;<span style="color: #000000; font-weight: bold;">&lt;?php</span> the_permalink<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>&quot; rel=&quot;bookmark&quot; title=&quot;Permanent Link to <span style="color: #000000; font-weight: bold;">&lt;?php</span> the_title_attribute<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>&quot;&gt;<span style="color: #000000; font-weight: bold;">&lt;?php</span> the_title<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>&lt;/a&gt;&lt;/h2&gt;
						&lt;div class=&quot;entry&quot;&gt;
							<span style="color: #000000; font-weight: bold;">&lt;?php</span> the_post_thumbnail<span style="color: #009900;">&#40;</span><span style="color: #990000;">array</span><span style="color: #009900;">&#40;</span><span style="color: #cc66cc;">350</span><span style="color: #339933;">,</span><span style="color: #cc66cc;">180</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>	 <span style="color: #000000; font-weight: bold;">?&gt;</span>
						&lt;/div&gt;
					&lt;/div&gt;
            <span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #b1b100;">endwhile</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span></pre></div></div>

<p>Nesse exemplo chamamos &#8220;<?php the_post_thumbnail(array(350,180));	 ?>&#8221; carregamos um thumbnail com 350px de largura e 180px de altura. </p>
<p>Além dessas opções de tamanho podemos registrar tamanhos personalizados de thumbnail, com a função &#8220;add_image_size&#8221; esta função é adicionada no arquivo functions.php.</p>
<p>A função add_image_size recebe os seguintes parâmetros :<br />
add_image_size( &#8216;nome&#8217;, largura, altura , crop : true ou false );</p>
<p>Considerando as funções adicionadas anteriormente, agora vamos adicionar um tamanho personalizado &#8220;meu-thumb&#8221; em nosso arquivo functions.php ele vai ficar da seguinte forma:</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">&lt;?php</span>  
&nbsp;
add_theme_support<span style="color: #009900;">&#40;</span> <span style="color: #0000ff;">'post-thumbnails'</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
add_image_size<span style="color: #009900;">&#40;</span> <span style="color: #0000ff;">'meu-thumb'</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">320</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">280</span><span style="color: #339933;">,</span> <span style="color: #009900; font-weight: bold;">true</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #000000; font-weight: bold;">?&gt;</span></pre></div></div>

<p>Resumindo a história adicionamos um novo tamanho com 320px x 280px se a imagem não atender a proporção vai ser cropada(cortada).</p>
<p>Agora vamos chamar um thumb com o tamanho que criamos &#8220;meu-thumb&#8221;:</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">&lt;?php</span>
get_header<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>
		&lt;div id=&quot;container&quot;&gt;
			&lt;div id=&quot;content&quot; role=&quot;main&quot;&gt;
            <span style="color: #000000; font-weight: bold;">&lt;?php</span>  <span style="color: #b1b100;">while</span> <span style="color: #009900;">&#40;</span> have_posts<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#41;</span> <span style="color: #339933;">:</span> the_post<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>
					&lt;div <span style="color: #000000; font-weight: bold;">&lt;?php</span> post_class<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>&gt;
						&lt;h2&gt;&lt;a href=&quot;<span style="color: #000000; font-weight: bold;">&lt;?php</span> the_permalink<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>&quot; rel=&quot;bookmark&quot; title=&quot;Permanent Link to <span style="color: #000000; font-weight: bold;">&lt;?php</span> the_title_attribute<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>&quot;&gt;<span style="color: #000000; font-weight: bold;">&lt;?php</span> the_title<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>&lt;/a&gt;&lt;/h2&gt;
						&lt;div class=&quot;entry&quot;&gt;
							<span style="color: #000000; font-weight: bold;">&lt;?php</span> the_post_thumbnail<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">'meu-thumb'</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>	 <span style="color: #000000; font-weight: bold;">?&gt;</span>
						&lt;/div&gt;
					&lt;/div&gt;
            <span style="color: #000000; font-weight: bold;">&lt;?php</span> <span style="color: #b1b100;">endwhile</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span>
&nbsp;
			&lt;/div&gt;&lt;!-- #content --&gt;
		&lt;/div&gt;&lt;!-- #container --&gt;
&nbsp;
<span style="color: #000000; font-weight: bold;">&lt;?php</span> get_footer<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #000000; font-weight: bold;">?&gt;</span></pre></div></div>

<p>Vou criar uma categoria agora wordpress e fazer um repositório dos meus estudos. Vou finalizando por aqui até o próximo tutorial</p>
]]></content:encoded>
			<wfw:commentRss>http://www.fellyph.com.br/blog/desenvolvimento-web/tutorial-post-thumbnail-imagem-destacada/feed/</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
		<item>
		<title>Reunião online do Grupo Jornada Adobe Brasil</title>
		<link>http://www.fellyph.com.br/blog/flash/reuniao-online-do-grupo-jornada-adobe-brasil/</link>
		<comments>http://www.fellyph.com.br/blog/flash/reuniao-online-do-grupo-jornada-adobe-brasil/#comments</comments>
		<pubDate>Thu, 05 May 2011 14:30:31 +0000</pubDate>
		<dc:creator>Fellyph</dc:creator>
				<category><![CDATA[Desenvolvimento Web]]></category>
		<category><![CDATA[Eventos]]></category>
		<category><![CDATA[Flash]]></category>

		<guid isPermaLink="false">http://www.fellyph.com.br/blog/?p=1772</guid>
		<description><![CDATA[<div class="addthis_toolbox addthis_default_style " addthis:url='http://www.fellyph.com.br/blog/flash/reuniao-online-do-grupo-jornada-adobe-brasil/' addthis:title='Reunião online do Grupo Jornada Adobe Brasil '  ><a class="addthis_button_facebook_like" fb:like:layout="button_count"></a><a class="addthis_button_tweet"></a><a class="addthis_button_google_plusone" g:plusone:size="medium"></a><a class="addthis_counter addthis_pill_style"></a></div>Dia 6 de Maio, 16h (hora de Brasília)

Palestrante: Arthur Guimarães, Interactive Developer da Action Creations

Tema: AIR + Playbook + FlashPro + FlashBuilder + FlashCampSF <a href="http://www.fellyph.com.br/blog/flash/reuniao-online-do-grupo-jornada-adobe-brasil/">Continue lendo <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<div class="addthis_toolbox addthis_default_style " addthis:url='http://www.fellyph.com.br/blog/flash/reuniao-online-do-grupo-jornada-adobe-brasil/' addthis:title='Reunião online do Grupo Jornada Adobe Brasil '  ><a class="addthis_button_facebook_like" fb:like:layout="button_count"></a><a class="addthis_button_tweet"></a><a class="addthis_button_google_plusone" g:plusone:size="medium"></a><a class="addthis_counter addthis_pill_style"></a></div><p><strong>Dia 6 de Maio, 16h (hora de Brasília)</strong></p>
<p><strong>Palestrante: </strong>Arthur Guimarães, Interactive Developer da Action Creations</p>
<p><strong>Tema: </strong>AIR + Playbook + FlashPro + FlashBuilder + FlashCampSF</p>
<p>AGENDA:</p>
<ul>
<li> Introdução</li>
<li> Como se cadastrar na Blackberry</li>
<li>Configurando sua workstation</li>
<li>Criando aplicação helloWorld no Flash Builder 4.5 (Final release)</li>
<li>Compilando e testando no  Simulador do Playbook</li>
<li>Criando aplicação helloWorld no Flash Professional CS5.5</li>
<li>Instalando sua aplicação no playbook através de linha de comando</li>
<li>Assinando sua aplicação para envio à AppWorld (app store)</li>
<li>Novidades do Flash Camp San Francisco</li>
</ul>
<p>Link para participar da reunião:<br />
<a href="http://www.actioncreations.com/emailmarketer/link.php?M=1844&amp;N=18&amp;L=15&amp;F=T">http://www.actioncreations.com/emailmarketer/link.php?M=1844&amp;N=18&amp;L=15&amp;F=T</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.fellyph.com.br/blog/flash/reuniao-online-do-grupo-jornada-adobe-brasil/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>A força da minoria</title>
		<link>http://www.fellyph.com.br/blog/flash/a-forca-da-minoria/</link>
		<comments>http://www.fellyph.com.br/blog/flash/a-forca-da-minoria/#comments</comments>
		<pubDate>Mon, 28 Mar 2011 02:13:56 +0000</pubDate>
		<dc:creator>Fellyph</dc:creator>
				<category><![CDATA[Desenvolvimento Web]]></category>
		<category><![CDATA[Flash]]></category>

		<guid isPermaLink="false">http://www.fellyph.com.br/blog/?p=1706</guid>
		<description><![CDATA[<div class="addthis_toolbox addthis_default_style " addthis:url='http://www.fellyph.com.br/blog/flash/a-forca-da-minoria/' addthis:title='A força da minoria '  ><a class="addthis_button_facebook_like" fb:like:layout="button_count"></a><a class="addthis_button_tweet"></a><a class="addthis_button_google_plusone" g:plusone:size="medium"></a><a class="addthis_counter addthis_pill_style"></a></div>Ultimamente surgiu uma onda pró-morte do Flash, isso é um desejo de uma minoria que se sente excluída, por não abrir seus sites no seu maravilhoso "device da maçã" ou simplesmente é influenciada por esse bloco. Essa minoria não é excluída, não tem dificuldades em acessar sites, não está preocupada com o SEO do site, não está preocupada com os padrões web. E porque ela está interferindo na área de desenvolvimento de sites em Flash? <a href="http://www.fellyph.com.br/blog/flash/a-forca-da-minoria/">Continue lendo <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<div class="addthis_toolbox addthis_default_style " addthis:url='http://www.fellyph.com.br/blog/flash/a-forca-da-minoria/' addthis:title='A força da minoria '  ><a class="addthis_button_facebook_like" fb:like:layout="button_count"></a><a class="addthis_button_tweet"></a><a class="addthis_button_google_plusone" g:plusone:size="medium"></a><a class="addthis_counter addthis_pill_style"></a></div><p>Ultimamente surgiu uma onda pró-morte do Flash, isso é um desejo de uma minoria que se sente excluída, por não abrir seus sites no seu maravilhoso &#8220;device da maçã&#8221; ou simplesmente é influenciada por esse bloco. Essa minoria não é excluída, não tem dificuldades em acessar sites, não está preocupada com o SEO do site, nem  com os padrões web. E porque ela está interferindo na área de desenvolvimento de sites em Flash?</p>
<p>Há algum tempo, eu ignorava essa minoria. Sempre acompanhei dados de alguns portais e o percentual de usuário mobile era relativamente pequeno, então, porque devemos ter cuidado com esse grupo?</p>
<p>Primeiro vamos ver alguns dados coletados em sites de grande visitação. Acompanhado o analytics de um site de 1,5 milhão de visitas os dispositivos móveis representam 0,35% das visitas em torno de 5.300 acessos oriundos de dispositivos móveis de diversos sistemas operacionais, mas sua maioria iPhone em primeiro lugar, iPad em segundo e iPod em quarto, em outro caso num site de 900.000 visitas os dispositivos móveis representam 2,15% em torno de 21 mil visitas. Outros sites de menor expressão mas com outro de perfil de usuário os números chegam a 4% mas mesmo assim é um número baixo.</p>
<p>Mas onde está a força dessa minoria ou podemos falar desse grupo de usuários? Está no perfil desses usuários, um grupo seleto de formadores de opinião e com alto poder de consumo. O segundo fator importante é dentro desse grupo, estão diretores, gerentes, coordenadores e investidores de grandes empresas, resumindo as pessoas que compram os projetos. Eles querem comprar um site para sua empresa que não abre em seu tablet ou mobile da maçã? A resposta é não! Os dados da maioria pouco importa, desempenho também, o fator principal é &#8220;O site não abre no meu iPad ou no meu iPhone&#8221;.</p>
<p>Um grande exemplo : </p>
<p>Experiência do usuário..?  SEO..? Acessibilidade..? grandes empresas do mundo da moda pouco se lixaram com isso. Mas a parti do momento que seu clientes em potencial não abriam seus sites, do dia para noite varias marcas de moda migraram seu site para html+jquery como muita gente sem informação fala HTML5. O que move a web é dinheiro e dessa vez a maioria perdeu. </p>
<p>Quem realmente dita as tendências do mercado web é o dinheiro ou seja a minoria. Ai está a força da minoria. Anos-e-anos a galera de acessibilidade, padrões web, SEO sempre bateu de frente com o desenvolvimento Flash mas nunca interferiu em sua fatia do mercado a adobe fazia algumas atualizações para alcamar esse grupo.</p>
<p><strong>Eu não acredito da morte do Flash</strong>, mas o baque foi maior que muita gente acreditava é visível a diminuição de sites e hotsites feitos em Flash. Claro o mercado web é gigantesco, Flash continua dando dinheiro, plataforma Flash não se restringe apenas a sites ou hotsites. Isso quer dizer que você deve abandonar o Flash ? A resposta é Não, claro se você gosta de trabalhar com a tecnologia sempre vai ter espaço para você no mercado, mas se você está mais preocupado em ganhar dinheiro siga a onda. </p>
<p>Tem muita coisa sendo feita em Flash, uma plataforma que evolui constantemente. Essa  plataforma possui milhares de desenvolvedores, atrás dela tem uma industria que movimenta milhões e uma empresa como a Adobe não vai deixar a peteca cair. Mas claro a exigência sobre o profissional de Flash vai ser maior. Maior exigência trás maior valorização profissional. Evoluir é preciso.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.fellyph.com.br/blog/flash/a-forca-da-minoria/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
	</channel>
</rss>

