Aprender HTML5 sin dolor

Un aspecto muy importante del HTML5 son las etiquetas estructurales, ya que le dan significado a las partes de un documento HTML5.

Como deberá suponer, con la etiqueta <header> agruparemos todos los elementos que identifican a la página. Como logos y títulos. Muchas veces incluye a la zona de navegación o menú o la zona para banners.

La etiqueta estructural SECTION nos servirán para agrupar otras divisiones.

La etiqueta ARTICLE nos servirá para delimitar el contenido más importante de la página. Si este contenido es movido a otro contexto, su significado no cambiaría.

Dentro de la etiqueta ASIDE guardamos el contenido que no es muy importante, como anuncios, ligas a otras páginas, etc., de tal manera si lo eliminamos, la página no pierde su significado.

En la etiqueta FOOTER podremos guardar la información que va al final de la página, como los derechos de autor, menús suplementarios, etcétera.

Dentro de la etiqueta NAV almacenamos los objetos de navegación.

En este video se construirá una página Web por medio de las etiquetas estructurales de HTML5.

Las nuevas características de las formas en HTML 5, son de las menos implementadas en los diferentes navegadores, al menos al momento de realizar este video.

Con la nueva caja de entrada email, podemos validar un correo electrónico. El mensaje no se puede modificar y depende de cada uno de los navegadores.

Con la caja URL podremos verificar una dirección de internet. El mensaje no se puede modificar y depende de cada uno de los navegadores.

La caja TEL, para validar un número telefónico, no está implementado en ningún navegador, al menos al momento de realizar este video.

La nueva caja NUMBER crea un conjunto de números enteros, donde podemos delimitar los valores mínimos y máximo, así como el número de números que puede avanzar. Por default el valor es uno.

Con la nueva caja RANGE tendremos un deslizador, donde podemos delimitar los valores mínimos y máximo, así como el número de números que puede avanzar. Por default el valor es uno.

Con esta nueva caja, tendremos un calendario donde podremos seleccionar una fecha.

Con la nueva caja de color, podremos seleccionar, dependiendo del sistema operativo, un color en forma gráfica.

El nuevo parámetro autofocus determina la caja donde se colocará el cursor en forma predeterminada.

El nuevo parámetro placeholder nos permite escribir alguna instrucción dentro de la caja, las cuales desaparecen al momento que se escribe sobre ella.

Con el nuevo parámetro pattern podemos utilizar la validación con expresiones regulares.

El parámetro required determinamos que un campo es requerido y si trata de enviar el formulario el usuario sin él, el navegador nos enviará un mensaje de error.

autocomplete:La propiedad de autocompletar establece o devuelve el valor del atributo de autocompletar en un campo de texto.

El evento input se dispara cuando el valor (value) de un elemento <input>, <select>, o <textarea> ha sido cambiado.

En este video veremos las nuevas pseudoclases con las cuales podremos añadir nuevas clases de estilo, entre otros efectos.

Las etiquetas más esperadas en HTML5 son <video> y <audio> que nos permiten manejar diferentes formatos tanto de audio como de video.

Una de las características más gustadas y potentes de HTML 5 es poder desplegar video desde el mismo HTML. Gracias a la etiqueta video lo podemos hacer.

HTML5 trae nuevos formatos, lo cual desata una nueva guerra de los mismos. En este video te mostraremos la forma de reproducirlos.

Por medio del parámetro preload podemos precargar el video para una mejor experiencia del usuario en la reproducción del video.

Por medio del parámetro autoplay podemos hacer que el video se reproduzca en forma automática. Sin embargo, este parámetro no funciona en los dispositivos móviles de Apple.

Con el parámetro loop haremos que un video se reproduzca nuevamente cuando este llegue a su fin. Hay que tener cuidado con no consumir mucho ancho de banda.

Una característica del video en HTML 5 es que podemos añadir un poster o imagen previa, antes de ejecutar un video sobre esta tecnología.

