versión inicial

uo276514 · Dec 5, 2023 · 74b4b45 · 74b4b45
1 parent b77597f
commit 74b4b45
Show file tree

Hide file tree

Showing 10 changed files with 257 additions and 62 deletions.
diff --git a/aficiones.html b/aficiones.html
@@ -5,7 +5,7 @@
 	<meta charset="UTF-8">
 
 	<!--Metadatos de los documentos HTML5-->
-	<meta name ="author" content ="Jorge López Peláez">
+	<meta name ="author" content ="Jorge López Peláez"> 
 	<meta name ="description" content ="Aficiones">
 	<meta name ="keywords" content ="aficiones, Jorge">
 	<!--Definición de la ventana gráfica-->
@@ -29,8 +29,6 @@
 	<nav>
 		<a href="index.html" accesskey="I" tabindex="1">Índice</a>
 		<a href="aficiones.html" accesskey="A" tabindex="2">Aficiones</a>
-		<a href="series.html" accesskey="S" tabindex="3">Series</a>
-		<a href="musica.html" accesskey="M" tabindex="4">Música</a>
 	</nav>
 
 	<header>
@@ -59,6 +57,11 @@ <h2>Además de balonmano, ¿qué más hago?</h2>
 			Fuera del deporte, mis aficiones favoritas son hacer planes con mis amigos, ya sea de fiesta, a tomar algo o a 
             cenar/comer. Jugar a videojuegos también es uno de mis pasatiempos favoritos aunque cada vez juego menos.
 		</p>
+		<p>
+			Además, ver <a href="series.html" title="enlace a la sección de mi web sobre series">series</a> 
+			en casa o escuchar <a href="musica.html" title="enlace a la sección de mi web sobre música">música</a> 
+			son dos pasatiempos que también me gustan mucho.
+		</p>
 	</main>
 	<section>
 		<h2>Una foto mía jugando a balonmano</h2>

