Utilizamos cookies propias y de terceros para mejorar nuestros servicios y mostrarle publicidad relacionada con sus preferencias. Si continúa navegando, consideramos que acepta su uso. Más información

Algunas herramientas en línea impresionantes para el diseño y desarrollo web

Hace unos meses, los de Echoenduring,  publicaron el articulado titulado 10 Of My Favorite Online Tools for Design and Development, en el que esbozó algunas de las herramientas en línea que utiliza su autor con mayor frecuencia en su trabajo.

 

Después de sólo unos pocos meses, de vuelta comenta otro artículo en el mismo sentido. En las semanas y los meses transcurridos desde que el post anterior, su autor ha encontrado un montón de herramientas en línea más impresionante que puede hacer la vida de un diseñador es mucho más fácil y por eso lo comparte con nosotros.

 

En este artículo es  10 More Awesome Online Tools for Design and Development, comparten con todos más de 10 impresionantes recursos en línea que podemos utilizar para hacer nuestro trabajo como diseñador y desarrollador más rápido y fácil. Estos van desde generadores CSS, a herramientas tipográficas, validadores de código, etc. Todas ellas son útiles a su manera, así que asegúrete de comprobarlas a cabo.

 

En esta lista dejo las herramientas en línea de ambos artículos:

 

Rejillas:

 

Grid System Generator. Es un generador de cuadrícula, que también puede generar diferentes, lo que lo convierte en una herramienta realmente flexible con un atractivo y la aplicación práctica de una amplia gama de diseñadores y desarrolladores.

 

Tiny Fluid Grid. Esta aplicación web, es un generador de rejilla que te permite seleccionar el número de columnas, el porcentaje de ancho de la cuneta, así como mínimo y el máximo ancho de la propia cuadricula.

 

Tipos de letras:

 

Font Squirrel. Para agregar un poco de estilo a su sitio web, y alejarse de los tipos de letras estándar, busca tipografías para descargar e integrarlas con @font-face. Se trata de un depósito de diferentes tipos de letra que están disponibles gratuitamente para el uso en tus sitios web. El sitio también te permite descargar juegos con @font-face, que incluyen los archivos fuente, junto con una hoja de estilo completa que se puede integrar fácilmente en tu propio código.

 

WhatTheFont. Para identificar la tipografía a traves de archivos gráficos, obviamente, no es perfecto, y los resultados van a depender en gran medida de la calidad de la imagen original.

 

Iconos:

 

