Aprende los APIS de HTML5 sin dolor

Las piezas fundamentales para el desarrollo web moderno con HTML5
4.4 (10 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.
332 students enrolled
$19
$20
5% off
Take This Course
  • Lectures 95
  • Length 11 hours
  • Skill Level Intermediate Level
  • Languages Spanish
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 5/2015 Spanish

Course 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.
Para este curso es esencial que tengas las bases de programación en HTML, CSS y JavaScript.

What are the requirements?

  • Bases de HTML y CSS
  • Bases de programación en JavaScript

What am I going to get from this course?

  • 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

What is the target audience?

  • Diseñadores Web
  • Programadores Web

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Bienvenida al curso de APIs de HTML5
Preview
08:01
Section 1: API Geolocalización
01:50

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.

06:40

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.

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.

05:42

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.

Apuntes del API Geolocalización
7 pages
Section 2: API LocalStorage y SessionStorage
04:28

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.

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

08:41

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.

09:27

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

07:49

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.

07:37

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.

Apuntes del API localSctorage y sessionStorage
18 pages
Section 3: API File
05:27

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

09:45

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

05:13

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

09:27

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.

10:20

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

10:33

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.

06:46

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

06:35

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

12:34

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.

11:20

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.

Apuntes del API File
27 pages
Section 4: API Drag & Drop
01:44

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.

11:30

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

Apuntes del API Drag & Drop
8 pages
Section 5: API Web worker
01:41

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.

11:37

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

Apuntes del API Web Workers
12 pages
Section 6: API Offline Application
02:23

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.

07:05

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.

08:03

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.

Apuntes del API Offline Web Aplication
17 pages
Section 7: API SVG, Scalable Vector Graphics
01:54
  • 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.
04:06

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

08:09

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

06:38

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

02:49

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

04:42

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.

03:21

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

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.

08:54

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.

07:30

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>

Apuntes del API SVG (Scalable Vector Graphics)
34 pages
Section 8: API Canvas
05:45

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

05:13

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

04:18

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.

08:21

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

07:05

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

06:17
Los estados son una herramienta poderosa para manejar animaciones y diseños complejos.
Crear trazos o path con canvas HTML5
06:30
12:26
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.
05:16

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

05:31

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

07:08

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

08:24

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

Gradientes radiales
07:46
05:34

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

05:54

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

Apuntes del API Canvas
8 pages
Section 9: API WebSQL dababase
Las principales funciones del API WebSQL Database
Preview
02:49
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
Crear una tabla con WebSQL
Preview
05:21
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

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Francisco Javier Arce Anguiano, 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.

Ready to start learning?
Take This Course