Exposición referente a la API de HTML5 WEB SQL, por alumnos de Ingeniería en Sistemas Computacionales del ITParral

1. Investigar, ejemplificar y exponer una API HTML5.
M.C.C. Edgar Omar Bañuelos Lozoya.
Tópicos de programación WEB.
API
WEB SQL
No.Control
10410511
API WEB SQL
Alumno(s)
Fernando Cortez Rodríguez
10410554
Luis Fernando Sáenz Cisneros

2. ÍNDICE
 Marco Conceptual WEB SQL
 Creación de una BD
 Introducción a WEB SQL e IndexedDb
 Declaración de variables y funciones
 ¿Qué es WEB SQL?
 Método transaction para generar una
consulta
 ¿En qué se diferencia IndexedDB de WEB
SQL?
 Creación de Tablas e inicio de las consultas
 Ejemplo código IndexedDB
 Ejemplos
 Características de la WEB SQL
 Referencias
 Navegadores que lo soportan
 Métodos principales WEB SQL
API WEB SQL

3. Marco Conceptual WEB SQL
API WEB SQL

4. Introducción
 Existen momentos en que los 5 o 10 MB de almacenamiento que ofrecen algunas APIS de
almacenamiento WEB no son suficientes. Si se necesita almacenar una cantidad mayor de datos,
y además que estén relacionados entre ellos, se necesitara utilizar una base de datos ordenadas
para satisfacer las necesidades de almacenamiento que se necesitan.1
 Por lo general las bases de datos son utilizados del lado del servidor, pero en la actualidad hay
dos soluciones de base de datos para cubrir la necesidad del lado del cliente: API WEB SQL e
INDEXDB.1
 En esta presentación se hablara en lo particular del API
API WEB SQL
WEB SQL.

5. ¿Qué es WEB SQL?
 Es un API de almacenamiento web la cual utiliza una base de datos que se puede consultar
mediante una variable de SQL.2
 Este api ya está inactiva en cuanto a mantenimiento desde noviembre del 2010, en sustitución se
ha implementado una norma alternativa potencial llamada API IndexedDB. 2
 Actualmente IndexedDB está ganando terreno, pero queda ver cuál de ellas será la norma
estándar para almacenamiento de datos importantes en el navegador.1
API WEB SQL

6. ¿En qué se diferencia
1,5
IndexedDB de WEB SQL?
WEB SQL
INDEXED DATABASE
Es una base de datos compleja y
estructurada
Es un almacén de datos
Es relacional
Relación tradicional
Cuenta con tablas, columnas y filas
Cuenta con tablas, columnas y filas, las cuales
no se relacionan y se crean una para cada tipo
de datos
Se ejecuta mediante código de SQL y
JavaScript
Consulta por índice mediante JavaScript
Descontinuado
Vigente
API WEB SQL

7. Ejemplo Código IndexedDB
<!--encapsular la lógica de la base de datos.-->
var html5rocks = {}; html5rocks.indexedDB = {};
<!--Abrir la base de datos-->
html5rocks.indexedDB.db = null;
html5rocks.indexedDB.open = function() {
var request = indexedDB.open("todos");
request.onsuccess = function(e) {
html5rocks.indexedDB.db = e.target.result; };
request.onfailure = html5rocks.indexedDB.onerror; };
(…)
API WEB SQL

8. Características WEB SQL
 Permite almacenaje mayor a 5 o 10MB.1
 El desarrollador indica la capacidad de almacenamiento para la BD que tendrá el navegador.1
 Funcionaba en todos los navegadores que contaban con el WEBKit.3
 WebKit: posibilita interactuar con un servidor web para recuperar y renderizar
páginas web, descargar archivos, y administrar plugins.4
 Utiliza código de ejecución SQL para:1
 Crear bases de datos.
 Insertar valores.
 Modificar.
 Consultar.
API WEB SQL
 Eliminar.

9. Navegadores Compatibles
Safari 3.2+
Chrome
Opera
Mobile Safari
API WEB SQL
3.2+Android 2.1+

10. Métodos principales
WEB SQL
 Existen 3 métodos principales de WEB SQL6:
1. OpenDatabase: Este método crea el objeto de base de datos, ya sea utilizando la base de
datos existente o crear uno nuevo.
2. transacción: Este método nos da la capacidad de controlar una transacción y realizar
cualquiera commit o rollback en base a la situación.
3. ExecuteSQL: Este método se utiliza para ejecutar la consulta SQL real.
API WEB SQL

11. Creación de una BD7
 El OpenDatabase método se encarga de abrir una base de datos si ya existe, en caso de que no
exista creara una base de datos nueva.
Método toma 4 parámetros:
 Nombre de la base ‘db’
 Número de versión ‘1.0’
 Descripción del texto ‘mi