También podemos modificar las dimensiones del video con los parámetros width y height, pero hay que tener cuidado en no distorsionar el video, lo cual puede afectar al desempeño del mismo, y en algunos navegadores, no permite la distorsión..

Uno de los refranes más socorridos en el desarrollo de los sistemas es: prueba, prueba y prueba (test, test, and test). En este video ejecutaremos los formatos de video en diferentes navegadores. Nunca te arrepentirás de probar tu página en cuanto navegador te sea posible.

Otras de las características más poderosas de HTML5 es el CANVAS, con el cual podremos hacer animaciones y interacciones al igual que otros paquetes como Adobe Flash, aunque no tenemos las facilidades de este último.

En este video veremos algunas características fundamentales del canvas, asi como la forma de verificar que nuestro navegador soporte CANVAs de HTML 5.

El contexto es la parte que en realidad manejaremos del canvas. Podemos definirlo como 2D o 3d, aunque este último aún no existe.

Al igual que muchos paquetes de dibujo, en el canvas podemos hacer las figuras de relleno y los contornos. Recuerde que el canvas es más parecido a "Paint" que a "Illustrator", pues siempre hacemos dibujos en bit maps, no en vectores.

La forma más sencilla para dibujar es la línea. Tendremos que mover primero las coordenadas y luego indicarle al API de dibujo, en qué coordenada deseamos terminar la línea.

Una característica muy útil al momento de hacer dibujos o animaciones con el CANVAS será el poder guardar las características del mismo en una memoria, y restaurar la misma. Aunque es aparentemente sencilla, nos permitirá hacer animaciones complejas con ella.

Otra forma de dibujar en el canvas de HTML5, es por medio de los arcos y de unir varias líneas, lo cual lo llamaremos un "camino" o path.

Podemos crear gran variedad de degradados o gradientes utilizando los métodos de canvas y añadir muchos colores a nuestros degradados.

Podemos crear gran variedad de degradados o gradientes utilizando los métodos de canvas y añadir muchos colores a nuestros degradados.

También podremos cambiar la dirección de un degradado en forma diagonal, horizontal y vertical.

Podemos hacer gradientes radiales, tomando como base dos círculos, su posición y su radio.

Un uso común en el manejo del canvas es poder cargar diferentes patrones de archivos de imágenes y utilizarlos como patrones en las figuras que creemos.

Todas las formas y textos que creemos dentro del CANVAS de HTML5 le podremos añadir sombras y cambiar la amplitud, color y dirección de las mismas.

Un punto muy importante cuando animamos o graficamos en el canvas es poder hacer un grid o cuadrícula que nos permitirá ubicar a nuestros objetos en el espacio.

Para iniciar nuestro plano cartesiano dibujaremos dos líneas y definiremos los parámetros iniciales para ello.

Dibujaremos dos líneas dentro de nuestra cuadrícula para simular los ejes x y y.

Para poder ubicar los objetos en el eje, necesitaremos marcas cada cuadro. Dibujaremos marcas más largas que otras en intervalos regulares para aumentar la visualización.

Para poder interactuar con el usuario, es necesario controlar los eventos. En este inciso mostraremos cómo controlar los eventos del ratón, como cuando se pulsa y se levanta el mismo sobre el canvas.

Las coordenadas que nos regresa los eventos son los de la ventana del navegador, no los del canvas, por lo que es necesario ajustarlos.

Definiremos los puntos iniciales y finales por medio de pulsar dos veces sobre el canvas. Dibujar una línea será muy sencillo cuando tenemos estos dos puntos.

Una vez que tenemos las coordenadas ajustadas podemos hacer dibujos determinando el punto inicial, cuando pulsamos el ratón, y el punto final, cuando lo levantamos.

Aumentaremos controles para dibujar líneas de diferentes colores, grosores, asi como un botón para limpiar nuestras líneas desde fuera del canvas y veremos cómo comunicar a los controles, como los comboboxes y botones con el canvas por medio de JavaScript.

