Skip to content

Commit

Permalink
buscador
Browse files Browse the repository at this point in the history
  • Loading branch information
uo276976 committed Nov 13, 2024
1 parent 2e18082 commit 62b9bd6
Show file tree
Hide file tree
Showing 8 changed files with 198 additions and 33 deletions.
29 changes: 29 additions & 0 deletions css/index-styles.css
Original file line number Diff line number Diff line change
Expand Up @@ -46,4 +46,33 @@
height: 100%;
object-fit: cover;
object-position: center;
}

/* Search Bar Styling */
.search-bar {
display: flex;
align-items: center;
}

.search-bar input[type="text"] {
font-size: 1.2em;
border: 0.2em solid #ccc;
border-radius: 0.5em;
padding: 0.2em;
}

.search-bar button {
font-size: 1.2em;
background-color: #007bff;
color: white;
border: none;
border-radius: 0.5em;
cursor: pointer;
margin-left: 0.3em;
margin-right: 3em;
}

.highlight {
background-color: yellow;
font-weight: bold;
}
3 changes: 3 additions & 0 deletions css/resultados-styles.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
main {
padding: 10em;
}
15 changes: 15 additions & 0 deletions css/styles.css
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ body, html {
padding: 0;
font-family: Arial, sans-serif;
height: 100%;
scroll-behavior: smooth;
}

