Html en soluciones IoT

Objetivo
El objetivo de esta página es lograr conocer los fundamentos del protocolo HTTP, de HTML,
de las herramientas como editores, simuladores y servidores web, sin JavaScript por ahora,
pero de manera suficiente para que con ayuda de Chat GPT el estudiante pueda
cómodamente superar cualquier dificultad en soluciones para IoT en el lado del cliente. Esto
puede ser visto como el preámbulo a las Web Apps donde se trabajarán soluciones
cliente-servidor con su Front-End y su Back-End. En una siguiente práctica se incluirá el uso
de JavaScript para concluir los conocimientos necesarios para crear soluciones de
Front-End.

Conocimientos previos

Lenguaje HTML
HTML significa lenguaje de marcado de hipertexto. HTML es un lenguaje utilizado para
estructurar un contenido visual amigable a la vista de los humanos. En este sentido es muy
similar al lenguaje que usan editores como Word o Latex, pero el HTML tiene una ventaja -
es el mundialmente aceptado para los navegadores web. HTML hace que el contenido de
una página web pueda ser interpretado como en forma de texto para que sea fácilmente
interpretado en un punto final. Es posible ver el HTML como un conjunto de órdenes que se
le dan a un navegador para que logre construir una página en una forma deseada.

Servidor web
El servidor web es una pieza de software que almacena y entrega contenido web. Esto
podría ser un servidor físico o una infraestructura en la nube. Cuando se utiliza AJAX en
una página web, las solicitudes asincrónicas se envían al servidor web para obtener o
enviar datos, como información de la base de datos, archivos, actualizaciones en tiempo
real, etc.

Servicio de páginas web

El uso más común del protocolo HTTP consiste en un servidor web en la nube que contiene
el código html de una página web. Por solicitud de un navegador, el servidor web envía el
código html al navegador, donde el código es interpretado y mostrado como la página
deseada. Como se muestra en la siguiente figura, un usuario escribe la URL de una página
web en un navegador, el navegador hace una solicitud GET al servidor, el servidor
empaqueta el texto de la página, es decir el html en el paquete protocolo HTTP. Una vez
llega el paquete al navegador, en el computador del cliente, este extrae el cuerpo del
mensaje que corresponde a la versión en HTML de la página, interpreta ese HMTL para
traducirlo a una forma más amigable para el ser humano.

Fig. 2. Funcionamiento de un servicio de página web.

Con el tiempo, los navegadores han evolucionado para interpretar no solo contenido HTML,
sino también código JavaScript y contenido CSS en una página web. Esto es un hecho
clave en el desarrollo web moderno.

Un elemento html
Un documento HTML está compuesto de elementos. Un elemento está compuesto de una
etiqueta de apertura y una de cierre. En medio de las etiquetas va el contenido, como se
muestra en la Fig. 3

Fig. 3. Cómo es un elemento HMTL

● La etiqueta de apertura: consiste en el nombre del elemento (en este caso, p),
encerrado por paréntesis angulares (< >) de apertura y cierre. Establece dónde
 comienza o empieza a tener efecto el elemento - en este caso, dónde es el
comienzo del párrafo
● La etiqueta de cierre: es igual que la etiqueta de apertura, excepto que incluye una
barra de cierre (/) antes del nombre de la etiqueta. Establece dónde termina el
elemento - en este caso dónde termina el párrafo.
● El contenido: este es el contenido del elemento, que en este caso es sólo texto.

Los atributos en html:

Se trata de información del elemento que no debe ser vista por el cliente (usuario) pero que
contiene información sobre el elemento. Es decir, son metadatos. Es usualmente una pareja
nombre=valor. Va dentro de la etiqueta de apertura del elemento. En el ejemplo de la
siguiente figura, “class” es el nombre del atributo, “editor-note” es el valor del atributo. Se
usa mucho para crear marcas que pueden ser usadas por código de JavaScript o por CSS.

Fig. 4. Partes de un atributo dentro de un elemento

El anidamiento en html
Es posible anidar un elemento dentro de otro, por ejemplo

<p>Mi gato es <strong>muy</strong> gruñón.</p>

Elementos vacíos
Es posible encontrar elementos HTML que no están pensados en visualizar información, de
manera que la etiqueta de apertura y la de cierre es diferente. Por ejemplo:
<img>

Anatomía de un documento HTML

Los seres humanos tenemos una cabeza, un tronco y extremidades, de igual manera, un
documento HTML tiene mínimamente un preámbulo, un encabezado y un cuerpo. Esas
partes del documento se definen usando etiquetas, de manera que también podemos hablar
de unas etiquetas mínimas en un documento HTML.

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Mi pagina de prueba</title>
</head>
<body>
<p>Mi gato es <strong>muy</strong> gruñón.</p>
 </body>
</html>

Veamos las etiquetas mínimas a usar:

● <!DOCTYPE html>: Para indicar el tipo de documento. Anteriormente, cuando