primera base de datos’
 Tamaño de la base de datos 2*1024*1024

12. Declaración de variables y
7
funciones
API WEB SQL

13. Método transaction para
7
generar una consulta
API WEB SQL

14. Creación de Tablas e
inicio de las consultas7
API WEB SQL

15. Vista de la Tabla7
API WEB SQL

16. Resultado
API WEB SQL

17. Descarga Ejemplo1
http://goo.gl/A8osIq
API WEB SQL

18. Ejemplo 2 WEB SQL
Creación de la BD
 Nombre de la base de datos ‘mydb’
 Número de versión ‘1.0’
 Descripción del texto ‘ejemplo2’
 Tamaño de la base de datos 5000
API WEB SQL
kb = 5 MB otra forma de establecer
el tamaño de almacenamiento

19. Declaración de variables
y funciones.
API WEB SQL

20. Declaración de variables
y funciones.
API WEB SQL

21. Imprimir Datos
API WEB SQL

22. Resultado
API WEB SQL

23. Descarga Ejemplo2
http://goo.gl/pVUEhK
API WEB SQL

24. Actividad WEB SQL
*Actividad para llevarse a cabo en parejas*
API WEB SQL

25. Actividad WEB SQL
 Objetivo: Que el alumno pueda ser capaz de implementar una base de datos del tipo WEB SQL y
así reforzar el conocimiento acerca de esta API de HTML5.
 Descripción:
 Realice una pagina WEB que contenga como titulo “Mi primera WEB SQL”, en idioma español;
además acepte caracteres especiales.
 Deberá contener el numero de control y nombre de cada uno de los integrantes.
 En una etiqueta de párrafo comentar su opinión referente a esta API.
 Crear una base de datos llamada “escuela", con una tabla llamada “materias” la que contendrá
dos parámetros “materia” y “profesor”.
 Deberá insertar los valores para “materia” y “profesor” al dar clic sobre un botón, este obtendrá
los valores de dos campos de texto que tendrán los valores a agregar.
 Por ultimo deberá mostrar los elementos agregados en una tabla con borde de 5px en color azul.

26. Ejemplo
API WEB SQL

27. Conclusión
API WEB SQL

28. Conclusión
 En la opinión propia y criterio de cada uno de los integrantes que presentamos
esta exposición, podemos decir que la utilización de las bases de datos en un
entorno web son de suma importancia; Pero en lo particular la API WEB SQL no
tiene una función de suma relevancia, si no al contrario, carece de seguridad
para la protección de datos, cualquier persona con acceso a un navegador del
lado del cliente puede ver la base de datos estructurada, por lo que decimos
que no es la mejor opción para el almacenamiento WEB
 Inconvenientes: La falta de información acerca de esta API a consecuencia de
estar descontinuada retardo y complico la elaboración de la exposición.
 El tiempo aproximado de la elaboración de la exposición fue de 20 horas.
API WEB SQL

29. Referencias
o 1 Goldstein, Alexis, Lazaris, Louis y Weyl, Estelle. 2011. HTML5 and CSS3 for the real World.
[PDF] [ed.] Kelly Steele. 400, New York , USA : SitePoint Pty. Ltd., 2011. PDF.
o 2 Hikson,Lan. W3C. Sitio WEB W3C. [En línea] 18 de Noviembre de 2010.
[Citado el: 07 de Febrero de 2014.] http://www.w3.org/TR/webdatabase/#terminology.
o 3 Sharp, Remy. 2010. HTML5 Doctor. Sitio WEB HTML5 Doctor. [En línea] 24 de Febrero de 2010.
[Citado el: 10 de Febrero de 2014.] http://html5doctor.com/introducing-web-sql-databases/.
o 4 Wikipedia. 2014. Wikipedia. Sitio WEB Wikipedia.org. [En línea] 10 de Enero de 2014.
[Citado el: 10 de Febrero de 2014.] http://es.wikipedia.org/wiki/WebKit.
API WEB SQL

30. Referencias
o 5 Kinalan, Paul. 2013. html5rocks. Sitio WEB html5rocks. [En línea] 29 de Octubre de 2013.
[Citado el: 10 de Febrero de 2014.] http://www.html5rocks.com/es/tutorials/indexeddb/todo/.
o 6 Tutorials Point TP. Tutorials Point TP. Sitio WEB Tutorials Point TP. [En línea]
[Citado el: 10 de Febrero de 2014.] http://www.tutorialspoint.com/html5/html5_web_sql.htm.
o 7 Lubber, Peter, Frank, Salim and Brian, Albers. 2011. Pro HTML5 Programming. Segunda. s.l. :
Apress, 2011. p. 352.
API WEB SQL