atom.xml

<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">

  <title><![CDATA[hardcoders.mx]]></title>
  <link href="http://hardcoders.mx/atom.xml" rel="self"/>
  <link href="http://hardcoders.mx/"/>
  <updated>2014-09-13T12:07:38-07:00</updated>
  <id>http://hardcoders.mx/</id>
  <author>
    <name><![CDATA[hardcoders.mx]]></name>
    
  </author>
  <generator uri="http://octopress.org/">Octopress</generator>

  
  <entry>
    <title type="html"><![CDATA[Patrón Módulo en JavaScript (Module Pattern)]]></title>
    <link href="http://hardcoders.mx/blog/2014/09/12/patron-modulo-en-javascript-module-pattern/"/>
    <updated>2014-09-12T12:27:00-07:00</updated>
    <id>http://hardcoders.mx/blog/2014/09/12/patron-modulo-en-javascript-module-pattern</id>
    <content type="html"><![CDATA[<p><img src="http://hardcoders.mx/images/posts/legoblocks.jpg" class="left-thumb"></p>

<p>Los módulos son muy importantes ya que nos permiten mantener nuestro código encapsulado, sin contaminar el <code>scope</code> global y evitar colisión de nombres. Además nos ayudan a mantener en el proyecto unidades de código separadas y organizadas.</p>

<p>El <em>Module Pattern</em> es considerado un Patrón de Diseño y en JavaScript nos ofrece la posibilidad de simular propiedades y métodos privados. Digo &#8220;simular&#8221; porque las variables y funciones en JavaScript no tienen modificadores de acceso, pero a través de los <em>closures</em> podemos simular este comportamiento.</p>

<!-- more -->


<p>El <em>Module Pattern</em> se implementa creando una función anónima que se auto-invoca y regresa un objeto literal.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
<span class='line-number'>18</span>
<span class='line-number'>19</span>
</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="kd">var</span> <span class="nx">myModule</span> <span class="o">=</span> <span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
</span><span class='line'>  <span class="kd">var</span> <span class="nx">counter</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
</span><span class='line'>
</span><span class='line'>  <span class="k">return</span> <span class="p">{</span>
</span><span class='line'>    <span class="nx">incrementCounter</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
</span><span class='line'>      <span class="k">return</span> <span class="nx">counter</span><span class="o">++</span><span class="p">;</span>
</span><span class='line'>    <span class="p">},</span>
</span><span class='line'>
</span><span class='line'>    <span class="nx">resetCounter</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
</span><span class='line'>      <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;Valor de counter antes de reset: &#39;</span> <span class="o">+</span> <span class="nx">counter</span><span class="p">);</span>
</span><span class='line'>      <span class="nx">counter</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
</span><span class='line'>    <span class="p">}</span>
</span><span class='line'>  <span class="p">}</span>
</span><span class='line'><span class="p">})();</span>
</span><span class='line'>
</span><span class='line'><span class="c1">// Uso:</span>
</span><span class='line'><span class="nx">myModule</span><span class="p">.</span><span class="nx">incrementCounter</span><span class="p">();</span>
</span><span class='line'><span class="nx">myModule</span><span class="p">.</span><span class="nx">incrementCounter</span><span class="p">();</span>
</span><span class='line'><span class="nx">myModule</span><span class="p">.</span><span class="nx">resetCounter</span><span class="p">();</span> <span class="c1">// Imprime 2</span>
</span></code></pre></td></tr></table></div></figure>


<p>De esta forma al tener una función anónima creamos un <code>scope</code> dentro de la función, evitando así contaminar el ámbito global. Regresamos un objeto literal que contiene dos métodos, ambos métodos pueden acceder a la variable <code>counter</code> ya que se ha creado un <code>closure</code>. Así podemos simular propiedades privadas.</p>

<p>Entonces básicamente el <em>Module Pattern</em> se define de la siguiente forma.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
<span class='line-number'>18</span>
<span class='line-number'>19</span>
<span class='line-number'>20</span>
<span class='line-number'>21</span>
<span class='line-number'>22</span>
<span class='line-number'>23</span>
</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="kd">var</span> <span class="nx">myModule</span> <span class="o">=</span> <span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
</span><span class='line'>  <span class="kd">var</span> <span class="nx">privateProperty</span> <span class="o">=</span> <span class="mi">10</span><span class="p">;</span>
</span><span class='line'>
</span><span class='line'>  <span class="kd">var</span> <span class="nx">privateMethodOne</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
</span><span class='line'>    <span class="c1">// Algo</span>
</span><span class='line'>  <span class="p">};</span>
</span><span class='line'>
</span><span class='line'>  <span class="kd">var</span> <span class="nx">privateMethodTwo</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
</span><span class='line'>    <span class="c1">// Algo</span>
</span><span class='line'>  <span class="p">};</span>
</span><span class='line'>
</span><span class='line'>  <span class="k">return</span> <span class="p">{</span>
</span><span class='line'>    <span class="nx">publicProperty</span><span class="o">:</span> <span class="s2">&quot;foo&quot;</span><span class="p">,</span>
</span><span class='line'>    <span class="nx">publicMethodOne</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
</span><span class='line'>      <span class="c1">//...</span>
</span><span class='line'>    <span class="p">},</span>
</span><span class='line'>    <span class="nx">publicMethodTwo</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
</span><span class='line'>      <span class="c1">// Invocar método privado</span>
</span><span class='line'>      <span class="nx">privateMethodOne</span><span class="p">();</span>
</span><span class='line'>    <span class="p">},</span>
</span><span class='line'>    <span class="nx">publicMethodThree</span><span class="o">:</span> <span class="nx">privateMethodTwo</span> <span class="c1">//Alias de privateMethodTwo</span>
</span><span class='line'>  <span class="p">}</span>
</span><span class='line'><span class="p">})();</span>
</span></code></pre></td></tr></table></div></figure>


<h2>Revealing Module Pattern (Patrón Módulo Revelado)</h2>

<p>El <em>Revealing Module Pattern</em> es una variante del <em>Module Pattern</em> en el cual definimos nuestras propiedades públicas y privadas dentro la función anónima y en el <code>return</code> apuntamos a las funciones que deseamos exponer. Así tenemos un buen manejo de código, mas limpio y entendible.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
<span class='line-number'>18</span>
<span class='line-number'>19</span>
<span class='line-number'>20</span>
<span class='line-number'>21</span>
</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="kd">var</span> <span class="nx">Counter</span> <span class="o">=</span> <span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
</span><span class='line'>  <span class="kd">var</span> <span class="nx">counter</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
</span><span class='line'>
</span><span class='line'>  <span class="kd">var</span> <span class="nx">privateMethod</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
</span><span class='line'>    <span class="c1">// Algo privado</span>
</span><span class='line'>  <span class="p">};</span>
</span><span class='line'>
</span><span class='line'>  <span class="kd">var</span> <span class="nx">incrementCounter</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
</span><span class='line'>    <span class="k">return</span> <span class="nx">counter</span><span class="o">++</span>
</span><span class='line'>  <span class="p">};</span>
</span><span class='line'>
</span><span class='line'>  <span class="kd">var</span> <span class="nx">resetCounter</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
</span><span class='line'>    <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;Valor de counter antes de reset: &#39;</span> <span class="o">+</span> <span class="nx">counter</span><span class="p">);</span>
</span><span class='line'>    <span class="nx">counter</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
</span><span class='line'>  <span class="p">};</span>
</span><span class='line'>
</span><span class='line'>  <span class="k">return</span> <span class="p">{</span>
</span><span class='line'>    <span class="nx">increment</span><span class="o">:</span> <span class="nx">incrementCounter</span><span class="p">,</span>
</span><span class='line'>    <span class="nx">reset</span><span class="o">:</span> <span class="nx">resetCounter</span>
</span><span class='line'>  <span class="p">}</span>
</span><span class='line'><span class="p">})();</span>
</span></code></pre></td></tr></table></div></figure>


<p>Podemos ver claramente cuales métodos son los expuestos por el módulo.</p>

<p>Otra de las razones de este patrón es que en el <em>Module Pattern</em> cuando necesitas invocar un miembro público se hace necesario usar el <code>this</code>, y hay quienes consideran esto confuso y menos consistente.</p>

<figure class='code'><figcaption><span>Module Pattern, usando this</span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="kd">var</span> <span class="nx">Module</span> <span class="o">=</span> <span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
</span><span class='line'>  <span class="k">return</span> <span class="p">{</span>
</span><span class='line'>    <span class="nx">methodOne</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
</span><span class='line'>      <span class="c1">// Something</span>
</span><span class='line'>    <span class="p">},</span>
</span><span class='line'>    <span class="nx">methodTwo</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
</span><span class='line'>      <span class="c1">// Invocar al método público methodOne</span>
</span><span class='line'>      <span class="k">this</span><span class="p">.</span><span class="nx">methodOne</span><span class="p">();</span>
</span><span class='line'>    <span class="p">}</span>
</span><span class='line'>  <span class="p">};</span>
</span><span class='line'><span class="p">});</span>
</span></code></pre></td></tr></table></div></figure>


<p>En el <em>Revealing Module Pattern</em> ya no se hace necesario el <code>this</code>.</p>

<figure class='code'><figcaption><span>Revealing Module Pattern, no usa this</span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="kd">var</span> <span class="nx">Module</span> <span class="o">=</span> <span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
</span><span class='line'>  <span class="kd">var</span> <span class="nx">methodOne</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
</span><span class='line'>    <span class="c1">// Something</span>
</span><span class='line'>  <span class="p">};</span>
</span><span class='line'>
</span><span class='line'>  <span class="kd">var</span> <span class="nx">methodTwo</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
</span><span class='line'>    <span class="c1">// Invocar al método público methodOne</span>
</span><span class='line'>    <span class="nx">methodOne</span><span class="p">();</span>
</span><span class='line'>  <span class="p">};</span>
</span><span class='line'>
</span><span class='line'>  <span class="k">return</span> <span class="p">{</span>
</span><span class='line'>    <span class="nx">methodOne</span><span class="o">:</span> <span class="nx">methodOne</span><span class="p">,</span>
</span><span class='line'>    <span class="nx">methodTwo</span><span class="o">:</span> <span class="nx">methodTwo</span>
</span><span class='line'>  <span class="p">};</span>
</span><span class='line'><span class="p">});</span>
</span></code></pre></td></tr></table></div></figure>


<h2>Convención para métodos privados</h2>

<p>Puede llegar el momento que nuestro módulo crezca demasiado (regularmente sucede) y se hace un poco tedioso tratar de ver cuales métodos y propiedades son públicos y cuales privados. Por esta razón muchos siguen una convención de usar el prefijo <code>_</code> en el nombre del miembro cuando se trata de un miembro privado.</p>

<figure class='code'><figcaption><span>Convención para miembros privados</span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
<span class='line-number'>18</span>
<span class='line-number'>19</span>
<span class='line-number'>20</span>
<span class='line-number'>21</span>
<span class='line-number'>22</span>
<span class='line-number'>23</span>
<span class='line-number'>24</span>
<span class='line-number'>25</span>
<span class='line-number'>26</span>
<span class='line-number'>27</span>
</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="kd">var</span> <span class="nx">myModule</span> <span class="o">=</span> <span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
</span><span class='line'>  <span class="kd">var</span> <span class="nx">_privateProperty</span> <span class="o">=</span> <span class="mi">10</span><span class="p">;</span>
</span><span class='line'>
</span><span class='line'>  <span class="kd">var</span> <span class="nx">_privateMethodOne</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
</span><span class='line'>    <span class="c1">// Algo</span>
</span><span class='line'>  <span class="p">};</span>
</span><span class='line'>
</span><span class='line'>  <span class="kd">var</span> <span class="nx">_privateMethodTwo</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
</span><span class='line'>    <span class="c1">// Algo</span>
</span><span class='line'>    <span class="nx">_privateMethodOne</span><span class="p">();</span>
</span><span class='line'>  <span class="p">};</span>
</span><span class='line'>
</span><span class='line'>  <span class="kd">var</span> <span class="nx">publicMethodOne</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
</span><span class='line'>    <span class="c1">//...</span>
</span><span class='line'>  <span class="p">};</span>
</span><span class='line'>
</span><span class='line'>  <span class="kd">var</span> <span class="nx">publicMethodTwo</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
</span><span class='line'>    <span class="c1">// ...</span>
</span><span class='line'>  <span class="p">};</span>
</span><span class='line'>
</span><span class='line'>  <span class="k">return</span> <span class="p">{</span>
</span><span class='line'>    <span class="nx">publicProperty</span><span class="o">:</span> <span class="s2">&quot;foo&quot;</span><span class="p">,</span>
</span><span class='line'>    <span class="nx">publicMethodOne</span><span class="o">:</span> <span class="nx">publicMethodOne</span><span class="p">,</span>
</span><span class='line'>    <span class="nx">publicMethodTwo</span><span class="o">:</span> <span class="nx">publicMethodTwo</span><span class="p">,</span>
</span><span class='line'>    <span class="nx">publicMethodThree</span><span class="o">:</span> <span class="nx">_privateMethodTwo</span> <span class="c1">//Alias de _privateMethodTwo</span>
</span><span class='line'>  <span class="p">}</span>
</span><span class='line'><span class="p">})();</span>
</span></code></pre></td></tr></table></div></figure>


<h2>Conclusión</h2>

<p>Las principales ventajas de usar el <em>Module Pattern</em> son la encapsulación y limpieza de tu código. Además de tener miembros privados.</p>

<p>El <em>Revealing Module Pattern</em> nos permite ser mas consistentes en nuestros scripts.</p>

<p>Sin embargo hay algunas desventajas:</p>

<ul>
<li>Los miembros públicos y privados se acceden de forma distinta y si queremos cambiar la visibilidad en algún momento tendríamos que hacer cambios en cada parte que se usa ese miembro (solo aplica al <em>Module Pattern</em>).</li>
<li>No podemos acceder a los métodos privados desde métodos definidos en el módulo después de su creación.</li>
<li>No se pueden realizar pruebas de unidad sobre los métodos privados.</li>
<li>Su extensión es complicada.</li>
</ul>


<h2>Lectura recomendada</h2>

