<?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>Refatorando Padrões &#187; Web Standards</title>
	<atom:link href="http://www.refatorandopadroes.com.br/category/webstandards/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.refatorandopadroes.com.br</link>
	<description>Programação orientada às melhores práticas</description>
	<lastBuildDate>Mon, 03 Sep 2007 12:40:10 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.1</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Separando Javascript do HTML até demais</title>
		<link>http://www.refatorandopadroes.com.br/2007/06/18/separando-javascript-do-html-ate-demais/</link>
		<comments>http://www.refatorandopadroes.com.br/2007/06/18/separando-javascript-do-html-ate-demais/#comments</comments>
		<pubDate>Mon, 18 Jun 2007 14:02:04 +0000</pubDate>
		<dc:creator>Carlos</dc:creator>
				<category><![CDATA[Boa prática]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[Web Standards]]></category>

		<guid isPermaLink="false">http://www.refatorandopadroes.com.br/?p=22</guid>
		<description><![CDATA[É interessante notar como alguns programadores seguem padrões com afinco, até as últimas consequências, onde houver código lá está ele impondo todos os padrões possíveis. Existe a boa prática em separar comportamento e apresentação, no caso de páginas HTML, os arquivos javascript são o comportamento e os arquivos CSS a apresentação, e o HTML faz [...]]]></description>
			<content:encoded><![CDATA[<p>É interessante notar como alguns programadores seguem padrões com afinco, até as últimas consequências, onde houver código lá está ele impondo todos os padrões possíveis. Existe a boa prática em separar comportamento e apresentação, no caso de páginas HTML, os arquivos javascript são o comportamento e os arquivos CSS a apresentação, e o HTML faz uso de ambos, como pode ser observado <a href="http://www.standardsforlife.com/standards-in-a-nutshell">aqui</a>.</p>
<p>Observem o exemplo:</p>
<div class="igBar"><span id="lhtml-4"><a href="#" onclick="javascript:showPlainTxt('html-4'); return false;">Trocar para texto plano</a></span></div>
<div class="syntax_hilite"><span class="langName">HTML:</span>
<div id="html-4">
<div class="html">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><a href="http://december.com/html/4/element/input.html"><span style="color: #000000; font-weight: bold;">&lt;input</span></a> <span style="color: #000066;">type</span>=<span style="color: #ff0000;">"button"</span> <span style="color: #000066;">value</span>=<span style="color: #ff0000;">"botão"</span> <span style="color: #000066;">id</span>=<span style="color: #ff0000;">"meuBotao"</span> <span style="color: #000066;">onclick</span>=<span style="color: #ff0000;">"meuEventoAqui()"</span><span style="color: #000000; font-weight: bold;">&gt;</span></a></span> </div>
</li>
</ol>
</div>
</div>
</div>
<p></p>
<p>Algo que tem-se pregado por aí é retirar o totalmente o Javascript do HTML, ou seja, o exemplo acima ficaria assim:</p>
<div class="igBar"><span id="lhtml-5"><a href="#" onclick="javascript:showPlainTxt('html-5'); return false;">Trocar para texto plano</a></span></div>
<div class="syntax_hilite"><span class="langName">HTML:</span>
<div id="html-5">
<div class="html">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><a href="http://december.com/html/4/element/input.html"><span style="color: #000000; font-weight: bold;">&lt;input</span></a> <span style="color: #000066;">type</span>=<span style="color: #ff0000;">"button"</span> <span style="color: #000066;">id</span>=<span style="color: #ff0000;">"meuBotao"</span> <span style="color: #000066;">value</span>=<span style="color: #ff0000;">"botão"</span><span style="color: #000000; font-weight: bold;">&gt;</span></a></span> </div>
</li>
</ol>
</div>
</div>
</div>
<p></p>
<p>E teríamos um arquivo .js com o seguinte código para ligar o evento onclick do button:</p>
<div class="igBar"><span id="ljavascript-6"><a href="#" onclick="javascript:showPlainTxt('javascript-6'); return false;">Trocar para texto plano</a></span></div>
<div class="syntax_hilite"><span class="langName">JAVASCRIPT:</span>
<div id="javascript-6">
<div class="javascript">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #003366; font-weight: bold;">function</span> ligacaoDeEventos<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; <span style="color: #003366; font-weight: bold;">var</span> botao = document.<span style="color: #006600;">getElementById</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'meuBotao'</span><span style="color: #66cc66;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; botao.<span style="color: #006600;">onclick</span> = <span style="color: #003366; font-weight: bold;">function</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; finalmenteMeuEventoAqui<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #66cc66;">&#125;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp;<span style="color: #66cc66;">&#125;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp;window.<span style="color: #000066;">onload</span> = ligacaoDeEventos; </div>
</li>
</ol>
</div>
</div>
</div>
<p></p>
<p>Puxa vida, toda essa volta só para não usar a propriedade onclick no HTML e se livrar totalmente do Javascript, isso vale a pena ?</p>
<p>Há vários motivos para que eu não concorde com isso:</p>
<ul>
<li>Mais código para dar manutenção, foram criadas várias linhas de javascript para algo que funcionaria no primeiro exemplo usando a propriedade onclick da tag input.</li>
<li>E quando eu quiser saber qual evento o button aciona, será fácil de achar ? Podem haver vários objetos na página, todos com seus eventos ligados apenas no momento do onload da página. Vários objetos é igual a várias linhas de código javascript com as ligações, se você estiver usando um editor de textos comum, bem... boa sorte, e mesmo com uma IDE não é tão simples assim.</li>
<li>A propriedade onclick, onkeypress, etc faz parte da especificação HTML, justamente para facilitar isso, porque iria deixar de usá-los ?</li>
</ul>
<p>Então muito cuidado ao seguir padrões ao extremo, questione-os, cada um tem o seu lugar e hora certa.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.refatorandopadroes.com.br/2007/06/18/separando-javascript-do-html-ate-demais/feed/</wfw:commentRss>
		<slash:comments>8</slash:comments>
		</item>
		<item>
		<title>Ajax é técnica para desempenho, use com parcimônia.</title>
		<link>http://www.refatorandopadroes.com.br/2007/05/22/ajax-e-tecnica-para-desempenho-use-com-parcimonia/</link>
		<comments>http://www.refatorandopadroes.com.br/2007/05/22/ajax-e-tecnica-para-desempenho-use-com-parcimonia/#comments</comments>
		<pubDate>Tue, 22 May 2007 16:19:38 +0000</pubDate>
		<dc:creator>Carlos</dc:creator>
				<category><![CDATA[Ajax]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[Web Standards]]></category>

		<guid isPermaLink="false">http://www.refatorandopadroes.com.br/?p=20</guid>
		<description><![CDATA[Da técnica AJAX, o que sempre noto é que as pessoas a amam de coração ou odeiam até a morte, não há um meio termo.
Os que odeiam, normalmente já odeiam Javascript também, e odeiam ainda mais quando os que amam exageram absurdamente no uso da técnica, conseguem fazer o site ficar inutilizável, uma usabilidade de [...]]]></description>
			<content:encoded><![CDATA[<p>Da técnica <a href="http://en.wikipedia.org/wiki/AJAX">AJAX</a>, o que sempre noto é que as pessoas a amam de coração ou odeiam até a morte, não há um meio termo.</p>
<p>Os que odeiam, normalmente já odeiam Javascript também, e odeiam ainda mais quando os que amam exageram absurdamente no uso da técnica, conseguem fazer o site ficar inutilizável, uma usabilidade de dar medo, o teclado simplesmente não serve mais. E não me venham falar pra usar o mouse pois usabilidade é para todos os dispositivos. E o motivo principal de usar AJAX (desempenho), foi esquecido a muito tempo.</p>
<p>Dou certa razão para os que odeiam, a usabilidade é item prioritário na construção de um website, de que adianta ser lindo se não conseguimos utilizá-lo. Existem padrões web, utilize-os sempre na medida das possibilidades. Antes perder em semântica do que usabilidade.</p>
<p>Mas vamos lembrar primeiro que AJAX não é um framework, tecnologia, API ou biblioteca. AJAX é uma técnica que pode envolver o uso de várias tecnologias (Javascript, XML, DOM, etc), e pra espanto de vários, foi iniciativa da Microsoft, a própria criou o objeto <a href="http://en.wikipedia.org/wiki/XMLHttpRequest">XMLHttpRequest</a>, responsável pelas requisições assíncronas, embora seja uma técnica que pode ser alcançada usando iFrames também.</p>
<p>Desempenho! Afinal banda de internet é cara, os serviços de hospedagem no Brasil que o digam... AJAX serve para melhorar o desempenho para todos, seja do sobrecarregado servidor ou do usuário que ainda utiliza modem (sem piadas, 53% dos internautas brasileiros ainda utilizam modem). Um bom exemplo de uso da técnica pode ser vista no sistema de creditar do <a href="http://infoblogs.com.br">Infoblogs</a>, um simples clique e pronto lá foi o crédito, sem precisar que a página seja renderizada novamente para atualizar uma única tag, simples e ótimo para todos.</p>
<p>Agora um péssimo exemplo é quando temos mega formulários em alguns sites e o submit é uma chamada usando AJAX. Se não utilizar um framework decente, isso dá um trabalho enorme para implementar. E o que ganhamos com isso ? Mais manutenção, o ganho de desempenho é minúsculo. Os vários dados do formulário terão que ser enviados de qualquer forma, todo um processo de parse deve ser feito via javascript e parse de dados é algo que o próprio browser já faz naturalmente ao fazer o submit, ou seja, apenas processando à toa.</p>
<p>Então devemos pesar bem quando utilizar a técnica, pode até ser para algo bonitinho, mas vale mesmo a pena ganhar mais manutenção ? Pense sempre em desempenho e não perca a usabilidade de vista.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.refatorandopadroes.com.br/2007/05/22/ajax-e-tecnica-para-desempenho-use-com-parcimonia/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Quando cansa tentar obedecer a semântica web</title>
		<link>http://www.refatorandopadroes.com.br/2007/04/07/quando-cansa-tentar-obedecer-a-semantica-web/</link>
		<comments>http://www.refatorandopadroes.com.br/2007/04/07/quando-cansa-tentar-obedecer-a-semantica-web/#comments</comments>
		<pubDate>Sat, 07 Apr 2007 17:31:06 +0000</pubDate>
		<dc:creator>Carlos</dc:creator>
				<category><![CDATA[Web Standards]]></category>

		<guid isPermaLink="false">http://www.refatorandopadroes.com.br/?p=14</guid>
		<description><![CDATA[Posso dizer que já criei muitas páginas HTML de dar medo, sem o mínimo de obediência aos padrões estabelecidos pela W3C, ou mesmo seguindo a sintaxe correta, mas com tags erradas, semântica incorreta. Aprende-se mais a cada dia e hoje tento fazer o meu melhor em seguir a semântica, eu digo tento, porque os browsers [...]]]></description>
			<content:encoded><![CDATA[<p>Posso dizer que já criei muitas páginas HTML de dar medo, sem o mínimo de obediência aos padrões estabelecidos pela <a href="http://www.w3.org/" title="W3C" target="_blank">W3C,</a> ou mesmo seguindo a sintaxe correta, mas com tags erradas, semântica incorreta. Aprende-se mais a cada dia e hoje tento fazer o meu melhor em seguir a semântica, eu digo tento, porque os browsers teimam em me desafiar.</p>
<p>Não é novidade que o Internet Explorer é, de longe, o pior caso em seguir padrões web, mas simplesmente não podemos abandoná-lo. Que o digam os meus clientes, que de forma alguma trocam de navegador.</p>
<p>Não sou bom em design, nunca fui, dou minhas patadas, mas para bolar layouts de sites novos eu sempre passo para um outro amigo, também freelancer. Infelizmente ele, embora crie layouts muito bons, não tem experiência em padrões web, sendo assim, cabe a mim adequar o código fonte, e como já disse, faço o melhor que posso. Mas quando o seu layout deve ser flexível e um determinado elemento teima em não se apresentar corretamente em um certo "browser", é necessário parar para pensar: "sacrifico o layout ou a semântica desse bloco ?"</p>
<p>O tempo urge pelo sacrifício da semântica, os mega indexadores preferem o sacrifício do layout. Eu opto tentar ao máximo ir pela semântica, mas não sou fanático ao ponto de jogar fora o layout só porque um elemento não funciona direito no browser X ou Y. Se o elemento que fugirá da semântica é de mínima importância, não pense duas vezes,  quebre o padrão, mas somente faça isso quando não houver outra alternativa, esgotaram-se mesmo as possibilidades. É fácil seguir a semântica quando sua página é um "linguição fixo", agora quando os elementos devem ser adequar ao perfil do usuário aí você se complica.</p>
<p>Podem me jogar pedras, mas por favor, o façam também contra o IE. Sempre crio o conteúdo utilizando como navegador o <a href="http://br.mozdev.org/firefox/" title="Download Firefox" target="_blank">Firefox,</a> e tudo que fiz sempre funcionou corretamente nele. Rezo para que um dia ele chegue à liderança e com grande margem, e somente nesse dia é que eu conseguirei convencer meu cliente a trocar de navegador, antes disso, nós é que temos que ser flexíveis.</p>
<p>Mas lembre-se um pequeno trecho sacrificado que no futuro pode ser corrigido com o uso de melhores navegadores é uma coisa, chutar toda a semântica  é bem diferente, por favor nunca façam este último, sigam padrões, ou pelo menos 99,99% deles.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.refatorandopadroes.com.br/2007/04/07/quando-cansa-tentar-obedecer-a-semantica-web/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Nem Java suporta métodos gordinhos</title>
		<link>http://www.refatorandopadroes.com.br/2007/02/25/nem-java-suporta-metodos-gordinhos/</link>
		<comments>http://www.refatorandopadroes.com.br/2007/02/25/nem-java-suporta-metodos-gordinhos/#comments</comments>
		<pubDate>Sun, 25 Feb 2007 08:42:35 +0000</pubDate>
		<dc:creator>Carlos</dc:creator>
				<category><![CDATA[JSP]]></category>
		<category><![CDATA[Java]]></category>
		<category><![CDATA[Padrões]]></category>
		<category><![CDATA[Web Standards]]></category>

		<guid isPermaLink="false">http://www.refatorandopadroes.com.br/?p=11</guid>
		<description><![CDATA[Fato interessante ocorreu com uma amiga que estava trabalhando em um JSP enorme, bem que poderia haver menos dados a serem mostrados, mas não sou eu quem decido... enfim... lá pelas tantas, o compilador começou a reclamar de "code too large", caramba como assim ? Era inserir mais um caracter e dava erro, tirava o [...]]]></description>
			<content:encoded><![CDATA[<p>Fato interessante ocorreu com uma amiga que estava trabalhando em um JSP enorme, bem que poderia haver menos dados a serem mostrados, mas não sou eu quem decido... enfim... lá pelas tantas, o compilador começou a reclamar de "code too large", caramba como assim ? Era inserir mais um caracter e dava erro, tirava o caracter e funcionava...</p>
<p>Bom não tem jeito, Google ao resgate... minutos depois problema  encontrado e resolvido, o que ocorre é um limitação imposta pelo próprio compilador, um método em Java pode ter um tamanho máximo de 65534 bytes, portanto quando o JSP era convertido em Servlet acabava gerando esse método monstrinho gordinho, mais informações sobre este e outros limites você encontra aqui na <a href="http://java.sun.com/docs/books/jvms/second_edition/html/ClassFile.doc.html" title="Especificação da VM" target="_blank">especificação da Virtual Machine</a>.</p>
<p>Para resolver o problema foi necessário, adivinhem ? Simmmm, REFATORAR..... basta dividir o JSP em arquivos menores que façam mais sentido e uni-los com &lt;jsp:include&gt;. Para ajudar ainda mais não se esqueça de utilizar padrões web para o HTML gerado, mais tableless, o código fica muito mais enxuto, e quando possível, pense bem antes de criar uma tela com tantos dados, para uma melhor usabilidade.</p>
<p>Claro que, embora seja uma limitação imposta pelo compilador, NUNCA crie um método tão grande, isso vale para qualquer linguagem.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.refatorandopadroes.com.br/2007/02/25/nem-java-suporta-metodos-gordinhos/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Quando uma imagem vale mais que mil palavras</title>
		<link>http://www.refatorandopadroes.com.br/2007/02/15/quando-uma-imagem-vale-mais-que-mil-palavras/</link>
		<comments>http://www.refatorandopadroes.com.br/2007/02/15/quando-uma-imagem-vale-mais-que-mil-palavras/#comments</comments>
		<pubDate>Thu, 15 Feb 2007 03:14:05 +0000</pubDate>
		<dc:creator>Carlos</dc:creator>
				<category><![CDATA[Padrões]]></category>
		<category><![CDATA[Web Standards]]></category>

		<guid isPermaLink="false">http://www.refatorandopadroes.com.br/?p=9</guid>
		<description><![CDATA[    Certa vez, Nelson, um colega de trabalho, me passou pelo MSN um arquivo entitulado "Standards in a Nutshell.pdf", abri-o, e como de costume para todo o livro que vejo pela primeira vez, tentei ir direto ao índice, nem paro para ver a capa. Qual não foi minha frustração quando vi que [...]]]></description>
			<content:encoded><![CDATA[<p>    Certa vez, Nelson, um colega de trabalho, me passou pelo MSN um arquivo entitulado "Standards in a Nutshell.pdf", abri-o, e como de costume para todo o livro que vejo pela primeira vez, tentei ir direto ao índice, nem paro para ver a capa. Qual não foi minha frustração quando vi que o PDF só tinha uma única página.</p>
<p>"Nelson, acho que aconteceu algum problema, o PDF abriu mas só tem uma página aqui!"</p>
<p>Pensei: "Bom enquanto ele não responde vou dar uma olhada na capa". Pra minha surpresa, ao vislumbrar a imagem abaixo, percebi que nada havia de errado com o arquivo, lá estava tudo o que precisava ser dito, ou no caso mostrado =D, sobre padrões em um página HTML.</p>
<p><a href="http://www.refatorandopadroes.wordpress.com/?attachment_id=7" rel="attachment wp-att-7" title="Standards in a Nutshell"><img src="http://www.refatorandopadroes.wordpress.com/files/2007/02/pattern2.png" alt="Standards in a Nutshell" height="824" width="542" /></a></p>
<p>Simples assim.</p>
<p>Tudo que eu já havia lido sobre padrões nessa área, tudo o que muitas pessoas de bom senso pregam como ideal, está aí. Ao invés de um calhamaço de 600 páginas, uma imagem que é compreendida em alguns segundos.</p>
<p>Javascript, CSS e HTML separados. Quem dera todos os designers fizessem isso, as vantagens são absurdas: menos consumo de banda, afinal os mesmos arquivos de CSS e Javascript serão usados em todos os outros arquivos HTML, reusabilidade e o principal, um padrão de separação entre o comportamento e apresentação da página, maravilhas das maravilhas para futuras manutenções. Basta apenas ligar os arquivos .css e .js com uma tag no arquivo HTML e pronto.</p>
<p>É claro que não poderia deixar de dar crédito a autora pela obra de arte.<a href="http://www.standardsforlife.com/standards-in-a-nutshell" title="Blog Standards For Life" target="_blank"></a></p>
<p><a href="http://www.standardsforlife.com/standards-in-a-nutshell" title="Blog Standards For Life" target="_blank">Standards For Life</a></p>
<p>Preciso criar um cartaz  bem grande com isso, talvez alguém olhe e crie juízo. =D</p>
]]></content:encoded>
			<wfw:commentRss>http://www.refatorandopadroes.com.br/2007/02/15/quando-uma-imagem-vale-mais-que-mil-palavras/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
