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
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.
Sin CSS los elementos se posicionan de acuerdo al flujo del html, que no es mas que el orden en el cual aparecen en nuestro código. Con CSS tenemos varias opciones para cambiar esto, pero de forma intuitiva no es tan fácil saber la diferencia entre cada uno.
Static: La opción por defecto no hay que especificarla, los elementos se ubican de acuerdo al flujo HTML, y esto no se puede cambiar, propiedades como left o top son ignoradas.
Relative: Relativo a si mismo, el elemento se va a ubicar de acuerdo al flujo HTML y se va a respetar el espacio ocupado
Absolute: Los elementos quedan fuera del flujo HTML, el espacio ya no es ocupado
Fixed: Los elementos se ubican de acuerdo al "viewport"
Para un mejor entendimiento de todo esto, te recomiendo ver el video que acompaña a esta entrada
El Float
El float no es una posición como tal, pero si nos permite posicionar los elementos, la confusión con esta propiedad proviene del hecho de que, aplica un comportamiento, no solo al elemento como tal, si no a todos los elementos que le sigan. Puede recibir, 4 valores, pero los mas importantes son dos, rigth y left, que en español significa derecha e izquierda respectivamente, cada uno hace que el elemento se ubique lo mas hacia el lado como sea posible y luego todos los elementos siguientes se ubican alrededor del lado opuesto. Para una mejor explicación te recomiendo ver el video que acompaña a esta entrada, a partir del minuto 13:22 que es donde comienza el apartado sobre el float
Las notificaciones se han convertido en un elemento ubicuo de cualquier aplicación web, mostrarlas nos permite tener un contacto mas directo y personalizado con nuestros usuarios. En este tutorial aprenderemos lo básico necesario para mostrar notificaciones en nuestro sitio web
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
Dependiendo de nuestro juego, el rendimiento puede llegar a ser un dolor de cabeza, y en general para el desarrollo de juegos es algo que casi siempre hay que tener presente, tanto en el video como en esta entrada voy a hablar de 3 técnicas para mejorar el rendimiento.
Pre-renderizar
Por una razón que cuesta un poco entender, es mas eficiente dibujar en un canvas virtual y luego cargar todo al canvas principal, que directamente dibujar en un solo canvas. Esto es muy sencillo de lograr.
Primero el canvas virtual lo hacemos así :
var preRender = document.createElement("canvas");
var vctx = preRende.getContext("2d");
Todo el juego va a ser dibujado usando este contexto "virtual", y luego en el canvas "real" hacemos así:
ctx.drawImage(preRender, 0, 0);
Donde "ctx" es el contexto del canvas "real"
Extracción de propiedades
Cuando limpiamos el canvas usando "clearRect" y en alguna otra circunstancia, aveces hacemos cosas como: "canvas.width" si esto se hace dentro de nuestro bucle de juego, en cada iteración se va a extraer la propiedad del objeto a través del DOM lo cual requiere mas trabajo que pasar el número directamente, o crear una variable que almacene el valor una sola vez:
var anchoJ = canvas.width;
var altoJ = canvas.height;
Luego en nuestro bucle de juego las usamos así:
canvas.clearRect(0,0,anchoJ,altoJ);
En lugar de "extraer" la propiedad en cada iteración
Limpiar solo las diferencias y no to el canvas
Para lograr la animación es necesario el uso de "clearRect", pero no siempre es necesario que se limpie todo el canvas, podemos limpiar solamente lo que necesitemos ahorrandonos una infinidad de recursos en el camino. Esto puede variar dependiento de cada juego, puedes ver un ejemplo en mi video, pero en general sería algo así :
canvas.clearRect(prevX, prevY, ancho, alto);
Donde las variables "prevX" y "prevY" son las últimas posiciones "X" e "Y" utilizadas, las variables "ancho" y "alto" van a depender también del área que queramos limpiar. Una forma de tratar esto, como lo hago en mi video es que cada objeto en su función de movimiento, se limpie a si mismo, por lo que estas dos últimas variables sería en ancho y alto del objeto en cuestión.
Descargas
Aquí puedes descargar el código fuente hecho en el video:
Puedes empezar el tutorial con el mismo html que yo utilicé aunque da igual si utilizas un formulario creado por tí
http://adf.ly/1dAUFG (Lee la aclaratoria sobre los enlaces al final de la entrada)
Si solo quieres las imágenes que yo utilicé las puedes descargar en el siguiente enlace:
http://adf.ly/1dAUJB (Lee la aclaratoria sobre los enlaces al final de la entrada)
La importancia de la validación
La validación no es más que la verificación de los datos antes de que estos puedan ser procesados por nuestro servidor.
Existe un tipo de ataque conocido como Inyección SQL que consiste en enviar código malicioso a través de los formularios, más información sobre este tipo de ataque puedes ver el siguiente enlace:
La verificación más importante que debemos hacer consiste en evitar que un atacante pueda ingresar Javascript o SQL a través de nuestros formularios, también en evitar que se envíen espacios en blanco para que nuestra base de datos no se llene de datos basura
La diferencia entre el servidor y el cliente
En el cliente, la validación ocurre en el navegador mismo, por lo tanto se lleva a cabo usando herramientas disponibles en el navegador, como por ejemplo HTML5 CSS3 y JavaScript.
En el servidor, la validación ocurre una vez que la información ha sido enviada a este a través de un formulario, esta se lleva a cabo con tecnologías disponibles en el servidor como PHP JSP Node.JS ASP etc
Como escribir patrones para el atributo "pattern"
Las llaves [ ]
Indican que caracteres debemos colocar, a continuación unos ejemplos :
[abc] Solo se puede escribir "a","b" o "c" puede ser por ejemplo: "ccc", "bbb", "aaa" o cualquier combinación que solo tenga una de las tres letras
[^abc] Al colocar el "acento circunflejo" (Es el nombre de ese signo) estamos pidiendo que se permita cualquier carácter excepto "a", "b" o "c", esto significa que se van a admitir, números, caracteres especiales y letras, siempre y cuando estas últimas no sean una de esas tres
[a-z], [0-9] o [A-Z] Con el guión podemos especificar un rango de caracteres, en el primer caso cualquier letra que vaya de la "a" hasta la "z" en minúscula, estos se pueden combinar sin necesidad de espacios de la siguiente forma: [a-zA-Z0-9]
[\s] o [\n] De igual forma que hicimos en el primer ejemplo podemos especificar estos caracteres para pedir que se solicite un espacio en blanco o una nueva linea respectivamente
\ El "slash invertido" lo usamos para poder identificar caracteres especiales por ejmplo si queremos solicitar que se coloquen guiones [\-] si se colocara el guión solamente pudiera causar conflicto ya que como vimos arriba este se usa para denotar rangos
\d Cualquier número, en este caso no es necesario colocar las llaves ([])
\D Cualquier letra o carácter especial, la igual que arriba no es necesario colocar as llaves
Los corchetes { }
Indican la cantidad de caracteres que debemos colocar:
{7} Aquí exigimos 7 caracteres obligatoriamente, ni mas ni menos
{2,9} Siempre tiene que haber como mínimo 2 y no más de 9
En resumen, con la coma (,) creamos rangos para cantidad y con el guión (-) creamos rangos para el tipo de carácter
Ejemplos de patrones
Código postal Venezolano : Deben ser 4 números entre 0 y 9
[0-9]{4}
Código postal Mexicano : Contiene 5 dígitos 4 números agrupados de dos en dos y separados por un guión
[0-9]{2}[\-]{1}[0-9]{2} o también \d{2}[\-]\d{2}
Número de teléfono formato USA internacional : debe ser algo así +99(99)9999-9999
[\+]\d{2}[\(]{1}\d{2}[\)]\d{4}[\-]{1}\d{4}
También cuando queramos un solo carácter no hace falta que especifiquemos el {1} por lo que lo de arriba puede quedar de forma más corta de la siguiente manera:
[\+]\d{2}[\(]\d{2}[\)]\d{4}[\-]\d{4}
Fecha formato dd/mm/aa:
\d{2}[/]\d{2}[/]\d{2}
Más información sobre los patrones
A continuación comparto contigo una enlace a un sitio web que contiene una lista grande de patrones ya creados que puedes usar, adicionalmente te permite crear tus propios patrones de forma muy sencilla, el único problema es que este sitio está en inglés:
http://adf.ly/1dASXo (Lee la aclaratoria sobre los enlaces al final de la entrada)
Códigos fuente
En el enlace a continuación puedes descargar el formulario ya terminado, para que leas y compares el código fuente que yo escribí:
http://adf.ly/1dAUNf (Lee la aclaratoria sobre los enlaces al final de la entrada)
Aclaratoria sobre los enlaces
Los enlaces en este blog tienen un pequeño anuncio publicitario patrocinado por Adfly, luego de hacer clic esperas unos segundos y aparecerá un botón con el texto "Saltar publicidad" debes hacer clic ahí para llegar a la página de destino. Este patrocinio me permite producir más material como este, si te parece que los anuncios son incómodos o no llevan la página de destino escríbeme inmediatamente, puedes hacer un comentario aquí o en mi canal de Youtube