<ul>
<li><a href="http://toddmotto.com/mastering-the-module-pattern/">Mastering the Module Pattern</a> by <a href="https://twitter.com/toddmotto">Todd Motto</a></li>
<li><a href="http://addyosmani.com/resources/essentialjsdesignpatterns/book/#modulepatternjavascript">Learning JavaSctipt Design Patterns</a> by <a href="https://twitter.com/addyosmani">Addy Osmani</a></li>
<li><a href="http://www.adequatelygood.com/JavaScript-Module-Pattern-In-Depth.html">JavaScript Module Pattern: In-Depth</a> by <a href="https://twitter.com/bcherry">Ben Cherry</a></li>
</ul>

]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[JavaScript: El contexto (this) de una función]]></title>
    <link href="http://hardcoders.mx/blog/2014/01/30/javascript-el-contexto-this-de-una-funcion/"/>
    <updated>2014-01-30T14:00:00-07:00</updated>
    <id>http://hardcoders.mx/blog/2014/01/30/javascript-el-contexto-this-de-una-funcion</id>
    <content type="html"><![CDATA[<p><img src="http://hardcoders.mx/images/posts/jscode.jpg" class="left-thumb"></p>

<p>El contexto de una función básicamente es el valor del <code>this</code>. Dentro de una función usamos esta palabra reservada para referirnos al objeto en ejecución, tal como se hace en otros lenguajes como Java (o el <code>self</code> de Ruby).</p>

<p>Sin embargo, el valor del contexto puede ser algo tricky y más cuando se va iniciando en este mundillo de Javascript, ya que puede tener diversos valores. Entonces, ¿Cuál es valor de <code>this</code>? Bueno, depende, depende de como la función es invocada.</p>

<!-- more -->


<p>Cuando una función es invocada recibe dos parámetros implícitos adicionales (además de los parámetros que le pasemos en la invocación): <code>this</code> y <code>arguments</code>. El valor del <code>this</code> es determinado por como es invocada la función.</p>

<p>Existen 4 formas de invocar una función, se conocen como <em>invocation patterns</em>: Como método, función, constructor y usando <code>apply</code> (este último incluye <code>call</code>).</p>

<h2>Como método</h2>

<p>Primero definimos un <a href="http://hardcoders.mx/blog/2012/12/27/objetos-en-javascript/">objeto literal</a>.</p>

<figure class='code'><figcaption><span>El this en un método</span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="kd">var</span> <span class="nx">myObject</span> <span class="o">=</span> <span class="p">{</span>
</span><span class='line'>  <span class="nx">value</span><span class="o">:</span> <span class="mi">0</span><span class="p">,</span>
</span><span class='line'>  <span class="nx">increment</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">inc</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>    <span class="k">this</span><span class="p">.</span><span class="nx">value</span> <span class="o">+=</span> <span class="nx">inc</span><span class="p">;</span>
</span><span class='line'>  <span class="p">}</span>
</span><span class='line'><span class="p">};</span>
</span><span class='line'>
</span><span class='line'><span class="nx">myObject</span><span class="p">.</span><span class="nx">increment</span><span class="p">(</span><span class="mi">1</span><span class="p">);</span>
</span><span class='line'><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">myObject</span><span class="p">.</span><span class="nx">value</span><span class="p">);</span> <span class="c1">// 2</span>
</span><span class='line'>
</span><span class='line'><span class="nx">myObject</span><span class="p">.</span><span class="nx">increment</span><span class="p">(</span><span class="mi">5</span><span class="p">);</span>
</span><span class='line'><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">myObject</span><span class="p">.</span><span class="nx">value</span><span class="p">);</span> <span class="c1">// 7</span>
</span></code></pre></td></tr></table></div></figure>


<p>El <code>this</code> apunta al objeto <code>myObject</code> pudiendo modificar sus attributos. Esta asignación del <code>this</code> sucede en la invocación, es como si la función <code>increment</code> dijera ¿Quién me invocó?, en este caso <code>myObject</code> por lo tanto el valor de <code>this</code> es <code>myObject</code>.</p>

<h2>Como función</h2>

<p>Cuando una función no es una propiedad de un objeto, entonces es invocada como función: <code>sum(3,3)</code>. Cuando esto pasa el <code>this</code> dentro de la función toma el valor del objeto global. En caso de un script ejecutándose en el navegador, el <code>this</code> toma el valor del objeto <code>window</code>.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="kd">function</span> <span class="nx">sum</span><span class="p">(</span><span class="nx">x</span><span class="p">,</span> <span class="nx">y</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>  <span class="k">this</span><span class="p">.</span><span class="nx">x</span> <span class="o">=</span> <span class="nx">x</span><span class="p">;</span>
</span><span class='line'>  <span class="k">this</span><span class="p">.</span><span class="nx">y</span> <span class="o">=</span> <span class="nx">y</span><span class="p">;</span>
</span><span class='line'>  <span class="k">return</span> <span class="nx">x</span> <span class="o">+</span> <span class="nx">y</span>
</span><span class='line'><span class="p">}</span>
</span><span class='line'>
</span><span class='line'><span class="nx">sum</span><span class="p">(</span><span class="mi">2</span><span class="p">,</span><span class="mi">1</span><span class="p">);</span>
</span><span class='line'><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nb">window</span><span class="p">.</span><span class="nx">x</span><span class="p">);</span> <span class="c1">// 2, el this == window</span>
</span><span class='line'><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nb">window</span><span class="p">.</span><span class="nx">y</span><span class="p">);</span> <span class="c1">// 1</span>
</span><span class='line'>
</span><span class='line'><span class="nx">sum</span><span class="p">(</span><span class="mi">5</span><span class="p">,</span> <span class="mi">7</span><span class="p">);</span>
</span><span class='line'><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nb">window</span><span class="p">.</span><span class="nx">x</span><span class="p">);</span> <span class="c1">// 5</span>
</span><span class='line'><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nb">window</span><span class="p">.</span><span class="nx">y</span><span class="p">);</span> <span class="c1">// 7</span>
</span></code></pre></td></tr></table></div></figure>


<h2>Como constructor</h2>

<p>Si una función es invocada usando <code>new</code> se crea un objeto que apunta al <code>prototype</code> de la función, y el <code>this</code> toma el valor de este nuevo objeto.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="kd">var</span> <span class="nx">Person</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">name</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>  <span class="k">this</span><span class="p">.</span><span class="nx">name</span> <span class="o">=</span> <span class="nx">name</span><span class="p">;</span>
</span><span class='line'><span class="p">};</span>
</span><span class='line'>
</span><span class='line'><span class="nx">Person</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">getName</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
</span><span class='line'>  <span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">name</span><span class="p">;</span>
</span><span class='line'><span class="p">};</span>
</span><span class='line'>
</span><span class='line'><span class="kd">var</span> <span class="nx">p</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Person</span><span class="p">(</span><span class="s1">&#39;Isaac&#39;</span><span class="p">);</span>
</span><span class='line'><span class="nx">p</span><span class="p">.</span><span class="nx">getName</span><span class="p">();</span> <span class="c1">// Isaac, el this == p</span>
</span></code></pre></td></tr></table></div></figure>


<h2>Usando apply y call</h2>

<p>Aquí es donde viene lo interesante. El <code>apply</code> y <code>call</code> hacen lo mismo: Invocar un función con un contexto en específico. Es decir, nosotros el especificamos el valor del <code>this</code>.</p>

<p>Vamos a usar la función <code>Person</code> definida en la sección anterior:</p>

<figure class='code'><figcaption><span>Usando el apply</span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="kd">var</span> <span class="nx">isaac</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Person</span><span class="p">(</span><span class="s1">&#39;Isaac&#39;</span><span class="p">);</span>
</span><span class='line'><span class="kd">var</span> <span class="nx">zepeda</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Person</span><span class="p">(</span><span class="s1">&#39;Zepeda&#39;</span><span class="p">);</span>
</span><span class='line'>
</span><span class='line'><span class="nx">isaac</span><span class="p">.</span><span class="nx">getName</span><span class="p">();</span> <span class="c1">// Isaac</span>
</span><span class='line'><span class="nx">isaac</span><span class="p">.</span><span class="nx">getName</span><span class="p">.</span><span class="nx">apply</span><span class="p">(</span><span class="nx">zepeda</span><span class="p">);</span> <span class="c1">// &#39;Zepeda&#39;</span>
</span><span class='line'>
</span><span class='line'><span class="c1">// Otra manera</span>
</span><span class='line'><span class="nx">Person</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">getName</span><span class="p">.</span><span class="nx">apply</span><span class="p">(</span><span class="nx">zepeda</span><span class="p">);</span> <span class="c1">// &#39;Zepeda&#39;</span>
</span><span class='line'>
</span><span class='line'><span class="c1">// Ahora usando call</span>
</span><span class='line'><span class="nx">Person</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">getName</span><span class="p">.</span><span class="nx">call</span><span class="p">(</span><span class="nx">isaac</span><span class="p">);</span> <span class="c1">// &#39;Isaac&#39;</span>
</span></code></pre></td></tr></table></div></figure>


<p>En la línea 5 invocamos el metodo <code>getName</code> pero le decimos que el <code>this</code> será igual al argumento pasado en el <code>apply</code> o <code>call</code>.</p>

<p>Ahora la diferencia entre <code>apply</code> y <code>call</code> radica en como le pasamos argumentos a la función que estamos invocando. En el <code>apply</code> los argumentos deben de ir en un <code>array</code>, mientras que en el <code>call</code> los argumentos se pasan separados por comas.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="kd">var</span> <span class="nx">increment</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">inc</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>  <span class="k">this</span><span class="p">.</span><span class="nx">value</span> <span class="o">+=</span> <span class="nx">inc</span><span class="p">;</span>
</span><span class='line'><span class="p">};</span>
</span><span class='line'>
</span><span class='line'><span class="kd">var</span> <span class="nx">myObject</span> <span class="o">=</span> <span class="p">{</span>
</span><span class='line'>  <span class="nx">value</span><span class="o">:</span> <span class="mi">2</span>
</span><span class='line'><span class="p">};</span>
</span><span class='line'>
</span><span class='line'><span class="c1">// El segundo argumento es un array donde cada elemento corresponde en orden</span>
</span><span class='line'><span class="c1">// con los argumentos de la función a la que se le hace apply</span>
</span><span class='line'><span class="nx">increment</span><span class="p">.</span><span class="nx">apply</span><span class="p">(</span><span class="nx">myObject</span><span class="p">,</span> <span class="p">[</span><span class="mi">5</span><span class="p">]);</span> <span class="c1">// El this.value == myObject.value</span>
</span><span class='line'><span class="nx">myObject</span><span class="p">.</span><span class="nx">value</span><span class="p">;</span> <span class="c1">// 7</span>
</span><span class='line'>
</span><span class='line'><span class="c1">// En el call los argumentos se pasan separados por coma .call(obj, arg1, arg2, arg3..)</span>
</span><span class='line'><span class="nx">increment</span><span class="p">.</span><span class="nx">call</span><span class="p">(</span><span class="nx">myObject</span><span class="p">,</span> <span class="mi">1</span><span class="p">);</span>
</span><span class='line'><span class="nx">myObject</span><span class="p">.</span><span class="nx">value</span><span class="p">;</span> <span class="c1">// 8</span>
</span></code></pre></td></tr></table></div></figure>


<h2>Bibliografía</h2>

<ul>
<li><a href="http://www.amazon.com/JavaScript-Good-Parts-ebook/dp/B0026OR2ZY/ref=sr_1_1?ie=UTF8&amp;qid=1391114482&amp;sr=8-1&amp;keywords=javascript+the+good+parts">JavaScript: The Good Parts</a>, Douglas Crockford, O&#8217;Reilly.</li>
<li><a href="http://www.amazon.com/Secrets-JavaScript-Ninja-John-Resig/dp/193398869X/ref=sr_1_1?ie=UTF8&amp;qid=1391114440&amp;sr=8-1&amp;keywords=secret+javascript+ninja">Secrets of the JavaScript Ninja</a>, John Resig y Bear Bibeault.</li>
<li><a href="http://google.com">La Internetz</a></li>
</ul>


<p>Saludos!</p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[Aleatoriedad con Peso]]></title>
    <link href="http://hardcoders.mx/blog/2013/10/03/aleatoriedad-con-peso/"/>
    <updated>2013-10-03T11:55:00-07:00</updated>
    <id>http://hardcoders.mx/blog/2013/10/03/aleatoriedad-con-peso</id>
    <content type="html"><![CDATA[<p><img src="http://hardcoders.mx/images/posts/59862.jpg" class="left-thumb"></p>

<p>En los videojuegos, la probabilidad es una herramienta que nos da el alcance de poder realizar un juego con resultados provenientes de un azar controlado. Cuando se aplican probabilidad y estadísticas en un videojuego, el producto es un agrado consistente que no se nota a simple vista, pero que provoca que un jugador sienta que el juego tiene resultados congruentes, y no es simplemente un resultado azaroso total.</p>

<!-- more -->


<p>Esto lo tenía yo muy claro desde siempre. Sólo basta recordar algunos de los viejos clásicos “Tycooneros”, donde siempre existía una probabilidad de que ocurriera cierto evento, y era grato ver que dicha probabilidad seguía las reglas naturales del azar. Cada evento tenía su peso, y cada peso cumplía con su cometido. La probabilidad formaba y forma parte importante de los videojuegos, para darle esa sazón de realidad y coherencia a los resultados de cada acción que realizabas.</p>

<p>Hoy, después de varios golpes de cabeza y páginas de algunos conceptos básicos de la probabilidad, me construí un algoritmo que, aunque puede no ser la manera más eficiente, resultó ser eficaz al momento de querer obtener un número a base de un conjunto de probabilidades.</p>

<p>Partiendo de un arreglo de probabilidades, puedo lanzar un resultado acorde con las probabilidades especificadas, y así lograr obtener un resultado naturalmente real. Iniciemos con un simple ejemplo:</p>

<p>Se tiene una caja con 10 pelotas, de las cuales 3 son negras, 4 rojas, 1 verde y 2 azules. Por lo tanto la probabilidad de cada una sería la siguiente:</p>

<ul>
<li>Negra: 0.3</li>
<li>Roja: 0.4</li>
<li>Verde: 0.1</li>
<li>Azul: 0.2</li>
</ul>


<p>Iniciemos creando dos arreglos, uno con el nombre del objeto, y otro con la respectiva probabilidad de cada uno.</p>

<figure class='code'><figcaption><span>Definiendo variables iniciales</span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
</pre></td><td class='code'><pre><code class='lua'><span class='line'><span class="kd">local</span> <span class="n">pelotas</span> <span class="o">=</span> <span class="p">{</span><span class="err">“</span><span class="n">Negra</span><span class="err">”</span><span class="p">,</span><span class="err">”</span><span class="n">Roja</span><span class="err">”</span><span class="p">,</span><span class="err">”</span><span class="n">Verde</span><span class="err">”</span><span class="p">,</span><span class="err">”</span><span class="n">Azul</span><span class="err">”</span><span class="p">}</span>
</span><span class='line'><span class="kd">local</span> <span class="n">probabilidades</span> <span class="o">=</span> <span class="p">{</span><span class="mf">0.3</span><span class="p">,</span> <span class="mf">0.4</span><span class="p">,</span> <span class="mf">0.1</span><span class="p">,</span> <span class="mf">0.2</span><span class="p">}</span>
</span></code></pre></td></tr></table></div></figure>


<p>Ahora, crearemos el método <code>WeightedRandom</code>, el cual te regresará un número del 1 al 4 al azar (siendo que tenemos 4 tipos de pelotas) pero tomará en cuenta el respectivo peso de cada una de ellas al momento de tomar la decisión.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
<span class='line-number'>18</span>
<span class='line-number'>19</span>
<span class='line-number'>20</span>
<span class='line-number'>21</span>
<span class='line-number'>22</span>
<span class='line-number'>23</span>
<span class='line-number'>24</span>
<span class='line-number'>25</span>
<span class='line-number'>26</span>
<span class='line-number'>27</span>
</pre></td><td class='code'><pre><code class='lua'><span class='line'><span class="k">function</span> <span class="nf">WeightedRandom</span><span class="p">(</span><span class="n">array</span><span class="p">)</span>
</span><span class='line'>  <span class="kd">local</span> <span class="n">rn</span> <span class="o">=</span> <span class="mi">0</span> <span class="c1">-- La variable donde se alojará un número aleatorio</span>
</span><span class='line'>  <span class="kd">local</span> <span class="n">auxarr</span> <span class="o">=</span> <span class="p">{}</span> <span class="c1">-- Un arreglo auxiliar donde pondremos los valores acumulados</span>
</span><span class='line'>  <span class="k">for</span> <span class="n">i</span><span class="o">=</span><span class="mi">1</span><span class="p">,</span><span class="n">table</span><span class="p">.</span><span class="n">getn</span><span class="p">(</span><span class="n">array</span><span class="p">)</span> <span class="k">do</span>
</span><span class='line'>    <span class="k">if</span> <span class="p">(</span><span class="n">i</span> <span class="o">&gt;</span> <span class="mi">1</span><span class="p">)</span> <span class="k">then</span>
</span><span class='line'>      <span class="n">auxarr</span><span class="p">[</span><span class="n">i</span><span class="p">]</span> <span class="o">=</span> <span class="n">auxarr</span><span class="p">[</span><span class="n">i</span><span class="o">-</span><span class="mi">1</span><span class="p">]</span><span class="o">+</span><span class="n">array</span><span class="p">[</span><span class="n">i</span><span class="p">]</span> <span class="c1">-- Vamos acumulando los valores anteriores.</span>
</span><span class='line'>    <span class="k">else</span>
</span><span class='line'>      <span class="n">auxarr</span><span class="p">[</span><span class="n">i</span><span class="p">]</span> <span class="o">=</span> <span class="n">array</span><span class="p">[</span><span class="n">i</span><span class="p">]</span>
</span><span class='line'>    <span class="k">end</span>
</span><span class='line'>  <span class="k">end</span>
</span><span class='line'>  <span class="c1">-- El ciclo anterior nos crea un nuevo arreglo, que es el que nos ayudará a decidir cuál de los </span>
</span><span class='line'>  <span class="c1">-- números es el elegido. El arreglo que aquí se forma es el siguiente: </span>
</span><span class='line'>  <span class="c1">-- {0.3,0.7,0.9,1}</span>
</span><span class='line'>  <span class="c1">-- Una vez creado nuestro arreglo auxiliar, procedemos a generar un número aleatorio</span>
</span><span class='line'>  
</span><span class='line'>  <span class="c1">-- Aquí generaremos un número entre el 0 y el 1, </span>
</span><span class='line'>  <span class="c1">-- subiendo de 0.001++ de esta manera, tendremos mucha más precisión. </span>
</span><span class='line'>  <span class="n">rn</span> <span class="o">=</span> <span class="p">(</span><span class="nb">math.random</span><span class="p">(</span><span class="mi">1</span><span class="p">,</span><span class="mi">1000</span><span class="p">))</span><span class="o">/</span><span class="mi">1000</span>
</span><span class='line'>
</span><span class='line'>  <span class="k">for</span> <span class="n">i</span><span class="o">=</span><span class="mi">1</span><span class="p">,</span><span class="n">table</span><span class="p">.</span><span class="n">getn</span><span class="p">(</span><span class="n">auxarr</span><span class="p">)</span> <span class="k">do</span>
</span><span class='line'>    <span class="c1">-- Ahora, verificamos en qué sección del arreglo cayó el </span>
</span><span class='line'>    <span class="c1">-- número y regresamos el valor una vez lo hayamos encontrado.</span>
</span><span class='line'>    <span class="k">if</span> <span class="n">rn</span> <span class="o">&lt;=</span> <span class="n">auxarr</span><span class="p">[</span><span class="n">i</span><span class="p">]</span> <span class="k">then</span>
</span><span class='line'>      <span class="k">return</span> <span class="n">i</span>
</span><span class='line'>    <span class="k">end</span>
</span><span class='line'>  <span class="k">end</span>
</span><span class='line'><span class="k">end</span>
</span></code></pre></td></tr></table></div></figure>


<p>Ahora hagamos un par de pruebas, para ver qué tan exacto es nuestro código</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
</pre></td><td class='code'><pre><code class='lua'><span class='line'><span class="n">helparr</span> <span class="o">=</span> <span class="p">{}</span>
</span><span class='line'><span class="k">for</span> <span class="n">i</span><span class="o">=</span><span class="mi">1</span><span class="p">,</span><span class="mi">1000000</span> <span class="k">do</span>
</span><span class='line'>  <span class="c1">-- Iteramos 1000000 de veces. La tendencia de la</span>
</span><span class='line'>  <span class="c1">-- probabilidad es que, mientras más grande es el número de</span>
</span><span class='line'>  <span class="c1">-- intentos, más tiende a su probabilidad cada objeto.</span>
</span><span class='line'>  <span class="kd">local</span> <span class="n">result</span> <span class="o">=</span> <span class="n">WeightedRandom</span><span class="p">(</span><span class="n">probabilidades</span><span class="p">)</span>
</span><span class='line'>  <span class="k">if</span> <span class="p">(</span><span class="n">helparr</span><span class="p">[</span><span class="n">result</span><span class="p">]</span> <span class="o">==</span> <span class="kc">nil</span><span class="p">)</span> <span class="k">then</span>
</span><span class='line'>    <span class="n">helparr</span><span class="p">[</span><span class="n">result</span><span class="p">]</span> <span class="o">=</span> <span class="mi">1</span>
</span><span class='line'>  <span class="k">else</span>
</span><span class='line'>    <span class="n">helparr</span><span class="p">[</span><span class="n">result</span><span class="p">]</span> <span class="o">=</span> <span class="n">helparr</span><span class="p">[</span><span class="n">result</span><span class="p">]</span><span class="o">+</span><span class="mi">1</span>
</span><span class='line'>  <span class="k">end</span>
</span><span class='line'><span class="k">end</span>
</span><span class='line'>
</span><span class='line'><span class="k">for</span> <span class="n">i</span><span class="o">=</span><span class="mi">1</span><span class="p">,</span><span class="n">table</span><span class="p">.</span><span class="n">getn</span><span class="p">(</span><span class="n">helparr</span><span class="p">)</span> <span class="k">do</span>
</span><span class='line'>  <span class="nb">print</span><span class="p">(</span><span class="n">pelotas</span><span class="p">[</span><span class="n">i</span><span class="p">]</span> <span class="o">..</span> <span class="s2">&quot;</span><span class="s"> : &quot;</span> <span class="o">..</span> <span class="n">helparr</span><span class="p">[</span><span class="n">i</span><span class="p">]</span><span class="o">/</span><span class="mi">1000000</span><span class="p">)</span>
</span><span class='line'><span class="k">end</span>
</span></code></pre></td></tr></table></div></figure>


<p>El código anterior imprime:</p>

<ul>
<li>Negra : 0.300286</li>
<li>Roja : 0.398842</li>
<li>Verde : 0.099572</li>
<li>Azul : 0.2013</li>
</ul>


<p>Si observan, cada una de las pelotas está muy cerca de su probabilidad, lo que indica que el algoritmo tiene buena precisión.</p>

<p>Ahora, ¿qué pasa cuando los valores que indicamos no logran una sumatoria de 1?</p>

<p>Digamos, yo quiero poner un peso x a cada objeto, más sin embargo, no sé cuántos objetos pueden existir, puede que algunas veces solo se trate con dos objetos, puede que otras con 4, etc. Por lo tanto, no puedo especificarles a cada uno un valor que forme la sumatoria de uno en conjunto con otros, pero sí les puedo dar un peso de importancia. Para este caso, se normalizan los valores, y a partir de esto, se les genera un nuevo valor dependiendo de los demás participantes, de esta manera generando otro número aleatorio con peso. Haciendo el método aún más dinámico.</p>

<p>Veamos un ejemplo de esta situación:</p>

<p>El usuario tiene opción a adquisición de ciertos productos, de los cuales, cada vez que compra uno, este se agrega a su “caja mágica” de donde sacará uno producto al azar cada vez que se active dicha caja. Digamos que entre los productos están una pelota de baloncesto, una pelota de golf, una pelota de futbol  y una pelota de boliche. Digamos que mientras más grande es la pelota, mayor probabilidad tiene de salir pero no están todas en la caja en un principio. Mientras más vaya comprando, más se irán agregando a la caja, estando disponibles como opción al momento de abrir la caja y tomar un objeto al azar. Para ello realizamos lo siguiente:</p>

<p>Otorgamos un peso a cada objeto, en relación a los demás. Podemos utilizar el mismo método de generar una sumatoria entre todos que de igual a 1, para poder ubicarnos mejor:</p>

<ul>
<li>Pelota de baloncesto: 0.4</li>
<li>Pelota de Futbol: 0.3</li>
<li>Pelota de Boliche:0.25</li>
<li>Pelota de golf: 0.05</li>
</ul>


<p>Una vez generados los pesos, hagamos tres pares de arreglos imaginarios: el primer par será la caja teniendo solo la pelota de baloncesto y la pelota de futbol, con sus respectivas probabilidades. El segundo, será la misma caja pero con la pelota de boliche. Y el tercero, será un arreglo con todas las pelotas y todas las probabilidades.</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
</pre></td><td class='code'><pre><code class='lua'><span class='line'><span class="kd">local</span> <span class="n">pelotas1</span> <span class="o">=</span> <span class="p">{</span><span class="err">“</span><span class="n">Baloncesto</span><span class="err">”</span><span class="p">,</span><span class="err">”</span><span class="n">Futbol</span><span class="err">”</span><span class="p">}</span>
</span><span class='line'><span class="kd">local</span> <span class="n">prob1</span> <span class="o">=</span> <span class="p">{</span><span class="mf">0.4</span><span class="p">,</span><span class="mf">0.3</span><span class="p">}</span>
</span><span class='line'><span class="kd">local</span> <span class="n">pelotas2</span> <span class="o">=</span> <span class="p">{</span><span class="err">“</span><span class="n">Baloncesto</span><span class="err">”</span><span class="p">,</span><span class="err">”</span><span class="n">Futbol</span><span class="err">”</span><span class="p">,</span><span class="err">”</span><span class="n">Boliche</span><span class="err">”</span><span class="p">}</span>
</span><span class='line'><span class="kd">local</span> <span class="n">prob2</span> <span class="o">=</span> <span class="p">{</span><span class="mf">0.4</span><span class="p">,</span><span class="mf">0.3</span><span class="p">,</span><span class="mf">0.25</span><span class="p">}</span>
</span><span class='line'><span class="kd">local</span> <span class="n">pelotas</span> <span class="mi">3</span> <span class="o">=</span> <span class="p">{</span><span class="err">“</span><span class="n">Baloncesto</span><span class="err">”</span><span class="p">,</span><span class="err">”</span><span class="n">Futbol</span><span class="err">”</span><span class="p">,</span><span class="err">”</span><span class="n">Boliche</span><span class="err">”</span><span class="p">,</span><span class="err">”</span><span class="n">Golf</span><span class="err">”</span><span class="p">}</span>
</span><span class='line'><span class="kd">local</span> <span class="n">prob3</span> <span class="o">=</span> <span class="p">{</span><span class="mf">0.4</span><span class="p">,</span><span class="mf">0.3</span><span class="p">,</span><span class="mf">0.25</span><span class="p">,</span><span class="mf">0.05</span><span class="p">}</span>
</span></code></pre></td></tr></table></div></figure>


<p>Ahora, utilizaremos el mismo método WeightedRandom pero con algunas modificaciones, donde podramos ‘normalizar’ los valores obtenidos, para que estos nos den igual a 1. Lo que haremos será aplicar una simple regla de 3:</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
<span class='line-number'>18</span>
<span class='line-number'>19</span>
<span class='line-number'>20</span>
<span class='line-number'>21</span>
<span class='line-number'>22</span>
<span class='line-number'>23</span>
<span class='line-number'>24</span>
<span class='line-number'>25</span>
<span class='line-number'>26</span>
<span class='line-number'>27</span>
<span class='line-number'>28</span>
<span class='line-number'>29</span>
<span class='line-number'>30</span>
<span class='line-number'>31</span>
<span class='line-number'>32</span>
<span class='line-number'>33</span>
</pre></td><td class='code'><pre><code class='lua'><span class='line'><span class="k">function</span> <span class="nf">WeightedRandom</span><span class="p">(</span><span class="n">array</span><span class="p">)</span>
</span><span class='line'>  <span class="c1">-- Normalizando los Valores</span>
</span><span class='line'>  <span class="kd">local</span> <span class="n">sum</span> <span class="o">=</span> <span class="mi">0</span> <span class="c1">-- Variable donde se acumularán la suma de valores.</span>
</span><span class='line'>  <span class="kd">local</span> <span class="n">rn</span> <span class="o">=</span> <span class="mi">0</span> <span class="c1">-- La variable donde guardaremos el número aleatorio </span>
</span><span class='line'>  <span class="kd">local</span> <span class="n">auxarr</span> <span class="o">=</span> <span class="p">{}</span> <span class="c1">-- El arreglo auxiliar</span>
</span><span class='line'>  <span class="k">for</span> <span class="n">i</span><span class="o">=</span><span class="mi">1</span><span class="p">,</span><span class="n">table</span><span class="p">.</span><span class="n">getn</span><span class="p">(</span><span class="n">array</span><span class="p">)</span> <span class="k">do</span> <span class="c1">-- Sumamos todos los valores</span>
</span><span class='line'>    <span class="n">sum</span> <span class="o">=</span> <span class="n">sum</span> <span class="o">+</span> <span class="n">array</span><span class="p">[</span><span class="n">i</span><span class="p">]</span>
</span><span class='line'>  <span class="k">end</span>
</span><span class='line'>
</span><span class='line'>  <span class="c1">-- Hacemos lo mismo que en el anterior, solo que ahora dividimos el</span>
</span><span class='line'>  <span class="c1">-- valor del arreglo entre la suma, para que este se normalice. </span>
</span><span class='line'>  <span class="c1">-- Pues queremos que la suma de los valores nos de igual a 1.</span>
</span><span class='line'>  <span class="k">for</span> <span class="n">i</span><span class="o">=</span><span class="mi">1</span><span class="p">,</span><span class="n">table</span><span class="p">.</span><span class="n">getn</span><span class="p">(</span><span class="n">array</span><span class="p">)</span> <span class="k">do</span>
</span><span class='line'>    <span class="k">if</span> <span class="p">(</span><span class="n">i</span> <span class="o">&gt;</span> <span class="mi">1</span><span class="p">)</span> <span class="k">then</span>
</span><span class='line'>     <span class="n">auxarr</span><span class="p">[</span><span class="n">i</span><span class="p">]</span> <span class="o">=</span> <span class="n">auxarr</span><span class="p">[</span><span class="n">i</span><span class="o">-</span><span class="mi">1</span><span class="p">]</span><span class="o">+</span><span class="n">array</span><span class="p">[</span><span class="n">i</span><span class="p">]</span><span class="o">/</span><span class="n">sum</span>
</span><span class='line'>    <span class="k">else</span>
</span><span class='line'>     <span class="n">auxarr</span><span class="p">[</span><span class="n">i</span><span class="p">]</span> <span class="o">=</span> <span class="n">array</span><span class="p">[</span><span class="n">i</span><span class="p">]</span><span class="o">/</span><span class="n">sum</span>
</span><span class='line'>    <span class="k">end</span>
</span><span class='line'>  <span class="k">end</span>
</span><span class='line'>
</span><span class='line'>  <span class="c1">-- Realizamos el azar, y voilá, nos regresará el número que toca.</span>
</span><span class='line'>  <span class="n">rn</span> <span class="o">=</span> <span class="p">(</span><span class="nb">math.random</span><span class="p">(</span><span class="mi">1</span><span class="p">,</span><span class="mi">1000</span><span class="p">))</span> <span class="o">/</span> <span class="mi">1000</span>
</span><span class='line'>  <span class="k">for</span> <span class="n">i</span><span class="o">=</span><span class="mi">1</span><span class="p">,</span><span class="n">table</span><span class="p">.</span><span class="n">getn</span><span class="p">(</span><span class="n">auxarr</span><span class="p">)</span> <span class="k">do</span>
</span><span class='line'>    <span class="k">if</span> <span class="n">rn</span> <span class="o">&lt;=</span> <span class="n">auxarr</span><span class="p">[</span><span class="n">i</span><span class="p">]</span> <span class="k">then</span>
</span><span class='line'>      <span class="k">return</span> <span class="n">i</span>
</span><span class='line'>    <span class="k">end</span>
</span><span class='line'>  <span class="k">end</span>
</span><span class='line'>  <span class="k">return</span> <span class="n">table</span><span class="p">.</span><span class="n">getn</span><span class="p">(</span><span class="n">auxarr</span><span class="p">)</span>
</span><span class='line'>  <span class="c1">-- Este return es un “por si las moscas”</span>
</span><span class='line'>  <span class="c1">-- debido a que existe cierta posibilidad de que, por falta de</span>
</span><span class='line'>  <span class="c1">-- decimales, la suma total no de a 1 si no a algo como 0.998~ y, </span>
</span><span class='line'>  <span class="c1">-- Por lo que, si nos diera un 1, en el random, nunca encontraría lugar.</span>
</span><span class='line'><span class="k">end</span>
</span></code></pre></td></tr></table></div></figure>


<p>Y con las modificaciones hechas, podemos realizar un par de pruebas:</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
<span class='line-number'>18</span>
<span class='line-number'>19</span>
<span class='line-number'>20</span>
<span class='line-number'>21</span>
<span class='line-number'>22</span>
<span class='line-number'>23</span>
<span class='line-number'>24</span>
<span class='line-number'>25</span>
<span class='line-number'>26</span>
<span class='line-number'>27</span>
<span class='line-number'>28</span>
<span class='line-number'>29</span>
<span class='line-number'>30</span>
<span class='line-number'>31</span>
<span class='line-number'>32</span>
<span class='line-number'>33</span>
<span class='line-number'>34</span>
<span class='line-number'>35</span>
<span class='line-number'>36</span>
<span class='line-number'>37</span>
<span class='line-number'>38</span>
<span class='line-number'>39</span>
<span class='line-number'>40</span>
<span class='line-number'>41</span>
<span class='line-number'>42</span>
<span class='line-number'>43</span>
<span class='line-number'>44</span>
<span class='line-number'>45</span>
<span class='line-number'>46</span>
<span class='line-number'>47</span>
<span class='line-number'>48</span>
<span class='line-number'>49</span>
<span class='line-number'>50</span>
<span class='line-number'>51</span>
<span class='line-number'>52</span>
<span class='line-number'>53</span>
<span class='line-number'>54</span>
<span class='line-number'>55</span>
<span class='line-number'>56</span>
<span class='line-number'>57</span>
<span class='line-number'>58</span>
<span class='line-number'>59</span>
<span class='line-number'>60</span>
</pre></td><td class='code'><pre><code class='lua'><span class='line'><span class="n">helparr1</span> <span class="o">=</span> <span class="p">{}</span>
</span><span class='line'><span class="n">helparr2</span> <span class="o">=</span> <span class="p">{}</span>
</span><span class='line'><span class="n">helparr3</span> <span class="o">=</span> <span class="p">{}</span>
</span><span class='line'><span class="k">for</span> <span class="n">i</span><span class="o">=</span><span class="mi">1</span><span class="p">,</span><span class="mi">1000000</span> <span class="k">do</span>
</span><span class='line'>  <span class="kd">local</span> <span class="n">result1</span> <span class="o">=</span> <span class="n">WeightedRandom</span><span class="p">(</span><span class="n">prob1</span><span class="p">)</span>
</span><span class='line'>  <span class="kd">local</span> <span class="n">result2</span> <span class="o">=</span> <span class="n">WeightedRandom</span><span class="p">(</span><span class="n">prob2</span><span class="p">)</span>
</span><span class='line'>  <span class="kd">local</span> <span class="n">result3</span> <span class="o">=</span> <span class="n">WeightedRandom</span><span class="p">(</span><span class="n">prob3</span><span class="p">)</span>
</span><span class='line'>  <span class="k">if</span> <span class="p">(</span><span class="n">helparr1</span><span class="p">[</span><span class="n">result1</span><span class="p">]</span> <span class="o">==</span> <span class="kc">nil</span><span class="p">)</span> <span class="k">then</span>
</span><span class='line'>    <span class="n">helparr1</span><span class="p">[</span><span class="n">result1</span><span class="p">]</span> <span class="o">=</span> <span class="mi">1</span>
</span><span class='line'>  <span class="k">else</span>
</span><span class='line'>    <span class="n">helparr1</span><span class="p">[</span><span class="n">result1</span><span class="p">]</span> <span class="o">=</span> <span class="n">helparr1</span><span class="p">[</span><span class="n">result1</span><span class="p">]</span><span class="o">+</span><span class="mi">1</span>
</span><span class='line'>  <span class="k">end</span>
</span><span class='line'>  <span class="k">if</span> <span class="p">(</span><span class="n">helparr2</span><span class="p">[</span><span class="n">result2</span><span class="p">]</span> <span class="o">==</span> <span class="kc">nil</span><span class="p">)</span> <span class="k">then</span>
</span><span class='line'>    <span class="n">helparr2</span><span class="p">[</span><span class="n">result2</span><span class="p">]</span> <span class="o">=</span> <span class="mi">1</span>
</span><span class='line'>  <span class="k">else</span>
</span><span class='line'>    <span class="n">helparr2</span><span class="p">[</span><span class="n">result2</span><span class="p">]</span> <span class="o">=</span> <span class="n">helparr2</span><span class="p">[</span><span class="n">result2</span><span class="p">]</span><span class="o">+</span><span class="mi">1</span>
</span><span class='line'>  <span class="k">end</span>
</span><span class='line'>  <span class="k">if</span> <span class="p">(</span><span class="n">helparr3</span><span class="p">[</span><span class="n">result3</span><span class="p">]</span> <span class="o">==</span> <span class="kc">nil</span><span class="p">)</span> <span class="k">then</span>
</span><span class='line'>    <span class="n">helparr3</span><span class="p">[</span><span class="n">result3</span><span class="p">]</span> <span class="o">=</span> <span class="mi">1</span>
</span><span class='line'>  <span class="k">else</span>
</span><span class='line'>    <span class="n">helparr3</span><span class="p">[</span><span class="n">result3</span><span class="p">]</span> <span class="o">=</span> <span class="n">helparr3</span><span class="p">[</span><span class="n">result3</span><span class="p">]</span><span class="o">+</span><span class="mi">1</span>
</span><span class='line'>  <span class="k">end</span>
</span><span class='line'><span class="k">end</span>
</span><span class='line'>
</span><span class='line'><span class="nb">print</span><span class="p">(</span><span class="s2">&quot;</span><span class="s">-------------Prueba 1---------------&quot;</span><span class="p">)</span>
</span><span class='line'><span class="k">for</span> <span class="n">i</span><span class="o">=</span><span class="mi">1</span><span class="p">,</span><span class="n">table</span><span class="p">.</span><span class="n">getn</span><span class="p">(</span><span class="n">helparr1</span><span class="p">)</span> <span class="k">do</span>
</span><span class='line'>  <span class="nb">print</span><span class="p">(</span><span class="n">pelotas1</span><span class="p">[</span><span class="n">i</span><span class="p">]</span><span class="o">..</span> <span class="s2">&quot;</span><span class="s"> : &quot;</span><span class="o">..</span><span class="n">helparr1</span><span class="p">[</span><span class="n">i</span><span class="p">]</span><span class="o">/</span><span class="mi">1000000</span><span class="p">)</span>
</span><span class='line'><span class="k">end</span>
</span><span class='line'><span class="nb">print</span><span class="p">(</span><span class="s2">&quot;</span><span class="s">-------------------------------------&quot;</span><span class="p">)</span>
</span><span class='line'>
</span><span class='line'><span class="nb">print</span><span class="p">(</span><span class="s2">&quot;</span><span class="s">-------------Prueba 2----------------&quot;</span><span class="p">)</span>
</span><span class='line'><span class="k">for</span> <span class="n">i</span><span class="o">=</span><span class="mi">1</span><span class="p">,</span><span class="n">table</span><span class="p">.</span><span class="n">getn</span><span class="p">(</span><span class="n">helparr2</span><span class="p">)</span> <span class="k">do</span>
</span><span class='line'>  <span class="nb">print</span><span class="p">(</span><span class="n">pelotas2</span><span class="p">[</span><span class="n">i</span><span class="p">]</span><span class="o">..</span> <span class="s2">&quot;</span><span class="s"> : &quot;</span><span class="o">..</span><span class="n">helparr2</span><span class="p">[</span><span class="n">i</span><span class="p">]</span><span class="o">/</span><span class="mi">1000000</span><span class="p">)</span>
</span><span class='line'><span class="k">end</span>
</span><span class='line'><span class="nb">print</span><span class="p">(</span><span class="s2">&quot;</span><span class="s">-------------------------------------&quot;</span><span class="p">)</span>
</span><span class='line'>
</span><span class='line'><span class="nb">print</span><span class="p">(</span><span class="s2">&quot;</span><span class="s">--------------Prueba 3---------------&quot;</span><span class="p">)</span>
</span><span class='line'><span class="k">for</span> <span class="n">i</span><span class="o">=</span><span class="mi">1</span><span class="p">,</span><span class="n">table</span><span class="p">.</span><span class="n">getn</span><span class="p">(</span><span class="n">helparr3</span><span class="p">)</span> <span class="k">do</span>
</span><span class='line'>  <span class="nb">print</span><span class="p">(</span><span class="n">pelotas3</span><span class="p">[</span><span class="n">i</span><span class="p">]</span><span class="o">..</span> <span class="s2">&quot;</span><span class="s"> : &quot;</span><span class="o">..</span><span class="n">helparr3</span><span class="p">[</span><span class="n">i</span><span class="p">]</span><span class="o">/</span><span class="mi">1000000</span><span class="p">)</span>
</span><span class='line'><span class="k">end</span>
</span><span class='line'><span class="nb">print</span><span class="p">(</span><span class="s2">&quot;</span><span class="s">--------------------------------------&quot;</span><span class="p">)</span>
</span><span class='line'>
</span><span class='line'><span class="cm">--[[</span>
</span><span class='line'><span class="cm">Imprime:</span>
</span><span class='line'><span class="cm">-------------Prueba 1---------------</span>
</span><span class='line'><span class="cm">Baloncesto : 0.571195</span>
</span><span class='line'><span class="cm">Futbol : 0.428805</span>
</span><span class='line'><span class="cm">-------------------------------------</span>
</span><span class='line'><span class="cm">-------------Prueba 2----------------</span>
</span><span class='line'><span class="cm">Baloncesto : 0.421145</span>
</span><span class='line'><span class="cm">Futbol : 0.313976</span>
</span><span class='line'><span class="cm">Boliche : 0.264879</span>
</span><span class='line'><span class="cm">-------------------------------------</span>
</span><span class='line'><span class="cm">--------------Prueba 3---------------</span>
</span><span class='line'><span class="cm">Baloncesto : 0.400662</span>
</span><span class='line'><span class="cm">Futbol : 0.299869</span>
</span><span class='line'><span class="cm">Boliche : 0.249288</span>
</span><span class='line'><span class="cm">Golf : 0.050181</span>
</span><span class='line'><span class="cm">--------------------------------------</span>
</span><span class='line'><span class="cm">--]]</span>
</span></code></pre></td></tr></table></div></figure>


<p>Como ven, este método es más dinámico, pues nos permite meter a la caja el número de objetos que queramos, siempre y cuando estos tengan un peso respectivo y relacionado con los otros objetos, sin necesidad de que éste sume 1.</p>

<p>Y así, es como es posible incluir la probabilidad dentro de un videojuego, ahora solo falta usar tu imaginación para crear las situaciones probables dentro de tu mundo aleatoriamente controlado.</p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[Autenticación con token en Ruby on Rails y Devise]]></title>
    <link href="http://hardcoders.mx/blog/2013/05/12/autenticacion-con-token-en-ruby-on-rails-y-devise/"/>
    <updated>2013-05-12T13:05:00-07:00</updated>
    <id>http://hardcoders.mx/blog/2013/05/12/autenticacion-con-token-en-ruby-on-rails-y-devise</id>
    <content type="html"><![CDATA[<p>Un pequeño y sencillo tutorial para crear una autenticación basada en tokens en Ruby on Rails y <a href="https://github.com/plataformatec/devise">Devise</a>. Para este tutorial se requiere conocimiento básico en Rails y tener Rails y Devise instalado.</p>

<!-- more -->


<p>Este tutorial toma por hecho que ya tienen instalado y funcionando <a href="https://github.com/plataformatec/devise">Devise</a> en su proyecto.</p>

<ol>
<li>Editar el archivo de configuración de devise en tu proyecto</li>
</ol>


<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>/config/initializers/devise.rb</span></code></pre></td></tr></table></div></figure>


<p>Agregamos estas dos líneas que tal vez ya están comentadas</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
</pre></td><td class='code'><pre><code class='ruby'><span class='line'><span class="n">config</span><span class="o">.</span><span class="n">skip_session_storage</span> <span class="o">=</span> <span class="o">[</span><span class="ss">:http_auth</span><span class="p">,</span> <span class="ss">:token_auth</span><span class="o">]</span>
</span><span class='line'><span class="n">config</span><span class="o">.</span><span class="n">token_authentication_key</span> <span class="o">=</span> <span class="ss">:auth_token</span>
</span></code></pre></td></tr></table></div></figure>


<ol>
<li>Crear la migración que agregue los campos necesarios para el uso de Token’, en mi caso el modelo que uso para Devise es User y la tabla users.</li>
</ol>


<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
</pre></td><td class='code'><pre><code class='ruby'><span class='line'><span class="k">class</span> <span class="nc">AddTokenToUsers</span> <span class="o">&lt;</span> <span class="ss">ActiveRecord</span><span class="p">:</span><span class="ss">:Migration</span>
</span><span class='line'>  <span class="k">def</span> <span class="nc">self</span><span class="o">.</span><span class="nf">up</span>
</span><span class='line'>      <span class="n">change_table</span><span class="p">(</span><span class="ss">:users</span><span class="p">)</span> <span class="k">do</span> <span class="o">|</span><span class="n">t</span><span class="o">|</span>
</span><span class='line'>          <span class="c1"># Token authenticatable</span>
</span><span class='line'>          <span class="n">t</span><span class="o">.</span><span class="n">string</span> <span class="ss">:authentication_token</span>
</span><span class='line'>      <span class="k">end</span>
</span><span class='line'>      
</span><span class='line'>      <span class="n">add_index</span> <span class="ss">:users</span><span class="p">,</span> <span class="ss">:authentication_token</span><span class="p">,</span> <span class="ss">:unique</span> <span class="o">=&gt;</span> <span class="kp">true</span>
</span><span class='line'>  <span class="k">end</span>
</span><span class='line'>
</span><span class='line'>  <span class="k">def</span> <span class="nc">self</span><span class="o">.</span><span class="nf">down</span>
</span><span class='line'>      <span class="k">raise</span> <span class="ss">ActiveRecord</span><span class="p">:</span><span class="ss">:IrreversibleMigration</span>
</span><span class='line'>  <span class="k">end</span>
</span><span class='line'><span class="k">end</span>
</span></code></pre></td></tr></table></div></figure>


<p>3.- Creamos nuestro controlador para el manejo de Tokens, creamos nuestro controlador desde la consola que en este caso lo llamaremos Tokens</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='ruby'><span class='line'><span class="n">rails</span> <span class="n">generate</span> <span class="n">controller</span> <span class="no">Tokens</span>
</span></code></pre></td></tr></table></div></figure>


<p>Una vez creado nos vamos al archivo generado que en mi caso seria <code>app/controllers/tokens_controller.rb</code></p>

<p>y escribimos un código similar a este:</p>

<figure class='code'><figcaption><span>tokens_controller.rb</span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
<span class='line-number'>18</span>
<span class='line-number'>19</span>
<span class='line-number'>20</span>
<span class='line-number'>21</span>
<span class='line-number'>22</span>
<span class='line-number'>23</span>
<span class='line-number'>24</span>
<span class='line-number'>25</span>
<span class='line-number'>26</span>
<span class='line-number'>27</span>
<span class='line-number'>28</span>
<span class='line-number'>29</span>
<span class='line-number'>30</span>
<span class='line-number'>31</span>
<span class='line-number'>32</span>
<span class='line-number'>33</span>
<span class='line-number'>34</span>
<span class='line-number'>35</span>
<span class='line-number'>36</span>
<span class='line-number'>37</span>
<span class='line-number'>38</span>
<span class='line-number'>39</span>
<span class='line-number'>40</span>
<span class='line-number'>41</span>
<span class='line-number'>42</span>
<span class='line-number'>43</span>
<span class='line-number'>44</span>
<span class='line-number'>45</span>
<span class='line-number'>46</span>
<span class='line-number'>47</span>
<span class='line-number'>48</span>
<span class='line-number'>49</span>
<span class='line-number'>50</span>
<span class='line-number'>51</span>
<span class='line-number'>52</span>
<span class='line-number'>53</span>
<span class='line-number'>54</span>
<span class='line-number'>55</span>
<span class='line-number'>56</span>
<span class='line-number'>57</span>
<span class='line-number'>58</span>
<span class='line-number'>59</span>
<span class='line-number'>60</span>
<span class='line-number'>61</span>
<span class='line-number'>62</span>
<span class='line-number'>63</span>
<span class='line-number'>64</span>
<span class='line-number'>65</span>
<span class='line-number'>66</span>
<span class='line-number'>67</span>
<span class='line-number'>68</span>
<span class='line-number'>69</span>
<span class='line-number'>70</span>
<span class='line-number'>71</span>
<span class='line-number'>72</span>
</pre></td><td class='code'><pre><code class='ruby'><span class='line'><span class="k">class</span> <span class="nc">TokensController</span> <span class="o">&lt;</span> <span class="no">ApplicationController</span>
</span><span class='line'>  
</span><span class='line'>  <span class="n">skip_before_filter</span> <span class="ss">:verify_authenticity_token</span>
</span><span class='line'>  <span class="n">respond_to</span> <span class="ss">:json</span>
</span><span class='line'>
</span><span class='line'>  <span class="c1"># crear token POST /tokens.json</span>
</span><span class='line'>  <span class="k">def</span> <span class="nf">create</span>
</span><span class='line'>      <span class="c1"># tomamos las variables del POST</span>
</span><span class='line'>      <span class="n">email</span> <span class="o">=</span> <span class="n">params</span><span class="o">[</span><span class="ss">:email</span><span class="o">]</span>
</span><span class='line'>      <span class="n">password</span> <span class="o">=</span> <span class="n">params</span><span class="o">[</span><span class="ss">:password</span><span class="o">]</span>
</span><span class='line'>
</span><span class='line'>      <span class="c1"># aquí mandamos un mensaje por si no nos hacen un post a /tokens sin .json</span>
</span><span class='line'>      <span class="k">if</span> <span class="n">request</span><span class="o">.</span><span class="n">format</span> <span class="o">!=</span> <span class="ss">:json</span>
</span><span class='line'>          <span class="n">render</span> <span class="ss">:status</span><span class="o">=&gt;</span><span class="mi">406</span><span class="p">,</span> <span class="ss">:json</span><span class="o">=&gt;</span><span class="p">{</span><span class="ss">:message</span><span class="o">=&gt;</span><span class="s2">&quot;solo se aceptan peticiones json :(&quot;</span><span class="p">}</span>
</span><span class='line'>          <span class="k">return</span>
</span><span class='line'>      <span class="k">end</span>
</span><span class='line'>  
</span><span class='line'>      <span class="c1"># aquí mandamos un mensaje por si no nos mandaron las variables email o password</span>
</span><span class='line'>      <span class="k">if</span> <span class="n">email</span><span class="o">.</span><span class="n">nil?</span>  <span class="o">||</span> <span class="n">password</span><span class="o">.</span><span class="n">nil?</span>
</span><span class='line'>          <span class="n">render</span> <span class="ss">:status</span><span class="o">=&gt;</span><span class="mi">400</span><span class="p">,</span>
</span><span class='line'>          <span class="ss">:json</span><span class="o">=&gt;</span><span class="p">{</span><span class="ss">:message</span><span class="o">=&gt;</span><span class="s2">&quot;Algo anda mal con tu POST :(&quot;</span><span class="p">}</span>
</span><span class='line'>          <span class="k">return</span>
</span><span class='line'>      <span class="k">end</span>
</span><span class='line'>  
</span><span class='line'>      <span class="c1">#buscamos el usuario por el email</span>
</span><span class='line'>      <span class="vi">@user</span> <span class="o">=</span> <span class="no">User</span><span class="o">.</span><span class="n">find_by_email</span><span class="p">(</span><span class="n">email</span><span class="o">.</span><span class="n">downcase</span><span class="p">)</span>
</span><span class='line'>  
</span><span class='line'>      <span class="c1">#enviamos un mensaje por si no existe el usuario</span>
</span><span class='line'>      <span class="k">if</span> <span class="vi">@user</span><span class="o">.</span><span class="n">nil?</span>
</span><span class='line'>      <span class="n">render</span> <span class="ss">:status</span><span class="o">=&gt;</span><span class="mi">401</span><span class="p">,</span> <span class="ss">:json</span><span class="o">=&gt;</span><span class="p">{</span><span class="ss">:message</span><span class="o">=&gt;</span><span class="s2">&quot;tu email o password son incorrectos :(&quot;</span><span class="p">}</span>
</span><span class='line'>      <span class="k">return</span>
</span><span class='line'>      <span class="k">end</span>
</span><span class='line'>  
</span><span class='line'>      <span class="c1">#generamos el token y lo guardamos</span>
</span><span class='line'>      <span class="vi">@user</span><span class="o">.</span><span class="n">ensure_authentication_token!</span>
</span><span class='line'>  
</span><span class='line'>      <span class="c1">#validamos el password y si es correcto devolvemos el token :)</span>
</span><span class='line'>      <span class="k">if</span> <span class="vi">@user</span><span class="o">.</span><span class="n">valid_password?</span><span class="p">(</span><span class="n">password</span><span class="p">)</span>
</span><span class='line'>          <span class="n">render</span> <span class="ss">:status</span><span class="o">=&gt;</span><span class="mi">200</span><span class="p">,</span> <span class="ss">:json</span><span class="o">=&gt;</span><span class="p">{</span><span class="ss">:token</span><span class="o">=&gt;</span><span class="vi">@user</span><span class="o">.</span><span class="n">authentication_token</span><span class="p">}</span>
</span><span class='line'>      <span class="k">else</span>
</span><span class='line'>      <span class="n">render</span> <span class="ss">:status</span><span class="o">=&gt;</span><span class="mi">401</span><span class="p">,</span> <span class="ss">:json</span><span class="o">=&gt;</span><span class="p">{</span><span class="ss">:message</span><span class="o">=&gt;</span><span class="s2">&quot;tu email o password son incorrectos :(&quot;</span><span class="p">}</span>
</span><span class='line'>      <span class="k">end</span>
</span><span class='line'>  <span class="k">end</span>
</span><span class='line'>
</span><span class='line'>  <span class="c1"># elimar token DELETE /tokens/sznxbcmshad.json</span>
</span><span class='line'>  <span class="k">def</span> <span class="nf">destroy</span>
</span><span class='line'>      <span class="c1"># buscamos el usuario por el token</span>
</span><span class='line'>      <span class="vi">@user</span> <span class="o">=</span> <span class="no">User</span><span class="o">.</span><span class="n">find_by_authentication_token</span><span class="p">(</span><span class="n">params</span><span class="o">[</span><span class="ss">:id</span><span class="o">]</span><span class="p">)</span>
</span><span class='line'>      
</span><span class='line'>      <span class="c1"># si lo encontramos eliminamos el token y si no le mandamos un mensaje</span>
</span><span class='line'>      <span class="k">if</span> <span class="vi">@user</span>
</span><span class='line'>          <span class="vi">@user</span><span class="o">.</span><span class="n">reset_authentication_token!</span>
</span><span class='line'>          <span class="n">render</span> <span class="ss">:status</span><span class="o">=&gt;</span><span class="mi">200</span><span class="p">,</span> <span class="ss">:json</span><span class="o">=&gt;</span><span class="p">{</span><span class="ss">:token</span><span class="o">=&gt;</span><span class="n">params</span><span class="o">[</span><span class="ss">:id</span><span class="o">]</span><span class="p">}</span>
</span><span class='line'>      <span class="k">else</span>
</span><span class='line'>          <span class="n">render</span> <span class="ss">:status</span><span class="o">=&gt;</span><span class="mi">404</span><span class="p">,</span> <span class="ss">:json</span><span class="o">=&gt;</span><span class="p">{</span><span class="ss">:message</span><span class="o">=&gt;</span><span class="s1">&#39;token no valido.&#39;</span><span class="p">,</span> <span class="ss">:token</span> <span class="o">=&gt;</span> <span class="n">params</span><span class="o">[</span><span class="ss">:id</span><span class="o">]</span><span class="p">}</span>
</span><span class='line'>      <span class="k">end</span>
</span><span class='line'>  <span class="k">end</span>
</span><span class='line'>
</span><span class='line'>  <span class="c1"># esta función la hicimos solo para obtener los datos del usuario con la sesión abierta</span>
</span><span class='line'>  <span class="k">def</span> <span class="nf">getUser</span>
</span><span class='line'>      <span class="c1"># de nuevo si no nos piden un json los mandamos a volar </span>
</span><span class='line'>      <span class="k">if</span> <span class="n">request</span><span class="o">.</span><span class="n">format</span> <span class="o">!=</span> <span class="ss">:json</span>
</span><span class='line'>          <span class="n">render</span> <span class="ss">:status</span><span class="o">=&gt;</span><span class="mi">406</span><span class="p">,</span> <span class="ss">:json</span><span class="o">=&gt;</span><span class="p">{</span><span class="ss">:message</span><span class="o">=&gt;</span><span class="s2">&quot;solo json :(&quot;</span><span class="p">}</span>
</span><span class='line'>          <span class="k">return</span>
</span><span class='line'>      <span class="k">end</span>
</span><span class='line'>
</span><span class='line'>      <span class="c1"># aqui les mandamos el json del usuario</span>
</span><span class='line'>      <span class="n">user</span> <span class="o">=</span> <span class="n">current_user</span>
</span><span class='line'>      <span class="n">render</span> <span class="ss">:status</span><span class="o">=&gt;</span><span class="mi">200</span><span class="p">,</span> <span class="ss">:json</span><span class="o">=&gt;</span><span class="p">{</span><span class="ss">:user</span><span class="o">=&gt;</span><span class="n">user</span><span class="p">}</span>
</span><span class='line'>  <span class="k">end</span>
</span><span class='line'>
</span><span class='line'><span class="k">end</span>
</span></code></pre></td></tr></table></div></figure>


<p>Ya creado nuestro controlador le damos acceso en archivo de rutas de nuestro proyecto.</p>

<figure class='code'><figcaption><span>config/routes.rb</span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
</pre></td><td class='code'><pre><code class='ruby'><span class='line'><span class="n">resources</span> <span class="ss">:tokens</span><span class="p">,</span><span class="ss">:only</span> <span class="o">=&gt;</span> <span class="o">[</span><span class="ss">:create</span><span class="p">,</span> <span class="ss">:destroy</span><span class="o">]</span> <span class="k">do</span>
</span><span class='line'>  <span class="n">collection</span> <span class="k">do</span>
</span><span class='line'>      <span class="n">get</span> <span class="s1">&#39;user&#39;</span><span class="p">,</span> <span class="ss">:action</span> <span class="o">=&gt;</span> <span class="s1">&#39;getUser&#39;</span>
</span><span class='line'>  <span class="k">end</span>
</span><span class='line'><span class="k">end</span>
</span></code></pre></td></tr></table></div></figure>


<p>Con esto ya tenemos habilitado a Devise para que funcione con tokens :)</p>

<p>por ejemplo si quisiéramos enviar un post al un controlador llamado categories la url sería:
<code>localhost:3000/categories?auth_token=t0k3n-t0k3n</code></p>

<p>Si quisiéramos iniciar sesión tendríamos que enviar un POST a <code>http://localhost:3000/tokens.json</code> con el email y el password, esto nos regresara un json con el objeto token, y si quieres obtener los datos del usuario tomamos la variable token y mandamos un GET a <code>http://localhost:3000/tokens/user.json?auth_token=t0k3n-t0k3n</code></p>

<p>que nos regresara un json con los datos del usuario y para cerrar la sesión solo tendriamos que mandar un DELETE a <code>http://localhost:3000/tokens/t0k3n-t0k3n.json</code> y listo :).</p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[Instalar Ruby y Rails]]></title>
    <link href="http://hardcoders.mx/blog/2013/04/23/instalar-ruby-y-rails/"/>
    <updated>2013-04-23T10:26:00-07:00</updated>
    <id>http://hardcoders.mx/blog/2013/04/23/instalar-ruby-y-rails</id>
    <content type="html"><![CDATA[<p><img src="http://1.bp.blogspot.com/-20zATidMWZw/T9MIcbm1SpI/AAAAAAAACmo/pnnZs2Ed3Tg/s1600/rubyrails.jpg)" class="left-thumb"></p>

<p>Antes de comenzar para los usuarios de <strong><em>Windows</em></strong> mi recomendación es que dejen de usarlo, pero por lo pronto necesitaran <a href="http://railsinstaller.org/">Rails Installer</a> que ya incluye (Ruby, Rails, SQLite, Etc), <em>Bajo su propio riesgo</em>.</p>

<p>Si eres usuario <strong><em>Mac (OSX) o Linux</em></strong> ya debes de tener instalado Ruby pero es mejor hacerlo de esta manera, lo primero que necesitamos es <a href="https://rvm.io/">RVM</a> (Ruby Version Manager) la cual que nos permitirá gestionar dentro de un mismo ordenador, varios entornos de intérpretes de Ruby y conjuntos de <a href="http://rubygems.org/">gemas</a> (las gemas en Ruby podríamos decir que son como los JAR en Java o como los plugins de PHP).</p>

<!-- more -->




<figure class='code'><figcaption><span>Puedes seleccionar la versión de Ruby que deseas instalar en este caso la última estable</span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='bash'><span class='line'><span class="nv">$ </span>curl -L https://get.rvm.io | bash -s stable --rails --autolibs<span class="o">=</span>enabled <span class="c"># Or, --ruby=1.9.3</span>
</span></code></pre></td></tr></table></div></figure>




<figure class='code'><figcaption><span>Verifica que versión de Ruby tienes instalada</span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='bash'><span class='line'>ruby -v
</span></code></pre></td></tr></table></div></figure>


<p>Con los pasos anteriores también se instaló la gema de Rails pero solo para estar seguros puedes usar el siguiente comando</p>

<figure class='code'><figcaption><span>Instalar gema de Rails</span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='bash'><span class='line'>gem install rails
</span></code></pre></td></tr></table></div></figure>


<h2>Recomendaciones</h2>

<p>Ahora ya tienes listo tu entorno de desarrollo para <strong><em>Ruby on Rails</em></strong> y puedes tomar en cuenta las siguientes recomendaciones:</p>

<ul>
<li><strong>Editor de texto Fancy</strong>

<ul>
<li>Te recomiendo utilizar <a href="http://www.sublimetext.com/2">Sublime Text</a> es ligero, sencillo y multiplataforma.</li>
</ul>
</li>
<li><strong>MySQL como motor de BD</strong>

<ul>
<li>Por default Rails usa SQLite como motor de BD pero yo te recomiendo usar <a href="http://dev.mysql.com/downloads/">MySQL</a></li>
</ul>
</li>
</ul>


<figure class='code'><figcaption><span>Instalar MySQL</span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
</pre></td><td class='code'><pre><code class='bash'><span class='line'><span class="c">#Si usas Mac (OSx) y Tienes Brew</span>
</span><span class='line'>brew install mysql
</span><span class='line'>
</span><span class='line'><span class="c">#Si usas Ubuntu</span>
</span><span class='line'>apt-get install mysql-server
</span></code></pre></td></tr></table></div></figure>


<h2>¿Que es Ruby on Rails?</h2>

<p>Si no tienes idea de por donde empezar puedes probar con los siguientes links:</p>

<ul>
<li><a href="http://tryruby.org">Try Ruby</a> &#8220;Ruby desde Cero&#8221;</li>
<li><a href="http://railsforzombies.org/">Rails for Zombies</a> &#8220;Ruby desde Cero&#8221;</li>
</ul>


<h2>Que comience la magia</h2>

<p>Ahora puedes empezar a codear tu Idea Millonaria en Rails</p>

<figure class='code'><figcaption><span>Crea un nuevo proyecto en Rails</span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='bash'><span class='line'>rails new idea_millonaria <span class="c">#Si quieres usar MySQL como DB, -d mysql</span>
</span></code></pre></td></tr></table></div></figure>

]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[Templates con Underscore.js]]></title>
    <link href="http://hardcoders.mx/blog/2013/01/08/templates-con-underscore-dot-js/"/>
    <updated>2013-01-08T21:00:00-07:00</updated>
    <id>http://hardcoders.mx/blog/2013/01/08/templates-con-underscore-dot-js</id>
    <content type="html"><![CDATA[<p>En este post veremos como compilar templates del lado de cliente con Javascript y <a href="http://underscorejs.org/">Underscore.js</a>, por que usar templates del lado del cliente, disfrutenlo y dejen sus comentarios.</p>

<!-- more -->


<h2>¿Qué es Underscore.js?</h2>

<p><a href="http://underscorejs.org/">Underscore.js</a> es una librería de Javascript que contiene alrededor de 80 funciones que nos hacen la vida en Javascript más sencilla. Tiene funciones como <strong>map</strong>, <strong>each</strong>, entre otras muchas.</p>

<p>Los templates son sólo una parte de todas sus aplicaciones, que veremos a continuación.</p>

<h2>¿Para que me sirven templates del lado del cliente?</h2>

<p>Actualmente muchas aplicaciones estan hechas en Javascript que consume una API o un servicio, esta API regresa muchas veces los datos en JSON.</p>

<p>Por ejemplo, tenemos un listado de personas y en nuestro cliente hacemos una llamada AJAX que nos regresa los datos de esas personas en JSON y luego tenemos que desplegar esa información en una tabla. Cuando no usamos Templates lo que tenemos que hacer es recorrer ese arreglo de objetos e ir creando en una cádena el HTML y luego ponerla en el lugar del DOM que queremos, por ejemplo usando jQuery:</p>

<figure class='code'><figcaption><span>No usando templates</span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
<span class='line-number'>18</span>
</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="nx">$</span><span class="p">(</span><span class="nb">document</span><span class="p">).</span><span class="nx">ready</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
</span><span class='line'>  <span class="nx">$</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span>
</span><span class='line'>      <span class="s1">&#39;/url/recurso&#39;</span><span class="p">,</span>
</span><span class='line'>      <span class="kd">function</span><span class="p">(</span><span class="nx">data</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>          <span class="c1">// Suponiendo que data tiene id, nombre, edad</span>
</span><span class='line'>          <span class="kd">var</span> <span class="nx">html</span> <span class="o">=</span> <span class="s1">&#39;&lt;table&gt;&lt;tr&gt;&lt;th&gt;ID&lt;/th&gt;&lt;th&gt;Nombre&lt;/th&gt;&lt;th&gt;Edad&lt;/th&gt;&lt;/tr&gt;&#39;</span><span class="p">;</span>
</span><span class='line'>          <span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">i</span> <span class="o">&lt;</span> <span class="nx">data</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>              <span class="nx">html</span> <span class="o">+=</span> <span class="s1">&#39;&lt;tr&gt;&#39;</span>
</span><span class='line'>                  <span class="o">+</span> <span class="s1">&#39;&lt;td&gt;&#39;</span> <span class="o">+</span> <span class="nx">data</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">id</span> <span class="o">+</span> <span class="s1">&#39;&lt;/td&gt;&#39;</span>
</span><span class='line'>                  <span class="o">+</span> <span class="s1">&#39;&lt;td&gt;&#39;</span> <span class="o">+</span> <span class="nx">data</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">nombre</span> <span class="o">+</span> <span class="s1">&#39;&lt;/td&gt;&#39;</span>
</span><span class='line'>                  <span class="o">+</span> <span class="s1">&#39;&lt;td&gt;&#39;</span> <span class="o">+</span> <span class="nx">data</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">edad</span> <span class="o">+</span> <span class="s1">&#39;&lt;/td&gt;&#39;</span>
</span><span class='line'>                  <span class="o">+</span> <span class="s1">&#39;&lt;/tr&gt;&#39;</span><span class="p">;</span>
</span><span class='line'>          <span class="p">}</span>
</span><span class='line'>          <span class="nx">html</span> <span class="o">+=</span> <span class="s1">&#39;&lt;/table&gt;&#39;</span><span class="p">;</span>
</span><span class='line'>          <span class="nx">$</span><span class="p">(</span><span class="s1">&#39;#contenedor&#39;</span><span class="p">).</span><span class="nx">html</span><span class="p">(</span><span class="nx">html</span><span class="p">);</span>
</span><span class='line'>      <span class="p">}</span>    
</span><span class='line'>  <span class="p">);</span>
</span><span class='line'><span class="p">});</span>
</span></code></pre></td></tr></table></div></figure>


<p>Puede haber muchas variantes de lo anterior, pero sería algo similar. Esto podría funcionar por un tiempo, pero cuando la aplicación crezca esto se va a volver tedioso, poco escalable y difícil de mantener. Aquí es donde entran al rescate los templates del lado del cliente.</p>

<h2>Usando Templates</h2>

<p>En Underscore.js la función a usar para generar los templates será <code>_.template(templateString, [data], [settings])</code>. El primer argumento es un string que contiene el html a compilar. El segundo es un objeto javascript con las variables que se usaremos en el template.</p>

<p>Cuando usamos solo el primer argumento la función nos regresará una función que después ejecutaremos, la cual nos regresará un string con el html compilado.</p>

<iframe style="width: 100%; height: 220px" src="http://jsfiddle.net/keogh/XZQQA/embedded/js,html,result/presentation"></iframe>


<p>Cuando usamos los dos primeros argumentos la función regresará un string con HTML compilado listo para meterlo al DOM.</p>

<iframe style="width: 100%; height: 150px" src="http://jsfiddle.net/keogh/uxyvy/embedded/js,html,result/presentation"></iframe>


<h2>Los Tags</h2>

<p>Dentro del HTML a compilar queremos imprimir variables y a veces ejecutar código, esto va dentro de unos tags especiales, los cuales pueden cambiarse (más de eso adelante). Underscore.js tiene 3 tags por default, cada uno con diferentes funcionalidades:</p>

<ul>
<li><strong>Evaluate:</strong> <code>&lt;% ... %&gt;</code> Ejecuta código Javascript.</li>
<li><strong>Interpolate:</strong> <code>&lt;%= ... %&gt;</code> Sirve para imprimir variables. (También podemos imprimir variables usando el <em>evaluate</em> y la función <code>print</code> de Javascript <code>&lt;% print(nombre); %&gt;)</code>.</li>
<li><strong>Escape:</strong> <code>&lt;%- ... %&gt;</code> Sirve para código HTML escapado.</li>
</ul>


<h2>Las Variables</h2>

<p>Las variables se pasan al compilador como un <a href="http://hardcoders.mx/blog/2012/12/27/objetos-en-javascript/">objeto literal</a>, ya sea como segundo parámetro de <code>_.template</code> o como primer parámetro de la función que nos regresa cuando usamos solo el primer parámetro en <code>_.template</code>.</p>

<p>En el template el nombre de la variable sera el <em>key</em> de los elementos del objeto literal, y el valor de la variable será el <em>value</em> de los elementos del objeto literal.</p>

<figure class='code'><figcaption><span>Variables en el template</span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="kd">var</span> <span class="nx">data</span> <span class="o">=</span> <span class="p">{</span>
</span><span class='line'>  <span class="nx">nombre</span><span class="o">:</span> <span class="s2">&quot;Isaac&quot;</span><span class="p">,</span>
</span><span class='line'>  <span class="nx">edad</span><span class="o">:</span> <span class="mi">28</span>
</span><span class='line'><span class="p">}</span>
</span><span class='line'>
</span><span class='line'><span class="c1">// nombre para obtener &quot;Isaac&quot; y edad para obtener &quot;28&quot;</span>
</span><span class='line'><span class="nx">$</span><span class="p">(</span><span class="s1">&#39;#contenido&#39;</span><span class="p">).</span><span class="nx">html</span><span class="p">(</span> <span class="nx">_</span><span class="p">.</span><span class="nx">template</span><span class="p">(</span><span class="s2">&quot;Hola &lt;%= nombre %&gt; tienes &lt;%= edad %&gt; años&quot;</span><span class="p">,</span> <span class="nx">data</span><span class="p">)</span> <span class="p">);</span>
</span></code></pre></td></tr></table></div></figure>


<h2>A Seguir Templeteando</h2>

<p>Cuando el template es más complejo, como el primer ejemplo, escribir el código HTML como string para pasarlo como primer argumento sería poco efectivo. Entonces lo que haremos será tener el código HTML junto con el javascript a compilar dentro de una etiqueta <code>&lt;script type="text/template"&gt;...&lt;/script&gt;</code>.</p>

<p>Entonces siguiendo esto tendríamos (el template esta en la pestaña HTML):</p>

<iframe style="width: 100%; height: 350px" src="http://jsfiddle.net/keogh/JUvnD/embedded/js,html,result/presentation"></iframe>


<p>En lugar de un <code>for</code> podríamos usar la función <code>each</code> de Underscore.js.</p>

<iframe style="width: 100%; height: 350px" src="http://jsfiddle.net/keogh/46haD/embedded/js,html,result/presentation"></iframe>


<h2>Tags Personalizados</h2>

<p>En lugar de usar el <em>ERB-style</em> podemos crear nuestros propios tags, ya sea porque nos sentimos más cómodos usando <em>{{ &#8230; }}</em> u otros. Por ejemplo, cuando estás en Ruby on Rails los tags usados son los mismos que usa underscore.js por default <code>&lt;% ... %&gt;</code>, esto traera problemas.</p>

<p>Entonces podemos definir 3 nuevos tags: <em>{{ &#8230; }}</em> para <em>evaluate</em>, <em>{{= &#8230; }}</em> para <em>interpolate</em>, y <em>{{- &#8230; }}</em> para <em>escape</em>.</p>

<p>Esto lo hacemos mandadole un objeto como tercer parámetro a <code>_.template</code> o definirlo globalmente para todos las compilaciones que haremos en nuestra aplicación con la variable <code>_.templateSettings</code></p>

<figure class='code'><figcaption><span>Tags Personalizados</span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="c1">// Usando como tercer parámetro</span>
</span><span class='line'><span class="nx">_</span><span class="p">.</span><span class="nx">template</span><span class="p">(</span><span class="s2">&quot;Hola &quot;</span><span class="p">,</span> <span class="p">{</span><span class="nx">nombre</span><span class="o">:</span> <span class="s2">&quot;Isaac&quot;</span><span class="p">},</span> <span class="p">{</span><span class="nx">interpolate</span><span class="o">:</span> <span class="sr">/\{\{\=(.+?)\}\}/g</span><span class="p">,});</span>
</span><span class='line'>
</span><span class='line'><span class="c1">// Definiedolo globalmente</span>
</span><span class='line'><span class="nx">_</span><span class="p">.</span><span class="nx">templateSettings</span> <span class="o">=</span> <span class="p">{</span>
</span><span class='line'>  <span class="nx">interpolate</span><span class="o">:</span> <span class="sr">/\{\{\=(.+?)\}\}/g</span><span class="p">,</span>
</span><span class='line'>  <span class="nx">evaluate</span><span class="o">:</span> <span class="sr">/\{\{(.+?)\}\}/g</span><span class="p">,</span>
</span><span class='line'>  <span class="nx">escape</span><span class="o">:</span> <span class="sr">/\{\{\-(.+?)\}\}/g</span>
</span><span class='line'><span class="p">}</span>
</span></code></pre></td></tr></table></div></figure>


<p>Fuente: <a href="http://stackoverflow.com/questions/7514922/rails-with-underscore-js-templates">http://stackoverflow.com/questions/7514922/rails-with-underscore-js-templates</a></p>

<p>Con esto podemos modificar nuestro ejemplo y cambiar los tags:</p>

<iframe style="width: 100%; height: 350px" src="http://jsfiddle.net/keogh/RxunZ/embedded/js,html,result/presentation"></iframe>


<h2>Fin</h2>

<p>Con esto terminamos el post de templates del lado del cliente usando Underscore.js, si quieres aprender más de Underscore.js y todas sus funciones visita <a href="http://underscorejs.org">http://underscorejs.org</a>.</p>

<p>En entregas posteriores trataré de desentrañar todas las funciones de Underscore.js con ejemplos. No olviden dejar sus comentarios, dudas, etc.</p>

<p>A Codear!!</p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[nodejs para novatos - parte 1]]></title>
    <link href="http://hardcoders.mx/blog/2012/12/28/nodejs-para-novatos-parte-1/"/>
    <updated>2012-12-28T09:39:00-07:00</updated>
    <id>http://hardcoders.mx/blog/2012/12/28/nodejs-para-novatos-parte-1</id>
    <content type="html"><![CDATA[<p>Como nuestro amigo <a href="http://soygeek.com.mx">Isaac Zepeda</a> se fue a lo grande con <a href="http://hardcoders.mx/blog/2012/12/11/chat-basico-con-socket-dot-io/">su anterior post sobe nodejs</a>, no me queda más que tratar de escribir una pequeña introducción mas tranquila y civil, sin grandes pretensiones, sobre nodejs, para tratar de ayudarlos a entender de que va todo esto.</p>

<!-- more -->


<p></p>

<h2>Introducción</h2>

<p><a href="http://nodejs.org">Node.js</a> es una plataforma construida sobre la <a href="http://code.google.com/p/v8/">v8 engine de google</a>, el javascript engine libre que le da vida a chrome. Es decir, es un conjunto de librerías montadas sobre la v8 engine que nos permite correr javascript fuera del browser, y enviarlo al lado del servidor.</p>

<p>¿Que tiene de especial esto?, pues que la manera que esta estructurado hace sencillo realizar aplicaciones de red de manera rápida y escalable (O al menos ese es su pitch). Node.js sigue un modelo event-driven non-blocking (más sobre eso mas adelante) el cual se lleva muy bien con javascript y le permite atender una gran cantidad de usuarios sin mayores problemas.</p>

<p>Con esto dicho vamos de lleno a estamparnos con el clásico hello world con un pequeño twist.</p>

<figure class='code'><figcaption><span>hello-world.js</span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;hello&#39;</span><span class="p">);</span>
</span><span class='line'><span class="nx">setTimeout</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
</span><span class='line'>  <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;world&#39;</span><span class="p">);</span>
</span><span class='line'><span class="p">},</span> <span class="mi">3000</span><span class="p">);</span>
</span></code></pre></td></tr></table></div></figure>


<p>Si tenemos instalado node lo anterior lo podemos correr con <code>node hello-world.js</code>.</p>

<p>Esto nos imprime <code>hello</code> y tres segundos después imprime <code>world</code>, esto nos muestra un par de cosas, la primera es que tenemos disponible nuestro viejo amigo <code>setTimeout</code>. La segunda y quizás más importante es que una aplicación de node no termina hasta que no se ejecuten todos sus callbacks pendientes.</p>

<h2>Hello world web</h2>

<p>Ahora vamos a hacer un pequeño salto quantico a lo siguiente:</p>

<figure class='code'><figcaption><span>hello-world-http.js</span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="kd">var</span> <span class="nx">http</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">&#39;http&#39;</span><span class="p">);</span>
</span><span class='line'>
</span><span class='line'><span class="kd">var</span> <span class="nx">processRequest</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">request</span><span class="p">,</span> <span class="nx">response</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>  <span class="nx">response</span><span class="p">.</span><span class="nx">writeHead</span><span class="p">(</span><span class="mi">200</span><span class="p">,</span> <span class="p">{</span><span class="s1">&#39;Content-Type&#39;</span><span class="o">:</span> <span class="s1">&#39;text/plain&#39;</span><span class="p">});</span>
</span><span class='line'>  <span class="nx">response</span><span class="p">.</span><span class="nx">end</span><span class="p">(</span><span class="s1">&#39;Hello World\n&#39;</span><span class="p">);</span>
</span><span class='line'><span class="p">};</span>
</span><span class='line'>
</span><span class='line'><span class="kd">var</span> <span class="nx">server</span> <span class="o">=</span> <span class="nx">http</span><span class="p">.</span><span class="nx">createServer</span><span class="p">(</span><span class="nx">processRequest</span><span class="p">);</span>
</span><span class='line'><span class="nx">server</span><span class="p">.</span><span class="nx">listen</span><span class="p">(</span><span class="mi">1337</span><span class="p">,</span> <span class="s1">&#39;127.0.0.1&#39;</span><span class="p">);</span>
</span><span class='line'><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;Server running at http://127.0.0.1:1337/&#39;</span><span class="p">);</span>
</span></code></pre></td></tr></table></div></figure>


<p>Si corremos esto crearemos un pequeño webserver que escucha en la interfaz local en el puerto <code>1337</code>, este webserver responde a toda petición con el texto <code>hello world</code>, si abren su navegador en <code>http://localhost:1337</code> pueden ver el resultado.</p>

<p>Ahora el análisis, en la primer linea <code>var http = require('http');</code>, importamos <a href="http://nodejs.org/api/http.html">el modulo http</a> y lo asignamos a la variable <code>http</code>.</p>

<p>Todas las librerías integradas en nodejs están definidas en módulos, para <em>importar</em> estos módulos tenemos que usar la función <code>require</code>, y asignar el resultado de la llamada a una variable la cual quedara enlazada a la definición del modulo y por medio de ella podremos llamar sus distintos métodos. Uno también puede definir sus propios módulos, y puede usar módulos third-party, pero eso esta fuera del alcance de esta entrada.</p>

<p>Entre la linea 3 y 6 definimos una función la cual usaremos para responder las solicitudes http, esta función espera recibir un request http, y tiene como obligación realizar las llamadas necesarias sobre <code>response</code> para darle respuesta a la solicitud http. Lo único que hace en este ejemplo es escribir el status code <code>200 OK</code>, escribe el header <code>Content-Type: 'plain/text'</code>, escribe <code>hello world</code>en la respuesta y termina la respuesta.</p>

<p>Por si sola esta función no hace nada, tiene que ser llamada en el contexto correcto para que pueda dar respuesta a las peticiones http.</p>

<p>Ahora en la linea 8 <code>var server = http.createServer(processRequest);</code> llamamos al método <a href="http://nodejs.org/api/http.html#http_http_createserver_requestlistener">createServer del modulo http</a>, y como parámetro enviamos una referencia a la función <code>processRequest</code>recién definida, esta llamada nos regresara un objeto http server la cual estamos asignando a <code>server</code>. Este objeto mandara llamar a la función que indicamos (<code>processRequest</code>) por cada petición http que reciba.</p>

<p>Por ultimo, solo hace falta iniciar el servidor, eso lo logramos con la linea 9 donde realizamos <code>server.listen(1337, '127.0.0.1');</code>, aquí solo indicamos a que interfaz de red y puerto enlazaremos nuestro servidor y logramos que empiece a aceptar peticiones http y estas sean procesadas por nuestra función <code>processRequest</code>.</p>

<p>Comúnmente este ejemplo y otros similares los encontramos un poco diferentes, en lugar de definir el método previamente es común verlo inline, como por ejemplo:</p>

<figure class='code'><figcaption><span>hello-world-http-2.js</span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="kd">var</span> <span class="nx">http</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">&#39;http&#39;</span><span class="p">);</span>
</span><span class='line'>
</span><span class='line'><span class="nx">http</span><span class="p">.</span><span class="nx">createServer</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">request</span><span class="p">,</span> <span class="nx">response</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>  <span class="nx">response</span><span class="p">.</span><span class="nx">writeHead</span><span class="p">(</span><span class="mi">200</span><span class="p">,</span> <span class="p">{</span><span class="s1">&#39;Content-Type&#39;</span><span class="o">:</span> <span class="s1">&#39;text/plain&#39;</span><span class="p">});</span>
</span><span class='line'>  <span class="nx">response</span><span class="p">.</span><span class="nx">end</span><span class="p">(</span><span class="s1">&#39;Hello World\n&#39;</span><span class="p">);</span>
</span><span class='line'><span class="p">}).</span><span class="nx">listen</span><span class="p">(</span><span class="mi">1337</span><span class="p">,</span> <span class="s1">&#39;127.0.0.1&#39;</span><span class="p">);</span>
</span><span class='line'><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;Server running at http://127.0.0.1:1337/&#39;</span><span class="p">);</span>
</span></code></pre></td></tr></table></div></figure>


<p>Primordialmente es una cuestión de estilo, recomiendo usar la versión que les sea mas clara.</p>

<h2>Servidor de eco.</h2>

<p>Ahora veamos el siguiente ejemplo:</p>

<figure class='code'><figcaption><span>echo.js</span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="kd">var</span> <span class="nx">net</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">&#39;net&#39;</span><span class="p">);</span>
</span><span class='line'>
</span><span class='line'><span class="nx">net</span><span class="p">.</span><span class="nx">createServer</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">socket</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>  <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;Sup buddy&#39;</span><span class="p">);</span>
</span><span class='line'><span class="p">}).</span><span class="nx">listen</span><span class="p">(</span><span class="mi">8080</span><span class="p">);</span>
</span></code></pre></td></tr></table></div></figure>


<p>En este ejemplo usamos el <a href="http://nodejs.org/api/net.html">modulo net</a> el cual nos permite crear clientes y servidores TCP, si se fijan el ejemplo es muy similar, solo que el callback del método <code>createServer</code> recibe un solo parámetro, socket.</p>

<p>Cada que nuestro server reciba una nueva conexión TCP, invocara nuestro callback y como parámetro nos enviara el objeto socket que nos sirve para comunicarnos con el cliente que recién se conecta, si queremos leer la información que nos envíen, o bien escribir de vuelta lo haremos sobre este objeto.</p>

<p>En ese caso lo único que estamos haciendo es imprimir en la consola, por lo que si lo corremos <code>node echo.js</code>, y posteriormente nos conectamos, con, por ejemplo telnet, recibiremos el mensaje en la consola. <code>telnet localhost 8080</code>.</p>

<p>Vamos a aumentar el ejemplo ahora con la funcionalidad que realmente estamos buscando:</p>

<figure class='code'><figcaption><span>echo-v2.js</span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="kd">var</span> <span class="nx">net</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">&#39;net&#39;</span><span class="p">);</span>
</span><span class='line'>
</span><span class='line'><span class="nx">net</span><span class="p">.</span><span class="nx">createServer</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">socket</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>  <span class="nx">socket</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="s1">&#39;data&#39;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">data</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>    <span class="nx">socket</span><span class="p">.</span><span class="nx">write</span><span class="p">(</span><span class="nx">data</span><span class="p">);</span>
</span><span class='line'>  <span class="p">});</span>
</span><span class='line'><span class="p">}).</span><span class="nx">listen</span><span class="p">(</span><span class="mi">8080</span><span class="p">);</span>
</span></code></pre></td></tr></table></div></figure>


<p>Dentro del callback de la nueva conexión tenemos ahora la siguiente llamada <code>socket.on('data', ...</code>. Lo que estamos haciendo es suscribirnos al evento <code>data</code> del socket que recién recibimos. Este evento se lanza cada que recibimos información por parte del socket, y en el callback nos envía como parámetro los datos recibidos <code>function(data) { ...</code>.</p>

<p>En este callback lo único que hacemos es escribir de vuelta lo que recibimos al socket con <code>socket.write(data);</code>, con lo cual tenemos un servidor de eco en TCP, es decir, todo lo que recibe lo envía de vuelta a el cliente.</p>

<h2>Próximas entregas</h2>

<p>En las próximas entregas seguiremos explorando Node.js e intentare exponer su modelo asíncrono y como nos afecta al hacer nuestras aplicaciones.</p>

<p>Hasta la próxima :)</p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[Objetos en Javascript]]></title>
    <link href="http://hardcoders.mx/blog/2012/12/27/objetos-en-javascript/"/>
    <updated>2012-12-27T19:00:00-07:00</updated>
    <id>http://hardcoders.mx/blog/2012/12/27/objetos-en-javascript</id>
    <content type="html"><![CDATA[<p>En Javascript hay diversas formas de crear objetos, todas son válidas y sirven para cumplir diversos propósitos. Javascript está basado en prototipos y no en clases (como Java o C#). En este tutorial veremos:</p>

<ul>
<li>Objetos simples.</li>
<li>Objetos literales.</li>
<li>Funciones como constructores.</li>
<li>Herencia.</li>
</ul>


<!-- more -->


<h2>Objetos Simples</h2>

<p>La forma más simple de crear un objeto es instanciar un objeto de tipo <code>Object</code> y agregarle las propiedades y métodos dinámicamente:</p>

<figure class='code'><figcaption><span>Objetos simples</span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="kd">var</span> <span class="nx">persona</span> <span class="o">=</span> <span class="k">new</span> <span class="nb">Object</span><span class="p">();</span>
</span><span class='line'><span class="nx">persona</span><span class="p">.</span><span class="nx">nombre</span> <span class="o">=</span> <span class="s2">&quot;Isaac&quot;</span><span class="p">;</span>
</span><span class='line'><span class="nx">persona</span><span class="p">.</span><span class="nx">edad</span> <span class="o">=</span> <span class="mi">28</span><span class="p">;</span>
</span><span class='line'><span class="nx">persona</span><span class="p">.</span><span class="nx">imprimir</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
</span><span class='line'>  <span class="nx">alert</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">nombre</span> <span class="o">+</span> <span class="s1">&#39; &#39;</span> <span class="o">+</span> <span class="k">this</span><span class="p">.</span><span class="nx">edad</span><span class="p">);</span>
</span><span class='line'><span class="p">};</span>
</span><span class='line'>
</span><span class='line'><span class="nx">persona</span><span class="p">.</span><span class="nx">imprimir</span><span class="p">();</span> <span class="c1">// Mostrará un alert &quot;Isaac 28&quot;</span>
</span></code></pre></td></tr></table></div></figure>


<p>Cuando agregamos propiedades de forma dinámica, estas solo se agregan al objeto en cuestión y nuevos objetos instanciados no tendrán estas propiedades:</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="kd">var</span> <span class="nx">persona</span> <span class="o">=</span> <span class="k">new</span> <span class="nb">Object</span><span class="p">();</span>
</span><span class='line'><span class="nx">persona</span><span class="p">.</span><span class="nx">nombre</span> <span class="o">=</span> <span class="s2">&quot;Isaac&quot;</span><span class="p">;</span>
</span><span class='line'>
</span><span class='line'><span class="kd">var</span> <span class="nx">persona2</span> <span class="o">=</span> <span class="k">new</span> <span class="nb">Object</span><span class="p">();</span>
</span><span class='line'>
</span><span class='line'><span class="nx">alert</span><span class="p">(</span><span class="nx">persona</span><span class="p">.</span><span class="nx">nombre</span><span class="p">);</span> <span class="c1">// Muestra &quot;Isaac&quot;</span>
</span><span class='line'><span class="nx">alert</span><span class="p">(</span><span class="nx">persona2</span><span class="p">.</span><span class="nx">nombre</span><span class="p">);</span> <span class="c1">// Muestra &quot;undefined&quot;</span>
</span></code></pre></td></tr></table></div></figure>


<h2>Objetos Literales</h2>

<p><del>También podemos crear objetos usando el Javascript Object Notation (JSON).</del></p>

<p><strong>Nota Aclaratoria:</strong> usar objetos literales no significa usar JSON, JSON es una notación basada ó influenciada por la sintaxis de los objetos literales de Javascript. Un object literal es una manera de definir un objeto conforme a la sintaxis definida de Javascript. JSON en cambio es un formato de intercambio de información que se codifica con un formato similar al definido para los objetos literales. <em>(Gracias a Alberto Ávila por esta aclaración en sus comentarios)</em></p>

<p>En un objeto literal las propiedades son creadas como lista de pares key/value.</p>

<figure class='code'><figcaption><span>Objetos literales</span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="kd">var</span> <span class="nx">persona</span> <span class="o">=</span> <span class="p">{</span>
</span><span class='line'>  <span class="nx">nombre</span><span class="o">:</span> <span class="s2">&quot;Isaac&quot;</span><span class="p">,</span>
</span><span class='line'>  <span class="nx">edad</span><span class="o">:</span> <span class="mi">28</span><span class="p">,</span>
</span><span class='line'>  <span class="nx">imprimir</span><span class="o">:</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
</span><span class='line'>      <span class="nx">alert</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">nombre</span> <span class="o">+</span> <span class="s2">&quot; &quot;</span> <span class="o">+</span> <span class="k">this</span><span class="p">.</span><span class="nx">edad</span><span class="p">);</span>
</span><span class='line'>  <span class="p">}</span>
</span><span class='line'><span class="p">};</span>
</span><span class='line'>
</span><span class='line'><span class="nx">persona</span><span class="p">.</span><span class="nx">nombre</span> <span class="o">=</span> <span class="s2">&quot;Isaac Zepeda&quot;</span><span class="p">;</span> <span class="c1">// Puedo modificar sus propiedades</span>
</span><span class='line'><span class="nx">persona</span><span class="p">.</span><span class="nx">imprimir</span><span class="p">();</span> <span class="c1">// E invocar sus métodos</span>
</span></code></pre></td></tr></table></div></figure>


<h2>Funciones como constructores</h2>

<p>Como pueden notar cuando construimos objetos simples o literales no hay manera de crear nuevas o varias instancias de estos objetos, digamos que necesito un objeto <code>Persona</code> y crear varias instancias de el, aquí es donde entran las funciones como constructores:</p>

<figure class='code'><figcaption><span>Funciones como constructores</span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
<span class='line-number'>18</span>
<span class='line-number'>19</span>
</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="kd">function</span> <span class="nx">Persona</span><span class="p">()</span> <span class="p">{</span>
</span><span class='line'>  <span class="c1">// Para definir variables de instancia usamos la palabra reservada &#39;this&#39;</span>
</span><span class='line'>  <span class="k">this</span><span class="p">.</span><span class="nx">nombre</span> <span class="o">=</span> <span class="s2">&quot;Isaac&quot;</span><span class="p">;</span>
</span><span class='line'>  <span class="k">this</span><span class="p">.</span><span class="nx">edad</span> <span class="o">=</span> <span class="mi">28</span><span class="p">;</span>
</span><span class='line'>
</span><span class='line'>  <span class="c1">// Esta es una variable local a la función y no puede ser accedida desde fuera.</span>
</span><span class='line'>  <span class="kd">var</span> <span class="nx">count</span><span class="p">;</span>
</span><span class='line'><span class="p">}</span>
</span><span class='line'>
</span><span class='line'><span class="c1">// Para instanciar un nuevo objeto usamos la palabra reservada new</span>
</span><span class='line'><span class="kd">var</span> <span class="nx">persona1</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Persona</span><span class="p">();</span>
</span><span class='line'><span class="kd">var</span> <span class="nx">persona2</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Persona</span><span class="p">();</span>
</span><span class='line'><span class="nx">alert</span><span class="p">(</span><span class="nx">persona1</span><span class="p">.</span><span class="nx">nombre</span><span class="p">);</span> <span class="c1">// Isaac</span>
</span><span class='line'>
</span><span class='line'><span class="nx">persona2</span><span class="p">.</span><span class="nx">nombre</span> <span class="o">=</span> <span class="s2">&quot;Pancho&quot;</span><span class="p">;</span>
</span><span class='line'><span class="nx">alert</span><span class="p">(</span><span class="nx">persona2</span><span class="p">.</span><span class="nx">nombre</span><span class="p">);</span> <span class="c1">// Pancho</span>
</span><span class='line'>
</span><span class='line'><span class="c1">// undefined, no se puede acceder ya que es una variable local no de instancia</span>
</span><span class='line'><span class="nx">alert</span><span class="p">(</span><span class="nx">persona1</span><span class="p">.</span><span class="nx">count</span><span class="p">);</span>
</span></code></pre></td></tr></table></div></figure>


<p>Ahora podemos pasarle valores al constructor para que establezca <code>nombre</code> y <code>edad</code> con el valor que nos plazca, y si no están definidos que tome un valor por default usando el operador <code>||</code>.</p>

<figure class='code'><figcaption><span>Constructor con argumentos</span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="kd">function</span> <span class="nx">Persona</span><span class="p">(</span><span class="nx">nombre</span><span class="p">,</span> <span class="nx">edad</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>  <span class="c1">// si nombre es indefinido o nulo tomará el valor &quot;Isaac&quot;</span>
</span><span class='line'>  <span class="k">this</span><span class="p">.</span><span class="nx">nombre</span> <span class="o">=</span> <span class="nx">nombre</span> <span class="o">||</span> <span class="s2">&quot;Isaac&quot;</span><span class="p">;</span>
</span><span class='line'>  <span class="k">this</span><span class="p">.</span><span class="nx">edad</span> <span class="o">=</span> <span class="nx">edad</span> <span class="o">||</span> <span class="mi">28</span><span class="p">;</span>
</span><span class='line'><span class="p">}</span>
</span><span class='line'>
</span><span class='line'><span class="kd">var</span> <span class="nx">p1</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Persona</span><span class="p">(</span><span class="s2">&quot;Alberto&quot;</span><span class="p">,</span> <span class="mi">17</span><span class="p">);</span>
</span><span class='line'><span class="kd">var</span> <span class="nx">p2</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Persona</span><span class="p">();</span>
</span></code></pre></td></tr></table></div></figure>


<h3>Agregando Métodos</h3>

<p>Hay dos maneras de agregar métodos, la primera es agregarlos como cualquier otra propiedad dentro del constructor y la otra definiéndolo es su <code>prototype</code>.</p>

<figure class='code'><figcaption><span>Defiendo el método dentro del constructor</span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="kd">function</span> <span class="nx">Persona</span><span class="p">()</span> <span class="p">{</span>
</span><span class='line'>  <span class="k">this</span><span class="p">.</span><span class="nx">nombre</span> <span class="o">=</span> <span class="s2">&quot;Isaac&quot;</span><span class="p">;</span>
</span><span class='line'>
</span><span class='line'>  <span class="k">this</span><span class="p">.</span><span class="nx">caminar</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
</span><span class='line'>      <span class="nx">alert</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">nombre</span> <span class="o">+</span> <span class="s2">&quot; está caminando&quot;</span><span class="p">);</span>
</span><span class='line'>  <span class="p">}</span>
</span><span class='line'><span class="p">}</span>
</span></code></pre></td></tr></table></div></figure>




<figure class='code'><figcaption><span>Definiendo el método es su prototype</span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="kd">function</span> <span class="nx">Persona</span><span class="p">()</span> <span class="p">{</span>
</span><span class='line'>  <span class="k">this</span><span class="p">.</span><span class="nx">nombre</span> <span class="o">=</span> <span class="s2">&quot;Isaac&quot;</span><span class="p">;</span>
</span><span class='line'><span class="p">}</span>
</span><span class='line'>
</span><span class='line'><span class="nx">Persona</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">caminar</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
</span><span class='line'>  <span class="nx">alert</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">nombre</span> <span class="o">+</span> <span class="s2">&quot; está caminando&quot;</span><span class="p">);</span>
</span><span class='line'><span class="p">}</span>
</span></code></pre></td></tr></table></div></figure>


<p>Ambos funcionan correctamente, pero hay pequeñas diferencias.</p>

<p>Si se define el método dentro del constructor cada vez que se instancie el objeto creará una propiedad con un objeto de tipo función, así si el objeto <code>Persona</code> se instancia 3 veces se crearán 3 funciones en memoria que hacen lo mismo. En cambio si lo creamos en el <code>prototype</code> la función se creará solo una vez, y todas las instancias de <code>Persona</code> apuntarán a la misma función, usando menos memoria y mejorando un poco el performance.</p>

<p>Sin embargo, cuando creamos un método en el <code>prototype</code>, este no puede acceder a las variables locales del constructor:</p>

<figure class='code'><figcaption><span>Accediendo a variables locales</span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="kd">function</span> <span class="nx">Persona</span><span class="p">()</span> <span class="p">{</span>
</span><span class='line'>  <span class="kd">var</span> <span class="nx">count</span> <span class="o">=</span> <span class="mi">1</span><span class="p">;</span>
</span><span class='line'>
</span><span class='line'>  <span class="k">this</span><span class="p">.</span><span class="nx">caminar</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
</span><span class='line'>      <span class="nx">alert</span><span class="p">(</span><span class="nx">count</span><span class="p">);</span> <span class="c1">// Muestra 1;</span>
</span><span class='line'>  <span class="p">}</span>
</span><span class='line'><span class="p">}</span>
</span><span class='line'>
</span><span class='line'><span class="nx">Persona</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">correr</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
</span><span class='line'>  <span class="nx">alert</span><span class="p">(</span><span class="nx">count</span><span class="p">);</span> <span class="c1">// Dará error ya que count no esta definida</span>
</span><span class='line'><span class="p">}</span>
</span></code></pre></td></tr></table></div></figure>


<p>El <code>prototype</code> es un objeto que tienen todos los objetos en Javascript, cuando queremos acceder a una propiedad <code>Persona.nombre</code> Javascript busca la propiedad en el objeto mismo, si no lo encuentra va lo busca al <code>prototype</code>, si no la encuentra busca dentro del <code>prototype</code> del objeto <code>prototype</code>, esto se conoce como <em>prototype-chain</em> y nos sirve para la herencia.</p>

<h2>Herencia</h2>

<p>A través del <em>prototype-chain</em> podemos tener herencia en Javascript.</p>

<p>Supongamos que tenemos un tipo padre <code>Mamifero</code> que tiene el método <code>caminar</code> y <code>ver</code>. Luego tenemos un hijo <code>Humano</code> que sobreescribe al método <code>caminar</code> y agrega un nuevo método <code>correr</code>.</p>

<p>Para heredar <code>Humano</code> de <code>Mamifero</code>, el objeto <code>prototype</code> de <code>Humano</code> debe contener una instancia de su padre, en este caso <code>Mamifero</code>.</p>

<figure class='code'><figcaption><span>Herencia</span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
<span class='line-number'>18</span>
<span class='line-number'>19</span>
<span class='line-number'>20</span>
<span class='line-number'>21</span>
<span class='line-number'>22</span>
<span class='line-number'>23</span>
<span class='line-number'>24</span>
<span class='line-number'>25</span>
<span class='line-number'>26</span>
<span class='line-number'>27</span>
<span class='line-number'>28</span>
<span class='line-number'>29</span>
<span class='line-number'>30</span>
<span class='line-number'>31</span>
<span class='line-number'>32</span>
<span class='line-number'>33</span>
<span class='line-number'>34</span>
<span class='line-number'>35</span>
<span class='line-number'>36</span>
<span class='line-number'>37</span>
<span class='line-number'>38</span>
<span class='line-number'>39</span>
<span class='line-number'>40</span>
</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="c1">// Definimos al padre</span>
</span><span class='line'><span class="kd">function</span> <span class="nx">Mamifero</span><span class="p">()</span> <span class="p">{</span>
</span><span class='line'>  <span class="k">this</span><span class="p">.</span><span class="nx">extremidades</span> <span class="o">=</span> <span class="mi">4</span><span class="p">;</span>
</span><span class='line'><span class="p">}</span>
</span><span class='line'>
</span><span class='line'><span class="nx">Mamifero</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">ver</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
</span><span class='line'>  <span class="nx">alert</span><span class="p">(</span><span class="s1">&#39;El mamífero ve.&#39;</span><span class="p">);</span>
</span><span class='line'><span class="p">}</span>
</span><span class='line'>
</span><span class='line'><span class="nx">Mamifero</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">caminar</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
</span><span class='line'>  <span class="nx">alert</span><span class="p">(</span><span class="s1">&#39;El mamífero camina con &#39;</span> <span class="o">+</span> <span class="k">this</span><span class="p">.</span><span class="nx">extremidades</span> <span class="o">+</span> <span class="s1">&#39; extremidades.&#39;</span><span class="p">);</span>
</span><span class='line'><span class="p">}</span>
</span><span class='line'>
</span><span class='line'><span class="c1">// Definimos al hijo</span>
</span><span class='line'><span class="kd">function</span> <span class="nx">Humano</span><span class="p">()</span> <span class="p">{</span>
</span><span class='line'>  <span class="k">this</span><span class="p">.</span><span class="nx">extremidades</span> <span class="o">=</span> <span class="mi">2</span><span class="p">;</span>
</span><span class='line'>  <span class="k">this</span><span class="p">.</span><span class="nx">nombre</span> <span class="o">=</span> <span class="s2">&quot;Isaac&quot;</span><span class="p">;</span>
</span><span class='line'><span class="p">}</span>
</span><span class='line'>
</span><span class='line'><span class="c1">// Le decimos quien es su padre</span>
</span><span class='line'><span class="nx">Humano</span><span class="p">.</span><span class="nx">prototype</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Mamifero</span><span class="p">();</span>
</span><span class='line'>
</span><span class='line'><span class="c1">// Reescribimos y agregamos los métodos de Humano</span>
</span><span class='line'><span class="nx">Humano</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">caminar</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
</span><span class='line'>  <span class="nx">alert</span><span class="p">(</span><span class="s1">&#39;El humano camina con &#39;</span> <span class="o">+</span> <span class="k">this</span><span class="p">.</span><span class="nx">extremidades</span> <span class="o">+</span> <span class="s1">&#39; extremidades.&#39;</span><span class="p">);</span>
</span><span class='line'><span class="p">}</span>
</span><span class='line'>
</span><span class='line'><span class="nx">Humano</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">correr</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
</span><span class='line'>  <span class="nx">alert</span><span class="p">(</span><span class="s1">&#39;El humano corre&#39;</span><span class="p">);</span>
</span><span class='line'><span class="p">}</span>
</span><span class='line'>
</span><span class='line'><span class="kd">var</span> <span class="nx">perro</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Mamifero</span><span class="p">();</span>
</span><span class='line'><span class="kd">var</span> <span class="nx">persona</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Humano</span><span class="p">();</span>
</span><span class='line'>
</span><span class='line'><span class="nx">perro</span><span class="p">.</span><span class="nx">ver</span><span class="p">();</span> <span class="c1">// Método definidio en Mamifero</span>
</span><span class='line'><span class="nx">perro</span><span class="p">.</span><span class="nx">caminar</span><span class="p">();</span> <span class="c1">// Llama al método en Mamifero</span>
</span><span class='line'>
</span><span class='line'><span class="nx">persona</span><span class="p">.</span><span class="nx">ver</span><span class="p">();</span> <span class="c1">// Llama al método definido en Mamifero</span>
</span><span class='line'><span class="nx">persona</span><span class="p">.</span><span class="nx">caminar</span><span class="p">();</span> <span class="c1">// Llama al método sobreescrito en Humano</span>
</span><span class='line'><span class="nx">persona</span><span class="p">.</span><span class="nx">correr</span><span class="p">();</span> <span class="c1">// Llama al método definido en Humano que no existe en Mamifero</span>
</span></code></pre></td></tr></table></div></figure>


<p>El objeto <code>Humano.prototype</code> es un objeto de tipo <code>Mamifero</code> (línea 21), luego agreamos dinámicamente métodos a ese prototipo (líneas 24, 25). Como <code>Mamifero</code> es un objeto el también tiene un propiedad <code>prototype</code> al cual se le defineron 2 métodos (líneas 6, 10).</p>

<p>Entonces, cuando invocamos el método <code>persona.caminar()</code> Javascript busca en el objeto mismo, no lo encuentra y busca en su prototipo (<code>Humano.prototype.caminar</code>), lo encuentra y lo invoca.</p>

<p>Cuando invocamos el método <code>persona.ver()</code> Javascript busca en el objeto mismo, no lo encuentra, luego busca en su prototipo (<code>Humano.prototype.ver</code>), no lo encuentra, y se va en la cadena de prototipos hasta que lo encuentre en este caso <code>Humano.prototype.prototype.ver</code>, ya que <code>Humano.prototype.prototype</code> apunta a <code>Mamifero.prototype</code>.</p>

<p>Espero que haya quedado claro esto del <code>prototype</code>.</p>

<h2>Bibliografía</h2>

<p>Para saber más acerca de los objetos y de la propiedad <code>prototype</code>:</p>

<ul>
<li><a href="http://helephant.com/2008/08/17/how-javascript-objects-work/">How Javascript objects work</a></li>
<li><a href="http://net.tutsplus.com/tutorials/javascript-ajax/prototypes-in-javascript-what-you-need-to-know/">Prototypes in JavaScript</a></li>
<li><a href="http://stackoverflow.com/questions/572897/how-does-javascript-prototype-work">How does JavaScript .prototype work?</a></li>
<li><a href="http://stackoverflow.com/questions/6163186/prototype-or-inline-what-is-the-difference">Prototype or inline, what is the difference?</a></li>
<li><a href="http://stackoverflow.com/questions/5529285/prototype-chaining-constructor-inheritance">Prototype chaining, Constructor, Inheritance</a></li>
<li><a href="http://javascript.crockford.com/prototypal.html">Prototypal Inheritance in JavaScript</a></li>
</ul>


<p>Bienvenidos sean sus comentarios, sugerencias, dudas, etc.</p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[Chat básico con Socket.io]]></title>
    <link href="http://hardcoders.mx/blog/2012/12/11/chat-basico-con-socket-dot-io/"/>
    <updated>2012-12-11T16:52:00-07:00</updated>
    <id>http://hardcoders.mx/blog/2012/12/11/chat-basico-con-socket-dot-io</id>
    <content type="html"><![CDATA[<p><a href="http://socket.io">Socket.io</a> es una librería para manejar websockets a través de <a href="http://nodejs.org">Node.js</a>. Esto nos permite usar websockets en cualquier navegador con una sola librería.</p>

<p>Los websockets son una comunicación duplex, esto es enviar y recibir información al servidor al mismo tiempo.</p>

<p><em>Actualización: Demo agregado</em></p>

<h2>Flujo del chat</h2>

<p>Básicamente el flujo del chat será el siguiente:</p>

<ul>
<li>Al abrir el cliente nos lanzará un prompt pidiendonos un nick.</li>
<li>El servidor contendrá un arreglo con los nicks en línea.</li>
<li>Cuando un user se conecte el servidor agregará el nuevo nick al arreglo y emitirá la lista de los nicks al cliente.</li>
<li>Cuando un user se desconecte removerá el nick de la lista y emitirá la lista de los nicks al cliente.</li>
<li>Cuando el cliente reciba una lista de nicks borrará la lista actual y imprirá los nuevos nicks.</li>
<li>Escribiremos un mensaje y se lo enviaremos al servidor (node.js).</li>
<li>Luego el servidor enviará el mensaje a todos los sockets que esten conectados, incluyendo al que emitió el mensaje.</li>
<li>El cliente al recibir un mensaje lo pondrá en la lista de mensajes.</li>
</ul>


<!-- more -->


<h2>Requisitos</h2>

<p>Instalar <a href="http://nodejs.org">Node.js</a>, en GNU/Linux <a href="https://github.com/joyent/node/wiki/Installing-Node.js-via-package-manager">recomiendo usar alguna de estas formas</a> y en Mac o Windows lo mejor sería <a href="http://nodejs.org/download/">descargar el instalable</a>.</p>

<p>Instalar <a href="http://socket.io">Socket.io</a>, si instalaron el npm (Node Packaged Modules) lo pueden instalar con un simple comando:</p>

<figure class='code'><figcaption><span>Instalar socket.io</span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
</pre></td><td class='code'><pre><code class='bash'><span class='line'><span class="c"># Ejecutar comando en la carpeta que tendrá el archivo js del servidor (node.js)</span>
</span><span class='line'>npm install socket.io
</span></code></pre></td></tr></table></div></figure>


<p>Descargar <a href="http://jquery.com/">jQuery</a>, este nos facilitará la vida.</p>

<h2>A codear!</h2>

<p>Un chat es una aplicación cliente-servidor. Nuestro <strong>cliente</strong> corre en un navegador y estará conformado por un archivo HTML (presentación de la información), un css (estilos) y Javascript (que controla la comunicación con el servidor y todo el dinamismo). El <strong>servidor</strong> estará conformado por un archivo javascript que ejecutaremos con node.js.</p>

<p>Primero creamos un html que será parte del cliente.</p>

<figure class='code'><figcaption><span>index.html</span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
<span class='line-number'>18</span>
<span class='line-number'>19</span>
<span class='line-number'>20</span>
<span class='line-number'>21</span>
<span class='line-number'>22</span>
<span class='line-number'>23</span>
<span class='line-number'>24</span>
<span class='line-number'>25</span>
</pre></td><td class='code'><pre><code class='html'><span class='line'><span class="cp">&lt;!DOCTYPE html&gt;</span>
</span><span class='line'><span class="nt">&lt;html&gt;</span>
</span><span class='line'><span class="nt">&lt;head&gt;</span>
</span><span class='line'>  <span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">&quot;stylesheet&quot;</span> <span class="na">type=</span><span class="s">&quot;text/css&quot;</span> <span class="na">href=</span><span class="s">&quot;css/chat.css&quot;</span> <span class="nt">/&gt;</span>
</span><span class='line'><span class="nt">&lt;/head&gt;</span>
</span><span class='line'><span class="nt">&lt;body&gt;</span>
</span><span class='line'>
</span><span class='line'>  <span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">&quot;container&quot;</span><span class="nt">&gt;</span>
</span><span class='line'>      <span class="nt">&lt;section</span> <span class="na">id=</span><span class="s">&quot;messages-container&quot;</span><span class="nt">&gt;</span>
</span><span class='line'>          <span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">&quot;messages&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
</span><span class='line'>      <span class="nt">&lt;/section&gt;</span>
</span><span class='line'>      <span class="nt">&lt;section</span> <span class="na">id=</span><span class="s">&quot;users&quot;</span><span class="nt">&gt;&lt;/section&gt;</span>
</span><span class='line'>      
</span><span class='line'>      <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;clear&quot;</span><span class="nt">&gt;&lt;/div&gt;</span>
</span><span class='line'>
</span><span class='line'>      <span class="nt">&lt;section</span> <span class="na">id=</span><span class="s">&quot;msg-input&quot;</span><span class="nt">&gt;</span>
</span><span class='line'>          <span class="nt">&lt;input</span> <span class="na">name=</span><span class="s">&quot;message&quot;</span> <span class="na">size=</span><span class="s">&quot;50&quot;</span> <span class="na">type=</span><span class="s">&quot;text&quot;</span> <span class="na">placeholder=</span><span class="s">&quot;Mensaje...&quot;</span> <span class="nt">/&gt;</span>
</span><span class='line'>      <span class="nt">&lt;/section&gt;</span>
</span><span class='line'>  <span class="nt">&lt;/div&gt;</span>
</span><span class='line'>
</span><span class='line'>  <span class="nt">&lt;script </span><span class="na">type=</span><span class="s">&quot;text/javascript&quot;</span> <span class="na">src=</span><span class="s">&quot;http://localhost:8080/socket.io/socket.io.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
</span><span class='line'>  <span class="nt">&lt;script </span><span class="na">type=</span><span class="s">&quot;text/javascript&quot;</span> <span class="na">src=</span><span class="s">&quot;js/jquery-1.8.2.min.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
</span><span class='line'>  <span class="nt">&lt;script </span><span class="na">type=</span><span class="s">&quot;text/javascript&quot;</span> <span class="na">src=</span><span class="s">&quot;js/chat.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
</span><span class='line'><span class="nt">&lt;/body&gt;</span>
</span><span class='line'><span class="nt">&lt;/html&gt;</span>
</span></code></pre></td></tr></table></div></figure>


<p>En línea 21 estamos agregando el javascript de socket.io, esto funcionará solo si tenemos corriendo nuestro archivo node.js en el servidor (un poco de esto más adelante).</p>

<p>Ahora el CSS</p>

<figure class='code'><figcaption><span>css/chat.css</span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
<span class='line-number'>18</span>
<span class='line-number'>19</span>
<span class='line-number'>20</span>
<span class='line-number'>21</span>
<span class='line-number'>22</span>
<span class='line-number'>23</span>
<span class='line-number'>24</span>
<span class='line-number'>25</span>
<span class='line-number'>26</span>
<span class='line-number'>27</span>
<span class='line-number'>28</span>
<span class='line-number'>29</span>
<span class='line-number'>30</span>
<span class='line-number'>31</span>
<span class='line-number'>32</span>
<span class='line-number'>33</span>
<span class='line-number'>34</span>
</pre></td><td class='code'><pre><code class='css'><span class='line'><span class="nf">#container</span> <span class="p">{</span>
</span><span class='line'>  <span class="k">margin</span><span class="o">:</span> <span class="m">10px</span> <span class="m">0px</span> <span class="m">0px</span> <span class="m">10px</span><span class="p">;</span>
</span><span class='line'>  <span class="k">padding</span><span class="o">:</span> <span class="m">10px</span><span class="p">;</span>
</span><span class='line'><span class="p">}</span>
</span><span class='line'>
</span><span class='line'><span class="nf">#messages-container</span> <span class="p">{</span>
</span><span class='line'>  <span class="k">float</span><span class="o">:</span> <span class="k">left</span><span class="p">;</span>
</span><span class='line'>  <span class="k">border</span><span class="o">:</span> <span class="m">1px</span> <span class="k">solid</span> <span class="m">#CCCCCC</span><span class="p">;</span>
</span><span class='line'>  <span class="k">width</span><span class="o">:</span> <span class="m">800px</span><span class="p">;</span>
</span><span class='line'>  <span class="k">height</span><span class="o">:</span> <span class="m">300px</span><span class="p">;</span>
</span><span class='line'>  <span class="k">overflow</span><span class="o">:</span> <span class="k">auto</span><span class="p">;</span>
</span><span class='line'><span class="p">}</span>
</span><span class='line'>
</span><span class='line'><span class="nf">#users</span> <span class="p">{</span>
</span><span class='line'>  <span class="k">float</span><span class="o">:</span> <span class="k">left</span><span class="p">;</span>
</span><span class='line'>  <span class="k">margin-left</span><span class="o">:</span> <span class="m">10px</span><span class="p">;</span>
</span><span class='line'>  <span class="k">border</span><span class="o">:</span> <span class="m">1px</span> <span class="k">solid</span> <span class="m">#CCC</span><span class="p">;</span>
</span><span class='line'>  <span class="k">overflow</span><span class="o">:</span> <span class="k">auto</span><span class="p">;</span>
</span><span class='line'>  <span class="k">height</span><span class="o">:</span> <span class="m">300px</span><span class="p">;</span>
</span><span class='line'>  <span class="k">width</span><span class="o">:</span> <span class="m">200px</span><span class="p">;</span>
</span><span class='line'><span class="p">}</span>
</span><span class='line'>
</span><span class='line'><span class="nc">.clear</span> <span class="p">{</span>
</span><span class='line'>  <span class="k">clear</span><span class="o">:</span> <span class="k">both</span><span class="p">;</span>
</span><span class='line'><span class="p">}</span>
</span><span class='line'>
</span><span class='line'><span class="nf">#msg-input</span> <span class="p">{</span>
</span><span class='line'>  <span class="k">margin-top</span><span class="o">:</span> <span class="m">20px</span><span class="p">;</span>
</span><span class='line'><span class="p">}</span>
</span><span class='line'>
</span><span class='line'><span class="nf">#msg-input</span> <span class="nt">input</span> <span class="p">{</span>
</span><span class='line'>  <span class="k">width</span><span class="o">:</span> <span class="m">800px</span><span class="p">;</span>
</span><span class='line'>  <span class="k">height</span><span class="o">:</span> <span class="m">30px</span><span class="p">;</span>
</span><span class='line'><span class="p">}</span>
</span></code></pre></td></tr></table></div></figure>


