Proyecto 6: Proyecto Integrado: Arte 2D y Desarrollo Web Responsive

1. Objetivos

Conocer los derechos de la propiedad intelectual, licencias y legislación sobre derechos de autor.
Reconocer y utilizar los diferentes tipos de imágenes en la web: mapa de bits e imagen vectorial.
Aplicar software para la creación y procesamiento de imágenes, exportando a diferentes formatos.
Optimizar imágenes para su uso en la web.
Identificar y usar formatos de audio y vídeo, realizando conversiones y optimización para su uso en la web.
Diseñar y ejecutar un sitio web responsive de una sola página.
Aplicar un workflow de desarrollo frontend moderno, diferenciando entornos de desarrollo y producción.
Implementar un boilerplate que permita escribir código moderno y transformarlo para navegadores antiguos.
Agregar elementos interactivos y multimedia a proyectos web.
Verificar el correcto funcionamiento de los elementos multimedia en distintos navegadores.

2. Resultados de aprendizaje y criterios de evaluación

RA2: Crea interfaces Web homogéneos definiendo y aplicando estilos.

CE. i )Se han analizado y utilizado tecnologías y frameworks para la creación de interfaces web con un diseño responsive.

RA3: Prepara archivos multimedia para la Web, analizando sus características y manejando herramientas específicas.

CE. a) Se han reconocido las implicaciones de las licencias y los derechos de autor en el uso de material multimedia.
CE. b) Se han identificado los formatos de imagen, audio y vídeo a utilizar.
CE. c) Se han analizado las herramientas disponibles para generar contenido multimedia.
CE. d) Se han empleado herramientas para el tratamiento digital de la imagen.
CE. e) Se han utilizado herramientas para manipular audio y vídeo.
CE. f) Se han importado y exportado imágenes, audio y vídeo en diversos formatos según su finalidad.

RA4: Integra contenido multimedia en documentos web valorando su aportación y seleccionando adecuadamente los elementos interactivos.

CE. a) Se han reconocido y analizado las tecnologías relacionadas con la inclusión de contenido multimedia e interactivo.
CE. b) Se han identificado las necesidades específicas de configuración de los navegadores web para soportar contenido multimedia e interactivo.
CE. c) Se han utilizado herramientas gráficas para el desarrollo de contenido multimedia interactivo.
CE. d) Se ha analizado el código generado por las herramientas de desarrollo de contenido interactivo.
CE. e) Se han agregado elementos multimedia a documentos web.
CE. f) Se ha añadido interactividad a elementos de un documento web.
CE. g) Se ha verificado el funcionamiento de los elementos multimedia e interactivos en distintos navegadores y dispositivos.

3. Prueba de Evaluación

Fase 1: Proyecto Arte 2D

Desde el departamento gráfico se solicita elaborar una propuesta para un videojuego 2D. El proyecto se desarrollará de forma individual, siguiendo las siguientes directrices:

Elegir una temática de videojuego con un mismo estilo artístico.
Definir de que va a tratar el juego, historía y personajes.
Crear un escenario compuesto por dos partes unidas como una imagen de mapa de bits o imagen vectorial.
Diseñar al menos un personaje imagen vectorial o mapa de bits y un logotipo.
Como alternativa, se podrá realizar a modo de Concept Art del videojuego utilizando técnicas de ilustración digital o un collage artístico combinando elementos gráficos y texturas.
Crear un tráiler del videojuego, combinando imágenes, audio y vídeo para transmitir la esencia del juego. Se deben seleccionar y editar clips de vídeo, agregar efectos y transiciones, incluir una banda sonora adecuada y exportar el resultado en distintos formatos optimizados para web.
Elaborar un informe con una tabla detallada que incluya:
- Imágenes utilizadas: tipo de licencia, formato original, fuente, formato de salida para web e impresión, software de edición.
- Audios y vídeos: formato original, formatos de salida, códec utilizado y licencia.

Entrega:

Documento con el informe completo.
Enlace al repositorio de GitHub.
Archivos generados necesarios para la justificación. (también los editables)

