El ojo crítico

Blog de fotografía personal

10 herramientas online imprescindibles para diseño y desarrollo web

No queremos atribuirnos la autoría de este artículo, puesto que es de Miguel Morera, miembro de la Asociación de Webmasters de Estapa (ADWE), pero por su interés los transcribimos aquí. Solamente este texto en cursiva es nuestro.

Al igual que en la mayoría de trabajos, hay ciertas tareas rutinarias que, debido a que requieren una cierta meticulosidad para ser desarrolladas, consumen gran parte de nuestro tiempo, quitándonos la oportunidad de dedicarlo a temas más importantes. Para agilizar estas tareas hay una serie de herramientas online disponibles para todos nosotros, y creedme cuando os digo que valen mucho la pena. Ahí van.

Dynamic Drive- FavIcon Generator

¿Cómo generar el favicon de tu sitio web en pocos segundos y sin tener que instalar ninguna extensión en tu editor de imágenes preferido? Este generador automático es de lo más útil para esta tarea.

dynamicdrivefavicon-genSin duda hay sitios más bonitos pero este es el que primero aparece en Google y el que mejor funciona diría yo. http://tools.dynamicdrive.com/favicon/

Colour Lovers

¿Buscando una paleta de colores para tu proyecto? Sin duda este es uno de los mejores sitios donde acudir.

colourlovershttp://www.colourlovers.com/

También está genial Adobe Kuler, pero esta gente no necesita publicidad ¿verdad?.

WhatTheFont!

Esta herramienta de MyFonts.com viene de perlas para cuando necesitas identificar una fuente a partir de una imagen. Sí, sirve para ese JPG que te han enviado con el diseño de la web o ese PNG contorneado y sin documentar, cómo no. No siempre funciona ya que depende de lo limpia que consigas la imagen de la tipografía, pero muchas otras veces te saca de un apuro. Aparte de poder subir una imagen para que realice la detección también tenemos la posibilidad de introducir una URL de imagen.

what-the-font

CSS Sprites Generator

Con este script le ahorraremos bastantes peticiones al servidor (no a mí, sino al servidor web) ya que nos servirá para generar esos sprites de 2 o 3 estados. Te genera la imagen y el código para que esta tediosa tarea se resuelva en un suspiro.

css-sprites-generatorhttp://csssprites.com/

CSS Sprite Generator by Project Fondue

Este otro script aunque viene a servir para lo mismo que el anterior, tiene una diferencia bastante significativa: te permite crear sprites de gran tamaño para todas las imágenes de tu proyecto. De este modo se reducen todavía más las peticiones al servidor al realizar solamente la carga de una imagen.

css-sprite-fonduehttp://es.spritegen.website-performance.org/

The Responsinator

Uno de los dolores de cabeza que en estos últimos tiempos muchos tenemos, es hacer que nuestro proyecto se vea bien en todos los dispositivos posibles. La mejor manera de probar esto sería disponer de un montón de smartphones, tablets y dispositivos móviles varios. Como en la mayoría de los casos no es posible, esta herramienta puede sernos de gran utilidad. No es 100% exacta pero puede servirnos, al fin y al cabo el objetivo es que se vea bien en todas las resoluciones.

responsinatorTambién he utilizado muchas veces esta otra de Matt Kersley, que permite descargarla y testearla en tu propio sitio.

Ultimate CSS3 Gradients Generator

Amantes de los degradados, podéis dejar de utilizar imágenes para esta tarea porque con esta herramienta obtenemos el código necesario para realizar todo tipo de variaciones de color. ¡Y además a prueba de balas, porque funciona en Internet Explorer!

css3-gradients-generatorEsta herramienta está patrocinada por Johnny Ive.

RGBa CSS Generator for Internet Explorer

Otra para nuestro gran amigo Internet Explorer. Esa genial propiedad para dar transparencia que tan de moda está en estos días puede ser utilizada con el navegador de Microsoft gracias a este generador. Todo un hallazgo.

rgba-css-generator-iehttp://kimili.com/journal/rgba-hsla-css-generator-for-internet-explorer/

 

CSSPrefixer

Otra tarea que resulta bastante molesta por aquello de los estándares que cada navegador respeta a su manera, es la de aplicar los prefijos propietarios de cada uno de los motores de navegador existentes. Para no tener que escribir uno a uno todos estos prefijos, esta herramienta lo hace por tí.

cssprefixerhttp://cssprefixer.appspot.com/

Otra opción a barajar es este script de Lea Verou llamado -prefix-free, que te permite utilizar las propiedades CSS sin prefijos ya que los genera automáticamente mediante Javascript. De este modo, cuando llegue el día en el que todos los navegadores acepten estas propiedades sin prefijos CSS (no lo verán vuestros ojos) solamente tendremos que retirar este script de nuestra web, evitándonos la laboriosa tarea de eliminar todos esos prefijos de nuestra hoja de estilo.

Samuel L. Ipsum

Esto hará las delicias de los más nerds del lugar. Por último, os traigo el generador de Lorem Ipsum definitivo. ¿Cansado de ese texto ficticio en latín que siempre utilizas en tus diseños? ¡Pues dale un poco de vidilla con alguna de los diálogos interpretativos de Samuel L. Jackson!

slipsumSin duda, esta es una de las herramientas más útiles y más utilizadas porque además es molona. Tened cuidado dónde utilizáis estos textos ya que están plagados de palabrotas. Siempre podéis utilizar la versión Lite, o la clásica, también disponible en el mismo sitio. http://slipsum.com/

Quiero más herramientas

Pues aquí entráis vosotros al trapo. ¿Qué herramientas utilizáis vosotros en vuestro día a día? ¿Creéis que hay otras mucho más útiles que las que aquí se han mencionado? Podéis dejar vuestra aportación en los comentarios.

Texto original http://www.adwe.es/diseno-web-2/10-herramientas-online-imprescindibles-para-diseno-y-desarrollo-web

Miguel Morera, miembro de la Asociación de Webmasters de Estapa (ADWE)

próximo puesto

Atrás puesto

© 2017 El ojo crítico

Tema de Anders Norén