4/25/2008

¿Cómo hacer gradientes o rotar una página con CSS?

Algunos se preguntan cómo hacer el gradiente de un sitio web (el degradado o transición de un color a otro) sin necesidad de utilizar una imagen, sino sólamente utilizando atributos CSS. Otra pregunta que es común encontrar es cómo rotar o inclinar un texto utilizando sólamente CSS.

Actualmente estas características CSS no están totalmente implementadas, sin embargo, existen iniciativas interesantes que nos dejan ver que estas características podrían ser parte de Internet dentro de un tiempo.

WebKit:

Todos los navegadores tienen un sistema para interpretar el código HTML y CSS para así mostrar una página web dada, WebKit es este sistema para el navegador Safari, y ya se empieza a utilizar en otros dispositivos como algunos teléfonos celulares Nokia. Puede descargar la versión más reciente de WebKit

Con Webkit, ya es posible implementar algunas de estas características, por ejemplo, para utilizar gradientes podríamos utilizar el siguiente código:

background: -webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff), color-stop(0.5, #fff), color-stop(0.5, #66cc00));

Para rotar una página podríamos utilizar lo siguiente:

body {
-webkit-transform: rotate(-2deg);
}

En general, podríamos decir que estas características aún no deberían ser utilizadas en cualquier sitio web, debido a que la mayoría de los navegadores no tienen instalado WebKit, sin embargo, es una iniciativa interesante que parece indicar que, si en el futuro todos los navegadores empiezan a incorporar la facilidad para interpretar estos atributos CSS, pronto podemos empezar a utilizarlos. Por ahora, a los diseñadores web se les recomienda descargar WebKit para ir probando algunas de estas funciones y prepararse para el futuro cercano de CSS.

Etiquetas: , , , , ,

4/04/2008

Extensiones de Firefox recomendadas para diseño web

Queremos aprovechar este espacio para incluir algunas de nuestras recomendaciones sobre aquellas extensiones de Firefox que más nos ayudan en las tareas de diseño web.

Web Developer

En especial queremos hacer énfasis en "Web Developer" desde la cual es posible habilitar/dehabilitar varias características de la navegación como javascript, la visualización de css, las imágenes, etc; brinda información adicional sobre los sitios web consultados, cuenta con interesantes herramientas de validación y visualización de sitios web, etc.

Conocer más sobre "Web Developer": https://addons.mozilla.org/es-ES/firefox/addon/60

Firebug

Es una excelente herramienta que permite entre otras cosas visualizar el código html de un sitio web de una forma sumamente ordenada y ágil, haciendo referencia a la estructura del código y a los estilos utilizados en cada parte del html que se está examinando.

Conocer más sobre "Firebug": https://addons.mozilla.org/es-ES/firefox/addon/1843

Esperamos que las extensiones les sean de mucho provecho.

Etiquetas: , , , , , ,

4/03/2008

¿Qué es el sIFR?

Una pregunta que muchos diseñadores web llegan a hacerse es cómo utilizar cualquier texto con cualquier fuente (tipo de letra) sin necesidad de tener que editar una imagen, y haciendo que este texto sea reconocido por los buscadores más populares. Esto era imposible hasta hace unos años, y es un tema solucionado gracias al sIFR, una técnica publicada gracias al trabajo de Mike Davidson y Mark Wubben.

El sIFR (Scalable Inman Flash Replacement) es una técnica que mezcla Flash y funciones de Javascript para lograr este objetivo. Puede ver ejemplos de esta técnica aplicada en cualquiera de las páginas internas del sitio web de InterGraphicDESIGNS (Ver un ejemplo aquí).

Para poner a funcionar sIFR en su sitio web puede descargar la última versión del producto en alguno de los sitios web de sus creadores, donde se indican en detalle todas las instrucciones necesarias.

Conocer más detalles del funcionamiento del sIFR (Inglés)

Descargar el sIFR (Versión 2.0.2)

Ver la página oficial de ejemplo

Documentación oficial

Etiquetas: , , , , , ,

4/01/2008

Tutoriales para aprender HTML

Algunos de nuestros clientes o contactos, nos han hecho llegar su inquietud sobre algún enlace que puedan tomar como referencia para iniciar su aprendizaje en HTML. Encontramos una buena serie de tutoriales en SitePoint.com que sin duda son una excelente forma de iniciar.

El primer nivel del tutorial se encuentra en la siguiente dirección: http://www.sitepoint.com/article/beginners-html-1

Etiquetas: , , , ,