<?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>Vinicius Braga &#187; Tecnologia</title>
	<atom:link href="http://viniciusbraga.com/index/tecnologia/feed" rel="self" type="application/rss+xml" />
	<link>http://viniciusbraga.com</link>
	<description>Delírio e Distopia</description>
	<lastBuildDate>Sun, 02 May 2010 11:52:10 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.4</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Solução do Erro do Instalador do Imposto de Renda 2010 no MacOS X com Java 1.6</title>
		<link>http://viniciusbraga.com/tecnologia/apple/solucao-do-erro-do-instalador-do-imposto-de-renda-2010-no-macos-x-com-java-1-6</link>
		<comments>http://viniciusbraga.com/tecnologia/apple/solucao-do-erro-do-instalador-do-imposto-de-renda-2010-no-macos-x-com-java-1-6#comments</comments>
		<pubDate>Mon, 29 Mar 2010 14:14:29 +0000</pubDate>
		<dc:creator>Vinicius Braga</dc:creator>
				<category><![CDATA[Apple | Mac OS X]]></category>

		<guid isPermaLink="false">http://viniciusbraga.com/?p=420</guid>
		<description><![CDATA[	O Imposto de Renda 2010 usa o Java Virtual Machine 1.6 e seu MacOS X 10.5.8 já deve ter esta versão instalada, contudo, ele não reconhece. Este tutorial ajuda o instalador reconhecer a versão do seu Java Virtual Machine.

	Por quê o instalador da Receita Federal não reconhece a versão já instalada na sua máquina?

	R. Existem [...]]]></description>
			<content:encoded><![CDATA[	<p>O Imposto de Renda 2010 usa o Java Virtual Machine 1.6 e seu MacOS X 10.5.8 já deve ter esta versão instalada, contudo, ele não reconhece. Este tutorial ajuda o instalador reconhecer a versão do seu Java Virtual Machine.<span id="more-420"></span></p>

	<p><strong>Por quê o instalador da Receita Federal não reconhece a versão já instalada na sua máquina?</strong></p>

	<p>R. Existem na sua máquina diferentes versões do Java rodando ao mesmo tempo, e por prioridade, uma versão mais antiga deve atrapalhar o reconhecimento da versão mais nova. Este tutorial é para modificar a prioridade do sistema, e utilizar a versão mais nova.</p>

	<p>Como se faz isto no MacOS X:</p>

	<ol>
		<li>Encontre  o programa <strong>Java Preferences</strong> com o sistema de busca do MacOS X<br />
<img src="http://viniciusbraga.com/wp-content/uploads/2010/03/irfp-2010-java-bug-01.png" alt="Usando o Spotligth (busca) no mac OS X" title="irfp-2010-java-bug-01" width="431" height="160" class="size-full wp-image-421" /></li>
		<li>Abra o programa, que se apresentará com esta tela, para usuários do MacOS X 10.5.8<br />
<img src="http://viniciusbraga.com/wp-content/uploads/2010/03/irfp-2010-java-bug-02.png" alt="Janela do Java Preferences" title="irfp-2010-java-bug-02" width="670" height="513" class="size-full wp-image-422" /></li>
		<li>Mova o item da lista <strong>Java SE 6</strong> para o Topo da Lista (carregar e largar)<br />
<img src="http://viniciusbraga.com/wp-content/uploads/2010/03/irfp-2010-java-bug-03.png" alt="Mudando a posição do Java SE 6" title="irfp-2010-java-bug-03" width="669" height="513" class="size-full wp-image-423" /></li>
		<li>Feche o programa e rode o instalador da Receita Federal.</li>
	</ol>

	<p>É isso pessoal, qualquer dúvida deixe no comentário.</p>

	<p><style type="text/css" media="screen">
    .wp-image-421, .wp-image-422, .wp-image-423 { margin: 10px 0;}<br />
</style></p>]]></content:encoded>
			<wfw:commentRss>http://viniciusbraga.com/tecnologia/apple/solucao-do-erro-do-instalador-do-imposto-de-renda-2010-no-macos-x-com-java-1-6/feed</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>WordPress &#8211; Dificuldades de fazer um site espelho</title>
		<link>http://viniciusbraga.com/tecnologia/wordpress/wordpress-dificuldades-de-fazer-um-site-espelho</link>
		<comments>http://viniciusbraga.com/tecnologia/wordpress/wordpress-dificuldades-de-fazer-um-site-espelho#comments</comments>
		<pubDate>Tue, 23 Mar 2010 13:48:58 +0000</pubDate>
		<dc:creator>Vinicius Braga</dc:creator>
				<category><![CDATA[WordPress]]></category>

		<guid isPermaLink="false">http://viniciusbraga.com/?p=419</guid>
		<description><![CDATA[	Depois de várias tentativas de exportação e importação utilizando a ferramenta interna do WordPress, desisti de fazer um site espelho em meu computador usando esta ferramenta da Administração.

	A solução para isto: 

	
		Utilizei o PhpMyAdmin do meu servidor online,
		exportei todas as tabelas,
		Abri o arquivo salvo no meu computador e
		fiz uma modificação no arquivo SQL, trocando &#8220;http://viniciusbraga.com&#8221; [...]]]></description>
			<content:encoded><![CDATA[	<p>Depois de várias tentativas de exportação e importação utilizando a ferramenta interna do WordPress, desisti de fazer um site espelho em meu computador usando esta ferramenta da Administração.<span id="more-419"></span></p>

	<p>A solução para isto: </p>

	<ol>
		<li>Utilizei o PhpMyAdmin do meu servidor online,</li>
		<li>exportei todas as tabelas,</li>
		<li>Abri o arquivo salvo no meu computador e</li>
		<li>fiz uma modificação no arquivo <span class="caps">SQL</span>, trocando &#8220;http://viniciusbraga.com&#8221; para a <span class="caps">URL</span> do domínio do meu servidor interno.</li>
		<li>Depois desta modificação no arquivo, salvei e fiz uma importação no meu Banco de Dados.</li>
	</ol>

	<p>Pronto, com isto eu tenho os mesmos ID correspondentes das categorias, fazendo funcionar o <span class="caps">TEMPLATE</span> do site online no meu computador.</p>

	<p>Quer saber mais sobre isto? Deixe um comentário com a sua pergunta.</p>]]></content:encoded>
			<wfw:commentRss>http://viniciusbraga.com/tecnologia/wordpress/wordpress-dificuldades-de-fazer-um-site-espelho/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Loop de páginas subordinadas</title>
		<link>http://viniciusbraga.com/tecnologia/wordpress/loop-de-paginas-subordinadas</link>
		<comments>http://viniciusbraga.com/tecnologia/wordpress/loop-de-paginas-subordinadas#comments</comments>
		<pubDate>Mon, 07 Sep 2009 14:43:41 +0000</pubDate>
		<dc:creator>Vinicius Braga</dc:creator>
				<category><![CDATA[WordPress]]></category>

		<guid isPermaLink="false">http://viniciusbraga.com/?p=412</guid>
		<description><![CDATA[	Loop do WordPress de listagens de páginas subordinadas a um página com ID 4.

&#60;?php $my_query = new WP_Query('post_type=page&#38;post_parent=4'); ?&#62;
&#60;?php  while ($my_query-&#62;have_posts()) : $my_query-&#62;the_post(); ?&#62;
  &#60;div class="post" id="post-&#60;?php the_ID(); ?&#62;"&#62;
    &#60;h2&#62;&#60;a href="&#60;?php the_permalink() ?&#62;" rel="bookmark" title="Link para &#60;?php the_title_attribute('echo=1'); ?&#62;"&#62;&#60;?php the_title(); ?&#62;&#60;/a&#62;&#60;/h2&#62;
    &#60;div class="entry"&#62;
     [...]]]></description>
			<content:encoded><![CDATA[	<p>Loop do WordPress de listagens de páginas subordinadas a um página com ID 4.</p>

<pre><code>&lt;?php $my_query = new WP_Query('post_type=page&amp;post_parent=4'); ?&gt;
&lt;?php  while ($my_query-&gt;have_posts()) : $my_query-&gt;the_post(); ?&gt;
  &lt;div class="post" id="post-&lt;?php the_ID(); ?&gt;"&gt;
    &lt;h2&gt;&lt;a href="&lt;?php the_permalink() ?&gt;" rel="bookmark" title="Link para &lt;?php the_title_attribute('echo=1'); ?&gt;"&gt;&lt;?php the_title(); ?&gt;&lt;/a&gt;&lt;/h2&gt;
    &lt;div class="entry"&gt;
      &lt;?php the_content('Saiba mais...'); ?&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;?php edit_post_link( 'Edite','&lt;p class="editThis"&gt;', '&lt;/p&gt;'); ?&gt;
&lt;?php endwhile; ?&gt;
</code></pre>]]></content:encoded>
			<wfw:commentRss>http://viniciusbraga.com/tecnologia/wordpress/loop-de-paginas-subordinadas/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>jQuery: O Pequeno Notável</title>
		<link>http://viniciusbraga.com/tecnologia/wordpress/jquery-o-pequeno-notavel</link>
		<comments>http://viniciusbraga.com/tecnologia/wordpress/jquery-o-pequeno-notavel#comments</comments>
		<pubDate>Sun, 17 May 2009 15:33:06 +0000</pubDate>
		<dc:creator>Vinicius Braga</dc:creator>
				<category><![CDATA[Cultura Digital]]></category>
		<category><![CDATA[Web Style Sheets]]></category>
		<category><![CDATA[WordPress]]></category>

		<guid isPermaLink="false">http://viniciusbraga.com/?p=356</guid>
		<description><![CDATA[	Estou me rendendo ao framework de JavaScrip jQuery. 

	O jQuery [dii-qüêri] é um framework de JavaScript para fazer efeitos visuais, uso para AJAX e controle dos elementos que compõem uma página XHTML (DOM).

	Existem frameworks similares, mas uma vantagem é o seu código enxuto e ainda ser compactável. Somente por este argumento, ele já sairia na [...]]]></description>
			<content:encoded><![CDATA[	<p>Estou me rendendo ao framework de JavaScrip jQuery. <span id="more-356"></span></p>

	<p>O jQuery [dii-qüêri] é um framework de JavaScript para fazer efeitos visuais, uso para <span class="caps">AJAX</span> e controle dos elementos que compõem uma página <span class="caps">XHTML</span> (<span class="caps">DOM</span>).</p>

	<p>Existem frameworks similares, mas uma vantagem é o seu código enxuto e ainda ser compactável. Somente por este argumento, ele já sairia na frente para sites de alta performance e portais.</p>

	<p>Com relação a sua forma de utilização, ele tem uma sintaxe bem transparente para designers. Um exemplo seria como ele adiciona e retira uma Classe de <span class="caps">CSS</span> em um elemento, veja abaixo: </p>

<pre><code>&lt;p&gt;
 &lt;a href="javascript:void(0);" onclick="$(this).toggleClass('active-jquery-exemplo');"&gt;
  Click para o link ficar Branco com fundo Preto.
 &lt;/a&gt;
&lt;/p&gt;</code></pre>

	<p>Este código é o suficiente para <strong>adicionar</strong> e <strong>remover</strong> uma Classe (active-jquery-exemplo) de uma etiqueta <span class="caps">XHTML</span>. Experimente o exemplo abaixo:</p>

	<p><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><br />
<p id="jQlink"><a href="javascript:void(0);" onclick="$(this).toggleClass('active-jquery-exemplo');">Click para o link ficar Branco com fundo Preto.</a></p><br />
<style type="text/css" media="screen">#jQlink a.active-jquery-exemplo { color: white; background: black; }</style></p>

	<p>Isso simplifica a execução de alguns efeitos de interface para designers com um mínimo conhecimento de JavaScript e <span class="caps">XHTML</span>.</p>

	<p>Links Relacionados:</p>

	<p>Página Oficial do jQuery<br />
<a href="http://jquery.com/">http://jquery.com/</a></p>

	<p>Slide Show (16páginas) em inglês apresentando o básico para perder o medo inicial: <br />
<a href="http://www.slideshare.net/mobmetech/introduction-to-jquery-1439507">http://www.slideshare.net/mobmetech/introduction-to-jquery-1439507</a></p>

	<p>Você conhece um Slide Show em Português? Comente colocando o link.</p>

	<p>É isso</p>]]></content:encoded>
			<wfw:commentRss>http://viniciusbraga.com/tecnologia/wordpress/jquery-o-pequeno-notavel/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Antes de bater na Microsoft, elogiando a Apple: Pense</title>
		<link>http://viniciusbraga.com/weblog/distopia/antes-de-bater-na-microsoft-elogiando-a-apple-pense</link>
		<comments>http://viniciusbraga.com/weblog/distopia/antes-de-bater-na-microsoft-elogiando-a-apple-pense#comments</comments>
		<pubDate>Tue, 05 May 2009 15:03:50 +0000</pubDate>
		<dc:creator>Vinicius Braga</dc:creator>
				<category><![CDATA[Apple | Mac OS X]]></category>
		<category><![CDATA[Cultura Digital]]></category>
		<category><![CDATA[Distopia]]></category>

		<guid isPermaLink="false">http://viniciusbraga.com/?p=346</guid>
		<description><![CDATA[	Os defensores da Microsoft e os da Apple se degladiam sem sentido, afinal, enquanto a Microsoft gera empregos e tecnologia criando competição entre diferentes indústrias, a Apple escolhe apenas uma empresa por item de seus sistemas.

	A Microsoft neste último mês vem fazendo uma campanha nos EUA comparando um produto Apple e um produto genérico ou [...]]]></description>
			<content:encoded><![CDATA[	<p>Os defensores da Microsoft e os da Apple se degladiam sem sentido, afinal, enquanto a Microsoft gera empregos e tecnologia criando competição entre diferentes indústrias, a Apple escolhe apenas uma empresa por item de seus sistemas.<span id="more-346"></span></p>

	<p>A Microsoft neste último mês vem fazendo uma campanha nos <span class="caps">EUA</span> comparando um produto Apple e um produto genérico ou de marca rodando WindowsVista. Alega que os computadores são mais baratos e podem estar com equipamentos de última geração, como Blue-Ray e tudo mais. </p>

	<p>Possivelmente quem teve esta idéia de colocar a Microsoft contra a Apple seja um AppleUser, com o objetivo de destruir a imagem da Microsoft de vez.</p>

	<p>Porque comparar uma empresa como a Apple, que escolhe e controla os seus fornecedores de hardware, com a Microsoft, que tem uma sistema que permite funcionar junto a diferentes marcas, produtos e serviços? Não faz sentido esta comparação e no mínimo tinha que mandar embora quem teve esta idéia ridícula, pior quem aprovou isto&#8230; possivelmente a própria Microsoft </p>

	<p>Com o modelo da Apple verticalizado de fornecedores, estaríamos devolvendo pesquisas o suficiente para o avanço da tecnologia atual? Com certeza não na mesma velocidade, e com isto, a própria Apple não estaria no estágio atual de desenvolvimento, então de certa maneira, a Microsoft foi responsável pelo impulso do desenvolvimento de vários produtos e empresas, entre elas a própria Apple.</p>

	<p>Bom, só foi uma reflexão dentro da minha experiência de 20 anos usando produtos Apple, e sabendo que a cada update de um Sistema Operacional Apple, ela não se preocupa muito com a compatibilidade com os softwares compilados nas versões anteriores do seu OS. </p>

	<p>O que você pensa sobre isto?</p>

	<p>t+</p>]]></content:encoded>
			<wfw:commentRss>http://viniciusbraga.com/weblog/distopia/antes-de-bater-na-microsoft-elogiando-a-apple-pense/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Sites de Referências e Layout em CSS</title>
		<link>http://viniciusbraga.com/tecnologia/css/sites-de-referencias-e-layout-em-css</link>
		<comments>http://viniciusbraga.com/tecnologia/css/sites-de-referencias-e-layout-em-css#comments</comments>
		<pubDate>Mon, 19 May 2008 11:30:12 +0000</pubDate>
		<dc:creator>Vinicius Braga</dc:creator>
				<category><![CDATA[Web Style Sheets]]></category>

		<guid isPermaLink="false">http://viniciusbraga.com/?p=47</guid>
		<description><![CDATA[Sites e fontes de referência selecionadas para layout em CSS.]]></description>
			<content:encoded><![CDATA[	<p>Fontes de referência selecionadas sobre Cascading Style Sheets (<span class="caps">CSS</span>). Contribua deixando a sua referência nos comentários.<span id="more-47"></span></p>

	<p>10 anos atrás, possuir um site na internet era colocar links para outros sites com temas do seu interesse, e assim ajudar os seus visitantes a navegarem pelos conteúdos do cyber-espaço na época. Hoje, com a profusão de links sem sentido nas respostas dos buscadores, esta lista retorna esta antiga função dos sites, contribua!</p>

	<h3><span class="caps">CSS</span> Drive/ Compressor de <span class="caps">CSS</span>  </h3>

	<p>Neste site, o <span class="caps">CSS</span> Drive, existe um serviço gratuito de compactação do <span class="caps">CSS</span> para você. Você copia o seu <span class="caps">CSS</span> final para o formulário no site, especifica as características da compactação e ele devolve o seu <span class="caps">CSS</span> compactado. Vale lembrar, que você deve manter uma versão de edição, caso você queira modificar alguma coisa.<br />
<a href="http://www.cssdrive.com/index.php/main/csscompressor/">http://www.cssdrive.com/index.php/main/csscompressor/</a></p>

	<h3>Typetester </h3>

	<p>Compare as fontes online, seus tamanhos e cores. É um tipo de testador das especificações de tamanho de fonte e famílias mais comuns na Web. Você edita e na hora compara os resultados. Bem útil!<br />
<a href="http://typetester.maratz.com/">http://typetester.maratz.com/</a></p>

	<h3><span class="caps">CSS</span> Browser Selector</h3>

	<p>Com o <span class="caps">CSS</span> Browser Selector do Rafael Lima, cessou qualquer necessidade de criar codificações alienígenas (hackers!!) no <span class="caps">CSS</span>. Com este código de JavaScript simples e poderoso, a compatibilidade com os browsers e suas atualizações, ficam garantidas por longa data.<br />
<a href="http://rafael.adm.br/css_browser_selector/">http://rafael.adm.br/css_browser_selector/</a></p>

	<h3>Smashing Magazine</h3>

	<p>Uma revista sobre aplicação e boas práticas do uso do <span class="caps">CSS</span> e <span class="caps">XHTML</span>. A revista está em inglês mas vale o esforço.<br />
<a href="http://www.smashingmagazine.com">http://www.smashingmagazine.com/</a></p>

	<h3>Lista de <span class="caps">CSS</span> Compatível no Apple Safari</h3>

	<p>Uma lista das propriedades <span class="caps">CSS</span> compatíveis no Safari. O interessante e didático é o link em cada propriedade listada, ele remete direto para a descrição da especificação no site do W3C.<br />
<a href="http://developer.apple.com/internet/safari/safari_css.html">http://developer.apple.com/internet/safari/safari_css.html</a></p>

	<h3><span class="caps">CSS</span> 2.1 Specification</h3>

	<p>Como Neo em Matrix Reloaded, tudo e todos retornam ao Código Fonte. Em caso de dúvida, a especificação do <span class="caps">CSS</span>, no site do W3C, sempre deve ser consultada, mesmo quando não sabemos o inglês.<br />
<a href="http://www.w3.org/TR/CSS21/">http://www.w3.org/TR/CSS21/</a></p>

	<h3>CSS3 Info</h3>

	<p>É um site de informações e curiosidades sobre o CSS3. Ele é editado pelo Joost de Valk e Peter Gasston. ELe tem um sistema usando JavaScript, capaz de testar o seu browser e apresentar quais elementos do CSS3 com ele incompatível. Pessoal esforçado.<br />
<a href="http://www.css3.info/">http://www.css3.info/</a></p>

]]></content:encoded>
			<wfw:commentRss>http://viniciusbraga.com/tecnologia/css/sites-de-referencias-e-layout-em-css/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Como evitar o erro de validação do CSS com Prototype 1.6</title>
		<link>http://viniciusbraga.com/tecnologia/css/como-evitar-o-erro-de-validacao-do-css-com-prototype</link>
		<comments>http://viniciusbraga.com/tecnologia/css/como-evitar-o-erro-de-validacao-do-css-com-prototype#comments</comments>
		<pubDate>Sun, 18 May 2008 20:51:42 +0000</pubDate>
		<dc:creator>Vinicius Braga</dc:creator>
				<category><![CDATA[Web Style Sheets]]></category>

		<guid isPermaLink="false">http://viniciusbraga.com/?p=89</guid>
		<description><![CDATA[	A validação no W3C CSS Validation Service pode ser bem difícil para quem quer usar propriedades do CSS3 (em desenvolvimento) ou de browsers proprietários. Com o Prototype 1.6, você pode evitar o erro no validador para eles.

	Segue o código:

document.observe(&#39;dom:loaded&#39;, function() {
  if ( $$(&#39;.objectVideo&#39;) ) {
   $$(&#39;.objectVideo&#39;).invoke(&#39;setStyle&#39;, &#39;-moz-border-radius: 1em;&#39;);
  }
});


	Vamos explicar [...]]]></description>
			<content:encoded><![CDATA[	<p>A validação no <a href="http://jigsaw.w3.org/css-validator/">W3C <span class="caps">CSS</span> Validation Service</a> pode ser bem difícil para quem quer usar propriedades do CSS3 (em desenvolvimento) ou de browsers proprietários. Com o Prototype 1.6, você pode evitar o erro no validador para eles.<span id="more-89"></span></p>

	<p>Segue o código:</p>

<pre>document.observe(&#39;dom:loaded&#39;, function() {
  if ( $$(&#39;.objectVideo&#39;) ) {
   $$(&#39;.objectVideo&#39;).invoke(&#39;setStyle&#39;, &#39;-moz-border-radius: 1em;&#39;);
  }
});
</pre>

	<p>Vamos explicar sucintamente o que este código executa:</p>

	<p><code>document.observe(&#39;dom:loaded&#39;, function() { </code></p>

	<p>Esta linha inicia uma função somente quando a página carrega na sua totalidade. Desta maneira, ele aplica efetivamente a propriedade quando o elemento é existente.</p>

	<p><code>if ( $$(&#39;.objectVideo&#39;) ) {</code></p>

	<p>Aqui eu verifico a existência do elemento no <span class="caps">DOM</span> com a classe <code>.objectVideo</code>. Caso exista este elemento ele procede para a próxima linha.</p>

	<p><code>$$(&#39;.objectVideo&#39;).invoke(&#39;setStyle&#39;, &#39;-moz-border-radius: 1em;&#39;);</code></p>

	<p>Aqui realmente acontece tudo&#8230;  com o método <code>$$</code> do Prototype, ele recupera todos os elementos com a classe <code>objectVideo</code> na página e aplica a nova propriedade especificada pelo <code>setStyle</code> usando o <code>invoke</code>.</p>

	<p>Esse código não está otimizado ainda, mas ele funciona bem.</p>

	<p>Isso é tudo. T+</p>]]></content:encoded>
			<wfw:commentRss>http://viniciusbraga.com/tecnologia/css/como-evitar-o-erro-de-validacao-do-css-com-prototype/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Interação na web&#8230;</title>
		<link>http://viniciusbraga.com/tecnologia/css/interacao-na-web</link>
		<comments>http://viniciusbraga.com/tecnologia/css/interacao-na-web#comments</comments>
		<pubDate>Tue, 13 May 2008 18:38:19 +0000</pubDate>
		<dc:creator>Vinicius Braga</dc:creator>
				<category><![CDATA[Web Style Sheets]]></category>

		<guid isPermaLink="false">http://viniciusbraga.com/?p=96</guid>
		<description><![CDATA[	
		&#8220;Lá quero saber do drag-and-drop, quero ver o delivery.&#8221;
	]]></description>
			<content:encoded><![CDATA[	<blockquote>
		<p><em>&#8220;Lá quero saber do drag-and-drop, quero ver o delivery.&#8221;</em></p>
	</blockquote>]]></content:encoded>
			<wfw:commentRss>http://viniciusbraga.com/tecnologia/css/interacao-na-web/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Medidas e Proporção &#8211; Relação entre unidades do CSS</title>
		<link>http://viniciusbraga.com/tecnologia/css/medidas-e-proporcao-relacao-entre-unidades-no-css</link>
		<comments>http://viniciusbraga.com/tecnologia/css/medidas-e-proporcao-relacao-entre-unidades-no-css#comments</comments>
		<pubDate>Sat, 10 May 2008 15:45:38 +0000</pubDate>
		<dc:creator>Vinicius Braga</dc:creator>
				<category><![CDATA[Web Style Sheets]]></category>

		<guid isPermaLink="false">http://viniciusbraga.com/?p=94</guid>
		<description><![CDATA[A relação e proporção entre as medidas de unidades do CSS (Cascading Style Sheet) nos browsers Internet Explorer 7+ e Firefox 2, e como isto é útil ao usuário.]]></description>
			<content:encoded><![CDATA[	<p>A relação e proporção entre as medidas de unidades do <span class="caps">CSS</span> (Cascading Style Sheet) nos browsers Internet Explorer 7+ e Firefox 2, e como isto é útil ao usuário.<span id="more-94"></span></p>

	<p>Saber as relações entre unidades e medidas de tamanho e tipografia, ajuda na criação do layout para diferente saídas (impressora, monitores, handhelds&#8230;) dos documentos na internet. Um exemplo rápido, seria evitar <strong>uma área de texto</strong> ou <strong>tabela para impressão</strong>, maior do que <strong>190mm</strong> ou <strong>720px</strong>. Qualquer boleto bancário, tabelas ou documento <span class="caps">WEB</span> maior do que esta largura, trás uma experiência indesejável para o usuário e desperdício de papel.</p>

	<p>Basicamente, as medidas e unidades no <span class="caps">CSS</span> seguem esta relação abaixo. Isto vale caso o usuário não tenha alterado sua configuração.</p>

	<p>As relações default  são:</p>

	<ul>
		<li>1em = 16pt</li>
		<li>1in = 96px</li>
		<li>1pt = 1/72in</li>
		<li>1pt = 1.333px</li>
		<li>1pt = 0.352mm</li>
		<li>1px = 0.264mm</li>
	</ul>

	<p>O exemplo abaixo é um conjunto de 4 caixas similares visualmente em seu tamanho, mas com uma especificação de tamanho e unidades diferentes entre sí. Demonstrando como os valores variam entre as unidades, para alcançar o mesmo resultado na dimensão.</p>

<div style="font-size: 10px; margin: 1em 2em 1em 0; padding: 1.5em; border: 1px solid #999; background: #f5f5f5; " class="row"><p>Caixa externa com especificação de font-size: 10px </p><div style="width: 100px; height: 100px; float: left; background: red;"><p style="color: white; font-size: 2.2em; ">100px</p></div><div style="width: 75.18pt; height: 75.18pt; float: left; background: green; red;"><p style="color: white; font-size: 2.2em; ">75.18pt</p></div><div style="width: 10em; height: 10em; float: left; background: orange;"><p style="color: white; font-size: 2.2em; ">10em</p></div><div style ="width: 26.4mm; height: 26.4mm; float: left; background: blue;"><p style ="color: white; font-size: 2.2em; ">26.4mm</p></div></div>

	<p>Pergunta, porquê é útil saber isto? Ora, sabendo a relação entre unidades, você pode controlar o tamanho dos objetos na página <span class="caps">HTML</span>, independente do tamanho da tela ou tipo de saída do equipamento utilizado (impressora, monitor&#8230;). Este conhecimento é básico para entender <span class="caps">CSS</span> Vetorizado.</p>

	<p>Você quer saber mais sobre layout em <span class="caps">CSS</span>, visite a seção: <br />
<a href="http://viniciusbraga.com/index/tecnologia/css">Web Style Sheets</a></p>

	<p>É isso pessoal. T+</p>]]></content:encoded>
			<wfw:commentRss>http://viniciusbraga.com/tecnologia/css/medidas-e-proporcao-relacao-entre-unidades-no-css/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Nomeação para Classes e IDs de CSS</title>
		<link>http://viniciusbraga.com/tecnologia/css/nomeacao-para-classes-e-ids-de-css</link>
		<comments>http://viniciusbraga.com/tecnologia/css/nomeacao-para-classes-e-ids-de-css#comments</comments>
		<pubDate>Thu, 08 May 2008 14:44:46 +0000</pubDate>
		<dc:creator>Vinicius Braga</dc:creator>
				<category><![CDATA[Web Style Sheets]]></category>

		<guid isPermaLink="false">http://viniciusbraga.com/?p=92</guid>
		<description><![CDATA[	Na busca de padronizar e nomear os seletores da codificação CSS, estou adotando o sistema CamelCase.

	O CamelCase é um sistema de apresentação do nome de variáveis, funções e classes, das principais linguagens usadas na internet. Exemplos abaixo com o JavaScript:

obj.setStyle('color', 'black');
document.addEventListener("click", function() false, true);


	O setStyle e addEventListener estão apresentados neste formato CamelCase. Como neste sistema [...]]]></description>
			<content:encoded><![CDATA[	<p>Na busca de padronizar e nomear os seletores da codificação <span class="caps">CSS</span>, estou adotando o sistema <strong>CamelCase</strong>.<span id="more-92"></span></p>

	<p>O <a href="http://pt.wikipedia.org/wiki/CamelCase">CamelCase</a> é um sistema de apresentação do nome de variáveis, funções e classes, das principais linguagens usadas na internet. Exemplos abaixo com o JavaScript:</p>

<pre><code>obj.setStyle('color', 'black');
document.addEventListener("click", function() false, true);
</code></pre>

	<p>O <code>setStyle</code> e <code>addEventListener</code> estão apresentados neste formato CamelCase. Como neste sistema existem as variações de iniciar com letra maiúscula (UpperCamelCase) ou minúsculas (lowerCamelCase), na criação de seletores e IDs, será adotado somente o início de minúscula (lowerCamelCase).</p>

<pre><code>.container {}
.header {}
.header h1 {}
.headerLogo {}
.siteName {}
.siteTagline {}
.content {}
.main {}
.main p {}
.footer {}
</code></pre>

	<p>Essa decisão é meio arbitrária, posso dizer, mas como é comum o uso de UpperCamelCase para Classes em <span class="caps">PHP</span>, por isso, deixei reservado isto para um uso futuro dentro da programação <span class="caps">CSS</span>. </p>

	<p>O UpperCamelCase poderia ser usado em IDs, mas depois mudei de idéia, mas deixo aqui apenas documentado isto. </p>

	<p>Outro detalhe também é a minha fuga de especificar IDs para layout de sites. <strong>Os IDs são usados na programação com JavaScripts, o que acaba criando retrabalho, quando uma escolha do nome do ID, pelo designer, não corresponde as necessidades de implementação do programador de JavaScript.</strong></p>

	<p>É tudo por hoje. Até a próxima.</p>

]]></content:encoded>
			<wfw:commentRss>http://viniciusbraga.com/tecnologia/css/nomeacao-para-classes-e-ids-de-css/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
