PARTE 1. DISEÑO DE VIDEOJUEGOS CON HTML5 Y CSS3

UNIDAD DIDÁCTICA 1. HERRAMIENTAS NECESARIAS

• 1.Introducción a Html
• 2.Editor de texto
• 3.Navegadores

UNIDAD DIDÁCTICA 2. INTRODUCCIÓN HTML

• 1.Introducción a HTML
• 2.¿Cómo creamos documento HTML?
• 3.Características Básicas de los documentos HTML

UNIDAD DIDÁCTICA 3. TEXTO, ENLACES, LISTAS, IMÁGENES Y OBJETOS

• 1.Textos en HTML
• 2.Enlaces en Html
• 3.Listas en HTML
• 4.Imágenes y Objetos

UNIDAD DIDÁCTICA 4. TABLAS, FORMULARIOS Y ESTRUCTURAS

1.Tablas
2.Formularios
3.Estructuras y layout
UNIDAD DIDÁCTICA 5. OTRAS ETIQUETAS IMPORTANTES

• 1.Otras etiquetas importantes

UNIDAD DIDÁCTICA 6. METAINFORMACIÓN, ACCESIBILIDAD Y VALIDACIÓN

• 1.¿Qué es la Metainformación?
• 2.Accesibilidad
• 3.Validación

UNIDAD DIDÁCTICA 7. INTRODUCCIÓN HTML5

• 1.¿Qué es HTML5?
• 2.¿Cuáles son las mejoras?
• 3.Etiquetas Obsoletas
• 4.Etiquetas modificadas
• 5.Lista de etiquetas HTML5
• 6.Atributos eliminados
• 7.Otros cambios
• 8.Estructura HTML5
• 9.Nueva estructuración del body
• 10.Otros elementos nuevos de estructuración

UNIDAD DIDÁCTICA 8. NUEVOS ATRIBUTOS, EVENTOS Y PSEUDO-CLASES

• 1.Introducción a atributos globales
• 2.Nuevos atributos
• 3.Introducción a los nuevos eventos

UNIDAD DIDÁCTICA 9. NUEVOS ELEMENTOS SEMÁNTICOS

• 1.Elemento bdi
• 2.Elemento command
• 3.Elemento data
• 4.Elementos details
• 5.Elemento mark
• 6.Elemento meter
• 7.Elemento progress
• 8.Elemento ruby
• 9.Elemento time
• 10.Elemento wbr

UNIDAD DIDÁCTICA 10. MEJORAS EN LOS FORMULARIOS

• 1.Nuevos elementos para los Formularios
• 2.Cambios en el atributo type (input)
• 3.Nuevos atributos para form
• 4.Nuevos atributos para fieldset
• 5.Nuevos atributos para input
• 6.Nuevos atributos para textarea

UNIDAD DIDÁCTICA 11. OTRAS MEJORAS DE HTML5

• 1.Introducción a los elementos multimedia
• 2.Etiqueta source
• 3.Etiqueta track
• 4.Elemento video
• 5.Elemento audio
• 6.Elemento embed
• 7.Elemento canvas
• 8.Introducción a MathML
• 9.Introducción a SVG
• 10.Introducción a Drag and Drop
• 11.Validador HTML5

UNIDAD DIDÁCTICA 12. INTRODUCCIÓN CSS

• 1.Introducción CSS
• 2.Soporte de CSS en navegadores
• 3.Especificación Oficial
• 4.Funcionamiento básico de CSS
• 5.¿Como incluir CSS en la Web?
• 6.Estilo Básico
• 7.Medios CSS
• 8.Comentarios
• 9.Sintaxis de la definición

UNIDAD DIDÁCTICA 13. SELECTORES, UNIDADES DE MEDIDA Y COLORES

• 1.Selectores CSS
• 2.Unidades de medida
• 3.Colores

UNIDAD DIDÁCTICA 14. MODELOS DE CAJAS, POSICIONAMIENTO Y VISUALIZACIÓN

• 1.Modelo de Cajas
• 2.Propiedades de las cajas
• 3.Margen, relleno, bordes y modelo de cajas
• 4.Posicionamiento y visualización
• 5.Posicionamiento
• 6.Visualización

UNIDAD DIDÁCTICA 15. ESTRUCTURAR UNA PÁGINA LAYOUT

• 1.Introducción a layout
• 2.¿Cómo centrar una página horizontalmente?
• 3.¿Cómo centrar una página verticalmente?
• 4.Estructura o layout
• 5.Alturas/Anchuras Máximas y Mínimas
• 6.Estilos avanzados

UNIDAD DIDÁCTICA 15. TEXTO, ENLACES, IMÁGENES Y LISTAS

• 1.Textos en CSS
• 2.Enlaces
• 3.Imágenes
• 4.Listas

UNIDAD DIDÁCTICA 16. TABLAS, FORMULARIOS Y SHORTHAND

• 1.Tablas
• 2.Formulario
• 3.shorthand

UNIDAD DIDÁCTICA 17. OTRAS UTILIDADES DE CSS

• 1.Versión para imprimir
• 2.Personalizar el cursor
• 3.Hacks y filtros
• 4.Prioridad en las declaraciones
• 5.Validar CSS
• 6.Recomendaciones Generales
• 7.Recursos útiles

UNIDAD DIDÁCTICA 18. FIREBUG

• 1.¿Qué es Firebug?
• 2.¿Como se instala?
• 3.¿Como usamos Firebug?

UNIDAD DIDÁCTICA 19. INTRODUCCIÓN A CSS3

