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.1 (34 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.
445 students enrolled
$19
$20
5% off
Take This Course
  • Lectures 90
  • Length 9.5 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 3/2015 Spanish

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

What are the requirements?

  • Conocimientos en HTML, JavaScript y CSS intermedios

What am I going to get from this course?

  • 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

What is the target audience?

  • Desarrolladores y diseñadores 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

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.

Section 1: El manejo de datos con XML
06:37

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

03:44

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

07:12

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

09:43

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

04:04
  • Elementos o nodos
  • Atributos
  • Comentarios
  • Characters Data Section
  • Instrucciones de proceso.
  • Entity References
03:33

La declaración XML:

  • Es opcional
  • La W3C recomienda tenerla.
  • Debe de ser la primer línea del archivo
  • Versión
  • Encoding
  • standalone
05:20
  • 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
03:30
  • 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.
03:32
  • 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
03:33
  • 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.
02:42
  • 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
02:46
  • 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
02:40
  • 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
Section 2: Leer los datos con AJAX
05:40

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

08:15

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.

La solicitud al servidor desde AJAX: request
07:17
05:31

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.

06:43

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”);

06:58

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.

10:14

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

09:15

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

16:59

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.

Section 3: Manejar información con JSON
03:26

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

04:07
  • 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 [].
12:59

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."}'

12:16

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

10:40

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

Section 4: Angular JS
Intrroducción a Angular JS
Preview
05:55
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
Section 5: Manejo de datos con HTML5 File-API
06:29

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

10:26

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

05:27

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

09:45

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

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

12:34

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.

11:20

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.

Section 6: Manejo de datos con HTML5 - localStorage y sessionStorage
04:28

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

09:28

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

08:41

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

09:27

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.

07:49

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

07:37

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.

Section 7: WebSQL Database
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
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
Section 8: Conclusión del curso
02:51

En este curso revisamos la principales tecnologías de intecambio de datos que tenemos en Internet: XML, AJAX y JSON, fundamentales para el desarrollo web.

Archivos de la sección: XML
Article
Archivos de la sección: AJAX-JSON
Article
Article

Anexo el archivo escuela.sql para crear la base de datos en MySQL, ejercicios del AJAX en los archivos anexos. Saludos

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