<?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>Front-End Zen &#187; javascript</title>
	<atom:link href="http://blog.inspiroh.com/tag/javascript/feed/" rel="self" type="application/rss+xml" />
	<link>http://blog.inspiroh.com</link>
	<description>Equilibrio y Control en el desarrollo web</description>
	<lastBuildDate>Sun, 06 Jun 2010 07:41:56 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Detectar el navegador con javascript</title>
		<link>http://blog.inspiroh.com/detectar-el-navegador-con-javascript/</link>
		<comments>http://blog.inspiroh.com/detectar-el-navegador-con-javascript/#comments</comments>
		<pubDate>Wed, 21 Oct 2009 10:11:21 +0000</pubDate>
		<dc:creator>Michael</dc:creator>
				<category><![CDATA[Front-End]]></category>
		<category><![CDATA[javascript]]></category>

		<guid isPermaLink="false">http://blog.inspiroh.com/?p=103</guid>
		<description><![CDATA[Hay varias formas de detectar en JS qué navegador está utilizando el cliente para visualizar nuestras webs. En un momento dado nos puede interesar saber el navegador que está utilizando para condicionar la funcionalidad de nuestro script.
Internet Explorer
Para detectar si usa Internet Explorer sin tener en cuenta la versión:
var ie=(document.all)? true:false;
if (ie) alert('Su navegador es [...]]]></description>
			<content:encoded><![CDATA[<p>Hay varias formas de detectar en JS qué navegador está utilizando el cliente para visualizar nuestras webs. En un momento dado nos puede interesar saber el navegador que está utilizando para condicionar la funcionalidad de nuestro script.</p>
<h3>Internet Explorer</h3>
<p>Para detectar si usa Internet Explorer sin tener en cuenta la versión:</p>
<pre name="code" class="js">var ie=(document.all)? true:false;
if (ie) alert('Su navegador es Internet Explorer');</pre>
<h3>Internet Explorer 6</h3>
<p>Muchos sabemos que IE6 es un caso especial. El siguiente script nos ayudará a detectar este caso y controlarlo:</p>
<pre name="code" class="js">var is_ie6 = (window.external &amp;&amp; typeof window.XMLHttpRequest == "undefined");
if (is_ie6 ) alert('Su navegador es Internet Explorer 6');</pre>
<h3>Safari</h3>
<p>Para detectar el navegador de Apple:</p>
<pre name="code" class="js">var is_safari = navigator.userAgent.toLowerCase().indexOf('safari/') &gt; -1;
if (is_safari ) alert('Su navegador es Safari');
</pre>
<h3>Google Chrome</h3>
<p>Aunque es un navegador que cumple bastante fielmente los estándares, sigue comportándose en determinados casos de forma especial. Controlaremos este caso así:</p>
<pre name="code" class="js">var is_chrome= navigator.userAgent.toLowerCase().indexOf('chrome/') &gt; -1;
if (is_chrome) alert('Su navegador es Google Chrome');</pre>
<p>No incluyo ningún script para detectar si el navegador es Firefox ya que es un navegador que cumple al 100% los estándares, el cual nos permite tratarlo como el caso <em>por defecto</em>.</p>
<h3>El objeto Navigator</h3>
<p>En los últimos 2 casos vemos que usamos el objeto <em>navigator </em>que contiene la info que buscamos. De hecho podríamos usar este objeto <em>navigator </em>para detectar cualquier navegador, ya que <em>navigator.userAgent.toLowerCase() </em>nos indica el tipo de navegador que usa, la versión y más información que nos puede servir para controlar cada caso.</p>
<p><a href="javascript:alert(navigator.userAgent.toLowerCase())">Haz clic aquí</a> para ver un ejemplo del objeto Navigator.</p>
<p>Al hacer clic te debe de salir la siguiente información:<br />
<em><script type="text/javascript">// <![CDATA[
document.write(navigator.userAgent.toLowerCase());
// ]]&gt;</script></em></p>
<p><span id="more-103"></span></p>
<h4>Propiedades</h4>
<p>Las propiedades de Navigator que podremos consultar son:</p>
<ul>
<li><span style="color: #006300; font-family: monospace; font-size: 10pt;">appCodeName</span>. Cadena que contiene el nombre del código del cliente.</li>
<li><span style="color: #006300; font-family: monospace; font-size: 10pt;">appName</span>. Cadena que contiene el nombre del cliente.</li>
<li><span style="color: #006300; font-family: monospace; font-size: 10pt;">appVersion</span>. Cadena que contiene información sobre la versión del cliente.</li>
<li><span style="color: #006300; font-family: monospace; font-size: 10pt;">language</span>. Cadena de dos caracteres que contiene información sobre el idioma de la versión del cliente.</li>
<li><span style="color: #006300; font-family: monospace; font-size: 10pt;">mimeTypes</span>. Array que contiene todos los tipos MIME soportados por el cliente. A partir de NS 3.</li>
<li><span style="color: #006300; font-family: monospace; font-size: 10pt;">platform</span>. Cadena con la plataforma sobre la que se está ejecutando el programa cliente.</li>
<li><span style="color: #006300; font-family: monospace; font-size: 10pt;">plugins</span>. Array que contiene todos los plug-ins soportados por el cliente. A partir de NS 3.</li>
<li><span style="color: #006300; font-family: monospace; font-size: 10pt;">userAgent</span>. Cadena que contiene la cabecera completa del agente enviada en una petición HTTP. Contiene la información de las propiedades appCodeName y appVersion.</li>
</ul>
<h4>Métodos</h4>
<ul>
<li><span style="color: #006300; font-family: monospace; font-size: 10pt;">javaEnabled()</span>. Devuelve <span style="color: #006300; font-family: monospace; font-size: 10pt;">true</span> si el cliente permite la utilización de Java, en caso contrario, devuelve <span style="color: #006300; font-family: monospace; font-size: 10pt;">false</span>.</li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://blog.inspiroh.com/detectar-el-navegador-con-javascript/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Scripty2: Lo más nuevo de Prototype y Scriptaculous</title>
		<link>http://blog.inspiroh.com/scripty2-lo-mas-nuevo-de-prototype-y-scriptaculous/</link>
		<comments>http://blog.inspiroh.com/scripty2-lo-mas-nuevo-de-prototype-y-scriptaculous/#comments</comments>
		<pubDate>Tue, 30 Jun 2009 14:52:15 +0000</pubDate>
		<dc:creator>Michael</dc:creator>
				<category><![CDATA[Front-End]]></category>
		<category><![CDATA[framework]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[prototype]]></category>
		<category><![CDATA[scriptaculous]]></category>

		<guid isPermaLink="false">http://blog.inspiroh.com/?p=58</guid>
		<description><![CDATA[Cualquier Front-End Developer sabe que en la actualidad disponemos de una multitud de herramientas que nos ayuda con el día a día. Para desarrollar en Javascript existen frameworks potentes, entre los más populares están jQuery, Prototype, YUI y Mootools.  Todas estas librerías son proyectos open-source y tienen detrás una comunidad importante que los apoya y [...]]]></description>
			<content:encoded><![CDATA[<p>Cualquier Front-End Developer sabe que en la actualidad disponemos de una multitud de herramientas que nos ayuda con el día a día. Para desarrollar en Javascript existen frameworks potentes, entre los más populares están <strong>jQuery, Prototype, YUI </strong>y<strong> Mootools</strong>.  Todas estas librerías son proyectos open-source y tienen detrás una comunidad importante que los apoya y los ayuda a crecer y mejorar.</p>
<h3>Prototype vs jQuery</h3>
<p>De todos estos frameworks, sin duda hay 2 que están por encima de los demás, almenos a lo que a popularidad se refiere, y son el <a href="http://jquery.com/">jQuery </a>y el <a href="http://www.prototypejs.org">Prototype</a>. En este artículo me voy a ahorrar la explicación de los pros y contras de cada uno, o cual es el mejor de los 2, porque este debate ya se abrió hace mucho en Internet, hay mucha información <a href="http://www.google.es/search?hl=es&amp;client=firefox-a&amp;rls=org.mozilla:es-ES:official&amp;hs=Day&amp;ei=RBVKSpzdItfOjAeX4Yhj&amp;sa=X&amp;oi=spell&amp;resnum=0&amp;ct=result&amp;cd=1&amp;q=prototype+vs+jquery&amp;spell=1">allí fuera</a>.</p>
<p>Me voy a limitar a mí propia experiencia. Y yo me quedo con Prototype. Con esto estoy llendo en contracorriente porque parece que en la actualidad, jQuery le está ganando terreno a Prototype en cuanto a popularidad. Pero la gente creo que se equivoca cuando<span id="more-58"></span> argumentan que jQuery es más potente que Prototype.  Una cosa es que al tener más respaldo popular, se hayan creado  más plug-ins y más documentación para usar el framework, pero eso no implica que su core sea mejor que Prototype.</p>
<p>Llevo ya varios años usando Prototype, en conjunción con Scriptaculous, y nunca he tenido motivos para cambiarme de framework. La gente me dice, &#8220;eso es porque no has probado jQuery&#8230;&#8221; No es cierto, sí que lo he usado, y no veo una gran diferencia. Son bastante similares. Muchos me comentan que la posibilidad de concatenar varios métodos seguidos que permite jQuery es una pasada, pero no sé si saben que desde Prototype 1.6, también permite contatenar métodos.</p>
<h3>Scripty2: El próximo salto de Prototype + Scriptaculous</h3>
<p>La combinación de Prototype con Scriptaculous &#8211; una librería de efectos &#8211; se complementa a la perfección con Prototype, y este dúo te permite realizar prácticamente cualquier cosa que se te ocurra en la web frontal y jugar con los elementos DOM. La grandísima noticia que leí en el <a href="http://mir.aculo.us/2009/06/26/scripty2-for-a-more-delicious-web/">blog </a>de uno de los autores directos de Scriptaculous, Thomas Fuchs, es que está de camino una nueva versión del Scriptaculous, rebautizado como <a href="http://scripty2.com">Scripty2</a>. Todavía es una versión alpha pero hay una <a href="http://scripty2.com/demos/cards/">demo</a> online que nos da una ligera idea de las nuevas capacidades de la librería y&#8230; ¡¡madre mía!! ¡Tiene una pinta increíble!</p>
<p>Se ha mejorado en todos los aspectos la librería, separándolo en Core, UI y FX. Código más compacto pero más potente. La cosa promete, estaré observando con detalle la evolución de este proyecto. Cuando esté la versión final, me gustará escuchar la comunidad de desarrolladores web y Front-End&#8217;s, y en especial a los ultra defensores del jQuery <img src='http://blog.inspiroh.com/wp-includes/images/smilies/icon_razz.gif' alt=':P' class='wp-smiley' /> </p>
<p>Web oficial de Scripty2: <a href="http://scripty2.com">http://scripty2.com</a></p>
<p style="text-align: left;">Fuente: <a href="http://mir.aculo.us/2009/06/26/scripty2-for-a-more-delicious-web/">Mir.aculo.us</a></p>
]]></content:encoded>
			<wfw:commentRss>http://blog.inspiroh.com/scripty2-lo-mas-nuevo-de-prototype-y-scriptaculous/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Problema de transparencia PNG en internet explorer 6 (IE6)</title>
		<link>http://blog.inspiroh.com/problema-de-transparencia-png-en-internet-explorer-6-ie6/</link>
		<comments>http://blog.inspiroh.com/problema-de-transparencia-png-en-internet-explorer-6-ie6/#comments</comments>
		<pubDate>Tue, 26 May 2009 13:55:36 +0000</pubDate>
		<dc:creator>Michael</dc:creator>
				<category><![CDATA[Front-End]]></category>
		<category><![CDATA[hack]]></category>
		<category><![CDATA[ie6]]></category>
		<category><![CDATA[javascript]]></category>

		<guid isPermaLink="false">http://blog.inspiroh.com/?p=46</guid>
		<description><![CDATA[Un desarrollador Front-End tarde o temprano acaba enfrentánose a uno de los múltiples problemas que tiene IE6, y en este caso se trata de las transparencias en las imágenes PNG. Lo normal es recurrir a la alternativa de las imágenes GIF, pero en ocasiones, la calidad no acaba de alcanzar la misma que un PNG. [...]]]></description>
			<content:encoded><![CDATA[<p>Un desarrollador Front-End tarde o temprano acaba enfrentánose a uno de los múltiples problemas que tiene IE6, y en este caso se trata de las <strong>transparencias en las imágenes <acronym title="Portable Network Graphics">PNG</acronym></strong>. Lo normal es recurrir a la alternativa de las imágenes GIF, pero en ocasiones, la calidad no acaba de alcanzar la misma que un PNG. Por suerte, en la actualidad existen distintas librerías que solucionan esta incompatibilidad y nos hacen la vida un poco más fáciles.</p>
<p>Cito algunas de las librerías que he utilizado personalmente y que corrigen la incompatibilidad de Internet Explorer 6 (IE6). Todos ellos son válidos y funcionan a la perfección, por tanto elegir un script es más una elección por gusto que por otra cosa:</p>
<h3>PNG fix</h3>
<p>Correcto script que habilita las transparencias de PNG en IE6.</p>
<p><a href="http://homepage.ntlworld.com/bobosola/"><em>http://homepage.ntlworld.com/bobosola/</em></a></p>
<h3>Unit PNG fix</h3>
<p>Otro script que soluciona el problema, esta vez todo en menos de 1kb!<br />
<a rel="nofollow" href="http://labs.unitinteractive.com/unitpngfix.php"><em>http://labs.unitinteractive.com/unitpngfix.php</em></a></p>
<h3>SuperSleight</h3>
<p>Esta vez un script salido de uno de los sitios web de referencia para todo Front-End o diseñador web.</p>
<p><a href="http://24ways.org/2007/supersleight-transparent-png-in-ie6"><em>http://24ways.org/2007/supersleight-transparent-png-in-ie6</em></a></p>
<h3>IE7-js</h3>
<p>Alojado en code.google.com, un script completo que además de corregir el problema de la transparencia, corrige otros problemas con IE6 y versiones anteriores.</p>
<p><a href="http://code.google.com/p/ie7-js/"><em>http://code.google.com/p/ie7-js/</em></a></p>
<p>He probado todas estas librerías y todos hacen más o menos lo mismo:</p>
<p>Le aplica un &#8220;filter&#8221;  a la imagen (<code>progid:DXImageTransform.Microsoft.AlphaImageLoader(...)</code>). Es un filtro que solo admite IE6 y lo que hace es habilitar las transparencias de la propia imagen.</p>
<p>Cada librería lo aplica a su manera, y su aplicación también varía ligeramente. En mi trabajo actual empecé usando <strong>Unit PNG fix</strong> pero he acabado usando <strong>IE7-js</strong> ya que me interesaba el resto del paquete.</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.inspiroh.com/problema-de-transparencia-png-en-internet-explorer-6-ie6/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