• 1.Introducción
• 2.Unidades, colores y fuentes
• 3.Nuevos Selectores y pseudo-clases

UNIDAD DIDÁCTICA 20. ANIMACIONES, FONDOS Y BORDES

• 1.Propiedades para la animación
• 2.Nuevas propiedades para los fondos
• 3.Nuevas propiedades para Bordes

UNIDAD DIDÁCTICA 21. CAJAS, CAJAS FLEXIBLES, COLORES Y FUENTES

• 1.Propiedades de las cajas
• 2.Propiedades de las cajas flexibles
• 3.Propiedades del color
• 4.Propiedades para las Fuentes

UNIDAD DIDÁCTICA 22. ENLACES Y MULTI-COLUMNAS

• 1.Propiedades para los hiperenlaces
• 2.Propiedades de las multi-columnas

UNIDAD DIDÁCTICA 23. TEXTO Y 2D/3D TRANSFORMACIONES

• 1.Propiedades para texto
• 2.Propiedad 2D/3D Transform

UNIDAD DIDÁCTICA 24. TRANSICIONES E INTERFAZ DE USUARIO

• 1.Propiedades para las transiciones
• 2.Propiedades para la interfaz de usuario
• 3.Validación CSS3

PARTE 2. CREACIÓN DE VIDEOJUEGOS CON JAVASCRIPT

UNIDAD DIDÁCTICA 1. ¿POR QUÉ USAR JAVASCRIPT?

• 1.Introducción
• 2.Programación del lado del cliente
• 3.Programación del lado del Servidor
• 4.¿Qué utilizaremos?
• 5.¿Qué necesita saber?
• 6.Nuestro primer ejemplo

UNIDAD DIDÁCTICA 2. INTRODUCCIÓN A JAVASCRIPT

• 1.La etiqueta SCRIPT
• 2.Contenido Alternativo
• 3.Variables
• 4.Tipos de Datos
• 5.Operadores
• 6.Cuadros de diálogo
• 7.Práctica 2

UNIDAD DIDÁCTICA 3. CONCEPTOS BÁSICOS DE PROGRAMACIÓN

• 1.Introducción
• 2.Estructuras de decisión
• 3.Estructuras lógicas
• 4.Estructuras de repetición
• 5.Definir funciones
• 6.Llamadas a funciones
• 7.Ámbito de las variables
• 8.Práctica 3

UNIDAD DIDÁCTICA 4. OBJETOS EN JAVASCRIPT

• 1.Introducción
• 2.La jerarquía de objetos
• 3.Propiedades y Eventos
• 4.Métodos
• 5.Práctica 4

UNIDAD DIDÁCTICA 5. LOS OBJETOS LOCATION E HISTORY

• 1.¿Qué es un URL?
• 2.El Objeto Location
• 3.Redirigir a otra página
• 4.El Objeto History
• 5.Práctica 5

UNIDAD DIDÁCTICA 6. EL OBJETO DOCUMENT

• 1.Introducción
• 2.La propiedad Title
• 3.Los colores de la página
• 4.El método write
• 5.El conjunto images
• 6.Práctica 6

UNIDAD DIDÁCTICA 7. EL OBJETO FORM

• 1.Formularios HTML
• 2.El conjunto forms
• 3.La propiedad elements
• 4.Validar la información
• 5.¿Cuándo realizar la validación?
• 6.Tipos de Validación
• 7.Práctica 7

UNIDAD DIDÁCTICA 8. LOS OBJETOS FRAME, NAVIGATOR Y SCREEN

• 1.El conjunto frames
• 2.El objeto navigator
• 3.El objeto screen
• 4.Práctica 8

PARTE 3. PRACTICA REAL: CREACIÓN DE UN VIDEOJUEGO PASO A PASO

UNIDAD DIDÁCTICA 1. CREACIÓN DE NUESTRO PRIMER VIDEOJUEGO USANDO LA LIBRERÍA EASELJS

• 1.¿Qué vamos a hacer?
• 2.Descargando la librería EaselJS
• 3.Animando los esqueletos
• 4.Cargando los objetos necesarios
• 5.Crear el SpriteSheet y el BitmapSequence
• 6.El objeto Ticker
• 7.El objeto SpriteSheeUtils
• 8.Manejar la velocidad
• 9.Carga de Sprites múltiples y jugar con las dimensiones múltiples de animación

UNIDAD DIDÁCTICA 2. DETECCIÓN DE COLISIONES ENTRE PERSONAJES

• 1.Introducción
• 2.Construyendo el Objeto Monstruo
• 3.El archivo Monster.js
• 4.Construyendo el Objeto Jugador
• 5.Construyendo el Administrador de Contenido
• 6.Construyendo la página principal

UNIDAD DIDÁCTICA 3. TÉCNICAS AVANZADAS PARA LA MEJORA DE VIDEOJUEGOS

• 1.Mejorando nuestro juego
• 2.Nuestro index.html
• 3.Creando el escenario (I)
• 4.Utilizando la Clase XNARectangle
• 5.Creando el escenario (II)
• 6.La lógica del juego
• 7.Modificando Nuestro Player.js
• 8.Modificando nuestro ContentManager.js
• 9.Funciones Auxiliares

UNIDAD DIDÁCTICA 4. MÁS FUNCIONALIDAD PARA NUESTRO VIDEOJUEGO

• 1.Mejora I. El salto
• 2.Mejora II. El Tiempo
• 3.Mejora III. Los Carteles (Overlays)
• 4.Mejora IV. La meta
• 5.Mejora V. Recolectando Crucis
• 6.Mejora VI. Los Enemigos
• Mejora VII. Vivo o Muerto