<h2>Javascript en el servidor</h2>

<p>Ahora creamos un archivo javascript que será el que corra en el lado del servidor. Básicamente lo que se hace aquí es recibir mensajes del cliente y emitir mensajes al cliente o clientes que estan conectados.</p>

<p>Cuando emitimos un mensaje a los clientes le decimos el nombre del mensaje seguido por las variables que queremos emitir al servidor.</p>

<p>Node.js está basado en eventos por lo tanto para recibir mensajes, registramos dicho mensaje y pasamos una función como callback que se ejecutará cuando dicho mensaje sea recibido y donde cada parámetro del callback será una variable emitida por la otra parte.</p>

<p>Piece of cake!</p>

<figure class='code'><figcaption><span>chat-server.js</span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
<span class='line-number'>18</span>
<span class='line-number'>19</span>
<span class='line-number'>20</span>
<span class='line-number'>21</span>
<span class='line-number'>22</span>
<span class='line-number'>23</span>
<span class='line-number'>24</span>
<span class='line-number'>25</span>
<span class='line-number'>26</span>
<span class='line-number'>27</span>
<span class='line-number'>28</span>
<span class='line-number'>29</span>
<span class='line-number'>30</span>
<span class='line-number'>31</span>
<span class='line-number'>32</span>
</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="c1">// Este archivo, por simplicidad, debe de estar en </span>
</span><span class='line'><span class="c1">// la misma carpeta donde instalaste socket.io</span>
</span><span class='line'>
</span><span class='line'><span class="c1">// Importamos socket.io y asignamos el puerto por donde recibirá la conexión</span>
</span><span class='line'><span class="kd">var</span> <span class="nx">io</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s2">&quot;socket.io&quot;</span><span class="p">).</span><span class="nx">listen</span><span class="p">(</span><span class="mi">8080</span><span class="p">);</span>
</span><span class='line'><span class="kd">var</span> <span class="nx">nicks</span> <span class="o">=</span> <span class="p">[];</span>
</span><span class='line'>
</span><span class='line'><span class="c1">// Cuando alguien se conecte</span>
</span><span class='line'><span class="nx">io</span><span class="p">.</span><span class="nx">sockets</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="s2">&quot;connection&quot;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">socket</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>
</span><span class='line'>  <span class="c1">// Cuando el cliente emita el mensaje nick</span>
</span><span class='line'>  <span class="nx">socket</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="s2">&quot;nick&quot;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">nick</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>      <span class="nx">nicks</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">nick</span><span class="p">);</span> <span class="c1">// Guardamos el nick</span>
</span><span class='line'>      <span class="nx">io</span><span class="p">.</span><span class="nx">sockets</span><span class="p">.</span><span class="nx">emit</span><span class="p">(</span><span class="s2">&quot;nicks&quot;</span><span class="p">,</span> <span class="nx">nicks</span><span class="p">);</span> <span class="c1">// Emitimos al cliente todos los nicks</span>
</span><span class='line'>
</span><span class='line'>      <span class="c1">// Cuando el cliente ya haya enviando su nick</span>
</span><span class='line'>      <span class="c1">// y emita un mensaje</span>
</span><span class='line'>      <span class="nx">socket</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="s2">&quot;msg&quot;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">msg</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>          <span class="c1">// Emitimos el nick y el mensaje a todos los sockets conectados (clientes).</span>
</span><span class='line'>          <span class="c1">// Podemos usar la variable nick gracias a que sucede un closure :)</span>
</span><span class='line'>          <span class="nx">io</span><span class="p">.</span><span class="nx">sockets</span><span class="p">.</span><span class="nx">emit</span><span class="p">(</span><span class="s2">&quot;msg&quot;</span><span class="p">,</span> <span class="nx">nick</span><span class="p">,</span> <span class="nx">msg</span><span class="p">);</span>
</span><span class='line'>      <span class="p">});</span>
</span><span class='line'>
</span><span class='line'>      <span class="c1">// Cuando alguien se desconecte</span>
</span><span class='line'>      <span class="c1">// eliminamos el nick del arreglo</span>
</span><span class='line'>      <span class="c1">// y emitimos de nuevo todos los nicks</span>
</span><span class='line'>      <span class="nx">socket</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="s2">&quot;disconnect&quot;</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
</span><span class='line'>          <span class="nx">nicks</span><span class="p">.</span><span class="nx">splice</span><span class="p">(</span><span class="nx">nicks</span><span class="p">.</span><span class="nx">indexOf</span><span class="p">(</span><span class="nx">nick</span><span class="p">),</span> <span class="mi">1</span><span class="p">);</span>
</span><span class='line'>          <span class="nx">io</span><span class="p">.</span><span class="nx">sockets</span><span class="p">.</span><span class="nx">emit</span><span class="p">(</span><span class="s2">&quot;nicks&quot;</span><span class="p">,</span> <span class="nx">nicks</span><span class="p">);</span>
</span><span class='line'>      <span class="p">});</span>
</span><span class='line'>  <span class="p">});</span>
</span><span class='line'><span class="p">});</span>
</span></code></pre></td></tr></table></div></figure>


