Recursos Front-End
11/07/2016
Herramientas
Ahora presentaré algunas herramientas online para generar algún que otro trozo de código, listo para copypastear en nuestros desarrollos. Como todo buen desarrollador, no se trata de reinventar la rueda, si no de reutilizar! Estas herramientas nos ayudarán a ir más rápido en nuestros desarrollos.
Coolors Una sencilla herramienta para generar una paleta de colores. Podemos ir generando conjuntos de colores pulsando la barra espaciadora. También podremos fijar un color en concreto para ir generando los otros colores y siempre obtendremos un conjunto en armonía.
Material Palette Estupenda herramienta para generar una Paleta de Colores. Elegiremos dos colores (el color primario y el color de énfasis) y la herramienta nos ofrecerá un conjunto de colores bien proporcionados, respetando las líneas de diseño de Material Design.
CSSMatic Colección de cuatros generadores. Para generar sombras, bordes, gradientes y texturas. Cada uno desde una interfaz web interactiva muy cómoda. Es un lugar excelente para experimentar.
CSS Shapes Para conseguir dibujar alguna forma geométrica básica con CSS. La he usado más de una vez, sobretodo para crear las 'flechitas' de los típicos tooltips :)
UI Gradients Generador de gradientes. Un conjunto de gradientes predefinidos, podemos navegar entre todos ellos hasta encontrar alguno que nos guste. La mayoría se ve genial.
CSS Load Magnífica colección de 'loaders' en CSS. Aquí encontraremos una buena cantidad de elemetos animados perfectos para los tiempos de carga. Especial atención a los loaders en 3D, explotando las grandes capacidades de CSS3.
GenFavicon Herramienta en español para generar favicons de una forma sencilla, basta con que subamos la imagen que deseemos y el sistema nos devolverá dicha imagen lista para referenciar como un favicon en nuestra web. Además de exportar en .ico, también permite exportar en .png, .jpg y .gif.
Can I use Una indispensable. Si estamos desarrollando estilos y queremos tener en cuenta la compatibilidad y la correcta visualización cross-browser, deberemos consultar qué nivel de soporte dispone cada navegador para según qué elemento/funcionalidad.