Hoy en día el flujo de trabajo para desarrollo Web se ha vuelto muy complejo, se usan muchos lenguajes, herramientas, compiladores, plugins, widgets, gestores de contenido, lenguajes front-end, lenguajes back-end, controladores de versiones, etc.. Pelearse cada vez con todo esto es muy tedioso, así que poco a poco vas adaptando o evolucionando tu marco de trabajo Web para que no repercuta en tiempos y eficiencia.

Mis Herramientas y el marco de trabajo Web

Hay herramientas y marcos de trabajo alternativos (sublimetext, gulp, terminal…), aquí voy a comentar las herramientas que yo utilizo desde ya hace unos añitos como marco de trabajo Web para desarrollo: Coda2, CodeKit, MAMP y SourceTree. Son herramientas que han ido evolucionando con los tiempos, y con ello yo he ido adaptandome a esa mejoras.

• Coda: Un editor de código rápido, limpio y eficaz y una forma integrada de gestionar los proyectos locales y remotos. Aunque también podría decir que es más que un editor, lleva prácticamente todo lo que necesitas para desarrollo Web.
• CodeKit: Un «constructor» que agiliza y mejora la forma de desarrollar sitios Web. Compila cualquier lenguaje, analiza sintaxis y errores, optimiza imágenes, compresión de ficheros, auto-refresca en todos los navegadores y dispositivos, e integra el potencial de bower para descargar cientos de componentes.
• MAMP: Para disponer de un completo entorno de servidor local. Lleva Apache HTTP, MySQL, PHP y PHPMyAdmin, etc.
• SourceTree: Un cliente GUI para manejar repositorios git y mercurial, que nos ayudará a controlar las versiones y gestionar el flujo de desarrollo del proyecto.

Resumiendo de una forma muy muy reduccionista, yo uso en mi marco de trabajo Web: Coda2 (codificando), CodeKit (integrando), MAMP (ejecutando) y Sourcetree (controlando).

Versiones extendidas y licencias

Merece la pena tener las versiones extendidas o PRO (MAMP pro, por ejemplo) y las licencias extendidas. Que menos para estos pedazo de programas que tanto mejoran nuestro día a día en el trabajo y con los que nos «enriquecemos». Por este motivo a mi personalmente no me duele ni un poquito pagar estas licencias, al contrario lo hago gustosamente.

Coda (codificando)

Gestor de proyectos

Sirve como un completo organizador de todos tus sitios Web, se pueden agrupar fácilmente.

Editor de código

Es una autentica pasada, muy bien distribuido, personalización completa de interfaz, multiples resaltes, opciones muy completas de búsqueda y remplazo, expresiones regulares, clips para añadir/reutilizar códigos (snippets), autocompletadores para muchos lenguajes, indexación de los ficheros del proyecto donde localiza todas sus funciones, clases, etc para el autocompletado. Y todo ello muy intuitivo.

Cada tipo de documento lleva color diferenciado en su pestaña. Y al hover aparece un tooltip con información de si esta guardado y donde.

El autocompletado puedes extenderlo a otros lenguajes y funciones con los llamados #modes. Yo tengo la de WordPress y Advanced Custom Fields. En la sección de plugins de la Web de Coda hay una gran recopilación de #modes.

Una cosa que uso bastante son los «Clips». En Coda tenemos un lugar donde organizar todos esos trozos de código (snippets) que usamos recurremente, para que cuando los necesitemos hagamos doble clic y los incrustamos rápidamente en el código.

Si quieres descargarte algunos clips aquí hay una buena recopilación organizados por categorías (el botón install clip funciona con safari). Otros recopilatorios de clips para Coda:

• HTML5
• CSS3
• Bootstrap
• jQuery

Es muy útil también la funcionalidad para validar el código.

Y por último el blog de Panic nos da algunos trucos interesantes.

Publicación

FTP, SFTP, WebDAV, o Amazon S3, a pesar de que también usemos Transmit u otro para la transferencia de ficheros, es indudable lo que agiliza tener una solución rápida y fácil que integre esas tareas de forma rápida. Esta utilidad me encanta como esta diseñada en la interfaz y como discierne los ficheros añadidos, modificados o eliminados para sincronizar con el servidor remoto.

Bases de datos

