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:
- 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.
- 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 cual 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.
Primer avance
En el primer avance de la evidencia debes entregar:
- 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.
En las primeras cuatro actividades del curso trabajarás los elementos que se piden en el primer avance de la evidencia. Aprovecha ese tiempo para pulir tu trabajo.
Criterios de evaluación
|
Criterio de evaluación |
Valor |
Incluye de qué se tratará el proyecto, cuál es el fin, así como los textos clave, logotipos y conceptos de diseño a usar. |
25 |
Analiza por lo menos tres sitios web similares al proyecto. |
25 |
Incluye diagrama que muestra las intersecciones entre las páginas del proyecto así como el índice del mismo. |
25 |
Muestra de manera digital cómo se verá el sitio, además incluye la paleta de colores a usar. |
25 |
Segundo avance
- Estructura del sitio en XAMPP (estructura de carpetas e información).
- Usa tus conocimientos de organización para crear un sistema que te permita administrar tus archivos de manera efectiva.
- Documentación del proyecto y esquemas finales del website.
- La documentación del proyecto debe contener el brief de diseño, el benchmark y su respectivo análisis, el proceso de diseño gráfico de lápiz a digital, manual del website (qué fuentes usar y dónde, qué colores utilizar, si las imágenes deben estar en algún formato o tamaño especial, memorias de accesos, etc.).
- Documentos de acceso y back-up.
- Memorias de acceso, el documento que contiene todos los accesos para entrar a la base de datos, el FTP, etc.
- Selección de paleta de color y tipografías.
- Estructura de las plantillas principales.
- El esqueleto del website, en el cual se puede identificar las secciones que se usan.
- Deben estar todas las plantillas que se usaron.
Criterios de evaluación
|
Criterio de evaluación |
Valor |
Se estructura la información y las carpetas en XAMPP. |
20 |
Existe una documentación con el brief de diseño, el benchmark entregado previamente y el manual del sitio. |
20 |
Incluye memorias de acceso, el documento que contiene todos los accesos para entrar a la base de datos, el FTP. |
20 |
Determina definitivamente cuál paleta de colores y tipografía se usa en el sitio. |
20 |
Se muestra el esqueleto del website. |
20 |
Entrega final
- El website proyectado debe estar instalado en un servidor (local o externo), funcionando y con las características que se marcaron al principio del proyecto.
- Entrega la documentación que avala que el website cumple con los requerimientos planteados al principio del proyecto.
La documentación incluye:
- Documentación del proyecto entregada en el primer avance
- Brief (del cliente o propio)
- Benchmark
- Proceso de diseño gráfico
- Manual del website
- Memorias de acceso
