Actividad 2: Mejora de la página web
Actividad 2:
Mejora de la página web
En esta actividad, partiendo del código ya funcional de la actividad anterior, se buscará hacer un lavado de cara al diseño básico ya existente de la página web.
Para ello, te proponemos que selecciones las tonalidades de colores más apropiadas que tú consideres, para que el diseño quede a tu gusto. A continuación, te desglosamos cada uno de los aspectos a modificar del código:
Pista 1 - Imagen de la pestaña web
Si te fijas en la actividad anterior, te habrás dado cuenta que faltaba algo en la pestaña de la página web
diseñada. Como la mayoría de páginas web, vamos a ver cómo introducir una imagen que le dé un
aspecto más atractivo.
Para ello, hay dos formas de hacerlo:
1. Convirtiendo una imagen (en formato PNG, por ejemplo) a base 64, de manera que el propio sistema
tenga acceso a la misma. Es la menos recomendada, ya que usualmente la cadena de caracteres
correspondiente a una imagen es bastante larga; puedes hacer uso de cualquier convertidor online.
String favicon = "data:image/png;base64, ...";
Si utilizas este método, recuerda pegar la cadena de caracteres en donde coloqué los puntos suspensivos
"...". Además, deberás dividirla en varias líneas adyacentes, debido a su longitud.
String favicon = "data:image/png;base64,"
"iVBORw0KGgoAAAANSUhEUgAAAFAAAABGCAMAAABsQOMZAAADAFB"
"dv/6/P9OX/85eP/x9v8anv8krf9QXv/m7//h7v/N7P/X3/84e/+"
"tq21tVWizP3x96VLtycaEd4JumHikpCFW7Zu3bL9p/lz3sfr1=";
2. Si dispones de la imagen en un servidor web público, de forma que puedas acceder a ella desde
cualquier dispositivo.
String favicon = "https://digitalcodesign.com/web/image/6195-c7408ed5/Recurso 11.svg";
Pista 2 - Formato de la imagen
En el propio diseño del encabezado de la web ("<head>"), debes indicar el formato de la imagen
(png, jpg, svg...) y la imagen a insertar.
(png, jpg, svg...) y la imagen a insertar.
"<link rel=\"icon\" type=\"image/svg+xml\" href=\"" + favicon + "\">"
Pista 3 - Color del background
Dentro de cada uno de los contenedores de texto ("body {), puedes definir el color de la letra, el color
de fondo, el tipo de letra y demás aspectos. En este caso, el fondo lo hemos diseñado con un
de fondo, el tipo de letra y demás aspectos. En este caso, el fondo lo hemos diseñado con un
degradado de izquierda a derecha, partiendo de un color inicial más azulado hasta un fondo más
verdoso:
verdoso:
"background: linear-gradient(to right, #0f4c75, #01FF8C);"
Pista 4 - Forma y sombras de los "contenedores"
Hay otros tipos de contenedores más moldeables que se utilizan mediante ".card {". Al igual que para
los contenedores de texto o botones, se pueden configurar parámetros como el espacio alrededor del
contenido, la forma de las esquinas y su radio de curvatura, la disposición/alineación del texto, etc.
contenido, la forma de las esquinas y su radio de curvatura, la disposición/alineación del texto, etc.
"padding: 20px;"
"border-radius: 10px;"
"box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);"
"display: inline-block;"
A continuación, se muestra cómo queda la página web diseñada con este código:
Puedes ver y/o descargar el código completo en el siguiente bloque desplegable:
Código completo del Sistema de Riego Inteligente
Pincha en el siguiente icono para descargar este código:
/**
* WiFi.ino - Servidor Web ESP32 con diseño atractivo en tonos azules.
*
* Se crea una interfaz web con estilo CSS moderno para controlar un relé
* y visualizar datos de sensores (lluvia, humedad del suelo, luz, temperatura y humedad).
*/
#include <WiFi.h>
#include <DHT.h>
// Creamos el Servidor Web en el puerto 80
WiFiServer server(80);
// Credenciales del WiFi
const char* ssid = "NOMBREDEMIWIFI";
const char* password = "CLAVEDEMIWIFI";
// Variable para gestionar el timeout de conexión a la red WiFi
int contconexion = 0;
// Variable para guardar la petición HTTP
String header;
// Configuración del sensor DHT (pin 17, modelo DHT22)
DHT sensorDHT(17, DHT22);
// Pin del relé
const int rele = 4;
// Pines de los sensores analógicos
const int sensorLluvia = 32;
const int sensorHumedadSuelo = 33;
const int sensorLuz = 34;
// Función que genera la página web con diseño en tonos azules
String crearPaginaWeb(int lecturaLluvia, int lecturaHumedadSuelo, int lecturaLuz, float lecturaTemperatura, float lecturaHumedad) {
//si tienes la imagen en un servidor url, utilizarías esto:
String favicon = "https://digitalcodesign.com/web/image/6195-c7408ed5/Recurso 11.svg";
String pagina = "<!DOCTYPE html>"
"<html>"
"<head>"
"<meta charset='utf-8'>"
"<meta name='viewport' content='width=device-width, initial-scale=1.0'>"
//agregamos la imagen a la pestaña de la web
//recuerda cambiar el formato, según si es svg, png...
"<link rel=\"icon\" type=\"image/svg+xml\" href=\"" + favicon + "\">"
//"<link rel=\"icon\" type=\"image/png\" href=\"" + favicon + "\">";
"<title>Sistema de Riego Inteligente</title>"
"<style>"
"body {"
"font-family: Arial, sans-serif;"
"text-align: center;"
"background: linear-gradient(to right, #0f4c75, #01FF8C);"
"color: white;"
"margin: 0;"
"padding: 0;"
"}"
".container {"
"margin-top: 50px;"
"}"
".card {"
"background: rgba(255, 255, 255, 0.2);"
"padding: 20px;"
"border-radius: 10px;"
"box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);"
"display: inline-block;"
"}"
".button {"
"display: inline-block;"
"margin: 10px;"
"padding: 10px 20px;"
"font-size: 18px;"
"color: white;"
"background: #1b262c;"
"border: none;"
"border-radius: 5px;"
"cursor: pointer;"
"transition: 0.3s;"
"text-decoration: none;"
"}"
".button:hover {"
"background: #bbd4ef;"
"color: #1b262c;"
"}"
"</style>"
"</head>"
"<body>"
"<div class='container'>"
"<h1>Sistema de Riego Inteligente con ESP32</h1>"
"<div class='card'>"
"<p><strong>Lluvia:</strong> " + String(lecturaLluvia) + "% | "
"<strong>Luz:</strong> " + String(lecturaLuz) + "% | "
"<strong>Temperatura:</strong> " + String(lecturaTemperatura) + "ºC</p>"
"<p><strong>Humedad:</strong> " + String(lecturaHumedad) + "% | "
"<strong>Humedad del Suelo:</strong> " + String(lecturaHumedadSuelo) + "%</p>"
"</div>"
"<br>"
"<a href='/on' class='button'>Encender</a>"
"<a href='/off' class='button'>Apagar</a>"
"</div>"
"</body>"
"</html>";
return pagina;
}
void setup() {
// Inicializar monitor serial
Serial.begin(115200);
Serial.println("");
// Inicialización de pines: sensores y relé
pinMode(sensorLluvia, INPUT);
pinMode(sensorHumedadSuelo, INPUT);
pinMode(sensorLuz, INPUT);
pinMode(rele, OUTPUT);
digitalWrite(rele, LOW);
// Inicializar Sensor DHT
sensorDHT.begin();
// Conectar a WiFi
WiFi.begin(ssid, password);
Serial.print("Conectando a WiFi");
while (WiFi.status() != WL_CONNECTED && contconexion < 50) {
contconexion++;
delay(500);
Serial.print(".");
}
if (WiFi.status() == WL_CONNECTED) {
Serial.println("");
Serial.println("WiFi conectado");
Serial.println("IP: " + WiFi.localIP().toString());
server.begin();
} else {
Serial.println("");
Serial.println("Error de conexión al WiFi");
}
}
void loop() {
// Espera a que un cliente se conecte
WiFiClient client = server.available();
if (client) {
Serial.println("Nuevo Cliente.");
String currentLine = "";
while (client.connected()) {
if (client.available()) {
char c = client.read();
Serial.write(c);
header += c;
if (c == '\n') {
if (currentLine.length() == 0) {
// Enviar encabezado HTTP de respuesta
client.println("HTTP/1.1 200 OK");
client.println("Content-type:text/html");
client.println("Connection: close");
client.println();
// Control del relé mediante la URL
if (header.indexOf("GET /on") >= 0) {
Serial.println("Relé Encendido");
digitalWrite(rele, HIGH);
} else if (header.indexOf("GET /off") >= 0) {
Serial.println("Relé Apagado");
digitalWrite(rele, LOW);
}
// Leer los valores de los sensores
int lecturaLluvia = map(analogRead(sensorLluvia), 0, 4095, 100, 0);
int lecturaHumedadSuelo = map(analogRead(sensorHumedadSuelo), 0, 4095, 100, 0);
int lecturaLuz = map(analogRead(sensorLuz), 0, 4095, 100, 0);
float lecturaTemperatura = sensorDHT.readTemperature();
float lecturaHumedad = sensorDHT.readHumidity();
// Generar y enviar la página web con diseño integrado
String paginaWeb = crearPaginaWeb(lecturaLluvia, lecturaHumedadSuelo, lecturaLuz, lecturaTemperatura, lecturaHumedad);
client.println(paginaWeb);
client.println();
break;
} else {
currentLine = "";
}
} else if (c != '\r') {
currentLine += c;
}
}
}
// Limpiar la variable header y cerrar la conexión
header = "";
client.stop();
Serial.println("Cliente desconectado.");
Serial.println("");
}
}
| Vistas | |
|---|---|
| 1 | Número de vistas |
| 1 | Vistas de miembros |
| 0 | Vistas públicas |
| Acciones | |
|---|---|
| 0 | Gustos |
| 0 | No me gusta |
| 0 | Comentarios |