Lo mismo que el anterior caso, aunque tengamos Sequel Pro, es muy rápido hacer un cambio pequeño o ejecutar alguna query de SQL contra la base de datos sin cambiar de programa.

GIT y Subversion

Integra en el flujo de trabajo estos controladores de versiones. Git es tremendamente sencillo desde Coda, no obstante aquí hay un manual. Como una solución rápida en el desarrollo vale, para tener más control SourceTree.

Plugins

Con los que podremos extender la capacidad de Coda. Validadores, Diff, integración con Codekit, etc. Descarga de plugins.

Previsualización

Otro punto de los fuertes. Esta perfectamente integrada en la aplicación y es muy rápida, permite escoger el «user agent», un potente web inspector, ver código fuente, y el Air Preview que ya es la repanocha para previsualizar en el iPad y iPhone. No obstante en CodeKit también tendremos esta utilidad integrada con Browser Sync.

Coda iOS

Es la app hermana de Coda con la que podremos usar la herramienta en el iPhone y iPad, también necesaria para el Air Preview.

Importar proyectos

Si usas transmit los puedes fácilmente exportar e importar a Coda como proyectos, incluso tendrás la misma organización de carpetas que en transmit.

Sincronización

Otra de las cosas que mas me gustan, y es que todos los proyectos están sincronizados con tus dispositivos. En mi caso con el iMac, Macbook Pro, iPad y iPhone, lo cual ahorra cierto trabajo. Ya no se trata de tener la misma versión (ya controlado con GIT) sino de tener la misma configuración del proyecto en todos los dispositivos. Como punto malo, es que tardan bastante en finalizar el sincronizado creo que esta parte merece una mejora.

Ayudas

Incorpora libros de referencia de cada lenguaje.

De forma más especifica también están los «hints» donde haciendo doble clic en una función PHP o una etiqueta HTML ya te muestra su descripción atributos, parámetros, etc. Todo visualmente muy atractivo a la vez que claro.

Coda es realmente muy fácil e intuitivo, pero además hay un librito gratis que lo explica todo muy bien.

CodeKit (integrando)

Compilador

Compila cualquir lenguaje de desarrollo Web que necesites, Less, Sass, Stylus, CoffeeScript, Typescript, Jade, Haml, Slim, Markdown & Javascript.

Autoprefixer

Información del uso y configuración de Autoprefixer.

Auto refresco & Browser Sync

Podemos desarrollar y ver automáticamente los cambios actualizados en los navegadores y en cualquier dispositivo MAC, PC, iOS, Android. Ambas funcionalidades quedan muy bien explicadas en Browser Refreshing y Browser Sync.

* Nota: Si los ficheros necesitan ser preprocesados por el servidor local (ficheros PHP por ejemplo) se ha de activar la opción de «external server» y la «external server address». En mi caso tengo mamp configurado para «http://localhost» que lleva al directorio «Sites» de Mac.

Controlador de sintaxis

Source maps & Minifiers

Otra de las funciones estrellas junto con el auto-refresco.

Bower

Con ello podemos instalar rápidamente más 6.000 componentes con un simple click, Bootstrap, jQuery, Modernizr, WordPress.

Codekit y Coda

Con este plugin quedan perfectamente comunicadas ambas herramientas. Simplemente abres un proyecto en Coda (ya configurado en ambas herramientas) y automáticamente ya se abre CodeKit y se pone a funcionar con el, toda una gozada!

MAMP Pro (ejecutando)

Es todo un clásico, con esta herramientas se puede desarrollar perfectamente en local con todas las prestaciones y/o similitudes que en un entorno remoto. Existe la posibilidad de escoger la versión de PHP, servidores virtuales, DNSs dinámicos, configuración de SMTP, controlar la configuración de Apache, visualizar logs, gestionar las bases de datos con PHPMyAdmin, etc.

SourceTree (controlando)

Un cliente para controlar versiones, yo lo uso con GIT y Bitbucket. Es realmente increíble y fácil. Para comenzar con git a mi me ayudo mucho este post que además usa de ejemplo la misma herramienta: Git para diseñadores y otro más denso sobre SourceTree.

Sobre el flujo de trabajo con git, los de github son unos maestros.

Y nada más, a grandes rasgos este es el marco de trabajo Web que uso día a día para desarrollo Web, a ver que opináis y cualquier cosa que se pueda añadir bienvenida sea en los comentarios.