Posted: Febrero 2nd, 2010 | Author: Michael | Filed under: Front-End, Internet | Tags: ie6 | No Comments »
Me encantan estos titulares. Ya hemos observado cómo en los últimos meses grandes portales web han empezado a mostrar mensajes “aconsejando” que se actualicen el navegador a otro más moderno y seguro.
Goolge vuelve a dar un paso más contra este navegador mega obsoleto llamado Internet Explorer 6 amenazando adivirtiendo que a partir del 1 de marzo sus aplicaciones online como el google docs o google sites ya no podrán usarse desde IE6. Así lo ha anunciado el Encargado de Producto de Google Apps, Rajen Sheth, en el blog oficial de Google Docs, donde afirma que la compañía retirará el soporte para el navegador a partir de esa fecha.
Otra gran noticia pues para los desarrolladores Front-End. El fin de los días de Internet Explorer 6 se ve cada vez más cerca.
Fuente: cadenaser.com
Posted: Enero 2nd, 2010 | Author: Michael | Filed under: Front-End, Internet | Tags: estadísticas, firefox, ie, ie6, navegadores | No Comments »
Encontré la mejor forma de estrenar nuevo año en el blog, y es publicando la siguiente noticia: ¡Firefox ya es el navegador más usado del mundo! Superando así al duro-de-pelar Internet Explorer. Para un profesional del sector como yo, es una tremenda noticia, porque muchos (por no decir todos) especializados en el desarrollo Front-End esperábamos con ansias una noticia así. Los motivos sobran, además que yo personalmente uso Firefox para trabajar (con el componente firebug para facilitar el desarrollo) Por fin el futuro parece tener luz y aquellos argumentos de:
Tienes que validar la web para Internet Explorer 6, 7 y 8… porque la mayoría de gente usa Explorer // porque el cliente lo ve en ese navegador // porque me gusta tocarte los cojones…
Van a pasar a formar parte de una pesadilla que tuvimos en el pasado. Y es que no uno se cansa de repetir tantas veces que
Según unas estadísticas obtenidas de StatCounter (un servicio gratuito de estadística web, tipo google analytics), el navegador Firefox 3.5 supera por primera vez a Internet Explorer 7, coronándose como el navegador más usado.
Read the rest of this entry »
Posted: Mayo 26th, 2009 | Author: Michael | Filed under: Front-End | Tags: hack, ie6, javascript | No Comments »
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. Por suerte, en la actualidad existen distintas librerías que solucionan esta incompatibilidad y nos hacen la vida un poco más fáciles.
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:
PNG fix
Correcto script que habilita las transparencias de PNG en IE6.
http://homepage.ntlworld.com/bobosola/
Unit PNG fix
Otro script que soluciona el problema, esta vez todo en menos de 1kb!
http://labs.unitinteractive.com/unitpngfix.php
SuperSleight
Esta vez un script salido de uno de los sitios web de referencia para todo Front-End o diseñador web.
http://24ways.org/2007/supersleight-transparent-png-in-ie6
IE7-js
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.
http://code.google.com/p/ie7-js/
He probado todas estas librerías y todos hacen más o menos lo mismo:
Le aplica un “filter” a la imagen (progid:DXImageTransform.Microsoft.AlphaImageLoader(...)). Es un filtro que solo admite IE6 y lo que hace es habilitar las transparencias de la propia imagen.
Cada librería lo aplica a su manera, y su aplicación también varía ligeramente. En mi trabajo actual empecé usando Unit PNG fix pero he acabado usando IE7-js ya que me interesaba el resto del paquete.
Posted: Abril 15th, 2009 | Author: Michael | Filed under: Front-End | Tags: css, html, ie6, nivel-medio, oop-css | 1 Comment »
Nivel: medio
Para la creación de botones en un proyecto web, lo normal es recomendar la creación de botones con texto generado (mejor mantenimiento, mejor SEO) y que sean flexibles (mejor mantenimiento, accesible). Pero cada proyecto es un mundo y puede ser que en alguno nos veamos forzados a optar por la utilización de imágenes como botones.
Evidentemente, como en casi todo, existen diferentes soluciones a esto. Yo voy a exponer una solución que he aplicado en persona.
Breve intro a la etiqueta HTML: button
Una etiqueta HTML que me gusta mucho es el <button>. Es una etiqueta que lleva mucho tiempo entre nosotros (desde HTML 4.01) pero que hasta hace relativamente poco no lo he empezado a usar en serio en mis proyectos. Antes lo que siempre usaba para los botones de formularios era el típico input:
// antigua forma: input tradicional
<input type="button" value="Enviar" />
// nueva forma: button
<button type="button">Enviar</button>
Ambas formas son equivalentes y correctas, pero la ventaja del button es que es más manejable mediante CSS y permite jugar más con ella. La desventaja que tiene es que no es 100% compatible ya que solo está disponible a partir de HTML 4.01. De todas formas, hoy en día más del 95% de usuarios utiliza navegadores que soportar HTML 4.01 o superior por lo que recomiendo el uso de esta etiqueta.
La imagen y el botón
Lo primero que se me ocurriría hacer es:
<input src="RUTA_IMG" type="image" />
// o con button, que me gusta mas 
<button><img src="RUTA_IMG" alt="" /></button>
Pero como tenemos que aplicar un efecto rollover en el botón, el método más optimizado es usando el CSS y tratar la imagen como imagen de fondo en el botón. Haciendo esto no necesitaremos tirar de javascript, solo necesitaremos el CSS. Por lo tanto prepararemos algo parecido a esto:
Read the rest of this entry »
