Aprende los APIS de HTML5 sin dolor
4.2 (27 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
460 students enrolled

Aprende los APIS de HTML5 sin dolor

Las piezas fundamentales para el desarrollo web moderno con HTML5
4.2 (27 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
460 students enrolled
Last updated 7/2017
Spanish
Spanish [Auto]
Current price: $13.99 Original price: $19.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 11 hours on-demand video
  • 2 articles
  • 13 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Aplica el API de geolocalización para incluir mapas de Google en sus aplicaciones.
  • Manipular los archivos de la máquina del usuario por medio del API File.
  • Guardar información en el disco del usuario por medio del API localStorage y crear variables de sesión son sessionStorage.
  • Realizar aplicaciones de Arrastrar y soltar elementos de la página HTML por medio del API Drag&Drop
  • Crear rutinas de JavaScript en el background del navegador por medio del API WebWorkers.
  • Desarrollar aplicaciones que se ejecuten en el caché del navegador sin necesidad de conexión, por medio del API Web Offline Application.
  • Crear gráficos vectoriales con el API SVG.
  • Crear gráficos de mapas de bits, por medio del API Canvas
Course content
Expand all 113 lectures 13:04:21
+ API Geolocalización
5 lectures 21:44

El API de geolocalización es uno de los más utilizados y que está mejor implementado. De forma muy sencilla podemos dar ésta y muchas más funcionalidad a nuestras páginas web.

Introducción a la Geolocalización con HTML5
01:50

El primer paso para desarrollar aplicaciones con el API de geolocalización de HTML5, será validar que nuestro navegador posea esta funcionalidad y que el usuario autorice la obtención de las coordenadas obtenidas por el navegador.

Obtener las coordenadas por medio del API de geolocalización de HTML5
06:40

El manejo de excepciones u errores es fundamental en cualquier aplicación con el API de Geolocalización. En este video veremos la forma de manejarlos.

Manejo de errores y excepciones con el API Geolocation de HTML5
05:13
Apuntes del API Geolocalización
7 pages
+ API LocalStorage y SessionStorage
7 lectures 47:30

El API de localStorage sustituye a las actuales cookies en potencia y sencillez. Es por eso que se les llama “superCookies” o “cookies con esteroides”. También tenemos a sus hermanas gemelas, las SessionStorage, que funcionan exactamente igual, sólo duran durante la sesión del navegador.

Introducción a localStorage y sessionStorage
04:28

Por medio de LocalStorage podemos almacenar los datos del usuario en forma permanente. En este video grabaremos los datos de acceso de un login en el disco del usuario, el famoso “recuerdame” de cualquier acceso con clave.

Ejemplo del uso de localStorage de HTML5
09:28

Una de las limitaciones que tenemos con los localStorage y las sessionStorage es que sólo almacenan cadenas, por lo que si lo almacenamos en el formato JSON, y gracias a las instrucciones de JavaScript, podremos convertir los objetos de JavaScript a JSON y viceversa.

Uso del formato JSON con localStorage
08:41

Por medio del formato JSON podemos almacenar información con localStorage y luego regresar al formato de objeto de javaScript por medio de la función parse() y stringify().

Dar de alta elementos en formato JSON con localStorage
09:27

Una vez que tenemos la información en formato JSON, podemos ya manipularla con javaScript. Este pequeño sistema solo lo podemos visualizar en el navegador en el que trabajemos. Si cambiamos de navegador, ya no veremos la información, al igual que nos pasaría con las cookies.

Crer la rutina de baja con JSON y localStorage
07:49

Por último desarrollaremos el proceso de modificación de la información, en este caso los datos de unos libros propios. Tomaremos como base el proceso de alta y utilizaremos un par de variables para controlar el proceso.

Crear la rutina de edición con JSON y localStorage
07:37
Apuntes del API localSctorage y sessionStorage
18 pages
+ API File
11 lectures 01:28:00

Con el API file podemos manipular los archivos de la computadora del usuario: podemos abrirlos, leerlos, obtener su información entre muchas otras funcionalidades.

El API File de HTML5
05:27

Por medio de la etiqueta tradicional <input> podemos seleccionar el archivo que vamos a procesar con el API mediante HTML5.

Utilizar la etiqueta <input> para leer un archivo con el API File
09:45

Por medio del API File de HTML5 leeremos los datos del archivo (con ayuda de JavaScript, claro)

Leer los datos de un archivo con el API File de HTML5
05:13

Por medio del API de archivos de HTML5 nos será muy sencillo leer varios archivos a la vez, los cuales podremos procesar más adelante con JavaScript o cualquier otra librería.

Leer varios archivos con File-API de HTML5
09:27

El API de archivo (File-API) también lo podemos combinar con el API de Arrastrar y Soltar (Drag&Drop).

Detectar un archivo en una zona Drag&Drop con el file API de HTML5
10:20

Por medio del API de archivos de HTML5 podemos hacer un filtro para diferentes tipos de archivos. En este video veremos cómo hacer un filtro para imágenes y mostrarlas.

Realizar un filtro de imágenes con el API de archivos de HTML5
10:33

Por medio del API File podemos leer archivos planos, incluso con etiquetas HTML.

Leer un archivo de texto plano con el API file de HTML5
06:46

También podremos leer datos binarios, como imágenes, y mostrarlas en nuestras páginas, desde la computadora del usuario.

Leer un archivo binario con el API File de HTML5
06:35

Parte muy importante cuando manejamos recursos externos a nuestras páginas, será detectar eventos tales como el inicio y la finalización de su carga, que por definición son procesos asíncronos. El API File contará con eventos para detectar estos puntos.

Introducción al manejo de eventos en el file-API de HTML5
12:34

Por último veremos los eventos del proceso de la carga, con lo cual podemos hacer un indicador de la misma, y también podremos detectar si existe un error en la misma.

Los eventos onprogress y onerror en el file-API de HTML5
11:20
Apuntes del API File
27 pages
+ API Drag & Drop
3 lectures 13:14

La funcionalidad de Arrastrar y Soltar, o Drag & Drop, es una de las más antiguas, desarrollada por Microsoft (aunque usted no lo crea) e incorporada a HTML5.

Introducción al API Drag & Drop de HTML5
01:44

Para manipular los objetos en el API Drag&Drop, necesitamos conocer sus eventos: iniciar el movimiento de arrastrar, soltar, etc.

Los eventos del API arrastrar y soltar en HTML5
11:30
Apuntes del API Drag & Drop
8 pages
+ API Web worker
3 lectures 13:18

Los web workers son rutinas que podemos manejar desde el background del navegador y nos ayudan a procesos que serían muy pesados, desde el punto de vista del navegador.

Introducción al API Web Worker
01:41

En este video veremos un ejemplo sencillo de cómo se puede utilizar un web worker de HTML5 por medio de un contador y cómo detenerlo

Realizar un contador con el API Web Worker de HTML5
11:37
Apuntes del API Web Workers
12 pages
+ API Offline Application
4 lectures 17:31

El API Offline nos permitirá crear aplicaciones fuera de línea, es decir, aplicaciones que funcionen aún si no contamos con conexión de Internet.

Introducción a las aplicaciones fuera de linea
02:23

El manifiesto es el corazón de una aplicación fuera de línea. En este video veremos sus secciones y las reglas para formarlo y llamarlo desde una página HTML.

Conceptos fundamentales sobre el manifiesto
07:05

En este video veremos un ejemplo generado por el WHATWG para una aplicación fuera de línea, aplicando los principios vistos en los dos vídeos anteriores.

Crear una aplicación sencilla fuera de línea con el API de HTML5
08:03
Apuntes del API Offline Web Aplication
17 pages
+ API SVG, Scalable Vector Graphics
11 lectures 55:02
  • SVG (Scalable Vector Graphics) es un estándar en el manejo de figuras vectoriales.
  • Es una recomendación de la W3C.
  • Basados en una sintaxis de XML.
Introducción al API SVG, Scalable Vector Graphics
01:54

Por medio de la etiqueta <circle> podemos hacer círculos y determinar su ubicación, tamaño, color y contorno.

Crear círculos con el API SVG de HTML5
04:06

Por medio de la etiqueta <rect> podemos hacer rectángulos y cuadrados, así como determinar su ubicación, tamaño, color y contorno.

Crear rectángulos con el API SVG de HTML5
08:09

El API SVG nos permite hacer elipses de manera sencilla por medio de la etiqueta <ellipse>

Crear una elipse con el API SVG de HTML5
06:38

Por medio de la etiqueta <line> podemos dibujar líneas en el API SVG

Dibujar una línea con el API SVG de HTML5
02:49

Una poderosa herramienta para crear dibujos vectoriales será el polígono, con la etiqueta <polygone>, donde dibujaremos una figura a partir de una serie de puntos dados.

Crear un polígono con el API SVG de HTML5
04:42

Por medio de la etiqueta <polyline> podemos hacer líneas compuestas determinando varios puntos en el espacio de dibujo.

Crear una línea compuesta con el API SVG de HTML5
03:21

Con la herramienta <path> podremos hacer polígonos, curvas Bézier entre muchos comandos, como líneas o arcos. Es una etiqueta muy completa y poderosa.

Crear un path (camino o recorrido) con el API SVG de HTML5
06:59

Con la herramienta <path> podremos hacer polígonos, curvas Bézier entre muchos comandos, como líneas o arcos. Es una etiqueta muy completa y poderosa.

Crear una curva bézier con el API SVG de HTML5
08:54

Por medio del API SVG podremos manejar texto vectorial e incluso rotarlo y transformarlo a nuestro antojo, así como controlar su color, contorno y posición por medio de la etiqueta <text>

Manejar texto en el API SVG de HTML5
07:30
Apuntes del API SVG (Scalable Vector Graphics)
34 pages
+ API Canvas
16 lectures 01:41:28

El canvas o lienzo en HTML podemos hacer dibujos en mapas de bits. No son dibujos vectoriales.

Preview 05:45

Aunque la etiqueta canvas es compatible con los mayores navegadores, siempre es conveniente hacer la verificación, para evitar problemas.

Verificación del canvas
05:13

La especificación de la W3C nos maneja un contexto 2D y 3D, pero únicamente esta disponible el 2D, que es en realidad donde trabajaremos.

El contexto en canvas
04:18

El CANVAS puede crear dibujos tanto de relleno como de contorno, aunque no estamos haciendo objetos vectoriales, son figuras de bit maps.

El relleno y el contorno en canvas
08:21

Una parte fundamental de un dibujo es el crear líneas de manera muy sencilla.

Crear líneas en canvas
07:05
Los estados son una herramienta poderosa para manejar animaciones y diseños complejos.
Estados en canvas
06:17
Crear trazos o path con canvas HTML5
06:30
Otra de las herramientas con las que contamos en Canvas es hacer trazos o paths, con el cual podemos unir todas las herramientas de dibujos que hemos visto.
Arcos y caminos (paths)
12:26

Las curvas bezier se definen con tres puntos (cuadráticas) en canvas HTML5

Curvas bezier cuadráticas en canvas HTML5
05:16

En el canvas podemos dibujar una curva bezier de cuatro puntos, o cuervas bezier cúbicas.

Curvas bezier cúbicas en canvas HTML5
05:31

Una herramienta importante en el canvas es el desarrollo de gradientes lineales en canvas de HTML5

Gradientes lineales
07:08

Por medio de los gradientes podemos cambiar la dirección, como se ve en el siguiente video.

Dirección de gradientes lineales
08:24
Gradientes radiales
07:46

En el canvas de HTML5 podemos cargar imágenes y aplicarlas a los rellenos, contornos y textos.

Manejo de patrones en canvas
05:34

Otras herramienta con la que podemos aplocar sombras o dibujos y textos en el canvas de HTML5

Sombras en objetos y textos
05:54
Apuntes del API Canvas
8 pages
+ API WebSQL dababase
32 lectures 02:49:16
Verificar el API WebSQL Database en los navegadores
08:07
El SQL de SQLite
03:44
¿Qué es SQLite?
02:12
Abrir o crear una base de datos
05:00
Tipos de columnas en SQLite
04:11
Borrar una tabla con DROP TABLE
04:26
Los modificadores de las columnas o constraints
05:42
Modificar una tabla con ALTER TABLE
04:19
Las llaves principales o PRIMARY KEY
04:15
Crear y eliminar índices secundarios
04:29
Los elementos del DML: Insert, Update y Delete
01:14
Insertar registros a la tabla (primera sintaxis)
08:06
Introducción a la sentencia SELECT
07:22
Segunda sintaxis de la sentencia INSERT
04:09
Tercera sintaxis de la sentencia INSERT
07:16
Poblar una tabla desde otra tabla con INSERT
06:13
Modificar un registro con UPDATE
04:46
Borrar un registro con DELETE
04:07
Crear la tabla y las etiquetas html
04:59
Desplegar el contenido de la tabla con SELECT
08:00
Agregar un elemento a la tabla con INSERT
04:34
Modificar un registro con UPDATE
08:10
Borrar un registro de la tabla "libros" con DELETE
04:52
Formatear los datos con JavaScript
09:37
Las bases de la sentencia SELECT
04:54
La cláusula DISTINCT de la sentencia SELECT
08:08
Los operadores de comparación en WebSQL database
06:25
Los operadores matemáticos en WebSQL Database
04:03
Los operadores lógicos: LIKE
05:14
Los operadores lógicos: GLOB
02:32
+ El API IndexedDB
19 lectures 02:03:24

En 2010 se dejó de dar soporte a WebSQL (SQLite en navegadores).

La especificación para el manejo de base de datos en navegadores es IndexedDB.

Tanto WebSQL como IndexedDB son soportados para dispositivos móviles.

También se puede utilizar LocalStorage y SessionStorage, pero son más bien para almacenar cadena.

Preview 08:18
  • Almacén de objetos: Es el lugar donde los objetos quedan en forma persistente. Su nombre de ser único y válido en JavaScript.
  • Los objetos son almacenados en forma ordenada en base a las llaves.
  • Un almacén de objetos puede tener un generador de llaves y una ruta de llaves.
  • Si el almacén de objetos utiliza una ruta de llaves, éstas pueden ser internas o externas.
El almacén de objetos en IndexedDB
05:26

Toda base de datos tiene una versión, iniciando con la versión 1.

Sólo se puede tener una versión. Las versiones son manejadas en un número entero, no fracciones (1.0.0 no es aceptado).

Si se desea crear otra versión, se realiza al abrir la base de datos.

Al abrir una base de datos se disparan tres eventos:

  • Un evento si la apertura fue exitosa (success)

  • Un evento si la apertura fue erronea (error)

  • Un evento si hay un cambio de versión  (upgradeneeded).

El único momento cuando se puede actualizar o modificar el esquema de la base de datos, es en el evento upgradeneeded.

Manejo de versiones de la base de datos en IndexedDB
07:30
Las transacciones dentro de la base de datos IndexedDB
05:24
  • Un índice es un almacén especializado para buscar registros en otro almacén, llamado almacén de objetos referenciado.

  • El índice es un almacenamiento persistente llave-valor donde el valor es una llave del almacén referenciado.

  • Los registros en un índice son rellenados automáticamente cada vez que se modifican los registros del almacén referenciado.

  • Cada registro en un índice puede apuntar solo a un registro de su almacén referenciado, pero varios índices pueden apuntar al mismo almacén.

  • Alternativamente, se pueden realizar búsquedas en un almacén de objetos usando la llave.
Los índices en la base de datos IndexedDB
02:41
El concepto de llaves en IndexedDB
04:24
  • Un cursor es un mecanismo para iterar a través de múltiples registros con un rango de llaves.

  • El cursor tiene un origen que indica que índice o almacén de datos está iterando.

  • El cursor tiene una posición dentro del rango, y se mueve en dirección creciente o decreciente en el orden de las llaves de cada registro.

  • Un rango de llaves es un intervalo continuo sobre algún tipo de datos utilizado para las llaves.

  • Los registros pueden obtenerse desde los almacenes e índices usando llaves o un rango de llaves.

  • Los rangos pueden limitarse o filtrarse con umbrales o rangos inferiores y superiores. 

El manejo de los cursores en IndexedDB
03:29

Los pasos básicos para trabajar con IndexedDB son los siguientes:

  • Validar el navegador.

  • Abre una base de datos.

  • Crea un almacén de objetos en la base de datos.

  • Inicia una transacción y hace una petición (request) que hace alguna operación de la base de datos, tal como añadir o recuperar datos.

  • Espere a que se complete la operación por el listener de la clase correcta de eventos DOM .

  • Hace algo con el resultado (el cual puede ser encontrado en el objeto de request).

Los pasos para realizar la aplicación de Altas, Bajas y Cambios con IndexedDB
04:57

Algunos navegadores aún utilizan el prefijo del fabricante para manejar IndexedDB.

Estas versiones antiguas por lo general aún tienen buggs, por lo que se recomienda mejor no soportarlas.

La validación de IndexedDB en los navegadores
08:02

// dejamos abierta nuestra base de datos

var request = window.indexedDB.open("miBaseDatos", 1);

Si la base no existe, es creada.

Con el número de versión podemos cambiar el esquema de la base de datos.

  • Un evento si la apertura fue exitosa (success)

  • Un evento si la apertura fue erronea (error)

  • Un evento si hay un cambio de versión  (upgradeneeded).

La apertura de la base de datos IndexedDB
10:23
  • Podemos generar una llave por medio de un generador de llaves (autoincrement) o un camino de llaves (keyPath).

  • Sin keyPath y sin  autoincrement: El control lo tiene el usuario, por ejemplo, las claves naturales, como matrícula del estudiantes, placas de un auto, número de empleado, etc.

  • Con keyPath sin autoincrement: Solo se pueden almacenar objetos JavaScript. Los objetos deben tener una propiedad con el mismo nombre que la ruta de acceso de clave.
Crear un almacén de objetos u objectStore
07:24
  • En el evento onupgradeneeded no solo podemos modificar la estructura de la base de datos, también podemos añadir, modificar y borrar objetos, así como crear o eliminar índices.

  • Con el método createObjectStore() creamos los almacenes de datos pasando dos parámetros: el nombre y las opciones de las llaves.

  • Este último parámetro es opcional.

  • Las transacciones pueden ser:

    • readwrite

    • readonly

    • versionchange

Crear la transacción y la validación de datos
08:10
  • El resultado de una solicitud generada a partir de una llamada add () es la clave del valor que se agregó.

  • Tenga en cuenta que la función add () requiere que ningún objeto ya esté en la base de datos con la misma clave.

  • Si está intentando modificar una entrada existente, o no le importa si ya existe, puede usar la función put ()
Añadir un objeto a la base de datos
08:53
  • Usar get () requiere que sepa qué clave desea recuperar.

  • Si desea examinar todos los valores de su almacén de objetos, puede utilizar un cursor.

Desplegar la información con un cursor, primera parte
07:41
  • La función openCursor() toma varios argumentos.

  • En primer lugar, puede limitar el rango de elementos que se recuperan utilizando un objeto de rango de clave.

  • En segundo lugar, puede especificar la dirección que desea iterar.

  • En el ejemplo anterior, estamos iterando sobre todos los objetos en orden ascendente.

  • Si quieres seguir “barriendo” el cursor, entonces tienes que llamar al método continue () en el cursor.

  • Cuando haya llegado al final de los datos (o si no hay entradas que coincidan con su solicitud openCursor ()) todavía obtiene una devolución de llamada de éxito, pero la propiedad de resultado es indefinida.

  • Un patrón común con los cursores es recuperar todos los objetos en un almacén de objetos y agregarlos a un arreglo, como esto:

Desplegar la información con un cursor, segunda parte
10:01

Eliminar datos es muy similar a los procesos que hemos revisado:

var request = db.transaction(["libro"], "readwrite")

               .objectStore("libro")

               .delete("123");

Borrar un objeto del almacén en IndexedDB
08:18

Podemos leer un solo objeto de la base de datos por medio del método get(), anexado a una transacción.

Leer un objeto para modificarlo en IndexedDB
03:24

Por medio del método put() podemos guardar un objeto, si este no existe, o modificarlo, si es que este ya existe.

Modificar un objeto en una base de datos IndexedDB
08:58
Ejercicios a la sección IndexedDB
00:01
Requirements
  • Bases de HTML y CSS
  • Bases de programación en JavaScript
Description

En este curso estudiaremos los APIS (Application Programming Interface) con los cuales podremos explotar a fondo la potencialidad de HTML5 para el desarrollo moderno de aplicaciones Web. Aunque existen muchos APIs en HTML5, estudiaremos aquellos que se encuentran implementados en forma estable en los cinco navegadores principales: IE-10, FireFox, Safari, Opera y Chrome.

  • El API de geolocalización es uno de los más utilizados y que está mejor implementado. De forma muy sencilla podemos incluir mapas de Google y muchas más funcionalidad a nuestras páginas web.
  • El API de localStorage sustituye a las actuales cookies en potencia y sencillez. Es por eso que se les llama “superCookies" o “cookies con esteroides". También tenemos a sus hermanas gemelas, las SessionStorage, que funcionan exactamente igual, sólo duran durante la sesión del navegador.
  • Con el API file podemos manipular los archivos de la computadora del usuario: podemos abrirlos, leerlos, obtener su información entre muchas otras funcionalidades.
  • La funcionalidad de Arrastrar y Soltar, o Drag & Drop, es una de las más antiguas, desarrollada por Microsoft (aunque usted no lo crea) e incorporada a HTML5.
  • Los web workers son rutinas que podemos manejar desde el background del navegador y nos ayudan a procesos que serían muy pesados, desde el punto de vista del navegador.
  • El API Offline Web Application nos permitirá crear aplicaciones fuera de línea, es decir, aplicaciones que funcionen aún si no contamos con conexión de Internet.

También estudiaremos dos APIs fundamentales para el diseño de gráficos vectoriales y de mapas de bits:

  • SVG (Scalable Vector Graphics) es un estándar en el manejo de figuras vectoriales. Es una recomendación de la W3C y está basados en una sintaxis de XML.
  • Por medio del API CANVAS podremos hacer dibujos de mapas de bits, así como animaciones y controlar eventos, con lo cual podremos desarrollar incluso juegos y aplicaciones interactivas.
  • Analizaremos los APIs WebSQL e IndexedDB.

Para este curso es esencial que tengas las bases de programación en HTML, CSS y JavaScript.

Who this course is for:
  • Diseñadores Web
  • Programadores Web