Fase 2: Desarrollo Web - Portfolio Videojuegos 2D

Se debe diseñar una one-page responsive para la presentación del videojuego 2D creado en la fase anterior, cumpliendo con los siguientes requisitos:

Compatible con los navegadores con soporte en las últimas 3 versiones y que su uso a nivel mundial sea superior al 0,3%.
Incluir elementos interactivos para la presentación de la información, como animaciones, efectos visuales, secciones dinámicas, carruseles de imágenes, transiciones de contenido, desplazamientos parallax y efectos de desplazamiento.
Opcionalmente, se podrá utilizar Three.js para incorporar efectos tridimensionales interactivos.
Incorporar audio y vídeo optimizados en varios formatos.
Implementar imágenes responsive con técnicas de escalado y dirección de arte.
Integrar el logotipo y todos los recursos generados en el proyecto Arte 2D.
Aplicar un workflow de desarrollo frontend moderno con diferenciación entre entornos de desarrollo y producción.
Hay que utilizar un framework de CSS.

Formato de entrega: La entrega debe incluir un repositorio en GitHub con la siguiente estructura de carpetas y archivos:

dist/ -> Compilado para producción con npm run build
src/ -> Código fuente en desarrollo
package.json -> Dependencias instaladas

Cualquier entrega que contenga la carpeta node_modules u otros archivos no especificados será rechazada.

4. Propiedad intelectual y plagio

El uso de recursos de terceros está permitido siempre que:

Se documente claramente su origen, nombre del autor, fuente y licencia.
Se respete la normativa de derechos de autor y licencias (Creative Commons, GPL, etc.).
Se adjunten los archivos originales y su código fuente si corresponde.

El plagio no será tolerado. Las pruebas de evaluación deben ser individuales, salvo indicación expresa en el enunciado. En caso de detectar actividades plagiadas, todas serán calificadas con 0.

5.Entrega Final

Debéis entregar en un repositorío de GitHub (el mismo del proyecto de MERN):

Al finalizar todas las fases, cada estudiante o equipo deberá entregar: 1. El informe final documentado con todas las fases descritas. 2. El repositorio de GitHub con el proyecto y todos los archivos necesarios.

¡Ánimo! 🖖

6. Evaluación.

RA3: Prepara archivos multimedia para la Web, analizando sus características y manejando herramientas específicas.

Criterios de evaluación y niveles de desempeño

Criterio de evaluación (CE)	10 - Excelente	7,5 - Notable	5 - Suficiente	2,5 - Insuficiente	0 - No evaluable
3a. Se han reconocido las implicaciones de las licencias y los derechos de autor en el uso de material multimedia.	Explica en detalle los diferentes tipos de licencias (Creative Commons, Copyright, etc.) y aplica correctamente sus restricciones en proyectos reales.	Explica correctamente los diferentes tipos de licencias y aplica algunas restricciones en los proyectos.	Identifica los tipos de licencias de forma general, pero con errores o sin aplicarlas correctamente.	Muestra un conocimiento superficial sobre licencias, sin aplicarlas adecuadamente en proyectos.	No asiste o no es evaluable.
3b. Se han identificado los formatos de imagen, audio y vídeo a utilizar.	Analiza y justifica detalladamente la elección de formatos según el contexto y las necesidades de calidad y rendimiento.	Explica y selecciona correctamente los formatos adecuados, justificando en términos generales.	Selecciona formatos adecuados, pero sin justificar correctamente su elección.	Muestra desconocimiento sobre los formatos o elige inadecuadamente sin justificar.	No asiste o no es evaluable.
3c. Se han analizado las herramientas disponibles para generar contenido multimedia.	Compara y evalúa varias herramientas (Photoshop, Audacity, Premiere, etc.), justificando su elección según la tarea a realizar.	Identifica y utiliza herramientas adecuadas, explicando sus funcionalidades básicas.	Utiliza herramientas básicas sin justificar su elección o sin explorar funcionalidades avanzadas.	Usa herramientas de forma incorrecta o inapropiada para la tarea.	No asiste o no es evaluable.
3d. Se han empleado herramientas para el tratamiento digital de la imagen.	Edita imágenes con un alto nivel de detalle, aplicando técnicas avanzadas de retoque, optimización y formatos adecuados.	Realiza ediciones correctas de imágenes con herramientas adecuadas, aplicando mejoras visibles.	Aplica modificaciones básicas en imágenes sin optimización avanzada.	Realiza modificaciones mínimas sin mejorar la calidad de la imagen.	No asiste o no es evaluable.
3e. Se han utilizado herramientas para manipular audio y vídeo.	Edita y optimiza audio y vídeo con herramientas avanzadas, aplicando efectos y configuraciones adecuadas a cada formato.	Manipula correctamente audio y vídeo aplicando ediciones básicas.	Realiza modificaciones mínimas en audio y vídeo, sin optimización o efectos avanzados.	No demuestra habilidades en la edición de audio y vídeo.	No asiste o no es evaluable.
3a. Se han importado y exportado imágenes, audio y vídeo en diversos formatos según su finalidad.	Exporta en formatos optimizados para diferentes usos (web, impresión, streaming), justificando sus decisiones.	Exporta correctamente en formatos adecuados según la finalidad prevista.	Exporta en formatos adecuados, pero sin optimización ni justificación.	Exporta en formatos incorrectos o con errores evidentes.	No asiste o no es evaluable.

