CreateJS: Desarrolla Juegos en HTML5

CAMPO DE CONOCIMIENTO 1. CREATEJS: JUEGOS INTERACTIVOS CON HTML5

SCORM 1. PRESENTACIÓN A LA CREACIÓN DE JUEGOS HTML5 CON CREATEJS

Ventajas de usar CreateJS

Curso CreateJS: Creación de juegos en JavaScript

Porque HTML5 y Javascript

Qué es el canvas

Qué es CreateJS

Cómo comenzar con CreateJS

SCORM 2. SISSCORM DE EVENTOS NECESARIOS PARA CREATEJS

Como crear eventos CreateJS

Generar eventos con el ratón

Generar eventos con el teclado

Crear un juego redimensionable

SCORM 3. SOUNDJS DE CREATEJS

Qué es SoundJS y para que fucniona

Creación de sonidos

Reproduciendo y carga audio con SoundJS

SCORM 4. FINALIZACIÓN

Finalización del curso CreateJS: Creación de juegos en JavaScript

CAMPO DE CONOCIMIENTO 2. DISEÑO DE VIDEOJUEGOS CON HTML5 Y CSS3

SCORM 1. HERRAMIENTAS NECESARIAS

Introducción a Html

Editor de texto

Navegadores

SCORM 2. INTRODUCCIÓN HTML

Introducción a HTML

¿Cómo creamos documento HTML?

Características Básicas de los documentos HTML

SCORM 3. TEXTO, ENLACES, LISTAS, IMÁGENES Y OBJETOS

Textos en HTML

Enlaces en Html

Listas en HTML

Imágenes y Objetos

SCORM 4. TABLAS, FORMULARIOS Y ESTRUCTURAS

Tablas

Formularios

Estructuras y layout

SCORM 5. OTRAS ETIQUETAS IMPORTANTES

Otras etiquetas importantes

SCORM 6. METAINFORMACIÓN, ACCESIBILIDAD Y VALIDACIÓN

¿Qué es la Metainformación?

Accesibilidad

Validación

SCORM 7. INTRODUCCIÓN HTML5

¿Qué es HTML5?

¿Cuáles son las mejoras?

Etiquetas Obsoletas

Etiquetas modificadas

Lista de etiquetas HTML5

Atributos eliminados

Otros cambios

Estructura HTML5

Nueva estructuración del body

Otros elementos nuevos de estructuración

SCORM 8. NUEVOS ATRIBUTOS, EVENTOS Y PSEUDO-CLASES

Introducción a atributos globales

Nuevos atributos

Introducción a los nuevos eventos

SCORM 9. NUEVOS ELEMENTOS SEMÁNTICOS

Elemento bdi

Elemento command

Elemento data

Elementos details

Elemento mark

Elemento meter

Elemento progress

Elemento ruby

Elemento time

Elemento wbr

SCORM 10. MEJORAS EN LOS FORMULARIOS

Nuevos elementos para los Formularios

Cambios en el atributo type (input)

Nuevos atributos para form

Nuevos atributos para fieldset

Nuevos atributos para input

Nuevos atributos para textarea

SCORM 11. OTRAS MEJORAS DE HTML5

Introducción a los elementos multimedia

Etiqueta source

Etiqueta track

Elemento video

Elemento audio

Elemento embed

Elemento canvas

Introducción a MathML

Introducción a SVG

Introducción a Drag and Drop

Validador HTML5

SCORM 12. INTRODUCCIÓN CSS

Introducción CSS

Soporte de CSS en navegadores

Especificación Oficial

Funcionamiento básico de CSS

¿Como incluir CSS en la Web?

Estilo Básico

Medios CSS

Comentarios

Sintaxis de la definición

SCORM 13. SELECTORES, UNIDADES DE MEDIDA Y COLORES

Selectores CSS

Unidades de medida

Colores

SCORM 14. MODELOS DE CAJAS, POSICIONAMIENTO Y VISUALIZACIÓN

Modelo de Cajas

Propiedades de las cajas

Margen, relleno, bordes y modelo de cajas

Posicionamiento y visualización

Posicionamiento

Visualización

SCORM 15. ESTRUCTURAR UNA PÁGINA “LAYOUT”

Introducción a layout

¿Cómo centrar una página horizontalmente?

¿Cómo centrar una página verticalmente?

Estructura o layout

Alturas/Anchuras Máximas y Mínimas

