Aprende los APIS de HTML5 sin dolor
4.2 (15 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.
357 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Aprende los APIS de HTML5 sin dolor to your Wishlist.

Add to Wishlist

Aprende los APIS de HTML5 sin dolor

Las piezas fundamentales para el desarrollo web moderno con HTML5
4.2 (15 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.
357 students enrolled
Last updated 7/2017
Spanish
Current price: $10 Original price: $20 Discount: 50% off
30-Day Money-Back Guarantee
Includes:
  • 11 hours on-demand video
  • 2 Articles
  • 12 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I 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
View Curriculum
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 is the target audience?
  • Diseñadores Web
  • Programadores Web
Curriculum For This Course
114 Lectures
13:10:03
+
Bienvenida al curso de APIs de HTML5
1 Lecture 08:01
+
API Geolocalización
5 Lectures 19:25

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

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.

Generar un mapa de Google con las coordenadas
05:42

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
2 More Sections
About the Instructor
Francisco Javier Arce Anguiano
4.3 Average rating
977 Reviews
12,840 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.