<?xml version="1.0" encoding="UTF-8"?>
<!-- generator="wordpress/2.0.5" -->
<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/"
	>

<channel>
	<title>metal.ize</title>
	<link>http://metalize.liveonstyle.com</link>
	<description>mi vida en 'achetemele'</description>
	<pubDate>Mon, 24 Mar 2008 18:12:37 +0000</pubDate>
	<generator>http://wordpress.org/?v=2.0.5</generator>
	<language>en</language>
			<item>
		<title>¿&#8221;Errores&#8221;? del IE8&#8230; parte 2</title>
		<link>http://metalize.liveonstyle.com/2008/03/06/errores-del-ie8-parte-2/</link>
		<comments>http://metalize.liveonstyle.com/2008/03/06/errores-del-ie8-parte-2/#comments</comments>
		<pubDate>Thu, 06 Mar 2008 07:08:48 +0000</pubDate>
		<dc:creator>MeTaL_oRgY</dc:creator>
		
		<category>(X)HTML</category>

		<category>CSS</category>

		<category>Bugs/Hacks</category>

		<category>Tutoriales</category>

		<category>Artículos</category>
<category>código</category><category>estándares web</category><category>IE8</category><category>Internet Explorer 8</category><category>layout</category>
		<guid isPermaLink="false">http://metalize.liveonstyle.com/2008/03/06/%c2%bferrores-del-ie8-parte-2/</guid>
		<description><![CDATA[

La entrada anterior les comentaba, muy brevemente (tuve que salir corriendo, se me hacía tarde) mi experiencia con el IE y algunos ejemplos de páginas que no funcionaban bien en IE8. Ya que llegué a mi casa, frustrado, intento descubrir las razones del por qué. Este va a ser un post de "errores" (digo "errores" [...]]]></description>
			<content:encoded><![CDATA[<div class="centrado"><img id="image269" src="http://metalize.liveonstyle.com/wp-content/uploads/2008/03/ie8-beta-logo.jpg" alt="Logo de Internet Explorer 8 Beta" /></div>

<p>La entrada anterior les comentaba, muy brevemente (tuve que salir corriendo, se me hacía tarde) mi experiencia con el IE y algunos ejemplos de páginas que no funcionaban bien en IE8. Ya que llegué a mi casa, frustrado, intento descubrir las razones del por qué. Este va a ser un post de "errores" (digo "errores" porque tal vez no lo sean y todos los demás navegadores esten mal... ja, lo dudo) que encuentro en el IE8.</p>

<p>Cabe destacar que todos los problemas que aquí describo suceden <em>ÚNICAMENTE</em> en IE8. Todos estos errores los he probado en Opera (Navegador que también pasa el acid test 2) y no existen en este, por tanto, tomo como culpable a IE8. Por ahora los dejo con dos bugs sólamente:</p>

<a id="more-264"></a>

<ol>
	<li><a href="2/">¿Márgen negativo = position: absolute?</a></li>
	<li><a href="3/">¿Los links no pueden ser bloques?</a></li>
</ol>

<p>En cuanto tenga tiempo de echarle ojo al resto que he visto se los haré saber. También denle una leída al post de <a href="http://www.anieto2k.com">anieto2k</a> sobre <a href="http://www.anieto2k.com/2008/03/06/probando-internet-explorer-8-beta-1/">su experiencia con el IE8</a>. Seguro es una beta, y todavía le falta mucho.</p>

<p><strong>Nota:</strong> Hay que tener en mente que la versión actual de IE8 es una BETA, muy lejos de ser una versión completa y ruego a los cielos que estos "errores" sean corregidos. No sean demasiado duros con IE, el cambio hasta ahora pinta bien. Sólo esperemos se tomen "la molestia" de arreglar estos detalles.</p>
<p class="akst_link"><a href="http://metalize.liveonstyle.com/?p=264&amp;akst_action=share-this" title="E-mail this, post to del.icio.us, etc." id="akst_link_264" class="akst_share_link" rel="nofollow">Compártelo</a>
</p>]]></content:encoded>
			<wfw:commentRss>http://metalize.liveonstyle.com/2008/03/06/errores-del-ie8-parte-2/feed/</wfw:commentRss>
		</item>
		<item>
		<title>Internet Explorer 8: Hello World!</title>
		<link>http://metalize.liveonstyle.com/2008/03/05/internet-explorer-8-hello-world/</link>
		<comments>http://metalize.liveonstyle.com/2008/03/05/internet-explorer-8-hello-world/#comments</comments>
		<pubDate>Wed, 05 Mar 2008 23:39:41 +0000</pubDate>
		<dc:creator>MeTaL_oRgY</dc:creator>
		
		<category>General</category>

		<guid isPermaLink="false">http://metalize.liveonstyle.com/2008/03/05/internet-explorer-8-hello-world/</guid>
		<description><![CDATA[

Finalmente, el día ha llegado. Internet Explorer 8 (Beta) ya esta disponible para descargar y el mundo de los desarrolladores se alborota inmediatamente. Twitter se acelera, Acidtests.org se cae de vez en cuando, Microsoft PIDE comentarios sobre la beta (cosa que pensamos NUNCA sucedería)...


Y después de un rato de usarlo... debo admitir que ha sido [...]]]></description>
			<content:encoded><![CDATA[<div class="centrado"><img id="image256" src="http://metalize.liveonstyle.com/wp-content/uploads/2008/03/ie8acid2.png" alt="IE8: Hello World!" /></div>

<p>Finalmente, el día ha llegado. <a href="http://www.microsoft.com/downloads/details.aspx?FamilyId=1A2E3DDD-B38B-439D-BBA7-F179A5D3ECAF&#038;displaylang=en">Internet Explorer 8 (Beta) ya esta disponible para descargar</a> y el mundo de los desarrolladores se alborota inmediatamente. <a href="http://twitter.com/">Twitter</a> se acelera, <a href="http://www.acidtests.org/">Acidtests.org</a> se cae de vez en cuando, <a href="http://blogs.msdn.com/ie/">Microsoft</a> PIDE comentarios sobre la beta (cosa que pensamos <em>NUNCA</em> sucedería)...</p>


<p>Y después de un rato de usarlo... debo admitir que ha sido una enorme decepción...</p>

<a id="more-257"></a>

<p>Entro desesperadamente a la página de Microsoft para descargarlo después de que <a href="http://akamike.net/">un compañero</a> me pasa el link. Despues de instalarlo y tener que cerrar todos los programas, conversaciones, música y trabajos que estaba haciendo en ese momento para poder reiniciar, arranco ansioso el IE8 sólo para que se me cuelgue por primera vez... pero vamos, sólo duró unos 10 segundos así, después respondió. Luego me salió una ventana con dios sabe qué tantas opciones que sólo le dí <strong>siguiente siguiente siguiente</strong>. Finalmente pude navegar. Lo primero que noté fueron las toolbars que tiene: 4 toolbars por defecto (herramientas, direcciones, favoritos, tabs). Cabe destacar que no puedes moverlas de lugar, sólo puedes habilitarlas/deshabilitarlas. Pues bueno, como desarrollador <a href="http://es.wikipedia.org/wiki/Front-end_y_back-end#En_dise.C3.B1o_web_.28o_desarrollo_web.29">Front-End</a> lo primero que hice fue ir a hacer la <a href="http://www.webstandards.org/action/acid2/">acid test 2</a> y entusiasmado me dí cuenta de que si, si la pasaba:</p>

<div class="centrado"><a class="imagelink" href="http://metalize.liveonstyle.com/wp-content/uploads/2008/03/ie8acid2.jpg" title="IE8 y Acid test 2"><img id="image258" src="http://metalize.liveonstyle.com/wp-content/uploads/2008/03/ie8acid2.miniatura.jpg" alt="IE8 y Acid test 2" /></a></div>

<p>"¡Bien! Ahora vamos a probar la velocidad..." Me dije... pero vamos, que de la emoción se me olvidaba que es Microsoft y nunca son las cosas como prometen o nos hacen parecer. Después de navegar un rato me he dado cuenta de que todavía tiene problemas al renderear las páginas. Al parecer (aunque no he entrado muy a fondo) son problemas todavía con su boxmodel. ¿Cómo es posible si pasa el acid test 2? No tengo idea, pero <a href="http://www.opera.com/">Opera</a>, que también lo pasa, no tiene problema alguno. ALgunos de los problemas que he encontrado:</p>

<ul>
	<li>Problemas con contenido dinámico (ejemplo google reader en la página de <a href="http://akamike.net/">Akamike</a>) y clears.</li>
	<li>Problemas con el clear sin contenido dinámico (<a href="http://sausage.rolled.at/articles">ejemplo</a>)</li>
	<li>Problemas con el image-replacement mediante la técnica FIR en anchors (mirad la navegación en <a href="http://globaltolerance.com/">Global Tolerance</a>)</li>
	<li>Problemas con el posicionamiento absoluto (mirad el search en la web de <a href="http://www.apple.com/">apple</a>)</li>
</ul>

<p>Hay algunos otros, pero tengo que huir. En la noche actualizo con más detalle y veo si llego a la razón de estos bugs y por qué, aún pasando el <a href="http://www.webstandards.org/action/acid2/">acid test 2</a>, existen estos errores.</p><p class="akst_link"><a href="http://metalize.liveonstyle.com/?p=257&amp;akst_action=share-this" title="E-mail this, post to del.icio.us, etc." id="akst_link_257" class="akst_share_link" rel="nofollow">Compártelo</a>
</p>]]></content:encoded>
			<wfw:commentRss>http://metalize.liveonstyle.com/2008/03/05/internet-explorer-8-hello-world/feed/</wfw:commentRss>
		</item>
		<item>
		<title>Se siente la brisa llegar&#8230;</title>
		<link>http://metalize.liveonstyle.com/2007/11/28/se-siente-la-brisa-llegar/</link>
		<comments>http://metalize.liveonstyle.com/2007/11/28/se-siente-la-brisa-llegar/#comments</comments>
		<pubDate>Wed, 28 Nov 2007 09:47:18 +0000</pubDate>
		<dc:creator>MeTaL_oRgY</dc:creator>
		
		<category>General</category>

		<guid isPermaLink="false">http://metalize.liveonstyle.com/2007/11/28/se-siente-la-brisa-llegar/</guid>
		<description><![CDATA[

Oh por Dios... han pasado más de 2 meses desde la última vez que me pasé por aquí... y debo decir que es impresionante que el blog siga teniendo vida. Quiero agradeceros a todos aquellos que han visitado la web, comentado en viejos posts y dado las felicitaciones hacia mi persona por el (sumamente descuidado) [...]]]></description>
			<content:encoded><![CDATA[<div class="centrado"><img id="image247" src="http://metalize.liveonstyle.com/wp-content/uploads/2007/11/breeze-logo.jpg" alt="Breeze-logo" /></div>

<p>Oh por Dios... han pasado más de 2 meses desde la última vez que me pasé por aquí... y debo decir que es impresionante que el blog siga teniendo vida. Quiero agradeceros a todos aquellos que han visitado la web, comentado en viejos posts y dado las felicitaciones hacia mi persona por el (sumamente descuidado) trabajo que he hecho en este blog. Un especial saludo a toda la gente que me ha escrito preguntando si todo está bien y si pueden hacer algo por mi. De corazón, muchas gracias.</p>

<p>Debo deciros que este año ha sido algo complicado para mi en cuestión de tiempo. Pasé de no tener nada que hacer a ser una persona completamente ocupada. Incluso llegué al punto de estallar... pero ya estoy mejor. <img src='http://metalize.liveonstyle.com/wp-includes/images/smilies/icon_wink.gif' alt=';)' class='wp-smiley' /> </p>

<p>Lamentablemente, no tengo nada interesante que escribir. Sólo quería pasarme por aquí y avisarles que ya ando de vuelta, formulando cosas para postear...</p>

<p>... y también les traigo un pequeño teaser...</p>

<a id="more-252"></a>

<p>Así es. He estado trabajando arduamente (y por mucho, MUCHO tiempo) en un theme para Wordpress que cariñosamente he llamado <strong>"Breeze"</strong> y el cual es el primero de 4 themes que tengo en mente para esta plataforma. El diseño es bastante suave a la vista, y da un aire de tranquilidad y orden (o al menos, eso intenté). Les dejo las pequeñas imagenes que cruel y hábilmente esconden la verdadera esencia del theme:</p>

<div class="centrado"><img id="image248" src="http://metalize.liveonstyle.com/wp-content/uploads/2007/11/breeze-teaser-1.jpg" alt="Breeze teaser 1" />
<br /><br />
<img id="image249" src="http://metalize.liveonstyle.com/wp-content/uploads/2007/11/breeze-teaser-2.jpg" alt="Breeze teaser 2" />
<br /><br />
<img id="image250" src="http://metalize.liveonstyle.com/wp-content/uploads/2007/11/breeze-teaser-3.jpg" alt="Breeze teaser 3" />
<br /><br />
<img id="image251" src="http://metalize.liveonstyle.com/wp-content/uploads/2007/11/breeze-teaser-4.jpg" alt="Breeze teaser 4" />
<br /><br />
<img id="image253" src="http://metalize.liveonstyle.com/wp-content/uploads/2007/11/breeze-teaser-5.jpg" alt="Breeze teaser 5" /></div>

<p>Trabajo tan duro como puedo en este theme. Estoy tratando de hacerlo lo más accesible, seguro, ligero y a prueba errores que puedo. Teniendo compatibilidad con todos los navegadores importantes (y estoy pensando en meterle compatibilidad con IE5.5). Probablemente, y si todo me sale bien, meteré efectos con mootools y algo de ajax aquí y allá. Todo para crear un theme que sea bonito, funcional y practico.</p>

<p>Cabe aclarar que el theme no será gratuito. Estará a la venta en <a href="http://www.storelicious.com">storelicious.com</a>. Vamos, que será mi incursión al mundo del diseño. <img src='http://metalize.liveonstyle.com/wp-includes/images/smilies/icon_wink.gif' alt=';)' class='wp-smiley' /> </p>

<p>Eso es todo por ahora gente. Ya estoy de vuelta, trabajando en themes, posts, algunos recursos para ustedes... en fin... ya estoy de vuelta.</p><p class="akst_link"><a href="http://metalize.liveonstyle.com/?p=252&amp;akst_action=share-this" title="E-mail this, post to del.icio.us, etc." id="akst_link_252" class="akst_share_link" rel="nofollow">Compártelo</a>
</p>]]></content:encoded>
			<wfw:commentRss>http://metalize.liveonstyle.com/2007/11/28/se-siente-la-brisa-llegar/feed/</wfw:commentRss>
		</item>
		<item>
		<title>Los 8 grandes errores del diseño web</title>
		<link>http://metalize.liveonstyle.com/2007/09/26/los-8-grandes-errores-del-diseno-web/</link>
		<comments>http://metalize.liveonstyle.com/2007/09/26/los-8-grandes-errores-del-diseno-web/#comments</comments>
		<pubDate>Thu, 27 Sep 2007 02:46:43 +0000</pubDate>
		<dc:creator>MeTaL_oRgY</dc:creator>
		
		<category>General</category>

		<category>(X)HTML</category>

		<category>CSS</category>

		<category>Tutoriales</category>

		<category>Artículos</category>
<category>accesibilidad</category><category>código</category><category>CSS</category><category>diseño</category><category>estándares web</category><category>hacks</category><category>plugins</category><category>validación</category><category>XHTML</category>
		<guid isPermaLink="false">http://metalize.liveonstyle.com/2007/09/26/los-8-grandes-errores-del-diseno-web/</guid>
		<description><![CDATA[

Pff... Ahora si que he estado desaparecido mi gente. Me disculpo, pero he tenido un periodo de mucho estrés, sustos, trabajo, gastos... en fin. Me ha sido imposible postearles algo por aquí. Pero heme aquí, haciendo un tiempesito para revivir el blog un poco.

Cansado de ver muchas prácticas poco aconsejables (y que, honestamente, hasta hace [...]]]></description>
			<content:encoded><![CDATA[<div class="centrado"><img id="image246" src="http://metalize.liveonstyle.com/wp-content/uploads/2007/09/8-grandes-errores.jpg" alt="8 grandes errores" /></div>

<p>Pff... Ahora si que he estado desaparecido mi gente. Me disculpo, pero he tenido un periodo de mucho estrés, sustos, trabajo, gastos... en fin. Me ha sido imposible postearles algo por aquí. Pero heme aquí, haciendo un tiempesito para revivir el blog un poco.</p>

<p>Cansado de ver muchas prácticas poco aconsejables (y que, honestamente, hasta hace poco yo también cometía) y como la excusa perfecta para darles a conocer que sigo vivito y coleando (aunque aún sumamente ocupado), he decidido escribir sobre los 8 grandes errores del diseño web actual. Estas son prácticas que el mundo de <a href="http://www.maestrosdelweb.com/editorial/web2/">la web 2.0</a>, <a href="http://www.w3c.es/Presentaciones/2005/0314-estandares-JA/">los estándares web</a> y, por sobre todo, la idea de <a href="http://www.mati.unam.mx/index.php?option=com_content&#038;task=view&#038;id=85&#038;Itemid=36">separar la presentación del contenido</a> nos han metido en la cabeza y la mayoría de las veces las hemos seguido sin ponernos a pensar un poquito en las consecuencias.</p>

<a id="more-241"></a>

<p>Primero que nada, vamos a definir diseño web. Diseño web abarca ya no solo lo visual; es toda una ciencia que involucra accesibilidad, apariencia, presentación, contenido, contexto, mensaje e interactividad (si no es que más). Un diseñador web debe ser capaz de, a partir de una idea, generar una solución virtual. Ojo con la palabra: <strong>solución</strong>. Y para generar una solución, necesitamos tener un problema para empezar. En el caso generalizado de la web, el problema a resolver es el manejar información. Ya sea presentando o editando, visual o auditiva, útil o no tanto; la web es información y nada más. Cómo la manejamos depende de las necesidades que tengamos, y es aquí donde cometemos los 8 grandes errores del diseño web:</p>

<ol>
	<li><a href="2">¡Las imagenes también son contenido!</a></li>
	<li><a href="3">¡No todo es una lista!</a></li>
	<li><a href="4">Mi nombre es h1 h1' h1''</a></li>
	<li><a href="5">Los hacks no son una solución, son un <strong>problema</strong></a></li>
	<li><a href="6">¡Hola! Me llamo "naranja"</a></li>
	<li><a href="7">¿A none voy?</a></li>
	<li><a href="8">¡No soy gordo! ¡Soy funcional!</a></li>
	<li><a href="9">Las tablas no son de satanás, ¡usalas!</a></li>
</ol>
<p class="akst_link"><a href="http://metalize.liveonstyle.com/?p=241&amp;akst_action=share-this" title="E-mail this, post to del.icio.us, etc." id="akst_link_241" class="akst_share_link" rel="nofollow">Compártelo</a>
</p>]]></content:encoded>
			<wfw:commentRss>http://metalize.liveonstyle.com/2007/09/26/los-8-grandes-errores-del-diseno-web/feed/</wfw:commentRss>
		</item>
		<item>
		<title>Columnas 100% altas</title>
		<link>http://metalize.liveonstyle.com/2007/08/13/columnas-100-altas/</link>
		<comments>http://metalize.liveonstyle.com/2007/08/13/columnas-100-altas/#comments</comments>
		<pubDate>Mon, 13 Aug 2007 08:53:27 +0000</pubDate>
		<dc:creator>MeTaL_oRgY</dc:creator>
		
		<category>(X)HTML</category>

		<category>CSS</category>

		<category>Bugs/Hacks</category>

		<category>Tutoriales</category>

		<category>Artículos</category>
<category>(X)HTML</category><category>css</category><category>estándares web</category><category>layout</category><category>probando</category><category>XHTML</category>
		<guid isPermaLink="false">http://metalize.liveonstyle.com/2007/08/13/columnas-100-altas/</guid>
		<description><![CDATA[
Un mail del buen viciao2k3 me ha impulsado a escribir este post. Seguramente como diseñadores web les ha pasado que intentan hacer un layout con columnas y tienen sus fondos para cada columna y todo bello; pero al momento de ponerle el contenido te das cuenta de que las columnas no se expanden al mismo [...]]]></description>
			<content:encoded><![CDATA[<div class="centrado"><img id="image230" src="http://metalize.liveonstyle.com/wp-content/uploads/2007/08/columnas-css.jpg" alt="Columnas CSS" /></div>
<p>Un mail del buen <a href="http://www.viciao2k3.net/">viciao2k3</a> me ha impulsado a escribir este post. Seguramente como diseñadores web les ha pasado que intentan hacer un layout con columnas y tienen sus fondos para cada columna y todo bello; pero al momento de ponerle el contenido te das cuenta de que las columnas no se expanden al mismo tiempo. Y te dices a ti mismo "Muy bien... iré a mi hoja de estilos y agregaré <strong>height: 100%</strong> a todas las columnas y ¡listo!" Y después de aplicar el cambio te das cuenta de que no es así. "¿Pero qué caraj..." Si si, conozco bien la sensación. ¡Pero no más! Aquí les pongo las tres técnicas infalibles para lograr ese tan deseado efecto y que varias veces ha sido llamado "el santo grial del <acronym title="Cascading Style Sheets">CSS</acronym>" (junto con <a href="http://www.alistapart.com/articles/holygrail">el layout de tres columnas</a>).</p>

<a id="more-229"></a>

<h3 class="titulo">El problema</h3>
<p>Pues bien, ya medio expliqué el problema en la introducción, pero vamos a explicarlo con manzanitas... o mejor aún, con imagenes. La cosa está así: tu creas tu layout con tres columnas, una verde, una azul y una roja. Quieres que tus columnas, independientemente del contenido que tengan, siempre se extiendan hasta abajo. Pero lo que obtienes es algo como esto:</p>

<div class="centrado"><img id="image231" src="http://metalize.liveonstyle.com/wp-content/uploads/2007/08/columnas-problema.jpg" alt="El problema con las columnas" /></div>

<p>No se expanden las columnas como quieres. Esto se debe a que el comportamiento normal de los elementos es el de expandirse tanto como sea necesario; es decir, tanto como para cubrir todos los elementos que lo contienen, y no más. Al no estar unidas las columnas, no saben qué tanto se ha estirado la de al lado y por lo tanto quedan unas más cortas y otras más largas.</p>

<h3 class="titulo">¿La solución?</h3>

<p>Como casi todo en el maravilloso mundo del <acronym title="Cascading Style Sheets">CSS</acronym>, no existe una solución única para este problema y tendrán que saber decidir cuál es la mejor para ustedes. Aquí les presento tres técnicas que no pueden fallar. Pueden usar la que más les agrade. <img src='http://metalize.liveonstyle.com/wp-includes/images/smilies/icon_wink.gif' alt=';)' class='wp-smiley' /> </p>
<p class="akst_link"><a href="http://metalize.liveonstyle.com/?p=229&amp;akst_action=share-this" title="E-mail this, post to del.icio.us, etc." id="akst_link_229" class="akst_share_link" rel="nofollow">Compártelo</a>
</p>]]></content:encoded>
			<wfw:commentRss>http://metalize.liveonstyle.com/2007/08/13/columnas-100-altas/feed/</wfw:commentRss>
		</item>
		<item>
		<title>El Cuarteto de Nos</title>
		<link>http://metalize.liveonstyle.com/2007/07/26/el-cuarteto-de-nos/</link>
		<comments>http://metalize.liveonstyle.com/2007/07/26/el-cuarteto-de-nos/#comments</comments>
		<pubDate>Thu, 26 Jul 2007 22:20:58 +0000</pubDate>
		<dc:creator>MeTaL_oRgY</dc:creator>
		
		<category>Música</category>
<category>diseño gráfico</category><category>publicidad</category><category>video</category><category>youtube</category>
		<guid isPermaLink="false">http://metalize.liveonstyle.com/2007/07/26/el-cuarteto-de-nos/</guid>
		<description><![CDATA[

¿Qué puedo decir? Estoy sin palabras. Gracias al buen Milton! y su excelente blog, pude conocer a un grupo que me ha dejado con la boca abierta. El grupo se llama "El Cuarteto de Nos" y son de Uruguay. Tienen un estílo muy límpio y divertido. Sus letras son complejas y contienen grandes cantidades de [...]]]></description>
			<content:encoded><![CDATA[<div class="centrado"><img id="image224" src="http://metalize.liveonstyle.com/wp-content/uploads/2007/07/cuarteto-de-nos.jpg" alt="El Cuarteto de Nos" /></div>

<p>¿Qué puedo decir? Estoy sin palabras. Gracias al buen <a href="http://www.quelapaseslindo.com.ar/">Milton!</a> y su excelente blog, pude conocer a un grupo que me ha dejado con la boca abierta. El grupo se llama "<a href="http://www.cuartetodenos.com.uy/">El Cuarteto de Nos</a>" y son de <a href="http://www.turismo.gub.uy/">Uruguay</a>. Tienen un estílo muy límpio y divertido. Sus letras son complejas y contienen grandes cantidades de palabras propias del país. Incluso me llegan a recordar la misma sensación que <a href="http://www.rock.com.mx/circo.html">Circo</a> me dejó cuando los escuché por primera vez (<strong>Ojo</strong>: no porque su música se parezca... pero tienen el mismo feeling). Pero ¿para qué les cuento mi muy poco profesional opinión? Mejor les dejo el video que me ha dejado enganchado:</p>

<a id="more-225"></a>

<h3 class="titulo">El Cuarteto de Nos - Ya no sé qué hacer conmigo</h3>

<div class="centrado"><object type="application/x-shockwave-flash" style="width:425px;height:350px" data="http://www.youtube.com/v/y9LlnLTH87U"><param name="movie" value="http://www.youtube.com/v/y9LlnLTH87U" /></object></div>

<p>Este <strong>ESPECTACULAR</strong> video (que a mi parecer es el mejor que jamás he visto en mi vida) ha sido creado por <a href="http://www.milagritofilms.tv/">Milagrito Films</a>. Es <strong>IMPRESIONANTE</strong> el ver cómo pudieron relacionar tan bien el texto y las imagenes con la música. Sencillamente es de los mejores (si no es que el mejor) trabajo gráfico que yo he visto. Y la calidad de la canción sobra mencionarla.</p>

<p>Dense una vuelta por <a href="http://www.cuartetodenos.com.uy/">el sitio oficial de la banda</a> donde podrán escuchar otras canciones de su último disco titulado "Raro" y saber algo más de la banda. Y si se enganchan como yo, compren sus discos, que en verdad valen la pena (solo estoy esperando mi paga para comprarme los míos. <img src='http://metalize.liveonstyle.com/wp-includes/images/smilies/icon_wink.gif' alt=';)' class='wp-smiley' /> ).</p>

<p>Por cierto, si alguien consigue ese video para descargarlo (el formato que sea, da igual) se lo agradecería mucho.</p><p class="akst_link"><a href="http://metalize.liveonstyle.com/?p=225&amp;akst_action=share-this" title="E-mail this, post to del.icio.us, etc." id="akst_link_225" class="akst_share_link" rel="nofollow">Compártelo</a>
</p>]]></content:encoded>
			<wfw:commentRss>http://metalize.liveonstyle.com/2007/07/26/el-cuarteto-de-nos/feed/</wfw:commentRss>
		</item>
		<item>
		<title>99 Rooms</title>
		<link>http://metalize.liveonstyle.com/2007/07/25/99-rooms/</link>
		<comments>http://metalize.liveonstyle.com/2007/07/25/99-rooms/#comments</comments>
		<pubDate>Thu, 26 Jul 2007 03:54:41 +0000</pubDate>
		<dc:creator>MeTaL_oRgY</dc:creator>
		
		<category>Fotos</category>

		<category>Enlaces</category>

		<guid isPermaLink="false">http://metalize.liveonstyle.com/2007/07/25/99-rooms/</guid>
		<description><![CDATA[

Navegando por la web me encontré con este proyecto que, al igual que Zoomquilt es un proyecto coolaborativo de arte. Sin embargo, este es muy diferente. Kim Köster es un artísta que pinta imagenes bizarras y, algunos dirían, mórbidas en edificios industriales abandonados. Él es el origen de este proyecto.

99 Rooms is a unique internet [...]]]></description>
			<content:encoded><![CDATA[<div class="float-left"><img id="image222" src="http://metalize.liveonstyle.com/wp-content/uploads/2007/07/99rooms.jpg" alt="99 Rooms" /></div>

<p>Navegando por la web me encontré con este proyecto que, al igual que <a href="http://metalize.liveonstyle.com/2007/05/01/zoomquilt/">Zoomquilt</a> es un proyecto coolaborativo de arte. Sin embargo, este es muy diferente. <a href="http://www.kimkoester.com/">Kim Köster</a> es un artísta que pinta imagenes bizarras y, algunos dirían, mórbidas en edificios industriales abandonados. Él es el origen de este proyecto.</p>

<blockquote cite="http://www.99rooms.com/info.html"><p>99 Rooms is a unique internet art project that interweaves wall painting, photography, animation and sound in a manner entirely unknown until now. Shortly after its launch in June 2004, more than two million individuals throughout the world have already visited this interdisciplinary composite work of art.</p>
<p class="citasource"><a href="http://www.99rooms.com/info.html">99 Rooms</a></p></blockquote>

<p>La idea es sencilla. Bajo la dirección artística de <a href="http://www.richardschumann.de/">Richard Schumann</a> tomaron las fotos de <a href="http://www.kimkoester.com/">Kim Köster</a>, <a href="http://www.mittenimraum.de/">Stephan Schulz</a> las digitalizó y animó y <a href="http://www.dripdrop.de/">Johannes Bünemann</a> diseñó la música. ¿El resultado? Una galería de 99 cuartos que en verdad son un portal a la mente de estos artistas. Algunos son interactivos, otros son meramente visuales, algunos hasta espantan, pero todos son una obra de arte.</p>

<p>Os recomiendo mucho <a href="http://99rooms.terracontent.de/99rooms/99rooms.html">esta galería</a>. Les advierto que <em>no es recomendable para ezquisofrénicos</em> (ojo con el cuarto #84).</p><p class="akst_link"><a href="http://metalize.liveonstyle.com/?p=223&amp;akst_action=share-this" title="E-mail this, post to del.icio.us, etc." id="akst_link_223" class="akst_share_link" rel="nofollow">Compártelo</a>
</p>]]></content:encoded>
			<wfw:commentRss>http://metalize.liveonstyle.com/2007/07/25/99-rooms/feed/</wfw:commentRss>
		</item>
		<item>
		<title>Meme: El Juego</title>
		<link>http://metalize.liveonstyle.com/2007/07/25/meme-el-juego/</link>
		<comments>http://metalize.liveonstyle.com/2007/07/25/meme-el-juego/#comments</comments>
		<pubDate>Wed, 25 Jul 2007 19:15:37 +0000</pubDate>
		<dc:creator>MeTaL_oRgY</dc:creator>
		
		<category>Memes</category>
<category>personal</category><category>vida</category>
		<guid isPermaLink="false">http://metalize.liveonstyle.com/2007/07/25/meme-el-juego/</guid>
		<description><![CDATA[Bueno, vamos por este otro meme que me llega desde Gran Angular.

 Reglas:

	Cada jugador comienza con un listado de 8 cosas.
	Tienen que escribir esas 8 cosas en su blog y junto con las reglas del juego.
	Tienen que seleccionar a 8 personas mas invitar a jugar y anotar sus nombres o el nombre de su blog.
	No [...]]]></description>
			<content:encoded><![CDATA[<p>Bueno, vamos por este otro <a href="http://www.gran-angular.net/2007/07/24/las-8-cosas-acerca-de-mi-vida-meme/">meme que me llega desde Gran Angular</a>.</p>

<h3 class="titulo"> Reglas:</h3>
<ul>
	<li>Cada jugador comienza con un listado de 8 cosas.</li>
	<li>Tienen que escribir esas 8 cosas en su blog y junto con las reglas del juego.</li>
	<li>Tienen que seleccionar a 8 personas mas invitar a jugar y anotar sus nombres o el nombre de su blog.</li>
	<li>No Olviden dejar un comentario en sus blogs respectivos de que han sido invitados a jugar, refiriendo al post de tu blog “EL JUEGO” o "El meme de las 8 cosas".</li>
</ul>

<p>Así que vamos a empezar con mis ocho cosas: el amor, la vida, el tiempo, el entretenimiento, lo importante, lo indispensable, la familia y el aprendizaje:</p>

<a id="more-220"></a>

<ul>
	<li><strong>El Amor:</strong><br /> Estuve mucho tiempo buscandolo; al punto de la obsesión, diría yo... pero después de salir de ella y de unos cuantos tropezones (que mas bien fueron caídas del precipicio) <a href="http://metalize.liveonstyle.com/2007/02/18/quiero-anunciar/">encontré la persona justa para mi</a>. AMO a mi novia, con todo el corazón, y he vivido los mejores 5 meses de mi vida a su lado. Sé que es poco, pero por algo se empieza ¿Qué no? <img src='http://metalize.liveonstyle.com/wp-includes/images/smilies/icon_wink.gif' alt=';)' class='wp-smiley' /> </li>
	<li><strong>La vida</strong><br /> Cosa frágil. La vida para mi no ha sido más que un sinfin de giros en 360 grados. Cambios sumamente drásticos en practicamente todos los aspectos de mi vida. Igualmente, considero que la vida no es más que un montóin de pequeños detalles (el olor del pan tostado en las mañanas, mi comida en una bolsa de papel, un extraño sonriendome en la calle), y son esos pequeños detalles los que me hacen valorarla y seguir aquí, pese a los golpes que he recibido durante ella.</li>
	<li><strong>El tiempo</strong><br /> Lo <em>ODIO</em>. Si hay algo que no es suficiente en esta vida, es el tiempo. Simpemente no alcanza para hacer todo lo que uno tiene qe hacer... o quizá somos demasiado lentos. En todo caso, quisiera que los días duraran el doble, y que no tuvieramos que dormir. Dormir es rico, pero es un desperdicio de tiempo. Algún día inventaré el modo de dejar de necesitar dormir (ojo: no dejar de dormir, simplemente dejar de <strong>NECESITAR</strong> dormir).</li>
	<li><strong>El Entretenimiento</strong><br /> Solía ser un gamer bastante ocupado. Jugando RPGs largos y fascinantes, obteniendo TODO lo que se podría obtener en el juego, así me tomara un mes. Pero ultimamente solo me entretengo con el <a href="http://blizzard.com/starcraft/">Starcraft</a>. Otro de mis pastiempos es la música. Escucharla o tocar el piano, simplemente me encanta. También me gusta pasar el tiempo con mi novia, el desmadre, el soccer... lo normal. <img src='http://metalize.liveonstyle.com/wp-includes/images/smilies/icon_wink.gif' alt=';)' class='wp-smiley' /> </li>
	<li><strong>Lo importante</strong><br /> Poder demostrar lo que puedo ser. Demostrar que, pese a todo lo pensado y en contra de toda expectativa, soy alguien de provecho... y, en el proceso, hacer feliz a la gente que es importante para mi.</li>
	<li><strong>Lo indispensable</strong><br /> Para poder vivir, lo único que necesito es buena comida (y bebidas <img src='http://metalize.liveonstyle.com/wp-includes/images/smilies/icon_wink.gif' alt=';)' class='wp-smiley' /> ), buena música y la gente que quiero. Si alguna de ellas me faltara... no sé qué haría.</li>
	<li><strong>La familia</strong><br /> Pese a que tengo mucha familia en todos lados, para mi no lo son. La gente que considero mi familia son mi madre y mi hermana. Para mi, la familia es aquel grupo de personas que, pase lo que pase, siempre estarán ahí para ayudarte; con quienes has vivido tu vida, compartes experiencias, historias, sangre. Las demás personas son parientes, pero mi <em>familia</em> son mi madre y mi hermana.</li>
	<li><strong>El aprendizaje</strong><br /> La escuela es un excelente lugar para conocer gente; y una excelente excusa para fortalecer el cerebro; pero no es donde yo he aprendido. Todo lo que sé hacer, todo lo que me ha ayudado, todo lo que he usado en la práctica, lo he aprendido yo solo. Claro está, con las bases que he obtenido en la escuela, pero al final, el verdadero conocimiento lo adquirí por mi mismo, por gusto, por necesidad, por lo que sea. La escuela es importante, si; pero no es el único (ni el más importante) lugar para aprender.</li>
</ul>

<p>Le pasamos el meme a <a href="http://blog.chicoblog.net/">Chicoblog</a> y a <a href="http://www.ac09.net/">xmas</a>.</p><p class="akst_link"><a href="http://metalize.liveonstyle.com/?p=220&amp;akst_action=share-this" title="E-mail this, post to del.icio.us, etc." id="akst_link_220" class="akst_share_link" rel="nofollow">Compártelo</a>
</p>]]></content:encoded>
			<wfw:commentRss>http://metalize.liveonstyle.com/2007/07/25/meme-el-juego/feed/</wfw:commentRss>
		</item>
		<item>
		<title>Meme: Unas cuantas preguntas</title>
		<link>http://metalize.liveonstyle.com/2007/07/25/meme-unas-cuantas-preguntas/</link>
		<comments>http://metalize.liveonstyle.com/2007/07/25/meme-unas-cuantas-preguntas/#comments</comments>
		<pubDate>Wed, 25 Jul 2007 18:34:14 +0000</pubDate>
		<dc:creator>MeTaL_oRgY</dc:creator>
		
		<category>Memes</category>
<category>meme</category><category>preguntas</category><category>vida</category>
		<guid isPermaLink="false">http://metalize.liveonstyle.com/2007/07/25/meme-unas-cuantas-preguntas/</guid>
		<description><![CDATA[¡He vuelto! Jajaja, disculpenme por desaparecer así mi gente, pero entre el trabajo y un viaje de una semana al estado de Veracru' del que acabo de regresar no había podido tocar el blog, pero ahora he vuelto y pienso escribir varios artículos, aunque no de golpe, sino uno o dos por día.  

Y [...]]]></description>
			<content:encoded><![CDATA[<p>¡He vuelto! Jajaja, disculpenme por desaparecer así mi gente, pero entre el trabajo y un viaje de una semana al <a href="http://www.veracruz.gob.mx/">estado de Veracru'</a> del que acabo de regresar no había podido tocar el blog, pero ahora he vuelto y pienso escribir varios artículos, aunque no de golpe, sino uno o dos por día. <img src='http://metalize.liveonstyle.com/wp-includes/images/smilies/icon_razz.gif' alt=':P' class='wp-smiley' /> </p>

<p>Y vamos a empezar contestando <a href="http://edenahp.net/?p=76">un meme que el buen Juanjo Vargas me ha enviado</a>. Son algunas preguntas sobre mi persona (caray, que la blogosfera es chismosa ¬¬). Así que empecemos:</p>

<a id="more-219"></a>

<ul>
	<li><strong> ¿Cuanto tiempo llevas blogueando?</strong><br />Pues blogueando, como 5 meses; pero de webmaster llevo más tiempo. Empecé como un webmaster novato, y de hecho, <a href="http://metal_orgy.tripod.com/">mi primera web</a> sigue en linea. Soy el fundador de una web llamada <a href="http://ingosranch.gameshunters.com">InGo'S RaNcH</a> (que por el momento está offline <img src='http://metalize.liveonstyle.com/wp-includes/images/smilies/icon_sad.gif' alt=':(' class='wp-smiley' /> ), que no fue mas que mi laboratorio personal y he abandonado desde que empecé con el blog. Así que se puede decir que soy bastante novato en esto. Unos 4 años de webmaster, unos 5 meses de blogger.</li>
	<li><strong>¿Como te enteraste de la existencia de los blogs y te animaste a participar?</strong><br />Hmmm, interesante pregunta. Sinceramente no recuerdo... probablemente el primer blog que ví fue el de <a href="http://anieto2k.com/">aNieto2k</a>, aunque asegurarlo sería una mentira. Me animé a participar porque... porque... no sé, quería un lugar en donde experimentar y poder llamarlo mío; un lugar donde volcar todo lo que se me ocurriera y compartir mis ideas, opiniones y creaciones... y de ahí metal.ize. <img src='http://metalize.liveonstyle.com/wp-includes/images/smilies/icon_wink.gif' alt=';)' class='wp-smiley' /> </li>
	<li><strong>Dime cinco blogs que sigas a a diario o con mucha frecuencia.</strong><br />Sinceramente no soy mucho de navegar por internet (suena raro, lo sé). Utilizo la mayor parte de mi tiempo frente al monitor trabajando o experimentando con lo que voy aprendiendo... y el tiempo libre que me queda lo utilizo en jugar <a href="http://www.blizzard.com/starcraft/">Starcraft</a>. Sin embargo, si puedo mencionar dos blogs que visito cada que puedo: <a href="http://anieto2k.com/">aNieto2k</a> e <a href="http://www.infectedfx.net/">Infected-FX</a>. Claro que de vez en cuando me doy una vuelta por mi blogroll...</li>
	<li><strong>¿Eres lector anónimo de algún blog?</strong><br />Pues de todos los demás, aunque no soy un lector frecuente. Quiza el más parecido a esto sea el de <a href="http://ba-k.com/">Ba-k</a>.</li>
	<li><strong>¿Algunos autores que te despierten especial simpatía?</strong><br />Joder, que estos si son muchos. <a href="http://www.infectedfx.net/">Infected-FX</a>, <a href="http://edenahp.net/">Juanjo Vargas</a>, <a href="http://www.alvarocastano.com">Alvaro Castaño</a> son de las personas que me han maravillado por su personalidad. Tambien debo resaltar a la gente de <a href="http://www.digilicious.cl/">Digilicious</a>, que tienen un aire muy amigable.</li>
	<li><strong>¿Con que cinco blogueros te irias de borrachera?</strong><br />Venga, que las borracheras con quien sea son buenas. <img src='http://metalize.liveonstyle.com/wp-includes/images/smilies/icon_wink.gif' alt=';)' class='wp-smiley' />  (siempre y cuando no ean malacopas... jajaja). Aunque creo que estaría interesante una con el buen <a href="http://www.infectedfx.net/">Mauricio Caballero</a>... jajaja, además vivímos cerca. <img src='http://metalize.liveonstyle.com/wp-includes/images/smilies/icon_wink.gif' alt=';)' class='wp-smiley' /> </li>
	<li><strong>¿Con que tres blogueros pasarías una noche de locura sexual?</strong><br />Venga, que esas cosas son más privadas, son pocas las chicas blogueras y tengo novia (a la cual amo con todo mi ser <img src='http://metalize.liveonstyle.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> ).</li>
	<li><strong>¿Te has enamorado alguna vez de algún blogger?</strong><br />Jajaja, no caray, pero sería gracioso... *pensando en miles de frases cómicas involucrando las palabras "feed", "rel" y demás ñoñadas...*... quiza deba abrirle un blog a mi novia... hmmm...</li>
	<li><strong>¿Estas satisfecho (a) con tu blog?</strong><br />No del todo. Al diseño actual le falta MUCHO de lo que en realidad tengo en mente, y tiene pocos contenidos comparado con todo lo que tengo que decir... pero el tiempo... el <em>MALDITO</em> tiempo.</li>
	<li><strong>Elige entre tres y cinco blogueros para que contesten a estas preguntas en sus blogs.</strong><br />Vale pues, se lo mandamos a los chicos de <a href="http://www.digilicious.cl/">Digilicious</a>, al buen <a href="http://hyanetworks.com/wordpress/">Vic</a> y a <a href="http://xspecie.110mb.com/">Xspecie</a>.</li> 
</ul><p class="akst_link"><a href="http://metalize.liveonstyle.com/?p=219&amp;akst_action=share-this" title="E-mail this, post to del.icio.us, etc." id="akst_link_219" class="akst_share_link" rel="nofollow">Compártelo</a>
</p>]]></content:encoded>
			<wfw:commentRss>http://metalize.liveonstyle.com/2007/07/25/meme-unas-cuantas-preguntas/feed/</wfw:commentRss>
		</item>
		<item>
		<title>Evita los hacks en tu CSS</title>
		<link>http://metalize.liveonstyle.com/2007/07/08/evita-los-hacks-en-tu-css/</link>
		<comments>http://metalize.liveonstyle.com/2007/07/08/evita-los-hacks-en-tu-css/#comments</comments>
		<pubDate>Mon, 09 Jul 2007 03:40:23 +0000</pubDate>
		<dc:creator>MeTaL_oRgY</dc:creator>
		
		<category>(X)HTML</category>

		<category>CSS</category>

		<category>Bugs/Hacks</category>

		<category>Tutoriales</category>

		<category>Artículos</category>
<category>comentarios condicionales</category><category>estándares web</category><category>HTML</category><category>recursos</category>
		<guid isPermaLink="false">http://metalize.liveonstyle.com/2007/07/08/evita-los-hacks-en-tu-css/</guid>
		<description><![CDATA[Después de publicar el meme de la validación del blogroll y leer los comentarios de algunos usuarios (especialmente diarioTHC) recordé que tenía desde hace ya tiempo ganas de comentarles cómo evitar los hacks que no validan en su CSS para Internet Explorer (que es el que practicamente abarca todos los hacks que conocemos).

La idea y [...]]]></description>
			<content:encoded><![CDATA[<p>Después de publicar el <a href="http://metalize.liveonstyle.com/2007/07/08/meme-los-estandares-web-y-mi-blogroll/">meme de la validación del blogroll</a> y leer los comentarios de algunos usuarios (especialmente <a href="http://www.diariothc.com/">diarioTHC</a>) recordé que tenía desde hace ya tiempo ganas de comentarles cómo evitar los hacks que no validan en su CSS para Internet Explorer (que es el que practicamente abarca todos los hacks que conocemos).</p>

<p>La idea y razón es sencilla: menos código y siguiendo los estándares web.</p>

<a id="more-218"></a>

<h3 class="titulo">El problema</h3>

<p>Como muchos sabemos, Internet Explorer sigue sus propias reglas al momento de leer una página web. Esto nos ocaciona muchos dolores de cabeza y nos obliga a buscar maneras alternativas de lograr que este navegador funcione como queremos. Muchas de estas maneras son logradas por medio de hacks que, por algúna razón, sólo ese navegador lee. El hack más conocido para IE es el famosisimo <a href="http://www.positioniseverything.net/articles/ie7-dehacker.html">star-html hack</a>:</p>

<div class="igBar"><span id="lcss-28"><a href="#" onclick="javascript:showPlainTxt('css-28'); return false;">TEXTO PLANO</a></span></div><div class="syntax_hilite"><span class="langName">CSS:</span><br /><div id="css-28">
<div class="css"><ol><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">* html <span style="color: #6666ff;">.class </span><span style="color: #66cc66;">&#123;</span>reglas para IE6 o menor<span style="color: #66cc66;">&#125;</span> </div></li></ol></div>
</div></div><br />

<p>Claro que este hack no sería nada sin el <a href="http://www.sam-i-am.com/work/sandbox/css/mac_ie5_hack.html">Mac-hack</a>, que esconde el CSS de IE5 para Mac. Este funciona utilizando comentarios en CSS:</p>

<div class="igBar"><span id="lcss-29"><a href="#" onclick="javascript:showPlainTxt('css-29'); return false;">TEXTO PLANO</a></span></div><div class="syntax_hilite"><span class="langName">CSS:</span><br /><div id="css-29">
<div class="css"><ol><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #808080; font-style: italic;">/* Escondiendo codigo para IE5-mac \*/</span></div></li>
<li style="font-weight: bold;color:#26536A;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">* html <span style="color: #6666ff;">.class </span><span style="color: #66cc66;">&#123;</span>reglas para IE6 o menor<span style="color: #66cc66;">&#125;</span></div></li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #808080; font-style: italic;">/* IE5-mac puede seguir viendo codigo */</span> </div></li></ol></div>
</div></div><br />

<p>Por alguna extraña razón, la diagonal antes del asterisco de cierre del primer comentario evita que IE5-Mac cierre el comentario y piensa que este sigue abierto, así que todo lo que esté dentro de ese comentario y hasta el siguiente cierre de comentarios será ignorado por IE5-Mac.</p>

<p>En fin, hay millares de hacks para IE y todos son bastante usados hoy en día. Todo es bueno y bello, pero a veces estos hacks son demasiado largos (y esto, en ciertos casos, es inaceptable) o complicados o simplemente queremos tener un código limpio y sin errores de validación.</p>

<h3 class="titulo">Las alternativas</h3>

<p>Siempre hay alternativas a estos casos. Pondré algunos ejemplos y les iré mostrando cómo evitar los hacks y lograr que Internet Explorer se comporte como debe. Primero me voy contra el star-html hack, que es el más usado y el que ocaciona más errores de validación. Pondré como ejemplo el <a href="http://www.communitymx.com/content/article.cfm?page=2&#038;cid=C37E0">Holly Hack</a>. Este hack consiste en aplicar un <strong>height: 1%</strong> a una caja con problemas (tiene que ver mucho con floats, echenle una leída al artículo del hack <img src='http://metalize.liveonstyle.com/wp-includes/images/smilies/icon_wink.gif' alt=';)' class='wp-smiley' /> ). La cosa está en que solamente Internet Explorer debe tener aplicada esta altura, pues en otros navegadores podría causarles problema (aunque en la mayoría, las cajas se expanden automaticamente... pero en fin). Ahora bien, el código que proponen en <a href="http://www.communitymx.com/content/article.cfm?page=2&#038;cid=C37E0">la página del hack</a> es el siguiente:</p>

<div class="igBar"><span id="lcss-30"><a href="#" onclick="javascript:showPlainTxt('css-30'); return false;">TEXTO PLANO</a></span></div><div class="syntax_hilite"><span class="langName">CSS:</span><br /><div id="css-30">
<div class="css"><ol><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #808080; font-style: italic;">/* Hides from IE5-mac \*/</span></div></li>
<li style="font-weight: bold;color:#26536A;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">* html <span style="color: #6666ff;">.buggybox </span><span style="color: #66cc66;">&#123;</span><span style="color: #000000; font-weight: bold;">height</span>: <span style="color: #cc66cc;color:#800000;">1</span>%;<span style="color: #66cc66;">&#125;</span></div></li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #808080; font-style: italic;">/* End hide from IE5-mac */</span> </div></li></ol></div>
</div></div><br />

<p>Como ven, esconden el hack para IE5-mac y ponen el hack solo para Internet Explorer (el resto de los navegadores ignora el * html). Claro está, no valida (el star-html hack no es válido). ¿Cómo arreglamos esto? Les presento a <strong>!important</strong>. Esta pequeña palabrita hace maravillas si es usada correctamente. El siguiente código es equivalente al código anterior:</p>

<div class="igBar"><span id="lcss-31"><a href="#" onclick="javascript:showPlainTxt('css-31'); return false;">TEXTO PLANO</a></span></div><div class="syntax_hilite"><span class="langName">CSS:</span><br /><div id="css-31">
<div class="css"><ol><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #808080; font-style: italic;">/* Hides from IE5-mac \*/</span></div></li>
<li style="font-weight: bold;color:#26536A;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #6666ff;">.buggybox </span><span style="color: #66cc66;">&#123;</span></div></li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">height</span>: <span style="color: #993333;">auto</span> !important;</div></li>
<li style="font-weight: bold;color:#26536A;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">height</span>: <span style="color: #cc66cc;color:#800000;">1</span>%;</div></li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #66cc66;">&#125;</span></div></li>
<li style="font-weight: bold;color:#26536A;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #808080; font-style: italic;">/* End hide from IE5-mac */</span> </div></li></ol></div>
</div></div><br />

<p>Como ven, eliminé el star-html hack, mantuve el hack para IE5-Mac (que no tiene problemas de validación) y agregué un height: auto !important. ¿Cómo funciona? Bueno, como saben, las hojas de estilo en cascada, como su nombre lo indica, leen la información en cascada. Esto quiere decir que si ponemos dos atributos iguales para el mismo elemento, el segundo tomará el lugar del primero. Un ejemplo:</p>

<div class="igBar"><span id="lcss-32"><a href="#" onclick="javascript:showPlainTxt('css-32'); return false;">TEXTO PLANO</a></span></div><div class="syntax_hilite"><span class="langName">CSS:</span><br /><div id="css-32">
<div class="css"><ol><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #6666ff;">.prueba </span><span style="color: #66cc66;">&#123;</span></div></li>
<li style="font-weight: bold;color:#26536A;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">background-color</span>: <span style="color: #993333;">red</span> !important;</div></li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">background-color</span>: <span style="color: #993333;">green</span>;</div></li>
<li style="font-weight: bold;color:#26536A;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #66cc66;">&#125;</span> </div></li></ol></div>
</div></div><br />

<p>Sin el <strong>!important</strong>, todos los navegadores mostrarían el color verde en lugar del rojo, simplemente porque así está el orden. Los navegadores modernos (Firefox, Opera, etc.), al leer el !important le dan más importancia a este elemento, sin importar su posición en la hoja de estilos (claro está, si tienes varios !important a saber qué pasa). Internet Explorer 6 y menores ignoran completamente el !important, por lo que el color verde toma el lugar del rojo. Esta es la forma de eliminar el 80% de nuestros hacks en nuestras hojas de estilos.</p>

<p>Otra forma de aplicar estilo a IE6 o menor es el uso de combinadores. Al que me refiero especificamente es a <strong>&gt;</strong>. Un ejemplo:</p>

<div class="igBar"><span id="lcss-33"><a href="#" onclick="javascript:showPlainTxt('css-33'); return false;">TEXTO PLANO</a></span></div><div class="syntax_hilite"><span class="langName">CSS:</span><br /><div id="css-33">
<div class="css"><ol><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">html&gt;body <span style="color: #6666ff;">.elemento </span><span style="color: #66cc66;">&#123;</span></div></li>
<li style="font-weight: bold;color:#26536A;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; clases que IE6 o menor ignorará...</div></li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #66cc66;">&#125;</span> </div></li></ol></div>
</div></div><br />

<p>Todo lo que esté dentro de ese código será ignorado por IE6 o menor. Llega a ser bastante útil. <img src='http://metalize.liveonstyle.com/wp-includes/images/smilies/icon_wink.gif' alt=';)' class='wp-smiley' />  Ahora bien, qué tal que necesitas esconder la información de IE5, pero IE6 debe verla (raro, pero si me ha llegado a pasar). Bueno, par eso tenemos la hermosa línea diagonal invertida:</p>

<div class="igBar"><span id="lcss-34"><a href="#" onclick="javascript:showPlainTxt('css-34'); return false;">TEXTO PLANO</a></span></div><div class="syntax_hilite"><span class="langName">CSS:</span><br /><div id="css-34">
<div class="css"><ol><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #6666ff;">.elemento </span><span style="color: #66cc66;">&#123;</span></div></li>
<li style="font-weight: bold;color:#26536A;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">width</span>: 700px;</div></li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; wid\th: 710px</div></li>
<li style="font-weight: bold;color:#26536A;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #66cc66;">&#125;</span> </div></li></ol></div>
</div></div><br />

<p>De nuevo, usamos la propiedad de las hojas de estilo en cascada. Todos los navegadores (incluido IE6) usaran el valor de 710px para el ancho; pero IE5 y el IE5.5 lo ignorarán completamente. La diagonal invertida hace que estos dos navegadores "borren" la t que está despues de ella y por lo tanto, tienen un atributo <strong>widh</strong> que no existe y, por lo tanto, ignoran. Este hack también valida. <img src='http://metalize.liveonstyle.com/wp-includes/images/smilies/icon_wink.gif' alt=';)' class='wp-smiley' /> </p>

<p>¿Y si necesitas aplicar CSS sólo a IE-Mac? Bueno, para eso tenemos un juego de comentarios en CSS:</p>

<div class="igBar"><span id="lcss-35"><a href="#" onclick="javascript:showPlainTxt('css-35'); return false;">TEXTO PLANO</a></span></div><div class="syntax_hilite"><span class="langName">CSS:</span><br /><div id="css-35">
<div class="css"><ol><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #808080; font-style: italic;">/*\*/</span><span style="color: #808080; font-style: italic;">/*/</span></div></li>
<li style="font-weight: bold;color:#26536A;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #808080; font-style: italic;">.elemento { {width: 700px;}</span></div></li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #808080; font-style: italic;">/* */</span> </div></li></ol></div>
</div></div><br />

<p>Esta regla será aplicada solamente para IE-mac.</p>

<h3 class="titulo">La última solución:</h3>

<p>Y bueno, siempre habrá veces en que estas alternativas no sean suficientes (aunque con los hacks arriba mencionados la gran mayoría de las veces debería irles bien). Para esos casos, tenemos los hermosos comentarios condicionales. Aunque la información y los comentarios de estos son bastos en la web, veo que aún son muy poco usados, y no le veo razón. Es genial contar con ellos. Su estructura es un comentario de HTML vil y simple que todos los navegadores ignoran... menos IE. IE leera todo lo que esté dentro de estos comentarios, y eso significa que podemos crear un archivo css separado para IE solamente. ¡Genial! Les pongo un ejemplo. Supongamos que tenemos esto en nuestro css global:</p>

<div class="igBar"><span id="lcss-36"><a href="#" onclick="javascript:showPlainTxt('css-36'); return false;">TEXTO PLANO</a></span></div><div class="syntax_hilite"><span class="langName">CSS:</span><br /><div id="css-36">
<div class="css"><ol><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">body <span style="color: #66cc66;">&#123;</span><span style="color: #000000; font-weight: bold;">background-color</span>: <span style="color: #993333;">red</span><span style="color: #66cc66;">&#125;</span> </div></li></ol></div>
</div></div><br />

<p>¿Pero qué tal que queremos que sea verde en IE? Creamos un archivo llamado <strong>ie.css</strong> y lo agregamos a nuestro header de nuestro archivo .html de la siguiente manera:</p>

<div class="igBar"><span id="lhtml-37"><a href="#" onclick="javascript:showPlainTxt('html-37'); return false;">TEXTO PLANO</a></span></div><div class="syntax_hilite"><span class="langName">HTML:</span><br /><div id="html-37">
<div class="html"><ol><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><a href="http://december.com/html/4/element/link.html"><span style="color: #000000; font-weight: bold;">&lt;link</span></a> <span style="color: #000066;">rel</span>=<span style="color: #ff0000;">"stylesheet"</span> <span style="color: #000066;">href</span>=<span style="color: #ff0000;">"style.css"</span> <span style="color: #000066;">type</span>=<span style="color: #ff0000;">"text/css"</span> <span style="color: #000066;">title</span>=<span style="color: #ff0000;">"Estilo global"</span> /<span style="color: #000000; font-weight: bold;">&gt;</span></span></div></li>
<li style="font-weight: bold;color:#26536A;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><span style="color: #808080; font-style: italic;">&lt;!--[if IE]&gt;</span></span></div></li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><a href="http://december.com/html/4/element/link.html"><span style="color: #000000; font-weight: bold;">&lt;link</span></a> <span style="color: #000066;">href</span>=<span style="color: #ff0000;">"css/ie.css"</span> <span style="color: #000066;">rel</span>=<span style="color: #ff0000;">"stylesheet"</span> <span style="color: #000066;">type</span>=<span style="color: #ff0000;">"text/css"</span> <span style="color: #000066;">media</span>=<span style="color: #ff0000;">"screen"</span><span style="color: #000000; font-weight: bold;">&gt;</span></span></div></li>
<li style="font-weight: bold;color:#26536A;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;</span></a>!<span style="color: #66cc66;">&#91;</span>endif<span style="color: #66cc66;">&#93;</span>--<span style="color: #000000; font-weight: bold;">&gt;</span></span> </div></li></ol></div>
</div></div><br />

<p>Y cuando veamos la web en IE, veremos cómo el fondo de nuestra web es verde. Ojo, que el comentario condicional con la nueva hoja de estilos para IE está DESPUÉS de la principal. Esto es importante para que funcione (de nuevo, se leen en cascada). Pero esto no es todo lo que  los comentarios condicionales nos ofrecen. También podemos elegir una versión de IE solamente:</p>

<div class="igBar"><span id="lhtml-38"><a href="#" onclick="javascript:showPlainTxt('html-38'); return false;">TEXTO PLANO</a></span></div><div class="syntax_hilite"><span class="langName">HTML:</span><br /><div id="html-38">
<div class="html"><ol><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><span style="color: #808080; font-style: italic;">&lt;!--[if lte IE 6]&gt;</span></span></div></li>
<li style="font-weight: bold;color:#26536A;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><a href="http://december.com/html/4/element/link.html"><span style="color: #000000; font-weight: bold;">&lt;link</span></a> <span style="color: #000066;">href</span>=<span style="color: #ff0000;">"css/ie6.css"</span> <span style="color: #000066;">rel</span>=<span style="color: #ff0000;">"stylesheet"</span> <span style="color: #000066;">type</span>=<span style="color: #ff0000;">"text/css"</span> <span style="color: #000066;">media</span>=<span style="color: #ff0000;">"screen"</span><span style="color: #000000; font-weight: bold;">&gt;</span></span></div></li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;</span></a>!<span style="color: #66cc66;">&#91;</span>endif<span style="color: #66cc66;">&#93;</span>--<span style="color: #000000; font-weight: bold;">&gt;</span></span></div></li>
<li style="font-weight: bold;color:#26536A;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><span style="color: #808080; font-style: italic;">&lt;!--[if lte IE 5]&gt;</span></span></div></li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><a href="http://december.com/html/4/element/link.html"><span style="color: #000000; font-weight: bold;">&lt;link</span></a> <span style="color: #000066;">href</span>=<span style="color: #ff0000;">"css/ie5.css"</span> <span style="color: #000066;">rel</span>=<span style="color: #ff0000;">"stylesheet"</span> <span style="color: #000066;">type</span>=<span style="color: #ff0000;">"text/css"</span> <span style="color: #000066;">media</span>=<span style="color: #ff0000;">"screen"</span><span style="color: #000000; font-weight: bold;">&gt;</span></span></div></li>
<li style="font-weight: bold;color:#26536A;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;</span></a>!<span style="color: #66cc66;">&#91;</span>endif<span style="color: #66cc66;">&#93;</span>--<span style="color: #000000; font-weight: bold;">&gt;</span></span> </div></li></ol></div>
</div></div><br />

<p>Si miran el código fuente de metal.ize, verán el código de arriba en mi head. Dentro de estos archivos css puedo meter las reglas que quiera aplicar sin necesidad de usar hacks y se aplicaran a las versiones menores a IE6 (para hacks generales, mas que nada bugs que IE tiene) y para verisones menores a IE5 (para arreglar el horrible modelo de caja de IE5...). Esta es la forma más limpia y ordenada de manejar las diferencias entre navegadores, y en verdad que se me hace muy importante que sea más utilizada, ya que con la entrada del IE7, muchos de los hacks que usabamos han quedado inutilizados, pero IE7 se sigue comportando como IE6.</p>

<p>Si bien, quieren crear un estilo que sea visto por todos los navegadores menos Internet Explorer, puedes usar el siguiente código:</p>

<div class="igBar"><span id="lcss-39"><a href="#" onclick="javascript:showPlainTxt('css-39'); return false;">TEXTO PLANO</a></span></div><div class="syntax_hilite"><span class="langName">CSS:</span><br /><div id="css-39">
<div class="css"><ol><li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;"><div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #a1a100;">@import &quot;estilos.css&quot; all; </span></div></li></ol></div>
</div></div><br />

<p>La cosa está en que IE no soporta las reglas del @import, por lo que ignorará esta inclusión, mientras que los navegadores modernos la incluirán sin problemas.</p>

<p>Claro está que estos métodos no son la panacea universal y seguro que en algún momento deberán usar por fuerza algún hack, sea para IE o para cualquier otro navegador; pero definitivamente si siguen estos consejos podrán conseguir hojas de estilos válidas y funcionales en el 99% de los casos.</p><p class="akst_link"><a href="http://metalize.liveonstyle.com/?p=218&amp;akst_action=share-this" title="E-mail this, post to del.icio.us, etc." id="akst_link_218" class="akst_share_link" rel="nofollow">Compártelo</a>
</p>]]></content:encoded>
			<wfw:commentRss>http://metalize.liveonstyle.com/2007/07/08/evita-los-hacks-en-tu-css/feed/</wfw:commentRss>
		</item>
	</channel>
</rss>
