Maestría en Ciencia de datos y Procesamiento de

Datos Masivos
TECNOLOGÍA AVANZADA EN BASE DE DATOS GA

José Del Carmen Mercado Betancourt

000-00-5397

3.2 Implementación de Media Queries.

Unidad 3

Mtro. César Robledo Jiménez

29/01/2023

1
Imagen 7 ...

Introducción

Una media query es una regla o conjunto de reglas CSS que se ejecutan para unas
condiciones específicas de la pantalla (tamaño, resolución, orientación, etc.) “son útiles
cuando se desea modificar una página web o aplicación en función del tipo de
dispositivo (como una impresora o una pantalla) o de características y parámetros
específicos (como la resolución de la pantalla o el ancho del viewport del navegador)”
(Developer Mozilla, 2022). Como plantea el científico “Håkon Wium Liel, quien, en 1994,
promovió la creación de las hojas de estilo en cascada con el fin de lograr una web
mejor estructurada y con una separación más eficiente de las distintas partes que
conforman el desarrollo web”.

En el tiempo el desarrollo CSS ha tenido varias especificaciones para su desarrollo, la

“Primera especificación oficial de CSS que vio a mediado de diciembre de 1996. Pese a
ser una primera versión, ya contaba con el visto bueno del W3C. la Segunda
especificación nació en mayo de 1998. Fue desarrollada íntegramente por el W3C y
consistía en una ampliación de CSS1. La Tercera versión es una revisión de la anterior
especificación CSS2. Más que ampliar funcionalidades, esta nueva especificación trató
de solucionar errores encontrados, fue entonces hasta junio del 2011 cuando por fin,
tras el visto el bueno del W3C, la especificación CSS 2.1 fue lanzada de forma definitiva
como recomendación oficial. Hasta hace dos o tres años, era la versión de CSS más
utilizada y la que mejor compatibilidad ofrecía con todos los navegadores” Rubiales
Gómez, M. (2021).
Este trabajo tiene como propósito desarrollar e implementar un modelo de Media
Queries asociado con cualquier tipo de usuarios. Conseguir la apropiación del
conocimiento en una organización por parte de sus usuarios en la implementación del
estilo CSS con media query. Este trabajo consta de dos partes, la parte1 se pone en
práctica la creación de base de datos utilizando Xampp con MySQL desde PhpMyadmin
donde se crea una base de datos con sus respectivas tablas con el objetivo de insertar
y consultar usuarios. La parte 2 consta del desarrollo de la actividad propuesta Para los

2
Imagen 7 ...

usuarios que padecen de algún tipo de daltonismo. aplicando desarrollo en HTML y el

estilo CSS con media query.
Desarrollo
Parte 1
Herramientas utilizadas

Para la realización de esta actividad, se utilizó la herramienta Xampp para desarrollar el

pequeño prototipo. XAMPP es un paquete de software libre, que consiste
principalmente en el sistema de gestión de bases de datos MySQL, el servidor web
Apache y los intérpretes para lenguajes de script PHP y Perl. Al contar con un gestor de
base de datos, y un servidor apache web, se puede desarrollar una página web que
permita las consultas de bases de datos.

Creación de dataset

En Xampp, se accede al administrador de PHPMyAdmin. Se crea una nueva base de

datos

Figura 1. Activación de PhpMyadmin

3
Imagen 7 ...

Cremamos una nueva base de datos

Le damos un nombre a la nueva base de datos y hacemos clic en crear

Figura 2. Creación de la base de datos bcourt26

Creamos la tabla de datos

Le damos un nombre a la tabla de datos, hacemos clic en crear

4
Imagen 7 ...

Figura 3. Creación tabla de datos proveedores

Llenamos todos los campos de la nueva base de datos con datos de un archivo en
Excel.

Figura 4. Tabla de datos con usuario

Abrimos el editor de texto Sublime Text y creamos la conexión a la base de datos

nueva.

5
Imagen 7 ...

Figura 5. Conexión de la base de datos al servidor

Ahora creamos un archivo index.php para crear la página web con HTML.

6
Imagen 7 ...

Figura 6. Creación de archivo índex

Ahora hacemos una prueba y listamos la base de datos creada y hacemos la

consulta respectiva.

$sql=” select * from proveedores”;

Tenemos una consulta total de la base de datos proveedores.

7
Imagen 7 ...

Base de datos consultada

Ahora hacemos la consulta según el ID del contacto comercial.

$sql="select * from proveedores where ID = 1";

Información consultada de un usuario

Creamos el código en HTML para el ingreso y consulta de los usuarios de la base de
datos.
8
Imagen 7 ...

Figura 7. Código en HTML crear formulario

Así quedaría el formulario de ingreso y consulta de usuario con los parámetros de la

base de dato creada.

Figura 8. Formulario de enviar y consultar usuarios

Desarrollo
Parte 2
9
Imagen 7 ...

Para los usuarios que padecen de algún tipo de daltonismo .

Se utiliza código de lenguaje de programación de PHP con el uso de los estilos CSS, de
tal forma que al hacer comparaciones del tipo if-else, también se delimitan las
características visuales que se mostraran en la página web en este ejercicio sobre
daltonismo.
Se implementa una página web en HTML con uso de media queries, al ingresar a la
página solicitará en un formulario el usuario y una contraseña, cuando el usuario
ingrese sus credenciales de acceso, la página revisará en una tabla de base de datos,
qué debilidad visual tiene el usuario que está ingresando y con base ello modificará los
estilos:
 Si el usuario es daltónico: los colores que se mostrarán serán contrastantes,
