Blog

Sígueme en

5 herramientas online imprescindibles para desarrolladores web

 Oct, 12 - 2014   CSSJSUtils

El día a día del desarrollador web es duro. Los que tenemos pasión por ello lo llevamos bien cuando se nos plantean retos nuevos o proyectos interesantes, pero lamentablemente eso no ocurre todos los días, y para esas tareas repetitivas que se dan en casi todos los proyectos, debemos tener una serie de herramientas que nos ahorren tiempo. Probablemente conozcáis algunas o todas, pero he creído conveniente enumerar las más útiles a mi parecer:

1. Minimizar CSS y JS

Minimizar los archivos CSS y JS al finalizar un proyecto, hará que cargue más rápido y que Google nos premie a su manera por ello, lo que contribuirá a un mejor posicionamiento. Cada pequeño detalle cuenta.

CSS Minifier, para minimizar CSS:

http://cssminifier.com/

JS Minifier, para minimizar JS:

http://javascript-minifier.com/

2. Pasar el CSS de una hoja de estilos o del tag «style», a INLINE HTML

Si has tenido que maquetar emails para campañas de marketing sabrás a lo que me refiero. Normalmente los emails que envíamos desde un sitio web tienen el mismo diseño que el sitio, que lo tenemos perfectamente maquetado sin una solo etiqueta «style» en nuestro HTML, pero para los emails no sirve, porque no podemos asegurar que esas bonitas reglas CSS se ejecuten en todos los lectores de correo, sobre todo en Gmail, que prefiere el estilo «inline» en los mensajes HTML. El trabajo que supone pasar a inline un CSS ya maquetado, además de aburrido y nada gratificante, puede ser largo y tedioso, y hacerte cometer fallos hasta que consigues exactamente el mismo resultado que con CSS. Si te ves en ésta situación, agradecerás las 2 o 3 horas que te puede ahorrar la herramienta que MailChimp pone a nuestra disposición:

http://templates.mailchimp.com/resources/inline-css/

3. Preparar las fuentes para tu sitio web, para todos los navegadores

Después de la ardua tarea de elegir las fuentes que queremos utilizar en nuestro sitio, es hora de descargarlas, generalmente de Google Fonts, en formato .TTF. Para convertir esas fuentes a los diferentes formatos necesarios para la web, tenemos a fontsquirrel:

http://www.fontsquirrel.com/tools/webfont-generator

4. Sprites CSS. Unifica todas las imágenes de la web en una sola, y obtén el CSS con las coordenadas

Una vez más, una herramienta que te puede ahorrar horas si no la conocías y te dedicabas a hacer ésta tarea manualmente. Su uso es muy sencillo: subes las imágenes que quieres, escribes un prefijo para las clases css que manejarás, y te devuelve una única imagen png y lo más importante, las coordenadas precisas a cada una de ellas, en formato amigable (utiliza el nombre del archivo que has subido como clase, junto al prefijo que hayas utilizado). Además del sitio que propongo, hay muchos más, algunos más simples y otros más completos.

http://css.spritegen.com/

5. SVG Editor. Edita cómodamente archivos SVG de manera visual.

Los SVG están de moda. Es evidente que tener imágenes vectoriales es mejor que usar las tradicionales, sobre todo si nuestra web es responsive. Si no te apetece editar los archivos SVG como texto, y quieres ser diseñador por un ratito, nuestro amigo Google tiene una herramienta para ello:

http://svg-edit.googlecode.com/svn/branches/stable/editor/svg-editor.html

Espero que os sean de utilidad éstas herramientas. En mi caso no hay día que pase sin utilizar alguna. Si conocéis más no dudéis en dejarme un comentario y ampliar nuestro particular «taller de herramientas web». Feliz coding!


Categorías