Introducción
Hace mucho tiempo atrás, cuando las hojas de estilos (CSS) estaban en pañales y no se habían popularizado eran pocas formas de lograr efectos visuales interesantes en HTML. Había que ser un experto en JavaScript o utilizar algunos de los cientos de script que daban vueltas por algunos sitios y adaptarlos para uso propio.
Entre ellos, estaba un comportamiento que se popularizó a partir de Dreaweaver 4: lo que se dio en llamar imagen de sustitución o rollover image. Su lógica es muy sencilla: utilizar una imagen en un enlace y cuando el usuario coloca el mouse encima de ella cambiarla por otra, que generalmente es igual a la primera con algún efecto visual añadido como sombras, cambio de color de fondo, entre otras.
Esta solución práctica tiene dos problemas:
- Redundancia de la información. Por cada enlace hay dos imágenes que la mayoría de las veces son iguales con sólo un pequeño cambio añadiendo algún efecto visual.
- Actualización poco práctica. Si queremos actualizar un enlace o agregar uno nuevo hay que modificar dos imágenes. No es un gran problema pero imaginemos que en un menú con 7 opciones cambiar el color de la tipografía implica modificar ¡14 imágenes!
¿De qué modo resolver esto? A través de las hojas de estilo o CSS (Cascade Steel Sheet).
Para ello tenemos dos posibilidades: realizar un botón enteramente con CSS prescindiendo de las imágenes o emplear CSS para modificar algunos de sus atributos. Vamos a seguir esta segunda opción.
HTML y CSS
El efecto que haremos será modificar el color de fondo de la imagen y agregarle un borde de color para destacarla. La lógica a emplear es bastante sencilla: armar una imagen con fondo transparente y crear una clase CSS para que el fondo y el borde cambie cuando el usuario coloque el mouse encima del enlace.
Para ello tendremos dos archivos: uno llamado boton.html donde pondremos el código para mostrar el botón y otro efecto.css que contendrá los estilos para producir el efecto.
La implementacion de las hojas de estilo CSS en Internet Explorer (IE) difiere bastante de la del resto de los navegadores. No vamos a entrar en la polémica sobre cuál es mejor o cuál se adapta más a los estándares de la W3C. Simplemente intentaremos solucionar el problema del mejor modo: crear una serie de clases para IE y otra serie de para el resto de los navegadores. Veamos entonces…
Crear la imagen
Para el ejemplo emplearemos un clásico botón de inicio como este:
Como dijimos antes, la única condición es que tenga el fondo transparente. Podemos usar el formato GIF o el PNG. En mi caso voy a emplear el primero.
Un detalle a tener en cuenta es evitar el borde dentado de la imagen mediante la opción «mate» del editor gráfico que vayamos a usar, en la cual indicamos el color de fondo sobre el cual se colocará la imagen. Para este ejemplo el blanco será el color fondo original y el amarillo el fondo para cuando se «active» la imagen.
El HTML y la hoja de estilos
Vamos a crear un selector ID dentro del cual colocaremos todas las imágenes del menú. Lo haremos con la etiqueta DIV. El código del archivo HTML a ponder a continuación de la etiqueta BODY es muy sencillo:
En la hoja de estilos (efecto.css) definimos que todos los enlaces -es decir, todo lo que esté encerrado en la etiqueta A- tenga las siguientes propiedades:
El código CSS quedaria algo así:
#menu a {
border: 1px solid #f0f0f0;
background-color: #fff;
}
#menu a:hover {
border: 1px solid #fc0;
background-color: #ffc;
}
¡Y está! La imagen cambiará de color de fondo y su borde al pasar el mouse sobre ella.
Solamente hay que tener en cuenta que estas propiedades afectarán a todos los elementos que sean enlaces y estén dentro de la sección menu (la cual definimos con la etiqueta DIV). Por ello no hay que colocar aquí enlaces de hipertexto porque tendrán el mismo efecto que las imágenes.
Estilo para el resto de los navegadores
Aquí se nos plantea un problema: ¿Cómo escribir un código en CSS que no interprete el Internet Explorer? La solución está en emplear una serie de bugs que este navegador tiene a la hora de interpretar CSS. A esta técnica también se la conoce como hack y consiste en escribir un código que el IE no lo procese.
No vamos a entrar en detalles sobre esto sino simplemente aplicar esta técnica
Pero antes de esto debemos considerar una cuestión: todos los navegadores han interpretado el código anterior. Para evitar problemas en la visualización deberemos resetear o poner los valores anteriores en cero.
Lo hacemos del siguiente modo:
html>body>#menu a {
border: 0;
background-color: transparent;
}
html>body>#menu a:hover {
border: 0;
background-color: transparent;
}
Ahora sí el camino está despejado para que definir las clases:
html>body>#menu a .imgMenu {
border: 1px solid #f0f0f0;
background-color: #fff;
}
html>body>#menu a:hover .imgMenu {
border: 1px solid #fc0;
background-color: #ffc;
}
El toque final
Lo que resta hacer es insertar la imagen de ejemplo en la página HTML. Dentro de la etiqueta de IMG vamos a indicar que se usuará la clase imgMenu que definimos para todos los navegadores a excepción del IE. Para este último simplemente indicamos el cambio de colores para todo elemento de la etiqueta A
El código:
¡Listo! Ya tenemos nuestro botón con efectos añadidos mediante CSS. Ahora solamente hay que reemplazar el valor javascript del atributo HREF por la página a la cual enlazaremos y la imagen de ejemplo por la nuestra.
Ver el ejemplo en funcionamiento
Si alguien conoce alguna manera mejor de hacer esto o quiere compartir algún secreto adicional no tienen más que escribir un comentario.
¡Hasta la próxima!
IE Standalone Pack
El Internet Explorer Standalone Pack es una recopilación de diferentes versiones de Internet Explorer (IE) que pueden ejecutarse en una misma computadora. Por defecto Windows instala la nueva versión de IE sobreescribiendo la anterior, lo cual para los diseñadores web representa un problema: si tenemos instalado IE 6 no podemos testear un sitio con IE 5 (al menos en la misma PC).
Buscando en Internet si era posible que dos o más versiones de IE pudieran convivir en una misma PC me encontré con el sitio www.skyzyx.com donde se explicaba que efectivamente era posible, realizando algunos pasos que allí se detallan. El mismo sitio ofrece la posibilidad de descargar por separado cada una de las versiones«standalone» de IE.
Las probé y ¡funcionaron! Al fin pude probar mis páginas en diferentes versiones de IE (y vaya que hay cambios en el modo que se visualiza un sitio con Explorer 5, 5.5 o 6, sobre todo si se usa mucho CSS).
Después de venir usando estas versiones desde hace como un año me empezó resultar bastante tedioso tener que instalar cada una por separado, crear el acceso directo, etc. en cada computadora donde trabajo (y volver a hacer todo en caso de formatear el disco, por desgracia algo no muy extraño). Así que decidí ver si se podía crear un instalador que hiciera todo esto automáticamente.
Después de una breve búsqueda con Google me econtré con NSIS de Nullsoft… sí, la misma gente del Winamp. Crearon su propio instalador (Nullsoft Scriptable Install System) que es libre y funciona a partir de un lenguaje de script que no es demasiado complicado. El resultado es este pack que simplemente reúne las versiones 3, 4, 5.01 y 5.5 del Internet Explorer, las instala y crea los iconos de acceso directo en el menú de inicio.
¡Atención!: sólo funciona para Windows NT/2000/XP. Para Windows 95/98/ME hay otras versiones «standalone» de IE.
Este es el enlace para descargar IE Standalone Pack.
Algunas aclaraciones importantes:
- Hay que tener instalada una versión superior de IE a la última que se incluye en el pack, es decir, la 6.
- El IE Standalone Pack debe ser utilizado únicamente con el fin de testear
sitios, en lo posible de forma local. Todas las versiones de IE incluidas no son afectadas por las actualizaciones ni parches de seguridad de Microsoft, por lo cual navegar por la web usando estas versiones anteriores de IE puede ser bastante riesgoso
- Las versiones de IE no ha sido adulteradas, crackeadas ni nada similar (al menos esto dicen en el sitio). Simplemente son algunos archivos de las versiones originales de IE y se han creado otros con el fin de permitir su ejecución. Más información (en inglés) en www.skyzyx.com
- Como se acostumbra a decir en estos casos, el pack que recopila las versiones «standalone» de IE se ofrece tal como está sin ninguna garantía de ningún tipo, responsabilidad por daños, etc. Y también se supone que quien lo instala lo hace bajo su riesgo y asumiendo todas las consecuencias técnicas/legales del caso.
Bueno, espero haber cumplido con el propósito de publicar algo medianamente útil.
¿Qué debe tener la web de un diseñador web?
El sitio personal de un diseñador web es todo un tema. Al menos en mi caso. He acumulado decenas de sitios en el disco rígido sin que nunca se publicaran. Desde webs enteramente desarrolladas en Flash hasta páginas de un diseño tan minimalista que ya eran austeras, pasando por sitios estilo portal, páginas “artísticas” y otras ocurrencias del momento.
Pero la pregunta de fondo era siempre la misma: ¿qué poner en un sitio? Hacer una página web como si fuese una empresa nunca me convenció, aunque tal vez fuese la opción más acertada. Otra idea: poner noticias sobre diseño para la web, tecnología y otras cosas que me interesaban. Pero… ¿hasta cuándo me iba a durar el entusiasmo? Y finalmente otra posibilidad: hacer mi propio aporte al de ya por sí saturado mundillo (me encanta esta palabra que usan los españoles) de los web designers.
Hasta que finalmente tomé una opción: dejar de obsesionarme por hacer un sitio del tipo “miren todo lo que sé hacer” 😮 y realizar algo menos pretencioso. El resultado final es una mezcla de todo lo anterior: un blog donde también muestro algunos trabajos y coloco una sección específica para clientes.
Para esto hay dos caminos a seguir:
- Crear mi propio sistema de blogs. La primera opción que comencé, y que sedujo mucho a partir de un tutorial de Marius Zaharia sobre generación de blogs con Dreamweaver en el sitio de Macromedia.
- Utilizar algunos de los sistemas de blogs y gestión de contenidos ya existentes: Mambo, bBlog, Simple PHP Blog, Guppy (estos dos interesantes porque no usan base de datos sino archivos de texto) y WordPress. Este último fue mi opción.
Como todo tiene sus ventajas y desventajas. El principal punto a favor es que el sistema ya está hecho, solo es necesario personalizarlo un poco. Y después de haber comenzado varios sitios que murieron en mi disco rígido la rapidez no es un tema menor.
El inconveniente es el todo sistema pre-fabricando: varias veces parece que estamos encorsetados en él. Y para modificar algo es necesario leer un código que puede ser ilegible.
Afortunadamente WordPress tiene la ventaja (como otros) de incorporar un sistema de plantillas. Así que editando la plantilla que viene por defecto –Kubrick de Michael Heilemann, muy bonita por cierto- ya conseguí bastante personalización. De todos modos tuve que revisar algunas funciones extrañas que tiene el sistema para que el menú superior (si, esa barrita naranja insignificante) quedara tal como yo quería.
El resultado está a la vista. Ahora resta agregarle algo de contenido, para lo cual espero evitar tanto como pueda una tentación enorme: que esto se convierte en un compendio de mis opiniones personales sobre el resto del mundo y las cosas.
No me propongo evitarla por completo (después de todo es mi sitio 😉 ), pero al menos tener como objetivo el publicar alguna cosa que tenga una mediana utilidad.
Espero logarlo.
Acerca de este sitio web
Este sitio web es simplemente un espacio de comunicación personal. Básicamente es un blog con algunos agregados como mostrar algunos de mis trabajos y un acceso para clientes
Tampoco tengo tantos clientes como para hacer un sitio especialmente para ellos…
Ni me convence la idea de decir «somos una empresa especializada y bla bla» cuando en realidad la mayoría de las veces trabajo solo o en equipo con programadores y otros diseñadores, según la ocasión y el proyecto.
Este sitio está basado en WordPress 1.5, un sistema gratuito para publicar blogs y contenido en la web pero con algunas (pequeñas) modificaciones. La plantilla de base para mostrar la información es la conocida Kubrick de Michael Heilemann (bueno, conocida para quienes usan WordPress) aunque modificada.
El contenido puede reproducirse perfectamente por cualquier medio siguiendo dos prácticas de cortesía:
- Citar la fuente
- Conservar el contenido tal como está sin modificarlo, recortarlo o manipularlo.
Bueno, no creo que sea demasiado. Y por último, también agredecería que me avisaran de cualquier uso que se haga de la información que está aquí.
Para contactarme por favor utilizar el formulario que está en el sitio para tal fin (opción «Contacto» del menú superior) . Publicar mi dirección de mail aquí sería una invitación demasiado generosa al spam 😉