Hay muchas herramientas web gratuitas útiles para crear CSS, Javascript y HTML. Hoy lanzamos la primera versión de estas herramientas que nos facilitan la vida. Espero que os sirva de ayuda en vuestros proyectos.
CSS Beautifier
Con CSS Beautifier transforma tus estilos CSS en una forma más fácil de ver o utilízalo para transformar archivos CSS minimizados en algo más agradable a la vista.
Imagínate que tienes este CCS:
1 | body{font-family:Georgia, Times, serif;color:purple;background-color:#d8da3d}h1{font-family:Helvetica, Arial} |
1 2 3 4 5 6 7 8 | body { font-family: Georgia, Times, serif; color: purple; background-color: #d8da3d } h1 { font-family: Helvetica, Arial } |
CSS Color Editor
CSS Color Editor es una útil herramienta web que nos permite cambiar los códigos de colores de nuestros archivos CSS rápidamente.
Imagínate que tienes que crear una landing page a partir de una que ya tienes creada y cambia los colores y los textos básicamente, esta herramienta te ayuda a cambiar esos colores. Sube tu archivo de estilos a la herramienta, indica que colores cambiar y ya tienes tu nuevo CSS.
http://css-color-replace.orca-multimedia.de/
[hr]CSS Matic
CSS Matic es un conjunto de 4 herramientas CSS de gran utilidad para el diseño web: Editor Gradientes, Bordes Redondeados, Textura Suciedad, Editor Sombras
Editor Gradientes
Con esta herramienta puedes combinar colores, opacidades, matiz, luminosidad y saturación para conseguir un degradado en CSS.
http://www.cssmatic.com/es/gradient-generator
Bordes Redondeados
Excelente herramienta para crear bordes redondeados pudiendo redondear cada esquina por separado.
http://www.cssmatic.com/es/border-radius
Textura Suciedad
Muy útil. Permite crear fondos con texturas, suciedad y ruido.
http://www.cssmatic.com/es/noise-texture
Editor Sombras
Crea sombras para cualquiera de tus elementos HTML.
http://www.cssmatic.com/es/box-shadow
[hr]CSS Minifier
CSS Minifier transforma tus códigos CSS en una versión más ligera quitando los espacios y saltos de línea que no aportan a la interpretación para el correcto funcionamiento de tu página web (Minify).
Imagínate que tienes este CCS:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | /* Layout helpers ----------------------------------*/ .ui-helper-hidden { display: none; } .ui-helper-hidden-accessible { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } |
CSS Minifier lo transformará en:
1 | .ui-helper-hidden{display:none}.ui-helper-hidden-accessible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px} |
De esta manera al pesar menos tus archivos CSS tu página cargará más rápido.
http://www.cleancss.com/css-minify/
[hr]CSS Type Set
CSS Type Set es una herramienta gratuita CSS que nos permite crear fácilmente nuestros estilos de un texto.
Podemos cambiar el tamaño, tipo de letra, espaciado, alineación, color de letra y fondo.
También podemos utilizar las transformaciones como poner el texto en mayúsculas y capitalizado.
[hr]
Javascript Beautifier
Con Javascript Beautifier transforma tu código Javascript en una forma más fácil de ver o utilízalo para transformar archivos Javascript minimizados en algo más agradable a la vista.
Imagínate que tienes este código Javascript:
1 2 | function j(e) {var t=e.length,n=x.type(e);return x.isWindow(e)?!1:1===e.nodeType&&t?!0:"array"===n||"function"!==n&&(0===t||"number"==typeof t&&t>0&&t-1 in e)} |
Javascript Beautifier lo transformará en algo más agradable:
1 2 3 4 5 6 | function j(e) { var t = e.length, n = x.type(e); return x.isWindow(e) ? !1 : 1 === e.nodeType && t ? !0 : "array" === n || "function" !== n && (0 === t || "number" == typeof t && t > 0 && t - 1 in e) } |
Javascript Minifier
Javascript Minifier transforma tus códigos Javascript en una versión más ligera quitando los espacios y saltos de línea que no aportan a la interpretación para el correcto funcionamiento de tu página web (Minify).
Imagínate que tienes este código Javascript:
1 2 3 4 5 6 | /* Show transparent overlay */ function pageOverlay() { $("#overlay").height($(window).height()); $("#overlay").width($(window).width()); $("#overlay").show(); } |
Javascript Minifier lo transformará en:
1 | function pageOverlay(){$("#overlay").height($(window).height());$("#overlay").width($(window).width());$("#overlay").show();} |
De esta manera al pesar menos tus archivos Javascript tu página cargará más rápido.
http://www.danstools.com/javascript-minify/
[hr]JS Bin
JS Bin es un completo editor web que nos permite tener a la vez y por separado la parte HTML, CSS y Javascript. Podemos verlo, editarlo y ver cómo queda el resultado.
Puede ser muy útil para quien está acostumbrado a trabajar en código para proyectos de una página web tipo landing page.
[hr]Kotatsu Simple HTML table generator
Kotatsu Simple HTML table generator te permite generar el código de una tabla HTML fácilmente en pocos clicks.
Quizás no es una gran herramienta pero te puede ayudar en este tipo de etiquetas específicas de HTML.
http://www.askthecssguy.com/kotatsu/
[hr]Word Off HTML
Word Off HTML limpia los HTML que hayan sido creados en Word, muy útil para diseños creados a través de un word por gente que tiene pocos conocimientos en programación.
Word Off HTML nos salvará de ir mirando código y limpiará de todo el código innecesario que genera Word.
http://www.targetlocal.co.uk/wordoff
[hr]Estamos trabajando en valorar estos recursos gratuitos desde nuestra web y nos gustaría que los valoraras, puedes hacerlo aquí:
http://bitacoraweb.info/recursos-gratis/
Y si quieres proponernos más recursos gratuitos a valorar escríbenos:
http://bitacoraweb.info/contacto/
