Hacer un proyecto web

Ideas, Conceptos y Evaluación

Aquí encontrarás propuestas genéricas de sitios web que te servirán de referencia para probar diferentes tecnologías web:

Propuestas para Proyectos Web

Los conceptos necesarios para implementar un proyecto web los puedes ver en:

  1. Interfaz web (DIW - Diseño de Interfaces Web)

    1. Desarrollo web estático (HTML)

    2. Estilos (CSS)

  2. Desarrollo Cliente (DWeC - Desarrollo Web en Entorno Cliente):

    1. Dinámicas: Javascript

    2. Multimedia: Imágenes, Audio, Video y Animaciones

  3. Desarrollo Servidor (DWeS - Desarrollo Web en Entorno Servidor)

    1. Dinámicas: PHP

    2. Persistencia de Datos

    3. Servicios Web

La evaluación de un proyecto se podría hacer siguiendo la siguiente propuesta:

Evaluación de un Proyecto Web

Nivel de Complejidad

Esta propuesta de proyectos web está pensada para ir trabajando de forma secuencial los diferentes niveles de una aplicación web:

  1. Un sitio web estático con cierto dinamismo con JS. El servidor sólo recibe datos y hace cálculos básicos. No hay persistencia de datos ni sesión HTTP.

  2. Añades una relación entre cliente y servidor más directa, usando programación asíncrona, control de estado (sesiones o cookies) y almacenes de datos sencillos (JSON / XML / CSV)

  3. Añades análisis en tus datos, integrando un SGDB en tu aplicación. Además puedes consultar e integrar APIs externas.

No puedes utilizar ningún tipo de framework o librería externa. Lo que estamos trabajando son las tecnologías base.

Son tres niveles de complejidad sucesiva.

Nivel 1. Sitio web Dinámico

  1. Tienes varios documentos web y recursos (estilos, scripts, multimedia) bien organizados y enlazados entre sí

  2. Tienes una (o las que quieras) hoja de estilos, para separar contenido de diseño

  3. Tienes una (o más) librerías de funciones JS y uno (o más) programas principales. Separas programación de contenido y diseño

  4. La aplicación web cliente es sobre un formulario, manejando validación y valores recibidos

  5. La aplicación web servidor trabaja mostrando los valores del formulario y validando los datos.

  6. Usas el modelo de eventos y API Web DOM (y nada más)

Nivel 2. Aplicación Web con integración C/S

  1. Añades a tu sitio web algún tipo de programación asíncrona

  2. Usas archivos (JSON / XML o similar) para añadir persistencia a tus datos

  3. Usas sesiones o cookies para añadir persistencia a tu conexión HTTP

  4. Usas el modelo de eventos, el API DOM y otras Web APIs

  5. Añadirás una pequeña documentación (varios archivos, con imágenes e índice) de la aplicación (en el directorio /docs) que estará hecha con sphinx.

Nivel 3. Aplicación Web completa

  1. Añades conexión y consulta con bases de datos

  2. Usas APIS avanzadas del navegador

  3. Usas APIS externas según tus necesidades

  4. Generas tus propias APIs

  5. Añades recursos multimedia integrados (audio, video e imágenes)

Para enviar tu proyecto web lo ideal es usar un sistema de control de versiones, es decir enviar el url público de tu código fuente. La otra opción es enviar por correo tu proyecto web empaquetado y comprimido (en formato zip, que es estándar).

Tener un plan

El nivel de desarrollo del sitio web depende mucho de tu formación, experiencia y sobre todo, del tiempo disponible. Si sabes de cuantas horas estás hablando, sabrás de cuánto dinero estamos hablando (que al final importa). Para determinar el alcance de tu proyecto no empieces antes de saber el número de horas disponibles.

Para un sitio web básico podrías pensar en estos pasos (más o menos):

  1. Piensas antes de hacer. Es ideal hacerlo en papel y un pequeño mapa mental (esquema del sitio web)

  2. Empiezas con el contenido HTML.

  3. Añades Recursos Multimedia (URLs externos o Recursos Locales)

  4. Añades estilo (CSS) y diseño (maquetación)

  5. Añades programación cliente (JS)

    1. Usando Formularios (o botones)

    2. Usando Eventos y DOM

    3. Usando programación asíncrona y APIs

  6. Añades programación servidor (PHP o puede ser otro):

    1. Programación

    2. Servicios (APIs internas o externas)

    3. Acceso a Datos (en Archivos o BD)

Lo de la dedicación al proyecto es difícil de prever. Yo estimaría al menos una dedicación mínima estimada (ojo que depende de la complejidad) de 2 horas por paso para tener lo antes posible un prototipo (un producto mínimo viable le vamos a llamar). Luego ya, según el tiempo que le dediques, lo irás mejorando (cuanto más le dediques, mejor va a quedar, y obviamente más va a costar).

Lo ideal es tener un PMV (prototipo mínimo viable) o POC (Proof Of Concept) lo antes posible. Mejor menos cosas, pero mejor hechas.

Algunos hitos importantes de tu proyecto podrían ser:

  1. Tener un plan sencillo. Ideal en papel. Planificar el proyecto no te debe llevar más del 10% del total

  2. PMV (Prototipo Mínimo Viable). Desarrollar la aplicación mínima que te permita ir añadiendo funcionalidad. Ideal tener un PMV antes del 50% del avance del proyecto

  3. Repetir hasta tener un producto final que puedas presentar. En el caso del servidor, si no tienes un servidor público revisaré simplemente el código (o lo ejecuto en mi entorno de desarrollo).

Es decir, en un proyecto tipo de 30h, podrías pensar que:

  1. No más de 3 h «pensando» en el proyecto. Pero la hora 1 desde luego tiene que ser de planificación

  2. Tener un PMV antes de la hora 15. Ojo que implica que investigues el tema, que tengas toda la estructura web, el diseño, los formularios y la arquitectura de la aplicación

  3. Y con las 15 horas que te quedan puedes repetir lo mismo pero en bloques más pequeños. Por ejemplo te daría para 3 bloques de 5 horas.

Esto es una teoría muy genérica (basada en sprints) pero que te pueden ayudar a empezar.