Estilos avanzados

SCORM 16. TEXTO, ENLACES, IMÁGENES Y LISTAS

Textos en CSS

Enlaces

Imágenes

Listas

SCORM 17. TABLAS, FORMULARIOS Y SHORTHAND

Tablas

Formulario

shorthand

SCORM 18. OTRAS UTILIDADES DE CSS

Versión para imprimir

Personalizar el cursor

Hacks y filtros

Prioridad en las declaraciones

Validar CSS

Recomendaciones Generales

Recursos útiles

SCORM 19. FIREBUG

¿Qué es Firebug?

¿Como se instala?

¿Como usamos Firebug?

SCORM 20. INTRODUCCIÓN A CSS3

Introducción

Unidades, colores y fuentes

Nuevos Selectores y pseudo-clases

SCORM 21. ANIMACIONES, FONDOS Y BORDES

Propiedades para la animación

Nuevas propiedades para los fondos

Nuevas propiedades para Bordes

SCORM 22. CAJAS, CAJAS FLEXIBLES, COLORES Y FUENTES

Propiedades de las cajas

Propiedades de las cajas flexibles

Propiedades del color

Propiedades para las Fuentes

SCORM 23. ENLACES Y MULTI-COLUMNAS

Propiedades para los hiperenlaces

Propiedades de las multi-columnas

SCORM 24. TEXTO Y 2D/3D TRANSFORMACIONES

Propiedades para texto

Propiedad 2D/3D Transform

SCORM 25. TRANSICIONES E INTERFAZ DE USUARIO

Propiedades para las transiciones

Propiedades para la interfaz de usuario

Validación CSS3

CAMPO DE CONOCIMIENTO 2.CREACIÓN DE VIDEOJUEGOS CON JAVASCRIPT

SCORM 1. ¿POR QUÉ USAR JAVASCRIPT?

Introducción

Programación del lado del cliente

Programación del lado del Servidor

¿Qué utilizaremos?

¿Qué necesita saber?

Nuestro primer ejemplo

SCORM 2. INTRODUCCIÓN A JAVASCRIPT

La etiqueta SCRIPT

Contenido Alternativo

Variables

Tipos de Datos

Operadores

Cuadros de diálogo

Práctica 2

SCORM 3. CONCEPTOS BÁSICOS DE PROGRAMACIÓN

Introducción

Estructuras de decisión

Estructuras lógicas

Estructuras de repetición

Definir funciones

Llamadas a funciones

Ámbito de las variables

Práctica 3

SCORM 4. OBJETOS EN JAVASCRIPT

Introducción

La jerarquía de objetos

Propiedades y Eventos

Métodos

Práctica 4

SCORM 5. LOS OBJETOS LOCATION E HISTORY

¿Qué es un URL?

El Objeto Location

Redirigir a otra página

El Objeto History

Práctica 5

SCORM 6. EL OBJETO DOCUMENT

Introducción

La propiedad Title

Los colores de la página

El método write

El conjunto images

Práctica 6

SCORM 7. EL OBJETO FORM

Formularios HTML

El conjunto forms

La propiedad elements

Validar la información

¿Cuándo realizar la validación?

Tipos de Validación

Práctica 7

SCORM 8. LOS OBJETOS FRAME, NAVIGATOR Y SCREEN

El conjunto frames

El objeto navigator

El objeto screen

Práctica 8

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

SCORM 1. INTRODUCCIÓN A EASELJS

Introducción a EaselJS

Principales Clases de EaselJS

Hola mundo usando EaselJS

Animando elementos.

SCORM 2. DESCRIPCIÓN Y ESTRUCTURA DEL JUEGO

Introducción

Creando enemigo (Enemy.js)

Creando Jugador (Player.js)

Estructura de ContentPlayer.js

Index.html

Creando escenario (Tile.js)

XNARectangle

Creando niveles (Level.js)

PlaformHelper.js

Implantado la lógica del juego (PlatformerGame.js)

SCORM 3. CONFIGURACIÓN DE PERSONAJES Y ENEMIGOS

Introducción

Salto del Personaje

Tiempo Atrás

Los carteles (Overlays)

Meta

Crucis

- Creando Crucis.js

Añadir Enemigos

- La clase Enemy.js

- Incluyendo a los Enemigos

Mejora VII. Vivo o Muerto

- Muerto por tocar a un Enemigo

- Muerto por caerse