RA4: Integra contenido multimedia en documentos web valorando su aportación y seleccionando adecuadamente los elementos interactivos.

Criterios de evaluación y niveles de desempeño

Criterio de evaluación (CE)	10 - Excelente	7,5 - Notable	5 - Suficiente	2,5 - Insuficiente	0 - No evaluable
4a. Se han reconocido y analizado las tecnologías relacionadas con la inclusión de contenido multimedia e interactivo.	Explica con detalle las tecnologías HTML5, CSS3, JavaScript y librerías específicas para multimedia, comparando sus ventajas y limitaciones.	Explica correctamente las tecnologías multimedia e interactivas y sus usos principales.	Muestra un conocimiento básico sobre las tecnologías multimedia, pero sin profundizar en su aplicación.	Muestra un conocimiento superficial sobre tecnologías multimedia, sin comprender su integración en documentos web.	No asiste o no es evaluable.
4b. Se han identificado las necesidades específicas de configuración de los navegadores web para soportar contenido multimedia e interactivo.	Configura y prueba correctamente los ajustes necesarios en navegadores y dispositivos, asegurando compatibilidad.	Explica y configura ajustes básicos en navegadores para soportar contenido multimedia.	Identifica algunos ajustes necesarios en navegadores, pero sin aplicarlos correctamente.	Desconoce las configuraciones necesarias o no las aplica correctamente.	No asiste o no es evaluable.
4e. Se han agregado elementos multimedia a documentos web.	Integra multimedia en documentos web aplicando técnicas avanzadas de carga y optimización.	Agrega multimedia correctamente en documentos web, asegurando su correcto funcionamiento.	Agrega multimedia en documentos web, pero sin optimización ni configuraciones adecuadas.	Integra multimedia de manera incorrecta, causando errores en la visualización.	No asiste o no es evaluable.
4f. Se ha añadido interactividad a elementos de un documento web.	Aplica interactividad avanzada con JavaScript y librerías especializadas, asegurando un funcionamiento fluido y accesible.	Agrega interactividad funcional mediante JavaScript o herramientas gráficas.	Aplica interactividad básica, con errores o limitaciones en su implementación.	No implementa interactividad correctamente o no logra que funcione.	No asiste o no es evaluable.
4g. Se ha verificado el funcionamiento de los elementos multimedia e interactivos en distintos navegadores y dispositivos.	Realiza pruebas exhaustivas en varios navegadores y dispositivos, documentando resultados y proponiendo mejoras.	Prueba el contenido en varios navegadores y dispositivos, asegurando funcionalidad.	Verifica la funcionalidad en algunos navegadores, pero sin pruebas exhaustivas.	No realiza pruebas suficientes o documenta resultados incorrectos.	No asiste o no es evaluable.