Cerrar
a

22 Aplicaciones y plugins útiles en el diseño y desarrollo web

Todos tenemos nuestra lista de programas, aplicaciones o plugins que usamos mientras diseñamos o desarrollamos páginas web. Las usamos de manera continuada convirtiéndose en imprescindibles. Os voy a dar una lista con las que suelo usar yo. Os invito a que pongáis también la vuestra y así podamos descubrir todos aplicaciones que no conocíamos. No voy a hablar aquí de IDEs, ni de Photoshop ni similares, sino de pequeños programillas que nos hacen la vida mucho más facil. No están puestos en ningún orden concreto:

Browserstack

Browserstack

Una de las últimas incorporaciones a mi lista. Al ser usuario de Mac necesito comprobar la compatibilidad de mis desarrollos con las distintas versiones Internet Explorer. Normalmente utilizo VMWare Fusion y MAMP, pero desde que llegó Browserstack no paro de utilizarlo. Permite también comprobar webs que tengas sólo en local y soporta gran cantidad de navegadores diferentes, todos con herramientas tipo Firebug, IE Developer tools, Firebug lite o Web Developer.

Ultimate CSS Gradient Generator

CSS Gradient Editor

Este editor de Colorzilla es muy útil para crear gradientes con CSS3 ya que te permite crearlos como si de Photoshop o Fireworks se tratara, pero además te crea las instrucciones de CSS correspondientes que sólo tendrás que copiar y pegar en tu hoja de estilos.

My Lovely Charts

My Lovely Charts

Normalmente, y sobre todo si nuestro proyecto tiene complejidad, necesitamos organizar nuestras ideas (y muchas veces las del cliente), tener clara la estructura de nuestra web. Tanto esta aplicación como la que viene a continuación (MindNode Pro) nos ayudan en este fin. Llama la atención la gran cantidad de tipos diferentes de diagramas que ponemos hacer con My Lovely Charts.

MindNode Pro

MindNode Pro

Esta es mi herramienta favorita para crear diagramas rápidos de la estructura de una web, por ejemplo. Mientras analizo con un cliente cómo va a ser su web siempre suelo estar usando este programa que ayuda a visualizar y a organizar mejor lo que se va a hacer. Tiene una gran facilidad de uso. Ojo, es de pago y sólo para Mac, aunque tiene una versión limitada de prueba. Es barata y desde mi punto de vista merece realmente la pena.

Smush It

Smush It

Es importante que las imágenes que subamos a nuestra web estén lo más optimizadas posibles, no digamos ya si estamos sirviendo imágenes para móvil. Smush It, de Yahoo, permite reducir el peso de nuestras imágenes sin pérdida de calidad.

PageSpeed de Google

Page Speed Online

El tiempo de carga de nuestra web es muy importante para dar un buen servicio a nuestros usuarios. Si queremos tener una web centrada en el usuario tenemos que optimizar los tiempos de carga. Es por ello por lo que buscadores como Google pueden penalizar tu sitio si el tiempo de carga es muy lento. Esta herramienta analiza tu web y te ofrece consejos para mejorar la velocidad de carga.

YSlow

YSlow

La alternativa a PageSpeed ofrecida por Yahoo! es YSlow. Está bien utilizar los dos para comparar. YSlow lo puedes instalar en tu navegador.

Otra buena aplicación online para detectar problemas en la carga de tu página web es WebPagetest.

HTML Validator para Firefox

HTML Validator para Firefox

Lo bueno de este validador de HTML es que funciona desde el propio navegador, en tiempo real y en local, por lo que no necesitas conectarte a ninguna web externa o tener tu web online para poderla validar. El desarrollador está tardando en tener una versión actualizada para Mac y Firefox 6 aunque ya tiene una compilada que funciona bien.

HTML5 Validator

Estaba acostumbrado al HTML Validator y necesitaba algo igual pero para HTML5 y el desarrollador Roger Johansson lo ha conseguido. Funciona también como extensión de Firefox y en local. Sólo tiene que configurar si para validar lo hace conectándose online o no, dependiendo de si instalas en tu ordenador validator.nu

Firebug

Firebug

Qué decir de Firebug que no sepáis ya. Aunque cada vez uso más Chrome y su Inspector sigo pensando que Firebug es superior. Es una pena que su versión de Chrome sea mucho menos potente que la versión de Firefox. Imprescindible.

Web Developer

Web Developer

Otro clásico es Web Developer,de la que seguro no hace falta que os hable. Lo podéis tener instalado tanto en Firefox como en Chrome.

Skitch

Skitch
Skitch es gratuita y la utilizo constantemente. Me permite capturar trozos de la pantalla y exportarlos a Photoshop o Fireworks sólo arrastrando la pestaña de la imagen. También te permite escribir o pintar sobre la imagen o sacar fotos usando la cámara del ordenador. La ha adquirido recientemente la gente de Evernote.

Snippely

Snippely

El IDE que uso normalmente es Neatbeans. El sistema que tiene para grabar trozos de código útiles que nos puedan servir para otros proyectos no me gusta nada. Ya podía ser como el de Coda, por ejemplo!
Es por eso por lo que uso este pequeño programa gratuito para almacenar códigos útiles (aunque muchas veces he de reconocer que se me olvidan los trozos de código que guardo y muchas veces he rehecho cosas que ya tenía almacenados en Snippely….)

