Trabajando con datos en la Web

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

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

Para evitar el error de Cross reference generado por el navegador, podemos instalar un servidor local (localhost) en nuestra computadora local.

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

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

• Elementos o nodos
• Atributos
• Comentarios
• Characters Data Section
• Instrucciones de proceso.
• Entity References

La declaración XML:

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

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

• 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

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

• 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

• 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 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

• En general contamos con dos tipos de bases de datos que manejan XML. Existen bases de datos que contienen un campo del tipo XML y podemos almacenar en ellos un documento XML, como en IBM DB2 (XML​), Microsoft SQL Server, Oracle Database, PostgreSQL. Se llaman bases de datos adaptadas.

• Hay bases de datos nativas, que procesan todo en XML, como BaseX, eXist, MarkLogic Server, Sedna.

• Para poder explotar la información utilizaremos XQuery, que es un lenguaje de consultas equivalente a SQL, pero para XML, estandarizado por la W3C.

• XQuery utiliza expresiones XPath para acceder a determinadas partes del documento XML.

• Añade, además, expresiones similares a las usadas en SQL, conocidas como expresiones FLWOR.

• Las expresiones FLWOR toman su nombre de los 5 tipos de sentencias de las que pueden estar compuestas: FOR, LET, WHERE, ORDER BY y RETURN

• Por medio del comando let podemos agrupar todas las iteraciones en la variable.

• Podemos añadir funciones como count().

• Podemos añadir etiquetas HTML.

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

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.

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.

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

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.

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

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

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.

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

• 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 [].

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

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

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

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

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

El objeto del API File de HTML5 utilizado para leer el contenido de archivos de forma asíncrona es FileReader. Este objeto permite leer archivos (File o Blob) desde el almacenamiento del cliente en segundo plano sin bloquear la interfaz de usuario, utilizando eventos como onload para manejar el resultado.

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

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

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.

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

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.

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

También podemos leer datos binarios, como las imágenes, y desplegarlas en objetos de la página web, como la etiqueta <img>

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.

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.

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

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

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

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.

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

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.

parse (JSON.parse): Convierte la cadena JSON del localStorage a un objeto JS manipulable, Modificar: Se cambian las propiedades del objeto, stringify (JSON.stringify): Convierte el objeto JS modificado de vuelta a una cadena de texto, setItem (localStorage.setItem): Guarda la cadena actualizada en el navegador.

• Podemos conectarnos con SQLite por medio de una extesión o por medio de PDO.

• Podemos verificar cuál de los métodos está instalada por medio de la funció extension_loaded().

• Podemos activar o desactivar cualquiera de ellas dentro de php.ini.

Una clase que se usa como interfaz de bases de datos SQLite 3.

1. Existe una clase que se llama SQLite3.

2. No hay necesidad de “conectarse”, sino que se crea una clase para la base de datos, “extendiéndose” de la clase SQLite3.

Una forma de delimitar un string es mediante la sintaxis heredoc: <<<. Después de este operador, se deberá proporcionar un identificador y justo después una nueva línea. A continuación va el propio string, y para cerrar la notación se pone el mismo identificador.

NULL: NULL es considerado un valor vacío.

INTEGER: El valor entero con signo entre 1 y 8 bytes dependiendo de la magnitud del valor.

REAL: El valor es de punto flotante, se almacena como un número de coma flotante de 8 bytes IEEE.

TEXT: El valor es una cadena de texto, utilizando la codificación de la base de datos ( UTF- 8, UTF - 16BE o UTF - 16LE)

BLOB: Permite almacenar objetos en formato BLOB (Binary Large Objects) como imágenes, archivos de sonido y otros objetos multimedia; a veces se almacenan como BLOB código de binarios.

• SQLite tipo de afinidad o Affinity Type:

• En SQLite contiene un concepto llamado “afinidad” o “affinity”. Cada columna puede seguir almacenando en su tipo de columna, pero puede ser representado con diferente “máscara”, con lo cual lo hace “a fin” con otras bases de datos.

• Cada columna en SQLite 3 tiene una clase y una afinidad:

Versión 3.3+

create table if not exists tabla(col1 typ1, ..., colN typN)

• En SQLite, con la sentencia DROP TABLE se elimina una tabla con su definición, datos asociados, índices, triggers, constrains y permisos.

• Cuando una tabla es eliminada, no hay forma de recuperarla. Se borra en forma definitiva.

• Sintaxis: DROP TABLE basededatos.tabla;

Modifica la columna de la tabla. Ejemplos de comandos “constraints”:

• NOT NULL

• PRIMARY KEY

• UNIQUE

• AUTOINCREMENT

• DEFAULT

• CURRENT_TIME

• CURRENT_DATE

• CURRENT_TIMESTAMP

• Podemos escribir “constraints” a nivel tabla.

• Por lo general involucra a más de una columna, pero puede involucrar sólo una sin problema.

• Generalmente utilizamos los constraint PRIMARY KEY, UNIQUE y CHECK a nivel tabla cuando involucran a más de una columna.

• Podemos crear tabla desde un query o la sentencia select.

• CREATE [TEMP] TABLE nombreTabla AS SELECT query;

• El query sólo se ejecuta una vez, cuando se crea la tabla.

• Las tablas temporales solo existen cuando la base de datos esté abierta. Cuando se cierra, desaparecen.

• Las tablas temporales sólo pueden ser accesadas por la conexión con la que fueron creadas.

• En SQLite la sentencia ALTER TABLE sólo puede añadir columnas y renombrar la tabla.

• No podemos eliminar columnas con esta sentencia.

• Las nuevas columnas siempre se añaden al final de la tabla.

• Si necesitas hacer muchas modificaciones, es mejor hacer una tabla nueva y copiar los datos con un SELECT.

• Siempre es importante declarar una o varias columnas como Primary Key, que es el índice principal de la tabla.

• Sólo podemos tener un índice principal por tabla.

• Las llaves en un índice principal deben ser únicas, es decir, no repetirse.

• El constraint “UNIQUE” queda implicito en “PRIMARY KEY”.

• Las vistas o views proporcionan una manera de empaquetar consultas en un objeto predefinido.

• Una vez creadas, las vistas actúan de como tablas de sólo lectura.

• Al igual que las tablas, las vistas pueden ser temporales.

• La sintaxis básica del comando CREATE VIEW es:

  • CREATE [TEMP] VIEW nombreVista AS SELECT query

• Los índices son una manera rápida de encontrar información en la tabla.

• La sintaxis para crear un índice, una vez que la tabla ha sido creada es:

  • CREATE [UNIQUE] INDEX nombre_index ON nombre_tabla ( columna1 [, ...] );

• Ni UNIQUE ni PRIMARY KEY implica que no se acepten valores nulos.

La sentencia INSERT INTO nos sirve para insertar datos en una tabla de una base de datos. SQLite cuenta con dos sintaxis:

• La segunda sintaxis de la sentencia INSERT no es necesario especificar las columnas, pero debe escribirse los valores para cada una de las columnas en el orden en que fueron creadas en la tabla.

• Si una columna tiene el constraint de “AUTOINCREMENT”, debes de enviar un valor de NULL para que se autoincremente.

Puedes poblar una tabla desde otra, siempre y cuando las columnas de ambas coincidan en la tabla que añade los registros.

INSERT INTO tabla1[(column1, column2, ... columnN)]

SELECT column1, column2, ...columnN

FROM tabla2

[WHERE condition];

• Con la sentencia UPDATE podemos modificar cualquiera de las columnas de cualquier registro o conjunto de registros (incluso de toda la tabla).

• Su sintaxis es:

• UPDATE nombre_tabla SET columna1=valor1 [, ...] WHERE expresión

• Si se omite la sentencia WHERE, se modificarán las columnas de TODA la tabla.

• Con la sentencia DELETE podemos borrar uno o todos los registros de una tabla.

• Sintax:

• DELETE FROM nombre_tabla

• WHERE [condición];

• Los registros son borrados en forma definitiva.

