Webmaster Libre » Herramientas Online

CSS 3, please! Un generador de propiedades CSS3 crossbrowser

Alma Fernández — Wed, 10 Mar 2010 08:20:25 +0000

A pesar que todavía está muy verde la especificación de CSS3, ya podemos usar algunas reglas como, transform, box-shadow o border-radius. Eso si, dándole a cada navegador que lo soporte sus propias reglas. A través de Web Resources Depot conozco CSS3, Please!

CSS3, please! es un generador de propiedades CSS3 para todos los navegadores. Al entrar se nos presenta una hoja de estilo que podremos editar para adaptar a nuestras necesidades y ver los cambios aplicados a un cuadrado resaltado. Incluso incluye propiedades para Internet Explorer en los casos que la transformación esté soportada mediante filtros.

No deja de ser un asco tener que duplicar o triplicar una regla de estilo para que funcione en casi todos los navegadores pero, por lo menos, ahora es más rápido.

Entradas relacionadas

¿Quieres hasta 6 meses de hosting gratis? Utiliza el cupón RCwebmasterlibre al contratar cualquier plan con RedCoruna - más información

CSS 3, please! Un generador de propiedades CSS3 crossbrowser was first posted on marzo 10, 2010 at 9:20 am.

myFontBook, gestor de tipografías online

Alma Fernández — Tue, 25 Aug 2009 20:55:47 +0000

Una de las características comunes a casi todos los que realizan labores de diseño es haber juntado una enorme colección de tipografías instaladas en el sistema.

Para muchos, las herramientas que nos proveen los sistemas operativos se quedan cortas y muchas veces es complicado gestionar correctamente todas las fuentes.

myFontBook es un gestor gratuito de tipografías que podrás utilizar desde cualquier sistema operativo gracias a que se trata de una aplicación web.

Con myFontBook podrás visualizar todas tus tipografías, agregarles etiquetas para encontrarlas más cómodamente, marcar favoritas y visualizar datos importantes (kerning, baseline…).

myFontBook es gratuito pero aún así podrás probar la aplicación sin necesidad de registrarte, eso si, para guardar tus etiquetas, valoraciones y catálogo tendrás que crearte una cuenta.

myFontBook: http://www.myfontbook.com

Vía Smashing App

Otras entradas que pueden interesarte:

¿Quieres hasta 6 meses de hosting gratis? Utiliza el cupón RCwebmasterlibre al contratar cualquier plan con RedCoruna - más información

myFontBook, gestor de tipografías online was first posted on agosto 25, 2009 at 10:55 pm.

Compare Google te permite comparar los resultados de Google con el nuevo Caffeine

Alma Fernández — Mon, 17 Aug 2009 20:40:04 +0000

Sin duda, cada vez que Google lanza algo se arma un gran revuelo. Es natural que, cuando lo que va a lanzar es un cambio teóricamente tan profundo como el del algoritmo de su buscador, las espectativas se disparen.

Si quieres probar cómodamente como son los nuevos resultados que ofrecerá Google con Caffeine y compararlos sin mayores complicaciones con los actuales prueba Compare Google.

Compare Google es una sencilla página que, con un diseño bastante agradable, nos permitirá comparar los resultados de la version descafeinada y la nueva con cafeina.

Compare Google: http://comparegoogle.com/

Vía Wwwhat’s new?

Otras entradas que pueden interesarte:

¿Quieres hasta 6 meses de hosting gratis? Utiliza el cupón RCwebmasterlibre al contratar cualquier plan con RedCoruna - más información

Compare Google te permite comparar los resultados de Google con el nuevo Caffeine was first posted on agosto 17, 2009 at 10:40 pm.

Haz y edita tus capturas de pantalla en el navegador con Falcon y Talon

Alma Fernández — Fri, 14 Aug 2009 16:57:01 +0000

Si todavía no conoces Aviary te estás perdiendo una interesantísima suite de aplicaciones web que te permitirán realizar retoques, agregar efectos o crear gráficos vectoriales desde tu navegador, sin necesidad de instalar ningún software adicional y con dos opciones: gratis y de pago a un precio mucho más accesible que el de la mayoría de software de este tipo.

Falcon es una de las herramientas disponibles, que nos permite editar nuestras capturas de pantalla para redimensionarlas, cortarlas, agregarles texto, símbolos, líneas, flechas… Lo típico para explicar, por ejemplo, las partes de un interfaz.

El proceso es muy cómodo, ya que ni siquiera tienes que registrarte para empezar a trabajar con tus capturas de pantalla pero si además usas Firefox, con Talon, la nueva extensión para firefox es aún más sencillo y conveniente.