HTML era joven (cerca de 1991/2), los tipos de documento actuaban como vínculos
a un conjunto de reglas que el código HTML de la página debía seguir para ser
considerado bueno, lo que podía significar la verificación automática de errores y
algunas otras cosas de utilidad. Sin embargo, hoy día es simplemente un artefacto
antiguo que a nadie le importa, pero que debe ser incluido para que todo funcione
correctamente.
● <html></html>: Todo lo que aparece en medio de estas etiquetas es lo que se
conoce como el elemento <html>, a veces se le conoce como el elemento raiz o root
element. Este elemento encierra todo el contenido de la página entera.
● <head></head>: Todo lo que aparece en medio de esas etiquetas conforma el
elemento <head>. Este elemento actúa como un contenedor de todo aquello que
quieres incluir en la página HTML que no es contenido visible para los visitantes de
la página. Incluye cosas como palabras clave (keywords), una descripción de la
página que quieres que aparezca en resultados de búsquedas, código CSS para dar
estilo al contenido, declaraciones del juego de caracteres, etc. El elemento <head>
tiene unos elementos minimos como:
○ <meta charset="utf-8"/>: Es el elemento <meta>. Este elemento establece
el juego de caracteres que tu documento usará en utf-8, que incluye casi
todos los caracteres de todos los idiomas humanos. Básicamente, puede
manejar cualquier contenido de texto que puedas incluir. No hay razón para
no establecerlo, y puede evitar problemas en el futuro.
○ <title></title> - el elemento <title> establece el título de tu página, que es el
título que aparece en la pestaña o en la barra de título del navegador cuando
la página es cargada, y se usa para describir la página cuando es añadida a
los marcadores o como favorita.
● <body></body> - el elemento <body>. Encierra todo el contenido que deseas
mostrar a los usuarios web que visiten tu página, ya sea texto, imágenes, videos,
juegos, pistas de audio reproducibles, y demás.

Otras etiquetas de marcado de texto

En el tema anterior se vieron etiquetas mínimas en un documento HTML. Ahora podemos
hablar de otras que son de uso frecuente

Etiquetas de encabezados
<h1>Mi título principal</h1>
<h2>Mi título de nivel superior</h2>
<h3>Mi subtítulo</h3>
<h4>Mi sub-subtítulo</h4>
Código CSS
Significa Cascading Style Sheets. Se trata de código que puede aparecer en un documento
HTML, en el elemento <head> para responder a preguntas como: ¿Cómo hago mi texto
rojo o negro? ¿Cómo hago que mi contenido se muestre en tal y tal lugar de la
pantalla? ¿Cómo decoro mi página web con imágenes de fondo y colores?. Es un
lenguaje de hojas de estilo, es decir, te permite aplicar estilos de manera selectiva a
elementos en documentos HTML.
Muchas veces el código se escribe en un archivo style.css. Pero si se hace de esa manera
es necesario referencia ese archivo en el elemento <head> del documento HTML.
La anatomía de una orden CSS es la que se muestra en la siguiente figura

Figura 5. Anatomía del código CSS

El selector: determina a qué cosa aplica la orden. Para el ejemplo de la figura anterior,
aplica para a los elementos <p> que hayan en el cuerpo del documento
Par clave:valor: Entre llaves vemos un conjunto de pares clave: valor: tal como se hace en
los objetos de datos de JavaScript. Nota: a diferencia de los objetos de JavaScript, donde
se usa como (,) para separar una declaración de otra, aquí se debe usar el punto y coma (;).
Para el ejemplo de la Figura anterior significa que los elementos <p> en el cuerpo
aparecerán en color rojo

En realidad un CSS es un elemento <style> dentro del elemento <head>. Ejemplo

de CSS

<head>
<title>Mi título</title>
<style>
p{
color: red;
width: 500px;
border: 1px solid black;
}
</style>
</head>

Los selectores más comunes aparecen en la siguiente tabla

Nombre del selector Qué selecciona Ejemplo

Selector de elemento
Todos los elementos HTML p
(llamado algunas veces
del tipo especificado. Selecciona <p>
selector de etiqueta o tipo)

El elemento en la página
con el ID especificado (en #mi-id
Selector de identificación
una página HTML dada, Selecciona <p id="mi-id"> y
(ID)
solo se permite un único <a id="mi-id">
elemento por ID).

Los elementos en la página

.mi-clase
con la clase especificada
Selecciona <p
Selector de clase (una clase puede aparecer
class="mi-clase"> y <a
varias veces en una
class="mi-clase">
página).

img[src]
Los elementos en una
Selecciona <img
Selector de atributo página con el atributo
src="mimagen.png"> pero
especificado.
no <img>

Los elementos
especificados, pero solo a:hover
cuando esté en el estado Selecciona <a>, pero solo
Selector de pseudoclase
especificado, por ejemplo cuando el puntero esté
cuando el puntero esté sobre el enlace.
sobre él.

Reto general para esta práctica

