Definitivo: PNG’s transparentes en IE6
Finalmente dí con la solución final a mis problemas de soporte de transparencias de PNG para IE6. Este tema es otro en los que más usuarios entran a CSSLab buscando por soluciones reales. En mi [anterior artículo][1] sobre este mismo tema, la solución es real pero su implementación se torna complicada de adaptar en cualquier ámbito de sus proyectos.
Últimamente he logrado probar e implementar 2 soluciones diferentes para solucionar este drama que nos reúne. Ambas se implementan mediante Javascript y necesitan de leves retoques para funcionar (no se frustren si no se ve a la primera, basta con pensar denuevo cómo están las estructuras de tus archivos y colocar adecuadamente las rutas).
jQuery plugin: fontSizer
Un nuevo plugin para el grandioso jQuery ha nacido. Por un proyecto en el cual estoy involucrado, era necesario un método parametrizable para manejar aumento/disminución del tamaño de fuentes. Busqué mucho un plugin para esto, y me frustré bastante dado la carencia del ideal, así que gracias a la habilidad del web developer Rodrigo Augosto, surge este nuevo aporte a la accesibilidad web.
[Ver ejemplo][1]{.verejemplo}
Modo de Uso Adjuntar jquery.
Review 4: Las Leyes de la Simplicidad
Este es uno de esos libros que debes leer independiente del oficio que ejerces. El catedrático del MIT John Maeda se desliza en un breve pero preciso libro (creo que son los mejores libros: no más de 100 páginas pero con el contenido que no sobra) en todos los ámbitos donde la simplicidad puede hacer más bello al producto: sea éste un producto de innovación tecnológica como el iPod, una aplicación Web como el indexador de contenidos Google, una tarea, una nueva empresa, escribir un libro, salir a comer… enfin, cualquier cosa puede hacerse más simple y por ello más útil, bello y trascedental.
Desarrollos Web para iPhone
Desde hace unos meses CSSLab tiene un theme especial si entras a través de un iPhone. Y ante la inminente llegada de este codiciado aparato al resto del mundo, he entrado de lleno estudiando desarrollos para esta plataforma. Los aplicativos me la están ganando, ya que se hacen con Objective-C el que no es mi fuerte (me costó un montón un simple Hello World). Pero hoy he dedicado mis investigaciones para desarrollos web propios para iPhone, a través de aplicaciones ricas en cuanto a interacción (RIA).
Overflow en IE6
Ayayay cuántos dolores de cabeza he tenido a causa de Internet Explorer 6. Son bugs, fallas y mañas múltiples que se necesitan dotes de malabarista para conocerlos (ni siquiera trato de entenderlos; sólo sé que existen) y buscar una solución. He abarcado un montón de ellos aquí en CSSLab, y al parecer este es uno más de ellos ya que la lista parece ser interminable.
Desde que cambié el diseño de este sitio al actual donde la home tiene un scroll horizontal, no pude solucionarlo para IE6.
Podcast 02
Ya era hora, casi 2 años y les presento el segundo Podcast. ¿Porqué tanto tiempo pasó? se podrían preguntar… bueno, uno porque no le veía tanta utilidad un podcast en un sitio donde el código fuente es el protagonista. Pero este tema es de opinión, y espero sea mejor escucharlo que leerlo. En esta ocasión, el monólogo es:
Nueva Guerra de Browsers. Recomendaciones para un layout cross-browser. Nuevamente, espero sus comentarios, sugerencias y/u opiniones.
Tip Precoz 2: combinando @media
Los media type especifican el soporte al cual apunta la hoja de estilos definida: pantalla (screen), [papel (print)][1], [móviles (handheld)][2], etc. Algunas propiedades CSS están diseñadas para medios específicos (page-break-after y page-break-before se usan para media=“print” por ejemplo), y en otros casos propiedades son compartidos por diferentes medios, pero usan diferentes unidades (pixel para pantalla, centímetros para papel).
Usualmente se especifican los medios al cual apuntan las hojas de estilos como atributo de la etiqueta , de la siguiente forma:
Tip Precoz 1: atributos contextuales
Un tip precoz es un método tan corto y rápido, que casi que no es un artículo en sí. Los artículos son más bien extensos, donde explico paso-por-paso alguna técnica propuesta. En esta ocasión es casi como un twitter-artículo. La presente técnica la conozco pero no sé de dónde la saqué, ya que por más que busco en la web no encuentro documentación alguna al respecto. No sé ni cómo se llama, así que la incluí dentro de los selectores contextuales, ya que se comporta respetando los atributos adyacentes.
clearfix ultimate
Muchas han sido las veces que [he nombrado][1] y [recontra-aplicado][2] el método de .clearfix aquí en CSSLab. Lo suelo nombrar a menudo en clases, ya que es el método más fácil de entender y sobrellevar el colapso de cajas contenedoras de ventanas flotantes. Fácil porque basta con aplicar una class=“clearfix” y nuestra caja vuelve a comportarse como debería. Pero es código extra que quizás ensucie nuestra hoja de estilos, y andar agregando class‘es que no tienen sentido semántico puede que no agrade a los más puristas. Pero existe desde hace mucho tiempo otra solución al mismo problema.
Parallax en uso real
Luego del anterior artículo develando [cómo se realiza el efecto Parallax con CSS][1], surgieron dudas de su real aplicación en proyectos web. Así como se presentó no tiene mucho sentido, y como mencioné, es difícil verlo aplicado sin que se note el efecto que produce (ya que el usuario no suele modificar el tamaño de la ventana de su browser). Así que para paliar [esa frustración que surgió en los comentarios][2], me propuse inventar un método para verlo funcionando de acuerdo a la interacción del usuario con el sitio. Primero intenté con el movimiento del mouse sobre la superficie de la ventana (con lo que hice para el sitio de 2monos), pero no funcionó por problemas de posicionamiento relativo de los elementos. Luego, pensé en movimiento horizontal mediante anclas; algo que ya había utilizado en otras ocasiones anteriores. Felizmente logré integrarlo a través del grandioso Mootools.