Ciencia e Innovacion
Artículos Interés
/* Código que no se ve en Lotus*/
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="description" content="Artículos sobre innovación, smart cities, Smart City, IA, y sostenibilidad en Granada.">
<meta name="keywords" content="Inteligencia artificial, Innovación, Smart City, Estrategia, Premios, Ciencia">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Artículos de Interés</title>
<style>
/* Para asegurar la correcta visualización del contenido */
body {
margin: 0;
padding: 0;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #f4f7fa; /* Fondo claro */
line-height: 1.6;
}
h1 {
text-align: center; font-size: 28px; /* Reduce el tamaño */
color: #0E7BE8; /* Color de texto */
margin-top: 30px; /* Aumenta el margen superior */
margin-bottom: 20px; /* Aumenta el margen inferior */
padding: 10px; /* Espaciado interno */
background-color: #f0f0f0; /* Color de fondo */
border-radius: 8px; /* Bordes redondeados */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra suave */
font-family: 'Arial', sans-serif; /* Fuente más moderna */
font-weight: 600; /* Hacerlo ligeramente más grueso */
}
h1:hover {
color: #ffffff; /* Color de texto cuando el mouse pasa por encima */
background-color: #0E7BE8; /* Cambia el fondo al pasar el mouse */
transition: all 0.3s ease; /* Transición suave */
}
}
/* Estilos de la fecha */
.fecha {
text-align: center;
font-style: italic;
color: #777;
font-size: 1rem;
margin-bottom: 20px;
}
/* Artículos */
.articulo {
background: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
margin-bottom: 20px;
display: flex;
align-items: center; /* Centra el contenido verticalmente */
gap: 20px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.articulo:hover {
transform: translateY(-10px);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
} /* Imagen dentro del artículo */
.imagen-articulo {
max-width: 200px; /* Tamaño máximo de la imagen */ border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
}
.articulo:hover .imagen-articulo {
transform: scale(1.05);
/* Aumenta ligeramente el tamaño al pasar el ratón */
} /* Texto dentro del artículo */
.articulo .contenido-texto {
flex: 1; /* Hace que el texto ocupe el espacio restante */
} /* Etiquetas dentro del artículo */
.articulo .etiquetas { margin-top: 10px;
}
/* Etiquetas */
.etiquetas {
margin-top: 10px;
}
.etiquetas .etiqueta {
background-color: #0E7BE8;
color: white;
padding: 6px 15px;
border-radius: 20px;
margin-right: 8px;
font-size: 0.9rem;
cursor: pointer;
transition: background-color 0.3s ease;
}
.etiquetas .etiqueta:hover {
background-color: #0056b3;
}
/* Barra lateral */
.barra-lateral {
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
height: 100%;
position: sticky;
top: 20px;
}
.barra-lateral h3{ color: #0E7BE8;
margin-bottom: 15px;
}
.barra-lateral ul {
list-style: none;
padding: 0;
}
.barra-lateral li {
background-color: #0E7BE8;
color: white;
padding: 10px;
border-radius: 8px;
margin-bottom: 12px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.barra-lateral li:hover {
background-color: #0056b3;
}
.contenido-adicional {
background-color: #e0f7fa; /* Fondo claro */
padding: 20px; /* Espaciado interno */
margin-top: 20px; /* Separación superior */
border-radius: 8px; /* Bordes redondeados */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra suave */
}
.contenido-adicional img {
max-width: 100%; /* Hace que la imagen sea responsiva */ border-radius: 8px; /* Bordes redondeados */
margin-bottom: 15px; /* Separación entre la imagen y el texto */
}
.contenido-adicional p {
font-size: 1.2rem;
color: #333; /* Color oscuro para el texto */
line-height: 1.6; /* Espaciado entre líneas */
}
/* Imágenes */
.imagen-articulo {
max-width: 200px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
} /* Tabla de etiquetas */
.etiquetas table {
width: 100%;
border-spacing: 12px;
text-align: center;
}
.etiquetas td {
padding: 10px;
}
.etiquetas .etiqueta {
background-color: #0E7BE8;
color: white;
padding: 8px 16px;
border-radius: 25px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.etiquetas .etiqueta:hover {
background-color: #0056b3;
} /* Responsividad */
@media (max-width: 768px) {
.articulo {
background: #fff;
padding: 20px;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
margin-bottom: 20px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.articulo:hover {
transform: translateY(-10px);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}
.contenido-adicional {
padding: 15px;
margin-top: 15px;
background-color: #e0f7fa; /* Fondo claro */
border-radius: 8px; /* Bordes redondeados */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra suave */
}
.contenido-adicional img
{
max-width: 100%; /* Hace que la imagen sea responsiva */
border-radius: 8px;
margin-bottom: 15px;
}
.contenido-adicional p {
font-size: 1rem; color: #333;
line-height: 1.6;
}
}
</style>
</head>
<body>
<header>
<h1>Artículos de Interés de Ciencia, Innovación y Smart City</h1>
<p class="fecha"></p>
<div class="buscador">
<input type="text" id="buscar" placeholder="Buscar artículos..." onkeyup="buscarArticulos()">
</div>
</header>
<table style="width: 100%; border-spacing: 20px;">
<tr>
<td style="vertical-align: top; width: 25%;" class="barra-lateral">
<h3>Etiquetas</h3>
<ul>
<li class="etiqueta" onclick="filtrarArticulos('Innovación')">Innovación</li>
<li class="etiqueta" onclick="filtrarArticulos('Smart City')">Smart City</li>
<li class="etiqueta" onclick="filtrarArticulos('Estrategia')">Estrategia</li>
<li class="etiqueta" onclick="filtrarArticulos('Inteligencia Artificial')">Inteligencia Artificial</li>
<li class="etiqueta" onclick="filtrarArticulos('Ecosistema')">Ecosistema</li>
<li class="etiqueta" onclick="filtrarArticulos('Sostenibilidad')">Sostenibilidad</li>
<li class="etiqueta" onclick="filtrarArticulos('Empresas Tecnológicas')">Empresas Tecnológicas</li>
<li class="etiqueta" onclick="filtrarArticulos('Premios')">Premios</li>
<li class="etiqueta" onclick="filtrarArticulos('Investigación')">Investigación</li>
</ul>
<div class="contenido-adicional" style="background-color: #e0f7fa; padding: 20px;
margin-top: 20px;
border-radius: 8px;">
<img src="https://via.placeholder.com/300" alt="Imagen adicional" style="max-width: 100%;
border-radius: 8px;
margin-bottom: 15px;">
<p style="font-size: 1.2rem; color: #333;">Este es un bloque de contenido adicional debajo de las etiquetas, con una imagen y texto explicativo. Aquí puedes añadir cualquier información que quieras mostrar de forma destacada.</p>
</div>
</td>
<td style="vertical-align: top; width: 75%; padding: 20px;">
<!-- Artículos -->
<!-- Artículo 1 -->
<div class="articulo" data-tags="Innovación, Smart City, Estrategia" id="articulo1">
<div class= "contenido-texto">
<h3>Plan Estratégico de Innovación y Smart City</h3>
<p>Lanzado en 2023, ha sido creado para transformar Granada en referente de innovación y sostenibilidad, sirvierndo como hoja de ruta para garantizar un desarrollo urbano eficiente y sostenible, alineándose con las líneas estratégicas de Innovación para el desarrollo económico y Ciudad Sostenible.</p>
<div class="etiquetas">
<span class="etiqueta">Innovación</span>
<span class="etiqueta">Smart City</span>
<span class="etiqueta">Estrategia</span>
</div>
</div>
<img src="https://drive.google.com/uc?id=1_6DF3ylwoUiqXM2ZmhoDOkGk6RcfgCBP" alt="Plan estratégico de Innovación y Smart City" class="imagen-articulo">
</div>
<a href="https://www.granada.org/inet/innovacion.nsf/1a8b49be97221dbdc125881b00384927/45d859a1c9ad0128c1258a5f0031163f/$FILE/PLAN%20DE%20INNOVACI%C3%93N%20Y%20SMART%20CITY%20GRANADA.pdf" target="_blank">Leer más sobre el Plan Estratégico de Innovación y Smart City 2023-2027</a>
</div>
<!-- Artículo 2 -->
<div class="articulo" data-tags="Inteligencia Artificial, Ecosistema" id="articulo2" >
<div class= "contenido-texto">
<h3>Plan de Inteligencia Artificial 2023-2027</h3>
<p>El plan de IA ha sido creado para impulsar soluciones basadas en inteligencia artificial que mejoren los servicios públicos y optimicen los procesos administrativos, para poder crear un ecosistema dinámico fomentando la colaboración entre empresas, instituciones y la comunidad.</p>
<div class="etiquetas">
<span class="etiqueta">Inteligencia Artificial</span>
<span class="etiqueta">Ecosistema</span>
<span class="etiqueta">IFMIF-Dones</span>
</div>
</div>
<img src="https://drive.google.com/uc?id=1kFWh_KcTQ2GBH1Iy0TSq-6_aWS6UxpJL" alt="Plan de Inteligencia Artificial" class="imagen-articulo">
</div>
<a href="https://web.granada.org/inet/innovacion.nsf/a665e4813cfe0314c1257999003beee3/de409a275514fcbac1258b9b0025f4e1/$FILE/Plan%20estrat%C3%A9gico%20IA.pdf" target="_blank">Leer más sobre el Plan de Inteligencia Artificial</a>
</div>
<!-- Artículo 3 -->
<div class="articulo" data-tags="Sostenibilidad, Empresas tecnológicas, Málaga" id="articulo3" >
<div class= "contenido-texto">
<h3>Greencities & S-Moving 2024</h3>
<p>El evento organizado por FYCMA, el ayuntamiento de Málaga y AEMETIC reunió a más de 2500 profesionales del sector de la movilidad inteligente incluyendo la participación activa del Ayuntamiento de Granada. Durante el foro se realizaron diversas reuniones con otros municipios y empresas tecnológicas con la finalidad de fortalecer iniciativas de innovación y sostenibilidad urbana.</p>
<div class="etiquetas">
<span class="etiqueta">Sostenibilidad</span>
<span class="etiqueta">Empresas tecnológicas</span>
<span class="etiqueta">Málaga</span>
</div>
</div>
<img src="https://drive.google.com/uc?id=1sDwQ1Jyv3u1YQn2UzfvDNg7uIcPjf-aG" alt="Evento FYCMA" class="imagen-articulo">
</div>
<a href="https://greencities.fycma.com/#edicion-24" target="_blank">Leer más sobre el evento</a>
</div>
<!-- Artículo 4 -->
<div class="articulo" data-tags="Investigación, V Edición, Premios" id="articulo4" >
<div class= "contenido-texto">
<h3>Premios Granada Ciudad de la Ciencia y la Innovación 2024</h3>
<p>Granada presenta los premios de la Ciencia y la Innovación, celebrados el 14 de octubre. Los galardones reconocen a jóvenes investigadores, trayectorias científicas consolidadas y el impacto de sus proyectos en el ámbito social y empresarial.</p>
<div class="etiquetas">
<span class="etiqueta">Investigación</span>
<span class="etiqueta">Premios</span>
<span class="etiqueta">V Edición</span>
</div>
</div>
<img src="https://drive.google.com/uc?id=1Ef2ufOfdu5xo80mFWWouEYC86n83ul7U" alt="Galardonados de la V Edición" class="imagen-articulo">
</div>
<a href="https://www.granada.org/inet/innovacion.nsf/byclave/PREMIOSCIENCIA" target="_blank">Leer más sobre los premios</a>
</div>
</td>
</tr>
</table>
<script>
function mostrarFechaActual() {
var fecha = new Date();
var dia = fecha.getDate();
var mes = fecha.getMonth() + 1;
var año = fecha.getFullYear();
var fechaFormateada = dia + '/' + (mes < 10 ? '0' : '') + mes + '/' + año;
document.querySelector('.fecha').textContent = 'Fecha de publicación: ' + fechaFormateada;
}
document.addEventListener('DOMContentLoaded', mostrarFechaActual);
function buscarArticulos() {
var busqueda = document.getElementById('buscar').value.toLowerCase();
var articulos = document.querySelectorAll('.articulo');
articulos.forEach(function(articulo) {
var titulo = articulo.querySelector('h3').textContent.toLowerCase();
var descripcion = articulo.querySelector('p').textContent.toLowerCase();
if (titulo.includes(busqueda) || descripcion.includes(busqueda)) {
articulo.style.display = 'block';
} else {
articulo.style.display = 'none';
}
});
}
function filtrarArticulos(tag) {
var articulos = document.querySelectorAll('.articulo');
articulos.forEach(function(articulo) {
var tags = articulo.getAttribute('data-tags').toLowerCase().split(', ');
if (tags.includes(tag.toLowerCase())) {
articulo.style.display = 'block';
} else {
articulo.style.display = 'none';
}
});
}
</script>
