1 - Juegos Multimedia HTML5 - Curso de creación de juegos y manejo de elementos multimedia en HTML5

¡Bienvenido a un nuevo curso!, una serie de videotutoriales en la que aprenderás a manejar los principales elementos y tecnologías multimedia que te ofrece HTML5, el nuevo estándar de la web. Para poder usar todas esas nuevas características es necesario hacer uso de Javascript, por lo que estaremos trabajando continuamente con él a lo largo de los capítulos del curso. La última versión hasta la fecha de CSS, la versión 3, será estudiada por encima (@font-face, @keyframe, transiciones y algunas cosas más). Para saber exactamente qué es lo que debes saber antes de empezar, deberías leer la sección ¿Quién eres tú? que se encuentra un poco más abajo.
Conceptos como las etiquetas de audio, vídeo o dibujar formas básicas en un canvas, no serán explicados muy a fondo debido a que tienes a tu disposición miles de páginas en castellano dedicadas a ello. En este curso nos intentaremos centrar en aquellas cosas que no están tan claramente explicadas por todos lados, es decir, en aquellas APIs que cuentan con pocas buenas explicaciones en castellano (como Web Audio API, Web Speech API...). Esto no quiere decir que no vayamos a ver cosas tan básicas como realizar un loop de pintado y actualizado para nuestras animaciones o juegos, menús para nuestras aplicaciones...
El objetivo principal del curso es ser conocedor de las tecnologías que tenemos a nuestro alcance. Con los cimientos básicos de cada uno de los temas tratados en los vídeos te resultará mucho más fácil investigar por tu cuenta aquellas cosas que más te interesen.

¿Quién eres tú?

Eres alguien que tiene conocimientos básicos tanto de HTML como de CSS y conocimientos (cuanto más avanzados mejor) de programación. Javascript no es un lenguaje que cueste mucho de aprender, así que si ya conoces algún lenguaje del estilo de C no te resultará nada difícil familiarizarte con él. Si ya sabes algo de Javascript entonces perfecto. Conforme vayas avanzando en el curso te darás cuenta de lo que voy dando por hecho que sabes. No te preocupes si alguna de esas cosas no las sabes usar, siempre podrás pausar el vídeo y buscar información en internet para resolver tus dudas ;) Te adelanto que trabajaremos con JSON y con POO.
Además eres una persona que posee un ordenador (con Windows o Linux) con un procesador de texto  plano (tipo Bloc de notas) y una de las versiones más recientes de Google Chrome. Una cosa que seria también interesante tener instalado: un servidor web (recomendado AppServ para Windows y LAMPP para Linux). Hay unos cuantos ejemplos que precisan de él para que funcionen. Si no quieres instalarte ningún servidor, siempre puedes utilizar un servidor remoto (ahora puedes usar Google Drive como servidor. Aprende a usarlo aquí), o bien, saltarte dichos ejemplos (se que eso último no lo vas a hacer porque también eres una persona con muchas ganas de aprender ;)

¿Qué vamos a crear durante el curso?

Antes de empezar a hacerte una lista de todas las cosas que haremos, prefiero dejarte un enlace en el que encontrarás todos los archivos html que deberás de ser capaz de realizar si sigues el curso. Están subidos a Google Drive, que actúa como servidor (si quieres saber cómo usar el Drive como un servidor, te vuelvo a recordar que puedes aprender a hacerlo desde aquí. Te podrá ser muy útil para realizar ejemplos del curso que requieren de un servidor para que no aparezcan errores de cross-origin). Mira todos los archivos que quieras y échale un vistazo al código si te apetece.


Vídeo.

El curso se compone de una serie de vídeos, habrá un vídeo por cada capítulo. Junto al vídeo siempre podrás encontrar en el blog unos cuantos párrafos que explicarán qué es lo que se va a exponer en el vídeo. No podrás seguir el curso sin ver el vídeo porque es en ellos donde realmente se encuentra las explicaciones. Lo que se escribe en los artículos del blog no es más que un resumen de los contenidos de los vídeos. Dicho esto os dejo con el primer vídeo de la serie :)


