Etiqueta: css

Live CSS Mod – Extensión de Chrome para ver el resultado de nuestra alteración de código en tiempo real

Publicado el

por Juan Diego Polo

Si estamos alterando el código html, css o js de una página web seguramente tendremos que ir pulsando f5 para ir cargando los cambios realizados. Con la extensión que nos presentan ahora no es necesario, ya que monitoriza constantemente las alteraciones en los archivos para mostrar el resultado en tiempo rea.

De esta forma podemos ir programando con nuestro editor de textos favorito y tener abierta la página web que, como si fuera una animación, irá cambiando respondiendo a los cambios que realicemos en los archivos.

En la página de la extensión comentan algunos puntos débiles, más relacionados con los lí­mites impuestos por Google a la hora de acceder a directorios de archivos, aunque seguramente funcionará bien en la mayorí­a de los casos en los que uséis un servidor web para pruebas.

Link: Live Css mod

Dabblet – espacio de pruebas para códigos HTML y CSS

Publicado el

por Fco. José Hidalgo


Dabblet es una herramienta que nos permitirá experimentar y realizar pruebas tanto con códigos HTML como con códigos CSS, incluidos los estilos más recientes de HTML5 y CSS3, de manera que iremos haciendo las oportunas modificaciones del código, viendo los resultados de inmediato, a través de nuestro navegador, y pudiendo guardar los resultados en nuestra cuenta de GitHub si nos identificamos con ella.

Permite el uso de la librerí­a -prefix-free, lo que nos evitará tener que ir añadiendo prefijos a lo largo de nuestro código CSS, y además tenemos hasta cuatro modos de visualización, usando aquella que nos sea más cómoda.

Para comenzar tan sólo tenemos que irnos a Dabblet y comenzar a jugar con los códigos, pudiendo ver el resultado de nuestros experimentos a pantalla completa si así­ lo queremos.

Enlace: Dabblet | Ví­a: TNW

HTML KickStart – Recursos para quien quiere programar en HTML5, CSS y jQuery

Publicado el

por Juan Diego Polo

Nos presentan ahora HTML KickStart, una colección de elementos diseñados para ahorrarnos tiempo en la creación de nuestro próximo sitio web.

Son menús, botones, etiquetas, tipografí­as, galerí­as, tablas… una colección bastante completa, con iconos incluidos, que puede ser bajada de forma gratuita para analizar el contenido y usarlo en nuestra página.

Bajado más de 20.000 veces, incluye archivos js y hojas de estilo (css) para facilitar el trabajo, con ejemplos funcionando en su página web para conocer las ventajas de su uso.

Link: 99lime.com

BearCSS – Genera un archivo CSS a partir de HTML

Publicado el

por Juan Diego Polo

BearCSS es una aplicación que permite generar una plantilla de un archivo CSS usando los elementos especificados en el archivo HTML que le indiquemos.

El archivo generado contendrá las clases, id y elementos del HTML, ayudando a realizar las tareas más monótonas del diseño de la hoja de estilo y permitiendo que dediquemos más tiempo a crear.

Se trata de un proyecto creado en HTML5/CSS, jQuery y PHP por Kyle Gawley y Jordan Henderson, quienes dejan sus datos de contacto disponibles en la página principal de BearCSS.

Link: BearCSS | Ví­a TNW

Nueva versión de SimpleLESS, para programar y optimizar hojas CSS

Publicado el

por Juan Diego Polo


Disponible para Windows, Mac y Linux, SimpleLess lanza una nueva versión que mejora la transformación de archivos .less a css, permitiendo crear hojas de estilo usando las técnicas de programación tradicionales, optimizando el resultado y obteniendo un perfecto equilibrio entre sofisticación y sencillez.
Podéis bajarlo de forma gratuita en wearekiss.com/simpless, donde comentan las novedades de esta versión, que permite, entre otras cosas, minimizar el tamaño del resultado aumentando la velocidad de carga de las webs que utilicen los archivos.

