gradoen diseÑo y desarrollo de …€¦ · desde el punto de vista tecnológico, el alumno...

GRADOEN DISEÑO Y DESARROLLO DE

VIDEOJUEGOS

PLANIFICACIÓN DE LA DOCENCIA UNIVERSITARIA

GUÍA DOCENTE

DISEÑO Y DESARROLLO DE VIDEOJUEGOS

WEB

CURSO ACADÉMICO 2017 – 2018

Diseño y Desarrollo de Videojuegos Web 1

Curso Académico 2017-2018

1. DATOS DE IDENTIFICACIÓN DE LA ASIGNATURA

Título:

Grado en Diseño y Desarrollo de Videojuegos

Módulo: Módulo de Diseño

Denominación de la asignatura: Diseño y Desarrollo de Videojuegos Web

Código: 40017

Curso: Segundo

Semestre: Anual

Tipo de asignatura (básica, obligatoria u optativa): Obligatoria

Créditos ECTS: 8

Modalidad/es de enseñanza: Presencial

Profesor:

Dr. Mario Vega Barbas, Renato Seixas

Lengua vehicular:

Español

Página web: www.esne.es

http://www.ucjc.edu/



2. PROFESORADO DE LA ASIGNATURA

Profesor:

Dr. Mario Vega Barbas

Datos de contacto:

[email protected]

TUTORÍAS ACADÉMICAS: consultar en el Campus Virtual el documento "horarios de tutorías - Grado en Diseño y Desarrollo de Videojuegos"

Profesor:

Renato Seixas

Datos de contacto:

[email protected]

TUTORÍAS ACADÉMICAS: consultar en el Campus Virtual el documento "horarios de tutorías - Grado en Diseño y Desarrollo de Videojuegos"

3. REQUISITOS 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.

4. SENTIDO Y APORTACIONES DE LA ASIGNATURA AL PLAN DE ESTUDIOS

Campo de conocimiento al 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ónde 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 Fundamentos de la Creatividad o Dibujo Artístico aportan la base de conocimiento. Así mismo se encuentran 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.

5. RESULTADOS DE APRENDIZAJE EN RELACIÓN CON LAS

COMPETENCIAS QUE DESARROLLA LA MATERIA

COMPETENCIAS GENERALES

CG5.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

CE6.Tendrá capacidad para diseñar, gestionar y evaluar SistemasGestores de Bases de Datos (SGBD). CE8. 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.

RESULTADOS DE APRENDIZAJE RELACIONADOS CON LA ASIGNATURA

El alumno será capaz de 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.

El alumno será capaz de 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.

El alumno será capaz de 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.

El alumno 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

Será capaz de 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.

Será capaz de emplear los conocimientos del lenguaje CSS para la maquetación de aplicaciones y sitios web, aplicando así los conocimientos de diseño previamente adquiridos.

Será capaz de 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.

Tendrá 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.

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íncrónas (AJAX)

6. 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. - Herramientas para la gestión de sitios Web. - Introducción a la tecnología de servidor y al modelo vista controlador. - Sintaxis básica del lenguaje de programación de tecnología servidor. - Conexión de la Web con bases de datos. - Sesiones y cookies. - Técnica de desarrollo Web para crear aplicaciones interactivas.



Temario detallado

BLOQUE 1. ARTE Y DISEÑO EN LA WEB Tema 1. DISEÑAR UNA ESTRATEGIA

• Portfolio – académico / profesional. • Portfolio – misión. • Suporte y apartados del portfolio digital – página web. • Organigrama – página web. • Imagen de marca personal. • Moodboard. • BLOG-O-SFERA – ejemplos prácticos.

Tema 2. DESPERTAR SENSACIONES – DISEÑO DE EXPERIENCIA

• La web y el usuario. • Preguntas que deben plantearse al inicio de un nuevo proyecto de diseño interactivo. • La web y su narrativa. • Planificar la página web portfolio. •Organización y estructura de la páginaweb portfolio. • Teoría de Gestalt. • BLOG-O-SFERA – ejemplos prácticos.

