<?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>MasioIT &#187; javascript</title>
	<atom:link href="http://www.masio.com.mx/category/javascript/feed" rel="self" type="application/rss+xml" />
	<link>http://www.masio.com.mx</link>
	<description>Tecnología e Información</description>
	<lastBuildDate>Sun, 06 Feb 2011 17:23:57 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	
		<item>
		<title>Google NO escanea tus plugins de firefox</title>
		<link>http://www.masio.com.mx/google-no-escanea-tus-plugins-de-firefox</link>
		<comments>http://www.masio.com.mx/google-no-escanea-tus-plugins-de-firefox#comments</comments>
		<pubDate>Fri, 09 Nov 2007 01:11:10 +0000</pubDate>
		<dc:creator>Masiosare</dc:creator>
				<category><![CDATA[google]]></category>
		<category><![CDATA[javascript]]></category>

		<guid isPermaLink="false">http://www.masio.com.mx/google-no-escanea-tus-plugins-de-firefox/es/</guid>
		<description><![CDATA[Hace poco vi un post de un &#8220;Blogger, Entrepreneur, Senior Consultant, IT Architect, IT Specialist, Father, Indo, Bright&#8221; en el que gritaba alarmado que google analizaba tu firefox y que sabia que plugins estan instalados y que habia que quemarlo con leña verde. Esto es completamente falso. Lo que hace google es simplemente detectar si [...]
Related posts:<ol>
<li><a href='http://www.masio.com.mx/google_reader_plus_plus' rel='bookmark' title='Google Reader ++'>Google Reader ++</a></li>
<li><a href='http://www.masio.com.mx/minipost-firefox-400-millones-de-descargas' rel='bookmark' title='Minipost: Firefox = 400 millones de descargas'>Minipost: Firefox = 400 millones de descargas</a></li>
<li><a href='http://www.masio.com.mx/google-feed-api-y-the-daily-show' rel='bookmark' title='Google Feed Api y The Daily show'>Google Feed Api y The Daily show</a></li>
</ol>]]></description>
			<content:encoded><![CDATA[<p>Hace poco vi un post de un &#8220;Blogger, Entrepreneur, Senior Consultant, IT Architect, IT Specialist,         Father, Indo, Bright&#8221; en el que gritaba alarmado que <a href="http://www.cogmios.nl/gmail-analyzes-your-firefox-plugins-20071107.html">google analizaba tu firefox y que sabia que plugins estan instalados</a> y que habia que quemarlo con leña verde.
</p>
<p>
Esto es completamente falso. Lo que hace google es simplemente detectar si el plugin esta instalado. Google no puede analizar tu instalacion de firefox (a menos que tu se lo permitieras <img src='http://www.masio.com.mx/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> ).
</p>
<p>
Para ejemplo basta un boton. El siguiente parrafo te dira si tienes o no instalado firebug y peor aun! te dira que version tienes (solo es visible en la pagina, no en el RSS, a menos que tu feed reader sea muy muy malo)
</p>
<p>[inline]</p>
<p>[script type='text/javascript']<br />
<!--<br />
 if(typeof console == "undefined" || typeof console.firebug == "undefined")<br />
 {<br />
document.write("
<div style='font-size:200%;background-color:lightblue' >No tienes firebug instalado, suerte para la proxima<span style='font-size:50%' > O peor aun, estas usando IE</span> </div>
<p>&#8220;);<br />
}<br />
else<br />
{<br />
document.write(&#8221;
<div style='font-size:200%;background-color:red'>Tienes firebug instalado, la version &#8220;+console.firebug+&#8221;</div>
<p>&#8220;);</p>
<p>}<br />
//&#8211;><br />
[/script]<br />
<noscript><br />
Probablemente estes viendo esto desde tu feed reader o un navegador sin javascript. Visita la pagina para entender de que se trata este post <img src='http://www.masio.com.mx/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /><br />
</noscript><br />
[/inline]</p>
<p>
Quieres saber como lo hice? Ve el codigo fuente de esta pagina <img src='http://www.masio.com.mx/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> . Esto es posible porque firebug expone una propiedad publica accesible por todos. Google no esta haciendo nada extraño. No es posible con otras extensiones a menos que se vuelvan intencionalmente detectables, como firebug.
</p>
<p>
Quieres saber como es posible que esto sea posible en javascript , y que ademas, hace que javascript sea un lenguaje inherentemente inseguro para algunas cosas? Dejame un mensaje y escribire un articulo sobre eso <img src='http://www.masio.com.mx/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' />
</p>
<p>
No suelo contestar estas cosas, pero al leerlo me senti como el siguiente comic de dilbert
</p>
<p>
<a href="http://www.masio.com.mx/wp-content/uploads/2007/11/dilbert2007101222227.gif" title="dilbert2007101222227.gif"><img src="http://www.masio.com.mx/wp-content/uploads/2007/11/dilbert2007101222227-150x150.gif" alt="dilbert2007101222227.gif" /></a><a href="http://www.masio.com.mx/wp-content/uploads/2007/11/dilbert2007101222227.gif" title="dilbert2007101222227.gif"><br />
<br />Click para agrandar</a>
</p>
<p>Y no pude evitar escribir este post.</p>
<p>P.D. Que complicado es insertar javascript en una entrada de wordpres&#8230; sigh&#8230;<br /></p>
<p>Related posts:<ol>
<li><a href='http://www.masio.com.mx/google_reader_plus_plus' rel='bookmark' title='Google Reader ++'>Google Reader ++</a></li>
<li><a href='http://www.masio.com.mx/minipost-firefox-400-millones-de-descargas' rel='bookmark' title='Minipost: Firefox = 400 millones de descargas'>Minipost: Firefox = 400 millones de descargas</a></li>
<li><a href='http://www.masio.com.mx/google-feed-api-y-the-daily-show' rel='bookmark' title='Google Feed Api y The Daily show'>Google Feed Api y The Daily show</a></li>
</ol></p>]]></content:encoded>
			<wfw:commentRss>http://www.masio.com.mx/google-no-escanea-tus-plugins-de-firefox/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Como no dar consejos</title>
		<link>http://www.masio.com.mx/como-no-dar-consejos</link>
		<comments>http://www.masio.com.mx/como-no-dar-consejos#comments</comments>
		<pubDate>Tue, 06 Mar 2007 21:23:29 +0000</pubDate>
		<dc:creator>Masiosare</dc:creator>
				<category><![CDATA[javascript]]></category>
		<category><![CDATA[programacion]]></category>

		<guid isPermaLink="false">http://www.masio.com.mx/2007/03/06/como-no-dar-consejos/es/</guid>
		<description><![CDATA[Hoy leo en en digg un articulo de Harry Maugans sobre como crear un div colapsable con Javascript. Es un articulo enoorme para algo que se puede hacer en dos lineas y que se viene haciendo desde el inicio de los tiempos. El problema con esto es que recibio una cantidad muy considerable de votos [...]
Related posts:<ol>
<li><a href='http://www.masio.com.mx/como-hacer-que-tu-xp-luzca-como-vista' rel='bookmark' title='Como hacer que tu XP luzca como vista'>Como hacer que tu XP luzca como vista</a></li>
<li><a href='http://www.masio.com.mx/los-100-sitios-mas-visitados-por-los-mexicanos-en-agosto-de-2006' rel='bookmark' title='Los 100 Sitios mas visitados por los Mexicanos (en Agosto de 2006)'>Los 100 Sitios mas visitados por los Mexicanos (en Agosto de 2006)</a></li>
<li><a href='http://www.masio.com.mx/bug-descubierto-en-meneame-y-enchilame-y-clones-aka-fuera-bombas' rel='bookmark' title='Bug descubierto en Meneame (Y enchilame y clones) aka &quot;Fuera Bombas&quot;'>Bug descubierto en Meneame (Y enchilame y clones) aka &quot;Fuera Bombas&quot;</a></li>
</ol>]]></description>
			<content:encoded><![CDATA[<p>Hoy leo en en <a href="http://www.digg.com" target="_self" >digg</a> un articulo de Harry Maugans sobre como crear un div colapsable con Javascript. Es un <a href="http://www.harrymaugans.com/2007/03/05/how-to-create-a-collapsible-div-with-javascript-and-css/" target="_self" >articulo enoorme</a> para algo que se puede hacer en dos lineas y que se viene haciendo desde el inicio de los tiempos. </p>
<p>El problema con esto es que recibio una cantidad muy considerable de votos (al momento de escribir esto, <a href="http://digg.com/programming/How_to_Create_a_Collapsible_DIV_with_Javascript_and_CSS" target="_self" >arriba de 1300</a>) para un articulo taaan sencillo. Y esto es &quot;sorprendente&quot; por dos situaciones</p>
<ol>
<li>Parece haber una gran cantidad de personas que no tienen la mas remota idea de los basicos de la programacion web.
<li>El articulo tiene una pesima calidad tecnica. Al darle una revisada por encima puedo ver de menos 3 o 4 errores que tambien son basicos. </li>
</ol>
<p>Esto es preocupante porque estamos recreando errores que ya se creian superados y estamos ense&ntilde;ando estos problemas a los que no saben.</p>
<p>Por ejemplo, su &quot;solucion&quot; es esta:</p>
<p><code>&lt;div id=&quot;mydiv&quot; style=&quot;display:none&quot;&gt;&lt;h3&gt;This is a test!&lt;br&gt;Can you see me?&lt;/h3&gt;&lt;/div&gt;<br />&lt;a href=&quot;javascript:;&quot; onmousedown=&quot;toggleDiv(&rsquo;mydiv&rsquo;);&quot;&gt;Toggle Div Visibility&lt;/a&gt;</code></p>
<ul>
<li>Pone una liga que no es una liga. Grr..</li>
<li>Usa onmousedown. Si el usuario hace click y se arrepiente antes de soltar el mouse, de cualquier manera se lanzara el evento. Usa onclick en su lugar.</li>
<li>Agrega comportamientos al codigo, para cosas rapidas esta bien, pero a la larga se vuelve una pesadilla de mantenimiento</li>
<li>Es obtrusivo, si Javascript esta deshabilitado, el contenido no se podra ver nunca. </li>
</ul>
<p>Me parece un poco triste que este tipo de articulos sean &quot;noticia&quot;. Es muy notorio que hay tres grupos profesionales en el area. Los que estan generando los cambios en la industria, por ejemplo los que crearon prototype, scriptaculous, moo.fx, etc, los que les siguen los pasos y los que no tienen la menor idea. </p>
<p>Ser del primer grupo no es facil, requiere talento y dedicaci&oacute;n, eso a veces es mucho pedir, pero ser del segundo grupo no es tan dificil, lo requiere un poco de esfuerzo y de ganas de ser mejor. Como <a href="http://www.masio.com.mx/2006/09/18/el-respeto-a-la-profesion/es/" target="_self" >ya dije en este post</a>, hay maneras muy sencillas de estar informado de los &uacute;ltimos acontecimientos en el area. Solo falta dedicarle un poco de tiempo a nuestro desarrollo profesional, pues las herramientas estan ahi, al alcance de todos. </p>
<p>Por favor, no volvamos a discutir si es mejor usar tablas o css&#8230; ya es tiempo de dar el salto. </p>
<p>Related posts:<ol>
<li><a href='http://www.masio.com.mx/como-hacer-que-tu-xp-luzca-como-vista' rel='bookmark' title='Como hacer que tu XP luzca como vista'>Como hacer que tu XP luzca como vista</a></li>
<li><a href='http://www.masio.com.mx/los-100-sitios-mas-visitados-por-los-mexicanos-en-agosto-de-2006' rel='bookmark' title='Los 100 Sitios mas visitados por los Mexicanos (en Agosto de 2006)'>Los 100 Sitios mas visitados por los Mexicanos (en Agosto de 2006)</a></li>
<li><a href='http://www.masio.com.mx/bug-descubierto-en-meneame-y-enchilame-y-clones-aka-fuera-bombas' rel='bookmark' title='Bug descubierto en Meneame (Y enchilame y clones) aka &quot;Fuera Bombas&quot;'>Bug descubierto en Meneame (Y enchilame y clones) aka &quot;Fuera Bombas&quot;</a></li>
</ol></p>]]></content:encoded>
			<wfw:commentRss>http://www.masio.com.mx/como-no-dar-consejos/feed</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>Enchilalo!</title>
		<link>http://www.masio.com.mx/enchilalo</link>
		<comments>http://www.masio.com.mx/enchilalo#comments</comments>
		<pubDate>Mon, 09 Oct 2006 22:49:43 +0000</pubDate>
		<dc:creator>Masiosare</dc:creator>
				<category><![CDATA[firefox]]></category>
		<category><![CDATA[javascript]]></category>

		<guid isPermaLink="false">http://www.masio.com.mx/2006/10/09/enchilalo/</guid>
		<description><![CDATA[Este es un script para greasemonkey que te agrega un boton visible en todas las paginas mediante el cuale puedes enviar tu noticia con solo un click Para instalarlo necesitas la extension para firefox greasemonkey y hacer click aqui: Script Enchilalo para greasemonkey La version no esta del todo probada, la hice en un ratito. [...]
Related posts:<ol>
<li><a href='http://www.masio.com.mx/validacion-de-formas-no-obtrusiva' rel='bookmark' title='Validacion de formas no obtrusiva'>Validacion de formas no obtrusiva</a></li>
<li><a href='http://www.masio.com.mx/35' rel='bookmark' title='Modificar las opciones de las pesta&#241;as en Firefox, sin extensiones'>Modificar las opciones de las pesta&#241;as en Firefox, sin extensiones</a></li>
</ol>]]></description>
			<content:encoded><![CDATA[<p>Este es un script para <a href="http://greasemonkey.mozdev.org/">greasemonkey</a> que te agrega un boton visible en todas las paginas mediante el cuale puedes enviar tu noticia con solo un click</p>
<p>Para instalarlo necesitas la extension para firefox greasemonkey y hacer click aqui:</p>
<p><a href="http://masio.com.mx/scripts/enchilalo.user.js">Script Enchilalo para greasemonkey</a></p>
<p>La version no esta del todo probada, la hice en un ratito. Si tienen problemas, avisenme <img src='http://www.masio.com.mx/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
<p>Related posts:<ol>
<li><a href='http://www.masio.com.mx/validacion-de-formas-no-obtrusiva' rel='bookmark' title='Validacion de formas no obtrusiva'>Validacion de formas no obtrusiva</a></li>
<li><a href='http://www.masio.com.mx/35' rel='bookmark' title='Modificar las opciones de las pesta&#241;as en Firefox, sin extensiones'>Modificar las opciones de las pesta&#241;as en Firefox, sin extensiones</a></li>
</ol></p>]]></content:encoded>
			<wfw:commentRss>http://www.masio.com.mx/enchilalo/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Validacion de formas no obtrusiva</title>
		<link>http://www.masio.com.mx/validacion-de-formas-no-obtrusiva</link>
		<comments>http://www.masio.com.mx/validacion-de-formas-no-obtrusiva#comments</comments>
		<pubDate>Wed, 06 Sep 2006 17:25:45 +0000</pubDate>
		<dc:creator>Masiosare</dc:creator>
				<category><![CDATA[javascript]]></category>
		<category><![CDATA[programacion]]></category>

		<guid isPermaLink="false">http://www.masio.com.mx/2006/09/06/validacion-de-formas-no-obtrusiva/</guid>
		<description><![CDATA[Una de las cosas mas tediosas en el desarrollo web son las validaciones de formas en javascript. Son odiosas, aburridas y repetitivas. Para hacer ese trabajo un poco mas sencillo me di a la tarea de crear una clase usando la libreria prototype. Caracteristicas Facil de usar Funciona en multiples navegadores (por ahora funciona en [...]
Related posts:<ol>
<li><a href='http://www.masio.com.mx/este-post-fue-escrito-con-windows-live-writer-beta' rel='bookmark' title='Este post fue escrito con Windows Live Writer (BETA)'>Este post fue escrito con Windows Live Writer (BETA)</a></li>
</ol>]]></description>
			<content:encoded><![CDATA[<p>Una de las cosas mas tediosas en el desarrollo web son las validaciones de formas en javascript. Son odiosas, aburridas y repetitivas.</p>
<p>Para hacer ese trabajo un poco mas sencillo me di a la tarea de crear una clase usando la libreria <a href="http://prototype.conio.net">prototype</a>.</p>
<p><strong>Caracteristicas</strong></p>
<ul>
<li>Facil de usar</li>
<li>Funciona en multiples navegadores (por ahora funciona en explorer y firefox, pero debe funcionar en mas)</li>
<li>Basada en expresiones regulares</li>
<li>Extendible</li>
</ul>
<p><strong>Forma de uso</strong></p>
<ol>
<li>Agregar las siguientes lineas en la cabecera de la pagina<code><br />
&lt;script  type="text/javascript" xsrc="prototype.js" mce_src="prototype.js" &gt; &lt;/script&gt;<br />
&lt;script  type="text/javascript" xsrc="validation.js" mce_src="validation.js" &gt; &lt;/script&gt;<br />
&lt;script type="text/javascript"&gt;<br />
Event.observe(window,"load",function (){ new Validation(<strong>'forma'</strong>); } ,true);<br />
&lt;/script&gt;</code><br />
Sustituyendo las rutas para los archivos javascript en donde sea necesario.</li>
<li>Agregar el atributo id a la forma igual al parametro que se le pasa al constructor de validacion (en este caso, &#8216;forma&#8217;)<br />
<code>&lt;form id=<strong>'forma'</strong> action="" method="Post"&gt;</code></li>
<li>Agregar class y alt para los campos que se quieran validar. Class definira la regla de validacion que se usara y alt el mensaje que se le presentara al usuario. Si no se incluye el atributo class, el elemento no se validarï¿½ y si no se incluye el atributo alt se presentarï¿½ un mensaje por default para esa regla (P. ej. &#8220;El campo x es requerido&#8221;)<code>&lt;input type='text' class='required' alt='Este campo es obligatorio' value=" " /&gt;</code></li>
</ol>
<p>Y listo, eso es todo <img src='http://www.masio.com.mx/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
<p><strong>Reglas de validacion incluidas</strong></p>
<ol>
<li><em>required: </em>El campo tiene que tener al menos un caracter</li>
<li><em>digits: </em>Permite solo numeros</li>
<li><em>nonzero: </em>Permite solo numeros diferentes de cero</li>
<li><em>chars</em>: Permite solamente caracteres entre a y z</li>
<li><em>alpha: </em>Es una combinacion entre digits y chars</li>
<li><em>email: </em>Permite emails validos (Si si, lo se, la validacion no es perfecta, conozco el <a href="http://www.ex-parrot.com/~pdw/Mail-RFC822-Address.html">regexp</a>)</li>
<li><em>date: </em>Permite solo fechas en el formato &#8220;YYYY-MM-DD&#8221;</li>
<li><em>empty</em>: Si se pone como clase de un campo, este solo sera validado si se encuentra lleno, de lo contrario no se validara. Puede usarse en conjuncion de otra regla para hacer un campo opcional (ver ejemplos)</li>
<li><em>dupe</em>: Esta regla es un poco especial. Requiere que ademas se llene la propiedad title. Despues buscarï¿½ el campo cuyo ID sea igual al title. Comparara ambos campos y si son diferentes mandara error. Util por ejemplo para validar campos contraseï¿½a.</li>
</ol>
<p><strong>Agregar nueva reglas</strong></p>
<p>Para agregar nuevas reglas de validacion, basta con modificar el archivo validation.js, en la funcion initRules, agregando una nueva linea por cada regla. El formato de las reglas es:</p>
<p>a.push( new Rule(&#8220;NOMBRE&#8221;, REGEXP , &#8220;texto de alerta)&#8221; ) );</p>
<ul>
<li>NOMBRE es el nombre de la regla</li>
<li>REGEXP es una expresion regular contra la que se validara el campo</li>
<li>Texto de alerta es el texto por default para esa regla. Para insertar el nombre del campo se puede escribir XXXX y esto sera sustituido por el nombre del campo, por ejemplo: &#8220;El campo XXXX debe tener 5 caracteres de longitud&#8221;</li>
</ul>
<p><strong>Ejemplos:</strong></p>
<p>Haz click <a target="_blank" href="http://www.masio.com.mx/pruebas/validation/testvalidation.html">aqui (abre en ventana nueva)</a></p>
<p><strong>Bajar codigo fuente y ejemplo</strong></p>
<p><a id="p55" href="http://www.masio.com.mx/wp-content/uploads/2006/10/validation.zip">validation.zip</a></p>
<p>Se aceptan sugerencias y comentarios</p>
<p>Related posts:<ol>
<li><a href='http://www.masio.com.mx/este-post-fue-escrito-con-windows-live-writer-beta' rel='bookmark' title='Este post fue escrito con Windows Live Writer (BETA)'>Este post fue escrito con Windows Live Writer (BETA)</a></li>
</ol></p>]]></content:encoded>
			<wfw:commentRss>http://www.masio.com.mx/validacion-de-formas-no-obtrusiva/feed</wfw:commentRss>
		<slash:comments>20</slash:comments>
		</item>
	</channel>
</rss>

