Res 2

jean-Philipe · Aug 26, 2023 · 0b76f6c · 0b76f6c
1 parent 833ecea
commit 0b76f6c
Show file tree

Hide file tree

Showing 7 changed files with 310 additions and 28 deletions.
diff --git a/README.md b/README.md
diff --git a/cursos.html b/cursos.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="es">
+    <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <meta name="description" content="Diseño y nuevos medios" />
+        <link href="style.css" rel="stylesheet" />
+        <title>&#x26f1; Inteligencia artificial</title> <!-- Cambio titulo -->
+    </head>
+    <body style="background:#008C5B">
+        <header>
+            <h1>
+                <a href="index.html">Sofía</a> <!-- Cambio nombre -->
+                <a href="cursos.html" style="text-decoration: line-through">CURSOS</a>
+                <a href="emoji.html">EMOJI</a>
+                <a href="swiftie.html">SWIFTIE</a>
+            </h1>
+        </header>
+        <main>
+            <div id="aqui"></div>
+        </main>
+        <footer>
+            <p><a href="https://github.com/profesorfaco/dno037-2023-2">Diseño y nuevos medios</a> <a href="https://github.com/profesorfaco/dno037-2023-2/tree/main/clase-03">23 de agosto, 2023</a></p>
+        </footer>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.7.0/p5.min.js" integrity="sha512-bcfltY+lNLlNxz38yBBm/HLaUB1gTV6I0e+fahbF9pS6roIdzUytozWdnFV8ZnM6cSAG5EbmO0ag0a/fLZSG4Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+        <script>
+            //cursos que me llaman la atención
+            var data = {
+                name: "Inteligencia Artificial",
+                code: "IIC2613",
+                about: "Este curso enseña los conceptos fundamentales de inteligencia artificial y las metodologías utilizadas en este ámbito. En particular, el curso abarca las técnicas clásicas de resolución de problemas mediante la lógica deductiva, algoritmos de búsqueda, y técnicas de planificación. El curso también cubre los aspectos fundamentales de aprendizaje automático."
+            }
+            var cursosJSON = [
+                {
+                    "Nombre": "Curso 1",
+                    "Codigo": "ABC3001",
+                    "Descripcion": "Me gusta el ramo ya que..."
+                },
+                {
+                    "Nombre": "Curso 2",
+                    "Codigo": "ABC3002",
+                    "Descripcion": "Me gusta el ramo ya que..."
+                },
+                {
+                    "Nombre": "Curso 3",
+                    "Codigo": "ABC3003",
+                    "Descripcion": "Me gusta el ramo ya que..."
+                },
+                {
+                    "Nombre": "Curso 4",
+                    "Codigo": "ABC3004",
+                    "Descripcion": "Me gusta el ramo ya que..."
+                },
+                {
+                    "Nombre": "Curso 5",
+                    "Codigo": "ABC3005",
+                    "Descripcion": "Me gusta el ramo ya que..."
+                }
+            ];
+
+            function setup() {
+                noCanvas();
+                console.log(data);
+                var x = 0;
+                while (x < 5){
+                    createElement("dl", "<dt>" + cursosJSON[x].Nombre + " (" + cursosJSON[x].Codigo + ")</dt><dd>" + cursosJSON[x].Descripcion + "</dd>").parent("aqui");
+                    x++;
+                }
+            }
+        </script>
+    </body>
+</html>
diff --git a/emoji.html b/emoji.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="es">
+    <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <meta name="description" content="Diseño y nuevos medios" />
+        <link href="style.css" rel="stylesheet" />
+        <title>&#127891; DNO037</title>
+    </head>
+    <body style="background:#081F86; cursor: none;">
+        <header>
+            <h1>
+                <a href="index.html">Nombre Apellido</a>
+                <a href="cursos.html">CURSOS</a>
+                <a href="emoji.html" style="text-decoration: line-through">EMOJI</a>
+                <a href="swiftie.html">SWIFTIE</a>
+            </h1>
+        </header>
+        <main></main>
+        <footer>
+            <p><a href="https://github.com/profesorfaco/dno037-2023-2">Diseño y nuevos medios</a> <a href="https://github.com/profesorfaco/dno037-2023-2/tree/main/clase-03">23 de agosto, 2023</a></p>
+        </footer>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.7.0/p5.min.js" integrity="sha512-bcfltY+lNLlNxz38yBBm/HLaUB1gTV6I0e+fahbF9pS6roIdzUytozWdnFV8ZnM6cSAG5EbmO0ag0a/fLZSG4Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+        <script>
+            function setup() {
+                createCanvas(windowWidth, windowHeight).position(0, 0).style("z-index", "-1");
+            }
+            function draw() {
+                background('#081F86');
+                textSize(42);
+                textAlign(CENTER,CENTER);
+                text("EMOJI", mouseX, mouseY);
+            }
+            function windowResized() {
+                resizeCanvas(windowWidth, windowHeight);
+            }
+        </script>
+    </body>
+</html>
diff --git a/index.html b/index.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="es">
+    <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <meta name="description" content="Diseño y nuevos medios" />
+        <link href="style.css" rel="stylesheet" />
+        <title>🔥; Cambio de titulo</title> <!-- Cambio titulo -->
+    </head>
+    <body>
+        <header>
+            <h1>
+                <a href="index.html">Sofía</a> <!-- Cambio nombre -->
+                <a href="cursos.html">CURSOS</a>
+                <a href="emoji.html">EMOJI</a>
+                <a href="swiftie.html">SWIFTIE</a>
+            </h1>
+        </header>
+        <main>
+            <div>
+                <p>Preséntate en este párrafo, compartiendo la razón por la que sigues en este OPR. Intenta ser breve. Este párrafo tiene treinta palabras. Tú puedes agregar más, pero evita superar las cincuenta.</p>
+            </div>
+        </main>
+        <footer>
+            <p><a href="https://github.com/profesorfaco/dno037-2023-2">Diseño y nuevos medios</a> <a href="https://github.com/profesorfaco/dno037-2023-2/tree/main/clase-03">23 de agosto, 2023</a></p>
+        </footer>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.7.0/p5.min.js" integrity="sha512-bcfltY+lNLlNxz38yBBm/HLaUB1gTV6I0e+fahbF9pS6roIdzUytozWdnFV8ZnM6cSAG5EbmO0ag0a/fLZSG4Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+        <script>
+            var h, s;
+            function setup() {
+                createCanvas(windowWidth, windowHeight).position(0, 0).style("z-index", "-1");
+            }
+            function draw() {
+                colorMode(HSB, 360, 100, 100);
+                h = map(mouseX, 0, windowWidth, 0, 360);
+                s = map(mouseY, 0, windowHeight, 100, 0);
+                background(h, s, 55);
+            }
+            function windowResized() {
+                resizeCanvas(windowWidth, windowHeight);
+            }
+        </script>
+    </body>
+</html>
diff --git a/prueba.json b/prueba.json
diff --git a/style.css b/style.css
@@ -0,0 +1,115 @@
+@import url("https://fonts.googleapis.com/css2?family=Piazzolla:wght@300;500;700&display=swap");
+
+* {
+    margin: 0;
+    padding: 0;
+}
+
+html,
+body {
+    min-height: 100%;
+    overflow-x: hidden;
+}
+
+body {
+    font-family: "Piazzolla", serif;
+    font-weight: 300;
+    color: rgba(255, 255, 255, 0.75);
+}
+
+a {
+    color: rgba(255, 255, 255, 0.5);
+    text-decoration: none;
+}
+
+a:hover {
+    color: rgba(255, 255, 255, 1);
+    text-decoration: none;
+}
+
+header,
+main,
+footer {
+    width: 80vw;
+    margin: 0;
+    padding: 0 10vw;
+}
+
+main {
+    min-height: 80vh;
+    display: flex;
+    align-items: center;    
+}
+
+header h1 {
+    display: flex;
+    justify-content: space-between;
+    align-items: baseline;
+    line-height: 1;
+    padding: 3vh 0;
+}
+
+header h1 a {
+    font-size: calc(0.6rem + 0.6vw);
+    letter-spacing: 0.2vw;
+    font-weight: 700;
+}
+
+header h1 a:first-child {
+    font-size: calc(0.9rem + 0.9vw);
+    letter-spacing: 0;
+    font-weight: 500;
+}
+
+main div{
+    padding:4vw 0;
+}
+
+main div p{
+    font-size:calc(1.38rem + 1.38vw);
+}
+
+main div p span{
+    font-weight: 500;
+}
+
+main div blockquote{
+    font-size:calc(1.62rem + 1.62vw);
+    color: rgba(255, 255, 255, 0.5);
+    font-weight: 500;
+}
+
+main div dl {
+  display:block;
+  clear: both;
+  font-size: calc(0.8rem + 0.4vw); 
+  line-height: 1.4;
+}
+
+main div dl dt {
+    font-weight: 500;
+    display: inline-block;
+    float:left;
+    width:calc(30% - 2rem);
+    padding-right:2rem;
+}
+
+main div dl dd {
+    display: inline-block;
+    float:left;
+    width:70%;
+    padding-bottom: 1rem;
+    color:rgba(255,255,255,.7);
+}
+
+footer p {
+    display: flex;
+    justify-content: space-between;
+    align-items: baseline;
+    line-height: 1;
+    padding: 3vh 0;
+}
+
+footer p a {
+    font-weight: 500;
+}
diff --git a/swiftie.html b/swiftie.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="es">
+    <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <meta name="description" content="Diseño y nuevos medios" />
+        <link href="style.css" rel="stylesheet" />
+        <title>&#127891; DNO037</title>
+    </head>
+    <body style="background:#8F0A71">
+        <header>
+            <h1>
+                <a href="index.html">Nombre Apellido</a>
+                <a href="cursos.html">CURSOS</a>
+                <a href="emoji.html">EMOJI</a>
+                <a href="swiftie.html" style="text-decoration: line-through">SWIFTIE</a>
+            </h1>
+        </header>
+        <main>
+            <div>
+                <p>Siendo las <span id="horas"></span>:<span id="minutos"></span>, recuerdo el tema <span id="cancion"></span> de Taylor Swift. En este tema, del disco <span id="disco"></span>, ella canta:</p>
+                <blockquote id="letra"></blockquote>
+            </div>
+        </main>
+        <footer>
+            <p><a href="https://github.com/profesorfaco/dno037-2023-2">Diseño y nuevos medios</a> <a href="https://github.com/profesorfaco/dno037-2023-2/tree/main/clase-03">23 de agosto, 2023</a></p>
+        </footer>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.7.0/p5.min.js" integrity="sha512-bcfltY+lNLlNxz38yBBm/HLaUB1gTV6I0e+fahbF9pS6roIdzUytozWdnFV8ZnM6cSAG5EbmO0ag0a/fLZSG4Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+        <script>
+            function setup() {
+                noCanvas();
+                select("#horas").html("hh");
+                select("#minutos").html("mm");
+                select("#cancion").html("song");
+                select("#disco").html("album");                
+                select("#letra").html("quote");
+            }
+        </script>
+    </body>
+</html>