<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>unreal4u&#039;s Personal Network &#187; Javascript/jQuery</title>
	<atom:link href="http://blog.unreal4u.com/category/javascript/feed/" rel="self" type="application/rss+xml" />
	<link>http://blog.unreal4u.com</link>
	<description>Because my reality... is just your virtuality</description>
	<lastBuildDate>Mon, 30 Jan 2012 21:29:17 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.2.1</generator>
		<item>
		<title>Algunas notas sobre el prefetching</title>
		<link>http://blog.unreal4u.com/2012/01/algunas-notas-sobre-el-prefetching/</link>
		<comments>http://blog.unreal4u.com/2012/01/algunas-notas-sobre-el-prefetching/#comments</comments>
		<pubDate>Mon, 30 Jan 2012 21:29:17 +0000</pubDate>
		<dc:creator>unreal4u</dc:creator>
				<category><![CDATA[Apple/Mac]]></category>
		<category><![CDATA[Javascript/jQuery]]></category>
		<category><![CDATA[Mundo Web]]></category>
		<category><![CDATA[Pensamientos Personales]]></category>
		<category><![CDATA[PHP]]></category>

		<guid isPermaLink="false">http://blog.unreal4u.com/?p=584</guid>
		<description><![CDATA[Desde hace tiempo que sigo bien de cerca algo que me tenía bien intrigado: el prefetch de HTML5, que me parece demasiado buena idea y espero que todos los navegadores lo implementen ipso-facto. Sin embargo, quise echar una pequeña mirada a cómo funcionaba (si es que funcionaba) y específicamente a cuál era la sintaxis necesaria [...]]]></description>
			<content:encoded><![CDATA[<p>Desde hace tiempo que sigo bien de cerca algo que me tenía bien intrigado: el prefetch de HTML5, que me parece demasiado buena idea y espero que todos los navegadores lo implementen ipso-facto. Sin embargo, quise echar una pequeña mirada a cómo funcionaba (si es que funcionaba) y específicamente a cuál era la sintaxis necesaria y cuáles son los pequeños trucos de la vida que se pueden aplicar para lograr el efecto deseado. Haz click en leer más para conocer los detalles de esta investigación que algunas sorpresas dio y también muchos dolores de cabeza.</p>
<p><span id="more-584"></span></p>
<h2>¿Qué es el prefetching?</h2>
<p>Desde la entrada de HTML5, aparte de los tags de audio y video, hubo algo que me llamó bastante la atención: el prefetch. Esta técnica consiste en adivinar lo que el usuario bajará en su siguiente click en nuestra página por lo que la idea detrás de esta técnica es bajar el mentado archivo o página desde ya para que de esta forma cuando el usuario haga el click no tenga que bajar el archivo nuevamente.<br />
En teoría, suena bastante bien, pero quise llevarlo a la práctica para saber si acaso era factible o no poder implementar esta tecnología hoy en día. De acuerdo a casi todas las páginas web que consulté, simplemente había que incluir algunas cabeceras en nuestra página web para que milagrosamente funcionara el prefetching, lo cual me parecía demasiado bueno para ser verdad y así fue: resulta que el prefetching sólo ocurre bajo algunas condiciones y no siempre. </p>
<p>Como primer punto de aquiles, el prefetching sólo funciona en Firefox y en Chrome, desde la versión 3.6 y 13 respectivamente, pero sinceramente es un punto que poco importa, ya que estos dos navegadores juntos ya obtienen más de un 50% de participación en el mercado de los navegadores (<a href="http://gs.statcounter.com/#browser-ww-monthly-201107-201112">fuente</a>), por lo que nuestro grupo objetivo desde ya es bastante amplio. </p>
<p>Sin embargo, de aquí en adelante todo empieza a irse cuesta abajo. Resulta que el prefetching no funciona en muchos casos, y como podrán leer más adelante, el prefetching de Firefox simplemente no cumple su cometido, lo que baja nuestra cuota de mercado a sólo un 25%. La otra característica sobresaliente es que el uso más intenso que pretendía darle no funciona: sólo funciona si el recurso prefetcheado es un link (elemento &lt;a&gt;), y no una llamada ajax. </p>
<h2>Preparación</h2>
<p>Para poder saber de forma rápida si acaso el prefetching funcionaba, escribí 2 archivos: uno como índice principal y el otro de prefetching, con el siguiente código, primero vemos nuestro índice:</p>
<pre class="brush: xml; title: ; notranslate">
&lt;!DOCTYPE html&gt;
&lt;html&gt;&lt;head&gt;
	&lt;title&gt;Testing prefetch with HTML5&lt;/title&gt;
	&lt;script type=&quot;text/javascript&quot; src=&quot;../jquery.min.js&quot;&gt;&lt;/script&gt;
	&lt;link rel=&quot;prefetch&quot;  href=&quot;prefetch.php&quot;&gt;
	&lt;link rel=&quot;prerender&quot; href=&quot;prefetch.php&quot;&gt;
&lt;/head&gt;&lt;body&gt;
&lt;a href=&quot;prefetch.php&quot; class=&quot;prefetch&quot;&gt;Please click here to display the (prefetched) page&lt;/a&gt;&lt;br /&gt;

&lt;input type=&quot;button&quot; id=&quot;buttonContents&quot; value=&quot;Get contents&quot; /&gt;
&lt;div id=&quot;contents&quot;&gt;&lt;/div&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
$('#buttonContents').click(function(){
	$.ajax({
		url:'prefetch.php',
		success:function(data){
			$('#contents').html(data);
		}
	});
});
&lt;/script&gt;
&lt;/body&gt;&lt;/html&gt;
</pre>
<p>Es un documento HTML5 estándar, con dos elementos link: uno para firefox (que ocupa rel=prefetch) y la otra para Chrome, que ocupa rel=prerender. Dato rosa: la diferencia entre ambas es que el prerender también renderea la gráfica de la página, mientras que el prefetch sólo realiza este paso cuando la página se hace visible. En un documento complejo podría quizás llegar a notarse este punto, pero para el 99,6% de las páginas restantes no habría ninguna diferencia. De todas formas, ambas directivas son necesarias, ya que uno funciona para Firefox y la otra para Chrome.</p>
<p>Sólo para realizar un test, tenemos dos "links": uno que carga el archivo mediante ajax, y la otra es simplemente un link. Hice esta separación ya que uno es dinámico y la otra es estática, y era probable que los navegadores hicieran una diferenciación entre ambos tipos.</p>
<p>Este será nuestro archivo que vamos a "prefetchear":</p>
<pre class="brush: php; title: ; notranslate">
$fp = fopen('log.txt', 'a');
fwrite($fp,'['.strftime('%d-%m-%Y %T').'] - '.substr($_SERVER['HTTP_USER_AGENT'],strrpos($_SERVER['HTTP_USER_AGENT'], ' '),strlen($_SERVER['HTTP_USER_AGENT'])).&quot;\n&quot;);
fclose($fp);
sleep(3);
echo 'hello';
</pre>
<p>Por supuesto que tenemos un archivo llamado log.txt que tiene permisos 777. La principal razón del sleep era para simular la vida real y darle un tiempo de espera de carga de 3 segundos.</p>
<h2>Empiezan las sorpresas</h2>
<p>Con estos dos archivos empecé a hacer las pruebas, y grandes fueron mis sorpresas, ya que lo escrito en el papel es muy distinto a la práctica. </p>
<p>Primero dos links que me fueron de mucha ayuda:</p>
<p>http://browserspy.dk/prefetch.php</p>
<p>http://prerender-test.appspot.com/</p>
<p>El primero sirve para saber si el prefetching está funcionando para Firefox, mientras que el segundo sirve para verificar si el prefetching está funcionando para Chrome.<br />
También resultó bastante útil el task manager de Chrome (Window|Task Manager), y este link, también para Chrome:<br />
<code>chrome://net-internals/#prerender</code></p>
<p>Ya con todas estas herramientas pude empezar a probar distintas configuraciones y estos fueron los resultados:</p>
<ul>
<li>Firefox en Mac NO soporta prefetching. Así es, NO. Bajo ninguna circunstancia.</li>
<li>Firefox en Windows no tuvo mayores inconvenientes en hacer el prefetch, pero en cuanto se hace click en el documento "prefetcheado", lo empieza a descargar de nuevo. Más sobre esto después.</li>
<li>Chrome a partir de la versión 13 funciona bien el prerendering. ANTES de esta versión, no hubo caso en que funcionara.</li>
<li>Sólo se descargan documentos estáticos. Olvídense de pre-cargar ajax, no funcionará.</li>
</ul>
<h2>¿Qué pasa con Firefox?</h2>
<p>Hasta que me di cuenta de lo que pasaba en Firefox, estaba feliz de que funcionara, pero me llevé una gran desilusión. Resulta que Firefox después de haber hecho el prefetching y cuando uno ya hace click en el link... empieza a descargar el documento de nuevo! El gran problema de esto, es que se pierde todo el objetivo de hacer un prefetching y más encima realiza un request adicional que nunca ocupará, gastando recursos en nuestro servidor.<br />
Hay sin embargo un test que no he hecho y que tampoco creo que valga la pena: establecer cabeceras explícitamente en el futuro para que Firefox piense que el recurso que acaba de rescatar también es válido para el siguiente request.<br />
El único reparo que tengo con esto es que si tenemos una cabecera de prefetching es por que sabemos que el próximo recurso a rescatarse será el que le estamos indicando... ¿para qué necesito decirle explícitamente que quiero que conserve ese recurso?</p>
<h2>Conclusiones</h2>
<p>Aunque Firefox soporta desde la versión 3.6 el concepto de prefetch, lo hace bastante mal. Uno pensaría que ya con tanto tiempo "soportando" prefetching, funcionaría bien pero como queda demostrado, lo soporta de forma paupérrima.<br />
Chrome en cambio me alegró el día ya que funciona y bastante bien. Incluso funciona si tenemos un javascript como el que sigue:</p>
<pre class="brush: jscript; title: ; notranslate">
var app = {
    prefetchLinks: function(){
        var hrefs = $(&quot;a.prefetch&quot;).map(function(index, domElement){
            return $(this).attr(&quot;href&quot;);
        });
        return $.unique(hrefs);
    },

    addPrefetchTags: function(){
        this.prefetchLinks().each(function(index,Element){
            $(&quot;&lt;link /&gt;&quot;, {
                rel: &quot;prefetch&quot;, href: Element
            }).appendTo('head');
            $('&lt;link /&gt;', {
                rel:'prerender', href: Element
            }).appendTo('head');
        });
    },
};
$(document).ready(function(){
    app.addPrefetchTags();
});
</pre>
<p>Sacado (y modificado) <a href="http://www.catswhocode.com/blog/mastering-html5-prefetching">desde esta página</a>. Las modificaciones que tiene son en la llamada final de la función y en agregar el soporte para Chrome.</p>
<p>La gran sorpresa de esta función es que aunque construye bien el documento en todos los navegadores, el objetivo final sólo se logra en Chrome, ya que todos los demás navegadores no saben qué hacer con las etiquetas recién construidas, lo cual incluye -para mi sorpresa- a Firefox, que ni siquiera comienza a bajar los documentos que queramos rescatar.</p>
<p>Con esta pequeña investigación al respecto, creo que dejaré descansar el tema por uno o dos años para luego ver si se ha avanzado algo y si en ese futuro sirve o no.<br />
También quiero dejar una pequeña enseñanza: aunque muchas páginas juran que el prefetching funciona con sólo agregar algunas líneas a tu código fuente, siempre hay que experimentar y tratar de hacer funcionar las cosas por uno mismo. En este caso, quedó demostradísimo que no es llegar y agregar links, ya que la funcionalidad final sólo se logra en un navegador mientras que para el otro es sólo una gastadera de recursos. Por si fuera poco, casi todas las páginas que promocionan el uso del prefetching sólo incluyen el código necesario para Firefox haciendo su solución totalmente inútil para la vida real, así que: cuidado con copy-paste!</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.unreal4u.com/2012/01/algunas-notas-sobre-el-prefetching/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Manito de gato al blog</title>
		<link>http://blog.unreal4u.com/2011/07/manito-de-gato-al-blog/</link>
		<comments>http://blog.unreal4u.com/2011/07/manito-de-gato-al-blog/#comments</comments>
		<pubDate>Sun, 17 Jul 2011 06:26:47 +0000</pubDate>
		<dc:creator>unreal4u</dc:creator>
				<category><![CDATA[Javascript/jQuery]]></category>
		<category><![CDATA[Pensamientos Personales]]></category>

		<guid isPermaLink="false">http://blog.unreal4u.com/?p=555</guid>
		<description><![CDATA[Hace mucho tiempo que quería hacer algunas cosas nuevas en el blog, entre las cuales estaban: Una actualización general: Cuando instalé el blog WordPress iba en la versión 2.7.9 y nunca más la actualicé. Actualización de Plugins: Aunque no me gusta ocupar plugins, sí tenía algunos que estaban sumamente desactualizados. Incorporar botones sociales: Hoy en [...]]]></description>
			<content:encoded><![CDATA[<p>Hace mucho tiempo que quería hacer algunas cosas nuevas en el blog, entre las cuales estaban:</p>
<ul>
<li>Una actualización general: Cuando instalé el blog WordPress iba en la versión 2.7.9 y nunca más la actualicé.</li>
<li>Actualización de Plugins: Aunque no me gusta ocupar plugins, sí tenía algunos que estaban sumamente desactualizados.</li>
<li>Incorporar botones sociales: Hoy en día, casi infaltables si uno quiere hacer las cosas de forma rápida.</li>
<li>Cambiar el blog de máquina: Antes estaba en una máquina casi exclusiva, ahora, estoy en el servidor web que sirve todas las páginas, pero podré administrar mejor.</li>
<p>Así que buenas noticias: actualicé WordPress a la última versión (3.2.1), actualicé los plugins a la última versión y también incorporé los botones <a href="http://www.google.com/webmasters/+1/button/">+1 de Google</a>, <a href="http://developers.facebook.com/docs/reference/plugins/like/">Like de Facebook</a> y el <a href="http://twitter.com/about/resources/tweetbutton#url-fields">Tweet Button de Twitter</a>. Y para dejar algo de aporte, revise el código después del salto.<br />
<span id="more-555"></span></p>
<p>La verdad, pensé que incorporar estos botones iba a ser un poco más complicado, pero resultó bastante más fácil de lo que pensé. Lo primero que tenemos que hacer es visitar cada una de las páginas arriba mencionadas y seleccionar el estilo adecuado a nuestro gusto. Una vez hecho eso, procedemos a su instalación.</p>
<h2>Botón +1 de Google</h2>
<p>En header.php de nuestro theme, justo antes del cierre de la cabecera, agregamos el siguiente código:</p>
<pre class="brush: xml; title: ; notranslate">&lt;script type=&quot;text/javascript&quot; src=&quot;https://apis.google.com/js/plusone.js&quot;&gt;&lt;/script&gt;</pre>
<p>Luego, para cuando queramos agregar el botón en algún lado, digamos single.php o index.php, sólo basta con: </p>
<pre class="brush: xml; title: ; notranslate">&lt;g:plusone size=&quot;medium&quot; href=&quot;&lt;?php the_permalink(); ?&gt;&quot;&gt;&lt;/g:plusone&gt;</pre>
<p>size y href son obviamente configurables. Revisen también la página de Google, porque al incluir el primer javascript, es posible setear algunas configuraciones de inmediato, como por ejemplo el idioma.</p>
<h2>Like de Facebook</h2>
<p>Este botón es quizás el más difícil de estilar debido a que trabaja directamente con HTML en vez de CSS para eso. De todas formas, es bastante fácil, basta con agregar este código:</p>
<pre class="brush: xml; title: ; notranslate">&lt;div id=&quot;fb-root&quot;&gt;&lt;/div&gt;&lt;script src=&quot;http://connect.facebook.net/en_US/all.js#appId=148806621860058&amp;amp;xfbml=1&quot;&gt;&lt;/script&gt;&lt;fb:like href=&quot;&lt;?php the_permalink(); ?&gt;&quot; send=&quot;false&quot; layout=&quot;button_count&quot; width=&quot;80&quot; show_faces=&quot;false&quot; font=&quot;&quot;&gt;&lt;/fb:like&gt;</pre>
<p>Pueden revisar las opciones que ofrece el botón en el mismo link que cité arriba, de las 3 opciones, es la mejor documentada.</p>
<h2>Tweet Button de Twitter</h2>
<p>De las tres, es la que peor documentación tiene, sin embargo, su inclusión sigue siendo, tal como los demás botones, casi un chiste de lo fácil que es.<br />
Lo primero que tenemos que hacer es incluir el siguiente código en nuestra cabecera:</p>
<pre class="brush: xml; title: ; notranslate">&lt;script src=&quot;http://platform.twitter.com/widgets.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;</pre>
<p>Y después, cuando queramos imprimir el botón:</p>
<pre class="brush: xml; title: ; notranslate">&lt;a href=&quot;http://twitter.com/share&quot; class=&quot;twitter-share-button&quot; count=&quot;horizontal&quot; lang=&quot;es&quot; text=&quot;&lt;?php the_title(); ?&gt;&quot; url=&quot;&lt;?php the_permalink(); ?&gt;&quot;&gt;Tweet&lt;/a&gt;</pre>
<p>Y con eso, quedará inmediatamente insertado en nuestro blog.</p>
<p>Espero que les haya servido de ayuda para además, revitalizar un poco el blog.</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.unreal4u.com/2011/07/manito-de-gato-al-blog/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Algunos links interesantes</title>
		<link>http://blog.unreal4u.com/2011/02/algunos-links-interesantes/</link>
		<comments>http://blog.unreal4u.com/2011/02/algunos-links-interesantes/#comments</comments>
		<pubDate>Fri, 04 Feb 2011 03:23:00 +0000</pubDate>
		<dc:creator>unreal4u</dc:creator>
				<category><![CDATA[Bases de Datos]]></category>
		<category><![CDATA[Classes]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[Javascript/jQuery]]></category>
		<category><![CDATA[Magento]]></category>
		<category><![CDATA[Mi mundo en noticias]]></category>
		<category><![CDATA[Pensamientos Personales]]></category>
		<category><![CDATA[PHP]]></category>

		<guid isPermaLink="false">http://blog.unreal4u.com/?p=499</guid>
		<description><![CDATA[Como siempre, navego en busca de información interesante, y aquí les traigo algunos links de interés (que además me servirán para desocupar un par de pestañas del navegador). Están ordenadas por temática, y hay de todo un poco, desde generadores de passwords hasta guías sobre cómo hacer extensiones de classes para Magento. jQuery / Javascript: [...]]]></description>
			<content:encoded><![CDATA[<p>Como siempre, navego en busca de información interesante, y aquí les traigo algunos links de interés (que además me servirán para desocupar un par de pestañas del navegador). Están ordenadas por temática, y hay de todo un poco, desde generadores de passwords hasta guías sobre cómo hacer extensiones de classes para Magento.<br />
<span id="more-499"></span></p>
<p>jQuery / Javascript:<br />
<a href="http://playground.mobily.pl/jquery/mobily-blocks/demo.html#">Una botonera hecha con jQuery</a> y cuyo efecto me encantó.<br />
<a href="http://www.webresourcesdepot.com/wp-content/uploads/file/jquerydragdrop/">Ordenar un arreglo con drag &#038; drop</a>, enviando una solicitud via Ajax al server principal.</p>
<p>PHP:<br />
<a href="http://kevin.vanzonneveld.net/techblog/article/create_daemons_in_php/">Cómo crear un daemon en PHP</a>, excelente artículo.<br />
Comprendiendo <a href="http://codeutopia.net/blog/2009/02/20/closures-coming-in-php-53-and-thats-a-good-thing/">cómo ocupar closures en PHP</a>.<br />
Del mismo blog, aprendiendo <a href="http://codeutopia.net/blog/2009/02/16/practical-uses-for-reflection/">cómo usar Reflection en PHP</a>.<br />
Desde DeveloperWorks, un artículo que explica <a href="http://www.ibm.com/developerworks/opensource/library/os-5waystunelamp/index.html?cmp=dw&#038;cpb=dwlin&#038;ct=dwgra&#038;cr=twitter&#038;ccy=zz&#038;csr=lambwam">cómo optimizar PHP en 5 simples pasos</a>, bastante básico pero certero.<br />
Interesantísimo artículo de cómo ocupar <a href="http://www.rooftopsolutions.nl/blog/107">Memcached, APC y/o directamente el sistema de archivos</a>.</p>
<p>MySQL:<br />
Del blog personal del creador de menéame, explica <a href="http://gallir.wordpress.com/2011/02/02/optimizando-obsesivamente-las-consultas-al-mysql/">cómo optimizó una consulta en el transcurso de 5 años</a>. Mención aparte se lo llevan los comentarios donde aprendí varias cosas nuevas.</p>
<p>WordPress:<br />
Una guía bastante buena que nos enseña <a href="http://digwp.com/2010/08/pimp-your-wp-config-php/">cómo optimizar (y asegurar) wp-config.php</a>, ese archivo tan vital de WordPress.<br />
¿Quiéres saber cómo funciona WordPress y su sistema de funciones? Échale un miro <a href="http://ayudawordpress.com/35-funciones-utiles-para-functions-php-en-wordpress/">a este post</a> donde definen 35 funciones (bastante) útiles para WP.</p>
<p>Magento:<br />
La mejor manera de trabajar en Magento: extendiendo classes. Por lo mismo, <a href="http://simonyoung.net/magento-tips/extending-an-existing-class-in-magento/">no te puedes perder este artículo</a> donde se explica con bastante detalle cómo crear una extensión.</p>
<p>CSS:<br />
Completo listado de <a href="http://css-infos.net/">todas las propiedades de CSS y cuáles son soportadas</a> en sus distintas versiones.<br />
Una guía acerca de los <a href="http://www.suburban-glory.com/blog?page=125">pseudo-selectores de CSS</a>, lectura recomendada para aquellos que quieran sacarle el jugo a CSS.</p>
<p>Misceláneos:<br />
¿Alguna vez has tenido que armar una página con un mapa de Google Maps y tienes que averiguar las coordenadas? Bueno, entonces sabrás el dolor de cabeza que representa averiguar las mismas, hasta ahora. Sólo basta ubicar bien el puntero <a href="http://www.agenciacreativa.net/coordenadas_google_maps.php">en esta página especialmente dedicada a tal propósito</a> y estás listo: ¡ya tendrás esas coordenadas!<br />
¿Necesitas generar una contraseña segura de forma rápida? Sin duda que <a href="http://www.thebitmill.com/tools/password.html">esto te ayudará mucho</a>.</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.unreal4u.com/2011/02/algunos-links-interesantes/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Revisión de RUT con Javascript y PHP (Revisited)</title>
		<link>http://blog.unreal4u.com/2010/09/revision-de-rut-con-javascript-y-php-revisited/</link>
		<comments>http://blog.unreal4u.com/2010/09/revision-de-rut-con-javascript-y-php-revisited/#comments</comments>
		<pubDate>Wed, 22 Sep 2010 03:24:42 +0000</pubDate>
		<dc:creator>unreal4u</dc:creator>
				<category><![CDATA[Javascript/jQuery]]></category>
		<category><![CDATA[Mundo Web]]></category>
		<category><![CDATA[PHP]]></category>

		<guid isPermaLink="false">http://blog.unreal4u.com/?p=445</guid>
		<description><![CDATA[Sí, es cierto, ya existe un post al respecto. Pero estoy viendo en Google Analytics que todo lo relacionado con el RUT es uno de los términos más buscados para la página, así que aprovecho de pegarle una revisión a ese post que ya tiene un poco más de 6 meses, así que bienvenido a [...]]]></description>
			<content:encoded><![CDATA[<p>Sí, es cierto, <a href="http://blog.unreal4u.com/2010/03/verificar-rut-con-javascript-y-php/">ya existe un post al respecto</a>.  Pero estoy viendo en Google Analytics que todo lo relacionado con el  RUT es uno de los términos más buscados para la página, así que  aprovecho de pegarle una revisión a ese post que ya tiene un poco más de  6 meses, así que bienvenido a la revisión del RUT como debería haber  sido.</p>
<p>Como ese título siempre me ha llamado bastante la atención, es que le  daré un enfoque bastante especial a que así sea. Este artículo estará  separado en 3 partes: la primera, una explicación teórica sobre qué es  el RUT y cuál es su función. La segunda, el algoritmo en JavaScript y el  tercero, el algoritmo en PHP, obviamente estas últimas dos han sido  revisados, actualizados y mejorados con respecto a su primera versión,  desde la llamada inicial que se hace a la función, pasando por  expresiones regulares y la detección automática del tipo de  identificador: RUT o RUN.<br />
<span id="more-445"></span></p>
<h2>Barniz teórico</h2>
<p>En Chile, comúnmente se le denomina RUT tanto al RUT (Rol Único  Tributario) como al RUN (Rol  Único Nacional). La diferencia está en que  el primero es un identificador de empresas mientras que el segundo sólo  es para personas naturales. En este artículo, me referiré  indistintamente a RUT o RUN.</p>
<p>Bueno, este número que consiste en un número de 1.000.000 a  99.999.999 es un identificador único a cada persona o empresa en Chile.  Sé que también existe RUT en Argentina pero como no lo conozco (aunque  tengo entendido que el algoritmo es bastante parecido) tocaré sólo el  RUT chileno.<br />
Además de esto, también se le une un dígito verificador que va de 0 a 9, más la letra K (representando 11), que no es nada más que una operación  matemática basada en el número en sí para filtrar un poco que el número  sea correcto.</p>
<p>Por lo tanto, este número, con la debida importancia que tiene, ha  sido convertido casi en un estándar para la informática: un número único  por persona, con límites conocidos, un checksum conocido y que se puede  guardar fácilmente en una base de datos es lo único que una persona  necesita para implementar el famoso RUT o RUN en su aplicación.</p>
<p>Sin embargo, siendo un número de millones, tenemos que existe una  secuencia de 7 dígitos como mínimo y 12 como máximo que tiene que  ingresar el usuario: tierra fértil para que el usuario se equivoque sin  darse cuenta, más aún tratándose de una combinación de dígitos y signos  de puntuación, y si queremos una base de datos que sea consistente...  pues no podemos darnos el lujo de dejar que el usuario ingrese cualquier  cosa.</p>
<p>Para esto, nació obviamente el último dígito de la secuencia,  separada por una raya para distinguirlo, que lo que hace es revisar que  el RUT ingresado corresponde a un número válido, el cual; mediante un  algoritmo; se puede verificar (Y de ahí el nombre "Dígito Verificador").</p>
<h2>En la práctica: JavaScript</h2>
<p>Sin mayores secretos, la que más modificaciones sufrió fue la versión  de Javascript, ya que se quitaron muchas partes que estaban redundantes  y se resolvió que sólo iba a devolver un verdadero o falso. Si desean  en cambio que retorne un número de error, pues con el código de PHP  podrán modificar el de Javascript.</p>
<pre class="brush: jscript; title: ; notranslate">function verifica_rut(c){
  var r=false,d=c.value,t=d.replace(/\b[^0-9kK]+\b/g,'');
  if(t.length==8){t=0+t;};
  if(t.length==9){
    var a=t.substring(t.length-1,-1),b=t.charAt(t.length-1);
    if(b=='k'){b='K'};
    if(!isNaN(a)){
      var s=0,m=2,x='0',e=0;
      for(var i=a.length-1;i&amp;gt;=0;i--){
        s=s+a.charAt(i)*m;
        if(m==7){m=2;}
        else{m++;};
      }
      var y=s%11;
      if(y==1){x='K';}
      else{
        if(y==0){x='0';}
        else{e=11-y;x=e+'';};
      };
      if(x==b){r=true;c.value=a.substring(0,2)+'.'+a.substring(2,5)+'.'+a.substring(5,8)+'-'+b};
    }
  }
  return r;
}
</pre>
<p>y minificado:<br />
<code>function verifica_rut(c){var  r=false,d=c.value,t=d.replace(/\b[^0-9kK]+\b/g,'');if(t.length==8){t=0+t;};if(t.length==9){var   a=t.substring(t.length-1,-1),b=t.charAt(t.length-1);if(b=='k'){b='K'};if(!isNaN(a)){var  s=0,m=2,x='0',e=0;for(var  i=a.length-1;i&gt;=0;i--){s=s+a.charAt(i)*m;if(m==7){m=2;}else{m++;};}var   y=s%11;if(y==1){x='K';}else{if(y==0){x='0';}else{e=11-y;x=e+'';};};if(x==b){r=true;c.value=a.substring(0,2)+'.'+a.substring(2,5)+'.'+a.substring(5,8)+'-'+b};}}return  r;};</code></p>
<h2>Código en PHP</h2>
<p>Aunque sufrió menos cambios que su simil en Javascript, tuvo una modificación bastante grande que fue el empleo de expresiones regulares  para eliminar cualquier caracter que no deba ir en un RUT o RUN: de esa  forma, se elimina cualquier caracter que no sea del 0 al 9, o la letra k  (mayúscula o minúscula).</p>
<pre class="brush: php; title: ; notranslate">function verifica_RUT($rut='') {
  $sep = array();
  $multi = 2;
  $suma = 0;
  if (empty($rut)) return 1;
  $tmpRUT = preg_replace('/[^0-9kK]/','',$rut);
  if (strlen($tmpRUT) == 8 ) $tmpRUT = '0'.$tmpRUT;
  if (strlen($tmpRUT) != 9) return 2;
  $sep['rut'] = substr($tmpRUT,0,8);
  $sep['dv']  = substr($tmpRUT, -1);
  if ($sep['dv'] == 'k') $sep['dv'] = 'K';
  if (!is_numeric($sep['rut'])) return 3;
  if (empty($sep['rut']) OR $sep['dv'] == '') return 4;
  for ($i=strlen($sep['rut']) - 1; $i &amp;gt;= 0; $i--) {
    $suma = $suma + $sep['rut'][$i] * $multi;
    if ($multi == 7) $multi = 2;
    else $multi++;
  }
  $resto = $suma % 11;
  if ($resto == 1) $sep['dvt'] = 'K';
  else {
    if ($resto == 0) $sep['dvt'] = '0';
    else $sep['dvt'] = 11 - $resto;
  }
  if ($sep['dvt'] != $sep['dv']) return 5;
  return 0;
}
</pre>
<h2>Uniendo todos los cabos sueltos</h2>
<p>Por supuesto que el ejemplo completo que incluye revisión (y formateo  de RUT) en Javascript como en PHP es algo que no podía faltar:</p>
<pre class="brush: php; title: ; notranslate">&lt;?php
function verifica_RUT($rut='') {
  $sep = array();  $multi = 2;  $suma = 0;
  if (empty($rut)) return 1;
  $tmpRUT = preg_replace('/[^0-9kK]/','',$rut);
  if (strlen($tmpRUT) == 8 ) $tmpRUT = '0'.$tmpRUT;
  if (strlen($tmpRUT) != 9) return 2;
  $sep['rut'] = substr($tmpRUT,0,8);
  $sep['dv']  = substr($tmpRUT, -1);
  if ($sep['dv'] == 'k') $sep['dv'] = 'K';
  if (!is_numeric($sep['rut'])) return 3;
  if (empty($sep['rut']) OR $sep['dv'] == '') return 4;
  for ($i=strlen($sep['rut']) - 1; $i &gt;= 0; $i--) {
    $suma = $suma + $sep['rut'][$i] * $multi;
    if ($multi == 7) $multi = 2;
    else $multi++;
  }
  $resto = $suma % 11;
  if ($resto == 1) $sep['dvt'] = 'K';
  else {
    if ($resto == 0) $sep['dvt'] = '0';
    else $sep['dvt'] = 11 - $resto;
  }
  if ($sep['dvt'] != $sep['dv']) return 5;
  return 0;
}
?&gt;&lt;html&gt;&lt;head&gt;&lt;title&gt;Verificar RUT&lt;/title&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
function verifica_rut(c){var r=false,d=c.value,t=d.replace(/\b[^0-9kK]+\b/g,'');if(t.length==8){t=0+t;};if(t.length==9){var a=t.substring(t.length-1,-1),b=t.charAt(t.length-1);if(b=='k'){b='K'};if(!isNaN(a)){var s=0,m=2,x='0',e=0;for(var i=a.length-1;i&gt;=0;i--){s=s+a.charAt(i)*m;if(m==7){m=2;}else{m++;};}var y=s%11;if(y==1){x='K';}else{if(y==0){x='0';}else{e=11-y;x=e+'';};};if(x==b){r=true;c.value=a.substring(0,2)+'.'+a.substring(2,5)+'.'+a.substring(5,8)+'-'+b};}}return r;};
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;?php
if (isset($_GET['rut'])) {
  $error = verifica_RUT($_GET['rut']);
  switch($error) {
    case 0 : echo 'Todo bien!!'; break;
    case 1 : echo 'RUT viene vacío'; break;
    case 2 : echo 'El RUT no viene con el mínimo de caracteres necesarios para validarlo'; break;
    case 3 : echo 'El RUT no viene en un formato numérico'; break;
    case 4 : echo 'El RUT o el dígito viene vacío.'; break;
    case 5 : echo 'El RUT y el dígito verificador no coinciden'; break;
    default: echo 'Error de la décimanovena dimensión!!! Corran en círculos!!!'; break;
  }
}
?&gt;
&lt;form action=&quot;&lt;?php echo $_SERVER['SCRIPT_NAME']; ?&gt;&quot; method=&quot;get&quot; id=&quot;formu&quot;&gt;
&lt;input type=&quot;text&quot; maxlength=&quot;12&quot; id=&quot;rut&quot; name=&quot;rut&quot; value=&quot;&quot; /&gt;
&lt;input type=&quot;button&quot; value=&quot;Validar RUT&quot; id=&quot;verificar_rut&quot; /&gt;
&lt;/form&gt;

&lt;script&gt;
$(&quot;#verificar_rut&quot;).click(function(){
  if(verifica_rut(document.getElementById(&quot;rut&quot;))==true){
    $(&quot;#formu&quot;).submit();
  }
  else{
    alert(&quot;El RUT es invalido, intente nuevamente&quot;);
    $(&quot;#rut&quot;).select().focus();
  };
});
&lt;/script&gt;

&lt;/body&gt;&lt;/html&gt;
</pre>
<p>Y eso sería todo amigos <img src='http://blog.unreal4u.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
]]></content:encoded>
			<wfw:commentRss>http://blog.unreal4u.com/2010/09/revision-de-rut-con-javascript-y-php-revisited/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Abrir todos los links externos en nueva ventana</title>
		<link>http://blog.unreal4u.com/2010/08/abrir-todos-los-links-externos-en-nueva-ventana/</link>
		<comments>http://blog.unreal4u.com/2010/08/abrir-todos-los-links-externos-en-nueva-ventana/#comments</comments>
		<pubDate>Sun, 29 Aug 2010 14:18:09 +0000</pubDate>
		<dc:creator>unreal4u</dc:creator>
				<category><![CDATA[Javascript/jQuery]]></category>

		<guid isPermaLink="false">http://blog.unreal4u.com/?p=429</guid>
		<description><![CDATA[Hace un tiempo atrás, necesitaba que todos los links externos fueran abiertos en una nueva ventana. Primero hice una función en PHP que cuando construía el link, detectaba si el mismo era interno o externo y si era externo, lo dejaba con el famoso target="_BLANK". Sin embargo, al poco tiempo después me di cuenta que [...]]]></description>
			<content:encoded><![CDATA[<p>Hace un tiempo atrás, necesitaba que todos los links externos fueran abiertos en una nueva ventana. Primero hice una función en PHP que cuando construía el link, detectaba si el mismo era interno o externo y si era externo, lo dejaba con el famoso target="_BLANK". Sin embargo, al poco tiempo después me di cuenta que ésta no era la solución ideal ya que fallaba en dos aspectos fundamentales: Si el link era construido mediante TinyMCE (o sea, por el usuario), no pasaba por el "constructor" de links. Por otro lado, el código generado no era compatible con la W3C en el modo estricto (En este modo, se elimina el atributo "target").<br />
Así que me puse a investigar qué necesitaba para que cumpliera con los dos propósitos... ¿La respuesta? JavaScript, y si podía utilizar el poder de selección de la librería jQuery, aún mejor. El resultado fue que todos los links externos de la página, independiente de quién las haya creado, se abren en otra ventana y lo mejor de todo es que el código de la página es compatible con la W3C.</p>
<pre class="brush: jscript; title: ; notranslate">$(document).ready(function(){$('a:not([href^=&quot;http://blog.unreal4u.com/&quot;])').attr(&quot;target&quot;,&quot;_BLANK&quot;);});</pre>
<p>Obviamente tiene que reemplazar <em>http://blog.unreal4u.com/</em> con la ruta de su aplicación.</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.unreal4u.com/2010/08/abrir-todos-los-links-externos-en-nueva-ventana/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Verificar RUT con Javascript y PHP</title>
		<link>http://blog.unreal4u.com/2010/03/verificar-rut-con-javascript-y-php/</link>
		<comments>http://blog.unreal4u.com/2010/03/verificar-rut-con-javascript-y-php/#comments</comments>
		<pubDate>Mon, 29 Mar 2010 04:08:59 +0000</pubDate>
		<dc:creator>unreal4u</dc:creator>
				<category><![CDATA[Javascript/jQuery]]></category>
		<category><![CDATA[Mundo Web]]></category>

		<guid isPermaLink="false">http://blog.unreal4u.com/?p=359</guid>
		<description><![CDATA[Atención! Este es una versión antigua! Existe una versión más nueva disponible aquí Sí, estamos totalmente de acuerdo: hay por lo menos unos 50 validadores distintos si buscamos en Internet. Sin embargo, este validador es uno distinto: lo hice yo Fuera de bromas, es un script bastante cortito (menor transferencia == página más rápida para [...]]]></description>
			<content:encoded><![CDATA[<h3><span style="color:red;font-size:130%;line-height:35px;display:block;margin-bottom:40px">Atención! Este es una versión antigua! Existe una <a href="http://blog.unreal4u.com/2010/09/revision-de-rut-con-javascript-y-php-revisited/">versión más nueva disponible aquí</a></span></h3>
<p>Sí, estamos totalmente de acuerdo: hay por lo menos unos 50 validadores distintos si buscamos en Internet. Sin embargo, este validador es uno distinto: lo hice yo <img src='http://blog.unreal4u.com/wp-includes/images/smilies/icon_razz.gif' alt=':P' class='wp-smiley' />  </p>
<p>Fuera de bromas, es un script bastante cortito (menor transferencia == página más rápida para el usuario) que realiza la verificación simple del RUT, es decir, un RUT tipo 11.111.111-1 seguirá siendo válido para este algoritmo. Lamentablemente el tiempo para hacer el completo no me sobra y creo que este blog es fiel reflejo de ello: hace muchísimo tiempo que no lo actualizo con alguna noticia.</p>
<p>También anda bastante lento el algoritmo en general, aunque eso puede ser problema de mi propio PC también. Sin embargo, se puede optimizar bastante más. La base fue tomada (la idea no más en realidad) del sitio del BancoEstado, <a href="https://www.bancoestado.cl/imagenes/comun2008/lg_prs.html">específicamente este iframe</a>. La versión de BancoEstado pesa 8309 bytes mientras que la versión realizada por mi pesa 1232 bytes (Un nada miserable 85% menos!). Manejando los mensajes de otra forma creo que se puede llegar al límite de un solo paquete de 1024 bytes.<br />
A continuación, el algoritmo del RUT chileno en Javascript y en PHP.<br />
<span id="more-359"></span></p>
<h2>Javascript</h2>
<pre class="brush: jscript; title: ; notranslate">
function ff(a){b=a;setTimeout(&quot;b.focus();&quot;,0);setTimeout(&quot;b.select();&quot;,0);return true;};
/* BORRAR COMENTARIO:: Lo de arriba es un arreglo para Firefox */
function revisa_RUT(c,e){
var t=&quot;&quot;;var b=0;var w=c.value;for(i=0;i&lt;w.length;i++){if(w.charAt(i)!=' '&amp;&amp;w.charAt(i)!='.'&amp;&amp;w.charAt(i)!='-'){t=t+w.charAt(i)};};if(t.length==8){t=0+t;};
if(t.length!=9){return 'Lo sentimos, pero el RUT no corresponde. Por favor intente nuevamente.';};
if(e=='e'){b=1;};a=t.substring(t.length-1,-1);d=t.charAt(t.length-1);if(d=='k'){d='K';};
if(isNaN(a)){return 'Lo sentimos, pero el RUT contiene caracteres invalidos. Por favor intente nuevamente.';};
if(b==1&amp;&amp;a&gt;50000000){return 'Lo sentimos, pero el RUT ingresado no corresponde a un RUT de persona natural.';};
//if(b==0&amp;&amp;a&lt;50000000){return 'Lo sentimos, pero el RUT ingresado no corresponde a un RUT de empresa.';};
if(!revisa_DV(a,d)){return 'Lo sentimos, pero el RUT es incorrecto. Por favor intente nuevamente.';};
c.value=a.substring(0,2)+'.'+t.substring(2,5)+'.'+t.substring(5,8)+'-'+d;
return true;};
function revisa_DV(a,b){if(a==null||b==null){return false;};
var s=0;var m=2;var d='0';var e=0;
for(i=a.length-1;i&gt;=0;i--){s=s+a.charAt(i)*m;if(m==7){m=2;}else{m++;};};
var r=s%11;if(r==1){d='K';}else{if(r==0){d='0'}else{e=11-r;d=e+'';};};
if(b!=d){return false;};return true;};
/*
Llamar:
onblur=&quot;javascript:g=revisa_RUT(this,'n');if(g!=true){alert(g);ff(this);};&quot;

donde:
this == el elemento input del RUT
'e' == tipo de persona: natural o jurídica. &quot;n&quot; para natural, &quot;e&quot; para jurídica.

TODO:::
llamar a una función separada que dé el formato indicado.
Optimizar.
*/
</pre>
<h2>PHP</h2>
<pre class="brush: php; title: ; notranslate">function verifica_RUT($rut='') {
  $tmpRUT = '';
  $sep = array();
  $multi = 2;
  $suma = 0;
  if (empty($rut)) return 1;
  for ($i = 0; $i &lt; strlen($rut); $i++) {
    if ($rut[$i] != ' ' AND $rut[$i] != ' ' AND $rut[$i] != '.' AND $rut[$i] != '-') $tmpRUT .= $rut[$i];
  }
  if ( strlen($tmpRUT) == 8 ) $tmpRUT = '0'.$tmpRUT;
  if (strlen($tmpRUT) != 9) return 2;
  $sep['rut'] = substr($tmpRUT,0,8);
  $sep['dv']  = substr($tmpRUT, -1);
  if ($sep['dv'] == 'k') $sep['dv'] = 'K';
  if (!is_numeric($sep['rut'])) return 3;
  if (empty($sep['rut']) OR $sep['dv'] == '') return 4;
  for ($i=strlen($sep['rut']) - 1; $i &gt;= 0; $i--) {
    $suma = $suma + $sep['rut'][$i] * $multi;
    if ($multi == 7) $multi = 2;
    else $multi++;
  }
  $resto = $suma % 11;
  if ($resto == 1) {
    $sep['dvt'] = 'K';
  }
  else {
    if ($resto == 0) {
      $sep['dvt'] = '0';
    }
    else {
      $sep['dvt'] = 11 - $resto;
    }
  }
  if ($sep['dvt'] != $sep['dv']) return 5;
  return 0;
}
// --------------------------------------------------------
// Hasta aquí llega, lo de abajo fue una prueba de concepto
// no más, que pueden copiar tal cual.

$rut = '';
if (isset($_POST['rut'])) {
  $error = verifica_RUT($_POST['rut']);
  switch($error) {
    case 0 : echo 'Todo bien!!'; break;
    case 1 : echo 'RUT viene vacío'; break;
    case 2 : echo 'El RUT no viene con el mínimo de caracteres necesarios para validarlo'; break;
    case 3 : echo 'El RUT no viene en un formato numérico'; break;
    case 4 : echo 'El RUT o el dígito viene vacío.'; break;
    case 5 : echo 'El RUT y el dígito verificador no coinciden'; break;
    default: echo 'Error de la décimanovena dimensión!!! Corran en círculos!!!'; break;
  }
  $rut = $_POST['rut'];
}
?&gt;&lt;html&gt;&lt;head&gt;&lt;title&gt;Probando...&lt;/title&gt;&lt;/head&gt;&lt;body onload=&quot;document.getElementById('rut').focus();&quot;&gt;
&lt;form  action=&quot;&lt;?php echo $_SERVER['SCRIPT_NAME']; ?&gt;&quot; method=&quot;post&quot;&gt;
&lt;input type=&quot;text&quot; id=&quot;rut&quot; name=&quot;rut&quot; value=&quot;&lt;?php echo $rut; ?&gt;&quot; /&gt;&lt;input type=&quot;submit&quot; value=&quot;aceptar&quot; /&gt;&lt;/form&gt;&lt;/body&gt;&lt;/html&gt;
</pre>
<h2>Conclusiones</h2>
<p>Si sé, es un trabajo cochino que es muy muy muy probable que se pueda pulir mucho más que como está, pero este fue una volada que hice a la rapidita (especialmente la de PHP). A ver si algún día me animo a mejorarlo y optimizarlo. También le faltan muchas cosas todavía, pero por el momento es lo que hay.</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.unreal4u.com/2010/03/verificar-rut-con-javascript-y-php/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
	</channel>
</rss>

