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

  • Saber programar un Videojuego utilizando HTML5, JavaScript y CSS3.
  • Aprender a crear guiones o scripts que se incluyen en las páginas web y que son ejecutados por el navegador que utiliza el usuario. Tareas como la validación de los datos enviados por el usuario en un formulario pueden ser llevadas a cabo mediante la programación del lado cliente.
  • Estudiar el lenguaje JavaScript, así­ como su estructura y funciones.
  • Estudiar el concepto de Modelo de Objetos del Documento o DOM.
  • Estudiar las novedades que aportan HTML5 y CSS3 como evolución de los dos principales estándares web.

Dirigido a

Trabajadores y autónomos.

Metodología

A distancia / online

Precio

100% Bonificable

Infórmate, es GRATIS


Temario

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

Cursos relacionados

Curso Superior de Microsoft Publisher 2010

Curso de especialización en este popular programa de diseñoy maquetación, perfecto para adentrarse en este mundo y adaptado a numerosos ámbitos como el marketing, la impresión, el diseño publicitario, etc.

Conocer todas las herramientas y técnicas de programación utilizadas en el desarrollo de aplicaciones compatibles con iPhone, iPad e iPod Touch.Aprender conceptos de programación que se ponen de inmediato en práctica.Aprender a construir verdaderas aplicaciones que están diseñadas y comprobadas con especial cuidado para que ilustren los conceptos...

Analista Programador Javascript

Aprender sobre UML 2.0 para la iniciación al mundo de los patrones de diseño de software.Conocer los elementos de modelado a partir de ejemplos pedagógicos extraídos del mundo de los caballos. Conocer los diferentes diagramas de UML 2, desde la descripción de los requisitos a partir de casos de uso, hasta el diagrama de componentes pasando por los diagramas de interacción, de clases, de...

Aprende a crear páginas web mediante la aplicación informática Dreamweaver MX, empleando imágenes de sustitución, zonas interactivas, capas y elementos flash, a nivel profesional. Con este curso conseguirás programar con PHP el lenguaje de programación más extendido en los entornos web. Mejora profesionalmente con las herramientas...

El comercio electrónico ha adquirido una gran importancia.Aprende a realizar todo tipo de portales enfocados al comercio electrónico y aprende a posicionarlos con el curso de SEO. 

Con el desarrollo tan brutal que ha tenido el mundo web y la influencia total que ha adquirido en numerosos procesos diarios, la usabilidad ha adquirido una importancia vital. Ayudando al usuario a realizar y entender cómo usar las herramientas y procesos webs. Este curso te permitirá desarrollar tus conocimientos en este campo.

Composición de Textos en Productos Gráficos

Crear páginas maestras, ordenando y clasificando los espacios, siguiendo las indicaciones de un boceto dado y utilizando un programa informático de maquetación. Seleccionar fuentes tipográficas en función de unas supuestas instrucciones para su realización.

El mundo online evoluciona muy rápido y hoy día es imprescindible para cualquier empresa tener una presencia continuada en internet. Este máster te capacita para desarrollar webs y aplicaciones, tanto en temas de diseño como de programación.