elWebmaster.com

Los links del tipo “ancla” <a> muestran por defecto una línea punteada cuando están activos o “en foco”. En Firefox 3 la línea toma el color del texto mientras que en otros navegadores o versiones directamente se muestra en color gris.

Esto no es una locura, por cuestiones de accesibilidad se muestra qué link está activo (piensa en personas que no puedan acceder a un sitio con una computadora con mouse. Presionando”tab” se desplazarán por los enlaces. Pero si te molesta ver esa línea en tu sitio por cuestión de estética o diseño, puedes seguir leyendo para enterarte cómo eliminarla. Seguir leyendo

Las viejas versiones de los navegadores no sólo son inseguras, sino que son un dolor de cabeza para diseñadores web, desarrolladores y programadores porque suelen ser las que menos respetan los estándares. Si quieres aportar tu granito de arena, puedes avisar a los visitantes de tu sitio que dispongan de una versión antigua que existen actualizaciones disponibles para su navegador.

Pushup.js es un script que te permite reconocer qué versión de Internet Explorer, Safari, Opera o Firefox tienen los visitantes de tu sitio, mostrando un pequeño recuadro que dice “Importante actualización del navegador disponible” (o lo que quieras decir) con un enlace a la página de descarga. Todo gracias a Javascript. Seguir leyendo

El tema del posicionamiento correcto de los elementos mediante estilos CSS es algo que puede resultar muchas veces confuso y difícil de dominar por completo. Pero en el blog de Kilian Valkhof un artículo llamado “Comprendiendo el posicionamiento en CSS” nos da unos cuantos ejemplos que son de mucha ayuda.

A continuación les dejo algunos conceptos que van a resultar bastante útiles a la hora de trabajar sobre todo con las propiedades display y position de CSS. Espero que ustedes también lo encuentren tan interesante como yo. Seguir leyendo

¿Por qué habrías de quedarte con el estilo que viene por defecto en tu blog, ya sea porque se trate de un tema para WordPress, Blogspot o uno creado por tí mismo? Gracias a CSS podrás lograr algunos estilos originales para aplicarle a las citas de tu blog.

<blockquote> </blockquote> son los tags que usamos para encerrar citas de texto, pero hay muchas opciones en cuanto al diseño, algunas más “conservadoras” otras más radicales, artísticas o incluso bizarras. Conoce cómo lograrlos cambiando el código de los estilos CSS. Seguir leyendo

Si no eres un experto en el manejo del código de WordPress, te resultará muy molesto que al final de la introducción de tus artículos el tag <!--more--> genere un texto por defecto según el theme (tema) que estés usando, muchas veces en inglés (los típicos “Read more>>”, etc).

Debes saber que es muy pero muy fácil personalizar el texto del tag more, tanto para WordPress.com como para WordPress.org. En WP.com sólo hay que agregar un texto que reemplazará al original justo luego de la palabra “more”, por ejemplo: <!--more ¡Sigue leyendo la nota!-->. En WP.org hay que tocar el código PHP, pero no hay que saber programación, sólo cambiar una línea de texto. ¡Entérate cómo conseguirlo! Seguir leyendo

A la hora de programar cualquier cosa, desde un sitio simple hasta un complejo sistema, una regla básica es mantener el código ordenado e indentado, o sea aplicar tabulaciones para que las distintas secciones queden bien separadas a simple vista.

En la realidad es bien sabido que cuanto más extenso es el código más difícil es que esto se respete, generando con el tiempo confusión y problemas. Para ayudarte con la tarea te traigo dos sitios que se encargarán de alinear y organizar tu código automáticamente.
Seguir leyendo

Rounded Cornr es una aplicación online que nos permite generar esquinas redondeadas para el contenido o botones de nuestro sitio web o blog. En pocos pasos obtendremos el código necesario para usar en nuestro HTML y en la hoja de estilos CSS.

Sólo hace falta definir ciertos parámetros como el color de fondo, el color de la caja, el tamaño del radio de la esquina, etc. y hacer clic en “Generate RoundedCornr”. Luego copiamos y pegamos el código ¡y listo! Seguir leyendo

Sin duda todo diseñador se encuentra en un inconveniente a la hora de realizar checkboxes y radio buttons ya que puede resultar bastante engorroso cambiar el diseño que viene por defecto, especialmente en los navegadores más antiguos, lo que le quita bastante estética al sitio.

FancyForm es un script realizado mediante CSS y Javascript, junto con distintas imágenes, que nos da la posibilidad de cambiar este tedioso formato que tienen los checkboxes por otros que poseen un diseño más interesante y bonito. Seguir leyendo

Lo natural en la web parece ser el flujo vertical de los elementos, cuanto más contenido hay en una página, más larga se vuelve la misma. Esto responde a criterios de usabilidad dado que estamos acostumbrados a leer líneas de texto cortas que, una debajo de otra, conforman los párrafos de un texto.

Pero ¿se pueden romper los estándares? La respuesta es: “depende de tu propósito”. Si lo que quieres es distinguirte, tu público tiene el ojo entrenado y el tipo de contenido de tu sitio amerita dinamismo ¡bienvenido sea el scroll horizontal! Entérate cómo conseguirlo y conoce los mejores ejemplos. Seguir leyendo

Muchos estaban preguntando cómo crear en un borde de su sitio web o blog una pestaña dinámica que al hacer clic en ella despliegue un panel con publicidad, un par de campos de login de usuario, enlaces, etc. Esto es muy sencillo de hacer si nos ayudamos con CSS y Javascript (via MooTools).

Y aquellos que se estén preguntando qué pasa si alguien desactiva Javascript en nuestro sitio pero no desactiva los estilos CSS, les cuento que también tenemos un truco para que no aparezca el panel en este caso. ¿Qué esperan para comenzar? Seguir leyendo