Instala Talon, dirígete al sitio web que quieras capturar y pulsa el botón o usa la opción que te aparecerá en el menú contextual (podrás capturar la parte visible, una región o la página completa). Se te ofrecerán 3 opciones: copiar, editar con Falcon o descargar a tu disco duro.

El editor de Falcon es muy sencillo de utilizar, simple pero con todas las funcionalidades que esperas de algo así (muy similar a Skitch, una aplicación gratuita para Mac)

Una vez estés contento con el resultado podrás salvar la imagen directamente a tu ordenador o crearte una cuenta en Aviary y subirla a sus servidores. Esta última opción te facilitará códigos para compartir tu imagen en Twitter, WordPress o foros que utilicen BBCode. Eso si, recuerda que en las cuentas gratuitas todas las imágenes son públicas antes de almacenar en sus servidores alguna captura que no debas.

Personalmente me parece una opción muy cómoda, rápida y sencilla, mucho mejor que hacer la captura de pantalla con extensiones como ScreenGrab y luego tener que abrir un programa de edición sólo para recortarla un poco o agregarle algo de texto.

Aviary Falcon: http://aviary.com/tools/falcon

Vía Sitepoint

Otras entradas que pueden interesarte:

¿Quieres hasta 6 meses de hosting gratis? Utiliza el cupón RCwebmasterlibre al contratar cualquier plan con RedCoruna - más información

Haz y edita tus capturas de pantalla en el navegador con Falcon y Talon was first posted on agosto 14, 2009 at 6:57 pm.

Puny PNG, reduce el peso de tus imágenes al momento

Alma Fernández — Wed, 12 Aug 2009 15:14:21 +0000

Vas a escribir un post, ya lo tienes todo listo e incluso has encontrado la imagen perfecta. Pero pesa una barbaridad y sabes que será un engorro esperar a que termine de cargar así que tienes dos opciones: abrir tu editor de imágenes favorito y comprimirla o irte a buscar otra ¿no?

Puny PNG te da una tercera opción, subes tu imagen (JPG, PNG o GIF) y esperas unos segundos para obtener tu imagen comprimida y sin perder calidad. No tienes nada que configurar y, por si te preocupa la privacidad de tus imágenes, estas se borrarán pasados 15 minutos.

Rápido y cómodo, ¿no crees?

Puny PNG: http://www.gracepointafterfive.com/punypng

Vía Maestro Alberto

Otras entradas que pueden interesarte:

¿Quieres hasta 6 meses de hosting gratis? Utiliza el cupón RCwebmasterlibre al contratar cualquier plan con RedCoruna - más información

Puny PNG, reduce el peso de tus imágenes al momento was first posted on agosto 12, 2009 at 5:14 pm.

MeeCSS, envía tu sitio a más de 100 galerías CSS cómodamente

Alma Fernández — Mon, 27 Jul 2009 18:23:31 +0000

Cuando creamos un sitio, echamos horas diseñándolo y trabajando en su código para que todo se vea divinamente nos encanta enseñarlo ¿no?

Las galerías de diseños CSS son un buen sitio donde lucir nuestra obra maestra y, de paso, recibir algo de feedback y algunas visitas.

MeeCSS es una sencilla herramienta web con la que podrás enviar tu sitio web a más de 100 galerías de este estilo, que no se si serán todas las disponibles pero igualmente son una buena cantidad.

El sistema no es automatizado, ya que seguramente la mayoría de estas galerías no tardarían demasiado en darse cuenta del asunto y bloquearían la aplicación. En lugar de esto, lo que hacemos es seleccionar las galerías a las que queremos hacer el envío, introducir los datos y darle a enviar. De esta manera se irán abriendo progresivamente los formularios de envío y tendremos a mano los datos que introdujimos en la aplicación para poder hacerlo todo a base de copiar y pegar.

Como me explico bastante mal ultimamente, mejor te dejo el video para que veas como va el proceso.

Untitled from MeeNews on Vimeo.

Seguiremos teniendo que ponerle un poco de tiempo al tema de los envíos pero, sin duda, mucho menos que yendo manualmente de un sitio a otro.

MeeCSS: http://www.meecss.com/

Vía Criterion

Otras entradas que pueden interesarte:

¿Quieres hasta 6 meses de hosting gratis? Utiliza el cupón RCwebmasterlibre al contratar cualquier plan con RedCoruna - más información

MeeCSS, envía tu sitio a más de 100 galerías CSS cómodamente was first posted on julio 27, 2009 at 8:23 pm.

The 1Kb CSS Grid, la forma más ligera de crear un diseño en retícula

Alma Fernández — Tue, 23 Jun 2009 12:25:56 +0000

