Archivo de la etiqueta: grunt

Making of Anima: UNICO – Herramientas

Aquí estoy de nuevo. Como prometí, voy a hablar de las herramientas que uso para crear Anima: UNICO. Sin más…

1. Lenguaje: HTML+CSS+JavaScript en el cliente, PHP en el servidor

Ésta está clara. El desarrollo principal de Anima: UNICO está realizado en JavaScript. La página web en sí usa HTML, aunque la mayor parte de la misma se genera dinámicamente desde código usando jQuery. La representación se controla casi totalmente mediante CSS.

2. Frameworks y librerías de Javascript: jQuery, jQuery UI, Modernizr, Gumby

Una de los puntos fuertes de JavaScript es la gran cantidad de desarrollos existentes. Muy probablemente jQuery sea el más famoso de ellos, y con razón. Sus funciones resultan básicas para trabajar con el DOM de la página web y no volverse loco.

Además de jQuery, comencé utilizando jQuery UI como base para la interfaz de usuario. jQuery UI es un framework con funciones para crear botones, diálogos, componentes arrastrables, etc.

Modernizr es una pequeña librería que facilita el diseño para varios navegadores.

Gumby es un framework para crear web adaptativas, que se ajustan al tamaño de la pantalla de visualizado. Es la base con la que doy formato a la página.

3. Frameworks y librerías de PHP: CakePHP

Para el lado del servidor de momento estoy usando, de modo muy muy básico, CakePHP, que me ofrece de base justo lo que quería.

4. IDEs: Jetbrains WebStorm, JetBrains PHPStorm

Los IDEs de JetBrains me han conquistado. Me encantó WebStorm para desarrollar en JavaScript, y cuando empecé a usar PHP pasé a PHPStorm (que incluye toda la funcionalidad de WebStorm). Son entornos de desarrollo muy potentes, con integración con todo lo que necesitaba integrar (control de versiones, base de datos remota, ftp, librerías…).

Además, a través de estos IDEs descubrí todas las tecnologías del siguiente punto…

5. Muchas más: Node.JS/NPM+Grunt, SASS+Compass, Mocha

Los IDEs de JetBrains se integran con un servidor Node.JS propio, que permite cargar un montón de scripts de lo más útiles. Yo llegué hasta Grunt, que permite automatizar tareas (es similar a un Make), y lo usé para unificar mis archivos de javascript, minificarlos y prepararlos para ser publicados en producción.

6. Control de versiones

Empecé usando Subversion como control de versiones, pero hace unos meses descubrí y aprendí Git, y no he mirado atrás. Me parece un sistema genial de control de versiones.

7. Tareas, control general, repositorio: Assembla

Buscando, encontré varias opciones de repositorio online. Al final me decanté por Assembla, que ofrece un plan básico gratuito muy atractivo (para mi). Se integra con Svn y con Git, ofrece control de tareas y tickets (que puedo integrar con PHPStorm)

8. Informes y análisis de visitas: Google Analytics

En la página tengo Google Analytics para comprobar las visitas diarias, idioma de visitantes, navegador… detalles bastante importantes para un proyecto en JavaScript.

Por hoy es todo. El próximo día empezaré a describir la estructura básica del código.

Ah, por cierto, en GitHub podéis encontrar el repositorio de código. ¡Adelante, hacedle un fork o lo que queráis!