diff --git a/contenido.xml b/contenido.xml
@@ -0,0 +1,107 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<pages>
+    <page>
+        <title>Índice</title>
+        <content>
+            Jorge López Peláez
+            ¿Quién soy? 
+            Nací en Segovia el 16 de agosto de 2001, pero llevo viviendo en Oviedo desde los 3 años de edad. 
+            Soy un alumno de primer curso del Máster en Ingeniería Web (MIW) de la Universidad de Oviedo.
+            ¿Qué más hay sobre mi?
+            Estudié desde los 3 años en el Colegio Auseva Maristas, en Oviedo. Al terminar los estudios de Bachillerato, comencé el
+            grado de Ingeniería del Software de la Universidad de Oviedo.
+            En cuanto a aficiones, me gusta ver deporte, entre ellos:
+            Fórmula 1
+            Fútbol
+            Tenis
+            Balonmano
+            Además de verlos también me gusta jugar:
+            Fútbol
+            Tenis
+            Balonmano
+            Baloncesto
+            Pádel
+            Por último, también me gusta jugar a videojuegos, salir con mis amigos o hacer planes con mi familia.
+            Una foto mía
+            Contáctame
+            Si deseas contactar conmigo puedes hacerlo por LinkedIn
+        </content>
+    </page>
+    <page>
+        <title>Aficiones</title>
+        <content>
+            ¿Qué aficiones tengo?
+			Como se indica en el índice de mi página web, me gustan mucho los deportes, tanto verlos como practicarlos.
+            En especial, jugué durante 8 años seguidos a balonmano, desde 5º de primaria hasta terminar Bachillerato.
+            Al terminar el colegio y comenzar el grado, dejé el balonmano para centrarme en los estudios, pero un año más 
+            tarde decidí volver. Ese año conseguimos ascender a Primera Nacional y visto que empezaba tercero de carrera y,
+            que al haber ascendido, tendríamos que hacer viajes cada dos fines de semana, decidí volver a dejarlo. Sin embargo,
+            no sería la última vez que jugaría ya que este año (2023), tras haber terminado el grado y al comenzar el máster,
+            volví a practicar este deporte.
+            Además de balonmano, ¿qué más hago?
+			En cuanto a deporte, juego bastante al tenis, pero de manera 'libre', sin jugar en ningún club. También, juego a 
+            veces con mis amigos a pádel o pachangas de fútbol.
+			Fuera del deporte, mis aficiones favoritas son hacer planes con mis amigos, ya sea de fiesta, a tomar algo o a 
+            cenar/comer. Jugar a videojuegos también es uno de mis pasatiempos favoritos aunque cada vez juego menos.
+            Una foto mía jugando a balonmano
+	        Un vídeo jugando a balonmano
+		    A continuación se muestra un vídeo en el que se me ve jugando a balonmano con la selección:
+        </content>
+    </page>
+    <page>
+        <title>Series</title>
+        <content>
+            Mi TOP 3 de series favoritas
+            One Piece
+			Es sin duda One Piece es mi serie favorita. A pesar de ser una serie de anime y en la que hay más de 1000 
+			episodios, es una de las series más vistas en todo el mundo. La trama comienza con la muerte de Gold D 
+			Roger, el rey de los piratas. Al morir, dice que sus tesoros (el one piece) está escondido en alguna isla
+			del mundo y es así como comienza la gran era de los piratas, en la que el protagonista, Monkey D Luffy, 
+			se embarca en su aventura hacia cumplir su sueño, encontrar el tesoro de Roger y ser el rey de los 
+			piratas. En su camino hacia cumplirlo, va consiguiendo más y más aliados, algunos de los cuales se 
+			unirán a su banda formando una de las tripulaciones piratas más respetadas de los mares y desafiando al 
+			gobierno. Una de las claves por las que me gusta esta serie es por sus constantes bromas y sentido 
+			del humor.
+            Sherlock
+			En segundo lugar Sherlock, una de mis series favoritas por la manera
+			de resolver crímenes, siempre con suspense, con un tono irónico y un Sherlock Holmes que en este caso
+			tiene una capacidad de atención superior a los demás y se fija y deduce cosas que ninguna otra persona
+			consigue entender, y es por ello que no tiene amigos. Sin embargo, se va a encontrar con otra persona
+			que aunque no lo parezca es similar a él socialmente y terminarán siendo grandes amigos y resolviendo
+			crímenes juntos, este personaje es John Watson.
+            Ted Lasso
+			Finalmente, Ted Lasso, una serie totalmente cómica que trata de 
+			un club de fútbol inglés cuya nueva presidenta quiere arruinar para fastidiar a su exmarido, el cual 
+			es fan de dicho club. Para ello, la presidenta contrata a un entrenador que nunca ha entrenado a un
+			club de fútbol sino que viene de entrenar a un equipo de fútbol americano, este entrenador es Ted Lasso
+			y a pesar de que todos empiezan pensando mal sobre él y sus métodos, acabará por conseguir resultados
+			a base del buen rollo y la confianza.
+            Imagen de cada serie
+            Como se puede observar en las descripciones que hago de las series, algo en lo que me baso a la hora
+			de decidir si una serie es una de mis favoritas o no, es que hagan reir. Hay series de crímenes que 
+			me gustan, sin embargo, suelen ser bastante serias o con pequeñas bromas, pero Sherlock tiene un
+			tono irónico que se mantiene durante toda la serie que hace que te enganche. Al igual que hay otros
+			animes que también he visto, pero One Piece es sin duda el que más bromas hace de todos.
+        </content>
+    </page>
+    <page>
+        <title>Musica</title>
+        <content>
+            ¿Qué música me gusta?
+    		Algunos de los grupos o cantantes que más me gustan son:
+	    	Estopa
+		    Desde pequeño me gusta ya que en los viajes en coche mi padre siempre lo ponía. Es el único de los
+		    cuatro que pongo que vi en directo.
+		    Canto del loco
+		    Al igual que Estopa, lo escuchaba mucho en el coche con mi padre y de igual manera sigo escuchándolo 
+		    mucho. Dani Martín (cantante del grupo que ahora saca música individualmente) también me gusta mucho.
+		    Melendi
+		    Viviendo en Asturias no puede no gustarte Melendi, también me gusta desde pequeño.
+		    Aitana
+		    Me gusta desde hace varios años y a pesar de que tiene canciones de todo tipo de música, me gustan casi 
+		    todas.
+            Fotos de los grupos
+            Como se puede ver me gusta en especial el pop (aunque en general me gusta casi toda la música).
+        </content>
+    </page>
+</pages>
diff --git a/estilo/estilo.css b/estilo/estilo.css
@@ -8,18 +8,42 @@ body {
 
 /* Especificidad: 001 */
 nav {
-	color: rgb(36, 25, 59);;
-	background-color: #fff;
+	color: #fff;
+	background-color: rgb(36, 25, 59);
 
-	padding: 0.5em;
-	font-size: 1.2em;
-	border-radius: 2em;
+	display: flex;
+	gap: 1.5rem;
+	margin-top: 1rem;
+	font-size: 1.2rem;
+	border-radius: 2rem;
+}
+
+/* Especificidad: 002 */
+nav a {
+	color: #fff;
+	background-color: rgb(36, 25, 59);
 }
 
 /* Especificidad: 001 */
 a {
 	color: rgb(36, 25, 59);
 	background-color: #fff;
+	text-decoration: none;
+}
+
+/* Especificidad: 011 */
+a:hover {
+	text-decoration: underline;
+}
+
+/* Especificidad: 001 */
+div {
+	display: flex;
+	gap: 0.5rem;
+	align-items: center;
+	justify-content: center;
+    padding: 1rem;
+    border-top: 1px solid #ccc;
 }
 
 /* Especificidad: 001 */

diff --git a/estilo/layout.css b/estilo/layout.css
@@ -1,8 +1,8 @@
 /* Especificidad: 001 */
 body {
 	display: grid;
-	grid-template-areas: 	'nav 	nav'
-							'head	head'
+	grid-template-areas: 	'head 	head'
+							'nav	nav'
 							'main	section'
 							'main	section'
 							'footer	footer';	

diff --git a/estilo/section2x4_layout.css b/estilo/section2x4_layout.css
@@ -1,8 +1,8 @@
 /* Especificidad: 001 */
 body {
 	display: grid;
-	grid-template-areas: 	'nav 	'
-							'head	'
+	grid-template-areas: 	'head 	'
+							'nav	'
 							'main	'
 							'section'
 							'footer	';	

diff --git a/estilo/section3x3_layout.css b/estilo/section3x3_layout.css
@@ -1,8 +1,8 @@
 /* Especificidad: 001 */
 body {
 	display: grid;
-	grid-template-areas: 	'nav 	'
-							'head	'
+	grid-template-areas: 	'head 	'
+							'nav	'
 							'main	'
 							'section'
 							'footer	';	

diff --git a/index.html b/index.html
@@ -1,76 +1,132 @@
 <!DOCTYPE HTML>
 
 <html lang="es">
+
 <head>
 	<meta charset="UTF-8">
 
 	<!--Metadatos de los documentos HTML5-->
-	<meta name ="author" content ="Jorge López Peláez">
-	<meta name ="description" content ="Descripción general">
-	<meta name ="keywords" content ="personal, foto, vídeo, descripción, contacto, Jorge">
+	<meta name="author" content="Jorge López Peláez">
+	<meta name="description" content="Descripción general">
+	<meta name="keywords" content="personal, foto, vídeo, descripción, contacto, Jorge">
 	<!--Definición de la ventana gráfica-->
-	<meta name ="viewport" content ="width=device-width, initial-scale=1.0">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
 	<title>Jorge López - ¿quién soy?</title>
 
 	<link rel="stylesheet" type="text/css" href="estilo/estilo.css">
 	<link rel="stylesheet" type="text/css" href="estilo/layout.css">
 
+	<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
+
 	<script type="text/javascript">
-		(function(c,l,a,r,i,t,y){
-			c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
-			t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
-			y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+		(function (c, l, a, r, i, t, y) {
+			c[a] = c[a] || function () { (c[a].q = c[a].q || []).push(arguments) };
+			t = l.createElement(r); t.async = 1; t.src = "https://www.clarity.ms/tag/" + i;
+			y = l.getElementsByTagName(r)[0]; y.parentNode.insertBefore(t, y);
 		})(window, document, "clarity", "script", "jyqnw7jc0h"); 
 	</script>
 </head>
 
+<script>
+	function search() {
+		var terminoBusqueda = $('#searchInput').val().toLowerCase()
+		// Cargar el mapa del sitio desde el archivo XML
+		$.ajax({
+			type: "GET",
+			url: "sitemap.xml",
+			dataType: "xml",
+			success: function (xml) {
+				// Recorrer cada página en el mapa del sitio
+				$(xml).find('page').each(function () {
+					var pageUrl = $(this).attr('url')
+					// Realizar una búsqueda en la página
+					$.ajax({
+						type: "GET",
+						url: pageUrl,
+						success: function (pageContent) {
+							// Realizar la búsqueda en el contenido de la página
+							// Puedes adaptar esto según tus necesidades
+							if (pageContent.includes(terminoBusqueda)) {
+								console.log("Coincidencia encontrada en la página: " + pageUrl)
+								// console.log(window.location.href)
+								// console.log(pageUrl)
+								newUrl = "http://localhost" + pageUrl
+								// console.log(newUrl)
+								window.location.href = newUrl
+							}
+						},
+						error: function (xhr, status, error) {
+							console.error("Error al cargar la página: " + pageUrl)
+						}
+					});
+				});
+			},
+			error: function (xhr, status, error) {
+				console.error("Error al cargar el mapa del sitio: " + error)
+			}
+		});
+	}
+
+	function displayResults(results) {
+		results.each(function () {
+			var title = $(this).find('title').text()
+			var content = $(this).find('content').text()
+			$('#results').append('<div><strong>' + title + '</strong>: ' + content + '</div>')
+		});
+	}
+</script>
+
 <body>
+	<header>
+		<h1>Jorge López Peláez</h1>
+		<div class="buscador">
+			<input type="text" id="searchInput" placeholder="Buscar...">
+			<button onclick="search()">Buscar</button>
+		</div>
+	</header>
+
 	<nav>
 		<a href="index.html" accesskey="I" tabindex="1">Índice</a>
 		<a href="aficiones.html" accesskey="A" tabindex="2">Aficiones</a>
-		<a href="series.html" accesskey="S" tabindex="3">Series</a>
-		<a href="musica.html" accesskey="M" tabindex="4">Música</a>
 	</nav>
 
-	<header>
-		<h1>Jorge López Peláez</h1>
-	</header>
-
 	<main>
 		<h2>¿Quién soy?</h2>
 		<p>
 			Nací en Segovia el 16 de agosto de 2001, pero llevo viviendo en Oviedo desde los 3 años de edad.
-			Soy un alumno de primer curso del Máster en Ingeniería Web (<a href="https://miw.uniovi.es/" 
-			title="enlace al sitio web oficial del MIW de la Universidad de Oviedo">MIW</a>) de la Universidad de Oviedo. 
+			Soy un alumno de primer curso del Máster en Ingeniería Web (<a href="https://miw.uniovi.es/"
+				title="enlace al sitio web oficial del MIW de la Universidad de Oviedo">MIW</a>) de la Universidad de
+			Oviedo.
 		</p>
 
 		<h2>¿Qué más hay sobre mi?</h2>
 		<p>
 			Estudié desde los 3 años en el <a href="https://maristas-oviedo.org/" title="enlace a web oficial del Colegio
-			Auseva Maristas">Colegio Auseva Maristas</a>, en Oviedo. Al terminar los estudios de Bachillerato, comencé el 
+			Auseva Maristas">Colegio Auseva Maristas</a>, en Oviedo. Al terminar los estudios de Bachillerato, comencé el
 			grado de Ingeniería del Software de la Universidad de Oviedo.
 		</p>
 		<p>
-			En cuanto a <a href="aficiones.html" title="enlace a la sección de mi web sobre mis aficiones">aficiones</a>, 
+			En cuanto a <a href="aficiones.html"
+				title="enlace a la sección de mi web sobre mis aficiones">aficiones</a>,
 			me gusta ver deporte, entre ellos:
 		</p>
-			<ul>
-				<li>Fórmula 1</li>
-				<li>Fútbol</li>
-				<li>Tenis</li>
-				<li>Balonmano</li>
-			</ul>
+		<ul>
+			<li>Fórmula 1</li>
+			<li>Fútbol</li>
+			<li>Tenis</li>
+			<li>Balonmano</li>
+		</ul>
 		<p>
 			Además de verlos también me gusta jugar:
 		</p>
-			<ul>
-				<li>Fútbol</li>
-				<li>Tenis</li>
-				<li>Balonmano</li>
-				<li>Baloncesto</li>
-				<li>Pádel</li>
-			</ul>
+		<ul>
+			<li>Fútbol</li>
+			<li>Tenis</li>
+			<li>Balonmano</li>
+			<li>Baloncesto</li>
+			<li>Pádel</li>
+		</ul>
 		<p>
 			Por último, también me gusta jugar a videojuegos, salir con mis amigos o hacer planes con mi familia.
 		</p>
@@ -85,9 +141,11 @@ <h2>Una foto mía</h2>
 	<footer>
 		<h2>Contáctame</h2>
 		<p>
-			Si deseas contactar conmigo puedes hacerlo por <a href="https://www.linkedin.com/in/jorge-l%C3%B3pez-pel%C3%A1ez-954b95253/" 
-			title="enlace al linkedin de Jorge">LinkedIn</a>
+			Si deseas contactar conmigo puedes hacerlo por <a
+				href="https://www.linkedin.com/in/jorge-l%C3%B3pez-pel%C3%A1ez-954b95253/"
+				title="enlace al linkedin de Jorge">LinkedIn</a>
 		</p>
 	</footer>
 </body>
+
 </html>