Debemos crear un sitio Web elegante en el que se muestren los datos IoT que se
encuentran en una Google Sheet. Pero vamos a imaginar que el desarrollador apenas si
está aprendiendo HTML y por ello necesita comenzar realizar pequeños sprints para ir
conquistando competencias que lo llevarán al producto final. Esos sprints comprenden:
● Crear un documento HTML muy básico, pero suficiente como para comprobar cosas
como:
○ conocer los mínimos que debe contener un documento HTML para que
pueda ser publicado como una página Web
○ conocer cómo usar un simulador para comprobar que el documento HTML va
a lograr el efecto deseado.
○ Lograr publicar el código como una página web y ver el resultado.
○ Usar el documento HTML como parte de otra página web ya existente para
lograr una solución elegante de manera asombrosamente rápida.
 ○ conocer como usar un editor de Front-End para producir código de manera
más profesional y publicarlo

Tarea 1. Con ayuda de Chat GPT genera el HTML

para un documento HTML simple. Uso de un
simulador de navegador y tablas HTML.
Para comenzar a relacionar esto con una solución IoT, este es el preámbulo para un servicio
requerido por la oficina de despachos de productos para atender solicitudes que provienen
de neveras remotas que solicitan surtido de productos. Suscribirse por MQTT o usar una
Google Sheet no resulta una solución elegante para la oficina de despachos.

Paso 1. Crear un documento HTML que represente un avance para la oficina de despachos,
pero que por ahora incluye solo elementos mínimos de un documento HTML con el fin de
comprender/repasar cuales son esos elementos.
Ejemplo de la orden para Chat GPT:
Dame el código HTML para un documento HTML de acuerdo a los siguientes
requerimientos:
Título: “Servicios a la oficina de reparto”
Lo que los clientes verán en el navegador: Órdenes recibidas para el despacho

Escribe aquí el código HTML obtenido. Nota: Si al pegar el código no aparece con estilo
elegante usa un embellecedor de código como por ejemplo: http://hilite.me/

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Servicios a la oficina de reparto</title>
</head>
<body>
<h1>Órdenes recibidas para el despacho</h1>
<!-- Aquí puedes agregar más contenido si es necesario -->
</body>
</html>

