Como usar la Web Workers API

Para ver en youtube has clic aquí

(No olvides suscribirte)

Los Web Workers

   Normalmente javascript se ejecuta en un solo hilo, esto significa que todos los procesos corren uno detrás de otro, un proceso debe esperar a que termine el anterior para poder ejecutarse, esto significa que si tenemos una aplicación web compleja, y no tomamos en cuenta la complejidad de cada proceso individual, esta podría llegar a colgarse, esto podría ser el resultado de un solo proceso que este tomando mas tiempo del que teníamos previsto. Un web worker nos permite crear hilos independientes de ejecución, como los Threads en java, hilos que no se interrumpen entre sí, lo cual nos permite crear aplicaciones web mucho mas complejas y seguras.

  Mira el video tutorial para aprender como implementar esta API

Descargas

Plantilla HTML de inicio

Código fuente final

Como usar la Gamepad API

Para ver en Youtube has clic aquí

(No olvides suscribirte)

GamePad API

     Hacer juegos interesantes en javascript no solo consiste en desarrollar el juego propiamente dicho, también un buen juego es aquel que brinda a los jugadores de buenas opciones de interactividad, que mejor forma de interactuar con un juego que con un Gamepad, anteriormente acceder al hardware desde el navegador requería de plugins, pero la evolución constante de este lenguaje ahora nos permite acceder entre otras cosas a los Gamepads conectados en nuestra computadora, en el tutorial de arriba aprenderemos a utilizar esta API.

Descargas

Código fuente final

Que es y como usar la Web Animations API

Para ver en youtube clic aquí

(No olvides suscribirte)

  En este nuevo tutorial del canal, aprenderemos a utilizar la Web Animations API, que nos permite animar los elementos del DOM, accediendo a las mismas características disponibles en las animaciones CSS3, esto se logra combinando el modelo de tiempo con el modelo de animación. Como veremos la sintaxis a utilizar recuerda mucho a los "@Keyframes" usados en CSS3, pero la potencia de un lenguaje de programación nos permitirá un mayor control de la misma

¿Que diferencia tiene con requestAnimationFrame?

  Esa es una buena pregunta, si te la estas haciendo felicidades, básicamente Web Animations API va de la mano con el DOM, por lo que sirve exclusivamente para animar elementos presentes en el DOM, no podremos usarla para animar pixeles dentro del Canvas.

  En el video de la próxima semana se hablará mas profundamente sobre esto así que te recomiendo pasarte por el canal y suscribirte

Descargas

Plantilla de inicio HTML

Código fuente completo del tutorial

Crear un Paint en Javascript Canvas

Para ver en youtube clic aquí
Para ir a mi canal de Youtube clic aquí (No olvides suscribirte)

  En el video que acabas de ver aprenderás como hacer un paint en Javascript usando un elemento Canvas para dibujar, descubrirás que es muy sencillo el código es un poco largo pero no tiene complicaciones

¿Que imagenes puedo usar para mis cursores?

  Actualmente Chrome, Firefox y Safari soportan cualquier archivo de imagen soportado por el navegador mismo excepto el formato .ANI 

  Internet Expolorer solo soporta formatos .CUR y .ANI a continuación te dejo el enlace a una página para convertir cualquier imagen a formato .CUR : convertir a .cur online

  Con respecto al tamaño, lo ideal es utilizar imagenes de 32x32 actualmente cualquier tamaño es soportado, el tamaño comentado anteriormente es solo una recomendación.

  Si usas una imagen gif animada como cursor la animación no será reproducida

  Puedes usar cursores con transaparencias pero estos solo se veran en Sistemas operativos superiores a XP ya que esta es una limitación del S.O

Código Fuente

  A continuación el código fuente completo del videotutorial, sigue el enlace para descargarlo

Haz clic aquí para descargar el código fuente

Plantilla HTML

  Si solo quieres practicar tu Javascript y no quieres perder tiempo escribiendo la parte CSS y HTML puedes descargar este documento HTML que contiene lo mismo de arriba excepto la parte Javascript :  Haz clic aquí para descargar la plantilla HTML

Imágenes

  A continuación un archivo de Winrar que contiene 4 imágenes dos del lapiz y del borrador, una para usar como cursor y la otra para usar como botón :

 Haz clic aquí para descargar las imágenes