jparrap
/
UTFSM
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

El header tienen forma por fin

beta
Juanposo 2025-11-18 23:21:50 -03:00
parent 320f4f7122
commit a3ef7dd4ad
12 changed files with 287 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
LabSO/HTML/Tarea/Estructura.md
View File

@ -1,8 +1,10 @@
# Música by Juanposo
Página que muestre mi amor a la música así bien moderno y pulento, cómo debe tener 5 páginas podrían ser algo así:
## 1. Index - Introducción
-
## 2. Cómo escuchar música en la era moderna
Hablar de distintos streaming, cosas cómo Jellyfin, aplicaciones para escuchar música, RYM, vinílos, CDs y todo lo demás.
## 3. Sampling
## 3. Mis artistas favoritos
- Daft Punk
- Kendrick Lamar
@ -13,4 +15,8 @@ Hablar de distintos streaming, cosas cómo Jellyfin, aplicaciones para escuchar
- In Rainbows
- Discovery
- Love Deluxe
## 5. Recomendaciones
## 5. Sampling
- Indicar que es
- Por que me gusta tanto
- Mis artistas y discos favoritos que ejecutan esta técnica
- Mi temita jiji

BIN
LabSO/HTML/Tarea/TPAB poster.webp 100644
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 53 KiB

34
LabSO/HTML/Tarea/escuchando.html 100644
View File

@ -0,0 +1,34 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Escuchando</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="sitecanvas">
<!--HEADER-->
<section class="siteheader">
<header>
<nav>
<h1 href="index.html">Logo</h1>
<div></div>
<div class="menuitems">
<a href="escuchando.html">Escuchando</a>
<a href="recomendaciones.html">Recomendaciones</a>
<a href="favoritos.html">Mis favoritos</a>
<a href="otros.html">Otros</a>
</div>
</nav>
</header>
</section>
<!--CONTENIDO-->
<section class="pagecontent">
<h1>Me gusta la música c:</h1>
<p>Hay música para todos, solo que no todos saben que les gusta, y cómo alguien que basa su personalidad en que escucha mucha música quiero mostrar un poco de música para que veas si algo te interesa, y si no, :c</p>
<p>Por lo mismo esta página esta dedicada a mostrarte nueva música y cómo encontrarla de la forma que yo utilizo, ya que en la era del algoritmo uno pensaría que sería muy difícil encontrar música que a uno le interese, pero en mi opinión es más fácil que nunca.</p>
</section>
</div>
</body>
</html>

31
LabSO/HTML/Tarea/favoritos.html 100644
View File

@ -0,0 +1,31 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Favoritos</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="sitecanvas">
<!--HEADER-->
<section class="siteheader">
<header>
<nav>
<h1 href="index.html">Logo</h1>
<div></div>
<div class="menuitems">
<a href="escuchando.html">Escuchando</a>
<a href="recomendaciones.html">Recomendaciones</a>
<a href="favoritos.html">Mis favoritos</a>
<a href="otros.html">Otros</a>
</div>
</nav>
</header>
</section>
<!--CONTENIDO-->
<div class="pagecontent">
</div>
</body>
</html>

34
LabSO/HTML/Tarea/index.html
View File

@ -0,0 +1,34 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Musique</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="sitecanvas">
<!--HEADER-->
<section class="siteheader">
<header>
<nav>
<h1 href="index.html">Logo</h1>
<div></div>
<div class="menuitems">
<a href="escuchando.html">Escuchando</a>
<a href="recomendaciones.html">Recomendaciones</a>
<a href="favoritos.html">Mis favoritos</a>
<a href="otros.html">Otros</a>
</div>
</nav>
</header>
</section>
<!--CONTENIDO-->
<section class="pagecontent">
<h1>Me gusta la música c:</h1>
<p>Hay música para todos, solo que no todos saben que les gusta, y cómo alguien que basa su personalidad en que escucha mucha música quiero mostrar un poco de música para que veas si algo te interesa, y si no, :c</p>
<p>Por lo mismo esta página esta dedicada a mostrarte nueva música y cómo encontrarla de la forma que yo utilizo, ya que en la era del algoritmo uno pensaría que sería muy difícil encontrar música que a uno le interese, pero en mi opinión es más fácil que nunca.</p>
</section>
</div>
</body>
</html>

36
LabSO/HTML/Tarea/otros.html 100644
View File

@ -0,0 +1,36 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Recomendaciones</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="sitecanvas">
<!--HEADER-->
<section class="siteheader">
<header>
<nav>
<h1 href="index.html">Logo</h1>
<div></div>
<div class="menuitems">
<a href="escuchando.html">Escuchando</a>
<a href="recomendaciones.html">Recomendaciones</a>
<a href="favoritos.html">Mis favoritos</a>
<a href="otros.html">Otros</a>
</div>
</nav>
</header>
</section>
<!--CONTENIDO-->
<section class="pagecontent">
<div class="pagetext">
<h1>Otra info wena</h1>
<p>mish</p>
</div>
</div>
</section>
</div>
</body>
</html>