Usa un simulador del navegador (HTML viewer) para comprobar el resultado del HTML
anterior. Por ejemplo se puede usar: Code Viewer(https://codebeautify.org/htmlviewer).
Tambien puedes usar un editor en línea de Front-End como:
 ¿Que has aprendido en este paso? ¿Qué es lo mínimo que debe tener un documento
HTML?
RTA: En este paso, he aprendido la importancia de la estructura básica de un documento
HTML y cómo crearla. Me di cuenta de que un documento HTML mínimo debe tener
ciertos elementos clave para que funcione correctamente en un navegador web. Estos
elementos incluyen:

La declaración <!DOCTYPE html> al principio del documento, que especifica la versión de

HTML que se está utilizando.
El elemento <html> que envuelve todo el contenido del documento.
El elemento <head> que contiene metadatos sobre el documento, como el título de la
página y otras etiquetas meta.
El elemento <title> dentro del <head>, que define el título de la página que se muestra en
la pestaña del navegador.
El elemento <body> que contiene el contenido visible de la página, como texto, imágenes,
enlaces, etc.

Paso 2. Usa Chat GPT para conocer el elemento que debes agregarle al <body> de tu
HTML para que aparezca una imagen elegante en la parte superior de la página
Busca la URL de una imágen en internet. Por ejemplo en el buscador de google busca
imágenes de neveras inteligentes. Copia la URL (la dirección del vínculo) y escribela aquí:

https://d2yoo3qu6vrk5d.cloudfront.net/images/20240119130001/nevera-inteligente-1024x
1024.jpg

Ejemplo de pregunta para Chat GPT:

Quiero conocer el elemento que puedo agregar al <body> de tu HTML para que aparezca
en la parte superior de la página una imagen. No quiero un ejemplo de todo el código
HTML, solo el código del elemento cuando la imagen tiene la URL siguiente: [escribe aqui
la URL].

<img
src="https://d2yoo3qu6vrk5d.cloudfront.net/images/20240119130001/nevera-inteligente-1
024x1024.jpg" style="max-width: 100%;" alt="Nevera inteligente">

Código completo para el documento HTML

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Servicios a la oficina de reparto</title>
</head>
<body>
<img
src="https://d2yoo3qu6vrk5d.cloudfront.net/images/20240119130001/nevera-inteligente-1
024x1024.jpg" style="max-width: 100%;" alt="Nevera inteligente">

<h1>Órdenes recibidas para el despacho</h1>

<!-- Aquí puedes agregar más contenido si es necesario -->
</body>
</html>

Resultado que entrega el simulador de navegador

Análisis. ¿Qué has aprendido en este paso? ¿Cómo es el elemento html para una
imágen? ¿dónde debe ir ese elemento?
RTA: En este paso, he aprendido cómo visualizar y hacer que una imagen se adapte al
tamaño de la pantalla donde será visualizada. Descubrí que puedo lograr esto mediante
el uso del atributo `style` en el elemento `<img>` en HTML. Al establecer `max-width:
100%;` dentro del atributo `style`, puedo asegurarme de que la imagen se ajuste al ancho
máximo posible de su contenedor sin distorsionarse ni exceder su tamaño original.

El elemento HTML para una imagen es `<img>`. Este elemento se utiliza para incrustar
imágenes en una página web. Tiene dos atributos principales: `src`, que especifica la URL
de la imagen que se va a mostrar, y `alt`, que proporciona un texto alternativo para la
imagen en caso de que no se pueda cargar o para usuarios con discapacidad visual.

El elemento `<img>` debe colocarse dentro del `<body>` de un documento HTML, en la

ubicación donde deseamos que aparezca la imagen en la página. Podemos colocarlo en
cualquier lugar dentro del `<body>`, dependiendo de dónde queramos que aparezca la
imagen visualmente en la página web.

Paso 3. Con ayuda de Chat GPT agrega código CSS al documento HTML del paso anterior

Ejemplo 1:
Tengo un HTML y quiero que le agregues el CSS necesario para que el párrafo aparezca
en color rojo, dentro de un marco de 500 píxeles de ancho. El siguiente es el HTML que
tengo: [pega aquí tu código HTML]

Escribe aquí el código obtenido

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Servicios a la oficina de reparto</title>
<style>
p{
color: red; /* Cambia el color del texto a rojo */
max-width: 500px; /* Establece el ancho máximo del párrafo a 500 píxeles */
margin: 0 auto; /* Centra el párrafo horizontalmente dentro de su contenedor */
border: 2px solid black; /* Añade un borde negro alrededor del párrafo */
padding: 10px; /* Añade espacio interno alrededor del párrafo */
}
</style>
</head>
<body>
<img
src="https://d2yoo3qu6vrk5d.cloudfront.net/images/20240119130001/nevera-inteligente-1
024x1024.jpg" style="max-width: 100%;" alt="Nevera inteligente">

<h1>Órdenes recibidas para el despacho</h1>

<p>
Aquí puedes agregar el contenido del párrafo.
</p>
</body>
</html>

Agrega aquí captura de pantalla del simulador de navegador

 ¿Qué has aprendido en este paso? ¿para qué sirve el CSS?¿En qué parte de un
documento HTML se debe ubicar el CSS?

En este paso, he aprendido cómo agregar estilos visuales a elementos HTML utilizando
CSS que es un lenguaje de diseño utilizado para controlar el aspecto y el formato de un
documento HTML.

El CSS es fundamental para dar estilo y diseño a una página web. Permite especificar
propiedades como colores, tamaños, márgenes, bordes y posicionamiento de elementos
HTML, lo que ayuda a mejorar la apariencia y la experiencia del usuario en el sitio web.

Paso 4. Agrega al HTML anterior una tabla de las solicitudes que provienen de la nevera

Ejemplo de la solicitud que puedes hacerle a Chat GPT:

Quiero que ahora el cliente pueda ver debajo del primer aviso, una tabla que tiene estas
características: hay 6 columnas y 3 filas; la primera fila contiene los encabezados:
numero,fecha,nevera,producto,cantidad,pesos; la 2da fila tendrá los valores: 1,
2023-09-27 6:16:38,neveraChachones,huevos,10,30000; la fila 1 estará resaltada en
color naranja

Escribe aquí el código obtenido

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Servicios a la oficina de reparto</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}

th, td {
border: 1px solid black;
padding: 8px;
text-align: left;
}

tr:nth-child(1) {
background-color: orange;
}
</style>
</head>
<body>
<img
src="https://d2yoo3qu6vrk5d.cloudfront.net/images/20240119130001/nevera-inteligente-1
024x1024.jpg" style="max-width: 100%;" alt="Nevera inteligente">

<h1>Órdenes recibidas para el despacho</h1>

<table>
<tr>
<th>Número</th>
<th>Fecha</th>
<th>Nevera</th>
<th>Producto</th>
<th>Cantidad</th>
<th>Pesos</th>
</tr>
<tr style="background-color: orange;">
<td>1</td>
<td>2023-09-27 6:16:38</td>
<td>neveraChachones</td>
<td>huevos</td>
<td>10</td>
<td>30000</td>
</tr>
<!-- Agregar más filas si es necesario -->
</table>
</body>
</html>

Agrega aquí captura de pantalla del simulador de navegador

Pídele a Chat GPT que mejore el estilo de la tabla usando un servicio externo de estilos
como por ejemplo Bootstrap. Ejemplo de la solicitud a Chat GPT:

Tengo un HTML. Deseo que modifiques el CSS para que la tabla sea más elegante
usando un servicio de estilos como bootstrap. Mi código HTML es el siguiente: [escribe tu
codigo HTML aquí]

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Servicios a la oficina de reparto</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
rel="stylesheet">

<style>
table {
border-collapse: collapse;
width: 100%;
}

th, td {
border: 1px solid black;
padding: 8px;
text-align: left;
}
 tr:nth-child(1) {
background-color: orange;
}
</style>
</head>
<body>
<img
src="https://d2yoo3qu6vrk5d.cloudfront.net/images/20240119130001/nevera-inteligente-1
024x1024.jpg" style="max-width: 100%;" alt="Nevera inteligente">