<p>Con esto ya queda listo el javascript del lado del servidor, ahora tenemos que levantar el servidor:</p>

<figure class='code'><figcaption><span>Levantar el servidor de node.js</span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='bash'><span class='line'>nodejs chat-server.js
</span></code></pre></td></tr></table></div></figure>


<p>Para terminar el proceso presionamos CTRL+C. Recuerda que cada vez que modifiques el chat-server.js hay que terminar el servidor y volverlo a levantar.</p>

<h2>Javascript en el cliente</h2>

<p>Al igual que el javascript del servidor, el cliente recibe y emite mensajes, además de que manipula el DOM, usando jQuery.</p>

<figure class='code'><figcaption><span>js/chat.js</span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
<span class='line-number'>18</span>
<span class='line-number'>19</span>
<span class='line-number'>20</span>
<span class='line-number'>21</span>
<span class='line-number'>22</span>
<span class='line-number'>23</span>
<span class='line-number'>24</span>
<span class='line-number'>25</span>
<span class='line-number'>26</span>
<span class='line-number'>27</span>
<span class='line-number'>28</span>
<span class='line-number'>29</span>
<span class='line-number'>30</span>
<span class='line-number'>31</span>
<span class='line-number'>32</span>
<span class='line-number'>33</span>
<span class='line-number'>34</span>
<span class='line-number'>35</span>
<span class='line-number'>36</span>
<span class='line-number'>37</span>
<span class='line-number'>38</span>
<span class='line-number'>39</span>
<span class='line-number'>40</span>
<span class='line-number'>41</span>
</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="nx">$</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
</span><span class='line'>  <span class="c1">// Nos conectamos al server, esto emite un</span>
</span><span class='line'>  <span class="c1">// mensaje de &quot;connection&quot;</span>
</span><span class='line'>  <span class="kd">var</span> <span class="nx">socket</span> <span class="o">=</span> <span class="nx">io</span><span class="p">.</span><span class="nx">connect</span><span class="p">(</span><span class="s2">&quot;http://localhost:8080&quot;</span><span class="p">);</span>
</span><span class='line'>
</span><span class='line'>  <span class="c1">// Cuando la conección es exitosa le preguntamos al user</span>
</span><span class='line'>  <span class="c1">// su nick mediante un prompt y lo emitimos al servidor</span>
</span><span class='line'>  <span class="nx">socket</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="s2">&quot;connect&quot;</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
</span><span class='line'>      <span class="nx">socket</span><span class="p">.</span><span class="nx">emit</span><span class="p">(</span><span class="s2">&quot;nick&quot;</span><span class="p">,</span> <span class="nx">prompt</span><span class="p">(</span><span class="s2">&quot;Nick?&quot;</span><span class="p">));</span>
</span><span class='line'>  <span class="p">});</span>
</span><span class='line'>
</span><span class='line'>  <span class="nx">$</span><span class="p">(</span><span class="s1">&#39;#msg-input input&#39;</span><span class="p">).</span><span class="nx">keypress</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>      <span class="k">if</span> <span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">which</span> <span class="o">==</span> <span class="mi">13</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>          <span class="c1">// Cuando se presiona enter en el input</span>
</span><span class='line'>          <span class="c1">// emitimos el contenido de dicho input</span>
</span><span class='line'>          <span class="nx">socket</span><span class="p">.</span><span class="nx">emit</span><span class="p">(</span><span class="s2">&quot;msg&quot;</span><span class="p">,</span> <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">val</span><span class="p">());</span>
</span><span class='line'>          <span class="nx">$</span><span class="p">(</span><span class="k">this</span><span class="p">).</span><span class="nx">val</span><span class="p">(</span><span class="s1">&#39;&#39;</span><span class="p">);</span>
</span><span class='line'>      <span class="p">}</span>
</span><span class='line'>  <span class="p">});</span>
</span><span class='line'>
</span><span class='line'>  <span class="c1">// Cuando el cliente recibe un mensaje, creamos un div</span>
</span><span class='line'>  <span class="c1">// Ponemos el nick y el mensaje dentro y lo agregamos</span>
</span><span class='line'>  <span class="c1">// a la lista de mensajes</span>
</span><span class='line'>  <span class="nx">socket</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="s2">&quot;msg&quot;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">nick</span><span class="p">,</span> <span class="nx">msg</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>      <span class="nx">$</span><span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s2">&quot;div&quot;</span><span class="p">))</span>
</span><span class='line'>      <span class="p">.</span><span class="nx">html</span><span class="p">(</span><span class="s2">&quot;&lt;strong&gt;&quot;</span> <span class="o">+</span> <span class="nx">nick</span> <span class="o">+</span> <span class="s2">&quot;: &lt;/strong&gt;&quot;</span> <span class="o">+</span> <span class="nx">msg</span><span class="p">)</span>
</span><span class='line'>      <span class="p">.</span><span class="nx">appendTo</span><span class="p">(</span><span class="s2">&quot;#messages&quot;</span><span class="p">);</span>
</span><span class='line'>
</span><span class='line'>      <span class="c1">// Esto nos permite mantener visible el último mensaje</span>
</span><span class='line'>      <span class="nx">$</span><span class="p">(</span><span class="s1">&#39;#messages-container&#39;</span><span class="p">).</span><span class="nx">scrollTop</span><span class="p">(</span><span class="nx">$</span><span class="p">(</span><span class="s1">&#39;#messages&#39;</span><span class="p">).</span><span class="nx">height</span><span class="p">());</span>
</span><span class='line'>  <span class="p">});</span>
</span><span class='line'>
</span><span class='line'>  <span class="c1">// Cuando el cliente recibe una lista de nicks</span>
</span><span class='line'>  <span class="nx">socket</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="s2">&quot;nicks&quot;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">nicks</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>      <span class="nx">$</span><span class="p">(</span><span class="s2">&quot;#users&quot;</span><span class="p">).</span><span class="nx">html</span><span class="p">(</span><span class="s1">&#39;&#39;</span><span class="p">);</span>
</span><span class='line'>      <span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">i</span> <span class="o">&lt;</span> <span class="nx">nicks</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>          <span class="nx">$</span><span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s2">&quot;li&quot;</span><span class="p">)).</span><span class="nx">text</span><span class="p">(</span><span class="nx">nicks</span><span class="p">[</span><span class="nx">i</span><span class="p">]).</span><span class="nx">appendTo</span><span class="p">(</span><span class="s2">&quot;#users&quot;</span><span class="p">);</span>
</span><span class='line'>      <span class="p">}</span>
</span><span class='line'>  <span class="p">});</span>
</span><span class='line'>
</span><span class='line'><span class="p">});</span>
</span></code></pre></td></tr></table></div></figure>