Tema 3. PROCESO CREATIVO: PLANIFICAR/DISEÑAR LA PÁGINA WEB PORTFOLIO •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. • Diseño – elementos compositivos: Color, Tipografía e Imagen. • COLOR: – 3 sistemas de color. – Herramientas para crear combinaciones de color. – Psicología del color en el diseño web. – Elegir el color adecuado. – Sugerencias / tendencias color. – Importante / no olvidar. • BLOG-O-SFERA – ejemplos prácticos.

Tema 4. PROCESO CREATIVO: PLANIFICAR/DISEÑAR LA PÁGINA WEB PORTFOLIO

• TIPOGRAFÍA: – Clasificacióntipográ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íacinética. – Tipografía en los videojuegos. – Inspiración recreativa. • BLOG-O-SFERA – ejemplos prácticos.



Tema 5. PROCESO CREATIVO: PLANIFICAR/DISEÑAR LA PÁGINA WEB PORTFOLIO • 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óndel web portfolio. •Análisis del diseño de la web portfolio y correcciones necesarias. •Promocióndel web portfolio. • Mantenimiento del web portfolio • BLOG-O-SFERA – ejemplos prácticos.

Tema 6. DISEÑO RESPONSIVE

•Definición del diseñoresponsive. • Función del diseñoresponsive. • Consejos y diseñoresponsive. • Tendencias diseñoresponsive 2017 / 2018. • Los 3 pilares de optimización del D. R. – Diseño para todos los sistemas operativosy navegadores. – Diseño para todas las resoluciones de pantalla. – Diseño para todas las velocidades de conexión. • Lo que hay que tener en cuenta: – carga de página. – ojo con los tamaños de pantalla. Mobile-First. – evita los efectos. • Herramientas de wireframing. • BLOG-O-SFERA – ejemplos prácticos.

BLOQUE 2. DESARROLLO WEB Tema 7. 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. - Lenguajes de desarrollo: HTML5, CSS, JS, PHP. - Herramientas y entornos de desarrollo. - Manejo de un editor de texto enriquecido. - Reglas de estilo (style-coding) y nomenclatura (naming).

Tema 8. Implementación del Front-End: HTML

- Estructura básica de un documento y etiquetas semánticas. - Escritura y formato de texto básicos. Párrafos y encabezados. - Imágenes, vídeo y audio. Reescalado. Rutas y ficheros. - Enlazado de páginas (links) y secciones (anclas). Navegación. - Organización de contenido: Listas y Tablas. Creación de menús. - Formularios. Estructura y mecánica. Envío de datos y Validación en cliente.



Tema 9. Maquetación del Front-End: CSS

- Introducción. Estructura web y arquitectura de contenidos. Modelo de Cajas. - El lenguaje CSS3. Sintaxis básica. Atributos, propiedades y valores. - Texto, imagen, audio, vídeo, colores y tipografías. - Transformaciones, transiciones y animaciones. - Administración del espacio, contenido y posicionamiento. - CSS3 y Diseño Web Centrado en el Dispositivo.

BLOQUE 3. GESTIÓN Y PUBLICACIÓN DE PROYECTOS WEB Tema 10. Proveedores de Servicios de Internet

- ¿Qué es un ISP? ¿Cómo se contrata un dominio? - Disponibilidad y transferencias. SEDO. Whois. - Aspectos legales. LSSI. Tipos de contactos.

Tema 11. Administración de Hosting y Publicación

- Presentación de un webpanel de administrador. - Puesta en producción. Migraciones y plataformas. - Herramientas y sistemas de gestión de contenidos: Wordpress, Drupal, Joomla,

Contentful Tema 12. Estimación de Costes y Preventa a Cliente

- Recogida de requisitos (briefing) y consultoría. - Estimación de recursos y planificación de tiempos. - SEO.

7. CRONOGRAMA UNIDADES DIDÁCTICAS / TEMAS PERÍODO TEMPORAL

Tema 0. Introducción / presentación Septiembre