<h1>Órdenes recibidas para el despacho</h1>

<table class="table table-bordered table-striped">
<thead class="thead-dark">
<tr>
<th>Número</th>
<th>Fecha</th>
<th>Nevera</th>
<th>Producto</th>
<th>Cantidad</th>
<th>Pesos</th>
</tr>
</thead>
<tbody>
<tr class="table-warning">
<td>1</td>
<td>2023-09-27 6:16:38</td>
<td>neveraChachones</td>
<td>huevos</td>
<td>10</td>
<td>30000</td>
</tr>
<!-- Agregar más filas si es necesario -->
</tbody>
</table>
<!-- Agregar la CDN de Bootstrap JavaScript (opcional) -->
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

</body>
</html>

Resultado del simulador aquí.

 Qué has aprendido en este paso1? ¿cual es elemento HTML para crear tablas en un
documento HTML? ¿por qué se requiere código a nivel del CSS?

En este paso, he aprendido a mejorar la apariencia de una tabla en HTML utilizando

Bootstrap, un framework que proporciona estilos predefinidos para hacer que el diseño de
una página web sea más elegante y consistente. Utilizamos el elemento HTML `<table>`
para crear la tabla y luego aplicamos clases de Bootstrap para estilizarla. También
comprendí que, aunque Bootstrap ofrece estilos predefinidos, en ocasiones es necesario
utilizar CSS personalizado para ajustar los estilos según nuestras necesidades
específicas. En este caso, aplicamos un estilo personalizado para resaltar la primera fila
de la tabla en color naranja.

Paso 5. uso de hipervínculos

La solución anterior tiene una falla: que no muestra en realidad los datos de Google Sheet
que es parte de la solución IoT. Eso se podría resolver con trucos modernos y JavaScript.

Por ahora recurriremos a una solución poco elegante pero que soluciona el problema
usaremos un hipervínculo que apunte a la Google Sheet.

Escribe aquí la URL de la Google Sheet donde son registrados los datos. Procura
previamente configurar la Google Sheet con permisos para que cualquier persona la
pueda ver. Ejemplo:
https://docs.google.com/spreadsheets/d/1bBtfmCT5sGC3dHzFXXno6FM2zUipWa2yGj4td
VOfm22

https://docs.google.com/spreadsheets/d/1c2STi1lqTB3BR_Q-dbr_qE1HJGXvlytG8cc_yR5
_Vwc/edit#gid=0

Hazle a Chat GPT una solicitud de apoyo para agregar el hipervínculo al código HTML
obtenido en la tarea anterior.
Ejemplo para solicitar a Chat GPT la solución:
Tengo el HTML de una página y quiero agregar un hipervínculo. Los datos son los
siguientes:
Enlace para el hipervínculo: [pega aquí la URL de tu google sheet],
Nombre del hipervínculo: Haz click aquí para ver tabla de datos
El HTML que tengo es el siguiente: [aquí pega el último HTML obtenido]

Respuesta de Chat GPT

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Servicios a la oficina de reparto</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
rel="stylesheet">

<style>
table {
border-collapse: collapse;
width: 100%;
}

th, td {
border: 1px solid black;
padding: 8px;
text-align: left;
}

tr:nth-child(1) {
background-color: orange;
}
</style>
</head>
<body>
<img
src="https://d2yoo3qu6vrk5d.cloudfront.net/images/20240119130001/nevera-inteligente-1
024x1024.jpg" style="max-width: 100%;" alt="Nevera inteligente">

<h1>Órdenes recibidas para el despacho</h1>

<table class="table table-bordered table-striped">
<thead class="thead-dark">
<tr>
<th>Número</th>
<th>Fecha</th>
<th>Nevera</th>
<th>Producto</th>
 <th>Cantidad</th>
<th>Pesos</th>
</tr>
</thead>
<tbody>
<tr class="table-warning">
<td>1</td>
<td>2023-09-27 6:16:38</td>
<td>neveraChachones</td>
<td>huevos</td>
<td>10</td>
<td>30000</td>
</tr>
<!-- Agregar más filas si es necesario -->
</tbody>
</table>

<!-- Hipervínculo -->

<a
href="https://docs.google.com/spreadsheets/d/1c2STi1lqTB3BR_Q-dbr_qE1HJGXvlytG8c
c_yR5_Vwc/edit#gid=0">Haz click aquí para ver tabla de datos</a>

<!-- Agregar la CDN de Bootstrap JavaScript (opcional) -->

<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

Captura de pantalla del resultado que entrega el simulador

 ¿Qué has aprendido? ¿cómo se llama el elemento HTML que permite crear
hipervínculos? ¿cómo se usa?

En este paso, aprendí a agregar hipervínculos a una página web utilizando HTML. El
elemento HTML utilizado para crear hipervínculos es <a>, abreviatura de "anchor" (ancla).
Para usar este elemento, necesitamos especificar el atributo href, que contiene la URL a
la que queremos que apunte el hipervínculo.

Tarea 2. Embeber un código html en otro HTML.