<p>Una pequeña explicación. En la línea 21 estamos escuchando el mensaje &#8220;msg&#8221; y cuando el servidor lo emita se ejecutala funcion que esta como segundo parámetro y esta recibe dos parámetros, si recordamos el código chat-server.js en la línea 21:</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="p">...</span>
</span><span class='line'><span class="nx">io</span><span class="p">.</span><span class="nx">sockets</span><span class="p">.</span><span class="nx">emit</span><span class="p">(</span><span class="s2">&quot;msg&quot;</span><span class="p">,</span> <span class="nx">nick</span><span class="p">,</span> <span class="nx">msg</span><span class="p">);</span>
</span><span class='line'><span class="p">...</span>
</span></code></pre></td></tr></table></div></figure>


<p>Estamos emitiendo el mensaje &#8220;msg&#8221; a todos los sockets conectados con el método emit que, en este caso, recibe 3 parámetros: el primero el nombre del mensaje y luego el nick y el msg. Como se puede ver el envio y recepción de variables entre servidor y cliente es muy transparente.</p>

<h2>Demo</h2>

<p>Después de un rato de moverle a un par de proveedores de hosting para node.js termine usando <a href="http://dotcloud.com">dotcloud</a> y ya quedó el demo tan solicitado :).</p>

<p><a href="http://soygeek.com.mx/demos/chat">http://soygeek.com.mx/demos/chat</a></p>

