Módulo 1 / Semana 4

Actividad 1.


Descripción

El participante diseñará y desarrollará un website dinámico que usa una base de datos MySQL y PHP como conector. Como plantilla de diseño se usará Bootstrap, además el diseño gráfico y ambiente lo diseñará también el participante.

Objetivo

Diseñar y desarrollar un website dinámico que usa una base de datos MySQL y PHP como conector.

En este proyecto desarrollarás habilidades de programación con PHP, CSS y Javascript, a la vez de pulir un poco más el  conocimiento de HTML que ya tienes. Tu proyecto final consiste en el desarrollo de un website dinámico, para el cual tendrás dos alternativas:

1. Puedes acudir con un cliente real a quien le ofrecerás el desarrollo de un sitio web dinámico que cumplan con sus necesidades especiales.
2. Si no tienes la oportunidad de trabajar con un cliente, puedes proponer el proyecto por tu cuenta, siempre y cuando cumplas con los requerimientos establecidos.

Independientemente de cuál opción elijas, los requerimientos obligatorios que debe cumplir el sitio son:

  • Debe de tener una conexión con una base de datos por medio de MySQL y PHP, de manera que gran parte del contenido sea extraído de dicha base de datos.
  • Debes usar Bootstrap como estructura de tu website, de manera que puedas usar su CSS para poder crear un sitio responsivo.
  • Debes de crear por lo menos dos interacciones con el usuario por medio de Javascript, ya sea personalizar la página, hacer alguna dinámica con las imágenes, generar algún menú, etc.
  • El website debe tener por lo menos tres animaciones en distintos elementos del documento por medio de CSS o Javascript.
  • Son tres animaciones a tres elementos distintos, por ejemplo, si aplicas una animación sobre los botones del menú solo cuenta como una animación.
  • El website debe tener por lo menos cinco secciones.
  • Debe tener imágenes responsivas.
  • Debe tener texto suficiente y bien redactado.
  • Finalmente, el diseño que se aplique debe permitir al usuario encontrar la información de manera sencilla, leer el contenido con claridad y navegar a través de las secciones sin perderse.

Eres libre de usar técnicas que no hayas aprendido en el curso, pero que consideres agreguen valor al proyecto final.

Documentación del proyecto.

Tu proyecto debe contener:

  • Diseño de brief
    • ¿De qué se trata mi proyecto?
    • ¿Cuál es el fin?
    • Textos clave, logotipos y conceptos de diseño del cliente.
  • Benchmark de sitios similares
    • Análisis de por lo menos tres websites similares al de tu proyecto.
  • Mapa de sitio
    • Diagrama que muestre las interacciones entre las páginas.
  • Esquemas o sketches de diseño.
    • Empieza con lápiz y papel.
    • Pasa tus sketches a digital (Photoshop, Illustrator, etc).
    • Documenta las fuentes que vas a usar al igual que la paleta de colores.
  1. Crea la documentación de un sitio web.
    a. Diseña un brief. 9 %
    b. Realiza el análisis de por lo menos tres websites similares al proyecto. 9 %
    c. Realiza un diagrama que muestra las interacciones entre páginas (mapa de sitio). 9 %
    d. Presenta esquemas o sketches de diseño en digital. 9%
    e. Presenta fuentes y una paleta de colores establecida. 8 %

  2. Desarrolla e instala el sitio web. 
    f. Incluye una conexión con una base de datos por medio de MySQL y PHP, de manera que gran parte del contenido sea extraído de dicha base de datos. 10 %
    g. Utiliza Bootstrap como estructura del sitio, de modo que éste sea responsivo. 10%
    h. Incluye por lo menos dos interacciones con el usuario por medio de Javascript. 10 %
    i. Incluye por lo menos tres animaciones en distintos elementos del sitio. 10 %
    j. Incluye por lo menos tres secciones. 10 %
    k. Documentación que avala que el website cumple con los requerimientos planteados al principio del proyecto. 6%
  • Documentación del sitio web.
  • Desarrollo e instalación del sitio web.