HTML5 y CSS3 pt. 4: Avanzando en CSS 02

Uso de fuente externa google font; map & video embedded.
2023-04-13 13:05:29 -04:00 · 2023-04-13 13:05:29 -04:00 · edfb89ab04
commit edfb89ab04
parent ee5b469838
6 changed files with 180 additions and 24 deletions
--- a/002-003_logica_de_programacion/README.md
+++ b/002-003_logica_de_programacion/README.md
@ -104,4 +104,5 @@ cambiar color click derecho.
 [original](./logica_de_programacion_3/programa5_instructor.html).
 - Disparando en el [blanco](./logica_de_programacion_3/programa6.html).
 - Actividad dibujando con el [mouse](./logica_de_programacion_3/dibujando_mouse.html).
+- Extra, [aimbot](./logica_de_programacion_3/aimbot.html) (tiro al blanco c/puntos).

--- a/002-003_logica_de_programacion/logica_de_programacion_3/aimbot.html
+++ b/002-003_logica_de_programacion/logica_de_programacion_3/aimbot.html
@ -0,0 +1,100 @@
+<!DOCTYPE html>
+<html lang="es">
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width">
+    </head>
+    <body>
+        <canvas width="600" height="400"> </canvas>
+        <script>
+            // Cambia aquí la velocidad.
+            var velocidad = 800;
+            // Cambia aquí el puntaje máximo.
+            var max_puntos = 10;
+            var max_x = 600;
+            var max_y = 400;
+            var aleatorio_x;
+            var aleatorio_y;
+            var radio = 10;
+            var minimo = radio*3;
+            var puntos = 0;
+            var pantalla = document.querySelector("canvas");
+            var pincel = pantalla.getContext("2d");
+            pincel.fillStyle = "magenta";
+            pincel.fillRect(0,0,600,400);
+
+            function crear_circunferencia(pos_x, pos_y, radio, color="black"){
+                pincel.fillStyle = color;
+                pincel.beginPath();
+                pincel.arc(pos_x, pos_y, radio, 0, 2*Math.PI);
+                pincel.fill();
+            }
+            
+            function limpiar_pantalla(){
+                pincel.clearRect(0, 0, 600, 400);
+            }
+
+            function crear_diana(pos_x, pos_y){
+                crear_circunferencia(pos_x,pos_y, radio*3+1, "black");
+                crear_circunferencia(pos_x,pos_y, radio*3, "red");
+                crear_circunferencia(pos_x,pos_y, radio*2, "white");
+                crear_circunferencia(pos_x,pos_y, radio, "red");
+            }
+
+            function posic_aleatoria(maximo){
+                let aleatorio = minimo+(Math.floor(Math.random()*(maximo-minimo*2)));
+                return aleatorio;
+                //@deprecated Validador
+                //if (aleatorio < minimo || aleatorio > (maximo-minimo)){
+                //    alert("me salí del canvas:\nMax="+maximo+"\nAleatorio: "+aleatorio+"\nradio="+radio);
+                //    posic_aleatoria(maximo);
+                //} else {
+                //    return aleatorio;
+                //}
+            }
+            
+            function escribir_texto(pos_x, pos_y, texto, texto2="") {
+                pincel.font="30px Helvetica";
+                pincel.fillStyle="darkgreen";
+                pincel.fillText(texto, pos_x, pos_y);    
+                pincel.font="bolder 35px Helvetica";
+                pincel.fillStyle="black";
+                pincel.fillText(texto2, (pos_x+118), pos_y+2);    
+            }
+
+            function check_win(){
+                if (puntos >= max_puntos) {
+                    limpiar_pantalla();
+                    escribir_texto(30, 30, "Puntos : " +puntos)
+                    puntos = 0;
+                    alert('\n¡¡¡ Felicidades !!! \nAlcanzaste los '+max_puntos+' puntos..\nDirecto a global!!\n');
+                }
+            }
+
+            function actualizar_pantalla(){
+                limpiar_pantalla();
+                escribir_texto(30, 30, "Puntos : ", puntos)
+                aleatorio_x = posic_aleatoria(max_x);
+                aleatorio_y = posic_aleatoria(max_y);
+                crear_diana(aleatorio_x, aleatorio_y);
+            }
+
+            setInterval(actualizar_pantalla, velocidad);
+
+            function disparar(evento){
+                var pos_x = evento.pageX - pantalla.offsetLeft;
+                var pos_y = evento.pageY - pantalla.offsetTop;
+                if ((pos_x < (aleatorio_x + radio)) &&
+                    (pos_x > (aleatorio_x - radio)) &&
+                    (pos_y < (aleatorio_y + radio)) &&
+                    (pos_y > (aleatorio_y - radio))){
+                    // alert("Acertaste!!!");
+                    puntos += 10;
+                    check_win();
+                }
+            }
+
+            pantalla.onclick = disparar;
+        </script>
+    </body>
+</html>
--- a/004_primeras_paginas/README.md
+++ b/004_primeras_paginas/README.md
@ -94,7 +94,7 @@ Página [productos](./html_css_parte2/productos.html) y

 **CSS** - La propiedad [display](https://www.w3schools.com/css/css_inline-block.asp).

-<details><summary markdown="span">estilo</summary>
+<details><summary markdown="span">css</summary>

 ```css
    span.a {
@ -125,7 +125,7 @@ Página [productos](./html_css_parte2/productos.html) y
    }
 ```

-</details></br>
+</details>

 <details><summary markdown="span">html</summary>

@ -263,7 +263,7 @@ p.test { color: magenta; }

 [w3schools input types](https://www.w3schools.com/html/html_form_input_types.asp)

-<details><summary markdown="span">lista</summary>
+<details><summary markdown="span">tipos</summary>

 ```html
    <input type="button">
@ -304,3 +304,27 @@ Final curso HTML5 y CSS parte 3

 ### Parte 4 - Avanzando en CSS

+- Reestructurando los estilos de [index.html](./html_css_parte4/index.html) para
+utilizar [style.css](./html_css_parte4/style.css).
+- Utilización de fuentes externas como [google fonts](https://https://fonts.google.com/).
+
+- <details><summary markdown="span">Algunas fuentes de google</summary>
+
+    - [Chakra Petch](https://fonts.google.com/specimen/Chakra+Petch)
+    - [Cinzel](https://fonts.google.com/specimen/Cinzel)
+    - [Press Start 2P](https://fonts.google.com/specimen/Press+Start+2P)
+    - [Luckiest Guy](https://fonts.google.com/specimen/Luckiest+Guy)
+    - [Ultra](https://fonts.google.com/specimen/Ultra)
+    - [Architects Daughter](https://fonts.google.com/specimen/Architects+Daughter)
+    - [Itim](https://fonts.google.com/specimen/Itim)
+    - [Phudu](https://fonts.google.com/specimen/Phudu)
+    - [Bungee Hairline](https://fonts.google.com/specimen/Bungee+Hairline)
+    - [Nosifer](https://fonts.google.com/specimen/Nosifer)
+    - [Monserrat](https://fonts.google.com/specimen/Montserrat)
+    - [Noto Sans Symbols 2](https://fonts.google.com/noto/specimen/Noto+Sans+Symbols+2)
+    - [Noto Music](https://fonts.google.com/noto/specimen/Noto+Music)
+</details>
+
+- [Mapa](./html_css_parte4/index.html#L51) incrustado (embedded) y [estilo](./html_css_parte4/style.css#L215).
+- [Video](./html_css_parte4/index.html#L70) incrustado y [estilo](./html_css_parte4/style.css#L228).
+
--- a/004_primeras_paginas/html_css_parte4/index.html
+++ b/004_primeras_paginas/html_css_parte4/index.html
@ -5,11 +5,12 @@
        <meta name="viewport" content="width=device-width">
        <title>Barbería Alura</title>
        <link rel="stylesheet" href="./reset.css">
+        <link rel="preconnect" href="https://fonts.googleapis.com">
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+        <link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
        <link rel="stylesheet" href="./style.css">
    </head>
    <body>
-        <div class="header">
-            <header><h1 id="header">Barbería Alura</h1></header>
        <header>
            <div class="caja">
                <h1><img src="./imagenes/logo.png"></h1>
@ -22,14 +23,12 @@
                </nav>
            </div>
        </header>
-        </div>
        <img class="banner"
             src="./banner/banner.jpg"
             alt="barbería con dos sillas, fondo con dos espejos y muchos cuadros"/>
        <main>
            <section class="principal">
                <h2 class="titulo-principal">Sobre Barbería Alura</h1>
-
                <img class="utiles" src="./imagenes/utiles.jpg" alt="Utensilios de barbero"/>

                <p>Ubicada en el corazón de la ciudad, la <strong>Barbería Alura</strong> trae
@ -45,6 +44,15 @@
                las últimas tendencias. El atendimiento posee un padrón de excelencia y agilidad,
                garantizando calidad y satisfacción de nuestros clientes.</p>
            </section>
+
+            <section class="mapa">
+                <h3 class="titulo-principal">Donde estamos</h3>
+                <p>Estamos ubicados en el centro de la cuidad</p>
+                <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3656.449840047712!2d-46.63683801114504!3d-23.5881948!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x94ce5a2b2ed7f3a1%3A0xab35da2f5ca62674!2sCaelum%20-%20Education%20and%20Innovation!5e0!3m2!1ses-419!2scl!4v1681402707968!5m2!1ses-419!2scl"
+                width="100%" height="300" style="border:0;" allowfullscreen="" loading="lazy"
+                referrerpolicy="no-referrer-when-downgrade"></iframe>
+            </section>
+
            <section class="diferencias">
                <h3 class="titulo-principal">Lo que nos diferencia</h2>
                <ul>
@ -53,11 +61,16 @@
                    <li class="items">Localización</li>
                    <li class="items">Profesionales calificados</li>
                </ul>
-
                <img class="imagen_diferencias"
                     src="diferenciales/diferenciales.jpg"
                     alt="hombre sentado en barbería al que le cortan la barba con tijeras"/>
            </section>
+
+            <div class="video">
+                <iframe width="560" height="315" src="https://www.youtube.com/embed/TnJ_ObLRM9w"
+                title="YouTube video player" frameborder="0"
+                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                allowfullscreen></iframe>
        </main>
        <footer>
            <img src="./imagenes/logo-blanco.png">
--- a/004_primeras_paginas/html_css_parte4/style.css
+++ b/004_primeras_paginas/html_css_parte4/style.css
@ -1,10 +1,14 @@
+body {
+    font-family: 'Montserrat', sans-serif;
+}
+
 header {
    background: #046dfc;
    padding: 20px 0;
 }

 .caja {
-    width: 80%;
+    width: 90%;
    position: relative;
    margin: 0 auto;
 }
@ -208,6 +212,20 @@ p.test {
    margin: 0 20px 20px 0;
 }

+.mapa {
+    padding: 3em 0;
+}
+
+.mapa p {
+    margin: 0 0 2em;
+    text-align: center;
+}
+
 .imagen_diferencias {
    width: 60%;
 }
+
+.video {
+    width: 560px;
+    margin: 1em auto;
+}
--- a/README.md
+++ b/README.md
@ -14,5 +14,5 @@ para certificación ORACLE. Notas, apuntes, resumenes y actividades.
 - Introducción [Hello ONE](./001_desarrollo_personal/hello_one.md).
 - [Desarrollo](./001_desarrollo_personal/README.md) Personal.
 - [Principiante](./002-003_logica_de_programacion/README.md) y conceptos
-primoridiales en programación.
- Crea tus primeras [páginas Web](./004_primeras_paginas/README.md).
+primoridiales en programación con Javascript.
+- Crea tus primeras [páginas Web](./004_primeras_paginas/README.md), HTML5 y CSS3.