Saltar al contenido
Internautas21

Algunas herramientas de diseño web recomendadas

2014-07-16

Estaba conversando con algunos amigos que son desarrolladores y diseñadores web; cuando de pronto les pregunté por algunas herramientas y recursos útiles que me puedan recomendar para publicarlas aquí en el blog.   


Comenzaron a decirme todas como si fuese una lluvia de ideas, saqué mi cuaderno y apunte cada una de esas tools que me iban compartiendo (tuve un momento de nostalgia porque hacía mucho tiempo que no escribía a mano). Cabe mencionar que algunas de esas herramientas las conocieron en este blog.

Llegando a mi casa probé cada una de esas herramientas y ciertamente son muy interesantes y considero que les sería de mucha utilidad en especial a aquellos profesionales que se dedican a ofrecer servicios de diseño web.

A continuación les voy a listar todos estos recursos gratuitos que seguramente le sacarán  buen provecho:

CSS VOCABULARY

Tienes algunas dudas con las reglas CSS o no sabes para qué funciona un Class Selector o un Class Property? Todos estos términos especializados de CSS pueden ser confusos al principio. Algunas personas los usan indistintamente, aunque son cosas completamente diferentes. Este Vocabulario CSS te ayudará a entender mejor los términos utilizados en CSS describiéndolos de manera interactiva.

css vocabulary

GRADIENTS

Seas diseñador gráfico o te dediques al diseño web imagino que Photoshop está en tu lista de herramientas y programas indispensables. Seguramente estás familiarizado con el Modo Blending que permite mezclar dos capas, pues bien este modo de fusión ha llegado ahora en CSS3. Y este recurso nos brinda una colección con gran variedad de gradientes CSS3 que puedes utilizar cuando implementas este modo.

gradients

 

CHOOSE A LICENSE

Estás confundido acerca de cuál licencia usar para tus proyectos? El problema con una licencia es que se suele escribir en una frase muy larga que causa dolor de cabeza instantáneo de sólo mirarla. Con ChooseaLicense puedes elegir una licencia, como su nombre lo indica, nos da un  resumen de licencias populares: MIT, Apache y GPL;  de una manera más comprensible, lo que le permite decidir rápidamente qué tipo de licencia es el más adecuado para sus códigos.

choosealicense

OCTICONS

Seguramente has escuchado de Github (sería un pecado para un programador no haberlo hecho), pues resulta que finalmente han lanzado Octicons, un repositorio de íconos que utilizan sus páginas web. Ahora puedes insertarlo en tus sitios web y aplicaciones mediante el CSS3 Font Face. En el momento de la redacción de este artículo hay 178 iconos añadidos en Octicons. Y ya que el proyecto está abierto para contribución, el número de iconos muy probablemente seguirá aumentando en el futuro.

octicons

SHAREDROP

Es una aplicación web gratuita que te permite compartir archivos directamente entre diferentes dispositivos. ShareDrop es impulsado por WebRTC, un proyecto Open Source que permite a los navegadores de Internet comunicarse entre sí. Funciona (y se ve), similar al Mac AirDrop. Puedes compartir archivos al arrastrar y soltar, funciona a través de múltiples desktop y dispositivos móviles dentro de la misma red. 

En la foto debajo abrí ShareDrop en 3 ventanas por eso ven que el radar  detecta 3 usuarios, hice una prueba y efectivamente se puede enviar y recibir archivos de manera muy práctica.

sharedrop

PESTICIDE

Seamos realistas, la depuración en el diseño de una página web puede ser realmente frustrante no importando que tan bueno seas con el CSS. Esta es la herramienta que podría reducir esta frustración para los desarrolladores web. Pesticide dibujará líneas en todos los elementos de la web para que puedas averiguar qué elementos están mal y necesitan corrección.

pesticide

SLICK

Slick es un fantástico y simple plugin jQuery slider que abarca todo lo que necesitas para mostrar tu contenido en un slider. Totalmente responsive, deslizable, puedes arrastrar con el mouse, tiene animaciones CSS3 y JavaScript Fallback; qué más necesitamos? Todo está ahí.

slick

CODERWALL

CoderWall es como una red social para programadores y desarrolladores, puedes compartir consejos, tutoriales y aprender de las experiencias de otros desarrolladores. Siendo parte de esta comunidad aprenderás de manera más rápida que hacerlo por tu propia cuenta.

coderwall

LOADING

Ya te cansaste de usar la misma animación GIF para mostrar la barra de progreso mientras carga una página? Bueno, puedes utilizar esta colección de barras de progreso hechos con SVG. Loading funciona nítido y claro en cualquier resolución de pantalla. En el momento de escribir este artículo veo que hay 8 estilos de barra de carga.

loading

MAPSTYLR

Mapstylr es aplicación web gratuita muy cool que te permite personalizar Google Maps. Puedes crear tus propios estilos de mapas fácilmente con una muy buena interfaz de usuario. Si te registras puedes guardar tus mapas personalizados como una colección privada o una pública.

mapstylr

Sin duda hay muchas más herramientas de diseño web y recursos útiles pero creo que un artículo no sería suficiente para listarlos todos. Eres desarrollador o diseñador web? Qué te parecen estas herramientas? Déjanos tus comentarios.

Algunas herramientas de diseño web recomendadas
Califica este artículo 😉