A pesar de su innegable utilidad para cosas tan pesadas como maquetar un diseño basado en una retícula (grid based en inglés) siempre me ha parecido que usar frameworks CSS era matar moscas a cañonazos.

La mayoría nos proponen usar una hoja de estilo adicional, llena de cosas que podemos usar o no y, francamente, me da angustia.

The 1Kb CSS Grid es la solución a mis problemas con los frameworks, me permitirá arrancar un diseño en retícula de forma mucho más rápida y controlada pero sin sobrecargar mis páginas con cosas inútiles.

Selecciona el número de columnas que quieres emplear, su tamaño y el tamaño de los márgenes entre ellas y listo, es tan sencilla que incluso es cuestión de segundos modificar los nombres de las clases para usar unos con algo más de sentido.

The 1Kb CSS Grid: http://www.1kbgrid.com/

Otras entradas que pueden interesarte:

¿Quieres hasta 6 meses de hosting gratis? Utiliza el cupón RCwebmasterlibre al contratar cualquier plan con RedCoruna - más información

The 1Kb CSS Grid, la forma más ligera de crear un diseño en retícula was first posted on junio 23, 2009 at 2:25 pm.

CSS Redundancy Checker te ayuda a limpiar tus hojas de estilo de selectores inútiles

Alma Fernández — Mon, 15 Jun 2009 18:17:29 +0000

Sobre todo cuando trabajamos con hojas de estilo grandes podemos dejarnos atrás elementos que ya no se utilizan y que, a pesar de no servir para nada, suman al peso final de nuestra CSS.

CSS Redundancy Checker es una sencilla utilidad online con la que podremos encontrar todos esos selectores a los que ya no se hace referencia desde ninguna de nuestras páginas. Para ello simplemente tendremos que introducir la dirección de nuestra hoja de estilo y las URL de todas las páginas que la utilizan (o una muestra significativa de ellas para sitios basados en plantillas, por ejemplo).

La utilidad se encargará de comprobar los selectores que se emplean en las páginas y nos devolverá una lista de aquellos que nos sobran por no ser utilizados en ninguna de esas páginas.

CSS Redundancy Checker: http://services.immike.net/css-checker/

Vía No Sólo Código

Otras entradas que pueden interesarte:

¿Quieres hasta 6 meses de hosting gratis? Utiliza el cupón RCwebmasterlibre al contratar cualquier plan con RedCoruna - más información

CSS Redundancy Checker te ayuda a limpiar tus hojas de estilo de selectores inútiles was first posted on junio 15, 2009 at 8:17 pm.

Crea un badge para promover tu cuenta de Twitter

Alma Fernández — Mon, 15 Jun 2009 18:09:52 +0000

Ahora que todo hijo de vecino y su web tienen cuenta de Twitter nos vemos constantemente en la “necesidad” de promocionarla para conseguir mas seguidores.

La gente de Go2Web20, más conocidos por su directorio de aplicaciones web, han lanzado una pequeña utilidad con la que podrás crear un badge que resultará bastante llamativo al estar fijo en un costado de tu web.

Introduce tu cuenta de usuario, selecciona el texto del botón de entre las opciones disponibles, personaliza el color de tu badge y pega el código resultante justo antes del final del body () de tu página web.

Twitter “Follow” Badge: http://www.go2web20.net/twitterFollowBadge/

Vía Maestro Alberto

Otras entradas que pueden interesarte:

¿Quieres hasta 6 meses de hosting gratis? Utiliza el cupón RCwebmasterlibre al contratar cualquier plan con RedCoruna - más información

Crea un badge para promover tu cuenta de Twitter was first posted on junio 15, 2009 at 8:09 pm.

Checkmycolours comprueba los colores de tu web

Alma Fernández — Fri, 12 Jun 2009 13:47:06 +0000

Creo que a estas alturas todos estamos al tanto de que hay mucha gente que tiene problemas para distinguir colores o, sin ir más lejos, que no tiene tan buena vista como un adolescente ¿verdad?

Checkmycolours es una cómoda herramienta online que nos permitirá verificar que existe el suficiente contraste entre nuestros colores de fondo y los colores del texto.

Para ello sólo tendrás que introducir una dirección URL en su casillero y la aplicación se encargará de hacer la verificación basándose en el algoritmo propuesto por el W3C

Checkmycolours: http://www.checkmycolours.com/

Vía Download Squad

Otras entradas que pueden interesarte:

¿Quieres hasta 6 meses de hosting gratis? Utiliza el cupón RCwebmasterlibre al contratar cualquier plan con RedCoruna - más información

Checkmycolours comprueba los colores de tu web was first posted on junio 12, 2009 at 3:47 pm.