44
LabSO/HTML/Tarea/recomendaciones.html 100644
View File

@ -0,0 +1,44 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Recomendaciones</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="sitecanvas">
<!--HEADER-->
<section class="siteheader">
<header>
<nav>
<h1 href="index.html">Logo</h1>
<div></div>
<div class="menuitems">
<a href="escuchando.html">Escuchando</a>
<a href="recomendaciones.html">Recomendaciones</a>
<a href="favoritos.html">Mis favoritos</a>
<a href="otros.html">Otros</a>
</div>
</nav>
</header>
</section>
<!--CONTENIDO-->
<section class="pagecontent">
<div class="pagetext">
<h1>Discos necesarios para cualquiera</h1>
<p>El otro día vi un Reel que preguntaba "si tuvieras que escoger 5 álbumes necesarios, cuáles escogerías y por qué?". Así que </p>
</div>
<div class="albumWrapper">
<img src="TPAB poster.webp" class="image">
<div>
<h2>To Pimp a Butterfly</h2>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Exercitationem, quae minus nulla similique quasi, quod maxime adipisci earum laudantium iure iusto sapiente? Alias eum molestias inventore saepe, facilis voluptatibus vero!
</p>
</div>
</div>
</section>
</div>
</body>
</html>

72
LabSO/HTML/Tarea/styles.css 100644
View File

@ -0,0 +1,72 @@
* {
box-sizing: border-box;
padding: 0px;
margin: 0px;
}
.sitecanvas {
max-width: 1020px;
margin:0 auto;
box-shadow: 0 3px 3px 0 #32311933, 0 3px 6px 0 #32311933;
}
body {
margin: 0px;
font-family: sans-serif;
}
header {
color: white;
background-color: black;
display: grid;
padding: 15px;
width: 100%;
nav {
display: grid;
gap: 20px;
grid-template-columns: 1fr auto auto;
align-items: center;
}
h1 {
justify-self: left;
}
.menuitems {
justify-content: right;
gap: 20px;
}
nav a {
text-decoration: none;
color: white;
}
nav a:hover {
color: orange;
}
}
.pagecontent {
padding: 20px;
color: black;
font-size: 20px;
}
.pagetext {
padding-bottom: 20px;
}
.albumWrapper {
display: grid;
grid-template-columns: 1fr 3fr;
gap: 20px;
.image {
width: 250px;
}
}

2
Programación/Jupyter/Clase 2 Python JP.ipynb
View File

@ -316,7 +316,7 @@
"name": "python",
"nbconvert_exporter": "python",
"pygments_lexer": "ipython3",
"version": "3.13.7"
"version": "3.14.0"
}
},
"nbformat": 4,

12
Programación/Jupyter/Funciones Clase 1.ipynb
View File

@ -168,6 +168,18 @@
"display_name": "Python 3 (ipykernel)",
"language": "python",
"name": "python3"
},
"language_info": {
"codemirror_mode": {
"name": "ipython",
"version": 3
},
"file_extension": ".py",
"mimetype": "text/x-python",
"name": "python",
"nbconvert_exporter": "python",
"pygments_lexer": "ipython3",
"version": "3.14.0"
}
},
"nbformat": 4,

20
Programación/Jupyter/Strings.ipynb
View File

@ -227,7 +227,7 @@
},
{
"cell_type": "code",
"execution_count": null,
"execution_count": 1,
"id": "c331f248",
"metadata": {},
"outputs": [
@ -235,10 +235,12 @@
"name": "stdout",
"output_type": "stream",
"text": [
"Anotaciones: DLTDLTL DLTDLTL\n",
"13 puntos en el periodo 1\n",
"13 puntos en el periodo 2\n",
"Total: 26 puntos\n"
"Anotaciones: DTLDLTLDLTL DTLDLLTLTLDLTLDL DTLDLTLDLTLDLTL DTLDLTLLDLTDLTLTD\n",
"20 puntos en el periodo 1\n",
"28 puntos en el periodo 2\n",
"27 puntos en el periodo 3\n",
"32 puntos en el periodo 4\n",
"Total: 107 puntos\n"
]
}
],
@ -284,6 +286,14 @@
"print(f\"{puntos} puntos en el periodo {periodo}\")\n",
"print(f\"Total: {total} puntos\")"
]
},
{
"cell_type": "code",
"execution_count": null,
"id": "8fb895a1",
"metadata": {},
"outputs": [],
"source": []
}
],
"metadata": {

2
Programación/Jupyter/if-elif-else.ipynb
View File

@ -68,7 +68,7 @@
"name": "python",
"nbconvert_exporter": "python",
"pygments_lexer": "ipython3",
"version": "3.13.7"
"version": "3.14.0"
}
},
"nbformat": 4,