elWebmaster.com

Dentro de lo que es la Web 2.0 existe un efecto muy usado: reflejar imágenes de forma tal que el reflejo se difumine poco a poco.
Para lograr esto es muy común utilizar herramientas como Photoshop o FireWorks, pero usar estas aplicaciones requiere un conocimiento avanzado de estos programas.

Para esto les traigo una solución que realmente me asombró por su simpleza, Reflection.js un script de Javascript que es verdaderamente ventajoso en estos casos. Seguir leyendo

Más allá de las funciones que uno generalmente usa en las hojas de estilo CSS (como los selectores) existen reglas menos comunes, como las “reglas @” (at-rules, en inglés). Este tipo de reglas tienen usos muy diversos y algunas son específicas de ciertos navegadores.

Las reglas @ comienzan siempre con el símbolo de la arroba y luego su nombre clave. Dependiendo de cual se trate podrá necesitar un único argumento (la regla “import“ por ejemplo) o un bloque de código (la regla “media“). Veamos bien cuáles son. Seguir leyendo

Si eres webmaster de un sitio internacional o  que simplemente está disponible en varios idiomas, puedes hacer como la mayoría: poner un enlace a las páginas en inglés, español, etc, por ejemplo, para que el usuario haga clic (si se da cuenta) y pueda acceder a la información del sitio en su idioma.

Pero sabemos que en términos de usabilidad esto no es lo óptimo, por eso nos viene de película este script de PHP para cambiar automáticamente las páginas de nuestro sitio al idioma del usuario. ¡Ni siquiera necesitas poner un enlace de idioma! Seguir leyendo

Librerías Javascript como MooTools pueden ahorrarnos un montón de tiempo al desarrollar un sitio web. Combinada con un correcto HTML y CSS podemos lograr los efectos más profesionales y diversos, están en cada uno de nosotros las ganas de explorar su potencial.

En NETTUTS nos enseñan cómo lograr una galería de imágenes o portfolio de gran calidad (clic aquí para ver la demo), ideal para incluir en el footer de tu sitio o blog, o en una sección determinada, claro. Sólo tienes que descargar los archivos, reemplazar las imágenes por las tuyas y subirlo a tu sitio web.

Si eres fanático de la reducción de peso en los archivos de tu página web, seguramente tratarás de ofuscar el código de tus archivos lo más posible, no dejando espacios, tabulaciones ni saltos de línea. Pero el problema viene a la hora de trabajar con los archivos que comprimiste. Si bien siempre puedes guardar una copia del código indentado, hay una forma mucho más práctica de comprimir tu código.

Tomemos por ejemplo tu hoja de estilos CSS. Mucho más práctico sería que el código estuviera prolijamente indentado y por medio de PHP podríamos comprimirlo dinámicamente antes de que se cargue en el servidor. ¡Lograr esto es muy sencillo! Sólo tienes que seguir estos pasos. Seguir leyendo

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