Trabajando con datos en la Web
4.6 (47 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.
508 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Trabajando con datos en la Web to your Wishlist.

Add to Wishlist

Trabajando con datos en la Web

Veremos las principales tecnologías de intercambio de datos en la Web: XML, AJAX y JSON, HTML5 y conectarlos a MySQL.
4.6 (47 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.
508 students enrolled
Last updated 6/2017
Spanish
Current price: $10 Original price: $20 Discount: 50% off
5 hours left at this price!
30-Day Money-Back Guarantee
Includes:
  • 12 hours on-demand video
  • 7 Articles
  • 13 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Leer datos para sus desarrollos Web
  • Conectar las páginas con PHP por medio de AJAX
  • Leer información en formato XML y procesarlos con JavaScript
  • Crear aplicaciones que lean información con AngularJS
  • Leer archivos en formato jSON y procesarlos con JavaScript
View Curriculum
Requirements
  • Conocimientos en HTML, JavaScript y CSS intermedios
Description

Conecta tus páginas de internet con datos y dales nueva vida. En la actualizada es fundamental poder hacer páginas que lean datos externos para ser procesados y mostrados al usuario. En la evolución de la Internet, se han destacado diferentes formatos como XML, que lleva más tiempo en el ámbito de Internet y que por lo es más robusto y extendido, y el relativamente "nuevo" formato JSON, que es más sencillo, pero igual de poderoso.

También revisaremos la importante función de conectarnos a una base de datos por medio de un lenguaje intermedio del servidor, en este caso es PHP y la base de datos es MySQL para contar con un panorama completo en el desarrollo de aplicaciones Web.

La instrucción que revolucionó a las páginas web, fue el XMLHttpRequest que nos permitirá leer los datos en el "background", por lo que podremos mostrar diferente información en nuestras páginas sin necesidad de refrescar toda la página cada vez que lo hagamos. Esta intrusión es la base de lo que conocemos como AJAX, lo cual nos permite hacer páginas tipo RIA (Rich Internet Aplication) sin necesidad de utilizar un plug-in de terceros, como Adobe Flash.

También revisamos el File-API de HTML5 para leer archivos de la computadora del usuario y utilizarlos con JavaScript.

En este curso revisaremos estas tres tecnologías, AJAX, JSON y XML, y daremos una revisión a su relación con otras dos: PHP y jQuery.

Who is the target audience?
  • Desarrolladores y diseñadores web
Students Who Viewed This Course Also Viewed
Curriculum For This Course
117 Lectures
12:10:46
+
Bienvenida al curso
1 Lecture 06:05

En este curso aprenderemos tres de las tecnologías más comunes para intercambiar información en internet: XML, AJAX y JSON desde sus fundamentos.

Preview 06:05
+
El manejo de datos con XML
13 Lectures 58:56

En esta video aprenderemos los inicios y los mitos al rededor de esta robusta tecnología de intercambio de información: XML.

Preview 06:37

En este video veremos las herramientas necesarias para la creación y manipulación de los archivos XML.

¿Qué necesitamos para crear un archivo XML?
03:44

La enorme semejanza con HTML lo hace fácil de entender, así como la flexibilidad de su sintaxis.

Las etiquetas de XML
07:12

Las reglas para lograr un documento XML bien formados son muy sencillas y se pueden verificar en cualquier navegador moderno.

Reglas para un documento XML bien formado
09:43

  • Elementos o nodos
  • Atributos
  • Comentarios
  • Characters Data Section
  • Instrucciones de proceso.
  • Entity References
Elementos de un archivo XML
04:04

La declaración XML:

  • Es opcional
  • La W3C recomienda tenerla.
  • Debe de ser la primer línea del archivo
  • Versión
  • Encoding
  • standalone
La declaración XML
03:33

  • Iniciar con guión bajo o letra.
  • Se pueden usar letras, números, guiones o guiones bajos. También puntos.
  • No se puede utilizar la cadena “xml” al nombrar un elemento.
  • No se permiten usar caracteres “raros” no-funny-characters
Los nodos o elementos de XML
05:20

  • Los atributos en XML:
    • Un atributo sigue las mismas normas que un elemento para su nombre.
    • No puede haber atributos con el mismo nombre en una etiqueta.
Reglas de los atributos en un documento XML
03:30

  • Los comentarios en XML son iguales a los de HTML.
  • No se pueden anidar los comentarios, ni dentro de las etiquetas, ni ir en el inicio, antes que la etiqueta de declaración xml
Los comentarios en un documento XML
03:32

  • Permite escribir código libre, como etiquetas HTML, ya que su contenido no es analizado por el “parser” de XML.
  • No se pueden anidar CDATA dentro de otro CDATA.
Character Data Section
03:33

  • Son instrucciones que sólo le interesan a la aplicación que procesa el archivo XML, no al analizador XML.
  • <? target instruction ?>
  • El nombre del target no puede ser XML y tiene las mismas reglas del nombre que los nodos y atributos
Instrucciones de proceso o processing instruction
02:42

  • Son caracteres especiales que posiblemente no existen en el teclado, como marca registrada.
  • También puede ser caracteres especiales como:
  • &amp; &apos; &it; &gt; o &quot
Los caracteres especiales o Entities
02:46

  • Los espacios en blanco, tabuladores, retorno de carro, etc. sirven para hacer más legible (para nosotros) a los archivos XML.
  • Los analizadores sintácticos de XML los ignoran, pero aumentan el tamaño de los archivos
Los espacios en blanco en un archivo XML
02:40
+
Leer los datos con AJAX
9 Lectures 01:16:52

AJAX es una de las tecnologías que más a revolucionado Internet, permitiendo leer información sin necesidad de refrescar la página.

Preview 05:40

Pr medio del objeto xmlHTTPRequest podemos solicitar la lectura de un archivo desde el background, es decir, no es necesario que refresquemos la página para desplegar solo parte de ella con información nueva.

El objeto XMLHttpRequest en AJAX
08:15

La solicitud al servidor desde AJAX: request
07:17

open(método,url,async);

Método: Forma de enviar la solicitud, “GET” o “POST”.

url: el archivo que abriremos.

async: true, es asíncrono, false, no asíncrono.

Conceptos generales de un servidor Web
05:31

Todos los navegadores modernos soportan el objeto XMLHttpRequest.

IE5 y 6 soportan ActiveXObject.

Creamos el objeto:

objeto = new XMLHttpRequest();

Para IE5 y 6 soportan

objeto = ActiveXObject(“Microsoft.XMLHTTP”);

Recuperar la información desde AJAX: responseText y responseXML
06:43

Cuando tenemos el resultado de la lectura de un archivo, podemos detectar con el evento “onreadystatechange”.

La propiedad “readyState” nos regresa el estatus de la solicitud.

Se tienen 3 propiedades muy importantes:

“onreadystatechange” lanza una función cuando el proceso termina.

El manejo de eventos en AJAX
06:58

Como se había comentado, desde AJAX podemos controlar todo el ámbito de JavaScript y llamar por datos con PHP y la base de datos en turno (generalmente MySQL).

Llamar a archivos PHP desde AJAX
10:14

Por medio de AJAX podemos solicitar archivos de lenguajes de servidor como PHP o ASP, pasarle información y leer bases de datos.

Ligar el AJAX con Bases de datos (PHP+MySQL)
09:15

Por medio de AJAX nos será muy sencillo leer archivos en formato XML, aunque su explotación será en realidad con el API de JavaScript para manejar archivos XML.

Leer un archivo XML con AJAX generado desde PHP de una base de datos MySQL
16:59
+
Manejar información con JSON
5 Lectures 43:28

Significa JavaScript Object Notation

Es un formato para almacenar información en Internet.

Competencia del XML, pues se le considera más sencillo y más breve que éste

Preview 03:26

  • Los nodos son de tipo nombre/valor
  • Los nodos están separados por comas
  • Los objetos están rodeados por llaves {}
  • Los arreglos, dentro del objetos, están rodeados por corchetes [].
Sintaxis básica del formato JSON
04:07

Los archivos de tipo JSON los podemos leer y manejar en forma nativa desde JavaScript.

Los datos los creamos como una cadena:

var dato = '{"nombre":"Juan Pérez","calle":"Insurgentes 666","ciudad":"D.F."}'

El manejo de JSON desde JavaScript
12:59

Los archivos con formato JSON lo podemos leer sin problema con el comando XMLHttpRequest de JavaScript.

JSON y la función XMLHTTPRequest
12:16

Activar un servicio tipo XAMP para leer los datos del servidor.

Leer un archivo en formato JSON desde un servidor web local
10:40
+
Angular JS
8 Lectures 01:04:42

Instalación de la librería Angular JS
08:24

Hola Mundo, desde Angular JS
05:43

Modelo-Vista-Control o MVC
08:56

Creación de módulos desde Angular JS
11:23

Hacer ciclos con el comando ng-repite
07:59

El comando http desde Angular JS
07:51

Los controladores de Angular JS
08:31
+
Manejo de datos con HTML5 File-API
12 Lectures 01:44:55

El atributo data de HTML5 para manejar información en etiquetas HTML.

El atributo data en HTML5
06:29

Los microdatos le dan "significado" a las etiquetas HTML para buscadores y navegadores para HTML5.

El manejo de microdatos en HTML5
10:26

El API File es una poderosa herramienta para manipular archivos en la computadora del usuario.

El API File de HTML5
05:27

Por medio de una etiqueta tradicional como <input type="file"> podemos leer un archivos de la computadora del usuario. Es el inicio.

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 podemos leer datos binarios, como las imágenes, y desplegarlas en objetos de la página web, como la etiqueta <img>

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

El file-API de HTML5 viene con muchos eventos para manejar la carga de los archivos. En este video daremos un repaso de los mismos y haremos las estructuras y los listeners para manejarlos. En el siguiente video codificaremos las funciones.

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

Los eventos onprogress y onerror tienen varios parámetros y propiedades para su uso, En este video escribiremos el código para concluir con el manejo de eventos en el file-API de HTML5.

Los eventos onprogress y onerror del file-API de HTML5
11:20
+
Manejo de datos con HTML5 - localStorage y sessionStorage
6 Lectures 47:30

localStoge es otra de las formas que tenemos co HTML5 de almacenar la información equivalente a las galletas.

Introducción a localStorage y sessionStorage
04:28

Por medio de un ejemplo nos será fácil comprender la sencillez y potencia de las funciones localStorage de HTML5.

Ejemplo de almacenamiento con localStorage
09:28

Uno de los inconvenientes de localStorage es que solo almacena cadenas, pero lo podemos resolver fácilmente mediante el uso del formato JSON.

Manejar los datos en formato JSON con localStorage
08:41

Una vez que tenemos nuestra información en formato JSON, nos será muy sencillo manipularla con JavaScript. Aquí te mostramos cómo dar de alta un registro (aunque no es una base de datos) por medio de localStorage.

Dar de alta información en formato JSON con localStorage
09:27

Para borrar un registro en realidad lo eliminamos de nuestro arreglo y lo volvemos a convertir a JSOn y grabarlo con el mismo nombre.

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

Para modificar el registro, utilizaremos la misma función de alta, solo que en vez de añadir el registro al final, modificamos el nodo del arreglo, lo convertimos a JSON y lo volvemos a grabar con localStorage.

Crear la rutina de edición con JSON y localStorage
07:37
+
WebSQL Database
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

Crear una tabla con WebSQL
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

Los operadores lógicos: LIKE
05:14

Los operadores lógicos: GLOB
02:32
+
La base de datos IndexedDB de HTML5
18 Lectures 02:03:23

El almacén de objetos en IndexedDB
05:26

El manejo de las versiones en la base de datos IndexedDB
07:30

Las transacciones dentro de la base de datos IndexedDB
05:24

Los indices en IndexedDB
02:41

El concepto de llaves en IndexedDB
04:24

El concepto de cursores en IndexedDB
03:29

Una aplicación básica de ABC con IndexedDB
04:57

Verificar en el navegador la API IndexedDB
08:02

La apertura de la base de datos IndexedDB
10:23

Crear el almacén de objetos u objectStorage
07:24

Crear la transacción y la validación previa de datos
08:10

Añadir un objeto a la base de datos
08:53

Desplegar la información con un cursor, primera parte
07:41

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

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

Leer los datos de un objeto en IndexedDB
08:58

Modificar un objeto en una base de datos IndexedDB
03:24
+
Manejar XML y JSON desde PHP
5 Lectures 32:19
Principios generales para manejar XML desde PHP
06:35

Crear el programa que lee un documento XML con PHP
11:45

Escribir un documento XML desde PHP
06:59

Leer el contenido de un archivo JSON desde PHP
02:46

Escribir un archivo con formato JSON desde PHP
04:14
1 More Section
About the Instructor
Francisco Javier Arce Anguiano
4.4 Average rating
944 Reviews
12,879 Students
35 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.