﻿<?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>Produção de Suportes Midiáticos &#187; Produção de Suportes Midiáticos</title>
	<atom:link href="https://suportesmidiaticos.eca.usp.br/?cat=10&#038;feed=rss2" rel="self" type="application/rss+xml" />
	<link>https://suportesmidiaticos.eca.usp.br</link>
	<description></description>
	<lastBuildDate>Fri, 06 May 2016 06:05:02 +0000</lastBuildDate>
	<language>pt-BR</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=4.2.1</generator>
	<item>
		<title>Artigos de opinião (TA5)</title>
		<link>https://suportesmidiaticos.eca.usp.br/?p=3352</link>
		<comments>https://suportesmidiaticos.eca.usp.br/?p=3352#comments</comments>
		<pubDate>Sun, 28 Jun 2015 03:05:15 +0000</pubDate>
		<dc:creator><![CDATA[Richard Romancini]]></dc:creator>
				<category><![CDATA[Artigo]]></category>
		<category><![CDATA[TA]]></category>

		<guid isPermaLink="false">http://143.107.95.102/prof/richardromancini/suportesmidiaticos/public_html/wordpress/?p=3352</guid>
		<description><![CDATA[Aldo T. Miike – Tecnologia e ensino: uma realidade Andressa Caprecci – Prática educomunicativa: A linha tênue entre o planejamento e execução Bianca Reis – Interrompemos nossa programação… (para lamentar]]></description>
				<content:encoded><![CDATA[<p><a href="http://143.107.95.102/prof/richardromancini/suportesmidiaticos/public_html/wordpress/wp-content/uploads/2015/06/types2.jpg"><img class="aligncenter size-full wp-image-3361 img-responsive" src="http://143.107.95.102/prof/richardromancini/suportesmidiaticos/public_html/wordpress/wp-content/uploads/2015/06/types2.jpg" alt="types2" width="1280" height="849" /></a></p>
<div style="margin-top: -580px; margin-left: 140px; margin-bottom: 70px;"><a class="neonta5"; style="color: #ffffff;" href="https://dl.dropboxusercontent.com/u/1524601/Suportes/TA5/TA5_Aldo.pdf" target="_blank"><strong>Aldo T. Miike – <em>Tecnologia e ensino: uma realidade</em></strong></a><br />
<a class="neonta5"; style="color: #ffffff;" href="https://dl.dropboxusercontent.com/u/1524601/Suportes/TA5/TA5_Andressa_da_cruz_caprecci.pdf" target="_blank"><strong>Andressa Caprecci – <em>Prática educomunicativa: A linha tênue entre o planejamento e execução</em></strong></a><br />
<a class="neonta5"; style="color: #ffffff;" href="https://dl.dropboxusercontent.com/u/1524601/Suportes/TA5/TA5_Bianca.pdf" target="_blank"><strong>Bianca Reis – <em>Interrompemos nossa programação… (para lamentar sobre a intolerância religiosa)</em></strong></a><br />
<a class="neonta5"; style="color: #ffffff;" href="https://dl.dropboxusercontent.com/u/1524601/Suportes/TA5/TA5_Camila.pdf" target="_blank"><strong>Camila Herminio de Santana – <em>Ei você, já ouviu falar em falar em Educomunicação?</em></strong></a><br />
<a class="neonta5"; style="color: #ffffff;" href="https://dl.dropboxusercontent.com/u/1524601/Suportes/TA5/TA5_cesar.pdf" target="_blank"><strong>Cesar Augusto &#8211; <em>A educomunicação e o uso de mídias em sala de aula de escolas e universidades</em></strong></a><br />
<a class="neonta5"; style="color: #ffffff;" href="https://dl.dropboxusercontent.com/u/1524601/Suportes/TA5/TA5_Daniella.pdf" target="_blank"><strong>Daniella Aparecida Morena Fideles &#8211; <em>O questão entorno do livro didático e os REA</em></strong></a><br />
<a class="neonta5"; style="color: #ffffff;" href="https://dl.dropboxusercontent.com/u/1524601/Suportes/TA5/TA5_Diana%20Gonzales.pdf" target="_blank"><strong>Diana Gonzales – <em>Comunicação: educando contra a homofobia</em></strong></a><br />
<a class="neonta5"; style="color: #ffffff;" href="https://dl.dropboxusercontent.com/u/1524601/Suportes/TA5/TA5_James%20Daltro%20Lima%20Junior.pdf" target="_blank"><strong>James Daltro Lima Junior –<em> Novas tecnologias e sua potencialidade no processo educacional formal</em></strong></a><br />
<a class="neonta5"; style="color: #ffffff;" href="https://dl.dropboxusercontent.com/u/1524601/Suportes/TA5/TA5_Janaina.pdf" target="_blank"><strong>Janaina Soares Gallo – <em>Recursos Educacionais Abertos: Um direito a ser conquistado</em></strong></a><br />
<a class="neonta5"; style="color: #ffffff;" href="https://dl.dropboxusercontent.com/u/1524601/Suportes/TA5/TA5_Jefferson.pdf" target="_blank"><strong>Jefferson da Silveira Pereira – <em>Rádio: um meio de comunicação que continua na moda</em></strong></a><br />
<a class="neonta5"; style="color: #ffffff;" href="https://dl.dropboxusercontent.com/u/1524601/Suportes/TA5/TA5_JoaoAlonso.pdf" target="_blank"><strong>João Paulo Vicente Alonso – <em>A educomunicação nos vídeos populares contemporâneos</em></strong></a><br />
<a class="neonta5"; style="color: #ffffff;" href="https://dl.dropboxusercontent.com/u/1524601/Suportes/TA5/TA5_Juscilene.pdf"><strong>Juscilene A. de Oliveira – <em>Comunicação, tecnologia e Educação: uma boa relação</em></strong></a><br />
<a class="neonta5"; style="color: #ffffff;"  href="https://dl.dropboxusercontent.com/u/1524601/Suportes/TA5/TA5_LARISSA_HELENA_COSTA.pdf" target="_blank"><strong>Larissa Helena Costa – <em>Educomunicação: Um Desafio Histórico</em></strong></a><br />
<a class="neonta5"; style="color: #ffffff;" href="https://dl.dropboxusercontent.com/u/1524601/Suportes/TA5/TA5_Luiz.pdf" target="_blank"><strong>Luiz Fernando Fontes Teixeira – <em>Educomunicação em trânsito</em></strong></a><br />
<a class="neonta5"; style="color: #ffffff;"  href="https://dl.dropboxusercontent.com/u/1524601/Suportes/TA5/TA5_Natalia.pdf" target="_blank"><strong>Natália Cruz – <em>Um novo olhar sobre a programação educativa para crianças</em></strong></a><br />
<a class="neonta5"; style="color: #ffffff;" href="https://dl.dropboxusercontent.com/u/1524601/Suportes/TA5/TA5_Patricia.pdf" target="_blank"><strong>Patricia Giannini Beyersdorf – <em>Mídia: De Fora para Dentro da Escola</em></strong></a><br />
<a class="neonta5"; style="color: #ffffff;" href="https://dl.dropboxusercontent.com/u/1524601/Suportes/TA5/TA5_Raira.pdf" target="_blank"><strong>Raíra Santos Torrico – <em>Com quantos cliques se aprende?</em></strong></a><br />
<a class="neonta5"; style="color: #ffffff;" href="https://dl.dropboxusercontent.com/u/1524601/Suportes/TA5/TA5_Viviane.pdf" target="_blank"><strong>Viviane Patricia Bento – <em>As Tecnologias da Informação e Comunicação na Educomunicação</em></strong></a><br />
<a class="neonta5"; style="color: #ffffff;" href="https://dl.dropboxusercontent.com/u/1524601/Suportes/TA5/TA5_tatiana_garcia_de_carvalho.pdf" target="_blank"><strong>Tatiana Luz – <em>Uso Educomunicativo do Material Didático</em></strong></a></div>
<p>Comentários dos trabalhos no PDF do link. Caso haja dificuldade de visualizar as observações, utilize o leitor de PDF no programa do computador (e não na web). A senha é a mesma do trabalho anterior.</p>
]]></content:encoded>
			<wfw:commentRss>https://suportesmidiaticos.eca.usp.br/?feed=rss2&#038;p=3352</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Fontes em CSS</title>
		<link>https://suportesmidiaticos.eca.usp.br/?p=3111</link>
		<comments>https://suportesmidiaticos.eca.usp.br/?p=3111#comments</comments>
		<pubDate>Sat, 13 Jun 2015 21:58:25 +0000</pubDate>
		<dc:creator><![CDATA[Richard Romancini]]></dc:creator>
				<category><![CDATA[Artigo]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[Estilo]]></category>
		<category><![CDATA[HTML]]></category>

		<guid isPermaLink="false">http://143.107.95.102/prof/richardromancini/suportesmidiaticos/public_html/wordpress/?p=3111</guid>
		<description><![CDATA[Por meio de códigos de CSS é possível configurar uma série de efeitos num texto. A estilização de fontes é uma forma para dar destaque a um elemento, como o]]></description>
				<content:encoded><![CDATA[<p>Por meio de códigos de CSS é possível configurar uma série de efeitos num texto. A estilização de fontes é uma forma para dar destaque a um elemento, como o nome do site que pode se transformar numa espécie de logotipo. É conveniente não abusar destes efeitos, porém, numa medida adequada, podem valorizar uma página. As codificações mostradas abaixo devem ser colocadas na área de inserção de CSS do site (alguns dos templates possuem zonas para isso ou há a possibilidade de usar plugin). No caso de elementos &#8220;internos&#8221; do site (cabeçalho, título de postagem, etc.), é necessário alterar o código da página para inserir o efeito (posso ensinar quem quiser fazer isso). Porém, no caso de um texto em uma página ou postagem, basta marcar o efeito, a partir das codificações <span style="color: #0000ff;">&lt;div class=&#8221;<strong>EFEITO</strong>&#8220;&gt;<span style="color: #000000;">elemento marcado</span>&lt;/div&gt;</span>.</p>
<div style="margin: 0 100px 0 100px;"><div class="responsive-tabs">
<h2 class="tabtitle">Sombra</h2>
<div class="tabcontent">
</p>
<div class="sombra">Sombra com CSS</div>
<div class="margem" style="text-align: right;">
<figure>
<figcaption><small>Fonte: <a href="http://line25.com/articles/using-css-text-shadow-to-create-cool-text-effects" target="_blank">Line25</a></small></figcaption>
<div style="margin-right: 0px;"><img class="alignright size-medium wp-image-3194 img-responsive" src="http://143.107.95.102/prof/richardromancini/suportesmidiaticos/public_html/wordpress/wp-content/uploads/2015/06/text-shadow-300x150.png" alt="text-shadow" width="300" height="150" /></div>
</figure>
</div>
<div style="margin-top: 30px;">Para entender os valores da codificação vale a pena ver a figura ao lado, que mostra os valores de deslocamento nos eixos <strong>x</strong> e <strong>y</strong>, assim como o do <strong>desfoque</strong> (sombra), em pixels, e a <strong>cor</strong> deste (qualquer formato).</div>
<div id="wpshdo_1" class="wp-synhighlighter-outer"><div id="wpshdt_1" class="wp-synhighlighter-expanded"><table border="0" width="100%"><tr><td align="left" width="80%"><a name="#codesyntax_1"></a><a id="wpshat_1" class="wp-synhighlighter-title" href="#codesyntax_1"  onClick="javascript:wpsh_toggleBlock(1)" title="Click to show/hide code block">Source code</a></td><td align="right"><a href="#codesyntax_1" onClick="javascript:wpsh_code(1)" title="Show code only"><img border="0" style="border: 0 none" src="https://suportesmidiaticos.eca.usp.br/wp-content/plugins/wp-synhighlight/themes/default/images/code.png" /></a>&nbsp;<a href="#codesyntax_1" onClick="javascript:wpsh_print(1)" title="Print code"><img border="0" style="border: 0 none" src="https://suportesmidiaticos.eca.usp.br/wp-content/plugins/wp-synhighlight/themes/default/images/printer.png" /></a>&nbsp;<a href="https://suportesmidiaticos.eca.usp.br/wp-content/plugins/wp-synhighlight/About.html" target="_blank" title="Show plugin information"><img border="0" style="border: 0 none" src="https://suportesmidiaticos.eca.usp.br/wp-content/plugins/wp-synhighlight/themes/default/images/info.gif" /></a>&nbsp;</td></tr></table></div><div id="wpshdi_1" class="wp-synhighlighter-inner" style="display: block;"><pre class="css" style="font-family:monospace;"><span class="re1">.sombra</span> <span class="br0">&#123;</span>
<span class="kw1">text-shadow</span><span class="sy0">:</span> <span class="re3">5px</span> <span class="re3">5px</span> <span class="re3">0px</span> <span class="re0">#eee</span><span class="sy0">,</span> <span class="re3">7px</span> <span class="re3">7px</span> <span class="re3">0px</span> <span class="re0">#707070</span><span class="sy0">;</span>
<span class="kw1">font</span><span class="sy0">:</span> <span class="re3">4em</span> Fjalla One
<span class="br0">&#125;</span></pre></div></div>

</div><h2 class="tabtitle">3D</h2>
<div class="tabcontent">

<div class="trez">Texto em 3d</div>
<p><div id="wpshdo_2" class="wp-synhighlighter-outer"><div id="wpshdt_2" class="wp-synhighlighter-expanded"><table border="0" width="100%"><tr><td align="left" width="80%"><a name="#codesyntax_2"></a><a id="wpshat_2" class="wp-synhighlighter-title" href="#codesyntax_2"  onClick="javascript:wpsh_toggleBlock(2)" title="Click to show/hide code block">Source code</a></td><td align="right"><a href="#codesyntax_2" onClick="javascript:wpsh_code(2)" title="Show code only"><img border="0" style="border: 0 none" src="https://suportesmidiaticos.eca.usp.br/wp-content/plugins/wp-synhighlight/themes/default/images/code.png" /></a>&nbsp;<a href="#codesyntax_2" onClick="javascript:wpsh_print(2)" title="Print code"><img border="0" style="border: 0 none" src="https://suportesmidiaticos.eca.usp.br/wp-content/plugins/wp-synhighlight/themes/default/images/printer.png" /></a>&nbsp;<a href="https://suportesmidiaticos.eca.usp.br/wp-content/plugins/wp-synhighlight/About.html" target="_blank" title="Show plugin information"><img border="0" style="border: 0 none" src="https://suportesmidiaticos.eca.usp.br/wp-content/plugins/wp-synhighlight/themes/default/images/info.gif" /></a>&nbsp;</td></tr></table></div><div id="wpshdi_2" class="wp-synhighlighter-inner" style="display: block;"><pre class="css" style="font-family:monospace;"><span class="re1">.trez</span> <span class="br0">&#123;</span>
<span class="kw1">text-shadow</span><span class="sy0">:</span> 0 <span class="re3">1px</span> 0 <span class="re0">#ccc</span><span class="sy0">,</span>
0 <span class="re3">2px</span> 0 <span class="re0">#c9c9c9</span><span class="sy0">,</span>
0 <span class="re3">3px</span> 0 <span class="re0">#bbb</span><span class="sy0">,</span>
0 <span class="re3">4px</span> 0 <span class="re0">#b9b9b9</span><span class="sy0">,</span>
0 <span class="re3">5px</span> 0 <span class="re0">#aaa</span><span class="sy0">,</span>
0 <span class="re3">6px</span> <span class="re3">1px</span> rgba<span class="br0">&#40;</span>0<span class="sy0">,</span>0<span class="sy0">,</span>0<span class="sy0">,</span>.1<span class="br0">&#41;</span><span class="sy0">,</span>
0 0 <span class="re3">5px</span> rgba<span class="br0">&#40;</span>0<span class="sy0">,</span>0<span class="sy0">,</span>0<span class="sy0">,</span>.1<span class="br0">&#41;</span><span class="sy0">,</span>
0 <span class="re3">1px</span> <span class="re3">3px</span> rgba<span class="br0">&#40;</span>0<span class="sy0">,</span>0<span class="sy0">,</span>0<span class="sy0">,</span>.3<span class="br0">&#41;</span><span class="sy0">,</span>
0 <span class="re3">3px</span> <span class="re3">5px</span> rgba<span class="br0">&#40;</span>0<span class="sy0">,</span>0<span class="sy0">,</span>0<span class="sy0">,</span>.2<span class="br0">&#41;</span><span class="sy0">,</span>
0 <span class="re3">5px</span> <span class="re3">10px</span> rgba<span class="br0">&#40;</span>0<span class="sy0">,</span>0<span class="sy0">,</span>0<span class="sy0">,</span>.25<span class="br0">&#41;</span><span class="sy0">,</span>
0 <span class="re3">10px</span> <span class="re3">10px</span> rgba<span class="br0">&#40;</span>0<span class="sy0">,</span>0<span class="sy0">,</span>0<span class="sy0">,</span>.2<span class="br0">&#41;</span><span class="sy0">,</span>
0 <span class="re3">20px</span> <span class="re3">20px</span> rgba<span class="br0">&#40;</span>0<span class="sy0">,</span>0<span class="sy0">,</span>0<span class="sy0">,</span>.15<span class="br0">&#41;</span><span class="sy0">;</span>
<span class="kw1">font</span><span class="sy0">:</span> <span class="re3">4.5em</span> Fjalla One<span class="sy0">;</span>
<span class="br0">&#125;</span></pre></div></div><br />

</div><h2 class="tabtitle">Prof</h2>
<div class="tabcontent">
</p>
<div class="enjoy-css">Texto com profundidade</div>
<div id="wpshdo_3" class="wp-synhighlighter-outer"><div id="wpshdt_3" class="wp-synhighlighter-expanded"><table border="0" width="100%"><tr><td align="left" width="80%"><a name="#codesyntax_3"></a><a id="wpshat_3" class="wp-synhighlighter-title" href="#codesyntax_3"  onClick="javascript:wpsh_toggleBlock(3)" title="Click to show/hide code block">Source code</a></td><td align="right"><a href="#codesyntax_3" onClick="javascript:wpsh_code(3)" title="Show code only"><img border="0" style="border: 0 none" src="https://suportesmidiaticos.eca.usp.br/wp-content/plugins/wp-synhighlight/themes/default/images/code.png" /></a>&nbsp;<a href="#codesyntax_3" onClick="javascript:wpsh_print(3)" title="Print code"><img border="0" style="border: 0 none" src="https://suportesmidiaticos.eca.usp.br/wp-content/plugins/wp-synhighlight/themes/default/images/printer.png" /></a>&nbsp;<a href="https://suportesmidiaticos.eca.usp.br/wp-content/plugins/wp-synhighlight/About.html" target="_blank" title="Show plugin information"><img border="0" style="border: 0 none" src="https://suportesmidiaticos.eca.usp.br/wp-content/plugins/wp-synhighlight/themes/default/images/info.gif" /></a>&nbsp;</td></tr></table></div><div id="wpshdi_3" class="wp-synhighlighter-inner" style="display: block;"><pre class="css" style="font-family:monospace;"><span class="re1">.enjoy-css</span> <span class="br0">&#123;</span>
-webkit-box-sizing<span class="sy0">:</span> content-box<span class="sy0">;</span>
-moz-box-sizing<span class="sy0">:</span> content-box<span class="sy0">;</span>
box-sizing<span class="sy0">:</span> content-box<span class="sy0">;</span>
<span class="kw1">border</span><span class="sy0">:</span> <span class="kw2">none</span><span class="sy0">;</span>
<span class="kw1">font</span><span class="sy0">:</span> <span class="kw2">normal</span> <span class="kw2">normal</span> 900 <span class="re3">70px</span>/<span class="kw2">normal</span> <span class="st0">&quot;Fjalla One&quot;</span><span class="sy0">,</span> Helvetica<span class="sy0">,</span> <span class="kw2">sans-serif</span><span class="sy0">;</span>
<span class="kw1">color</span><span class="sy0">:</span> <span class="kw2">rgb</span><span class="br0">&#40;</span>32<span class="sy0">,</span> 44<span class="sy0">,</span> 45<span class="br0">&#41;</span><span class="sy0">;</span>
<span class="kw1">text-align</span><span class="sy0">:</span> <span class="kw2">center</span><span class="sy0">;</span>
-o-text-<span class="kw1">overflow</span><span class="sy0">:</span> <span class="kw1">clip</span><span class="sy0">;</span>
text-<span class="kw1">overflow</span><span class="sy0">:</span> <span class="kw1">clip</span><span class="sy0">;</span>
<span class="kw1">text-shadow</span><span class="sy0">:</span> 0 <span class="re3">1px</span> 0 <span class="kw2">rgb</span><span class="br0">&#40;</span>128<span class="sy0">,</span>141<span class="sy0">,</span>147<span class="br0">&#41;</span> <span class="sy0">,</span> <span class="re3">-1px</span> 0 0 <span class="kw2">rgb</span><span class="br0">&#40;</span>205<span class="sy0">,</span>210<span class="sy0">,</span>213<span class="br0">&#41;</span> <span class="sy0">,</span> <span class="re3">-1px</span> <span class="re3">2px</span> 0 <span class="kw2">rgb</span><span class="br0">&#40;</span>128<span class="sy0">,</span>141<span class="sy0">,</span>147<span class="br0">&#41;</span> <span class="sy0">,</span> <span class="re3">-2px</span> <span class="re3">1px</span> 0 <span class="kw2">rgb</span><span class="br0">&#40;</span>205<span class="sy0">,</span>210<span class="sy0">,</span>213<span class="br0">&#41;</span> <span class="sy0">,</span> <span class="re3">-2px</span> <span class="re3">3px</span> 0 <span class="kw2">rgb</span><span class="br0">&#40;</span>128<span class="sy0">,</span>141<span class="sy0">,</span>147<span class="br0">&#41;</span> <span class="sy0">,</span> <span class="re3">-3px</span> <span class="re3">2px</span> 0 <span class="kw2">rgb</span><span class="br0">&#40;</span>205<span class="sy0">,</span>210<span class="sy0">,</span>213<span class="br0">&#41;</span> <span class="sy0">,</span> <span class="re3">-3px</span> <span class="re3">4px</span> 0 <span class="kw2">rgb</span><span class="br0">&#40;</span>128<span class="sy0">,</span>141<span class="sy0">,</span>147<span class="br0">&#41;</span> <span class="sy0">,</span> <span class="re3">-4px</span> <span class="re3">3px</span> 0 <span class="kw2">rgb</span><span class="br0">&#40;</span>205<span class="sy0">,</span>210<span class="sy0">,</span>213<span class="br0">&#41;</span> <span class="sy0">,</span> <span class="re3">-4px</span> <span class="re3">5px</span> 0 <span class="kw2">rgb</span><span class="br0">&#40;</span>128<span class="sy0">,</span>141<span class="sy0">,</span>147<span class="br0">&#41;</span> <span class="sy0">,</span> <span class="re3">-5px</span> <span class="re3">4px</span> 0 <span class="kw2">rgb</span><span class="br0">&#40;</span>205<span class="sy0">,</span>210<span class="sy0">,</span>213<span class="br0">&#41;</span> <span class="sy0">,</span> <span class="re3">-5px</span> <span class="re3">6px</span> 0 <span class="kw2">rgb</span><span class="br0">&#40;</span>128<span class="sy0">,</span>141<span class="sy0">,</span>147<span class="br0">&#41;</span> <span class="sy0">,</span> <span class="re3">-6px</span> <span class="re3">5px</span> 0 <span class="kw2">rgb</span><span class="br0">&#40;</span>205<span class="sy0">,</span>210<span class="sy0">,</span>213<span class="br0">&#41;</span> <span class="sy0">,</span> <span class="re3">-6px</span> <span class="re3">7px</span> 0 <span class="kw2">rgb</span><span class="br0">&#40;</span>128<span class="sy0">,</span>141<span class="sy0">,</span>147<span class="br0">&#41;</span> <span class="sy0">,</span> <span class="re3">-7px</span> <span class="re3">6px</span> 0 <span class="kw2">rgb</span><span class="br0">&#40;</span>205<span class="sy0">,</span>210<span class="sy0">,</span>213<span class="br0">&#41;</span> <span class="sy0">,</span> <span class="re3">-7px</span> <span class="re3">8px</span> 0 <span class="kw2">rgb</span><span class="br0">&#40;</span>128<span class="sy0">,</span>141<span class="sy0">,</span>147<span class="br0">&#41;</span> <span class="sy0">,</span> <span class="re3">-8px</span> <span class="re3">7px</span> 0 <span class="kw2">rgb</span><span class="br0">&#40;</span>205<span class="sy0">,</span>210<span class="sy0">,</span>213<span class="br0">&#41;</span> <span class="sy0">;</span>
<span class="br0">&#125;</span></pre></div></div>

</div><h2 class="tabtitle">Inset</h2>
<div class="tabcontent">

<div class="inset">Inset</div>
<p><div id="wpshdo_4" class="wp-synhighlighter-outer"><div id="wpshdt_4" class="wp-synhighlighter-expanded"><table border="0" width="100%"><tr><td align="left" width="80%"><a name="#codesyntax_4"></a><a id="wpshat_4" class="wp-synhighlighter-title" href="#codesyntax_4"  onClick="javascript:wpsh_toggleBlock(4)" title="Click to show/hide code block">Source code</a></td><td align="right"><a href="#codesyntax_4" onClick="javascript:wpsh_code(4)" title="Show code only"><img border="0" style="border: 0 none" src="https://suportesmidiaticos.eca.usp.br/wp-content/plugins/wp-synhighlight/themes/default/images/code.png" /></a>&nbsp;<a href="#codesyntax_4" onClick="javascript:wpsh_print(4)" title="Print code"><img border="0" style="border: 0 none" src="https://suportesmidiaticos.eca.usp.br/wp-content/plugins/wp-synhighlight/themes/default/images/printer.png" /></a>&nbsp;<a href="https://suportesmidiaticos.eca.usp.br/wp-content/plugins/wp-synhighlight/About.html" target="_blank" title="Show plugin information"><img border="0" style="border: 0 none" src="https://suportesmidiaticos.eca.usp.br/wp-content/plugins/wp-synhighlight/themes/default/images/info.gif" /></a>&nbsp;</td></tr></table></div><div id="wpshdi_4" class="wp-synhighlighter-inner" style="display: block;"><pre class="css" style="font-family:monospace;">.<span class="kw2">inset</span> <span class="br0">&#123;</span>
<span class="kw1">text-shadow</span><span class="sy0">:</span> <span class="re3">0px</span> <span class="re3">2px</span> <span class="re3">3px</span> <span class="re0">#666</span><span class="sy0">;</span>
<span class="kw1">font</span><span class="sy0">:</span> <span class="re3">6em</span> Fjalla One<span class="sy0">;</span>
<span class="kw1">background</span><span class="sy0">:</span> <span class="re0">#505050</span><span class="sy0">;</span>
<span class="kw1">padding</span><span class="sy0">:</span> <span class="re3">50px</span> <span class="re3">50px</span><span class="sy0">;</span>
<span class="br0">&#125;</span></pre></div></div><br />

</div><h2 class="tabtitle">An</h2>
<div class="tabcontent">
</p>
<div class="anaglyph">Anaglyph</div>
<p><div id="wpshdo_5" class="wp-synhighlighter-outer"><div id="wpshdt_5" class="wp-synhighlighter-expanded"><table border="0" width="100%"><tr><td align="left" width="80%"><a name="#codesyntax_5"></a><a id="wpshat_5" class="wp-synhighlighter-title" href="#codesyntax_5"  onClick="javascript:wpsh_toggleBlock(5)" title="Click to show/hide code block">Source code</a></td><td align="right"><a href="#codesyntax_5" onClick="javascript:wpsh_code(5)" title="Show code only"><img border="0" style="border: 0 none" src="https://suportesmidiaticos.eca.usp.br/wp-content/plugins/wp-synhighlight/themes/default/images/code.png" /></a>&nbsp;<a href="#codesyntax_5" onClick="javascript:wpsh_print(5)" title="Print code"><img border="0" style="border: 0 none" src="https://suportesmidiaticos.eca.usp.br/wp-content/plugins/wp-synhighlight/themes/default/images/printer.png" /></a>&nbsp;<a href="https://suportesmidiaticos.eca.usp.br/wp-content/plugins/wp-synhighlight/About.html" target="_blank" title="Show plugin information"><img border="0" style="border: 0 none" src="https://suportesmidiaticos.eca.usp.br/wp-content/plugins/wp-synhighlight/themes/default/images/info.gif" /></a>&nbsp;</td></tr></table></div><div id="wpshdi_5" class="wp-synhighlighter-inner" style="display: block;"><pre class="css" style="font-family:monospace;"><span class="re1">.anaglyph</span> <span class="br0">&#123;</span>
-webkit-box-sizing<span class="sy0">:</span> content-box<span class="sy0">;</span>
-moz-box-sizing<span class="sy0">:</span> content-box<span class="sy0">;</span>
box-sizing<span class="sy0">:</span> content-box<span class="sy0">;</span>
<span class="kw1">border</span><span class="sy0">:</span> <span class="kw2">none</span><span class="sy0">;</span>
<span class="kw1">font</span><span class="sy0">:</span> <span class="kw2">normal</span> <span class="re3">60px</span>/<span class="kw2">normal</span> <span class="st0">&quot;Fjalla One&quot;</span><span class="sy0">,</span> Helvetica<span class="sy0">,</span> <span class="kw2">sans-serif</span><span class="sy0">;</span>
<span class="kw1">color</span><span class="sy0">:</span> <span class="kw2">rgb</span><span class="br0">&#40;</span>51<span class="sy0">,</span> 51<span class="sy0">,</span> 51<span class="br0">&#41;</span><span class="sy0">;</span>
<span class="kw1">text-align</span><span class="sy0">:</span> <span class="kw2">center</span><span class="sy0">;</span>
-o-text-<span class="kw1">overflow</span><span class="sy0">:</span> <span class="kw1">clip</span><span class="sy0">;</span>
text-<span class="kw1">overflow</span><span class="sy0">:</span> <span class="kw1">clip</span><span class="sy0">;</span>
<span class="kw1">letter-spacing</span><span class="sy0">:</span> <span class="re3">3px</span><span class="sy0">;</span>
<span class="kw1">text-shadow</span><span class="sy0">:</span> <span class="re3">-3px</span> 0 <span class="re3">1px</span> <span class="kw2">rgb</span><span class="br0">&#40;</span>30<span class="sy0">,</span>242<span class="sy0">,</span>241<span class="br0">&#41;</span> <span class="sy0">,</span> <span class="re3">3px</span> 0 <span class="re3">1px</span> <span class="kw2">rgb</span><span class="br0">&#40;</span>246<span class="sy0">,</span>5<span class="sy0">,</span>10<span class="br0">&#41;</span> <span class="sy0">;</span>
<span class="br0">&#125;</span></pre></div></div><br />

</div><h2 class="tabtitle">Transp</h2>
<div class="tabcontent">
<br />
<a href="http://143.107.95.102/prof/richardromancini/suportesmidiaticos/public_html/wordpress/wp-content/uploads/2015/06/janaina_editada_hor.jpg"><img class="img-responsive alignnone wp-image-3183 size-full" src="http://143.107.95.102/prof/richardromancini/suportesmidiaticos/public_html/wordpress/wp-content/uploads/2015/06/janaina_editada_hor.jpg" alt="janaina_editada_hor" width="1187" height="465" /></a></p>
<div class="textblur" style="margin-top: -250px; margin-left: 20px; margin-bottom: 150px;">Texto com transparência</div>
<div id="wpshdo_6" class="wp-synhighlighter-outer"><div id="wpshdt_6" class="wp-synhighlighter-expanded"><table border="0" width="100%"><tr><td align="left" width="80%"><a name="#codesyntax_6"></a><a id="wpshat_6" class="wp-synhighlighter-title" href="#codesyntax_6"  onClick="javascript:wpsh_toggleBlock(6)" title="Click to show/hide code block">Source code</a></td><td align="right"><a href="#codesyntax_6" onClick="javascript:wpsh_code(6)" title="Show code only"><img border="0" style="border: 0 none" src="https://suportesmidiaticos.eca.usp.br/wp-content/plugins/wp-synhighlight/themes/default/images/code.png" /></a>&nbsp;<a href="#codesyntax_6" onClick="javascript:wpsh_print(6)" title="Print code"><img border="0" style="border: 0 none" src="https://suportesmidiaticos.eca.usp.br/wp-content/plugins/wp-synhighlight/themes/default/images/printer.png" /></a>&nbsp;<a href="https://suportesmidiaticos.eca.usp.br/wp-content/plugins/wp-synhighlight/About.html" target="_blank" title="Show plugin information"><img border="0" style="border: 0 none" src="https://suportesmidiaticos.eca.usp.br/wp-content/plugins/wp-synhighlight/themes/default/images/info.gif" /></a>&nbsp;</td></tr></table></div><div id="wpshdi_6" class="wp-synhighlighter-inner" style="display: block;"><pre class="css" style="font-family:monospace;"><span class="re1">.textblur</span> <span class="br0">&#123;</span>
<span class="kw1">z-index</span><span class="sy0">:</span> <span class="nu0">5</span><span class="sy0">;</span>
<span class="kw1">font</span><span class="sy0">:</span> <span class="re3">5em</span> Fjalla One<span class="sy0">;</span>
<span class="kw1">color</span><span class="sy0">:</span> <span class="kw2">transparent</span><span class="sy0">;</span>
-webkit-text-stroke<span class="sy0">:</span> <span class="re3">6px</span> rgba<span class="br0">&#40;</span>255<span class="sy0">,</span>255<span class="sy0">,</span>255<span class="sy0">,</span>0.05<span class="br0">&#41;</span><span class="sy0">;</span>
<span class="kw1">text-shadow</span><span class="sy0">:</span> rgba<span class="br0">&#40;</span>245<span class="sy0">,</span>245<span class="sy0">,</span>255<span class="sy0">,</span>0.35<span class="br0">&#41;</span> 0 <span class="re3">0px</span> <span class="re3">0px</span><span class="sy0">,</span>
rgba<span class="br0">&#40;</span>0<span class="sy0">,</span>0<span class="sy0">,</span>30<span class="sy0">,</span>0.1<span class="br0">&#41;</span> <span class="re3">0px</span> <span class="re3">0.04em</span> <span class="re3">0.02em</span><span class="sy0">;</span>
<span class="kw1">background</span><span class="sy0">:</span> -webkit-linear-gradient<span class="br0">&#40;</span>-90deg<span class="sy0">,</span>
rgba<span class="br0">&#40;</span>255<span class="sy0">,</span>255<span class="sy0">,</span>255<span class="sy0">,</span>0<span class="br0">&#41;</span> <span class="re3"><span class="nu0">0</span>%</span><span class="sy0">,</span>
rgba<span class="br0">&#40;</span>255<span class="sy0">,</span>255<span class="sy0">,</span>255<span class="sy0">,</span>.3<span class="br0">&#41;</span> <span class="re3"><span class="nu0">50</span>%</span><span class="sy0">,</span>
rgba<span class="br0">&#40;</span>255<span class="sy0">,</span>255<span class="sy0">,</span>255<span class="sy0">,</span>0<span class="br0">&#41;</span> <span class="re3"><span class="nu0">50</span>%</span><span class="sy0">,</span>
rgba<span class="br0">&#40;</span>255<span class="sy0">,</span>255<span class="sy0">,</span>255<span class="sy0">,</span>.3<span class="br0">&#41;</span> <span class="re3"><span class="nu0">100</span>%</span><span class="sy0">,</span>
<span class="br0">&#41;</span><span class="sy0">,</span>
-webkit-background-<span class="kw1">clip</span><span class="sy0">:</span> textblur<span class="sy0">;</span>
<span class="br0">&#125;</span></pre></div></div>

</div><h2 class="tabtitle">Rot</h2>
<div class="tabcontent">

<div class="rot">Texto com rotação</div>
<div id="wpshdo_7" class="wp-synhighlighter-outer"><div id="wpshdt_7" class="wp-synhighlighter-expanded"><table border="0" width="100%"><tr><td align="left" width="80%"><a name="#codesyntax_7"></a><a id="wpshat_7" class="wp-synhighlighter-title" href="#codesyntax_7"  onClick="javascript:wpsh_toggleBlock(7)" title="Click to show/hide code block">Source code</a></td><td align="right"><a href="#codesyntax_7" onClick="javascript:wpsh_code(7)" title="Show code only"><img border="0" style="border: 0 none" src="https://suportesmidiaticos.eca.usp.br/wp-content/plugins/wp-synhighlight/themes/default/images/code.png" /></a>&nbsp;<a href="#codesyntax_7" onClick="javascript:wpsh_print(7)" title="Print code"><img border="0" style="border: 0 none" src="https://suportesmidiaticos.eca.usp.br/wp-content/plugins/wp-synhighlight/themes/default/images/printer.png" /></a>&nbsp;<a href="https://suportesmidiaticos.eca.usp.br/wp-content/plugins/wp-synhighlight/About.html" target="_blank" title="Show plugin information"><img border="0" style="border: 0 none" src="https://suportesmidiaticos.eca.usp.br/wp-content/plugins/wp-synhighlight/themes/default/images/info.gif" /></a>&nbsp;</td></tr></table></div><div id="wpshdi_7" class="wp-synhighlighter-inner" style="display: block;"><pre class="css" style="font-family:monospace;"><span class="re1">.rot</span> <span class="br0">&#123;</span>
-webkit-box-sizing<span class="sy0">:</span> content-box<span class="sy0">;</span>
-moz-box-sizing<span class="sy0">:</span> content-box<span class="sy0">;</span>
box-sizing<span class="sy0">:</span> content-box<span class="sy0">;</span>
<span class="kw1">padding</span><span class="sy0">:</span> <span class="re3">20px</span><span class="sy0">;</span>
<span class="kw1">overflow</span><span class="sy0">:</span> <span class="kw2">hidden</span><span class="sy0">;</span>
<span class="kw1">border</span><span class="sy0">:</span> <span class="kw2">none</span><span class="sy0">;</span>
<span class="kw1">font</span><span class="sy0">:</span> <span class="kw2">normal</span> <span class="re3">52px</span>/<span class="nu0">1</span> <span class="st0">&quot;Fjalla One&quot;</span><span class="sy0">,</span> Helvetica<span class="sy0">,</span> <span class="kw2">sans-serif</span><span class="sy0">;</span>
<span class="kw1">color</span><span class="sy0">:</span> rgba<span class="br0">&#40;</span>255<span class="sy0">,</span>0<span class="sy0">,</span>0<span class="sy0">,</span>1<span class="br0">&#41;</span><span class="sy0">;</span>
<span class="kw1">text-align</span><span class="sy0">:</span> <span class="kw2">center</span><span class="sy0">;</span>
-o-text-<span class="kw1">overflow</span><span class="sy0">:</span> ellipsis<span class="sy0">;</span>
text-<span class="kw1">overflow</span><span class="sy0">:</span> ellipsis<span class="sy0">;</span>
-webkit-transform<span class="sy0">:</span> rotateX<span class="br0">&#40;</span>-5.729577951308233deg<span class="br0">&#41;</span> rotateY<span class="br0">&#40;</span>9.167324722093172deg<span class="br0">&#41;</span> rotateZ<span class="br0">&#40;</span>-5.156620156177409deg<span class="br0">&#41;</span> <span class="sy0">;</span>
transform<span class="sy0">:</span> rotateX<span class="br0">&#40;</span>-5.729577951308233deg<span class="br0">&#41;</span> rotateY<span class="br0">&#40;</span>9.167324722093172deg<span class="br0">&#41;</span> rotateZ<span class="br0">&#40;</span>-5.156620156177409deg<span class="br0">&#41;</span> <span class="sy0">;</span>
<span class="br0">&#125;</span></pre></div></div>

</div><h2 class="tabtitle">Neon</h2>
<div class="tabcontent">

<div class="neon" style="text-align: center;">Texto com efeito Neon</div>
<p><div id="wpshdo_8" class="wp-synhighlighter-outer"><div id="wpshdt_8" class="wp-synhighlighter-expanded"><table border="0" width="100%"><tr><td align="left" width="80%"><a name="#codesyntax_8"></a><a id="wpshat_8" class="wp-synhighlighter-title" href="#codesyntax_8"  onClick="javascript:wpsh_toggleBlock(8)" title="Click to show/hide code block">Source code</a></td><td align="right"><a href="#codesyntax_8" onClick="javascript:wpsh_code(8)" title="Show code only"><img border="0" style="border: 0 none" src="https://suportesmidiaticos.eca.usp.br/wp-content/plugins/wp-synhighlight/themes/default/images/code.png" /></a>&nbsp;<a href="#codesyntax_8" onClick="javascript:wpsh_print(8)" title="Print code"><img border="0" style="border: 0 none" src="https://suportesmidiaticos.eca.usp.br/wp-content/plugins/wp-synhighlight/themes/default/images/printer.png" /></a>&nbsp;<a href="https://suportesmidiaticos.eca.usp.br/wp-content/plugins/wp-synhighlight/About.html" target="_blank" title="Show plugin information"><img border="0" style="border: 0 none" src="https://suportesmidiaticos.eca.usp.br/wp-content/plugins/wp-synhighlight/themes/default/images/info.gif" /></a>&nbsp;</td></tr></table></div><div id="wpshdi_8" class="wp-synhighlighter-inner" style="display: block;"><pre class="css" style="font-family:monospace;"><span class="re1">.neon</span> <span class="br0">&#123;</span>
<span class="kw1">display</span><span class="sy0">:</span> inline-<span class="kw2">block</span><span class="sy0">;</span>
-webkit-box-sizing<span class="sy0">:</span> border-box<span class="sy0">;</span>
-moz-box-sizing<span class="sy0">:</span> border-box<span class="sy0">;</span>
box-sizing<span class="sy0">:</span> border-box<span class="sy0">;</span>
<span class="kw1">padding</span><span class="sy0">:</span> <span class="re3">80px</span><span class="sy0">;</span>
<span class="kw1">margin-top</span><span class="sy0">:</span> <span class="re3">30px</span><span class="sy0">;</span>
<span class="kw1">border</span><span class="sy0">:</span> <span class="kw2">none</span><span class="sy0">;</span>
<span class="kw1">font</span><span class="sy0">:</span> <span class="kw2">normal</span> <span class="re3">48px</span>/<span class="kw2">normal</span> <span class="st0">&quot;Fjalla One&quot;</span><span class="sy0">,</span> Helvetica<span class="sy0">,</span> <span class="kw2">sans-serif</span><span class="sy0">;</span>
<span class="kw1">color</span><span class="sy0">:</span> rgba<span class="br0">&#40;</span>255<span class="sy0">,</span>255<span class="sy0">,</span>255<span class="sy0">,</span>1<span class="br0">&#41;</span><span class="sy0">;</span>
<span class="kw1">text-decoration</span><span class="sy0">:</span> <span class="kw2">normal</span><span class="sy0">;</span>
<span class="kw1">text-align</span><span class="sy0">:</span> <span class="kw2">center</span><span class="sy0">;</span>
-o-text-<span class="kw1">overflow</span><span class="sy0">:</span> <span class="kw1">clip</span><span class="sy0">;</span>
text-<span class="kw1">overflow</span><span class="sy0">:</span> <span class="kw1">clip</span><span class="sy0">;</span>
<span class="kw1">white-space</span><span class="sy0">:</span> pre<span class="sy0">;</span>
<span class="kw1">text-shadow</span><span class="sy0">:</span> 0 0 <span class="re3">10px</span> rgba<span class="br0">&#40;</span>255<span class="sy0">,</span>255<span class="sy0">,</span>255<span class="sy0">,</span>1<span class="br0">&#41;</span> <span class="sy0">,</span> 0 0 <span class="re3">20px</span> rgba<span class="br0">&#40;</span>255<span class="sy0">,</span>255<span class="sy0">,</span>255<span class="sy0">,</span>1<span class="br0">&#41;</span> <span class="sy0">,</span> 0 0 <span class="re3">30px</span> rgba<span class="br0">&#40;</span>255<span class="sy0">,</span>255<span class="sy0">,</span>255<span class="sy0">,</span>1<span class="br0">&#41;</span> <span class="sy0">,</span> 0 0 <span class="re3">40px</span> <span class="re0">#ff00de</span> <span class="sy0">,</span> 0 0 <span class="re3">70px</span> <span class="re0">#ff00de</span> <span class="sy0">,</span> 0 0 <span class="re3">80px</span> <span class="re0">#ff00de</span> <span class="sy0">,</span> 0 0 <span class="re3">100px</span> <span class="re0">#ff00de</span> <span class="sy0">;</span>
-webkit-transition<span class="sy0">:</span> all 200ms cubic-bezier<span class="br0">&#40;</span>0.42<span class="sy0">,</span> 0<span class="sy0">,</span> 0.58<span class="sy0">,</span> 1<span class="br0">&#41;</span><span class="sy0">;</span>
-moz-transition<span class="sy0">:</span> all 200ms cubic-bezier<span class="br0">&#40;</span>0.42<span class="sy0">,</span> 0<span class="sy0">,</span> 0.58<span class="sy0">,</span> 1<span class="br0">&#41;</span><span class="sy0">;</span>
-o-transition<span class="sy0">:</span> all 200ms cubic-bezier<span class="br0">&#40;</span>0.42<span class="sy0">,</span> 0<span class="sy0">,</span> 0.58<span class="sy0">,</span> 1<span class="br0">&#41;</span><span class="sy0">;</span>
transition<span class="sy0">:</span> all 200ms cubic-bezier<span class="br0">&#40;</span>0.42<span class="sy0">,</span> 0<span class="sy0">,</span> 0.58<span class="sy0">,</span> 1<span class="br0">&#41;</span><span class="sy0">;</span>
<span class="kw1">background</span><span class="sy0">:</span> <span class="re0">#000000</span>
<span class="br0">&#125;</span>
<span class="re1">.neon</span><span class="re2">:hover </span><span class="br0">&#123;</span>
<span class="kw1">text-shadow</span><span class="sy0">:</span> 0 0 <span class="re3">10px</span> rgba<span class="br0">&#40;</span>255<span class="sy0">,</span>255<span class="sy0">,</span>255<span class="sy0">,</span>1<span class="br0">&#41;</span> <span class="sy0">,</span> 0 0 <span class="re3">20px</span> rgba<span class="br0">&#40;</span>255<span class="sy0">,</span>255<span class="sy0">,</span>255<span class="sy0">,</span>1<span class="br0">&#41;</span> <span class="sy0">,</span> 0 0 <span class="re3">30px</span> rgba<span class="br0">&#40;</span>255<span class="sy0">,</span>255<span class="sy0">,</span>255<span class="sy0">,</span>1<span class="br0">&#41;</span> <span class="sy0">,</span> 0 0 <span class="re3">40px</span> <span class="re0">#00ffff</span> <span class="sy0">,</span> 0 0 <span class="re3">70px</span> <span class="re0">#00ffff</span> <span class="sy0">,</span> 0 0 <span class="re3">80px</span> <span class="re0">#00ffff</span> <span class="sy0">,</span> 0 0 <span class="re3">100px</span> <span class="re0">#00ffff</span> <span class="sy0">;</span>
<span class="kw1">margin-top</span><span class="sy0">:</span> <span class="re3">30px</span><span class="sy0">;</span>
<span class="kw1">background</span><span class="sy0">:</span> <span class="re0">#000000</span>
<span class="br0">&#125;</span></pre></div></div><br />

</div><h2 class="tabtitle">Stroke</h2>
<div class="tabcontent">
</p>
<div class="stroke">Stroke com transição</div>
<div id="wpshdo_9" class="wp-synhighlighter-outer"><div id="wpshdt_9" class="wp-synhighlighter-expanded"><table border="0" width="100%"><tr><td align="left" width="80%"><a name="#codesyntax_9"></a><a id="wpshat_9" class="wp-synhighlighter-title" href="#codesyntax_9"  onClick="javascript:wpsh_toggleBlock(9)" title="Click to show/hide code block">Source code</a></td><td align="right"><a href="#codesyntax_9" onClick="javascript:wpsh_code(9)" title="Show code only"><img border="0" style="border: 0 none" src="https://suportesmidiaticos.eca.usp.br/wp-content/plugins/wp-synhighlight/themes/default/images/code.png" /></a>&nbsp;<a href="#codesyntax_9" onClick="javascript:wpsh_print(9)" title="Print code"><img border="0" style="border: 0 none" src="https://suportesmidiaticos.eca.usp.br/wp-content/plugins/wp-synhighlight/themes/default/images/printer.png" /></a>&nbsp;<a href="https://suportesmidiaticos.eca.usp.br/wp-content/plugins/wp-synhighlight/About.html" target="_blank" title="Show plugin information"><img border="0" style="border: 0 none" src="https://suportesmidiaticos.eca.usp.br/wp-content/plugins/wp-synhighlight/themes/default/images/info.gif" /></a>&nbsp;</td></tr></table></div><div id="wpshdi_9" class="wp-synhighlighter-inner" style="display: block;"><pre class="css" style="font-family:monospace;"><span class="re1">.stroke</span> <span class="br0">&#123;</span>
<span class="kw1">display</span><span class="sy0">:</span> <span class="kw2">block</span><span class="sy0">;</span>
-webkit-box-sizing<span class="sy0">:</span> content-box<span class="sy0">;</span>
-moz-box-sizing<span class="sy0">:</span> content-box<span class="sy0">;</span>
box-sizing<span class="sy0">:</span> content-box<span class="sy0">;</span>
<span class="kw1">float</span><span class="sy0">:</span> <span class="kw2">none</span><span class="sy0">;</span>
<span class="kw1">z-index</span><span class="sy0">:</span> <span class="kw2">auto</span><span class="sy0">;</span>
<span class="kw1">width</span><span class="sy0">:</span> <span class="kw2">auto</span><span class="sy0">;</span>
<span class="kw1">height</span><span class="sy0">:</span> <span class="kw2">auto</span><span class="sy0">;</span>
<span class="kw1">position</span><span class="sy0">:</span> <span class="kw2">static</span><span class="sy0">;</span>
<span class="kw1">cursor</span><span class="sy0">:</span> <span class="kw2">pointer</span><span class="sy0">;</span>
opacity<span class="sy0">:</span> <span class="nu0">1</span><span class="sy0">;</span>
<span class="kw1">margin</span><span class="sy0">:</span> <span class="nu0">0</span><span class="sy0">;</span>
<span class="kw1">padding</span><span class="sy0">:</span> <span class="nu0">0</span><span class="sy0">;</span>
<span class="kw1">overflow</span><span class="sy0">:</span> <span class="kw2">visible</span><span class="sy0">;</span>
<span class="kw1">border</span><span class="sy0">:</span> <span class="kw2">none</span><span class="sy0">;</span>
-webkit-border-radius<span class="sy0">:</span> <span class="nu0">0</span><span class="sy0">;</span>
border-radius<span class="sy0">:</span> <span class="nu0">0</span><span class="sy0">;</span>
<span class="kw1">font</span><span class="sy0">:</span> <span class="kw2">normal</span> <span class="kw2">normal</span> <span class="kw2">bold</span> <span class="re3">80px</span>/<span class="kw2">normal</span> <span class="st0">&quot;Fjalla One&quot;</span><span class="sy0">,</span> Helvetica<span class="sy0">,</span> <span class="kw2">sans-serif</span><span class="sy0">;</span>
<span class="kw1">color</span><span class="sy0">:</span> rgba<span class="br0">&#40;</span>255<span class="sy0">,</span>255<span class="sy0">,</span>255<span class="sy0">,</span>1<span class="br0">&#41;</span><span class="sy0">;</span>
<span class="kw1">text-align</span><span class="sy0">:</span> <span class="kw2">center</span><span class="sy0">;</span>
-o-text-<span class="kw1">overflow</span><span class="sy0">:</span> <span class="kw1">clip</span><span class="sy0">;</span>
text-<span class="kw1">overflow</span><span class="sy0">:</span> <span class="kw1">clip</span><span class="sy0">;</span>
<span class="kw1">background</span><span class="sy0">:</span> <span class="kw2">none</span><span class="sy0">;</span>
-webkit-box-shadow<span class="sy0">:</span> <span class="kw2">none</span><span class="sy0">;</span>
box-shadow<span class="sy0">:</span> <span class="kw2">none</span><span class="sy0">;</span>
<span class="kw1">text-shadow</span><span class="sy0">:</span> <span class="re3">1px</span> <span class="re3">1px</span> 0 <span class="re0">#2ecc71</span> <span class="sy0">,</span> <span class="re3">-1px</span> <span class="re3">-1px</span> 0 <span class="re0">#2ecc71</span> <span class="sy0">,</span> <span class="re3">1px</span> <span class="re3">-1px</span> 0 <span class="re0">#2ecc71</span> <span class="sy0">,</span> <span class="re3">-1px</span> <span class="re3">1px</span> 0 <span class="re0">#2ecc71</span> <span class="sy0">;</span>
-webkit-transition<span class="sy0">:</span> <span class="kw1">text-shadow</span> 500ms cubic-bezier<span class="br0">&#40;</span>0.42<span class="sy0">,</span> 0<span class="sy0">,</span> 0.58<span class="sy0">,</span> 1<span class="br0">&#41;</span><span class="sy0">;</span>
-moz-transition<span class="sy0">:</span> <span class="kw1">text-shadow</span> 500ms cubic-bezier<span class="br0">&#40;</span>0.42<span class="sy0">,</span> 0<span class="sy0">,</span> 0.58<span class="sy0">,</span> 1<span class="br0">&#41;</span><span class="sy0">;</span>
-o-transition<span class="sy0">:</span> <span class="kw1">text-shadow</span> 500ms cubic-bezier<span class="br0">&#40;</span>0.42<span class="sy0">,</span> 0<span class="sy0">,</span> 0.58<span class="sy0">,</span> 1<span class="br0">&#41;</span><span class="sy0">;</span>
transition<span class="sy0">:</span> <span class="kw1">text-shadow</span> 500ms cubic-bezier<span class="br0">&#40;</span>0.42<span class="sy0">,</span> 0<span class="sy0">,</span> 0.58<span class="sy0">,</span> 1<span class="br0">&#41;</span><span class="sy0">;</span>
-webkit-transform<span class="sy0">:</span> <span class="kw2">none</span><span class="sy0">;</span>
transform<span class="sy0">:</span> <span class="kw2">none</span><span class="sy0">;</span>
-webkit-transform-origin<span class="sy0">:</span> <span class="re3"><span class="nu0">50</span>%</span> <span class="re3"><span class="nu0">50</span>%</span> <span class="nu0">0</span><span class="sy0">;</span>
transform-origin<span class="sy0">:</span> <span class="re3"><span class="nu0">50</span>%</span> <span class="re3"><span class="nu0">50</span>%</span> <span class="nu0">0</span><span class="sy0">;</span>
<span class="br0">&#125;</span>
<span class="re1">.stroke</span><span class="re2">:hover </span><span class="br0">&#123;</span>
<span class="kw1">display</span><span class="sy0">:</span> <span class="kw2">block</span><span class="sy0">;</span>
-webkit-box-sizing<span class="sy0">:</span> content-box<span class="sy0">;</span>
-moz-box-sizing<span class="sy0">:</span> content-box<span class="sy0">;</span>
box-sizing<span class="sy0">:</span> content-box<span class="sy0">;</span>
<span class="kw1">float</span><span class="sy0">:</span> <span class="kw2">none</span><span class="sy0">;</span>
<span class="kw1">z-index</span><span class="sy0">:</span> <span class="kw2">auto</span><span class="sy0">;</span>
<span class="kw1">width</span><span class="sy0">:</span> <span class="kw2">auto</span><span class="sy0">;</span>
<span class="kw1">height</span><span class="sy0">:</span> <span class="kw2">auto</span><span class="sy0">;</span>
<span class="kw1">position</span><span class="sy0">:</span> <span class="kw2">static</span><span class="sy0">;</span>
<span class="kw1">cursor</span><span class="sy0">:</span> <span class="kw2">pointer</span><span class="sy0">;</span>
opacity<span class="sy0">:</span> <span class="nu0">1</span><span class="sy0">;</span>
<span class="kw1">margin</span><span class="sy0">:</span> <span class="nu0">0</span><span class="sy0">;</span>
<span class="kw1">padding</span><span class="sy0">:</span> <span class="nu0">0</span><span class="sy0">;</span>
<span class="kw1">overflow</span><span class="sy0">:</span> <span class="kw2">visible</span><span class="sy0">;</span>
<span class="kw1">border</span><span class="sy0">:</span> <span class="kw2">none</span><span class="sy0">;</span>
-webkit-border-radius<span class="sy0">:</span> <span class="nu0">0</span><span class="sy0">;</span>
border-radius<span class="sy0">:</span> <span class="nu0">0</span><span class="sy0">;</span>
<span class="kw1">font</span><span class="sy0">:</span> <span class="kw2">normal</span> <span class="kw2">normal</span> <span class="kw2">bold</span> <span class="re3">80px</span>/<span class="kw2">normal</span> <span class="st0">&quot;Fjalla One&quot;</span><span class="sy0">,</span> Helvetica<span class="sy0">,</span> <span class="kw2">sans-serif</span><span class="sy0">;</span>
<span class="kw1">color</span><span class="sy0">:</span> rgba<span class="br0">&#40;</span>255<span class="sy0">,</span>255<span class="sy0">,</span>255<span class="sy0">,</span>1<span class="br0">&#41;</span><span class="sy0">;</span>
<span class="kw1">text-align</span><span class="sy0">:</span> <span class="kw2">center</span><span class="sy0">;</span>
-o-text-<span class="kw1">overflow</span><span class="sy0">:</span> <span class="kw1">clip</span><span class="sy0">;</span>
text-<span class="kw1">overflow</span><span class="sy0">:</span> <span class="kw1">clip</span><span class="sy0">;</span>
<span class="kw1">background</span><span class="sy0">:</span> <span class="kw2">none</span><span class="sy0">;</span>
-webkit-box-shadow<span class="sy0">:</span> <span class="kw2">none</span><span class="sy0">;</span>
box-shadow<span class="sy0">:</span> <span class="kw2">none</span><span class="sy0">;</span>
<span class="kw1">text-shadow</span><span class="sy0">:</span> <span class="re3">1px</span> <span class="re3">1px</span> <span class="re3">8px</span> rgba<span class="br0">&#40;</span>46<span class="sy0">,</span>204<span class="sy0">,</span>113<span class="sy0">,</span>0.5<span class="br0">&#41;</span> <span class="sy0">,</span> <span class="re3">-1px</span> <span class="re3">-1px</span> <span class="re3">8px</span> rgba<span class="br0">&#40;</span>46<span class="sy0">,</span>204<span class="sy0">,</span>113<span class="sy0">,</span>0.5<span class="br0">&#41;</span> <span class="sy0">,</span> <span class="re3">1px</span> <span class="re3">-1px</span> <span class="re3">8px</span> rgba<span class="br0">&#40;</span>46<span class="sy0">,</span>204<span class="sy0">,</span>113<span class="sy0">,</span>0.5<span class="br0">&#41;</span> <span class="sy0">,</span> <span class="re3">-1px</span> <span class="re3">1px</span> <span class="re3">8px</span> rgba<span class="br0">&#40;</span>46<span class="sy0">,</span>204<span class="sy0">,</span>113<span class="sy0">,</span>0.5<span class="br0">&#41;</span> <span class="sy0">;</span>
-webkit-transition<span class="sy0">:</span> <span class="kw1">text-shadow</span> 250ms cubic-bezier<span class="br0">&#40;</span>0.42<span class="sy0">,</span> 0<span class="sy0">,</span> 0.58<span class="sy0">,</span> 1<span class="br0">&#41;</span><span class="sy0">;</span>
-moz-transition<span class="sy0">:</span> <span class="kw1">text-shadow</span> 250ms cubic-bezier<span class="br0">&#40;</span>0.42<span class="sy0">,</span> 0<span class="sy0">,</span> 0.58<span class="sy0">,</span> 1<span class="br0">&#41;</span><span class="sy0">;</span>
-o-transition<span class="sy0">:</span> <span class="kw1">text-shadow</span> 250ms cubic-bezier<span class="br0">&#40;</span>0.42<span class="sy0">,</span> 0<span class="sy0">,</span> 0.58<span class="sy0">,</span> 1<span class="br0">&#41;</span><span class="sy0">;</span>
transition<span class="sy0">:</span> <span class="kw1">text-shadow</span> 250ms cubic-bezier<span class="br0">&#40;</span>0.42<span class="sy0">,</span> 0<span class="sy0">,</span> 0.58<span class="sy0">,</span> 1<span class="br0">&#41;</span><span class="sy0">;</span>
-webkit-transform<span class="sy0">:</span> <span class="kw2">none</span><span class="sy0">;</span>
transform<span class="sy0">:</span> <span class="kw2">none</span><span class="sy0">;</span>
-webkit-transform-origin<span class="sy0">:</span> <span class="re3"><span class="nu0">50</span>%</span> <span class="re3"><span class="nu0">50</span>%</span> <span class="nu0">0</span><span class="sy0">;</span>
transform-origin<span class="sy0">:</span> <span class="re3"><span class="nu0">50</span>%</span> <span class="re3"><span class="nu0">50</span>%</span> <span class="nu0">0</span><span class="sy0">;</span>
<span class="br0">&#125;</span></pre></div></div>

</div><h2 class="tabtitle">3D-T</h2>
<div class="tabcontent">

<div class="novotres">Efeito 3D com transição</div>
<p><div id="wpshdo_10" class="wp-synhighlighter-outer"><div id="wpshdt_10" class="wp-synhighlighter-expanded"><table border="0" width="100%"><tr><td align="left" width="80%"><a name="#codesyntax_10"></a><a id="wpshat_10" class="wp-synhighlighter-title" href="#codesyntax_10"  onClick="javascript:wpsh_toggleBlock(10)" title="Click to show/hide code block">Source code</a></td><td align="right"><a href="#codesyntax_10" onClick="javascript:wpsh_code(10)" title="Show code only"><img border="0" style="border: 0 none" src="https://suportesmidiaticos.eca.usp.br/wp-content/plugins/wp-synhighlight/themes/default/images/code.png" /></a>&nbsp;<a href="#codesyntax_10" onClick="javascript:wpsh_print(10)" title="Print code"><img border="0" style="border: 0 none" src="https://suportesmidiaticos.eca.usp.br/wp-content/plugins/wp-synhighlight/themes/default/images/printer.png" /></a>&nbsp;<a href="https://suportesmidiaticos.eca.usp.br/wp-content/plugins/wp-synhighlight/About.html" target="_blank" title="Show plugin information"><img border="0" style="border: 0 none" src="https://suportesmidiaticos.eca.usp.br/wp-content/plugins/wp-synhighlight/themes/default/images/info.gif" /></a>&nbsp;</td></tr></table></div><div id="wpshdi_10" class="wp-synhighlighter-inner" style="display: block;"><pre class="css" style="font-family:monospace;"><span class="re1">.novotres</span> <span class="br0">&#123;</span>
-webkit-box-sizing<span class="sy0">:</span> content-box<span class="sy0">;</span>
-moz-box-sizing<span class="sy0">:</span> content-box<span class="sy0">;</span>
box-sizing<span class="sy0">:</span> content-box<span class="sy0">;</span>
<span class="kw1">cursor</span><span class="sy0">:</span> <span class="kw2">pointer</span><span class="sy0">;</span>
<span class="kw1">border</span><span class="sy0">:</span> <span class="kw2">none</span><span class="sy0">;</span>
<span class="kw1">font</span><span class="sy0">:</span> <span class="kw2">normal</span> <span class="re3">72px</span>/<span class="kw2">normal</span> <span class="st0">&quot;Fjalla One&quot;</span><span class="sy0">,</span> Helvetica<span class="sy0">,</span> <span class="kw2">sans-serif</span><span class="sy0">;</span>
<span class="kw1">color</span><span class="sy0">:</span> rgba<span class="br0">&#40;</span>255<span class="sy0">,</span>255<span class="sy0">,</span>255<span class="sy0">,</span>1<span class="br0">&#41;</span><span class="sy0">;</span>
<span class="kw1">text-align</span><span class="sy0">:</span> <span class="kw2">center</span><span class="sy0">;</span>
-o-text-<span class="kw1">overflow</span><span class="sy0">:</span> <span class="kw1">clip</span><span class="sy0">;</span>
text-<span class="kw1">overflow</span><span class="sy0">:</span> <span class="kw1">clip</span><span class="sy0">;</span>
<span class="kw1">text-shadow</span><span class="sy0">:</span> 0 <span class="re3">1px</span> 0 <span class="kw2">rgb</span><span class="br0">&#40;</span>204<span class="sy0">,</span>204<span class="sy0">,</span>204<span class="br0">&#41;</span> <span class="sy0">,</span> 0 <span class="re3">2px</span> 0 <span class="kw2">rgb</span><span class="br0">&#40;</span>201<span class="sy0">,</span>201<span class="sy0">,</span>201<span class="br0">&#41;</span> <span class="sy0">,</span> 0 <span class="re3">3px</span> 0 <span class="kw2">rgb</span><span class="br0">&#40;</span>187<span class="sy0">,</span>187<span class="sy0">,</span>187<span class="br0">&#41;</span> <span class="sy0">,</span> 0 <span class="re3">4px</span> 0 <span class="kw2">rgb</span><span class="br0">&#40;</span>185<span class="sy0">,</span>185<span class="sy0">,</span>185<span class="br0">&#41;</span> <span class="sy0">,</span> 0 <span class="re3">5px</span> 0 <span class="kw2">rgb</span><span class="br0">&#40;</span>170<span class="sy0">,</span>170<span class="sy0">,</span>170<span class="br0">&#41;</span> <span class="sy0">,</span> 0 <span class="re3">6px</span> <span class="re3">1px</span> rgba<span class="br0">&#40;</span>0<span class="sy0">,</span>0<span class="sy0">,</span>0<span class="sy0">,</span>0.0980392<span class="br0">&#41;</span> <span class="sy0">,</span> 0 0 <span class="re3">5px</span> rgba<span class="br0">&#40;</span>0<span class="sy0">,</span>0<span class="sy0">,</span>0<span class="sy0">,</span>0.0980392<span class="br0">&#41;</span> <span class="sy0">,</span> 0 <span class="re3">1px</span> <span class="re3">3px</span> rgba<span class="br0">&#40;</span>0<span class="sy0">,</span>0<span class="sy0">,</span>0<span class="sy0">,</span>0.298039<span class="br0">&#41;</span> <span class="sy0">,</span> 0 <span class="re3">3px</span> <span class="re3">5px</span> rgba<span class="br0">&#40;</span>0<span class="sy0">,</span>0<span class="sy0">,</span>0<span class="sy0">,</span>0.2<span class="br0">&#41;</span> <span class="sy0">,</span> 0 <span class="re3">5px</span> <span class="re3">10px</span> rgba<span class="br0">&#40;</span>0<span class="sy0">,</span>0<span class="sy0">,</span>0<span class="sy0">,</span>0.247059<span class="br0">&#41;</span> <span class="sy0">,</span> 0 <span class="re3">10px</span> <span class="re3">10px</span> rgba<span class="br0">&#40;</span>0<span class="sy0">,</span>0<span class="sy0">,</span>0<span class="sy0">,</span>0.2<span class="br0">&#41;</span> <span class="sy0">,</span> 0 <span class="re3">20px</span> <span class="re3">20px</span> rgba<span class="br0">&#40;</span>0<span class="sy0">,</span>0<span class="sy0">,</span>0<span class="sy0">,</span>0.14902<span class="br0">&#41;</span> <span class="sy0">;</span>
-webkit-transition<span class="sy0">:</span> all 300ms cubic-bezier<span class="br0">&#40;</span>0.42<span class="sy0">,</span> 0<span class="sy0">,</span> 0.58<span class="sy0">,</span> 1<span class="br0">&#41;</span><span class="sy0">;</span>
-moz-transition<span class="sy0">:</span> all 300ms cubic-bezier<span class="br0">&#40;</span>0.42<span class="sy0">,</span> 0<span class="sy0">,</span> 0.58<span class="sy0">,</span> 1<span class="br0">&#41;</span><span class="sy0">;</span>
-o-transition<span class="sy0">:</span> all 300ms cubic-bezier<span class="br0">&#40;</span>0.42<span class="sy0">,</span> 0<span class="sy0">,</span> 0.58<span class="sy0">,</span> 1<span class="br0">&#41;</span><span class="sy0">;</span>
transition<span class="sy0">:</span> all 300ms cubic-bezier<span class="br0">&#40;</span>0.42<span class="sy0">,</span> 0<span class="sy0">,</span> 0.58<span class="sy0">,</span> 1<span class="br0">&#41;</span><span class="sy0">;</span>
<span class="br0">&#125;</span>
<span class="re1">.novotres</span><span class="re2">:hover </span><span class="br0">&#123;</span>
<span class="kw1">color</span><span class="sy0">:</span> rgba<span class="br0">&#40;</span>169<span class="sy0">,</span>214<span class="sy0">,</span>169<span class="sy0">,</span>1<span class="br0">&#41;</span><span class="sy0">;</span>
<span class="kw1">text-shadow</span><span class="sy0">:</span> 0 <span class="re3">1px</span> 0 rgba<span class="br0">&#40;</span>255<span class="sy0">,</span>255<span class="sy0">,</span>255<span class="sy0">,</span>1<span class="br0">&#41;</span> <span class="sy0">,</span> 0 <span class="re3">2px</span> 0 rgba<span class="br0">&#40;</span>255<span class="sy0">,</span>255<span class="sy0">,</span>255<span class="sy0">,</span>1<span class="br0">&#41;</span> <span class="sy0">,</span> 0 <span class="re3">3px</span> 0 rgba<span class="br0">&#40;</span>255<span class="sy0">,</span>255<span class="sy0">,</span>255<span class="sy0">,</span>1<span class="br0">&#41;</span> <span class="sy0">,</span> 0 <span class="re3">4px</span> 0 rgba<span class="br0">&#40;</span>255<span class="sy0">,</span>255<span class="sy0">,</span>255<span class="sy0">,</span>1<span class="br0">&#41;</span> <span class="sy0">,</span> 0 <span class="re3">5px</span> 0 rgba<span class="br0">&#40;</span>255<span class="sy0">,</span>255<span class="sy0">,</span>255<span class="sy0">,</span>1<span class="br0">&#41;</span> <span class="sy0">,</span> 0 <span class="re3">6px</span> <span class="re3">1px</span> rgba<span class="br0">&#40;</span>0<span class="sy0">,</span>0<span class="sy0">,</span>0<span class="sy0">,</span>0.0980392<span class="br0">&#41;</span> <span class="sy0">,</span> 0 0 <span class="re3">5px</span> rgba<span class="br0">&#40;</span>0<span class="sy0">,</span>0<span class="sy0">,</span>0<span class="sy0">,</span>0.0980392<span class="br0">&#41;</span> <span class="sy0">,</span> 0 <span class="re3">1px</span> <span class="re3">3px</span> rgba<span class="br0">&#40;</span>0<span class="sy0">,</span>0<span class="sy0">,</span>0<span class="sy0">,</span>0.298039<span class="br0">&#41;</span> <span class="sy0">,</span> 0 <span class="re3">3px</span> <span class="re3">5px</span> rgba<span class="br0">&#40;</span>0<span class="sy0">,</span>0<span class="sy0">,</span>0<span class="sy0">,</span>0.2<span class="br0">&#41;</span> <span class="sy0">,</span> 0 <span class="re3">-5px</span> <span class="re3">10px</span> rgba<span class="br0">&#40;</span>0<span class="sy0">,</span>0<span class="sy0">,</span>0<span class="sy0">,</span>0.247059<span class="br0">&#41;</span> <span class="sy0">,</span> 0 <span class="re3">-7px</span> <span class="re3">10px</span> rgba<span class="br0">&#40;</span>0<span class="sy0">,</span>0<span class="sy0">,</span>0<span class="sy0">,</span>0.2<span class="br0">&#41;</span> <span class="sy0">,</span> 0 <span class="re3">-15px</span> <span class="re3">20px</span> rgba<span class="br0">&#40;</span>0<span class="sy0">,</span>0<span class="sy0">,</span>0<span class="sy0">,</span>0.14902<span class="br0">&#41;</span> <span class="sy0">;</span>
-webkit-transition<span class="sy0">:</span> all 200ms cubic-bezier<span class="br0">&#40;</span>0.42<span class="sy0">,</span> 0<span class="sy0">,</span> 0.58<span class="sy0">,</span> 1<span class="br0">&#41;</span> 10ms<span class="sy0">;</span>
-moz-transition<span class="sy0">:</span> all 200ms cubic-bezier<span class="br0">&#40;</span>0.42<span class="sy0">,</span> 0<span class="sy0">,</span> 0.58<span class="sy0">,</span> 1<span class="br0">&#41;</span> 10ms<span class="sy0">;</span>
-o-transition<span class="sy0">:</span> all 200ms cubic-bezier<span class="br0">&#40;</span>0.42<span class="sy0">,</span> 0<span class="sy0">,</span> 0.58<span class="sy0">,</span> 1<span class="br0">&#41;</span> 10ms<span class="sy0">;</span>
transition<span class="sy0">:</span> all 200ms cubic-bezier<span class="br0">&#40;</span>0.42<span class="sy0">,</span> 0<span class="sy0">,</span> 0.58<span class="sy0">,</span> 1<span class="br0">&#41;</span> 10ms<span class="sy0">;</span>
<span class="br0">&#125;</span></pre></div></div><br />

</div><h2 class="tabtitle">Ref</h2>
<div class="tabcontent">
<br />
Muitos sites possuem tutoriais para a feitura de efeitos. Recomenda-se que sejam estudadas instruções deste tipo de anos mais recentes, já que os desenvolvimentos nos códigos e navegadores geralmente simplifica a sintaxe do estilo. Os materiais de referência para a montagem desta compilação foram:</p>
<ul>
<li><a href="http://designbump.com/23-advanced-css-text-effect-tutorials-to-learn/" target="_blank">Design Bump</a></li>
<li><a href="http://designmodo.com/css3-text-effect-tutorials/" target="_blank">Desigmodo</a></li>
<li><a href="http://line25.com/articles/using-css-text-shadow-to-create-cool-text-effects" target="_blank">Line25</a></li>
<li><a href="http://www.webdesigntunes.com/freebies/css3-text-effects/#.VX4VgEa_5Zi" target="_blank">WDT</a></li>
</ul>
<div style="margin-bottom: 20px;">Porém, talvez o melhor site para o desenvolvedor iniciante seja o <a href="http://enjoycss.com/" target="_blank"><strong>EnjoyCSS</strong></a> que, a partir de uma série de modelos, permite que se elaborem muitos elementos com estilo CSS. A criação de conta é opcional, neste serviço. É necessário copiar o código e depois colocá-lo no WP, como estilo CSS, para o seu uso.</div>
</div></div>
</div>
<div style="margin: 0px 100px 0 100px;">É interessante notar ainda que alguns dos efeitos possuem &#8220;estados&#8221;, quer dizer, alteram-se se o usuário coloca o mouse sobre o texto. É muito melhor usar texto estilizado &#8212; que continua a ser um texto e por isso é lido pelos buscadores e pode ser selecionado pelo leitor &#8212; do que utilizar imagens de textos.</div>
]]></content:encoded>
			<wfw:commentRss>https://suportesmidiaticos.eca.usp.br/?feed=rss2&#038;p=3111</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>O artigo de opinião</title>
		<link>https://suportesmidiaticos.eca.usp.br/?p=3093</link>
		<comments>https://suportesmidiaticos.eca.usp.br/?p=3093#comments</comments>
		<pubDate>Sun, 31 May 2015 07:10:22 +0000</pubDate>
		<dc:creator><![CDATA[Richard Romancini]]></dc:creator>
				<category><![CDATA[Artigo]]></category>
		<category><![CDATA[artigo]]></category>

		<guid isPermaLink="false">http://143.107.95.102/prof/richardromancini/suportesmidiaticos/public_html/wordpress/?p=3093</guid>
		<description><![CDATA[O &#8220;artigo de opinião&#8221;, na essência, pertence ao gênero textual argumentativo. Embora o trabalho deste tipo solicitado como exercício de curso tenha principalmente o sentido de perceber a capacidade do]]></description>
				<content:encoded><![CDATA[<p style="text-align: left;">O &#8220;artigo de opinião&#8221;, na essência, pertence ao gênero textual argumentativo. Embora o trabalho deste tipo solicitado como exercício de curso tenha principalmente o sentido de perceber a capacidade do estudante relacionar conteúdos da matéria, aproveitá-los numa reflexão que diga respeito à atualidade, vale a pena dar algumas recomendações e sugestões quanto à forma.</p>
<p style="text-align: left;">Quando pensando em termos mais jornalísticos, o &#8220;artigo de opinião&#8221; exige um <strong>gancho</strong>, isto é, uma ancoragem na atualidade ou contexto conhecido pelo leitor que dê justificativa à leitura e ao próprio texto. O gancho pode envolver uma efeméride, um evento recente ou que pode ocorrer em breve, bem como, ainda, algo que se relacione, mesmo que de maneira menos explícita, com o tema do artigo. O <strong>tema</strong>, por sua vez, é o assunto principal, aquilo que se quer discutir. Vejamos esses dois exemplos:<span id="more-3093"></span></p>
<ul style="text-align: left;">
<li>Autor de trabalhos complexos no campo da matemática e da economia, John Nash, que morreu há pouco num acidente de carro, ficou conhecido por milhões graças ao filme <em>Uma mente brilhante</em>. É um exemplo que faz pensar na capacidade da mídia divulgar e popularizar o conhecimento. Mas essa divulgação é útil? É bem feita? &#8230;</li>
<li>&#8220;No filme &#8216;Todos os Homens do Presidente&#8217; (1976), Bob Woodward e Carl Bernstein são os repórteres do &#8216;Washington Post&#8217; que expuseram a conspiração (real) armada pela Casa Branca em 1972 &#8211;o famoso Caso Watergate&#8211; para sufocar o Partido Democrata. Os repórteres tinham um informante secreto, que chamavam de &#8216;Garganta Profunda&#8217;. Quando se viam embatucados, sem saber como continuar, &#8216;Garganta Profunda&#8217; aconselhava: &#8216;Sigam o dinheiro&#8217;.&#8221; &#8230; (Ruy Castro, Sigam o dinheiro, <strong>Folha de S.Paulo</strong>, 30/05/2015).</li>
</ul>
<p style="text-align: left;">No primeiro caso, John Nash é um gancho-pretexto para chegar ao tema que será discutido no texto: o papel da mídia na divulgação do conhecimento. No segundo, de maneira imaginativa, o autor fala de um filme e uma situação conhecida provavelmente por muitos leitores, usando-os como gancho para, então, chegar (na continuidade do texto) a um assunto que diz respeito à atualidade: a corrupção na FIFA.</p>
<p style="text-align: left;">É claro que o gancho está na abertura ou introdução do artigo, e tem como sequência o desenvolvimento de argumentos que constroem a discussão proposta por um autor. A apresentação abaixo mostra estratégias de elaboração de argumentos, falando também de maneira mais geral sobre a estrutura de um artigo de opinião.</p>
<p><iframe style="border: 1px solid #CCC; border-width: 1px; margin-bottom: 5px; max-width: 100%;" src="//pt.slideshare.net/slideshow/embed_code/key/KUUj7j9EYByk6F" width="840" height="680" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" allowfullscreen="allowfullscreen"> </iframe></p>
]]></content:encoded>
			<wfw:commentRss>https://suportesmidiaticos.eca.usp.br/?feed=rss2&#038;p=3093</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Precisamos falar sobre “trigger warning”</title>
		<link>https://suportesmidiaticos.eca.usp.br/?p=3081</link>
		<comments>https://suportesmidiaticos.eca.usp.br/?p=3081#comments</comments>
		<pubDate>Thu, 28 May 2015 02:00:03 +0000</pubDate>
		<dc:creator><![CDATA[Richard Romancini]]></dc:creator>
				<category><![CDATA[Artigo]]></category>
		<category><![CDATA[Material Didático]]></category>

		<guid isPermaLink="false">http://143.107.95.102/prof/richardromancini/suportesmidiaticos/public_html/wordpress/?p=3081</guid>
		<description><![CDATA[O chamado trigger warning tem provocado bastante debate na educação superior dos Estados Unidos. Não é surpresa, a ideia é polêmica e sujeita a controvérsias. Para alguns críticos, trata-se de]]></description>
				<content:encoded><![CDATA[<p style="text-align: left;">O chamado <em>trigger warning</em> tem provocado bastante debate na educação superior dos Estados Unidos. Não é surpresa, a ideia é polêmica e sujeita a controvérsias. Para alguns críticos, trata-se de uma nova roupagem do “politicamente correto” nos campi. Para os defensores, é somente uma atualização das práticas pedagógicas ao tempo atual. Embora o <em>trigger warning</em> seja um fenômeno típico dos EUA e do contexto anglo-saxão (como a ferramenta que permite verificar buscas feitas no Google deixa claro – <a href="http://www.google.com/trends/explore#q=trigger%20warning" target="_blank">aqui</a>), de certo modo, surge também no Brasil.</p>
<p style="text-align: left;">Mas, afinal, o que é <em>trigger warning</em>? A expressão é de difícil tradução. Em inglês, “trigger” significa, com valor de substantivo, o “gatilho” de uma arma, e como verbo a causa de algo, o que desencadeia alguma coisa. Por sua vez, “warning” remete às palavras “aviso”, “alarme”, “advertência” e “precaução”. Uma boa definição descritiva para o termo é dada por Jeet Heer (num <a href="http://www.newrepublic.com/article/121866/history-ptsd-and-evolution-trigger-warnings" target="_blank">artigo</a> para a revista <strong>New Republic</strong>): “rótulos de advertência nos currículos e planos de curso com alerta aos estudantes de que o material pode evocar memórias dolorosas”.<span id="more-3081"></span></p>
<p style="text-align: left;">A ideia deriva de práticas adotadas em fóruns feministas na internet, sites e blogs, tendo obtido maior alcance por meio da mídia social. A revista <strong>Slate</strong> declarou que 2013 foi o “<a href="http://www.slate.com/blogs/xx_factor/2013/12/30/trigger_warnings_from_the_feminist_blogosphere_to_shonda_rhimes_in_2013.html" target="_blank">ano do <em>trigger warning</em></a>”. Então, falava-se principalmente sobre o tema em relação aos conteúdos da internet e na TV, mas em pouco tempo chegou à educação. De maneira irônica, Conor Friedersdorf (<a href="http://www.theatlantic.com/education/archive/2014/05/what-trigger-warning-activists-and-critics-can-learn-from-hbo/371137/" target="_blank">aqui</a>) indaga sobre o que as faculdades podem aprender com o canal HBO sobre o assunto.</p>
<p style="text-align: left;">O <em>trigger warning</em> é demandado por estudantes pertencentes a grupos vulneráveis ou que sofreram algum tipo de violência (abuso sexual, racismo, etc.), bem como pelos que acolhem a ideia de inserir alertas no material didático (e currículos) sobre o risco da exposição a algum conteúdo. Defende-se que a universidade deve ser um “ambiente seguro”.</p>
<p style="text-align: left;">Dois casos são bastante emblemáticos. No primeiro, em fevereiro do ano passado, alguns estudantes do Wellesley College protestaram contra a estátua realista de um homem vestindo apenas roupa de baixo. Eles iniciaram uma <a href="https://www.change.org/petitions/president-h-kim-bottomly-remove-the-uncomfortable-and-potentially-triggering-statue-put-up-without-student-consent" target="_blank">petição no Charge.org</a> para que a escultura (que fazia parte de uma exposição) fosse removida dos arredores do museu da faculdade e colocada no prédio da instituição. Em outro caso, ocorrido em abril deste ano na Columbia University, quatro estudantes defenderam o <em>trigger warning</em>, ao relatar o caso de uma estudante que, ao ler para um curso partes da <strong>Metamorfose</strong> de Ovídio, alegou sentir-se desconfortável. A estudante tinha sido vítima de abuso sexual, e a obra em questão faz descrições deste ato. A aluna externou seu mal estar ao professor, que desconsiderou a reclamação. O artigo, publicado no jornal estudantil da universidade, significativamente intitula-se “<a href="http://columbiaspectator.com/opinion/2015/04/30/our-identities-matter-core-classrooms" target="_blank">Our identities matter in Core classrooms</a>” (Nossas identidades importam no currículo Básico das turmas).</p>
<p style="text-align: left;">É evidente que algumas situações têm um viés cômico que não escapa aos críticos da proposta. Assim, ela é vista como um preocupante sinal de infantilização estudantil – transformar o ambiente universitário e as salas de aula numa espécie de bolha pode ser negativo para os próprios alunos, já que “a vida não possui <em>trigger warnings</em>”. Ainda numa perspectiva crítica, nota-se que a adoção de políticas (por exemplo, guias de conduta, como o cogitado pelo Oberlin College) relacionadas com assunto pode prejudicar a liberdade dos estudos acadêmicos, a exposição de ideias e ser um instrumento para a intimidação de professores.</p>
<div class="citacao">O <em>trigger warning</em> é demandado por estudantes de grupos vulneráveis</div>
<p style="text-align: left;">Outra crítica é que submeter o estudante a um choque ou desconforto pode estar nos planos e intenções da ação pedagógica. A experiência universitária implica certa dose de inquietação e atenção a problemas muitas vezes brutais. O sociólogo Todd Gitlin oferece (<a href="http://tabletmag.com/jewish-news-and-politics/189543/trigger-warnings-on-campus" target="_blank">aqui</a>) um exemplo interessante, narrando quando seu professor fez a classe assistir ao filme nazista <strong>O triunfo da vontade</strong>, seguido pelo documentário sobre os campos de concentração <strong>Noite e neblina</strong>.</p>
<p style="text-align: left;">Uma compilação de aspectos questionáveis ou possivelmente negativos do <em>trigger warning</em> é feita num artigo assinado por quatro professores (<a href="https://www.insidehighered.com/views/2014/05/29/essay-faculty-members-about-why-they-will-not-use-trigger-warnings" target="_blank">aqui</a>). O texto é bastante razoável, e não desmerece, em si, a preocupação, procurando oferecer algumas alternativas a ela, como a existência de recursos de aconselhamento e grupos de apoio para estudantes que necessitem.</p>
<p style="text-align: left;">No contexto dos EUA (um país que possui muito veteranos de guerras), a discussão do tema associa-se ao TEPT – Transtorno de Estresse Pós-Traumático. Para Ashley Mackenzie (<a href="http://www.newrepublic.com/article/121866/history-ptsd-and-evolution-trigger-warnings" target="_blank">aqui</a>), a crença popular na validade deste distúrbio e a tendência a patologizar os problemas sociais explicam o surgimento do <em>trigger warning</em>.</p>
<p style="text-align: left;">A minha interpretação (sem excluir outras causas) é que a erosão da crença na política e a perda de confiança no universalismo como motor da mudança social fortalecem as iniciativas relacionadas a diferentes “identidades”, fragmentadas e diversas. Esta crise da política é vivida em todos os lugares, o que leva a crer que o debate atingirá muitos países. Há, de qualquer modo, pontos também válidos e razoáveis relacionados com a defesa do <em>trigger warning</em>, no meu entender. Pretendo abordá-los no próximo artigo, assim como a relação mais direta já existente entre o Brasil e o tema. No entanto, se o leitor refletir sobre o que leu e acionar sua memória, talvez lembre um fato.</p>
<p style="text-align: left;">Caso tenha pensado em Monteiro Lobato, acertou.</p>
<h4 style="text-align: left;">Alertas em sala de aula</h4>
<p style="text-align: left;">Pelo que foi discutido na coluna passada, e para não parecer pedante, adoto a tradução “alerta de conteúdo” para <em>trigger warning</em>. E, de fato, nos EUA, alguns preferem a expressão <em>content warning</em>, tendo em vista que <em>trigger</em> possui uma origem psicológica que pode ser enganosa em contexto não clínico.</p>
<p style="text-align: left;">No fim do texto anterior, falei de Monteiro Lobato e lembro agora que, em 2012, foi feita uma recomendação para que o livro <strong>Caçadas de Pedrinho</strong> fosse complementado por uma espécie de alerta, para que ele continuasse no Programa Nacional Biblioteca na Escola. Este aviso tomaria a forma de contextualização feita pelos professores que fossem utilizar a obra, bem como a inserção de nota explicativa em futuras edições.</p>
<p style="text-align: left;">O caso remonta a 2010, quando o Conselho Nacional de Educação (CNE) determinou que o livro não fosse mais distribuído em escolas brasileiras, em função de conteúdo racista. A inclusão de nota na edição não prosperou, sendo que no fim de 2014 houve <a href="http://www.migalhas.com.br/Quentes/17,MI213205,21048-Negado+pedido+de+inclusao+de+nota+explicativa+em+livro+de+Monteiro" target="_blank">notícia</a> sobre o não acolhimento da solicitação. Porém, tudo indica que o caso terá continuidade e novos desdobramentos.</p>
<p style="text-align: left;">Não possuo conhecimento suficiente para julgar o mérito da avaliação sobre o suposto racismo de Lobato, porém creio que o governo tem o direito e o dever de não comprar e distribuir livros que possam prejudicar a formação de crianças, principalmente, provocando sofrimentos desnecessários a um grupo social qualquer. Isto, em absoluto, representa censura, pois não se trata de retirar os livros de livrarias, bibliotecas ou proibir sua leitura.</p>
<p style="text-align: left;">De qualquer modo, o que importa notar é que no Brasil também há esse tipo de preocupação, similar ao <em>trigger warning</em> dos Estados Unidos. Nesse sentido, é interessante reunir alguns argumentos dos que defendem essa prática, especificamente no caso do ensino superior. Num artigo, publicado em maio passado na <strong>New Republic</strong> (<a href="http://www.newrepublic.com/article/121820/my-students-need-trigger-warnings-and-professors-do-too" target="_blank">aqui</a>), Aaron R. Hanlon desenvolve uma série de pontos bastante ponderados. Em primeiro lugar, ele nota que, ainda que os professores estejam confortáveis com os assuntos que ensinam, estando cientes dos desafios emocionais e intelectuais que estes possuem, é necessário considerar que os estudantes são pessoas com histórias e preocupações reais. É claro que essa potencial diversidade de histórias de vida é uma dificuldade para os alertas de conteúdo, porém, o terreno do bom senso pode ser um conselheiro válido sobre o assunto.</p>
<p style="text-align: left;">Hanlon, que é professor de Literatura, defende que o alerta não significa um ato de censura ou um fechamento de sentido para as interpretações, tendo em vista que ele pode ser o ponto inicial de uma discussão que desafie os pontos de vistas dos próprios estudantes. Naturalmente, isso é mais viável com pessoas com mais maturidade, como os universitários.</p>
<p style="text-align: left;">Um aspecto adicional observado por ele é que levar a sério as preocupações dos estudantes não significa mimá-los, mas ter um maior cuidado com o modo como eles respondem a materiais desafiadores, o que é simplesmente um princípio adequado para uma pedagogia responsável.</p>
<p style="text-align: left;">Outro professor de uma disciplina na qual os alertas parecem fazer mais sentido (História), Angus Johnston, escreveu um ensaio no site <strong>Inside Higher Ed</strong> (<a href="https://www.insidehighered.com/views/2014/05/29/essay-why-professor-adding-trigger-warning-his-syllabus" target="_blank">aqui</a>) em que explica como pretende utilizar o alerta de conteúdo em seu curso (dá um exemplo prático de redação do mesmo), bem como por quê. Sua justificativa relaciona-se à crença que os alertas têm um alcance que vai além dos estudantes com algum tipo de trauma. Uma vez que uma sala de aula é um espaço interativo, o professor tem a obrigação de incentivar a participação, afastando elementos que a prejudiquem. Conteúdos inesperados e possivelmente constrangedores, por isso, podem merecer alertas e contextualizações específicas. No limite, Johnston defende que um aluno possa deixar de ver algo ou acompanhar determinada discussão, ausentando-se da classe. Ele também oferece oportunidade do aluno discutir desconfortos pessoais e críticas ao conteúdo, na própria aula, ou extraclasse.</p>
<p style="text-align: left;">Em suma, trata-se de uma posição de bastante respeito ao estudante, e preocupação com essa situação especial de interação representada por uma aula.</p>
<p style="text-align: left;">Voltando ao Brasil, num caso ocorrido em abril deste ano, parece ter faltado essa sensibilidade. Conforme noticiado na imprensa (<a href="http://g1.globo.com/educacao/noticia/2015/04/aula-na-usp-sobre-racismo-e-qi-vira-alvo-de-protesto-de-estudantes-negros.html" target="_blank">aqui</a>), um professor inglês que ministra uma disciplina chamada English for Science (Inglês para a Ciência), no Instituto de Biologia da USP, utilizou um texto, para dizer o mínimo, polêmico a propósito da relação entre raças e inteligência. A aula foi “ocupada” por estudantes negros que acusaram o professor de racismo. Ele negou tal ímpeto, notando que seu desejo era justamente que o texto fosse comentado e discutido, em inglês, para a prática dos alunos da disciplina.</p>
<p style="text-align: left;">O ponto que merece atenção aqui é que, provavelmente, um alerta de conteúdo numa situação como essa poderia ter evitado o confronto e o possível mal entendido, assim como evidenciar, desde o início, o respeito do docente a grupos vulneráveis.</p>
]]></content:encoded>
			<wfw:commentRss>https://suportesmidiaticos.eca.usp.br/?feed=rss2&#038;p=3081</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Criação de infográficos</title>
		<link>https://suportesmidiaticos.eca.usp.br/?p=3060</link>
		<comments>https://suportesmidiaticos.eca.usp.br/?p=3060#comments</comments>
		<pubDate>Sat, 02 May 2015 03:38:52 +0000</pubDate>
		<dc:creator><![CDATA[Richard Romancini]]></dc:creator>
				<category><![CDATA[Artigo]]></category>
		<category><![CDATA[Infográfico]]></category>

		<guid isPermaLink="false">http://143.107.95.102/prof/richardromancini/suportesmidiaticos/public_html/wordpress/?p=3060</guid>
		<description><![CDATA[Os infográficos têm se tornado uma forma de comunicação bastante popular em materiais que envolvem a educação, tanto impressos, quanto na web (inclusive em cursos no formato EAD). As características]]></description>
				<content:encoded><![CDATA[<p><img class="  wp-image-3063 img-responsive aligncenter" src="http://143.107.95.102/prof/richardromancini/suportesmidiaticos/public_html/wordpress/wp-content/uploads/2015/05/cididig.gif" alt="cididig" width="906" height="521" /><br />
Os infográficos têm se tornado uma forma de comunicação bastante popular em materiais que envolvem a educação, tanto impressos, quanto na web (inclusive em cursos no formato EAD). As características e os tipos de infográficos são bastante variados, no entanto, possuem a ideia geral de sintetizar informações, apresentadas graficamente. Alguns defendem que os conteúdos que utilizam imagens são mais facilmente retidos pelos receptores &#8211; caso deste interessante <a href="http://neomam.com/interactive/13reasons/?goback=.gde_4127955_member_242745264" target="_blank">infográfico em HTML5</a>. Aliás, uma tendência crescente é a feitura de infográficos com características de multimídia ou interativas, neste caso, demandando maior participação do leitor. Dentro da variedade de possíveis infográficos, é possível destacar certos tipos:</p>
<ul>
<li><strong>Linha do tempo</strong>, indicando a evolução cronológica relacionada com eventos, produtos, etc. (ex.: <a href="http://www.bitrebels.com/design/the-evolution-of-graphic-design-infographic/" target="_blank"><strong>The Darwinian Evolution of Graphic Design</strong></a>, <a href="https://www.youtube.com/watch?v=LLCF7vPanrY" target="_blank"><strong>A Time-Lapse Map of Every Nuclear Explosion Since 1945</strong></a> &#8211; infográfico em vídeo);</li>
<li><strong>Comparativo</strong>, contrastando características de um conceito, objeto, etc. (ex.: <strong><a href="http://netdna.webdesignerdepot.com/uploads/2013/03/serif-vs-sans-serif.jpg" target="_blank">Serif vs. Sans &#8211; The Final Battle</a></strong>);</li>
<li><strong>Descritivo/explicativo</strong>, arrolando aspectos que caracterizam algo, explicitando seu significado e/ou mostrando como fazer alguma coisa (ex.: <a href="http://www.educatorstechnology.com/2013/07/a-must-see-graphic-on-creative-commons.html" target="_blank"><strong>What means Creative Commons</strong></a>, <strong><a href="http://www.weareteachers.com/blogs/post/2014/08/11/the-flipped-classroom-infographic" target="_blank">Is a Flipped Classroom Right for You?</a></strong>);</li>
<li><strong>Mapa mental</strong>, assemelhado a este tipo de representação, pode indicar dimensões de um conceito ou de alguma coisa, bem como explicitar as relações existentes entre blocos informativos e ideias (ex.: <a href="http://mindmappingsoftwareblog.com/wp-content/uploads/2013/07/advanced-mind-map-infographic.png" target="_blank"><strong>Best practices for creating advanced mind maps</strong></a>, <a href="https://thumbnails-visually.netdna-ssl.com/JoomlatoWordPressMigrationMindMapping_533042d223fc5_w1500.jpg" target="_blank"><strong>Joomla to WordPress Migration</strong></a>);</li>
<li><strong>Informativo</strong>, compila informações, inclusive estatísticas, sobre alguma coisa (ex.: <a href="http://www.go-gulf.com/blog/60-seconds/" target="_blank"><strong>Things that Happen on Internet Every Sixty Seconds</strong></a>).</li>
</ul>
<p style="text-align: left; margin-bottom: -10px">Entre os serviços online de criação de infográficos estão: <a href="http://www.easel.ly/" target="_blank">Easelly</a>, <a href="http://piktochart.com/v3/" target="_blank">Piktochart</a>, <a href="http://visual.ly/" target="_blank">Visually</a> e <a href="https://www.thinglink.com" target="_blank">Thinglink</a> (permite a adição de multimídia nos trabalhos).</p>
]]></content:encoded>
			<wfw:commentRss>https://suportesmidiaticos.eca.usp.br/?feed=rss2&#038;p=3060</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Criação de Nuvem de Palavras</title>
		<link>https://suportesmidiaticos.eca.usp.br/?p=3051</link>
		<comments>https://suportesmidiaticos.eca.usp.br/?p=3051#comments</comments>
		<pubDate>Sat, 02 May 2015 02:51:18 +0000</pubDate>
		<dc:creator><![CDATA[Richard Romancini]]></dc:creator>
				<category><![CDATA[Artigo]]></category>
		<category><![CDATA[Wordle]]></category>

		<guid isPermaLink="false">http://143.107.95.102/prof/richardromancini/suportesmidiaticos/public_html/wordpress/?p=3051</guid>
		<description><![CDATA[A criação de uma nuvem de palavras (ou tags) pode ser particularmente útil quando se quer ilustrar um texto, mas não se tem imagens. Com um pouco de criatividade, as]]></description>
				<content:encoded><![CDATA[<p><a href="http://143.107.95.102/prof/richardromancini/suportesmidiaticos/public_html/wordpress/wp-content/uploads/2015/05/wordle_da.gif"><img class=" size-medium wp-image-3052 img-responsive aligncenter" src="http://143.107.95.102/prof/richardromancini/suportesmidiaticos/public_html/wordpress/wp-content/uploads/2015/05/wordle_da.gif" alt="wordle_da" /></a></p>
<p style="text-align: left; margin-top: -10px">A criação de uma nuvem de palavras (ou tags) pode ser particularmente útil quando se quer ilustrar um texto, mas não se tem imagens. Com um pouco de criatividade, as nuvens de palavras podem ser utilizadas para elaborar ilustrações. Provavelmente o site mais popular para criar nuvens de palavras é o <a href="http://www.wordle.net/" target="_blank">Wordle</a>, sendo que esta ação é bastante simples e o Wordle permite fazer alterações na nuvem criada. Este elemento pode ser também utilizado como ferramenta pedagógica, abaixo, uma apresentação (em inglês) com sugestões para tanto.</p>
<p><iframe src="https://docs.google.com/presentation/d/1JE6UHEq15_J5vICUlHRGpzVrL_AUOOinF38QRCCrH2M/embed?start=false&amp;loop=false&amp;delayms=3000" width="1067" height="700" frameborder="0" allowfullscreen="allowfullscreen"></iframe></p>
]]></content:encoded>
			<wfw:commentRss>https://suportesmidiaticos.eca.usp.br/?feed=rss2&#038;p=3051</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Criação de Flyer</title>
		<link>https://suportesmidiaticos.eca.usp.br/?p=3043</link>
		<comments>https://suportesmidiaticos.eca.usp.br/?p=3043#comments</comments>
		<pubDate>Sat, 02 May 2015 01:52:38 +0000</pubDate>
		<dc:creator><![CDATA[Richard Romancini]]></dc:creator>
				<category><![CDATA[Artigo]]></category>
		<category><![CDATA[flyer]]></category>

		<guid isPermaLink="false">http://143.107.95.102/prof/richardromancini/suportesmidiaticos/public_html/wordpress/?p=3043</guid>
		<description><![CDATA[É possível criar flyers, que sejam incorporados num site, como acima, em serviços como o Smore. Outra opção quanto a este tipo de elemento é a sua inserção como imagem]]></description>
				<content:encoded><![CDATA[<p><iframe style="min-width: 320px; border: none;" src="https://www.smore.com/k03wh-recursos-web?embed=1" width="100%" height="600" frameborder="0" scrolling="auto"></iframe></div>
<div style="margin-left: 100px; margin-right: 100px; text-align: left; margin-top: 25px">É possível criar flyers, que sejam incorporados num site, como acima, em serviços como o <a href="https://www.smore.com/" target="_blank">Smore</a>. Outra opção quanto a este tipo de elemento é a sua inserção como imagem num espaço digital, conforme é mostrado depois do &#8220;leia mais&#8221;.<span id="more-3043"></span></div>
<div style="margin-left: 100px; margin-right: 100px; text-align: left;"><a href="http://143.107.95.102/prof/richardromancini/suportesmidiaticos/public_html/wordpress/wp-content/uploads/2015/05/recursos_web.gif"><img class=" size-medium wp-image-3046 img-responsive aligncenter" src="http://143.107.95.102/prof/richardromancini/suportesmidiaticos/public_html/wordpress/wp-content/uploads/2015/05/recursos_web.gif" alt="recursos_web" /></a></p>
]]></content:encoded>
			<wfw:commentRss>https://suportesmidiaticos.eca.usp.br/?feed=rss2&#038;p=3043</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Plugin WP: linha do tempo</title>
		<link>https://suportesmidiaticos.eca.usp.br/?p=3070</link>
		<comments>https://suportesmidiaticos.eca.usp.br/?p=3070#comments</comments>
		<pubDate>Fri, 01 May 2015 23:18:03 +0000</pubDate>
		<dc:creator><![CDATA[Richard Romancini]]></dc:creator>
				<category><![CDATA[Artigo]]></category>
		<category><![CDATA[Linha do tempo]]></category>
		<category><![CDATA[Plugin]]></category>
		<category><![CDATA[WP]]></category>

		<guid isPermaLink="false">http://143.107.95.102/prof/richardromancini/suportesmidiaticos/public_html/wordpress/?p=3070</guid>
		<description><![CDATA[Linhas do tempo são uma forma interessante de mostrar informação, ao longo do tempo, sobre determinado assunto. O site Timeline JS ajuda a produzir esse elemento, como no exemplo acima.]]></description>
				<content:encoded><![CDATA[<p><iframe src='http://cdn.knightlab.com/libs/timeline/latest/embed/index.html?source=0ArWhdAdvQcB3dFJYY2xNcEJXeEpxNjBQOFdERUQtbXc&#038;font=Bevan-PotanoSans&#038;maptype=toner&#038;lang=en&#038;height=650' width='100%' height='650' frameborder='0'></iframe></p>
<p style="text-align: left; margin-top: -10px;">Linhas do tempo são uma forma interessante de mostrar informação, ao longo do tempo, sobre determinado assunto. O site <a href="http://timeline.knightlab.com/" target="_blank">Timeline JS</a> ajuda a produzir esse elemento, como no exemplo acima. É possível (mas não indispensável) também instalar um plugin (<a href="https://wordpress.org/plugins/knight-lab-timelinejs/" target="_blank">aqui</a>) para a inserção da linha do tempo no WP.</p>
]]></content:encoded>
			<wfw:commentRss>https://suportesmidiaticos.eca.usp.br/?feed=rss2&#038;p=3070</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Plugin WP: legenda em vídeo</title>
		<link>https://suportesmidiaticos.eca.usp.br/?p=3035</link>
		<comments>https://suportesmidiaticos.eca.usp.br/?p=3035#comments</comments>
		<pubDate>Fri, 01 May 2015 06:57:56 +0000</pubDate>
		<dc:creator><![CDATA[Richard Romancini]]></dc:creator>
				<category><![CDATA[Artigo]]></category>
		<category><![CDATA[legenda]]></category>
		<category><![CDATA[Plugin]]></category>
		<category><![CDATA[Vídeo]]></category>

		<guid isPermaLink="false">http://143.107.95.102/prof/richardromancini/suportesmidiaticos/public_html/wordpress/?p=3035</guid>
		<description><![CDATA[Um serviço bastante útil para legendar vídeos é o Amara. É necessário criar uma conta nele para começar a trabalhar em vídeos que estejam em repositórios como o YouTube. É]]></description>
				<content:encoded><![CDATA[<div style="margin-left: 100px; margin-right: 100px; text-align: left;"><script src="http://amara.org/embedder-iframe" type="text/javascript"></script></p>
<div class="amara-embed" data-height="540px" data-width="900px" data-url="http://www.youtube.com/watch?v=4tpLIlxaPMM"></div>
</div>
<p></br></p>
<p style="text-align: left; margin-top: -25px">Um serviço bastante útil para legendar vídeos é o <a href="http://amara.org/" target="_blank">Amara</a>. É necessário criar uma conta nele para começar a trabalhar em vídeos que estejam em repositórios como o YouTube. É possível inserir o vídeo com legenda (a partir das opções do tocador) tanto copiando o código diretamente do Amara quanto utilizando um plugin (<a href="https://wordpress.org/plugins/wp-amara-shortcode/other_notes/" target="_blank">aqui</a>) que permite a adição de vídeos deste tipo, pela inserção de um código simplificado. Pode ser uma preocupação legendar um vídeo não só por razões de compreensão da língua, mas também por acessibilidade (pessoas com deficiência).</p>
]]></content:encoded>
			<wfw:commentRss>https://suportesmidiaticos.eca.usp.br/?feed=rss2&#038;p=3035</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Plugin WP: galeria de vídeo e inserção de áudio</title>
		<link>https://suportesmidiaticos.eca.usp.br/?p=3020</link>
		<comments>https://suportesmidiaticos.eca.usp.br/?p=3020#comments</comments>
		<pubDate>Thu, 30 Apr 2015 22:11:56 +0000</pubDate>
		<dc:creator><![CDATA[Richard Romancini]]></dc:creator>
				<category><![CDATA[Artigo]]></category>
		<category><![CDATA[áudio]]></category>
		<category><![CDATA[Galeria]]></category>
		<category><![CDATA[Plugin]]></category>
		<category><![CDATA[Vídeo]]></category>

		<guid isPermaLink="false">http://143.107.95.102/prof/richardromancini/suportesmidiaticos/public_html/wordpress/?p=3020</guid>
		<description><![CDATA[Existem plugins que se associam a sites de criação digital em áreas externas ao WP, como o Cincopa. Este serviço permite criar galerias de imagens e vídeos, seleções de podcasts,]]></description>
				<content:encoded><![CDATA[<p><img style="border:0;" src="http://www.cincopa.com/media-platform/api/thumb.aspx?fid=+AwGAmgc5tU5e&size=large" /></p>
<p style="text-align: left; margin-top: -35px; margin-bottom: -10px">Existem plugins que se associam a sites de criação digital em áreas externas ao WP, como o <a href="http://www.cincopa.com" target="_blank">Cincopa</a>. Este serviço permite criar galerias de imagens e vídeos, seleções de podcasts, tocadores de áudio, etc. Então, para utilizar o plugin no WP é necessário, tanto baixar este complemento (<a href="https://wordpress.org/plugins/video-playlist-and-gallery-plugin/" target="_blank">aqui</a>) e adicioná-lo ao CMS, quanto fazer cadastro no site. O Cincopa tem a característica de não aceitar incorporações (embed), ou seja, o conteúdo (fotos, vídeos, etc.), organizado em algum padrão (galeria, slideshow, etc.), deve ser enviado ao site. Neste sentido, vale a pena notar que é possível baixar vídeos do YouTube e Vimeo (acima), por meio de programas ou serviços online, como o <a href="http://savevideo.me/pt/" target="_blank">Savevideo</a> e o <a href="http://www.baixartube.com.br/" target="_blank">Baixartube</a>.</p>
<div style="margin: 15px 100px 15px 100px; text-align: left;"><img style="border:0;" src="http://www.cincopa.com/media-platform/api/thumb.aspx?fid=+AMGAggs0tQzx&size=large" /></div>
<p style="text-align: left; margin-top: -85px;">O Cincopa também cria tocadores de áudio, como no exemplo acima. Como se disse, o arquivo teve que ser enviado ao site. Vale notar, sobre o assunto áudio na web, que formato mp3 é praticamente padrão. Isto ocorre pois ele oferece boa compactação, garantindo tamanhos razoáveis, além de ser lido na maioria dos tocadores. Existem sites que fazem a conversão gratuita de arquivos (de um formato para outro) como o <a href="http://www.zamzar.com" target="_blank">Zamzar</a>.</p>
]]></content:encoded>
			<wfw:commentRss>https://suportesmidiaticos.eca.usp.br/?feed=rss2&#038;p=3020</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