Paso 1. Embeber código de una página web externa. Uso de frames
El problema de la solución anterior es que los datos no aparecen embebidos en la página.
Además, al hacer click en el hipervínculo se abre una nueva ventana del navegador lo cual
hace que el cliente se pueda alejar de nuestra página.
Para solucionarlo, usaremos un truco que incluyen las hojas de Google Sheet - la de ser
vista como una página web. Es decir, Google Sheet puede ser vista como una cierta página
Web y esa página Web puede ser embebida en nuestra página como un frame.

Copia el código HTML resultante, el cual incluye la URL pero dentro de un frame

Convierte a la google sheet a una solución web.

El proceso es así:
abres tu google sheet > Menu > Archivo > Compartir > publicar en la Web > Insertar >
Fíjate en la configuración para que esa publicación sea abierta al público.

Copia abajo el Código HTML obtenido para embeber la versión web de la Google Sheet

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Servicios a la oficina de reparto</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
rel="stylesheet">

<style>
table {
border-collapse: collapse;
width: 100%;
}

th, td {
border: 1px solid black;
padding: 8px;
text-align: left;
}

tr:nth-child(1) {
background-color: orange;
}
</style>
</head>
<body>
<img
src="https://d2yoo3qu6vrk5d.cloudfront.net/images/20240119130001/nevera-inteligente-1
024x1024.jpg" style="max-width: 100%;" alt="Nevera inteligente">

<h1>Órdenes recibidas para el despacho</h1>

<table class="table table-bordered table-striped">
<thead class="thead-dark">
<tr>
<th>Número</th>
<th>Fecha</th>
<th>Nevera</th>
<th>Producto</th>
<th>Cantidad</th>
<th>Pesos</th>
</tr>
</thead>
<tbody>
<tr class="table-warning">
<td>1</td>
<td>2023-09-27 6:16:38</td>
 <td>neveraChachones</td>
<td>huevos</td>
<td>10</td>
<td>30000</td>
</tr>
<!-- Agregar más filas si es necesario -->
</tbody>
</table>
<!-- Hipervínculo -->
<iframe
src="https://docs.google.com/spreadsheets/d/e/2PACX-1vS2wxSMgcHlsWYVDwnkbnf_R
gNpopjH6Ej7MVRp7Z-8kcdanLbITQ_kLLipqRFIJ1holaJu3kLPRpge/pubhtml"
width="100%" height="600" frameborder="0" scrolling="no"></iframe>

<!-- Agregar la CDN de Bootstrap JavaScript (opcional) -->

<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

</body>
</html>

Usualmente el código que ofrece la solución anterior es un recuadro (frame) que no es

suficientemente ancho para ver toda la tabla. Pídele a Chat GPT que lo modifique para
que el frame sea 2,5 veces más ancho. Escribe abajo el código final obtenido

Ejemplo de solicitud a Chat GPT:

Quiero que mejores este código del siguiente frame para que el cliente lo vea 2,5 veces
más ancho [escribe aquí el código obtenido en el paso 1]

width="250%"

Pídele ayuda a Chat GPT para embeber ese código a tu HTML. Escribe abajo el código
final obtenido.
Ejemplo de la solicitud a Chat GPT:
Tengo un HTML quiero embeberle en la parte final el frame obtenido en la pregunta
anterior. Mi HTML es el siguiente: [escribe aquí el codigo de tu documento HTML]

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Servicios a la oficina de reparto</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
rel="stylesheet">

<style>
table {
border-collapse: collapse;
width: 100%;
}
 th, td {
border: 1px solid black;
padding: 8px;
text-align: left;
}

tr:nth-child(1) {
background-color: orange;
}
</style>
</head>
<body>
<img
src="https://d2yoo3qu6vrk5d.cloudfront.net/images/20240119130001/nevera-inteligente-1
024x1024.jpg" style="max-width: 100%;" alt="Nevera inteligente">

<h1>Órdenes recibidas para el despacho</h1>

<table class="table table-bordered table-striped">
<thead class="thead-dark">
<tr>
<th>Número</th>
<th>Fecha</th>
<th>Nevera</th>
<th>Producto</th>
<th>Cantidad</th>
<th>Pesos</th>
</tr>
</thead>
<tbody>
<tr class="table-warning">
<td>1</td>
<td>2023-09-27 6:16:38</td>
<td>neveraChachones</td>
<td>huevos</td>
<td>10</td>
<td>30000</td>
</tr>
<!-- Agregar más filas si es necesario -->
</tbody>
</table>
<!-- Hipervínculo -->
<iframe
src="https://docs.google.com/spreadsheets/d/e/2PACX-1vS2wxSMgcHlsWYVDwnkbnf_R
gNpopjH6Ej7MVRp7Z-8kcdanLbITQ_kLLipqRFIJ1holaJu3kLPRpge/pubhtml"
width="250%" height="600" frameborder="0" scrolling="no"></iframe>

<!-- Agregar la CDN de Bootstrap JavaScript (opcional) -->

<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

</body>
</html>
 Captura de pantalla del simulador de navegador.

Tarea 3. Obtener una solución elegante y rápida