Por medio del CANVAS de HTML5 podemos animar objetos, tal como lo hacemos con Flash (snif, snif), peo nosotros nos debemos encargar de borrar y volver a dibujar las figuras. No resulta tan complicado, como se verá en las siguientes vídeos.

Para que la pelota se mueva necesitamos un “motor”, el cual nos lo proporcionará JavaScript. Para ello utilizaremos la función setInterval, que es de uso general, pero nos servirá para hacer animaciones básicas.

Ya que tenemos el motor, necesitamos borrar y redibujar la pelotita, que es lo que hacen los paquetes de animación, pero en este caso nosotros tenemos que hacerlo. En este video, ya que es una animación básica, borraremos todo el canvas. En animaciones más elaboradas, sólo tendremos que borrar y redibujar el espacio del objeto.

Las colisiones son fundamentales para cualquier animación. Para ello utilizaremos un viejo truco que es primero calcular la nueva posición y luego la verificamos. También determinaremos los límites del movimiento izquierdo y derecho.

El proceso de animar en el eje de las “yes” es similar al de las “equis”. Calculamos los límites de arriba y abajo, calculamos la nueva dirección y ajustamos. Con ello tendríamos una animación sencilla por medio del canvas de HTML5.

Por medio del canvas de HTML 5, podemos desarrollar juegos como el clàsico de Memoria. En esta sección haremos un juego de memoria con número y posteriormente desarrollaremos otro con imágenes. Las variantes a este juego clásico son casi ilimitadas y muy divertidas.

Para almacenar la información de las cartas, utilizaremos un objeto de JavaScript. Ahi almacenaremos las coordenadas de la carta, el valor del número, así como una función muy sencilla para dibujar la misma.

Por medio del objeto carta, y algunas coordenadas iniciales, pintaremos en el canvas las cartas del juego, así como crear el arreglo donde almacenaremos la referencia de los objetos, con lo cual crearemos la lógica del juego de Memoria.

Ahora que ya tenemos creadas las cartas en el tablero, tenemos que barajarlas ya que de momento, tienen el orden de origen, lo cual no es divertido como juego. Utilizaremos un algoritmo sencillo de intercambio de valores.

El único evento que podemos utilizar, ya que canvas no maneja objetos, es cuando el usuario hace clic sobre el canvas. A estas coordanas necesitamos ajustarlas, ya que están consideradas como el punto origina, la esquina superior izquierda del navegados, no del canvas.

Ya con las coordenadas ajustadas, nos bastará con recorrer todas las cartas (que las tenemos en el arreglo) y determinar en cuál de ellas se encuentra el punto con una simple sentencia condicional. A partir de ahi, nuestro algoritmo es el mismo que utilizamos en otros paquetes, como Flash o jQuerys.

Una vez que ya sabemos la carta que fue seleccionada por el usuario, tenemos que proceder a “voltearla”, es decir, pintarla de un color diferente y dibujar el número en ella. Utilizaremos una variable booleana para determinar si es la primer selección del usuario.

El proceso de selección de la segunda carta es muy similar al de la primera, solo que después de seleccionar las cartas, debemos de “voltearlas” antes que decidir si las dos cartas son “iguales”

El proceso de selección de la segunda carta es muy similar al de la primera, solo que después de seleccionar las cartas, debemos de “voltearlas” antes que decidir si las dos cartas son “iguales”

Para terminar esta parte del juego, crearemos un contador de cartas pares encontradas, con lo cual sabremos cuando el juego ha terminado.

Una vez que tenemos el juego de memoria con números nos será muy sencillo el hacer variaciones sobre el mismo tema... en este caso haremos un juego de memoria con imágenes.

Los últimos ajustes serán al momento de barajar las imágenes y de terminar el juego. Con esto damos por concluida la sección de crear juegos de memoria con CANVAS-HTML 5.

Para concluir el juego, debemos de modificar la información que intercambiamos al azar y verificar la fora en que concluimos el juego. Con ello damos por finalizado la sección de desarrollo de un juego de memoria con el canvas de HTML5.

Desplegar la palabra letra por letra en el canvas