Altas, bajas y cambios en una tabla con SQLite

IndexedDB es el estándar actual recomendado por la W3C para el almacenamiento de grandes volúmenes de datos estructurados (incluidos archivos/blobs) en el lado del cliente. Es la tecnología clave para aplicaciones web progresivas (PWAs) y funcionamiento offline-first.

La estructura de una base de datos IndexedDB (crear/eliminar almacenes de objetos o índices) solo puede modificarse dentro del evento onupgradeneeded. Este evento se dispara automáticamente cuando se abre la base de datos con un número de versión superior al existente, o por primera vez.

La característica principal de las transacciones en IndexedDB para garantizar la integridad de los datos es la atomicidad.

Esto significa que las transacciones en IndexedDB operan bajo el principio de "todo o nada": DataCamp +2

• Agrupación de operaciones: Todas las operaciones de lectura o escritura (como añadir, actualizar o eliminar datos) se agrupan en una única unidad lógica de trabajo.

• Finalización exitosa (Commit): Si todas las operaciones dentro de la transacción se completan correctamente, los cambios se aplican de forma permanente en la base de datos.

• Reversión (Rollback) ante fallos: Si una sola operación dentro de la transacción falla, toda la transacción se revierte automáticamente, asegurando que la base de datos no quede en un estado inconsistente o parcialmente actualizado.

La función principal de un índice en IndexedDB es permitir la búsqueda, filtrado y recuperación eficiente de datos basados en propiedades específicas de los objetos almacenados, en lugar de depender únicamente de la clave primaria. Permiten búsquedas por rango y consultas ordenadas, mejorando drásticamente el rendimiento en conjuntos de datos grandes.

En IndexedDB, cada registro dentro de un object store debe tener una llave única (ya sea definida explícitamente o generada automáticamente), que actúa como una clave primaria para recuperar, actualizar o eliminar datos de manera eficiente.

Los cursores (IDBCursor) permiten recorrer registros dentro de un rango determinado en un almacén de objetos o índice, lo cual es útil para procesar grandes cantidades de datos sin cargar todo en memoria a la vez.

La propiedad del objeto window que se utiliza para verificar si el navegador soporta IndexedDB es indexedDB.

Para realizar esta verificación de manera segura en JavaScript, se suele comprobar si esta propiedad existe en el objeto.

El método principal para solicitar la apertura de una base de datos en IndexedDB es indexedDB.open(nombre, version). Esta función asíncrona devuelve un objeto IDBOpenDBRequest, que gestiona eventos para el éxito (onsuccess), error (onerror) o actualización (onupgradeneeded) de la estructura de la base de datos.

Detalles Clave de indexedDB.open():

• Parámetros: Acepta el nombre de la base de datos (string) y una versión opcional (entero).

• Creación/Actualización: Si la base de datos no existe, se crea. Si la versión es mayor que la existente, se dispara el evento onupgradeneeded para actualizar el esquema.

• Asincronía: No bloquea el navegador y requiere manejar los resultados mediante manejadores de eventos (callbacks).

El método createObjectStore() solo puede ser invocado dentro de un evento onupgradeneeded, ya que este evento proporciona una transacción de cambio de versión (versionchange), necesaria para modificar la estructura de la base de datos.

El método principal utilizado para añadir o actualizar un objeto en un object store de IndexedDB es put(). Este método funciona en modo "upsert": añade el objeto si la clave no existe o actualiza el registro existente si la clave ya está presente. Requiere una transacción readwrite.

El método continue() en el objeto cursor (IDBCursorWithValue) es el mecanismo estándar para mover el cursor al siguiente registro que coincida con el rango y dirección, disparando de nuevo el evento onsuccess para procesar la nueva fila.

El método continue() en el objeto cursor (IDBCursorWithValue) es el mecanismo estándar para mover el cursor al siguiente registro que coincida con el rango y dirección, disparando de nuevo el evento onsuccess para procesar la nueva fila.

Para eliminar un objeto específico de un almacén de objetos en IndexedDB, se utiliza el método IDBObjectStore.delete(key). Este método elimina el registro correspondiente a la clave proporcionada dentro de una transacción activa.

