Web climatológica con hora
- AGR
- Web , Programación
- 19 Jan, 2025
Índice
- Índice
- ¿Qué es una página web?
- Desafíos
- Código
- ¿Cómo ejecutar o probar la página en un navegador?
- Preguntas
¿Qué es una página web?
Una página web es un documento digital accesible a través de internet que contiene información en formato de texto, imágenes, videos, enlaces, y otros elementos interactivos. Las páginas web son parte de un sitio web y están diseñadas para ser visualizadas en navegadores como Google Chrome, Firefox o Safari.
Ejemplos de páginas web:
- Informativas: Wikipedia.
- Interactivas: Google Maps.
- Comerciales: Amazon.
¿Cómo se construye una página web?
Las páginas web se construyen mediante lenguajes de programación que estructuran, diseñan y dotan de funcionalidades al contenido. Para crear una página web básica se necesitan tres componentes principales:
- HTML para la estructura.
- CSS para el diseño.
- JavaScript para la interacción.
Las páginas avanzadas pueden incluir bases de datos y se conectan a servicios externos como APIs.
Elementos que componen una página web
HTML
El HTML (HyperText Markup Language) es el lenguaje de marcado que define la estructura básica de una página web. Organiza el contenido utilizando etiquetas como:
<h1>: Títulos.<p>: Párrafos.<img>: Imágenes.
Ejemplo de HTML:
<!DOCTYPE html>
<html lang="es">
<head>
<title>Mi Página Web</title>
</head>
<body>
<h1>Bienvenido</h1>
<p>Esta es mi primera página web.</p>
</body>
</html>CSS
El CSS (Cascading Style Sheets) es un lenguaje que permite diseñar las páginas web. Define colores, fuentes, tamaños y estilos.
Ejemplo de CSS:
body {
background-color: lightblue;
font-family: Arial, sans-serif;
}
h1 {
color: darkblue;
}JavaScript
El JavaScript es un lenguaje de programación que añade interactividad a las páginas web, como animaciones, formularios dinámicos y más.
Ejemplo de JavaScript:
document.getElementById("miBoton").addEventListener("click", function() {
alert("¡Hola, hiciste clic!");
});¿Qué es una API?
Una API (Application Programming Interface) es un puente que permite que diferentes aplicaciones se comuniquen entre sí. Por ejemplo, la API de OpenWeatherMap permite a los desarrolladores obtener información del clima.
Las APIs funcionan a través de peticiones que envían datos al servidor y reciben respuestas estructuradas (generalmente en JSON).
Conexión con la API de OpenWeatherMap
Pasos para conectarse a OpenWeatherMap:
- Crear una cuenta en OpenWeatherMap.
- Generar una API Key en tu cuenta.
- Hacer una solicitud HTTP desde tu aplicación.
Ejemplo en JavaScript:
const apiKey = 'TU_API_KEY';
const city = 'Mexico City';
fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`)
.then(response => response.json())
.then(data => {
console.log(`Temperatura en ${city}: ${data.main.temp}°C`);
})
.catch(error => console.error('Error al obtener los datos:', error));En este ejemplo:
fetchenvía la solicitud HTTP.response.json()transforma la respuesta en un objeto de JavaScript.data.main.tempaccede a la temperatura actual.
Recursos para investigar más a fondo
- MDN Web Docs (Mozilla) - Documentación detallada sobre HTML, CSS y JavaScript.
- W3Schools - Tutoriales interactivos de desarrollo web.
- OpenWeatherMap API - Documentación oficial de la API.
- FreeCodeCamp - Cursos gratuitos de desarrollo web.
Desafíos
-
Agregar cinco ciudades de tu preferencia a la lista:
- Busca los nombres de las ciudades, usa el siguiente enlace para encontrarlas: OpenWeatherMap Cities
Toma el nombre correcto de la ciudad, por ejemplo, en la siguiente imagen el nombre que nos servirá es Santiago Tianguistenco de Galeana
- Modifica el archivo HTML para incluir las opciones en el desplegable
<select>.
Ejemplo:
<select id="city-select"> <option value="Mexico City">Ciudad de México</option> <option value="London">Londres</option> <option value="Tokyo">Tokio</option> <option value="New York">Nueva York</option> <option value="Paris">París</option> <!-- Agrega más ciudades aquí --> <option value="Santiago Tianguistenco de Galeana">Santiago Tianguistenco de Galeana<option> </select> -
Cambiar el color de la página web:
- Modifica el archivo CSS para cambiar el color de fondo o los textos.
Ejemplo:
body { background-color: lightyellow; /* Cambia el color a amarillo claro */ color: darkgreen; /* Cambia el texto a verde oscuro */ }Si deseas mantener el color con efecto de gradiente linear puedes usar el siguiente código:
body { background: linear-gradient(to right, #ff7e5f, #feb47b); color: white; }Tip: Aqui puedes encontrar más colores en formato hexadecimal: Color Hex.
Tip: Experimenta con diferentes combinaciones de colores y asegúrate de mantener un diseño agradable.
¡Diviértete explorando y creando tu propia página web personalizada! 😊
Código
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Clima y Horarios del Mundo</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>Clima y Horarios del Mundo</h1>
<!-- Dropdown para seleccionar ciudades -->
<div class="dropdown">
<label for="city-select">Selecciona una ciudad:</label>
<select id="city-select">
<option value="" disabled selected>-- Selecciona una ciudad --</option>
<option value="London">London</option>
<option value="New York">New York</option>
<option value="Tokyo">Tokyo</option>
<option value="Mexico City">Mexico City</option>
<option value="Sydney">Sydney</option>
<option value="Paris">Paris</option>
<option value="Berlin">Berlin</option>
<option value="Moscow">Moscow</option>
<option value="Dubai">Dubai</option>
<option value="Santiago Tianguistenco de Galeana">Santiago Tianguistenco de Galeana</option>
</select>
</div>
<!-- Contenedor de la tarjeta de datos -->
<div id="city-data-container">
<p>Selecciona una ciudad para ver los datos del clima.</p>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
styles.css
/* styles.css */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background: linear-gradient(to bottom, #1c3cdb, #229fde);
color: #fff;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
text-align: center;
}
h1 {
margin: 20px 0;
font-size: 2.5em;
}
.dropdown {
margin: 20px 0;
}
label {
font-size: 1.2em;
margin-right: 10px;
}
select {
font-size: 1em;
padding: 5px 10px;
border-radius: 5px;
border: none;
}
#city-data-container {
margin-top: 20px;
background-color: #fff;
color: #333;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
padding: 20px;
text-align: center;
}
#city-data-container img {
width: 50px;
margin: 10px 0;
}
#city-data-container p {
margin: 10px 0;
}
script.js
//script.js
const apiKey = 'c44e5dd65db6d0bfdb326f5095f40a64'; // API Key de OpenWeatherMap
const citySelect = document.getElementById('city-select');
const cityDataContainer = document.getElementById('city-data-container');
let intervalId; // Para almacenar el intervalo y evitar múltiples timers
// Función para calcular la altitud
function calculateAltitude(seaLevelPressure, groundPressure) {
const scaleFactor = 44330; // Factor de escala estándar en metros
const exponent = 1 / 5.255; // Exponente para la ecuación
return scaleFactor * (1 - Math.pow(groundPressure / seaLevelPressure, exponent));
}
// Función para iniciar el timer de la hora en tiempo real
function startCityClock(timezoneOffset) {
if (intervalId) {
clearInterval(intervalId); // Detener cualquier timer activo
}
intervalId = setInterval(() => {
const utcTimestamp = new Date().getTime() + (new Date().getTimezoneOffset() * 60000); // Hora UTC en milisegundos
const cityTimestamp = utcTimestamp + timezoneOffset * 1000; // Ajustar timezone en milisegundos
// Crear una nueva fecha ajustada
const cityDate = new Date(cityTimestamp);
// Formatear correctamente la hora local con AM/PM
const localTime = cityDate.toLocaleTimeString('es-ES', {
hour: '2-digit',
minute: '2-digit',
second: '2-digit',
hour12: true, // Cambiar a true si deseas el formato AM/PM
});
// Actualizar la hora en tiempo real en el elemento correspondiente
const timeElement = document.getElementById('city-time');
if (timeElement) {
timeElement.textContent = `Hora exacta en la ciudad: ${localTime}`;
}
}, 1000); // Actualizar cada segundo
}
// Función para obtener datos del clima
async function fetchCityData(city) {
try {
// Petición a la API de OpenWeatherMap
const response = await fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`);
const data = await response.json();
// Verificar si la respuesta es exitosa
if (data.cod !== 200) {
throw new Error(data.message || 'Error desconocido');
}
// Obtener timezoneOffset en segundos
const timezoneOffset = data.timezone;
// Obtener presiones
const seaLevel = data.main.sea_level || data.main.pressure; // Presión al nivel del mar
const groundLevel = data.main.grnd_level || data.main.pressure; // Presión en el nivel actual
// Calcular la altitud sobre el nivel del mar
const altitude = calculateAltitude(seaLevel, groundLevel).toFixed(2);
// Crear el contenido de la tarjeta
cityDataContainer.innerHTML = `
<h2>${data.name}, ${data.sys.country}</h2>
<img src="https://openweathermap.org/img/wn/${data.weather[0].icon}@2x.png" alt="${data.weather[0].description}">
<p><strong>Clima:</strong> ${data.weather[0].description}</p>
<p><strong>Temperatura:</strong> ${data.main.temp}°C</p>
<p><strong>Sensación térmica:</strong> ${data.main.feels_like}°C</p>
<p><strong>Humedad:</strong> ${data.main.humidity}%</p>
<p><strong>Presión:</strong> ${data.main.pressure} hPa</p>
<p><strong>Nivel del mar:</strong> ${seaLevel} hPa</p>
<p><strong>Altitud sobre el nivel del mar:</strong> ${altitude} metros</p>
<p><strong>Velocidad del viento:</strong> ${data.wind.speed} m/s</p>
<p><strong>Zona horaria en la ciudad:</strong> UTC${timezoneOffset / 3600 > 0 ? '+' : ''}${timezoneOffset / 3600}</p>
<p id="city-time"></p> <!-- Elemento para mostrar la hora en tiempo real -->
`;
// Iniciar el timer para actualizar la hora en tiempo real
startCityClock(timezoneOffset);
} catch (error) {
console.error('Error al obtener los datos:', error);
// Mostrar un mensaje de error
cityDataContainer.innerHTML = `
<p>No se pudieron obtener los datos del clima para ${city}.</p>
`;
}
}
// Manejar el evento de selección de la ciudad
citySelect.addEventListener('change', (event) => {
const selectedCity = event.target.value;
if (selectedCity) {
// Mostrar mensaje de carga
cityDataContainer.innerHTML = '<p>Cargando datos...</p>';
fetchCityData(selectedCity);
}
});
¿Cómo ejecutar o probar la página en un navegador?
Para ejecutar o probar la página web en tu navegador, sigue estos pasos:
-
Crea tres archivos básicos:
index.html: Contendrá la estructura de la página.styles.css: Contendrá los estilos de la página.script.js: Contendrá la lógica para conectarte con la API.
-
Organiza los archivos: Coloca los tres archivos en una misma carpeta, asegurándote de enlazarlos correctamente en el archivo
index.html:<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Página de Clima</title> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>Clima y Horarios</h1> <script src="script.js"></script> </body> </html> -
Abre el archivo
index.htmlen tu navegador:- Haz doble clic sobre el archivo
index.html. - Esto abrirá tu navegador predeterminado y mostrará la página.
- Haz doble clic sobre el archivo
-
Prueba la funcionalidad:
- Selecciona una ciudad desde el menú desplegable.
- Observa cómo se actualizan los datos del clima y la hora en tiempo real.
Preguntas
- ¿Qué es una página web y para qué se utiliza?
- ¿Cuáles son los tres componentes principales para construir una página web?
- ¿Qué lenguajes se necesitan para construir una página web básica?
- ¿Cuáles son algunos ejemplos de páginas web que usas todos los días?
- ¿Cómo se asegura que una página web tenga un diseño bonito y colores agradables?
- ¿Qué etiqueta se usa en HTML para escribir un título grande en una página web?
- ¿Cómo puedes agregar una nueva ciudad para mostrar el clima en tu página?
- ¿Cómo puedes cambiar el color de fondo de la página web?
? c-w