LESS, explicado en lesscss.org, es un lenguaje de hojas de estilo dinámico, que se ejecuta tanto a nivel del navegador como a nivel del servidor, mediante Node.js.

Google presenta Closure Stylesheets, para quien trabaja con CSS

Publicado el

por Juan Diego Polo


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.
Podéis leer más sobre el tema en el blog Open Source at Google, así­ como en code.google.com/p/closure-stylesheets/

GridLover – Diseña en pocos segundos la estructura de tu nueva web

Publicado el

por Juan Diego Polo


Si trabajáis con CSS seguramente os llamará la atención gridlover.net.
Se trata de una aplicación en la que podemos informar el tamaño de la letra, el espacio entre lineas y los margenes laterales de una página web, viendo los resultados en tiempo real, para obtener el código css responsable por el estilo creado.
Sin necesidad de registro, solo tenemos que actualizar el valor de los tres controles superiores, pudiendo esconder o mostrar las lineas de referencia y ver el código en cualquier momento para copiarlo y pegarlo en nuestro proyecto.
La idea es parecida a los ya comentados tinyfluidgrid o patternify, ofrecer un editor gráfico para poder ahorar tiempo en la creación de las hojas css.
Link: gridlover.net | Ví­a webresourcesdepot.com

SimpLESS – compilador de hojas de estilos LESS CSS

Publicado el

por Fco. José Hidalgo


¿Estás desarrollando un proyecto web? Pues atento a esta aplicación multiplataforma y de código abierto porque te puede interesar. Te presento a SimpLESS, una aplicación de escritorio en la cual tendrás que arrastrar el directorio de tu proyecto dentro de la misma aplicación para poder desarrollar tu código LESS, añadiendo las variables,
mixins, operaciones y reglas, para luego guardarlo, encargándose SimpLESS en compilarlo en hoja de estilo CSS.
Admito que es la primera vez que escucho hablar sobre LESS, pero si nos vamos a su web oficial, vemos que se trata de un lenguaje de hojas de estilo dinámico, que se ejecuta tanto a nivel del navegador como a nivel del servidor, mediante Node.js.
Ni que decir que tenemos compilaciones para Windows, Linux y Mac OS, además de poder descargarnos el código de dicha aplicación.

emailology – Guí­as para diseño de emails

Publicado el

por Juan Diego Polo


Ya que el email continúa siendo el medio de comunicación preferido por millones de personas en todo el mundo, es importante que sepamos diseñarlos correctamente.
Recibir un mensaje en HTML con un fondo adecuado, un texto en destaque y unas imágenes atractivas puede marcar la diferencia entre un cliente y un «enviar a spam«, motivo por el cual es importante conocer trucos y herramientas que ayuden a diseñar mensajes de correo electrónico de forma correcta.
Ese es el objetivo de emailology.org, con secciones dedicadas a la compatibilidad entre diferentes clientes de email, consejos para los que tienen a los smartphones como objetivo principal, guí­as básicas de css, códigos que hay que evitar, etc.
Incluyen también una sencilla herramienta para transformar caracteres especiales en código HTML, algo bastante sencillo y extremadamente importante de recordar.
Link: emailology.org | Ví­a webresourcesdepot.com

tinyfluidgrid – Una nueva forma de ahorrar trabajo en diseño CSS

Publicado el

por Juan Diego Polo


Basado en 1kbgrid.com, tinyfluidgrid.com nos permite informar el valor de algunas variables para construir plantillas basadas en columnas.
Podemos informar el número de las mismas, su ancho, el grosor de las lineas… todo con la posibilidad de visualizar el resultado antes de bajarlo.
Cuando hayamos construí­do el diseño que servirá de base en nuestro trabajo, podremos bajar el resultado en forma de html y css, listo para formar parte de nuestra nueva web.
Un constructor más que puede ahorrar bastante tiempo en las primeras fases de un proyecto.