Ejemplo en acción.

Como la página que hemos desarrollado en este videotutorial se trata de una página sencilla, os dejo a continuación el resultado. Es simplemente un canvas con un rectángulo naranja. No podrás guardar el rectángulo naranja en el disco duro usando el botón derecho porque no es una imagen (eso si, puedes guardar la página html). También puedes asegurarte de que es un canvas viendo el código fuente del blog. Si estas en Google Chrome prueba a pulsar con el botón derecho sobre el canvas y hacer clic en inspeccionar elemento para ver directamente la parte del código a la que corresponde dicho elemento.

Tu navegador no soporta el elemento canvas de HTML5.

Código.
<!DOCTYPE html>
<html>
    <head>
        <title>
            Pruebas HTML5
        </title>
        <script>
            window.onload = function () {
                var canvas = document.getElementById("c");
                var context = canvas.getContext("2d");
                context.fillStyle = "#F91";
                context.fillRect(0, 0, 400, 400);
            }
        </script>
    </head>
    <body>
        <canvas id="c" width="400" height="400">
            Tu navegador no soporta el elemento canvas de HTML5.
        </canvas>
    </body>
</html>

¿Qué viene ahora?

Para iniciarnos en todos estos temas sobre el manejo de elementos multimedia en la red, durante los siguientes 6 videotutoriales veremos de una forma muy detallada como realizar una página web en la que aparezcan fuegos artificiales. Visita este enlace para ver la página en funcionamiento.
Además de ver el uso del elemento canvas y de aprender los principios básicos de la animación (loop para pintar y actualizar), con éste ejempo también aprenderemos algo de CSS3 para conseguir un título muy llamativo.

Capítulo número 2 del curso.

Índice del curso.

NOTA: Se agradecen críticas constructivas sobre el contenido del curso y la forma de explicar las cosas :D

10 comentarios :

  1. ¡Genial curso !
    Colgaré un enlace en mi blog.

    ResponderEliminar
    Respuestas
    1. Muchas gracias, es todo un detalle :)
      Siento que actualmente no podamos dedicarle al curso el tiempo necesario como para subir un videotutorial a la semana. Va más lento pero va.
      Un saludo!

      Eliminar
  2. hola, tengo un problema hice el ejemplo del primer video pero al momento de abrirlo en el navegador no me aparece el cuadro naranja

    ResponderEliminar
    Respuestas
    1. ¿te van los fuegos artificiales del enlace?

      Eliminar
    2. a mi me van los fuegos, pero tengo el mismo problema, sale en negro el cuadro

      Eliminar
    3. le di muchas vueltas.. y era que context.fillStyle = "#F91"; lo escribi son S minuscula... gracias igualmente

      Eliminar
    4. Copiar y pegar el código que pongo en los artículos para probarlos. De todas formas voy a poner ese canvas con un rectángulo naranja en el artículo, para que así lo veáis funcionar.

      Eliminar
  3. Hola MUY BUEN CURSO,Quería saber si es necesario incluir el width y el height en la etiqueta canvas ?

    ResponderEliminar
    Respuestas
    1. Hola Anónimo :)

      No, no es necesario especificarlos en la etiqueta. Posteriormente desde JavaScript se le puede cambiar el tamaño. Bastaría con obtener el canvas del document con:

      var canvas = document.getElementById("c");

      Y modificar sus propiedades:

      canvas.width = 250; // ancho en pixels
      canvas.height = 250; // alto en pixels

      ¡Un saludo!

      Eliminar
  4. hola como puedo agregar un menu de dificultad? se que tiene q ver con el timesetout pero no puedo hacer q valla mas rapido o lento, gracias por tu ayuda

    ResponderEliminar