Procesos de diseño web: Hammer vs Codekit

Por Ernesto Jiménez · 19 junio, 2013
Publicado en Diseño web

hammer-codekit-apps

He cambiado mi forma de trabajar. En la fase de diseño de una página web ahora uso una nueva herramienta que ha revolucionado mis tareas habituales: Hammer.

Sé que siempre defiendo que adoptemos herramientas que se adapten bien a nuestros procesos pero en este caso merece la pena hacer pequeños ajustes para beneficiarnos de esta aplicación.

hammer-main-screen

¿Qué hace Hammer?

Hammer te ayuda a escribir HTML de una manera más eficiente gracias a que te permite incluir partes de código que puedes reutilizar. Lleva la funcionalidad de include de PHP a HTML.

Puedes hacer un archivo que contenga el código de la cabecera, por ejemplo, e incluirlo en las diferentes páginas del sitio que estés diseñando.

Si tienes varias páginas creadas y tienes que hacer alguna modificación en la cabecera solo tienes que cambiar el archivo que contiene ese trozo de código y se actualizará en todas partes.

Photoshop se queda corto cuando se trata de mostrar diseños responsive Con la necesidad de mostrar cómo responde un diseño responsive en diferentes tamaños de pantalla los editores gráficos como Photoshop se quedan obsoletos. La imagen estática del boceto ya no sirve para que el cliente vea cómo quedará su sitio web. Aquí es donde se hace vital el uso de recursos que te permitan generar rápidamente una maqueta viva del proyecto y Hammer puede ser tu mejor aliado.

Esto te permite crear tu propia estructura inicial de archivos, tu propio framework, y reutilizarlo en cada nuevo sitio que inicies.

Yo tengo mi archivo index y una serie de carpetas y archivos con partes de código bien diferenciadas que me ayudan a tenerlo todo mejor estructurado. Cada vez que guardo un archivo Hammer se encarga de reunirlo todo, compilarlo y generar todos los archivos listos para subir a producción en una carpeta Build dentro del proyecto.

Mantener organizado tu proyecto es sencillo y puedes crear tus propias plantillas para que cuando inicies una nueva web Hammer cree tu estructura de archivos.

hammer-project-view

Qué tareas he tenido que modificar

Uso Sass y me encanta No es que me haya visto obligado a cambiar mi manera de trabajar con CSS sino que me he pasado ya totalmente a Sass. No me terminaba de convencer eso de escribir pseudo-css que posteriormente había que compilar pero ahora que aplicaciones como Hammer lo ponen tan fácil me he puesto las pilas y tengo que decir que estoy encantado.

Tengo todo el estilo separado en archivos en una carpeta: reset, clearfix, maqueta general, tipografía, formularios, estilos por secciones… Cada cosa en su sitio. Cada vez que guardo algún cambio Hammer se encarga de reunirlo todo y generar un único archivo CSS para usar en producción. ¡Y además lo optimiza y lo minimiza!

Y mucho más

Si aún no has ido corriendo a comprarlo, debes saber que hace bastantes más cosas:

  • te ofrece la posibilidad de usar variables. Puedes asignar el título del sitio a una variable y modificar el archivo de variables para cada proyecto
  • actualiza el navegador cada vez que guardas algún cambio, es como si hubiera llegado el AVE al mundo del diseño web, irás mucho más rápido con este pequeño detalle
  • dispone de rutas inteligentes, es decir, magia: escribes el nombre del archivo que quieres incluir y Hammer lo busca y genera la ruta correcta

Y qué pasa con Codekit

Llegué a Hammer después de haber probado Codekit (Daniel Martínez fue el primero al que oí hablar de Codekit y el que me puso en la pista de este tipo de herramientas). Codekit es otra aplicación bastante similar a Hammer. Además de Sass compila Less, cosa que Hammer no hace. Como uso Sass este punto me da igual.

Otra ventaja de Codekit es que tiene más opciones de optimización  de archivos.

Con Codekit puedes importar tus frameworks de manera que si haces un include de algún archivo lo buscará primero en el proyecto concreto en el que estés trabajando y, si no lo encuentra, recorrerá tus frameworks para incluirlo.

Probé ambas aplicaciones casi al mismo tiempo y en un principio me gustaba más Codekit. No me entusiasmaba que Hammer generara todos los archivos en una carpeta Build dentro del proyecto, Codekit compila cada archivo en la ruta que le indicas. Finalmente me he acostumbrado y me parece más ordenado tener todos los archivos generados en un mismo sitio. De hecho ha sido la estructura más sólida de Hammer la que me ha convencido a usar esta aplicación. Ambas cuestan prácticamente lo mismo y tienen versiones de prueba. Lo mejor es que le eches un vistazo tú mismo y elijas.

Las aplicaciones

Hammer for Mac
Codekit

Sass

El lenguaje, estilo con actitud
Referencia de Sass

 

¿Te ha gustado el post? Puedes seguirme en Twitter o en Facebook donde seguimos hablando de diseño web