Emulador iOS y Emulador Android

iPhone Emulator

Últimamente estoy haciendo frontends para móvil con HTML5 y jQuery Mobile, por lo que estoy continuamente pegado a ambos emuladores. De todas formas siempre viene bien tenerlos a mano para comprobar cómo se ve nuestra web en un móvil, especialmente si hacemos diseños ajustables al ancho de pantalla.

FoxGuide

FoxGuide

Esta extensión de Firefox te permite crear una regla y crear guías en el navegador tal y como lo harías en Photoshop o Fireworks. Muy útil para saber si tienes elementos alineados.

MeasureIt

Measure It

Extensión para Firefox, Chrome o Safari que te permite medir áreas en la pantalla del navegador. ¿Quieres saber cuánto mide en pixels un rectángulo de una web? Activas MeasureIt y lo mides.

SEOmoz toolbar

SEOmoz toolbar

Como diseñador y desarrollador de webs creo fundamental saber tanto de SEO como te sea posible, tanto desde el punto de vista de la arquitectura óptima de la web que estás creando como de la estrategia de contenidos de la misma. Es por ello por lo que utilizo varias herramientas de SEO. En el navegador tengo varias instaladas (SEOmoz toolbar, Rank Checker, SEO4Firefox, Seoquake).
Al estar suscrito a SEOmoz Pro utilizo mucho la barra de esta empresa tanto en Firefox como en Chrome. En su versión gratuita tiene varias opciones interesantes. Os podría dar una lista larga de utilidades, pero por ejemplo, una herramienta de pago muy buena para seguir los rankings en buscadores es Advanced Web Ranking.

Dropbox

Dropbox

No entiendo cómo lo hacía antes de conocer Dropbox. Como uso varios ordenadores Dropbox me permite tener sincronizados todos mis archivos de tal manera que si edito un archivo de una web, por ejemplo, tengo esa versión editada en todos los demás. Me sirve también como copia de seguridad externa, así como elemento de comunicación con mis clientes, ya que puedo compatir carpetas con ellos donde me guardan textos, imágenes, etc..

El único problema es que no encripta los archivos antes de enviarlos a sus servidores, por lo que para ficheros con información sensible utilizo Wuala.

Font Squirrel

Si quieres usar nuevas fuentes en tus páginas web utilizando @font-face Font Squirrel es tu sitio. No sólo tienes una gran cantidad de fuentes disponibles, sino que además te crea el código que tienes que pegar en tu hoja de estilos.

Sprite Me

Spriteme
Este es una utilidad muy interesante ya que combina todas las imágenes que uses de fondo y te crea un CSS Sprite e incluso te da el código CSS para acceder a cada uno.

CSS-Tricks Button Maker

CSS3 button maker

Os permite crear botones utilizando gradientes CSS3 con gran facilidad, ya que os crea igualmente el código CSS.

Color Scheme Designer

Color Scheme Designer

Te crea un esquema de colores a partir de un color de partida, muy útil para encontrar colores que estén relacionados con uno que vayas a utilizar.

Comentarios

  • Excelente articulo, ya conocía la mayoría de herramientas.
    Concretamente la herramienta de yahoo Smush It no sabia de su existencia,

    26 septiembre, 2011
    contestar
  • Muy buen articulo me ha ayudado con una herramienta que no conocia y que me ha gustado mucho, quiza una herramienta que yo ocupo no se si la conocen pero queiro compartirla para portar es la que da adobe para los colores, es en linea y me ha sacado de apuros en algun momento que tengo bloqueo artistico, muy parecida a la ultima que aportas la mia es kuler.adobe.com te permite ver diferentes paletas de colores y personalizarlas igual

    5 junio, 2012
    contestar
  • Una lista de recursos increíbles! Teniendo ya algo más de experiencia en programación, estoy justo en búsqueda de estos recursos que me pueden hacer mejorar y pulir aún más mis trabajos! Gracias!

    31 julio, 2012
    contestar
  • muy bien. gracias por esta valiosa informacion. podeis probar tambien el http://www.diagram.ly/ para un montón de diagramas y el http://www.bubbl.us para brainstormings y mapas mentales. saludos.

    27 agosto, 2012
    contestar
  • Salu2
    Muchas gracias por haberte tomado el tiempo en recopilar toda la información.
    Algunas herramientas las voy a revisar, otras ya las conocía:
    En especial Color Scheme Designer
    Salu2

    16 octubre, 2014
    contestar
  • Muy bueno el artículo, muchas de estas aplicaciones no las conocía pero las voy a empezar a usar de inmediato, sobretodo las que hacen referencia al tiempo de carga de la web, la gente se centra mucho en la apariencia pero si una web tarda mucho en cargarse puede perder un montón de visitas.

    30 marzo, 2015
    contestar
  • Excelente justamente lo que estaba buscando. Gracias 🙂

    30 diciembre, 2015
    contestar
  • oyeme!!! tremendo artículo, me va ayudar mucho… DTBM

    12 septiembre, 2017
    contestar

Escribe un comentario