Técnico en Programación de Videojuegos con HTML5, JavaScript y CSS3

Parte 1. Diseño web avanzado con html5 y css3

1. Herramientas necesarias

1. introducción
2. editor de texto
3. navegadores

2. Introducción html

1. introducción html
2. ¿cómo creamos documento html?
3. caracterí­sticas básicas

3. Texto, enlaces, listas, imígenes y objetos

1. textos en html
2. enlaces
3. listas en html
4. imágenes y objetos

4. Tablas, formularios y estructuras

1. tablas
2. formularios
3. estructuras y layout

5. Otras etiquetas importantes

1. otras etiquetas importantes

6. Metainformación, accesibilidad y validación

1. ¿qué es la metainformación?
2. accesibilidad
3. validación

7. Introducción css

1. introducción css
2. soporte de css en navegadores
3. especificación oficial
4. funcionamiento básico de css
5. ¿cómo incluir css en la web?
6. estilo básico
7. medios css
8. comentarios
9. sintaxis de la definición

8. Selectores, unidades de medida y colores

1. selectores css
2. unidades de medida
3. colores

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

10. 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 y layout
5. altura/anchuras máximas y mí­nimas
6. estilos avanzados

11. Texto, enlaces, imígenes y listas

1. textos en css
2. enlaces
3. imágenes
4. listas

12. Tablas, formularios y shorthand

1. tablas
2. formulario

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

14. Firebug

1. ¿qué es firebug?
2. ¿como se instala?
3. ¿como usamos firebug?

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

16. Nuevos atributos, eventos y pseudo-clases

1. introducción a atributos globales
2. nuevos atributos
3. introducción a los nuevos eventos.

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

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

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

20. Introducción a css3

1. introducción
2. unidades, colores y fuentes
3. nuevos selectores y pseudo-clases

21. Animaciones, fondos y bordes

1. propiedades para la animación
2. nuevas propiedades para los fondos
3. nuevas propiedades para bordes

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

23. Enlaces y multi-columnas

1. propiedades para los hiperenlaces
2. propiedades de las multi-columnas

24. Texto y 2d/3d transformaciones

1. propiedades para texto
2. propiedad 2d/3d transform

25. Transiciones e interfaz de usuario

1. propiedades para las transiciones
2. propiedades para la interfaz de usuario
3. validación css3

parte 2. Programación de píginas web con javascript (cliente)

1. Introducción a las píginas web

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

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

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

4. Objetos en javascript

1. introducción
2. la jerarquí­a de objetos
3. propiedades y eventos
4. métodos
5. práctica 4

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

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

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

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. Programación de videojuegos con html5

1. El canvas (i)

1. introducción
2. el canvas
3. como usar el canvas
4. lí­neas
5. rectángulos
6. fillstyle y strokestyle
7. dos ejemplos más

2. El canvas (ii)

1. curvas
2. arcos
3. la clase math
4. curvas cuadráticas
5. rectángulos redondeados
6. el modelo bezier

3. El canvas (iii)

1. imágenes
2. dibujar varias imágenes
3. escalar una imagen
4. mosaico de imágenes
5. grosor de lí­neas
6. extremos en las lí­neas
7. uniones entre lineas
8. limite de punta de angulo

4. Processing.Js (i)

1. introducción
2. primeros pasos con processing.Js
3. processing.Js mediante processing
4. crear una sencilla animación mediante el lenguaje processing
5. processing.Js utilizando javascript
6. definir interacción con el usuario con processing.Js

5. Processing.Js (ii)

1. acceso a recursos javascript desde el lenguaje processing
2. acceso a processing cuando estamos en javascript
3. ejemplo de acceso ente processing y javascript
4. usar imágenes en processing.Js

6. Easel.Js (i). Introducción

1. introducción a easeljs
2. descargando la librerí­a easeljs
3. nuestra imagen del esqueleto
4. index.Html
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

7. Easel.Js (ii). Detección de colisiones

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

8. Easel.Js (iii). Mejorando nuestro videojuego

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

9. Easel.Js (vi). Añadiendo funcionalidad

1. mejora i. El salto
2. mejora ii. El tiempo
3. mejora iii. Overlays
4. mejora iv. La meta
5. mejora v. Recolectando crucis
6. mejora vi. Los enemigos
7. mejora vii. De vivo a muerto