El método get() se llama sobre un objeto IDBObjectStore dentro de una transacción para leer datos asíncronamente pasándole la clave del objeto.

El método utilizado es put() (IDBObjectStore.put()). Este método añade un nuevo registro si no existe o actualiza uno existente si la clave coincide. Es la operación estándar en IndexedDB para insertar o actualizar datos (upsert), a diferencia de add(), que falla si el registro ya existe.

El método XMLReader::open, utilizado como método estático, establece el URL de entrada para el contenido XML que se procesará.

• Por medio de AJAX, llamado desde JavaScript, podemos hacer un scroll “infinito”, que cuando el usuario se encuentre en la parte baja de la página, lanzamos la lectura de la siguiente parte de la información faltante.

• En este ejercicio lo haremos en forma simulada, pero se puede adaptar fácilmente a una base de datos.

• Crear el archivo PHP que nos enviará la información.

• Detectar si es una solicitud AJAX.

• Genera una arreglo con la información.

• Ejecutar la lectura del archivo PHP con Ajax.

• Tomamos los datos leídos y lo desplegamos en la división.

Controlar el número de página y pasarla al script PHP desde AJAX.

• JavaScript controla los cambios en el scroll con onscroll.

• La propiedad de sólo lectura HTMLElement.offsetHeight devuelve el alto de un elemento, incluyendo el padding vertical y los bordes, en píxeles, como un número entero.

• innerHeight: Altura (en pixeles) de la altura del viewport incluyendo el scrollbar horizontal.

• La propiedad de la ventana de solo lectura YOffset es un alias para scrollY; como tal, devuelve la cantidad de píxeles que el documento se desplaza actualmente a lo largo del eje vertical.

Por medio de PHP leeremos un archivo XML, lo armaremos en un combobox y lo desplegamos por medio de AJAX.

• Por medio de AJAX ejecutamos un archivo de PHP que nos enviará información de un archivo XML para sugerencia de captura.

• Esta vez el usuario puede seleccionar la opción y abrir la página correspondiente.

• Por medio de AJAX ejecutamos un archivo de PHP que nos enviará información de un archivo XML para sugerencia de captura.

• Esta vez el usuario puede seleccionar la opción y abrir la página correspondiente.

• Por medio de AJAX ejecutamos un archivo de PHP que nos enviará información de un archivo XML para sugerencia de captura.

• Esta vez el usuario puede seleccionar la opción y abrir la página correspondiente.

Por medio de AJAX ejecutamos un archivo de PHP que nos enviará información de un archivo plano para realizar una encuesta.

Por medio de AJAX ejecutamos un archivo de PHP que nos enviará información de un archivo plano para realizar una encuesta.

• En redes sociales generalmente tenemos botones de “favoritos” y “no favoritos”.

• Por medio de Ajax podemos marcarlo como favorito sin necesidad de recargar la página.

• Crear los listeners de los botones.

• Encender y apagar los botones con CSS.

• Crear el proceso AJAX desde JavaScript.

• Utilizaremos el encabezado para definir una solicitud de tipo Ajax:

xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');

xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');

• Crear el primer archivo PHP.

• Controlaremos los favoritos por medio de sesiones.

• Validaremos que sea una solicitud Ajax por medio de:

$_SERVER['HTTP_X_REQUESTED_WITH']);

$_SERVER['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest'

Por medio de una marca, identificaremos cuál de los productos está marcado como favorito y activaremos el botón para desactivar el favorito.

Para quitar el estado de favorito debemos eliminar el elemento de la variable de sesión y eliminar la clase CSS de la división.

Para utilizar las sesiones, debemos de crear el objeto de la sesión y determinar si el número de producto ha sido marcado como favorito.

• Muchas veces tenemos la información en hojas de cálculo.

• Lo más sencillo es convertirla a un formato CSV.

• La información por lo general NO está normalizada.

• Necesitamos crear la tabla principal y sus catálogos.

• Utilizaremos un generador con “yield”.