usando una página web moderna.
Paso 5. Crea una página Web usando Google Sites y allí incrusta el código HTML
desarrollado para comprobar que funciona como parte de otra página en línea:

Parte 1: Te logeas en gmail > https://sites.google.com/ > Crear un sitio > seleccione una
plantilla si puede, si no puede que sea una hoja en blanco > esquina superior izquierda>
dele un nombre al archivo > mas abajo, en logotipo dele en nombre de la futura página, por
ejemplo “repartos”, como se muestra en la siguiente figura

Parte 2: póngale un título que verá el cliente, por ejemplo “Departamento de repartos” >
Parte 3: inserte su código html así: Menu panel izquierdo > Insertar > “<>Insertar” > Insertar
código > pegue allí su HTML > Siguiente > Insertar > borre todo aquello que ofrece la
plantilla pero que tu no deseas para tu página

Parte 4. Note que lo que tienes hasta ahora es simplemente un archivo, no es aún una
página web. Puedes ver el archivo en Google Drive > recientes > miPrimerSitio. Lo que falta
ahora es generar una página web a partir de ese archivo. Este es el proceso:
Menu superior derecho > Publicar > Publicar. Ahora puedes ver el sitio web publicado así:

Ahora verás en la barra superior del navegador que tu sitio web tiene una URL

Escribe aquí la URL de tu sitio

https://sites.google.com/view/nevera-inteligente-mmandon-uis/p%C3%A1gina-principal

Captura la pantalla de tu sitio de manera que muestre el resultado visual de tu código

HTML
Paso 6. Análisis
 Análisis. Analice el código HTML final obtenido. Explique de qué manera es posible
introducir tablas usando HTML.

En el código HTML, la tabla se introduce mediante el uso de los elementos mencionados

anteriormente. La tabla tiene una fila de encabezado definida por los elementos <th>
dentro de la fila de encabezado <tr>, y las celdas de datos están definidas por los
elementos <td> dentro de las filas de datos <tr>.

Tarea 4. Uso de un editor profesional de páginas

(entorno web de desarrollo)
Paso 1. Suscribirse a jsfiddle - un editor en línea de páginas HTML: https://jsfiddle.net/. El
objetivo es actuar de manera más profesional y conocer la estrategia que usan los editores
para separar el HTML del CSS pero que a la postre tienen el mismo efecto de un
documento HTML que contiene todo. Nota: podemos decir que jsfriddle es un editor de
soluciones Front-End (un Entorno de Desarrollo Web) porque incluye JavasScript. Pero lo
usaremos como editor de páginas HTML.

Paso 2. Uso de jsfiddle para comprobar que se logra lo mismo que con el HTML Viewer.

Pega el código obtenido en la tarea anterior en la ventana HTML de jsfiddle, córrelo con
“Run” y observa el resultado. Pega abajo el resultado.

Guarda el código anterior en to jsfiddle para tu colección.

Con consulta como se guarda tu código (tus jsfriddles)

Paso 3. Uso más profesional de un editor de HTML. Separa el código CSS del documento
HTML para usarlo de manera más natural en jsfiddle.
Escribe aquí el código HTML sin CSS

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Servicios a la oficina de reparto</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
rel="stylesheet">
<style>
table {
border-collapse: collapse;
width: 100%;
}

th, td {
border: 1px solid black;
padding: 8px;
text-align: left;
}

tr:nth-child(1) {
background-color: orange;
}
</style>
</head>
<body>
<img
src="https://d2yoo3qu6vrk5d.cloudfront.net/images/20240119130001/nevera-inteligente-1
024x1024.jpg" style="max-width: 100%;" alt="Nevera inteligente">

<h1>Órdenes recibidas para el despacho</h1>

<table class="table table-bordered table-striped">
<thead class="thead-dark">
<tr>
<th>Número</th>
<th>Fecha</th>
<th>Nevera</th>
<th>Producto</th>
<th>Cantidad</th>
<th>Pesos</th>
</tr>
</thead>
<tbody>
<tr class="table-warning">
<td>1</td>
<td>2023-09-27 6:16:38</td>
<td>neveraChachones</td>
<td>huevos</td>
<td>10</td>
<td>30000</td>
</tr>
 <!-- Agregar más filas si es necesario -->
</tbody>
</table>

<!-- Hipervínculo -->

<iframe
src="https://docs.google.com/spreadsheets/d/e/2PACX-1vS2wxSMgcHlsWYVDwnkbnf_R
gNpopjH6Ej7MVRp7Z-8kcdanLbITQ_kLLipqRFIJ1holaJu3kLPRpge/pubhtml"
width="250%" height="600" frameborder="0" scrolling="no"></iframe>

<!-- Agregar la CDN de Bootstrap JavaScript (opcional) -->

<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

Escribe aquí el código CSS sin HTML:

<style>
table {
border-collapse: collapse;
width: 100%;
}

th, td {
border: 1px solid black;
padding: 8px;
text-align: left;
}

tr:nth-child(1) {
background-color: orange;
}
</style>