<p>Si no haya nadie conectado con quien probar lo que pueden hacer es abrir el demo en dos pestañas de su navegador poner nicks diferentes y empezar a testear :).</p>

<h2>Fin</h2>

<p>Esta fue una versión simple de un chat web. Obviamente podemos hacer más cosas como guardar las conversaciones, hacer login, seleccionar avatar, pero se los dejo a su imaginación.</p>

<p>No olviden dejar sus comentarios, dudas y así. A hardcodear!!</p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[Como contribuir a un blog en octopress]]></title>
    <link href="http://hardcoders.mx/blog/2012/12/10/como-contribuir-a-un-blog-en-octopress/"/>
    <updated>2012-12-10T18:24:00-07:00</updated>
    <id>http://hardcoders.mx/blog/2012/12/10/como-contribuir-a-un-blog-en-octopress</id>
    <content type="html"><![CDATA[<p><a href="http://octopress.org/">Octropress</a> es un framework para <a href="http://github.com/mojombo/jekyll">Jekyll</a>, que permite generar tu blog y entre otras gracias está preparado para publicarlo fácilmente en <a href="http://pages.github.com">GitHub Pages</a>.</p>

<p>Este sitio esta hecho en Octopress, por lo que después de leer esta guía introductoria, y tomando de base <a href="http://hardcoders.mx/blog/2012/12/06/como-contribuir-a-un-proyecto-en-github/">el ultimo post</a>, estarías ya listo para contribuir tu contenido a hardcoders.</p>

<!-- more -->


<p></p>

<h2>Requisitos</h2>

<p>¿Que necesitas para iniciar?, principalmente <a href="http://www.ruby-lang.org/">ruby</a>, que para estas alturas ya es casi seguro que lo tengas en tu equipo, ¿o no?.</p>

<p>Adicionalmente requieres de <a href="http://git-scm.com/">git</a>, no es estrictamente necesario pero sin el no hay manera que contribuyas de vuelta los cambios, a menos que tu fetiche sea enviar patchfiles por correo.</p>

<p>Por ultimo, requieres tener a la mano una guía de <a href="http://daringfireball.net/projects/markdown/syntax">markdown</a> para resolver cualquier duda al momento de que estés formateando tu post.</p>

<h2>fork y clone</h2>

<p>Primero requieres tener una copia del repositorio del blog, tomaremos como ejemplo el <a href="https://github.com/hardcodersmx/hardcodersmx.github.com">repositorio de este mismo blog</a>.</p>

<p>El primer paso es clonar el repositorio en github para tener una copia que puedas modificar, para luego hacer un clone en tu equipo.</p>

<figure class='code'><figcaption><span>Crea un clone de el repositorio </span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
</pre></td><td class='code'><pre><code class='bash'><span class='line'><span class="c"># No olvides cambiar albertein por tu nombre de usuario de github</span>
</span><span class='line'>git clone git@github.com:albertein/hardcodersmx.github.com
</span></code></pre></td></tr></table></div></figure>


<h2>source y master</h2>

<p>Octopress maneja todo usando dos ramas principales, una de ellas es <code>master</code>, la cual contiene el   sitio ya generado. Debido a que ustedes no harán un deploy al sitio al menos que estén manejando su propio blog, esto lo ignoraremos en este articulo.</p>

<p>La rama que nos interesa es <code>source</code>, en ella se tiene la plataforma de octopress así como el fuente de los posts y paginas. En esta rama es donde necesitas crear tus posts, por lo que hay que asegurarse que te encuentres en esa rama.</p>

<figure class='code'><figcaption><span>Cambiar a source</span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='bash'><span class='line'>git checkout <span class="nb">source</span>
</span></code></pre></td></tr></table></div></figure>


<h2>Feature branch</h2>

<p>Es una buena practica crear tu post en una rama especifica para eso, en hardcoders recomendamos que el nombre de la ralla se componga de una descripción corta del articulo cambiando espacios por underscores y agregando el prefijo _post, ej: `post_contribuir_blog_octopress.</p>

<figure class='code'><figcaption><span>Crea tu feature branch</span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
</pre></td><td class='code'><pre><code class='bash'><span class='line'><span class="c"># Recuerda asegurarte que te encuentres en la rama source antes de esto</span>
</span><span class='line'>git checkout -b post_contibuir_blog_octropess
</span></code></pre></td></tr></table></div></figure>


<h2>Crear post</h2>

<p>Para crear un post vamos a hacer uso de unas rake tasks que Octopress ah puesto a nuestra disposición, para iniciar basta con ejecutar la tarea <code>rake new_post</code> y enviar el titulo del post como parámetro, ej:</p>

<figure class='code'><figcaption><span>No olvides poner el titulo de tu post</span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='bash'><span class='line'>rake new_post<span class="o">[</span><span class="s2">&quot;Como contribuir a un blog en octopress&quot;</span><span class="o">]</span>
</span></code></pre></td></tr></table></div></figure>


<p>Esto les generara un archivo markdown en el path <code>source/_posts/</code>, el nombre del archivo es el titulo en formato url friendly con el timestamp de prefijo, este es el archivo que tenemos que editar para crear el post.</p>

<h2>Editar contenido</h2>

<p>Una vez creado tenemos que editar el archivo generado para poder poner el contenido de nuestro post. Hay un par de cosas que se tienen que hacer antes de incluir el contenido del articulo.</p>

<ol>
<li>Indicar el autor, ej: <code>author: "Alberto Avila"</code></li>
<li>Incluir las categorías, ej: <code>categories: [git, octopress]</code></li>
</ol>


<p>Ya solo queda crear el contenido del articulo, solo recuerden incluir el snippet <code>&lt;!-- more --&gt;</code> para indicar el fin de la introducción que se muestra en la pagina principal, y continuar con el resto del articulo.</p>

<h2>Formato</h2>

<p>Los post están formateados usando Markdown, adicionalmente pueden leer <a href="http://octopress.org/docs/blogging/code/">como compartir code snippets</a>.</p>

<h2>Preview</h2>

<p>Mientras se trabaja con el formato de la entrada es muy posible que se desea pre-visualizar el resultado de el avance hasta el momento, para hacer esto vasta con tener corriendo siempre una tarea.</p>

<figure class='code'><figcaption><span>Pre-visualizar tus avances.</span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='bash'><span class='line'>rake preview
</span></code></pre></td></tr></table></div></figure>


<p>Esto tarea mantiene vigilado el sistema de archivos, y genera automáticamente el sitio cada que detecta un cambio, además, corre un servidor web en el puerto 4000, por lo que para pre-visualizar el sitio basta con dirigirte a http://localhost:4000 en tu browser.</p>

<h2>Publicar</h2>

<p>Una vez conforme con el resultado solo hace falta compartir los cambios para que pueda ser publicado.</p>

<figure class='code'><figcaption><span>Publicando tus cambios</span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
</pre></td><td class='code'><pre><code class='bash'><span class='line'><span class="c"># Primero ocupamos agregar al stage nuestro post y hacerle commit</span>
</span><span class='line'><span class="c"># Recuerda usar un commit message apropiado</span>
</span><span class='line'>git add <span class="nb">source</span>/_posts/12-12-10-como-contribuir-a-un-blog-en-octopress.markdown
</span><span class='line'>git commit -m <span class="s1">&#39;Added &quot;como contribuir a un blog en octropress&quot; post&#39;</span>
</span><span class='line'>
</span><span class='line'><span class="c"># Ahora necesitamos actualizar nuestro fork en github para hacer públicos tus cambios.</span>
</span><span class='line'><span class="c"># Recuerda usar el nombre de tu rama</span>
</span><span class='line'>
</span><span class='line'>git push origin post_contibuir_blog_octropess
</span></code></pre></td></tr></table></div></figure>


<p>Ahora puedes ir a github, buscar tu fork, ir a la vista de la rama que estas usando y solicitar el pull request.</p>

<h2>Aclaración</h2>

<p>Si el interés radica en colaborar con nosotros y todo esto se te hace demasiado laborioso siempre puedes enviarnos un correo con tu entrada en texto llano o (preferentemente) Markdown, y nosotros lo publicamos atribuyéndote el crédito. :)</p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[Como contribuir a un proyecto en github]]></title>
    <link href="http://hardcoders.mx/blog/2012/12/06/como-contribuir-a-un-proyecto-en-github/"/>
    <updated>2012-12-06T17:24:00-07:00</updated>
    <id>http://hardcoders.mx/blog/2012/12/06/como-contribuir-a-un-proyecto-en-github</id>
    <content type="html"><![CDATA[<p>git como herramienta de versionamiento ha ganado mucha popularidad, y con el github como repositorio de código (Algunos podrían incluso decir que la influencia es en sentido contrario). Por lo que no es raro que la mayoria de herramientas y librearías que usas en el día a día estén hospedadas en github, lo que hace realmente valioso que se tenga al menos conocimientos rudimentarios de git, y más aun saber como poder contribuir parches ó cambios a tus proyectos preferidos.</p>

<p>Espero que esta breve guía ayude a familiarizar a los no iniciados en un workflow sencillo que permita colaborar en una gran cantidad de proyectos de software.</p>

<!-- more -->


<p></p>

<p>Estas trabajando y encontraste un bug en una librería, esta librería está escrita en un lenguaje que conoces y decides aventarte y resolver el problema.</p>

<p>Tomaremos como base que conoces los comandos básicos de git y que ya tienes tu cuenta creada y configurada en github para poder trabajar, si no es así puedes consultar el libro <a href="http://git-scm.com/book">Pro Git</a> completamente gratuito.</p>

<h2>Creando tu fork</h2>

<p>El primer paso es crear un fork del repositorio al cual quieres colaborar, los manteiners del proyecto no confían en cualquier persona random del internet para que muevan su código, por lo que si quieres hacer tus cambios necesitas primero crear un fork, que no es mas que crear una copia del repositorio en tu cuenta de github local en la cual tu tengas control total.</p>

<h2>Clona tu fork en tu equipo</h2>

<p>Supongamos que creaste un fork de <a href="https://github.com/hardcodersmx/hardcodersmx.github.com">el repositorio de esta web</a>, ahora requieres hacer un clone. ej:</p>

<figure class='code'><figcaption><span>Clonar tu repositorio (reemplaza albertein por tu usuario)</span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='bash'><span class='line'>git clone git@github.com:albertein/hardcodersmx.github.com
</span></code></pre></td></tr></table></div></figure>


<p>Con esto tendrás una copia local (clone) de tu fork en github, ya estamos casi listos para iniciar a trabajar.</p>

<h2>Crea tu feature branch</h2>

<p>En este momento estas listo para corregir el bug, pero antes de ponerte a tirar código hay algo mas que se tiene que hacer.</p>

<p>La mayoría de los proyectos, si no es que casi todos, prefieren que todos tus cambios lo hagas en un feature branch, esto es, que crees una nueva rama de desarrollo para que crees tus cambios, esto es útil para aislar tus cambios de todo lo demás, y te puede ser útil si en medio del desarrollo encuentras algún otro bug, en lugar de dejar todo embarrado en la misma rama deberás crear una nueva rama para ese otro feature y así el mantainer del proyecto puede aplicar los cambios individualmente.</p>

<p>Recuerda siempre usar un nombre descriptivo para la rama que vas a crear.</p>

<figure class='code'><figcaption><span>Crea tu feature branch (Dentro de tu proyecto, ¡claro!)</span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='bash'><span class='line'>git checkout -b fix_issue_123
</span></code></pre></td></tr></table></div></figure>


<p>El comando anterior crea la nueva rama y te cambiá a ella para que puedas trabajar.</p>

<h2>¡Realiza tus cambios!</h2>

<p>¡Ahora si!, realiza todos los cambios que requieras, agrega al stage tus archivos y haz un commit con un mensaje descriptivo.</p>

<figure class='code'><figcaption><span>Ejemplo</span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
</pre></td><td class='code'><pre><code class='bash'><span class='line'><span class="c">#Edita test1.foo</span>
</span><span class='line'><span class="c">#Edita test2.foo</span>
</span><span class='line'>git add test1.foo test2.foo
</span><span class='line'>git commit -m <span class="s1">&#39;Added two test cases for feature 123&#39;</span>
</span></code></pre></td></tr></table></div></figure>


<h2>Rebase</h2>

<p>Este paso puede ser opcional, dependiendo del tiempo que te haya tomado realizar tus cambios y del proyecto al que quieras contribuir.</p>

<p>Durante el tiempo que tomaste en crear tus cambios el desarrollo del proyecto original continuo, por lo que es muy probable que tengas que realizar un rebase o mínimo un merge convencional para que puedan integrar tus cambios.</p>

<p>Para eso primero ocupamos obtener todos los cambios que hayan ocurrido en el repositorio original</p>

<figure class='code'><figcaption><span>Obtener cambios desde mainstream</span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
</pre></td><td class='code'><pre><code class='bash'><span class='line'><span class="c"># Los nuevos cambios los integraremos sobre master </span>
</span><span class='line'><span class="c"># y no sobre nuestro feature branch</span>
</span><span class='line'>git checkout master
</span><span class='line'>
</span><span class='line'><span class="c"># Para obtener los nuevos cambios ocupamos agregar un &quot;remote&quot; para que git</span>
</span><span class='line'><span class="c"># pueda localizar el repositorio convencional, usualmente al remote que apunta al</span>
</span><span class='line'><span class="c"># repositorio tradicional se le llama mainstream</span>
</span><span class='line'>git remote add mainstream git@github.com:hardcodersmx/hardodersmx.github.com
</span><span class='line'>
</span><span class='line'><span class="c"># Posteriormente bajamos todos los cambios, si hiciste caso y no desarrollaste nada </span>
</span><span class='line'><span class="c"># sobre master no deberías de tener ningún problema ni conflicto.</span>
</span><span class='line'>git pull mainstream master
</span></code></pre></td></tr></table></div></figure>


<p>Ya que contamos todos con todos los nuevos cambios en el repositorio es hora de hacer un rebase, al hacer un rebase aplicamos todos los commits que se encuentren en mainstream (master) y no en nuestra feature branch, para posteriormente aplicar el commit de nuestra rama al ultimo, como si fuera el ultimo cambio que se hubiera realizado. Recomiendo leer <a href="http://git-scm.com/book/en/Git-Branching-Rebasing">3.6 Git Branching - Rebasing</a> para comprender completamente este paso.</p>

<figure class='code'><figcaption><span>Hacer el rebase</span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
</pre></td><td class='code'><pre><code class='bash'><span class='line'><span class="c"># Primero nos regresamos a nuestro feature branch</span>
</span><span class='line'>git checkout fix_issue_123
</span><span class='line'>
</span><span class='line'><span class="c">#Para hacer el rebase desde master a nuestra rama actual</span>
</span><span class='line'>git rebase master
</span></code></pre></td></tr></table></div></figure>


<p>Si llega a ocurrir cualquier conflicto en este punto tenemos que corregirlo y continuar con el proceso.</p>

<h2>Subir cambios</h2>

<p>Todo esta listo, el problema es que nadie mas que tu puede ver tus cambios, es hora de subir tus cambios a github.</p>

<figure class='code'><figcaption><span>push a origin</span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
</pre></td><td class='code'><pre><code class='bash'><span class='line'><span class="c"># Necesitamos subir nuestro feature branch a github para que el mundo lo vea</span>
</span><span class='line'>git push origin fix_issue_123
</span></code></pre></td></tr></table></div></figure>


<h2>Pull request</h2>

<p>Ahora tan solo tienes que ir a github, cambiar a tu feature branch y hacer el pull request. Recuerda poner un mensaje entendible y conciso de que se trata. Después de eso tan solo falta darle seguimiento y esperar a que se apruebe.</p>

<h2>Aclaración</h2>

<p>No todos los proyectos de software se manejan de la misma manera, algunos pueden requerir un rebase mientras otros no, e incluso algunos pueden tener otro mecanismo distinto al pull request, recuerda siempre buscar si el proyecto tiene algún lineamiento para el contribuidor.</p>

<p>¡Happy hacking!</p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[¡Iniciamos!]]></title>
    <link href="http://hardcoders.mx/blog/2012/12/06/iniciamos/"/>
    <updated>2012-12-06T17:11:00-07:00</updated>
    <id>http://hardcoders.mx/blog/2012/12/06/iniciamos</id>
    <content type="html"><![CDATA[<p>Bienvenidos a hardcoders.mx, un sito de coder a coder. Más que otro sitio dedicado a repetir noticias esperamos generar contenido útil para todo coder interesado en nuevas tecnologias.</p>
]]></content>
  </entry>
  
</feed>