Diseño y Desarrollo de Videojuegos Web - Guía Docente Planificación de la Docencia Universitaria Grado en Diseño y Desarrollo de Videojuegos ...
←
→
Transcripción del contenido de la página
Si su navegador no muestra la página correctamente, lea el contenido de la página a continuación
Planificación de la Docencia Universitaria
Grado en Diseño y Desarrollo de Videojuegos
Guía Docente
Curso Académico 2021/2022
Diseño y
Desarrollo de
Videojuegos Web
esne.esDatos de Identificación de la asignatura
Título Tipo de asignatura (básica,
Grado en Diseño y Desarrollo de obligatoria u optativa)
Videojuegos Obligatoria
Módulo Créditos ECTS
Diseño 8
Denominación de la Asignatura Modalidad/es de enseñanza
Diseño y Desarrollo de Videojuegos Presencial
Web
Profesor
Código Renato Seixas, Sergio Suárez
40017 Martín, David Alonso Urbano
Curso Lengua vehicular
Segundo Español
Semestre
Anual
Profesorado de la asignatura
Profesor david.alonso@esne.es
Renato Seixas, Sergio Suárez
Martín, David Alonso Urbano Tutorías Académicas
Consultar en el Campus Virtual el
Datos de Contacto documento "Horarios de Tutorías -
renato.seixas@esne.es Grado en Diseño y Desarrollo de
sergio.suarez@esne.es Videojuegos".
esne.esRequisitos previos
Esenciales
Haber adquirido los conocimientos básicos relacionados con las asignaturas de
Fundamentos de la Programación, Programación II y Fundamentos de las Bases
de Datos.
Aconsejables
Los propios del título.
Sentido y aportaciones de la asignatura al plan
de estudios
Campo de conocimiento al que pertenece la asignatura
Esta asignatura pertenece a la rama de Ingeniería y Arquitectura y es una materia
de Expresión Gráfica e Informática.
Relación de interdisciplinariedad con otras asignaturas del currículum
En el desarrollo de una aplicación web intervienen factores artísticos (teoría del
color, psicología de la percepción, tipografía, maquetación, fotografía,
animaciones) y tecnológicos (lenguajes de programación, frameworks de
desarrollo, arquitecturas y patrones software como el modelo cliente – servidor o el
modelo vista-controlador, gestión y conexión con bases de datos, etc.), por lo que
la interdisciplinariedad de esta asignatura se puede enfocar desde esas dos
perspectivas.
Desde el punto de vista artístico, asignaturas como Introducción al Proceso
Creativo o Dibujo Artístico aportan la base de conocimiento. Así mismo se
esne.esencuentran dentro de este ámbito las técnicas de animación aprendidas en
asignaturas como Animaciones y Scripting, o de creación de gráficos adquiridas
en Diseño Vectorial o Tratamiento Digital de Imágenes. Desde el punto de vista
tecnológico, el alumno utilizará los conceptos adquiridos en las asignaturas de
Fundamentos de la Programación, Programación II y Fundamentos de las Bases
de Datos.
Así mismo, y dado el gran número de elementos multimedia e interactivos que
incluye una aplicación web, se puede establecer también una relación y aplicación
práctica de asignaturas como Comunicación Audiovisual, Postproducción Digital o
Animación 3D.
Aportaciones al plan de estudios e interés profesional de la
asignatura
Esta asignatura dotará al alumno de las capacidades necesarias para desarrollar
aplicaciones software (enfocadas al ocio interactivo y videojuegos) en entornos
web, así como manejar herramientas y entornos de desarrollo de alto nivel.
Se ayudará al alumno para que aplique su visión de desarrollador y diseñador de
videojuegos adquirida en otras asignaturas enfocándola directamente en entornos
de desarrollo de aplicaciones, sitios y servicios web. Aprender los fundamentos del
desarrollo de aplicaciones y sitios web resulta imperativo ante la creciente
demanda de servicios y productos digitales basados en Internet, altamente
demandados por el mercado en la Sociedad de la Información.
En relación con todo ello, un profesional del diseño y desarrollo de videojuegos
debe tener la capacidad de afrontar un proyecto software completo encaminado a
sitios web, tanto estáticos como dinámicos, que le permitan ampliar el nicho de
mercado donde desarrollar sus ideas de negocio.
esne.esResultados de aprendizaje en relación con las
competencias que desarrolla la materia
Competencias generales
CG05. Podrá abordar la realización de proyectos multimedia de comunicación
audiovisual, diseño gráfico y producciones 2D y 3D, desde un punto de vista
teórico y técnico.
Competencias específicas
CE06. Tendrá capacidad para diseñar, gestionar y evaluar Sistemas Gestores de
Bases de Datos (SGBD).
CE08. Será capaz de prototipar un sistema a partir de un diseño.
CE11.Tendrá la capacidad para la creación y explotación de entornos virtuales,
para la creación, gestión y distribución de contenidos multimedia.
CE12. Podrá desarrollar videojuegos y aplicaciones Web con contenidos
multimedia, utilizando para ello herramientas profesionales de diseño y desarrollo.
CE12.1. Conocerá las herramientas y lenguajes para la creación de Aplicaciones
Web sencillas separando el contenido de la presentación.
CE12.2. Entenderá la sintaxis y estructura de un documento HTML.
CE12.3. Entenderá la sintaxis y las alternativas para añadir Hojas de Estilo en
Cascada (CSS) en documentos HTML.
CE12.4. Conocerá lenguajes de programación web avanzada del lado del servidor,
y la conexión con bases de datos.
CE12.5. Comprenderá la utilización de llamadas asíncronas mediante AJAX para
poder desarrollar así aplicaciones potentes y dinámicas.
esne.esResultados de aprendizaje relacionados
con la asignatura
Al finalizar la asignatura el estudiante deberá:
• Plantear la creación de una aplicación web en todas sus fases: análisis de
requisitos, diseño, implementación, documentación e integración en los
diferentes entornos de ejecución.
• Identificar su rol dentro de un grupo de trabajo y cuál es su implicación en el
desarrollo de un videojuego en la Web. De igual modo sabrá identificar los
roles necesarios para su desarrollo y ejecución.
• Desarrollar aplicaciones software (enfocadas al ocio interactivo y
videojuegos) en entornos Web así como manejar herramientas de alto nivel
y entornos de desarrollo integrado (IDEs) específicas del diseño y
desarrollo web.
• Manejar las últimas tecnologías de desarrollo web y podrá diseñar Sitios
Web usables, dinámicos y potentes que cumplan con los estándares.
• Emplear los conocimientos del lenguaje HTML para la creación de
documentos HTML que integren: textos, imágenes, enlaces, listas, tablas,
formularios y otros elementos multimedia de accesibilidad.
• Emplear los conocimientos del lenguaje CSS para la maquetación de
aplicaciones y sitios web, aplicando así los conocimientos de diseño
previamente adquiridos.
• Desarrollar un programa en el lado del servidor con acceso a una base de
datos.
• Conocer la estructura y los lenguajes utilizados en los programas que se
ejecutan en el navegador y en el servidor de páginas Web.
• Tener conocimientos de programación en HTML, para construir programas
que se ejecuten tanto en servidores de páginas Web como en el propio
navegador.
• Conocer la sintaxis de los elementos más comúnmente utilizados del
lenguaje de marcas de hipertexto HTML.
• Desarrollar código HTML eficiente y de calidad que cumpla con los
estándares del W3C (World Wide Web Consortium).
• Combinar adecuadamente contenidos visuales tales como colores,
imágenes, textos y otros recursos multimedia.
esne.es• Aplicar una metodología de trabajo directa, estricta y eficiente aprendiendo
a separar el diseño preliminar de la implementación del código fuente.
• Comprender las ideas y expresarlas gráficamente usando técnicas y
bocetos de forma efectiva, orientándolos al sitio web como producto final.
• Planificar de forma efectiva las fases de trabajo de un proyecto web,
organizar y dividir tareas en el tiempo y repartirlas dentro de un grupo de
trabajo.
• Publicar un producto final (previa fase de pruebas y validación del mismo),
mediante exposición y presentación oral, enfocadas a la satisfacción del
cliente.
• Será capar de utilizar Java Script y sus derivados en el desarrollo de una
página web en el lado cliente.
• Será capaz de implementar soluciones web dinámicas síncronas y
asíncronas (AJAX).
Contenidos / Temario / Unidades didácticas
Breve descripción de los contenidos
Conceptos fundamentales de la red Internet, del World Wide Web y de los
lenguajes HTML y CSS, adentrándose en conceptos básicos y avanzados
de análisis y diseño, y enseñando a utilizar herramientas profesionales
para ello.
- Conceptos de diseño y arte aplicados a entornos web.
- Conceptos previos. TCP/IP. Direccionamiento IP. DNS
(Domain Name Service). www e Internet.
- HTTP y HTML.
- HTML enlaces y formatos.
- Organización del texto.
- Imágenes, listas y tablas.
- CSS y maquetación profesional de sitios web.
- Los formularios.
- Diseño responsive.
- Dinamismo front end.
- Técnica de desarrollo Web para crear aplicaciones
esne.esinteractivas.
Temario desarrollado
El temario y desarrollo de la asignatura se estructura en torno a un proyecto
continuo y evolutivo a partir de un modelo constructivo organizado en dos
grandes bloques.
El primero, correspondiendo al primer semestre, asentará los fundamentos
teóricos y prácticos del arte y diseño en la construcción de una página web.
En el segundo, correspondiendo al segundo semestre, se pondrá en práctica el
desarrollo e implementación de la web diseñada en la primera fase.
BLOQUE 1. ARTE Y DISEÑO EN LA WEB
1. Diseñar una estrategia.
• Portfolio – introducción.
• Portfolio digital.
• Requisitos portfolio digital.
• La página web y el usuario.
• Dos preguntas básicas:
– ¿Quién va a utilizarlo?
– ¿Qué hará / cómo interactuará?
• La página web y su narrativa.
• Planificar la página web portfolio.
• Organigrama.
• Imagen de Marca.
• Moodboard.
• Teoría de la Gestalt.
• BLOG-O-SFERA.
2. Proceso creativo: Color.
• Investigación: Tipologías de páginas web portfolio.
• Aprender de otras páginas – malos ejemplos vs. buenos ejemplos.
• Objetivos detallados de la página web portfolio.
• Elementos compositivos: Color, Tipografía e Imagen.
• Color:
• 3 sistemas de color.
esne.es– Herramientas para crear combinaciones de color.
– Psicología del color en el diseño web.
– Elegir el color adecuado.
– Sugerencias / tendencias color.
• BLOG-O-SFERA.
3. Proceso creativo: Tipografía.
• Tipografía:
– Clasificación tipográfica.
– Significado Visual Tipográfico.
– Tipografía como imagen.
– Cómo elegir, utilizar y combinar las tipografías en la página web.
– Dónde encontrar tipografías y cómo elegir las más interesantes para la
página web portfolio.
– Tipografía cinética.
– Tipografía en los videojuegos.
– Inspiración recreativa.
– BLOG-O-SFERA.
4. Proceso creativo: Imagen.
• Imagen:
– Tipografía como imagen.
– Ilustración como imagen.
– Fotografía como imagen.
• Trabajar imágenes:
– Compresión, con y sin perdida.
– Cambiar tamaño de imágenes.
– Optimizar imágenes.
– Imagen gratuita vs. derechos de imagen.
• Diseño global: Simulación del web portfolio.
• Análisis del diseño de la web portfolio y correcciones necesarias.
• Promoción de la página web portfolio.
• Mantenimiento del web portfolio.
• BLOG-O-SFERA – ejemplos prácticos.
5. Retícula en diseño web.
• Retícula en diseño web.
• Terminología.
• Retícula de 12 unidades.
esne.es• Diseño de estructura – wireframing.
• Ejemplos de páginas web de wireframing.
6. Diseño Responsive.
• Definición del diseño responsive.
• Función del diseño responsive.
• Consejos y diseño responsive.
• Tendencias diseño responsive 2019 / 2020.
• Lo que hay que tener en cuenta:
– Carga de página.
– Ojo con los tamaños de pantalla. Mobile-First.
– Evitar los efectos.
• Herramientas de wireframing.
• BLOG-O-SFERA.
BLOQUE 2. DESARROLLO WEB
1. Introducción al desarrollo web.
• ¿Qué es www? Internet, evolución y Web 3.0 (semántica).
• Navegadores, estándares y validación (W3C).
• Funcionalidades, dispositivos, demanda del usuario.
2. Implementación del front-end. HTML5.
• Estructura básica de un documento HTML.
• Sintaxis de textos básicos.
• Sintaxis de elementos multimedia (imágenes, vídeo, audio).
• Navegación. Enlaces y anclas.
• Listas, tablas y menús.
• Formularios.
3. Implementación del front-end. CSS3.
• Introducción a CSS3: sintaxis, importación desde HTML.
• Definición de fondos, tipografías y colores.
• Modelo de cajas.
• Unidades de medida.
• Márgenes y relleno.
• Posicionamiento de los elementos.
esne.es• Dinamismo con CSS3.
• Responsive Web Design (RWD).
4. Implementación del front-end. Javascript.
• Conceptos básicos: funcionamiento y sintaxis.
• Definición de variables y arrays.
• Bucles y control de flujo.
• Variables globales. Selección de elementos del DOM.
• Funciones.
5. Introducción al desarrollo web avanzado.
• Arquitectura en tres niveles.
• Apps basadas en web.
• Herramientas de gestión de contenidos (CMS).
6. Posicionamiento y publicación de proyectos web.
• Posicionamiento web (SEM, SEO).
• Publicación de proyectos web.
esne.esCronograma
Bloque 1. Arte y diseño en la web
Unidades Didácticas / Temas Período Temporal
01. Diseñar una estrategia Septiembre
02. Proceso creativo: Color Octubre
03. Proceso creativo: Tipografía Octubre
04. Proceso creativo: Imagen Noviembre
05. Retícula en diseño web Diciembre
06. Diseño responsive Diciembre – Enero
Bloque 2. Desarrollo web
Unidades Didácticas / Temas Período Temporal
01. Introducción al desarrollo web Septiembre
02. Implementación del front-end. HTML5 Octubre – Noviembre
03. Maquetación del front-end. CSS3 Noviembre–Diciembre
04. Interactividad en el front-end. Javascript Enero – Marzo
05. Introducción al desarrollo web avanzado Abril
06. Posicionamiento y publicación de proyectos web Abril
esne.esModalidades organizativas y métodos de
enseñanza
Horas
Modalidad Método de Competencias
organizativa enseñanza relacionadas Trabajo
Presencial Total
autónomo
Clases teóricas. Exposición de CG05, CE06, 40 20 60
Actividad formativa en los temas. CE08, CE11,
el aula que, utilizando Explicar CE12
la metodología planificación de la
expositiva, prioriza la asignatura:
acción docente del programa, apuntes y
profesor. bibliografía.
Repasos al inicio de
la clase. Resolución
de dudas: temas y
lecturas. Pruebas de
evaluación.
Clases Resolución de CG05, CE06, 40 20 60
prácticas. ejercicios. CE08, CE11,
Actividad formativa en Debates sobre los CE12
el aula-taller que, bajo temas y
la guía del profesor, especialmente
se ordena a la sobre ejercicios y
resolución individual o lecturas.
cooperativa de
ejercicios y problemas Presentaciones.
o a la ejecución de Pruebas de
trabajos técnicos o evaluación.
artísticos.
esne.esTutorías. Preparación de CG05, CE06, 20 - 20
Actividad formativa clase mediante CE08, CE11,
fuera del aula que
lectura de los CE12
fomenta el
aprendizaje temas.
autónomo, con el Planificación de
apoyo de la acción de debates y
guía y seguimiento comentarios
por medio de un tutor. mediante la
preparación de las
lecturas. Resolución
de ejercicios.
Comentarios y
resolución de dudas
presencialmente o
por correo
electrónico.
Trabajo personal Lecturas: CG05, CE06, - 60 60
preparación y
del alumno. CE08, CE11,
búsqueda de
Actividad formativa CE12
información
fuera del aula que, sin
complementaria.
una guía directa del
Estudio personal.
profesor o tutor,
fomenta el
Preparación de
aprendizaje autónomo
comentarios y
del alumno.
debates. Tutorías
libres y voluntarias.
esne.esSistema de evaluación
General
Valoración
Actividades Criterios respecto a la
de Evaluación de Evaluación
Calificación Final
Trabajos y
Proyectos Realización de prácticas individuales,
90%
individuales y/o además de una final de tipo grupal.
cooperativos
Se tendrá en cuenta el interés que
muestra el alumno por la asignatura y los
Asistencia
contenidos de la materia, así como su 10%
Participativa
capacidad de esfuerzo y evolución en el
desarrollo de su trabajo.
Consideraciones generales acerca de la evaluación
Cada uno de los dos bloques de la asignatura (bloque 1: Arte y Diseño en la Web;
bloque 2: Desarrollo Web) debe ser aprobado por separado y contribuye al 50%
de la nota final.
Asistencia a Clase
• La asistencia a clase es obligatoria. Se aplica la norma del 80% de
asistencia recogida en la Normativa Académica disponible en la
pestaña de Documentos de Interés General del Campus Virtual.
• La Dirección/Coordinación de la Titulación podrá considerar
situaciones excepcionales, previo informe documental, debiendo ser
aprobadas por la Dirección Académica de ESNE.
esne.es• Se exigirá puntualidad al alumno en el comienzo de las clases. Una
vez transcurridos cinco minutos de cortesía, el profesor podrá denegar
la entrada en el aula.
Entregas de Trabajos
• Los alumnos deben presentar y aprobar todas las entregas (prácticas,
proyectos, etc.) que se les soliciten. La no entrega de un trabajo en
una convocatoria, supondrá suspender en ella la asignatura.
• Los trabajos deben entregarse en las fechas que solicite el profesor,
no admitiéndose entregas posteriores. Si excepcionalmente se
aceptase un trabajo fuera de plazo, la máxima calificación a obtener
será 7 (siete).
• En los trabajos en grupo, la calificación será individual por cada
alumno, atendiendo a criterios de conocimiento de la materia,
esfuerzo, presentación, asistencia a tutorías, etc. Por tanto, miembros
de un mismo grupo pueden tener calificaciones diferentes.
Evaluación en Convocatoria Ordinaria
• En ambas convocatorias, la calificación mínima para aprobar la
asignatura es de 5 (cinco), la cual será el resultado de la suma
ponderada de todas las actividades de evaluación.
• La parte de prácticas aporta un 90% de la nota final, y será aprobada
sólo si se realizan y aprueban todas las entregas solicitadas.
• Además de una serie de prácticas individuales a lo largo del curso,
existe una final de tipo grupal que sólo puede entregarse en
convocatoria ordinaria si el alumno cumple con los criterios de
asistencia a clase.
• Se tendrá en cuenta la asistencia, la participación y el interés en el
aula con un 10% de la nota. Se señala que además de este beneficio
en la proporción de la nota, estas actitudes positivas redundan en el
aprendizaje y evolución del alumno, que será igualmente valorado por
el profesor. El trabajo realizado por el alumno durante el curso deberá
alcanzar el nivel mínimo exigible para satisfacer los objetivos que
marca la asignatura.
esne.esEvaluación en Convocatoria Extraordinaria
• En la evaluación extraordinaria, los alumnos deben volver a presentar
los trabajos que no hayan sido aprobados en convocatoria ordinaria.
Además, el profesor de la asignatura podrá solicitar la realización de
un trabajo adicional en la evaluación extraordinaria.
• En el caso de no haber superado en convocatoria ordinaria la parte
correspondiente al bloque 2: Desarrollo Web (relativo a la
implementación de la parte diseñada en el primer semestre), se
seguirá el siguiente procedimiento:
o El alumno deberá realizar un examen teórico sobre esta materia
en convocatoria extraordinaria.
o Si este examen logra una calificación igual o superior a 5
puntos, se corregirán de nuevo las entregas que tuviese
suspensas de esta parte.
o En caso contrario, no se considerarán las entregas aportadas,
por lo que no podrá superar esta parte de la asignatura y, por
tanto, tampoco la asignatura completa.
o Si no se aprueban estas entregas, tampoco se podrá aprobar la
asignatura.
• El alumno que, por falta de asistencia, no hubiese podido entregar la
práctica final grupal en convocatoria ordinaria, la podrá entregar en
extraordinaria, pero de forma individual. Excepcionalmente, podría
también entregarla en grupo.
Bibliografía / Webgrafía
Bibliografía básica
- Álvarez García, Alonso (2010). HTML 5. Madrid: Anaya Multimedia.
- Antoniou, G. y F. van Harmelen (2004). A Semantic Web Primer. MIT.
- Duckett, Jon (2011). HTML and CSS: Design and Build Websites. Hoboken
(USA): Wiley.
- Barnum, C. M. (2010). Usability Testing Essentials. Morgan Kaufmann.
esne.es- Blythe, M. A. (2003). Funology: From usability to enjoyment. Kluwer
Academy.
- Brown, D. M. (2011). Communication Design: Developing website
documentation for design and planning. New Riders.
- Chaves, Norberto (2006). La imagen corporativa: Teoría y práctica de la
identificación institucional. Barcelona: Gustavo Gili.
- Dave, Wood (2015). Diseño de Interfaces. Barcelona: Pad.
- Gauchat, J.D. (2013). El gran libro de HTML5, CSS3 y Javascript. 2ª
Edición. Madrid: Marcombo, S.A.
- Lupton, Ellen (2012). Intuición, acción, creación. Graphic Design Thinking.
Barcelona: Gustavo Gili.
- M. Brown, Dan (2011). Communicating Design: Developing Web Site
Documentation for Design and Planning, 2nd Edition. Nueva York (USA):
Pearson.
- Murphy, Christopher y Persson, Nicklas (2009). HTML y CSS. Madrid:
Anaya Multimedia.
- Sawyer McFarland, David (2009). CSS. Madrid: Anaya Multimedia.
- Wheeler, Alina (2013). Diseño de marcas. Madrid: Anaya Multimedia
Bibliografía complementaria – Webgrafía
• http://www.w3c.es/
• http://validator.w3.org/
• http://w3schools.com
• http://desarrolloweb.com/
• http://www.forosdelweb.com/
• http://www.codecademy.com/learn
• http://html5demos.com/
• http://www.html5rocks.com/es/
• http://css-tricks.com
• http://codepen.io
• http://stackoverflow.com
esne.esObservaciones
El plagio evidenciado en los trabajos o exámenes será calificado con nota
“0”, y la pérdida de esa convocatoria para el estudiante o estudiantes
responsables.
El alumno deberá respetar en todo momento la propiedad intelectual de
otros autores no haciendo uso del trabajo de otros sin aclarar este punto y
sin citar las fuentes originales.
Los trabajos y propuestas que se soliciten habrán de ser originales, no
realizados anteriormente ni por ellos ni por terceros.
Siempre que se solicite el alumno está obligado a firmar en la hoja de
asistencia. En ningún caso no podrá firmarse en nombre de otra persona,
ni presente ni ausente.
El incumplimiento de uno de estos puntos implicará la pérdida de la
evaluación continua y ordinaria, sin perjuicio de las acciones
sancionadoras que estén establecidas.
Todas las entregas deberán realizarse en el formato establecido por el
profesor y en formato digital (pdf, vectorial si procede).
ESNE fija para sus titulaciones un sistema de calificaciones que se
corresponde con lo regulado por los artículos 5.4 y 6 del Real Decreto
1125/2003, de 5 de septiembre (por el que se establece el sistema
europeo de créditos y el sistema de calificaciones universitarias de
carácter oficial y validez en todo el territorio nacional). En dichos artículos,
que la universidad aplica, se regula lo siguiente: “Los resultados obtenidos
por el estudiante en cada una de las materias del plan de estudios se
calificarán en función de la siguiente escala numérica de 0 a 10, con
expresión de un decimal, a la que podrá añadirse su correspondiente
calificación cualitativa… La mención de «Matrícula de Honor» podrá ser
otorgada a estudiantes que hayan obtenido una calificación igual o
superior a 9,5. Su número no podrá exceder del cinco por ciento de los
estudiantes matriculados en una materia en el correspondiente curso
académico, salvo que el número de estudiantes matriculados sea inferior
a 20, en cuyo caso se podrá conceder una sola «Matrícula de Honor».
esne.esEscala numérica Calificación cualitativa
De 0,0 a 4,99 Suspenso (SS)
De 5 a 6,99 Aprobado (AP)
De 7 a 8,99 Notable (NT)
De 9 a 10 Sobresaliente (SB)
Las calificaciones de los estudiantes son fruto de un sistema de
evaluación continua, que permite valorar de forma constante su trabajo,
actitud, participación y asimilación del conocimiento. La asistencia y la
participación del estudiante en las sesiones docentes, por lo tanto, son
esenciales para el desarrollo del sistema, y, como tal, evaluables y
calificables.
esne.esTambién puede leer