Crea un un nuevo fiddle para esta prueba así: > Your fiddles > New fiddle. Pega el
código HTML en la ventana HTML y el código CSS en la ventana CSS. Corre la solución
con “Run”, pega un pantallazo del resultado (ventana Result)
Conclusión 1: Usa Chat GPT para aclarar las siguientes inquietudes ¿podríamos decir
que un editor permite trabajar HTML y CSS parados cada uno en un archivo? ¿Cómo
hace el navegador para operar con los varios archivos de una página si solo tiene una
URL? ¿Se supone que esa URL no es de ninguno de esos archivos sino de un producto
que resulta de la conversión a página web?. Lee lo que dice Chat GPT y resume la
conclusión con tus propias palabras.

1. Trabajo con archivos HTML y CSS: Es común trabajar con HTML y CSS en archivos
separados utilizando un editor de código. Esto permite mantener la estructura del
documento (HTML) y el diseño y estilo (CSS) en archivos diferentes para una mejor
organización y modularidad del código.

2. Funcionamiento del navegador con múltiples archivos: Cuando el navegador recibe una
URL, envía una solicitud al servidor web correspondiente. El servidor responde enviando
los archivos asociados con esa URL, que pueden incluir archivos HTML, CSS, JavaScript,
imágenes, etc. El navegador interpreta y combina estos archivos para renderizar la
página web completa.

3. URL como punto de acceso al producto final: Aunque la URL puede no ser específica
de un archivo HTML o CSS en particular, sirve como punto de entrada al producto final: la
página web completa. El navegador carga y muestra todos los recursos necesarios para
mostrar la página web correctamente, incluidos los archivos HTML, CSS y otros recursos
asociados.

Conclusión 2: Está claro que un entorno de desarrollo como jsfiddle entrega varios
archivos para una sola solución, que no hay problema para un servidor web trabajar con
varios archivos, pero ¿si tengo varios archivos de una solución web obtenidos con jsfiddle
y quiero embeber la solución en una página web, como es el caso de Google Sites, cómo
obtengo el código html a embeber a partir de los varios archivos de la solución web?

Al embeber una solución web obtenida de varios archivos de JSFiddle en una página de
Google Sites, primero debo combinar todo el contenido de los archivos HTML, CSS y
JavaScript en un solo archivo para simplificar la inserción. Luego, copio el código HTML
principal, que incluye las etiquetas `<html>`, `<head>`, `<body>` y las referencias a los
archivos CSS y JavaScript, y lo pego en el editor de Google Sites. Si hay archivos CSS y
JavaScript separados, también copio su contenido y lo inserto dentro de las etiquetas
 `<style>` y `<script>` respectivamente, en el código HTML principal. Aseguro que las
referencias a recursos como imágenes estén correctamente ajustadas para que funcionen
correctamente una vez insertadas en Google Sites. Después de pegar el código HTML en
Google Sites, reviso la vista previa y hago cualquier ajuste necesario para garantizar que
la solución web se muestre correctamente en la página.

Guarda el código resultante en to jsfiddle para tu colección.

Tarea 5. Publicación de página html. Creación de

una página web
Estás cansado de usar un simulador de navegador. Entonces es hora de crear un sitio web
para poder verlo en un navegador real. Esta también puede ser una solución a la pregunta
que aparece en la conclusión 2 de la tarea anterior, ya que el resultado de una publicación
en Google Sites para embeber una solución no solo está la posibilidad de usar código html
sino también una URL.

Paso 1. Registrate en GitHub. Tener una cuenta en GitHub (o en un sistema similar) es

esencial para cualquier desarrollador. GitHub brinda el servicio de repositorio de software, lo
cual permite guardar y compartir soluciones, pero sobre todo trabajar en equipo.

Paso 2. Aprender a manejar GitHub como repositorio requiere un taller solo dedicado a eso.
Por ahora, lo que nos interesa es otra cosa: que GitHub tiene un servicio llamado GitHub
pages a donde podemos subir los archivos de un desarrollo web y los publica como una
página web. Este servicio puede ser considerado como Serverless, ya que de otra suerte
tendríamos que crear un servidor web propio para este fin.

El profesor, aunque conoce esta posibilidad, nunca la ha experimentado. Tu debes

investigar cómo hacerlo y explicarle al profesor el paso a paso. Muestra pantallazos de tu
solución
Escribe aquí la URL de tu página web

https://michaelmandon.github.io/

Escribe aquí el paso a paso para usar GitHub Pages como servidor Web

1. entra a tu cuenta de github o crea una.

2. crea un nuevo repositorio.
3. llámalo así: user.github.io. Donde “user” sea tu nombre de usuario.
4. selecciona la opción de crear el archivo README.md
5. seleccionar crear repositorio.
6. modifica el archivo README.md con tu código html de tu página.
 7. dale en comentar cambios.
8. Espero que se publique correctamente.
9. dale en la opción de ajustes.
10. seleccionar “páginas”
11. seleccionar “visitar la página”.

Paso 4. Embebe tu página web, en Google Sites usando la URL de tu página web

Toma un pantallazo de la solución