Guia para desarrollo de aplicaciónes web

25/Sep/2018 desarrollo web

Una aplicación web, es simplemente una pagina web, pero dinámica. Tiene dos componentes básicos: El front-end que es el código HTML+CSS y JS que se ejecuta completamente en el navegador o cliente. Y el back-end que se ejecuta en un servidor, usualmente involucra php, python, java, node.js o algún otro lenguaje de programación y una base de datos como mysql.

En algunas aplicaciones modernas el back-end puede no estar presente, por ejemplo se utiliza únicamente servicios web o restful para actualizar o consultar información o simplemente la información se almacena de forma local.

Front-end

Desarrollo web - frontend

Esta es toda la parte visual, las pantallas, efectos visuales y todo el diseño con el que interactúan las personas.

Para crear el front-end debes estar familiarizado con HTML, CSS y JS. Un requisito fundamental es contar con un editor de textos especializado en desarrollo web, cómo atom. También puedes utilizar frameworks o librerías para facilitar la creación del código html+css y js, entre los más utilizados están:

  • Bootstrap: Permite crear rápidamente páginas web usando bloques de HTML y CSS con algunas funcionalidades programadas en js como galerías de imágenes.
  • Jquery: Permite manipular fácilmente los elementos de una pagina web y hacerla más interactiva.

Back-end

Desarrollo web - backend

Usualmente aqui hay mucha de la lógica de la aplicación, se decide cómo guardar los datos, consultarlos y procesarlos.

Aqui esta todo el código que se ejecuta en el servidor, incluyendo la base de datos que usualmente es MySQL. Los lenguajes de programación más comunes son PHP, Python, Java y Node.js, pero comúnmente se usa un framework para acelerar el proceso, algunos de los framework más comunes son:

  • Para PHP: Symfony o Laravel
  • Para Python: django
  • Para Node.js: Express.js o Meteor

También existen otras opciones basadas en node.js como Angular desarrollado por Google y que está tomando mucha fuerza.

Librerias

Son un conjunto de funciones, rutinas y/o clases de uso común, que pueden ser agregadas y reutilizadas en varios proyectos de desarrollo. Cuando desarrollamos una aplicación podemos hacer uso de varias librerías.

Frameworks

Los frameworks son un conjunto de librerías y herramientas que funcionan como el esqueleto o base de la aplicación, su uso reduce mucho el tiempo de desarrollo. Por lo general no pueden o deben combinarse, por ejemplo si usamos bootstrap como framework html-css no podemos utilizar uno diferente en el mismo proyecto, por ejemplo nadie mezcla Laravel y Symfony en el mismo proyecto (ambos son frameworks para desarrollo de aplicaciones basadas en PHP) .

Sin embargo si es posible y común utilizar un framework y al mismo tiempo agregar otras librerías para ciertas tareas que no están incluidas en el framework.

Estándares de desarrollo

Cuando se trabaja en proyectos grandes, no importa si hay un solo programador o muchos programadores, es importante definir estándares de desarrollo como la forma en que se nombra a las variables, funciones, etc, la estructura de archivos, comentarios y otras. Aquí hay un ejemplo.

Esto es importante, para facilitar a todos los programadores involucrados en este momento o en el futuro, el poder comprender el código y hacer modificaciones y correcciones en él.

Resumen del proceso de desarrollo

No hay una regla específica de cómo debe ser el proceso para desarrollar una aplicación web y no hay una receta mágica, a continuación voy a mostrarte una lista de actividades que es bueno seguir, sin embargo tu puedes agregar u omitir las actividades que desees.

  • Definir un roadmap: Aquí se definen las funcionalidades o características que tendrá tu aplicación y sus posibles fechas de lanzamiento. Cuando creas una aplicación no la estrenas con todo lo que se te viene a la cabeza, es mejor lanzar una versión básica y con el tiempo enriquecerla más y más.
  • Elegir los lenguajes de programacion, frameworks y librerías: Dependiendo del programa que desees desarrollar debes evaluar y decidirte por algún lenguaje de programación y luego por algún framework que te permite cumplir tus objetivos. Aquí debes pensar que tan importante es para ti que tu aplicación sea muy rápida, o que tan rapido deseas desarrollarla.
  • Desarrollo de prototipos: Un prototipo te permite probar y afinar tus ideas, sin utilizar demasiado esfuerzo de programación. Aquí vas a desarrollar y versión muy básica, sin bases de datos, validaciones, etc, que permita a otras personas comprender y probar la aplicación.
  • Desarrollos de diseños o artes: Ahora que has afinado tu prototipo, es hora de hacer que se vea bien, para esto vas a necesitar de un diseñador gráfico que diseñe tus pantallas: Colores, tipo de letra, tamaños, imágenes, etc.
  • Diseño de la base de datos: La mayoría de las aplicaciones necesitan almacenar y consultar información, para esto se necesita de una base de datos, la cual debe de ser diseñada para que tu aplicación pueda guardar y consultar toda la información que necesite.
  • Desarrollo del programa y pruebas unitarias: Esta es la etapa más larga, aquí se realiza toda la programación de la aplicación, pero si se hicieron bien las etapas anteriores, esto será más sencillo.
  • Pruebas y correcciones: Somos humanos y nos equivocamos, por eso es necesario que el programa sea probado durante un tiempo, y se corrijan todas los errores encontrados. Estas pruebas deben realizarse tratando de hacer que la aplicación falle. El trabajo de esta persona es encontrar errores y hacer que la aplicación falle.
  • Mantenimiento: Aquí se agregan las nuevas funcionalidades que se requieran y que están en el roadmap como pendientes, también se corrigen algunos errores que no hayan sido detectados en la fase de pruebas.

Conclusiones

Esta es una guía muy general de lo que involucra el desarrollo de una aplicación web. Debes saber que no hay una receta única, puedes hacerlo todo de forma diferente y no seguir estos pasos, todo depende de tu experiencia y de cada caso en particular. Espero que te haya servido y si tienes algún comentario, por favor escribelo aqui abajo.



Ir a la barra de herramientas