Mostrando entradas con la etiqueta css. Mostrar todas las entradas
Mostrando entradas con la etiqueta css. Mostrar todas las entradas

sábado, 12 de noviembre de 2011

Closure Stylesheets - Presentado por Google para quien trabaja con CSS



En el blog de google  han presentado hoy una herramienta que ayudará a todos los que trabajan programando hojas de estilo.

Se trata de Closure Stylesheets, disponible en java, siendo una extensión a css que añade variables, funciones, condicionales y otras nuevas posibilidades al css tradicional.

De la misma forma que las actuales Closure Tools para JavaScript y HTML, Closure Stylesheets permite potenciar nuestra creatividad eliminando las barreras de las técnicas tradicionales, ofreciendo un código optimizado a los usuarios.

Puedes leer más sobre el tema en el blog Open Source at Google o haciendo clic aquí.

domingo, 30 de octubre de 2011

Foundation – Framework para crear sitios web flexibles



En la actualidad, a la hora de desarrollar sitios web, hay que tener en cuenta tanto los tamaños de pantallas como los dispositivos donde van a ser visualizados. Es por ello que Zurb ha lanzado la versión 2.0 de Foundation, un framework de desarrollo que permitirá a los desarrollares web la creación de sitios web preparados visualizarse en cualquier tamaño de pantalla de cualquier dispotivo.

Este framework de CSS y Javascript cuenta con cuadrículas en la que ajustar los diseños web, botones, formularios, plantillas, etc, para que puedan empezar con desarrollos compatibles con los tamaños de pantallas de cualquier dispositivo, utilizando las últimas tecnologías web existentes.

Para que se puedan hacer una idea, ZURB tiene puesto a Soapbox como demostración, donde se puede acceder y variar el tamaño del navegador, adaptándose la página a los nuevos tamaños.

miércoles, 26 de octubre de 2011

Hydra.js - Arquitectura modular para tus aplicaciones javascript


Cada vez nos enfrentamos a aplicaciones web que combinan html + css y js autónomo que se convierten en más inmanejables. La solución es aplicar una arquitectura modular en la que cada componente actúe de manera individual al resto del código. Una alternativa bastante interesante es Hydra.js, un gestor que nos permite definir un sistema modular para nuestras aplicaciones fácilmente escalable.

El autor de Hydra.js es Tomas Corral, también creador de Hermes.js un sistema extensible para manejar mensajes y errores desde javascript.

Las ventajas de Hydra.js son:

  • Ningún módulo conoce la existencia de otros módulos (si uno de ellos falla no implica el fallo del resto). Interesante en arquitecturas en constante evolución que necesitan un crecimiento rápido sin tener que prestar atención a lo existente.
  • Es posible notificar una acción al resto de módulos que estén escuchando.
  • Un módulo puede ser extendido sin perder su comportamiento original.
  • Ligero con tan sólo 1,5k de tamaño.
  • Los módulos pueden usarse en distintos hilos en un contexto ajax.
  • Se pueden testear los módulos usando Unit Testing Framework


Puedes consultar la documentación oficial y diversos ejemplos en su página de Github.

ie7.js - Evita preocuparte por Internet Explorer 6




Para todo programador o diseñador web uno de los mayores quebraderos de cabeza suele ser el conseguir que su página se vea igual independientemente del navegador usado, o en el peor de los casos, aceptablemente bien en todos los navegadores.

Pero, con Internet Explorer 6 siendo usado aún por un 9% de la población mundial y especialmente en ciertos ambientes empresariales donde se depende de herramientas antiguas, en muchas ocasiones no queda más remedio que realizar dos versiones de la página: la normal, orientada a navegadores modernos donde todo funciona y es bonito, y la versión light, totalmente rediseñada para que IE6 sepa interpretarla.

Precisamente para evitarnos ese doble trabajo se creó el proyecto ie7.js, una biblioteca JavaScript que haga comportarse a IE6 como si de Internet Explorer 7 se tratase, en la medida de lo posible. Entre las ventajas conseguidas con su uso se encuentran:

  • Poder usar position:fixed en el CSS
  • Reconocer los 256 grados de transparencia de las imágenes PNG
  • Poder hacer uso de las propiedades CSS max-height, min-height, max-width y min-width
  • Otros selectores CSS que no se encontraban presentes en IE6


Y su uso es tan sencillo como transparente para el resto de navegadores. No hay más que incluir el siguiente comentario HTML que sólo IE6 y versiones anteriores reconocerán:

<!—[if lt IE 7]><script src=“http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE7.js”></script><![endif]—>

Del mismo modo, sus proyectos hermanos ie8.js e ie9.js nos aportan ese plus de modernidad del que las versiones 7 y 8 del navegador de Microsoft seguían careciendo.