amarillo y purpura
 Si el usuario no es daltónico: los colores que se mostrarán serán similares, se
utilizara azul y verde
 Si el usuario tiene agudeza visual de cerca mayor que 0.7, el tamaño de fuente
será de 30px
 Si el usuario tiene agudeza visual de cerca menor a 0.7, el tamaño de fuente
será de 60px
 El tamaño de la fuente también dependerá del tamaño de la ventana donde se
visualice.

Creación de dataset

En Xampp, se accede al administrador de PHPMyAdmin. Se crea una nueva base de

dato

Figura 9. creación de la base de dato datosbcourt29

10
Imagen 7 ...

Creada la nueva base nueva, hacemos clic en el editor de SQL y se ingresa la siguiente
sentencia para crear la estructura de tabla de base de datos que tendrá la información
sobre las características visuales de las personas que tendrán acceso.

Tabla 1. código debilidad visual

La estructura de la tabla de datos de acceso a la página, se realizó con la siguiente

consulta SQL.

Tabla 2. código users

11
Imagen 7 ...

Obteniendo dos tablas de base de datos, users para almacenar los datos de los usuarios y
debilidad_visual para señalar las características de agudeza visual y daltonismo en los usuarios.

Figura 10. tablas bases de datos

El proceso de importación se realiza desde el gestor de datos PhpMyadmin

Figura 11. Importación de tabla

Se obtienen las dos bases de datos cada una con 7 registros, y tienen como llave
primaria el campo nombre y name id respectivamente.

12
Imagen 7 ...

Tablas 3. tablas importadas

Desarrollo de página web

Se realiza el código en PHP facilitando las consultas de bases de datos. En una primera
instancia se cuenta con una ventana en la que se deben ingresar las credenciales, en
tal sentido se trata de un formulario que consulta la tabla users para establecer el
acceso de los usuarios.

Figura 12. Formulario inicio de sesión

En una segunda instancia, se almacenan los datos de la sesión iniciada para hacer la búsqueda
del nombre en la tabla debilidad_visual, la consulta que se ejecuta en la siguiente tomando
todos los campos donde se encuentre la coincidencia en el nombre.

select * from debilidad_visual where nombre='$user'"

El código ajusta el lenguaje de programación de PHP con el uso de los estilos CSS, de
tal manera que al hacer comparaciones del tipo IF-ELSE se delimitan las características
visuales que se mostraran en la página web.

13
Imagen 7 ...

14
Imagen 7 ...

Figura 13. Código HTML con estilo CSS

15
Imagen 7 ...

Pruebas

Para realizar las pruebas se construyó la siguiente tabla con las siguientes
especificaciones:

agudeza Color de Color de Tamaño

Nombre Daltonismo
visual fondo letra de fuente
sebastian.garcia No 0.7 azul verde 30px
julio.barajas Si 0.6 amarillo purpura 60px
raquel.mondragon No 0.9 azul verde 30px
alma.laureano No 0.8 azul verde 30px
rocio.delacruz Si 0.5 amarillo purpura 60px
arturo.rosas Si 0.8 amarillo purpura 30px
juancarlos.moran Si 1 amarillo purpura 60px

Tabla 4. Tablas de valores

Resultados:

Figura 14. estilo azul usuario sebastian

Figura 15. Estilo azul usuario Raquel

Figura 16. Estilo amarillo usuario Arturo

16
Imagen 7 ...

Conclusiones

En el presente informe se puede concluir que se aplicaron los conceptos básicos para
elaborar una página web con estilo css y media query, y a la vez crear una base de
datos para consultar y agregar un usuario mediante un formulario php con MySQL.
Se Desarrolló e implementó un modelo de Media Queries asociado con cualquier tipo
de usuarios asociado a una base de datos.
Se especificaron los criterios para poder detallar la interacción de grupos de usuarios
que padecen de algún tipo de daltonismo.

Referencias

Developer Mozilla. (25 de noviembre de 2022). CSS media queries. Obtenido de

https://developer.mozilla.org/es/docs/Web/CSS/Media_Queries/Using_media_qu
eries
Geek, F. (14 de febrero de 2020). Consultar datos en MySQL y PHP con PHPMyAdmin.
Obtenido de https://www.youtube.com/watch?v=ghgcuNrLf5o
Hurtado, D. (6 de abril de 2016). Curso de PHP - Capitulo 8, Consultar Datos en
MYSQL con PHP (MySQLi). Obtenido de https://www.youtube.com/watch?
v=i1x8z5K3xpE&t=195s
Hurtado, D. (2020). CONSULTAR DATOS EN MYSQL. Obtenido de
https://dostinhurtado.com/site/cursos/curso-php/php-capitulo-8/
Torres, I. E. (17 de abril de 2020). ¿Cómo conectar formulario HTML con PHP y base
de datos MySQL? Obtenido de https://www.youtube.com/watch?v=ldNNu-qt8Hw
Rubiales Gómez, M. (2021). Curso de desarrollo Web. HTML, CSS y JavaScript.
Edición 2021. 1. Madrid, Difusora Larousse - Anaya Multimedia. Recuperado de
https://elibro.net/es/ereader/ucuauhtemoc/217150?page=191-192

17