Ahora bien, un proyecto web está dividido principalmente en dos capas: el Front-End —que es lo que el usuario ve— y el Back-End —la tecnología que trabaja por detrás—, todo ello complementado con un buen diseño capaz de ofrecer una buena usabilidad y una arquitectura de la información eficiente.
Back End
Es la capa que se encarga de procesar la información que llega del usuario, ya sea para almacenarla en base de datos o para devolver una respuesta. Detrás de esto se encuentran el software de la aplicación, el servidor que la ejecuta y la base de datos que la almacena.
Los lenguajes de programación más habituales en esta parte son:
Los tres últimos son especialmente utilizados en muchas startups y aplicaciones web modernas, pero no funcionan solos: se apoyan en potentes frameworks y extensiones que los hacen más manejables y productivos.
La información o los datos que manejan las aplicaciones normalmente se almacenan en una base de datos. Existen dos grandes tipos:
- Relacionales
- MySQL
- MariaDB
- SQLite
- No relacionales
- MongoDB
- CouchDB
Front End
El Front-End es la parte que aparece al usuario en pantalla: la parte visual de una aplicación o proyecto web. Antiguamente se limitaba a maquetar un sitio con HTML, añadir estilos con CSS y sumar alguna animación o efecto con JavaScript. Pero eso cambió hace tiempo: hoy existen aplicaciones web que funcionan enteramente en el navegador y reciben datos desde una API en formato JSON a través de AJAX o WebSockets.
Las tecnologías que operan en esta parte son:
- HTML5, que aporta semántica al contenido y estructura la información
- CSS3, que maqueta la información y define el diseño
- JavaScript, que permite la programación en cliente, la conexión con el servidor, el manejo del DOM y la interacción
Por supuesto, también existen muchas herramientas para el Front-End:
- Frameworks CSS
- Preprocesadores de CSS (compilan código a CSS)
- Stylus
- Less
- Sass
- Preprocesadores de JS (convierten código a JavaScript)
- Dart
- Frameworks y librerías JS
- jQuery
- Ember.js
- Sistemas de plantillas
- Mustache
- Swig
- EJS
Diseño, experiencia de usuario y usabilidad (UI/UX)
Con el avance del Front-End, el diseño y la interacción con los usuarios se han convertido en una especialidad propia. En esta parte se trabajan aspectos como:
- Diseño de interfaces
- Diseño de flujos de trabajo
- Usabilidad
- UX o experiencia de usuario
Arquitectura de la información
El contenido en la web actual no es estático. En gran parte está generado por los propios usuarios y, además, estos interactúan entre sí. Por eso hay que saber estructurarlo, redactarlo y presentarlo correctamente.
Aquí entran en juego el SEO (Search Engine Optimization), la estrategia digital del proyecto o de la marca —como el Inbound Marketing o el Outbound Marketing— y también el Social Media.
En definitiva, estas son algunas de las áreas y roles más importantes que intervienen hoy en un proyecto web. Lo recomendable es especializarse en aquello que más te guste, pero sin perder una visión global del conjunto.
Herramientas para programar
Voy a exponer algunas de las herramientas que utilizo como desarrollador web y que me facilitan bastante la productividad.
- Editor de texto: Sublime Text 2. Multiplataforma, escrito en Python, muy rápido y ligero. Tiene numerosos paquetes y funcionalidades que lo convierten en una gran opción. Es cierto que si programas en Objective-C puede resultarte más útil Xcode, y si desarrollas para Android quizá te convenga otro entorno, pero para desarrollo web me ha parecido durante mucho tiempo una herramienta excelente.
- Cliente FTP: Cyberduck, para Mac. Tiene una interfaz agradable y permite conexiones SFTP con archivos de clave secreta. Muy útil si quieres acceder a servidores en AWS.
- Navegador web: Google Chrome. Es mi navegador por defecto. Hace tiempo usaba Firefox por su consola Firebug para depurar, pero con Chrome también se puede hacer muy bien gracias a sus herramientas y extensiones.
- Servidor web local: XAMPP. Multiplataforma, ideal para montar un servidor Apache + PHP + MySQL local en pocos minutos. Incluye phpMyAdmin para gestionar la base de datos. Si tu proyecto utiliza alguna de estas tecnologías, merece la pena.
- Comunicación:
- Skype, para conversaciones con una sola persona, sobre todo en trabajos freelance con clientes extranjeros
- Hangouts, cuando participaban varias personas y era necesario compartir pantalla
- Gestor de tareas: Trello. Básico, simple y muy útil. Además, funciona bien en distintos dispositivos.
- Repositorios y control de versiones:
- GitHub, para proyectos open source o colaborativos. Como cliente de escritorio, antes utilicé GitHub for Mac
- Bitbucket, útil para proyectos privados. Como cliente de escritorio, Sourcetree
- Tratamiento de imágenes: Photoshop CS6
- Manejo de archivos:
- Dropbox, genial para compartir documentos e imágenes entre miembros del equipo
- Google Drive, perfecto para guardar ideas, escribir documentación y modificar documentos en línea con otras personas. Así te olvidas de tener múltiples versiones repartidas por distintos equipos.
- Diseño de mockups y wireframes: Moqups, una herramienta muy cómoda para crear mockups de forma rápida y sencilla, además de integrarse bien con Google Drive.
- Virtualización: Parallels 8. De pago, pero con muy buen funcionamiento en Mac. Suelo tener alguna distribución Linux como Ubuntu y alguna copia de Windows para hacer pruebas concretas.
¿Para qué programar?
Cuando no estoy trabajando en la oficina o haciendo encargos freelance, me gusta trastear con otras tecnologías y lenguajes que no suelo utilizar. Voy a exponer algunos motivos por los que desarrollar proyectos propios puede acabar siendo rentable en muchos aspectos.
Es divertido
No hay nada como poder trabajar para uno mismo. Tú planificas tus horarios, nadie te supervisa, creas algo a tu gusto y decides qué detalles son importantes y cuáles no. Es una buena manera de ponerte a prueba y conocer nuevas áreas.
Aprendes
¿Cuál es la mejor forma de aprender una tecnología nueva como Node? ¿O de usar una base de datos que nunca has tocado? En un proyecto tradicional no siempre vas a tener ese margen. Prueba a hacer un “hola mundo” en un lenguaje que no conozcas, después amplíalo, descubre qué puedes hacer con esa plataforma, lee documentación y experimenta. En definitiva: juega.
Ganas experiencia
Imagina que, después de haber hecho un pequeño proyecto en un lenguaje que hace unos meses ni conocías, aparece una oferta de trabajo —ya sea freelance o por cuenta ajena—. Ya tienes el primer paso dado. Sin apenas darte cuenta has ganado experiencia. Puede que aún no seas experto, pero con el tiempo mejorarás.
Amplías portafolio
Hoy en día da igual que tengas dos carreras, tres másteres y cuarenta certificados. Incluso me atrevería a decir que, dentro de un tiempo, ni siquiera importará tanto haber trabajado X años en una empresa si no puedes enseñar nada. Cada vez pesa más lo que has hecho o sabes hacer que lo que has estudiado. La gente quiere ver algo real para comprobar si eres la persona que necesita.
Si haces diseño, súbelo a Dribbble. Si haces código, súbelo a GitHub. Estos portales son hoy tanto o más importantes que un buen perfil en LinkedIn.
Esa fue una de las razones por las que me decidí a desarrollar TotalStats. No teníamos un modelo de negocio definido ni esperábamos ganar dinero de inmediato. Después de un tiempo trabajando para empresas o clientes privados, acabas teniendo trabajos que no puedes enseñar por contrato u otras razones, y un proyecto propio te permite ampliar tu portafolio.
Consigues clientes o trabajo
Cuando te inscribes en una oferta o te contacta alguien y te pide un portafolio, ya tienes algo que enseñar y, además, completamente tuyo. Es una forma de demostrar tanto tus conocimientos técnicos como tus habilidades. Has invertido tiempo en desarrollar tu proyecto, sí, pero esa inversión puede terminar amortizándose con una buena oportunidad posterior.
Por eso os animo a invertir parte de vuestro tiempo libre en aprender cosas nuevas y en desarrollar pequeños proyectos propios. Nunca se sabe quién puede estar al otro lado viendo tu trabajo.