Iconza. Es un juego de iconos con un generador personalizable. Básicamente, es un conjunto de 112 iconos impresionantes, monocromático que puedes descargar y utilizar en tus diseños. Dispone de diferentes tamaños (32×32, 24×24 y 16×16.

 

Feedicons.com. Si buscas iconos RSS, este es tu sitio y una gran solución para sacarte de apuros.los iconos están en diferentes tamaños. Los tamaños grandes contienes todos los tamaños de iconos en diferente tipo de formatos de archivo, incluyendo los vectores editables. Esto permite gran flexibilidad para personalizar los iconos.

 

iconSweet. Los iconos monocromáticos son muy útiles, pues se integran fácilmente en cualquier página. Este conjunto contiene 60 iconos vectoriales de bonito diseño.  El hecho de que están basados en vectores los hace muy personalizables, es una ventaja para cualquier diseñador. Hay muchos otros juegos similares disponibles por ahí. Para saber más, echa un vistazo a este artículo reciente de SpyreStudios:40 Minimalist Icon, Symbol & Pictogram Sets con 40 juegos minimalista de iconos, símbolos y pictogramas.

 

Otros gráficos:

 

Placehold.it. En la construcción de un prototipos o maquetas de un sitios web, a menudo no empleamos imágenes reales, y es necesario crear una imagen de marcador de posición. Con esta herramienta podemos usar imágenes de marcador de posición de cualquier tamaño. Genera imágenes en escala de grises como marcador de posición, con una sintaxis muy simple de URL, todo lo que tienes que hacer es insertar la dirección adecuada en el código, y la aplicación servirá una imagen de marcador de posición. Puedes ahorran un montón de tiempo en tus proyectos futuros.

 

StripeMania. Es una aplicación web, que genera rayas totalmente personalizables para repetir en forma de patrón. Diospone de un sorprendente número de opciones y controles, para ajustar el ancho, espacio, orientación, colores de las rayas y el fondo y así sucesivamente. Puedes incluso fijar un degradado. Todo esto lo convierte en una poderosa herramienta con posibilidades casi ilimitadas.

 

AjaxLoad. Te permite generar animaciones personalizadas de carga en formato GIF. Puedes elegir entre más de 30 gráficos diferentes de animación, seleccione el color de primer plano y el color de fondo, y a continuación, genera y descargar un archivo GIF animado basado en tus opciones.

 

Generadores de texto:

 

BlindTextGenerator. Esta aplicación web sencilla pero eficaz utilizar texto simulado para marcar su posición, de una manera rápida. Permite crear una amplia gama de diferentes bloques de texto, con el uso de una serie de textos base diferentes. Puedes controlar el número de caracteres o palabras, y el número de párrafos, que ofrece un sorprendente grado de flexibilidad en cuanto a la longitud del texto.

 

Fillerati. Es otro generador de texto simulado para marcar su posición, que escupe el texto de una serie de clásicos de las obras literarias de autores como Lewis Carroll (Alicia en el País de las Maravillas), HG Wells (La Guerra de los Mundos) y Jules Verne (La vuelta al mundo en 80 días). Genera texto en diferentes formatos, con una gran flexibilidad en la forma en que se genera el texto, lo que permite crear párrafos, encabezados (que van desde los niveles 1-6), elementos de la lista e incluso sólo texto sin formato. El tipo de contenido que se está generando se cambia con controles deslizanten, que puede utilizar para el número de párrafos, palabras o elementos de la lista, etc.

 

Generadores de CSS:

 

Border Radius. Para las típicas esquinas redondeadas, nos proporcionar los valores para el radio de las cuatro esquinas de una caja y genera su codificación y propiedades del CSS, para crear elementos con esquinas redondeadas. Puede parecer ridículamente sencillo, pero también es súper rápido y fácil de usar, y realmente nos puede ahorrador tiempo en esta tarea, sobre todo para los que están empezando con el CSS3 (o incluso el CSS en general).

 

CSS3 Gradient Generator. De todas las propiedades de CSS3 nuevas que podemos utilizar, el gradiente de CSS es probable el más complejo y desalentador. Por lo tanto, este generadores de gradientes o degradados es muy útil. Te permite generar el código para crear gradientes de CSS3, nos ver cómo se combina el color. Te permite elegir entre el selector de color o definir manualmente (RGB, HSB o hexadecimal). Definitivamente es útil, pero te toma par de minutos para averiguar lo que hacen todos sus controles.

 

Ultimate CSS Gradient Generator. Otro generador de gradientes CSS, basado en la conocida interfaz de usuario de PhotoshopCon un buen regulador de degradado, donde puedes seleccionar los puntos individuales dentro de la pendiente y ajustar el color, nos deslizamos  hacia atrás y adelante para cambiar su posición e incluso simplemente pulsamos donde deseemos crear nuevos puntos en el degradado.

 

CSS Button Maker . Es una de las producciones de Chris Coyier, que produce todo tipo de cosas y trucos increíblemente impresionante en CSS Tricks, y el CSS Button Maker no es la excepción. Es el generador que mayor ahorro de tiempo nos produce si estamos buscando los estilo en los botones por medio del CSS. Crear botones CSS sobre la mancha con una amplia gama de controles que permiten definir el tamaño, relleno, radio de frontera, degradado, fondo, etc. Este generador es una pequeña herramienta de gran alcance para ayudarnos con el tema de los botones, para integrarse en tu sitio web de forma rápida y sencilla.

 

Tipografía y CSS:

 

Baseline CSS. La selección de tipo de letra es el primer paso, pero hay todo tipo de otras opciones que tienen que hacer, como el interlineado, el espacio entre letras, etc). Una consideración importante que no recibe mucha atención en la web es la alineación inicial Esta herramienta nos ayuda en eso, para poner una rejilla base tipográfica de tu web. Lo que realmente establece la prestación básica de todos los elementos HTML para alinear con los demás de acuerdo con el "define" línea de base . Por supuesto, es la propia línea de base teórica, y de hecho utiliza el tamaño de los tipos de letras, la altura de la línea y la posición relativa para controlar efectivamente la alineación, ya que no hay una propiedad nativa para la línea de base en CSS. Una herramienta genial para los sitios que utiliza una gran cantidad de texto dentro de los marcos.

 

TypeTester. Es una impresionante herramienta que puede hacer la mayor parte del trabajo pesado por nosotros. Prueba los diferentes tipos de letras y comparar los diferentes estilos tipográficos en diferentes columnas y verlos como aparecen en la web. En tres columnas, con el mismo bloque de texto, pero cada una de ellas con diferentes opciones. Podemos ver el texto en el mismo tipo de letra, pero en tres tamaños diferentes, o con tres diferentes de colores. Se puede comparar el mismo texto con el mismo tamaño, pero con tipos de letra diferentes. Los controles y las combinaciones para las pruebas son casi ilimitadas. Cada columna dispone de texto en el peso normal, negrita, cursiva y negrita cursiva, y estilos, así como en mayúsculas y minúsculas, que le da un montón de opciones para comparar, y por supuesto puedes generar su codofocación CSS correspondiente. En cuanto los tipos de letras dispone de una lista de tipografía seguras, de forma predeterminada los tipos de letras de Windows, de Mac, Windows Vista y las de Google. Un montón de opciones diferentes para que podamos jugar con ellas.

 

Otras herramientas:

 

Favicon.cc. . Los favicons son los pequeños iconos que aparecen en la barra de estado y en las pestañas del navegador para identificar un sitio, es un detalle pequeño pero importante en lo que respecta a la usabilidad. Esta herramienta es una manera rápida y fácil de generar su propio favicon de una imagen existente.

 

JSONLint . Esta pequeña herramienta es un validador, un recurso muy valiosos y útil.

 

Escrito por Toni

¿Te ha gustado? Compártelo:

Estas son las categorías a las que pertenece este artículo:

, Herramientas, Herramientas web, Editores Online


favoritoInsertar un Comentario


Nombre:

Email:

Comentario:

Escribe la siguiente palabra: No lo entiendes? Cambia el texto!

favoritoComentarios

No hay comentarios en este artículo.




favoritoArtículos relacionados:



Inscríbete al Boletín