Tema 1. Diseñar una estrategia Septiembre

Tema 2. Despertar sensaciones – Diseño de experiencia Octubre

Tema 3. Proceso creativo – Color Octubre

Tema 4. Proceso creativo – Tipografía Noviembre

Tema 5. Proceso creativo – Imagen Diciembre

Tema 6. Diseño responsive Diciembre – enero

Tema 7. Introducción al desarrollo web Enero

Tema 8. Implementación del Front-End Febrero – Marzo

Tema 9. Maquetación del Front-End Abril – Mayo

Tema 10. Proveedores de Servicios de Internet Mayo

Tema 11. Administración de Hosting y Publicación Mayo

Tema 12. Estimación de Costes y Preventa a Cliente Mayo – Junio



8. MODALIDADES ORGANIZATIVAS Y MÉTODOS DE ENSEÑANZA

MODALIDAD ORGANIZATIVA

MÉTODO DE ENSEÑANZA

COMPETENCIAS

RELACIONADAS

HORAS PRESEN

C.

HORAS DE TRABAJO

AUTÓNOMO

TOTAL DE

HORAS

Clases teóricas

Exposición de los

temas.Explicar planificación de la asignatura: programa, apuntes y bibliografía.

Repasos al inicio de la clase. Resolución de dudas: temas y lecturas. Pruebas de evaluación.

CG5, CE6, CE8, CE11, CE12

40 20 60

Clases

prácticas

Resolución de

ejercicios.Debates sobre los temas y especialmente sobre ejercicios y lecturas.

Presentaciones. Pruebas de evaluación.


40 20 60

Tutorías

Preparación de clase mediante lectura de los temas.

Planificación de debates y comentarios mediante la preparación de las lecturas. Resolución de

ejercicios.

Comentarios y resolución de dudas presencialmente o por correo electrónico.


20 - 20

Trabajo personal del

alumno

Lecturas: preparación y búsqueda de información

complementaria.Estudio

personal.Preparación de comentarios y debates. Tutorías libres y voluntarias.


- 60 60



9. SISTEMA DE EVALUACIÓN

ACTIVIDAD DE EVALUACIÓN

CRITERIOS DE EVALUACIÓN VALORACIÓN RESPECTO A LA

CALIFICACIÓN FINAL (%)

Práctica 1 (Entrega y defensa)

ESTRUCTURA Y CONCEPTO PAGINA WEB. Portfolio personal área de videojuegos. • CREACION DE UN ORGANIGRAMA (estructura de la página web); • CREACION DE UN MOODBOARD (composicióninspiracional para la imagen de marca); • CREACION IMAGEN GRAFICA PERSONAL (logotipo/lettering).

20%

Práctica 2 / examen (Entrega y defensa)

DISENO PAGINA WEB (estática) Composición desarrollada de las varias áreas presentes en el portfolio personal de videojuegos. • CREACION DE UN MOODBOARD (composición inspiracional para la página web); • DISENO WEB – skin; • SELECCION DEL MATERIAL/CONTENIDO PARA LOS DIFERENTES APARTADOS DE LA WEB • EXPOSICION OBLIGATORIA EN CLASE DE LA WEB PORTFOLIO PERSONAL.

70%

Asistencia Participativa Participación activa 10%

CONSIDERACIONES GENERALES ACERCA DE LA EVALUACIÓN:

Asistencia a Clase ● La asistencia a clase es obligatoria. Sin una asistencia demostrada de al menos un 80%,

el alumno no podrá presentarse a examen debiendo acudir a la siguiente convocatoria. No es necesario justificar las faltas, y por tanto no se admitirán justificantes de las mismas, por lo que superado el 20% de faltas de asistencia, el alumno deberá presentarse en convocatoria extraordinaria.



● 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.

● 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.

Evaluación ordinaria ● En convocatoria ordinaria, los alumnos deben presentar y aprobar todas las entregas

que se les soliciten. La no entrega de un trabajo supondrá suspender la asignatura. ● En concreto se solicitarán dos entregas:

- Diseño de la web que represente el portfolio del alumno (2 puntos) - Implementación del portfolio del alumno haciendo uso de HTML, CSS y

JavasScript (el uso de JS será opcional) (7 puntos). ● Los trabajos deben entregarse en las fechas que solicite el profesor, no se admiten

entregas posteriores. El profesor determinará si excepcionalmente se acepta un trabajo fuera de plazo. En este caso, la máxima calificación a obtener será 7.

● 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.

● Los trabajos, una vez calificados, deben ser retirados por los alumnos en el tiempo que se determine. Pasado este plazo, los trabajos podrán ser destruidos.

Evaluación 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 extra en la evaluación extraordinaria.

Para superar la asignatura (tanto en la convocatoria ordinaria como en la extraordinaria) es necesario obtener una media de 5 puntos. Para realizar la media, los alumnos deben aprobar las dos partes de la asignatura, impartidas por los profesores Mario Vega y Renato Seixas. La asistencia es obligatoria. Sin una asistencia demostrada de al menos un 80%, los exámenes y trabajos no serán evaluados, debiendo acudir a la siguiente convocatoria. Cálculo de la nota final La asignatura está dividida de la siguiente forma: 1º Semestre –Renato Seixas: 25% 2º Semestre – Mario Vega: 75%



10. BIBLIOGRAFÍA / WEBGRAFÍA Bibliografía básica

Adam Trachtenberg, David Sklar (2014). PHP Cookbook, Solutions & Examples for PHP Programmers (3rd Edition). O'Reilly Media

Jon Duckett (2011). HTML and CSS: Design and Build Websites. Hoboken (USA): Wiley.

Dan M. Brown (2011). Communicating Design: Developing Web Site Documentation for Design and Planning, 2nd Edition. Nueva York (USA): Pearson.

Sawyer McFarland, David (2009). CSS. Madrid: Anaya Multimedia.

Murphy, Christopher y Persson, Nicklas (2009). HTML y CSS. Madrid: Anaya Multimedia.

Álvarez García, Alonso (2010). HTML 5. Madrid: Anaya Multimedia.

Gauchat, J.D. (2013). El gran libro de HTML5, CSS3 y Javascript. 2ª Edición. Madrid: Marcombo, S.A.

Antoniou, G. y F. van Harmelen (2004). A Semantic Web Primer. MIT.

Barnum, C. M. (2010). UsabilityTesting Essentials. Morgan Kaufmann.

Blythe, M. A. (2003). Funology: Fromusability to enjoyment. KluwerAcademy.

Brown, D. M. (2011). CommunicationDesign: Developingwebsitedocumentationfordesign and planning. New Riders.

Chaves, Norberto (2006). La imagen corporativa: Teoria y practica de la identificacion institucional. Barcelona: Gustavo Gili.

Dave, Wood (2015). Diseno de Interfaces. Barcelona: Pad.

Lupton, Ellen (2012). Intuicion, accion, creacion. GraphicDesignThinking. Barcelona: Gustavo Gili.

Wheeler, Alina (2013). Diseno de marcas. Madrid: Anaya Multimedia.

Bibliografía complementaria http://librosweb.es/ http://www.w3c.es/ http://validator.w3.org/ http://w3schools.com http://desarrolloweb.com/ http://www.forosdelweb.com/ https://www.codecademy.com/learn http://html5demos.com/ http://www.html5rocks.com/es/ http://css-tricks.com http://codepen.io http://stackoverflow.com http://php.net/ http://mysql.conclase.net/ http://www.mysql.com/ http://wordpress.org/ http://www.prestashop.com/

http://libros/

http://www.w3c.es/

http://validator.w3.org/

http://desarrolloweb.com/

http://www.forosdelweb.com/

http://html5demos.com/

http://www.html5rocks.com/es/

http://css-tricks.com/

http://stackoverflow.com/

gradoen diseÑo y desarrollo de …€¦ · desde el punto de vista tecnológico, el alumno...

Documents