<?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>SamuraiDio &#187; prototype</title>
	<atom:link href="http://blog.diovani.com/tag/prototype/feed/" rel="self" type="application/rss+xml" />
	<link>http://blog.diovani.com</link>
	<description>GNU/Linux &#124; PHP &#124; JavaScript</description>
	<lastBuildDate>Sat, 18 Dec 2010 21:19:20 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Prototype vs jQuery &#8211; combo estado/cidade</title>
		<link>http://blog.diovani.com/2008/07/31/prototype-vs-jquery-combo-estadocidade/</link>
		<comments>http://blog.diovani.com/2008/07/31/prototype-vs-jquery-combo-estadocidade/#comments</comments>
		<pubDate>Thu, 31 Jul 2008 17:59:49 +0000</pubDate>
		<dc:creator>diovani</dc:creator>
				<category><![CDATA[Sem Categoria]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[prototype]]></category>

		<guid isPermaLink="false">http://blog.diovani.com/2008/07/31/prototype-vs-jquery-combo-estadocidade/</guid>
		<description><![CDATA[A algum tempo eu vinha utilizando o Prototype JavaScript Framework para criar efeitos de animações simples e, principalmente, fazer requisições AJAX, em meus projetos. Mas após as constantes indicações de um amigo de que o jQuery JavaScript Framework tornava o desenvolvimento de aplicações web com JavaScript bem mais fácil, e as promessas deste de fazer [...]]]></description>
			<content:encoded><![CDATA[<p>A algum tempo eu vinha utilizando o <a href="http://prototypejs.org/">Prototype JavaScript Framework</a> para criar efeitos de animações simples e, principalmente, fazer requisições AJAX, em meus projetos. Mas após as constantes indicações de um <a href="http://eric.dingdong.com.br">amigo</a> de que o <a href="http://jquery.com/">jQuery JavaScript Framework</a> tornava o desenvolvimento de aplicações web com JavaScript bem mais fácil, e as promessas deste de fazer grandes diferenças com poucas linhas de código, resolvi começar a utilizá-lo em meus novos projetos.</p>
<p>Acontece que o jQuery realmente cumpre o que promete, facilitando trabalhos como alteração de objetos em tempo de execução, requisições ajax e também conta com ótimas animações, tudo com poucas linhas de código muito fáceis de entender. Por isso resolvi fazer uma pequena comparação entre o uso de Prototype, jQuery, ou apenas JavaScript sem se utilizar nenhum framework.</p>
<p>Algumas vantagens do jQuery:</p>
<ul>
<li><strong>Tamanho:</strong> O <a href="http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.2.6.js">jQuery.js</a> (versão 1.2.6) tem apenas 97KB, contando com toda sua API, Ajax e algumas animações básicas (Fade, Slide e o Animate, que pode ser utilizado para se fazeranimações customizadas). Já o <a href="http://prototypejs.org/download">prototype.js</a> (versão 1.6.0.2), sem o <a href="http://script.aculo.us/">Script.aculo.us</a>, que provê as animações e efeitos, tem 123KB;</li>
<li><strong>Seletores: </strong>Enquanto com JavaScript é necessário linhas como <em>elemento = getElementById(&#8216;myDiv&#8217;); </em>com o jQuery vc pode selecionar qualquer elemento com seletores CSS, utilizando a função $(). Ex: <em>elemento = $(&#8216;#myDiv&#8217;); </em>Note que, como ele utiliza seletores CSS, é possivel selecionar facilmente quaisquer elementos, como todas as âncoras de uma página, ou todas as ancoras com a classe <em>link</em>, por exemplo: <em>anchor = $(&#8216;a&#8217;)</em>; <em>anchorLink = $(&#8216;a.link&#8217;)</em>;</li>
<li><strong>Eventos: </strong>O Prototype possui uma função para observar determinado evento em um elemento. Para disparar funções no Evento <em>Click</em> de meu link de id &#8216;<em>myLink&#8217;</em>, por exemplo, é necessário: <em>Event.observe(&#8216;myLink&#8217;, &#8216;click&#8217;, function(e) { [...] } );</em>. Com jQuery basta fazer: <em>$(&#8216;myLink&#8217;).click( function() { [...] });</em></li>
</ul>
<p>Vou um exemplo de código para uma aplicação bem comum, dois <em>&lt;select&gt;</em>s relativos de estado e cidade. Não vou postar HTML ou código PHP desnecessário, apenas o código Javascript.</p>
<p>Considere dois <em>&lt;select&gt;</em>, um com id <em>&#8216;StateId</em>&#8216; que exibirá os estados para selecionar, e irá atualizar com AJAX as opções do segundo <em>&lt;select&gt;</em>, que terá o id <em>&#8216;CityId&#8217;</em>, contendo as Cidades do estado selecionado previamente.</p>
<p>A url enviada, é uma típica url segmentada, comum em Frameworks <a href="http://pt.wikipedia.org/wiki/Mvc">MVC</a>, e corresponde ao controle <em>cities</em>, a ação <em>update</em>, e deve receber o <em>id</em> do estado como parâmetro. Seria equivalente a seguinte url: <em>&#8216;/cities/update.php?state_id=&#8217;</em>.</p>
<p>Primeiramente, eis como o código para atualização seria, utilizando-se apenas JavaScript, e nenhum Framework:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #006600; font-style: italic;">//Apenas JavaScript, Nenhum framework</span>
<span style="color: #003366; font-weight: bold;">function</span> updateCities<span style="color: #009900;">&#40;</span>stateId<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    <span style="color: #003366; font-weight: bold;">var</span> httpRequest<span style="color: #339933;">;</span>
    <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>window.<span style="color: #660066;">XMLHttpRequest</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span> <span style="color: #006600; font-style: italic;">// Mozilla, Safari, ...</span>
        httpRequest <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> XMLHttpRequest<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span> <span style="color: #000066; font-weight: bold;">else</span> <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>window.<span style="color: #660066;">ActiveXObject</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span> <span style="color: #006600; font-style: italic;">// IE</span>
        httpRequest <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> ActiveXObject<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;Microsoft.XMLHTTP&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span>
&nbsp;
    httpRequest.<span style="color: #000066;">open</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;GET&quot;</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'/cities/update/'</span> <span style="color: #339933;">+</span> stateId<span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">true</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    httpRequest.<span style="color: #660066;">onreadystatechange</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
        document.<span style="color: #660066;">getElementById</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;CityId&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">innerHTML</span> <span style="color: #339933;">=</span> httpRequest.<span style="color: #660066;">responseText</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span>
    httpRequest.<span style="color: #660066;">send</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">null</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span></pre></div></div>

<p>Ainda, como o JavaScript por padrão não possui métodos para observar eventos em elementos diversos, será necessário adicionar explicitamenteuma chamada para a função <em>updateCities()</em> no evento <em>onChange</em> do <em>&lt;select&gt;</em>:</p>

<div class="wp_syntax"><div class="code"><pre class="html4strict" style="font-family:monospace;"><span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">select</span> <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;StateId&quot;</span> <span style="color: #000066;">name</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;StateId&quot;</span> <span style="color: #000066;">onchange</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;updateCities(this.value)&quot;</span>&gt;</span></pre></div></div>

<p>Utilizando-se Prototype, o trabalho torna-se bem mas fácil:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #006600; font-style: italic;">//Prototype</span>
Event.<span style="color: #660066;">observe</span> <span style="color: #009900;">&#40;</span>
    <span style="color: #3366CC;">'StateId'</span><span style="color: #339933;">,</span>
    <span style="color: #3366CC;">'change'</span><span style="color: #339933;">,</span>
    <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>e<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
        <span style="color: #003366; font-weight: bold;">new</span> Ajax.<span style="color: #660066;">Updater</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'CityId'</span><span style="color: #339933;">,</span> <span style="color: #3366CC;">'/cities/update/'</span> <span style="color: #339933;">+</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">value</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p>Já com jQuery, o código é reduzido significativamente, além de ficar bem mais legível e fácil de entender a uma primeira olhada:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #006600; font-style: italic;">//jQuery</span>
$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#StateId'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">change</span><span style="color: #009900;">&#40;</span>
    <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
        $<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'#CityId'</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">load</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'/cities/update/'</span> <span style="color: #339933;">+</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">value</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p>Este é um exemplo simples de como fica fácil reduzir código e torná-lo mais legível com uso do <a href="http://jquery.com/">framework Js jQuery</a>.<br />
Veja a <a href="http://docs.jquery.com/">documentação do jQuery</a> para mais métodos e exemplos de uso.</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.diovani.com/2008/07/31/prototype-vs-jquery-combo-estadocidade/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>Highslide no Wordpress</title>
		<link>http://blog.diovani.com/2007/08/06/highslide-no-wordpress/</link>
		<comments>http://blog.diovani.com/2007/08/06/highslide-no-wordpress/#comments</comments>
		<pubDate>Mon, 06 Aug 2007 14:02:31 +0000</pubDate>
		<dc:creator>diovani</dc:creator>
				<category><![CDATA[Sem Categoria]]></category>
		<category><![CDATA[blog]]></category>
		<category><![CDATA[highslide]]></category>
		<category><![CDATA[imagem]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[multimídia]]></category>
		<category><![CDATA[programação]]></category>
		<category><![CDATA[prototype]]></category>
		<category><![CDATA[wordpress]]></category>

		<guid isPermaLink="false">http://blog.diovani.com/?p=68</guid>
		<description><![CDATA[O highslide é um visualizador de miniaturas feito em JavaScript. Ele exibe as imagens em pop-ups sobre sua página (em html, nao novas janelas), podendo ser movidos ou abertos em sequencia. O efeito visual é melhor que qualquer visualizador de imagens já visto, mesmo em sistemas operacionais. Veja minhas imagens e screenshots para ter uma [...]]]></description>
			<content:encoded><![CDATA[<p>O highslide é um visualizador de miniaturas feito em JavaScript. Ele exibe as imagens em pop-ups sobre sua página (em html, nao novas janelas), podendo ser movidos ou abertos em sequencia. O efeito visual é melhor que qualquer visualizador de imagens já visto, mesmo em sistemas operacionais. Veja minhas imagens e screenshots para ter uma idéia.  Vou mostrar aqui como intalar o plugin para Wordpress e como adicionar automaticamente o highslide a TODAS as imagens do blog, sem precisar editar os posts antigos.</p>
<blockquote><p><em>O visualizador de miniaturas Highslide é free para uso não-comercial, e custa  $29, dólares para cada domínio deu8m website comercial, então, caso você possua um blog comercial (?) você deverá pagar pelo Highslide.js. Veja a <a href="http://vikjavev.no/highslide/#licence">licença</a>. </em></p></blockquote>
<p>Primeiramente, baixe e instale o plugin <a href="http://wordpress.org/extend/plugins/wp-highslide-image-viewer/">wp-highslide</a> (descompacte-o dentro de uma pasta &#8216;highslide&#8217; em wp-content/plugins/) e também baixe a biblioteca <a href="http://vikjavev.no/highslide/">highslide</a> (copie apenas o arquivo highslide.js para dentro de wp-content/plugins/highslide). Após isso vá em &#8216;Plugins&#8217; (ou &#8216;Extenções&#8217;, em português), na administração de seu blog e ative o wp-highslide.  Com isso você terá o plugins instalado, podendo usar a tag &lt;highslide&gt;&lt;/highslide&gt; para adicionar miniaturas usando a biblioteca, o que é um saco. Então, para facilitar as coisas, vá em &#8216;Opções&#8217; e clique em &#8216;wp-highslide&#8217;, ajuste as opções como deseja e em &#8216;JAVASCRIPT settings&#8217; adicione o seguinte:</p>
<p>Caso seu tema não utilize &#8216;<a href="http://prototypejs.org/">prototype</a>&#8216; (um framework JavaScript), adicione no início do textarea o seguinte código:</p>

<div class="wp_syntax"><div class="code"><pre class="html" style="font-family:monospace;">&lt;script&gt;
src=&quot;http://prototypejs.org/assets/2007/6/20/prototype.js&quot;
 type=&quot;text/javascript&quot;&gt;&lt;/script&gt;</pre></div></div>

<p>E abaixo da linha: <strong>&#8216;hs.preloadImages();&#8217;</strong></p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> elements <span style="color: #339933;">=</span> $A<span style="color: #009900;">&#40;</span>document.<span style="color: #660066;">getElementsByTagName</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'a'</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
elements.<span style="color: #660066;">each</span>
<span style="color: #009900;">&#40;</span>
    <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>element<span style="color: #009900;">&#41;</span>
    <span style="color: #009900;">&#123;</span>
        <span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>element.<span style="color: #660066;">href</span>.<span style="color: #660066;">endsWith</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'jpg'</span><span style="color: #009900;">&#41;</span>
            <span style="color: #339933;">||</span> element.<span style="color: #660066;">href</span>.<span style="color: #660066;">endsWith</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'png'</span><span style="color: #009900;">&#41;</span>
            <span style="color: #339933;">||</span> element.<span style="color: #660066;">href</span>.<span style="color: #660066;">endsWith</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'gif'</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span>
        <span style="color: #009900;">&#123;</span>
            element.<span style="color: #660066;">className</span> <span style="color: #339933;">=</span> <span style="color: #3366CC;">'highslide'</span><span style="color: #339933;">;</span>
&nbsp;
            Event.<span style="color: #660066;">observe</span>
            <span style="color: #009900;">&#40;</span>
                element<span style="color: #339933;">,</span>
                <span style="color: #3366CC;">'click'</span><span style="color: #339933;">,</span>
                <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>event<span style="color: #009900;">&#41;</span>
                <span style="color: #009900;">&#123;</span>
                    Event.<span style="color: #000066;">stop</span><span style="color: #009900;">&#40;</span>event<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
                    <span style="color: #003366; font-weight: bold;">var</span> element <span style="color: #339933;">=</span> Event.<span style="color: #660066;">element</span><span style="color: #009900;">&#40;</span>event<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
                    <span style="color: #000066; font-weight: bold;">return</span> hs.<span style="color: #660066;">expand</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
                <span style="color: #009900;">&#125;</span>
            <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span>
    <span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#41;</span></pre></div></div>

<p>Isso vai adicionar automaticamente o Highslide a todos os links para imagens da página, inclusive dos posts antigos.</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.diovani.com/2007/08/06/highslide-no-wordpress/feed/</wfw:commentRss>
		<slash:comments>8</slash:comments>
		</item>
	</channel>
</rss>

