HTML5
4.0 (2 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
125 students enrolled
Wishlisted Wishlist

Please confirm that you want to add HTML5 to your Wishlist.

Add to Wishlist

HTML5

Aprenda a la poderosa herramienta que ha revolucionado la Internet
4.0 (2 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
125 students enrolled
Last updated 8/2016
Spanish
Current price: $10 Original price: $20 Discount: 50% off
5 hours left at this price!
30-Day Money-Back Guarantee
Includes:
  • 18.5 hours on-demand video
  • 7 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Aprender las etiquetas estructurales, manejo de video, sonido y el manejo del canvas.
View Curriculum
Requirements
  • Una comutadora, un navegador moderno y un edite de texto, de preferencia Dreamweaver, SublimeText, Aptana, etc.
Description

HTML5 es el lenguaje que ha revolucionado la Internet. Es sencillo de usar y extremadamente poderoso. En este curso aprenderá los principios de las etiquetas estructurales, manejo de video, sonido y el manejo del canvas, asi como una breve introducción al desarrollo de páginas responsivas (para que se vena decuadamente en teléfonos inteligentes, tabletas y computadoras), el manejo de fuentes externas en diferentes formatos, como EOT,WOFF, TTF o SVG y la introducción a animaciones, transiciones y transformaciones con CSS3.

HTML5 is the language that has revolutionized the Internet. It is easy to use, yet very powerful. In this course you will learn from the beginning to use structural tags, manage video, sound, new form labels and canvas

Who is the target audience?
  • Desarrolladores y diseñadores web.
Students Who Viewed This Course Also Viewed
Curriculum For This Course
165 Lectures
20:17:44
+
Introducción a HTML5
4 Lectures 20:53

En este video veremos algunas fechas importantes en el desarrollo y estado del HTML5.

Preview 04:32

En este video veremos los requisitos para que pueda manejar HTML5 en un desarrollo profesional, así como a lo largo del curso.

Qué Necesito
05:53

La directiva DOCTYPE es fundamental para indicarle al navegador la forma de interpretar el documento.

La directiva Doctype
05:31

Otro aspecto muy importante en el desarrollo de páginas con HTML5 ser´el nuevo manejo de los metadatos, especialmente en el charset.

Los metadatos necesarios en HTML5
04:57
+
LAS ETIQUETAS ESTRUCTURALES O SEMÁNTICAS
8 Lectures 01:12:27

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

Preview 10:02

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.

El encabezado de una página: Header
09:54

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

Agrupar el contenido: Section
06:23

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.

El contenido principal de una página: Article
12:10

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.

Contenido lateral: Aside
05:49

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.

El pie de página: Footer
14:10

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

Delimitar el área de navegación: Nav
08:24

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

Realizar un layout con las etiquetas de HTML5
05:35
+
LOS FORMULARIOS EN HTML5
13 Lectures 53:51

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.

Preview 04:46

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.

Validar un correo con Email
06:47

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.

Validar una dirección web con URL
04:04

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.

Vaidación de un teléfono con Tel
02:37

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.

Validar un número con Number
04:01

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.

Validar un rango con Range
04:10

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

Formas Date
05:57

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

Seleccionar un color por medio de CSS3
02:26

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

El atributo Autofocus
02:25

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.

El atributo Placeholder
03:41

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

Validar un campo con el atributo Pattern
04:17

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.

El atributo Required
03:23

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

Las nuevas Pseudoclases para los formularios en HTML5
05:17
+
MANEJO DE VIDEO Y SONIDO CON HTML5
8 Lectures 43:52

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.

Las nuevas Etiquetas para manejar video y audio con HTML5
07:04

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

Los nuevos formatos de video en HTML5
09:07

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

Precargar el video en HTML5
04:32

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.

Ejecutar el Video automáticamente con Autoplay
02:01

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.

Hacer que se repita el video con Loop
07:14

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.

Cambiar la imagen de inicio de un video con el atributo Poster
03:37

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..

Cambiar las dimensiones de un video con los atributos Width Height
06:15

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.

Solucionar algunos inconvenientes con diversos Navegadores
04:02
+
EL MANEJO DEL CANVAS
13 Lectures 02:00:59

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.

Preview 08:41

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

Manejo del CANVAS, segunda parte
09:34

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

El contexto en canvas
07:42

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.

El relleno y el contorno en canvas
10:28

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.

Crear líneas en canvas
10:35

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.

Estados en canvas
07:04

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.

Arcos y caminos
12:26

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

Curvas en canvas
08:03

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

Gradientes lineales
09:06

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

Dirección de gradientes lineales
09:20

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

Gradientes radiales
11:24

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.

Manejo de patrones en canvas
09:52

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.

Sombras en objetos y textos
06:44
+
Crear una sencilla aplicación de dibujo con canvas
9 Lectures 01:21:18

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.

Preview 09:59

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

Dibujar los dos ejes en el grid
09:37

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

Dibujar ejes en un grid, segunda parte
12:39

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.

Finalizar los ejes y organizar el código
07:07

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.

Eventos del ratón dentro del canvas
06:05

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

Ajustar las coordenadas del ratón en el canvas
10:39

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.

Dibujar una línea en forma dinámica con los eventos del ratón
08:26

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.

DIbujar en forma continua con el apuntador del ratón
06:48

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.

Controles para el programa de dibujo
09:58
+
Animación básica con el Canvas
5 Lectures 35:48

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.

Preview 01:46

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.

Animación de una pelotilla con Canvas
07:58

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.

Borrar y re-dibujar la pelotita
06:38

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.

Detectar las colisiones en el eje X
11:51

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.

Terminar la animación básica con canvas
07:35
+
CANVAS: crear un juego de memoria
10 Lectures 01:22:11

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.

Preview 03:09

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.

Crear el objeto JavaScript para almacenar la información del juego
09:26

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.

Pintamos el tablero del juego
11:27

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.

Barajar las cartas del juego de memoria
06:33

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.

Ajustar las coordenadas del canvas
07:44

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.

Detectar la carta seleccionada con el apuntador del ratón
08:22

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.

Seleccionar la primer carta del juego de memoria
11:21

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”

Selecciona la segunda carta del juego de memoria
04:57

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”

Comparar las cartas seleccionadas en la mano del juego de memoria
08:36

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

Crear un contador en el juego y finalizarlo
10:36
+
CANVAS: Crear un juego de memoria con imágenes
3 Lectures 21:34

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.

Preview 01:45

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.

Crear los arreglos de dos dimensiones con JavaScript
09:55

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.

Modificar el barajeo y terminar el juego de memoria
09:54
+
CANVAS: Crear un juego de ahorcado
8 Lectures 01:06:03

Una vez que sabemos los “objetos” que se seleccionan el el canvas, nos será muy fácil hacer otros juegos, como el clásico juego de ahorcados.

Preview 03:19

Para realizar este juego, utilizaremos dos objetos: uno para la tecla y otra para la letra de la palabra. Para cada uno de los objetos necesitamos un arreglo y un arreglo para las palabras que se buscarán en el juego.

Las variables y objetos para el juego de ahorcado
09:38

En este video crearemos un pequeño teclado del tipo QWERTY con el cual el usuario podrá seleccionar la tecla por medio del apuntador del ratón.

Crear el tablero QWERTY para el juego
13:34

El cadalso, y las diferentes partes del ahorcado son piezas fundamentales en el juego. En este caso, haremos la carga de imágenes png con transparencia para simplificar su manejo.

Desplegar la palabra letra por letra en el canvas
09:02

El cadalso, y las diferentes partes del ahorcado son piezas fundamentales en el juego. En este caso, haremos la carga de imágenes png con transparencia para simplificar su manejo.

Colocar el cadalso del ahorcado en el canvas
04:36

Utilizando el método de los objetos, y de sus coordenadas, determinaremos si el punto pulsado sobre el canvas se encuentra dentro del mismo, ya que como tal, no contamos con “objetos”, como en otros paquetes como Flash.

Detectar la tecla seleccionada por el usuario
09:59

Ya una vez que sabemos la letra seleccionada por el usuario tendremos que analizar la palabra letra por letra, y de coincidir, dibujamos la letra. Si la palabra no contiene la letra, incrementaremos la variable de errores y aumentaremos una pieza al ahorcado.

Empatar la tecla seleccionada con la palabra
07:27

Por último, borraremos la tecla seleccionada y verificaremos si el jugador completó la palabra o si completó al ahorcado. De ser asi, lo mandaremos a la función gameOver para finalizar´el juego.

Verificar le fin del juego: Game Over
08:28
15 More Sections
About the Instructor
Francisco Javier Arce Anguiano
4.3 Average rating
978 Reviews
12,847 Students
34 Courses
Lic. Matemáticas Aplicadas y Computación

Soy licenciado en matemáticas aplicadas y computación por parte de la Universidad Nacional Autónoma de México e instructor certificado de Adobe desde 2002. He trabajado para diferentes centros autorizados de Adobe en México y da clases en universidades de la Ciudad de México. Asimismo, he publicados cuatro libros sobre ActionScipt 2 y 3, con la editorial AlfaOmega de Méxicoasi como un libro de desarrollo de juegos con ActionScript con la misma editorial. He desarrollado aplicaciones para Android, iPhone, Windows Phone y BlackBerry. Actualmente preparo un libro para el desarrollo de juegos con HTML5 y para el desarrollo de aplicaciones a dispositivos móviles con esta tecnología. También he desarrollado múltiples aplicaciones con PHP, CSS, MySQL y JavaScript en mi vida profesional. Me he especializado en el desarrollo de aplicaciones educativas con Adobe Air y su desarrollo para dispositivos móviles. He estado pendiente de la evolución de HTML5 y CSS3 casi desde los inicios de estas tecnologías.