Una de la cosas que más les cuesta a los que empiezan a trabajar con la tecnología CSS es que las cosas se pinten donde se pretende y que no se muevan de sitio de una pantalla a otra.
Patternify es una juguete curioso que permite dibujar una imagen pixel a pixel en su pequeño editor web y obtener el archivo png de lo dibujado y el código CSS en formato base64.
El editor es básico pero permite al menos elegir el color del trazo, la opacidad, limpiar el dibujo, elegir un borrador, etc. También están disponibles unos patrones de ejemplo y se puede compartir las creaciones de cada uno con la comunidad.
Tiene un fallo menor y es que cuando descarga el archivo png no sabe ponerle la extensión y nos pide que no se nos olvide hacerlo a nosotros pero no tiene mayor importancia.
Categoría: Utilidades para diseño
Aplicaciones y recursos para diseñar. Recursos para diseñadores, herramientas gratuitas y consejos para diseñar por móvil y web.
Contenedor de imágenes para diseñadores Web
Un recurso muy importante para esas etapas de plantilla o borrador, donde aún no se cuenta con la imagen final que rellenara un espacio determinado en el diseño web, puede ser lorempixum, un aplicativo muy útil que nos ayuda con esta ardua tarea en tiempo de diseño.
El proceso es muy sencillo, por medio de una declaración inline, como por ejemplo con las siguientes sintaxis:
https://lorempixum.com/400/200/nature
“ toma una imagen aleatoria de 400 í— 200px de la categoría de nature”.
https://lorempixum.com/g/300/200to
“inserta una imagen aleatoria en escala de grises de 300 í— 200px”
https://lorempixum.com/400/200/people /1to
“muestra la imagen 1 de 10 de la categoría people”.
Este sitio cuenta con las siguientes categorías disponibles: abstracto, animales, ciudad, comida, noche, vida, moda, gente, naturaleza, deportes, tecnología y transporte, siendo un buen recurso para bocetos de diferentes tipos.
Solarized – Esquema de colores que te ayuda a codificar
Solarized es una paleta de colores que fue diseñada para ayudar a programadores a codificar, buscando más que nada generar un entorno que canse menos la vista a medida que pasamos más tiempo trabajando. Para esto, propone que el usuario pueda optar por utilizar un fondo obscuro o uno blanco, combinando además colores que contrasten de forma inteligente mejorando el grado de legibilidad.
Podemos instalarla sin problema alguno en Vim, Mutt, Xresources, iTemr2 y en la terminal OS X, aunque también debemos decir que existe la posibilidad de utilizar la paleta de colores para programas como Photoshop, The GIMP y Apple Color Picker Palette.
Una vez descargado el paquete disponible en la web del autor, podremos encontrar dentro un archivo «Léeme», que contiene una descripción que nos guiará para poder instalar correctamente a Solarized en donde lo necesitemos.
Enlace: Solarized | Vía TheNextWeb
prefixMyCSS ”“ Ayudando a migrar de CSS a CSS3
Llega a la nube una nueva opción para los que maquetean y deben apoyarse en los archivos CSS para dejar tal cual luce el arte grafico por medio de los estándares actuales, no descuidando el peso de éstos que en muchas ocasiones si no los estructuramos adecuadamente nos hacen lenta la navegación de los sitios web.
Para ello presentamos prefixMyCSS una aplicación en línea que nos permite formatear el archivo CSS y proveer prefijos para la CSS3, también retirar todos los comentarios y generar el archivo en una sola línea para ahorrar peso como se comento anteriormente.
No cabe duda que esta aplicación será de gran provecho para los diseñadores web.
BuiltWith – Para conocer las tecnologías utilizadas de un sitio web
Pocas cosas en la vida se pueden ocultar o tener acceso a ellas porque en varias ocasiones no tenemos las herramientas necesarias para conocer datos que nos gustaría tener a nuestra disposición o no contamos con el poder adquisitivo para poseer tecnología de última generación por sus altos costos.
Una de esa aplicaciones que nos pueden ayudar a obtener información de qué tecnología utilizan los sitios web o blogs que más frecuentamos es BuiltWith que ya se desde Julio del 2007, con base en Silicon Beach, Manly, Australia, ha brindando su valioso aporte de forma gratis y ahora en día con una familia de aplicativos que encierran una amplia gama de importante información.
Parte de la información que nos muestra está dividida por sección tales como Frameworks, Información detallada del archivo, CMS del sitio, codificación, información del servidor, publicidad, widgets, análisis y seguimiento, contenido proporcionado por otras redes sociales como otros aspectos de gran magnitud.
Como pueden ver, la información que esta herramienta proporciona es amplia, puede servir para marcar los tipos de tendencias que actualmente ocupan los diferentes sitios web que conocemos para rentabilizarse o en su defecto promocionarse, también podrían realizar un estudio de mercado sobre las diferentes tecnologías que ocupan una línea determinada de páginas web.
También lo podemos encontrar como una extensión de navegador lo cual permitirá que una vez lo tengamos instalado y activado con un doble clic deje revisar todos estos datos de la página que tengamos cargada en ese momento, por medio de una ventana emergente que proporcionará la información antes detallada.
La idea de todo esto es ayudar a los usuarios que trabajan desarrollando sitios web a conocer las herramientas que más están siendo adoptadas por la mayoría de sus propios colegas. Compartiendo conocimiento se deducen los estándares para estas áreas y una mejor práctica de las futuras tendencias según van emergiendo nuevas tecnologías.
Esto ayuda a las nuevas generaciones que desean incursionar en estos ambientes, porque tienen un desarrollo más rápido y amplio en vista que tienen referencias de lo usado hoy en día en el área de tecnología, de esta forma permitiéndoles triunfar en sus carreras por estos beneficios con los que en un inicio la nube no contaba.
AndroidPatterns – guía de patrones de interacción orientativa para tus aplicaciones Android
Cuando se desarrolla una aplicación para un dispositivo móvil, uno de los factores que hay que tener en cuenta en la misma es la facilidad de uso, de manera que su manejo no revista dificultad para los usuarios que se instalen dicha aplicación en sus terminales móviles. Para ayudar a los desarrolladores de aplicaciones para Android, existe Androidpatterns, una ayuda que les va a ir genial a la hora de plantear la interacción de sus aplicaciones para cumplir con dicho objetivo.
Se trata de una guía visual en el que se pone de manifiesto una serie de situaciones, dentro de las cuales se muestra de manera gráfica la forma en el que las aplicaciones han de interactuar. Básicamente, se hace a nivel orientativo, no debiéndose tomar como una regla o una ley estricta, tal y como advierte en dicha web.
Además, los usuarios que no encuentren un patrón de interacción para una situación concreta, también pueden enviar sus propuestas, bajándose previamente un kit desde el que partir la creación del patrón de comportamiento.
Sin duda, un recurso interesante para llevar a cabo el desarrollo de aplicaciones para Android, ideal para ampliar la lista que os presentamos recientemente.
Cage – Una revolucionaria forma de presentar proyectos gráficos a los clientes
Si trabajáis creando diseños, ya sean webs, carteles publicitarios, banners o cualquier otro trabajo de este tipo, seguramente conoceréis los problemas que existen a la hora de obtener la aprobación final del cliente.
Emails que van, emails que se pierden, sistemas de gestión de proyectos donde el cliente nunca entra, llamadas donde se discuten temas sin firmar nada… es eso lo que cageapp.com pretende evitar.
Se trata de una aplicación que simplifica al máximo la discusión de imágenes de un proyecto gráfico. Sólo tenemos que crear un proyecto y asociar imágenes al mismo, cada una tendrá una url asignada que, al compartirla con el cliente, podrá ser comentada poniendo notas sobre ella.
Para probarlo, después de pedir una invitación en su sección de contacto (podéis usarlo con el código de invitación awesome), os dejo con una imagen en la que ya he añadido una nota. Podéis incluir más notas sin necesidad de registro, sólo tenéis que usar el ratón para elegir el tamaño y la posición de la misma.
Os dejo con el ejemplo aquí: diegopolo.cageapp.com/project/862
i2style – Generador de banners y badgets en CSS
Si trabajáis con diseño web y queréis empezar a jugar con las propiedades CSS de banners, echad un vistazo en i2style, la nueva herramienta de sciweavers.org.
Se trata de una aplicación en la que podemos alterar las propiedades de texto, colores, tamaños y sombras de un banner, creando desde botones hasta anuncios enormes que podremos incluir en nuestro sitio web.
El resultado es un código limpio en CSS y HTML, siendo excelente también para uso educativo, aprendiendo a ver los efectos causados en un diseño cuando se modifican los valores de las variables de la hoja de estilos.
Crearbanner – una forma sencilla de crear banners
No todo el mundo tiene porque conocer el manejo de programas de edición gráfica. En caso de que necesiten crear un banner, Crearbanner es una solución que en su versión gratuita y sin necesidad de registros, podrán crear sus propios banners configurando una serie de opciones básicas.
En caso de que opten por la versión de pago, además de no contar con la marca de agua que se añaden en la opción gratuita, dispondrá de una serie de diseños más, más fondos para usar, más texturas, y en definitiva, dispondrán de una amplia librería de cliparts con los que dar rienda suelta a sus necesidades de diseño para el banner.
hslpicker – Descubre nuevos colores alterando los parámetros HSL
hslpicker.com es una sencilla herramienta que nos permite trabajar con el modelo de colores HSL (del inglés Hue, Saturation, Lightness ”“ Tonalidad, Saturación, Luminancia), alterando los valores de cada variable para obtener diferentes colores.
Al mismo tiempo que vemos el resultado de nuestras acciones, podemos obtener rápidamente el código de color y los valores RGB para usarlo en nuestros diseños, siendo una excelente opción para los que prefieren orientarse por la tonalidad, saturación y luminancia a la hora de decidir el aspecto de los trabajos realizados.
El código de este proyecto está libre y hospedado en github.com, habiendo sido creado por Brandon Mathis usando CSS3, Javascript y HTML, sin ninguna imagen.