header {
Expand All @@ -14,6 +15,16 @@ header {
left: 0;
width: 100%;
z-index: 1;
display: flex;
align-items: center; /* Center vertically */
justify-content: space-between; /* Nav on left, search-bar on right */
padding: 1em 2em;
}

nav {
display: flex;
align-items: center;
justify-content: space-between;
}

nav a {
Expand Down Expand Up @@ -75,4 +86,8 @@ footer {
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}

:target {
background-color: yellow; /* Highlight element when focused */
}
20 changes: 16 additions & 4 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,14 @@
a.appendChild(r);
})(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
</script>
<script>
function performSearch() {
const query = document.getElementById("searchInput").value;
if (query) {
window.location.href = `/pages/resultadosDeBusqueda.html?q=${encodeURIComponent(query)}`;
}
}
</script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Página Personal de Alfonso</title>
Expand All @@ -26,14 +34,18 @@
<a href="pages/proyectos.html">Proyectos</a>
<a href="pages/contacto.html">Contacto</a>
</nav>
</header>
<div class="search-bar">
<input type="text" id="searchInput" placeholder="Buscar...">
<button id="searchButton" onclick="performSearch()">Buscar</button>
</div>
</header>

<main class="container">
<!-- Sección izquierda: 70% -->
<section class="left">
<h1>INGENIERÍA WEB</h1>
<h2>Alfonso GL</h2>
<p>Soy estudiante en el máster de ingeniería web de la
<h1 id="ingenieria">INGENIERÍA WEB</h1>
<h2 id="autor">Alfonso GL</h2>
<p id="estudiante">Soy estudiante en el máster de ingeniería web de la
<a href="https://www.uniovi.es" target="_blank">Universidad de Oviedo</a>.
</p>
</section>
Expand Down
30 changes: 15 additions & 15 deletions pages/aficiones.html
Original file line number Diff line number Diff line change
Expand Up @@ -27,58 +27,58 @@
</nav>
</header>
<main>
<h1>Mis Aficiones</h1>
<h1 id="aficiones">Mis Aficiones</h1>

<!-- Sección Música -->
<section class="hobby-section">
<h2>- Música</h2>
<p>Me gusta la música y tengo una colección de vinilos, de entre todos ellos, mi favorito es el del álbum <strong>Dire Straits - Dire Straits</strong>,
<h2 id="musica-section">- Música</h2>
<p id="musica">Me gusta la música y tengo una colección de vinilos, de entre todos ellos, mi favorito es el del álbum <strong>Dire Straits - Dire Straits</strong>,
lanzado en 1978. Este álbum contiene temazos como <em>Sultans of Swing</em> y <em>Water of Love</em>
En mi colección también tengo discos de Joaquín Sabina y El último de la Fila.</p>
<figure>
<img src="../img/dire-straits.jpg" alt="Dire Straits - Dire Straits" class="hobby-image">
<figcaption>Dire Straits - Dire Straits</figcaption>
<figcaption id="dire-straits">Dire Straits - Dire Straits</figcaption>
</figure>
</section>

<!-- Sección Libros -->
<section class="hobby-section">
<h2>- Libros</h2>
<p>Disfruto mucho leyendo libros sobre temas de diseño y usabilidad. Uno de mis favoritos es <em>No me hagas pensar</em> de <strong>Steve Krug</strong>,
<h2 id="libros-section">- Libros</h2>
<p id="libros">Disfruto mucho leyendo libros sobre temas de diseño y usabilidad. Uno de mis favoritos es <em>No me hagas pensar</em> de <strong>Steve Krug</strong>,
un libro que aborda de manera sencilla y práctica los principios de usabilidad web. Es una lectura muy recomendada.
En este enlace puedes consultar las <strong><a href="https://theomandel.com/resources/golden-rules-of-user-interface-design/">Reglas de oro del diseño de
interfaces de usuario</a></strong> para introducirte en el tema.</p>
<figure>
<img src="../img/no-me-hagas-pensar.jpg" alt="No me hagas pensar" class="hobby-image">
<figcaption>No me hagas pensar - Steve Krug</figcaption>
<figcaption id="no-me-hagas-pensar">No me hagas pensar - Steve Krug</figcaption>
</figure>
</section>

<!-- Sección Deportes -->
<section class="hobby-section">
<h2>- Deportes</h2>
<p>Otra de mis grandes aficiones son los deportes, siempre me han gustado el fútbol y el baloncesto. Jugué durante <strong>un</strong> año al fútbol sala, y durante <strong>12</strong> al baloncesto.
<h2 id="deportes-section">- Deportes</h2>
<p id="deportes">Otra de mis grandes aficiones son los deportes, siempre me han gustado el fútbol y el baloncesto. Jugué durante <strong>un</strong> año al fútbol sala, y durante <strong>12</strong> al baloncesto.
Sin embargo, era pésimo en ambos y no tuve éxito alguno en ninguno de los dos.</p>
<figure>
<img src="../img/futsal.jpg" alt="Fútbol sala" class="hobby-image">
<figcaption>Mi equipo de fútbol sala</figcaption>
<figcaption id="mi-equipo-futsal">Mi equipo de fútbol sala</figcaption>
</figure>
<p>Últimamente practico la <strong>escalada</strong>. Este es un deporte interesante, pues supone un gran desafío tanto físico como mental, al igual que la Ingeniería de Software.</p>
<p id="escalada">Últimamente practico la <strong>escalada</strong>. Este es un deporte interesante, pues supone un gran desafío tanto físico como mental, al igual que la Ingeniería de Software.</p>
<figure>
<img src="../img/escal.jpg" alt="Practicando escalada" class="hobby-image">
<figcaption>Escalando</figcaption>
<figcaption id="escalando">Escalando</figcaption>
</figure>
</section>

<!-- Sección Parrilla -->
<section class="hobby-section">
<h2>- Parrillas</h2>
<p>Por último, las parrillas. Cada uno tiene sus preferencias a la hora de preparar una parrilla, es un tema de gran controversia y debate que merecería su propia sección.
<h2 id="parrillas-section">- Parrillas</h2>
<p id="parrillas">Por último, las parrillas. Cada uno tiene sus preferencias a la hora de preparar una parrilla, es un tema de gran controversia y debate que merecería su propia sección.
Personalmente, me gusta optar por los clásicos, suelo comenzar las mías con <strong>morcilla</strong> y <strong>criollos</strong>.
Si me preguntan, <strong>la clave del éxito</strong> siempre está en el buen pan y el chimichurri.</p>
<figure>
<img src="../img/parrilla.jpg" alt="Parrilla" class="hobby-image">
<figcaption>Preparando una parrilla</figcaption>
<figcaption id="preparando-parrilla">Preparando una parrilla</figcaption>
</figure>
</section>
</main>
Expand Down
4 changes: 2 additions & 2 deletions pages/contacto.html
Original file line number Diff line number Diff line change
Expand Up @@ -27,8 +27,8 @@
</nav>
</header>
<main>
<h1>Ponte en contacto</h1>
<p>Dirección de contacto <a href="mailto:[email protected]?Subject=Página%20personal%20Alf">[email protected]</a></p>
<h1 id="contacto-section">Ponte en contacto</h1>
<p id="contacto">Dirección de contacto <a href="mailto:[email protected]?Subject=Página%20personal%20Alf">[email protected]</a></p>
<div id="mapa" class="mapa-responsivo">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2889.073233734748!2d-5.853527684501019!3d43.35476717913216!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd368d6e7b1b1b1b%3A0x1f577d1f9f3b1d0c!2sEscuela%20de%20Ingenier%C3%ADa%20Inform%C3%A1tica%20de%20Oviedo!5e0!3m2!1ses!2ses!4v1611810471047!5m2!1ses!2ses"
title="EII Oviedo" allowfullscreen="" loading="lazy"></iframe>
Expand Down
24 changes: 12 additions & 12 deletions pages/proyectos.html
Original file line number Diff line number Diff line change
Expand Up @@ -27,17 +27,17 @@
</nav>
</header>
<main>
<h1>Mis Proyectos</h1>
<h1 id="proyectos-section">Mis Proyectos</h1>

<p>En esta sección te presento algunos de los proyectos en los que he trabajado. Puedes explorar cada proyecto en GitHub.</p>
<p id="proyectos">En esta sección te presento algunos de los proyectos en los que he trabajado. Puedes explorar cada proyecto en GitHub.</p>

<ul class="project-list">
<li>
<a href="https://github.com/1" target="_blank" class="project-item">
<img src="../img/assw.jpg" alt="ASSW" class="project-image">
<section class="project-content">
<h2><strong>Administración Segura de Servidores Web - ASSW</strong></h2>
<p>En esta asignatura estudiamos el despliegue y administración de <strong>servidores web seguros</strong>,
<h2 id="ASSW-section"><strong>Administración Segura de Servidores Web - ASSW</strong></h2>
<p id="ASSW">En esta asignatura estudiamos el despliegue y administración de <strong>servidores web seguros</strong>,
así como tecnologías de automatización de infraestructuras y escalabilidad en la web.</p>
</section>
</a>
Expand All @@ -46,8 +46,8 @@ <h2><strong>Administración Segura de Servidores Web - ASSW</strong></h2>
<a href="https://github.com/2" target="_blank" class="project-item">
<img src="../img/ecw.jpg" alt="ECW" class="project-image">
<section class="project-content">
<h2><strong>Estándares y Computación Web - ECW</strong></h2>
<p>En esta asignatura estudiamos el diseño con estándares web y tecnologías XML.
<h2 id="ECW-section"><strong>Estándares y Computación Web - ECW</strong></h2>
<p id="ECW">En esta asignatura estudiamos el diseño con estándares web y tecnologías XML.
<strong>Esta página</strong> forma parte de las tareas de la asignatura.</p>
</section>
</a>
Expand All @@ -56,8 +56,8 @@ <h2><strong>Estándares y Computación Web - ECW</strong></h2>
<a href="https://github.com/3" target="_blank" class="project-item">
<img src="../img/asw.jpg" alt="ASW" class="project-image">
<section class="project-content">
<h2><strong>Arquitectura de sitios web - ASW</strong></h2>
<p>Esta asignatura estudia los principales <strong>patrones arquitectónicos</strong>, sus ventajas,
<h2 id="ASW-section"><strong>Arquitectura de sitios web - ASW</strong></h2>
<p id="ASW">Esta asignatura estudia los principales <strong>patrones arquitectónicos</strong>, sus ventajas,
inconvenientes y escenarios adecuados, para así poder seleccionar el diseño más adecuado para cada proyecto.</p>
</section>
</a>
Expand All @@ -66,8 +66,8 @@ <h2><strong>Arquitectura de sitios web - ASW</strong></h2>
<a href="https://github.com/4" target="_blank" class="project-item">
<img src="../img/dpiu.jpg" alt="DPIU" class="project-image">
<section class="project-content">
<h2><strong>Diseño y programación de Interfaces de Usuario - DPIU</strong></h2>
<p>En esta asignatura estudiamos los principales aspectos de usabilidad,
<h2 id="DPIU-section"><strong>Diseño y programación de Interfaces de Usuario - DPIU</strong></h2>
<p id="DPIU">En esta asignatura estudiamos los principales aspectos de usabilidad,
así como la programación de aplicaciones web, en ella implementamos una pequeña <strong>tienda online</strong>.</p>
</section>
</a>
Expand All @@ -76,8 +76,8 @@ <h2><strong>Diseño y programación de Interfaces de Usuario - DPIU</strong></h2
<a href="https://github.com/5" target="_blank" class="project-item">
<img src="../img/tfg.jpg" alt="TFG" class="project-image">
<section class="project-content">
<h2><strong>Trabajo Fin de Grado - TFG</strong></h2>
<p>Mi TFG: <em>Herramienta web interactiva para el tratamiento estadístico de datos de valoración intervalar</em>.
<h2 id="TFG-section"><strong>Trabajo Fin de Grado - TFG</strong></h2>
<p id="TFG">Mi TFG: <em>Herramienta web interactiva para el tratamiento estadístico de datos de valoración intervalar</em>.
Consiste en el desarrollo de una plataforma para analizar y visualizar datos de intervalos. Los datos de intervalo
se obtienen principalmente de cuestionarios, son especialmente útiles a la hora de analizar percepciones y sentimientos.</p>
</section>
Expand Down
106 changes: 106 additions & 0 deletions pages/resultadosDeBusqueda.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,106 @@
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Resultados de Búsqueda</title>
<link rel="stylesheet" href="../css/resultados-styles.css" type="text/css">
<link rel="stylesheet" href="../css/styles.css" type="text/css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<header>
<nav aria-label="Menú principal">
<a href="#" class="active" aria-current="page">Inicio</a>
<a href="pages/aficiones.html">Aficiones</a>
<a href="pages/proyectos.html">Proyectos</a>
<a href="pages/contacto.html">Contacto</a>
</nav>
<div class="search-bar">
<input type="text" id="searchInput" placeholder="Buscar...">
<button id="searchButton" onclick="performSearch()">Buscar</button>
</div>
</header>

<main id="searchResultsContainer">
<h1>Resultados de Búsqueda</h1>
<!-- Results will be dynamically added here -->
</main>
<script>
$(document).ready(function () {
// Retrieve search term from the URL
const urlParams = new URLSearchParams(window.location.search);
const searchTerm = urlParams.get('q')?.toLowerCase();

if (searchTerm) {
const pages = [
'aficiones.html',
'proyectos.html',
'contacto.html',
'../'
];

pages.forEach(page => {
$.get(page, function (data) {
const pageContent = $(data);
const matches = [];

// Find all paragraphs and headings in the page content
pageContent.find("p, h1, h2, h3, h4, h5, h6, figcaption").each(function () {
const content = $(this).text().toLowerCase();
const distance = levenshteinDistance(searchTerm, content);

// Show results with exact match or close matches
if (content.includes(searchTerm) || distance <= 1) {
const snippet = $(this).text().substring(0, 100) + "...";
const elementId = $(this).attr("id") || ""; // Grab the element ID (if available)
matches.push({
snippet: snippet,
url: `${page}#${elementId}`
});
}
});

// Display matches
if (matches.length > 0) {
$('#searchResultsContainer').append(`<h2>Resultados en ${page}</h2>`);
matches.forEach(match => {
$('#searchResultsContainer').append(`
<p><a href="${match.url}">${match.snippet}</a></p>
`);
});
}
});
});
}
});

// Levenshtein distance function to find close matches
function levenshteinDistance(a, b) {
const matrix = [];
let i, j;

for (i = 0; i <= b.length; i++) {
matrix[i] = [i];
}
for (j = 0; j <= a.length; j++) {
matrix[0][j] = j;
}
for (i = 1; i <= b.length; i++) {
for (j = 1; j <= a.length; j++) {
if (b.charAt(i - 1) === a.charAt(j - 1)) {
matrix[i][j] = matrix[i - 1][j - 1];
} else {
matrix[i][j] = Math.min(
matrix[i - 1][j - 1] + 1,
matrix[i][j - 1] + 1,
matrix[i - 1][j] + 1
);
}
}
}
return matrix[b.length][a.length];
}
</script>
</body>
</html>

0 comments on commit 62b9bd6

Please sign in to comment.