HTML5 y CSS3 pt. 4: Avanzando en CSS 02
Uso de fuente externa google font; map & video embedded.
This commit is contained in:
parent
ee5b469838
commit
edfb89ab04
GPG Key ID:
E070ECF4A754FDB1
@ -104,4 +104,5 @@ cambiar color click derecho.
|
|||||||
[original](./logica_de_programacion_3/programa5_instructor.html).
|
[original](./logica_de_programacion_3/programa5_instructor.html).
|
||||||
- Disparando en el [blanco](./logica_de_programacion_3/programa6.html).
|
- Disparando en el [blanco](./logica_de_programacion_3/programa6.html).
|
||||||
- Actividad dibujando con el [mouse](./logica_de_programacion_3/dibujando_mouse.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).
|
||||||
|
|
||||||
|
|||||||
@ -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>
|
||||||
@ -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).
|
**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
|
```css
|
||||||
span.a {
|
span.a {
|
||||||
@ -125,7 +125,7 @@ Página [productos](./html_css_parte2/productos.html) y
|
|||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
</details></br>
|
</details>
|
||||||
|
|
||||||
<details><summary markdown="span">html</summary>
|
<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)
|
[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
|
```html
|
||||||
<input type="button">
|
<input type="button">
|
||||||
@ -304,3 +304,27 @@ Final curso HTML5 y CSS parte 3
|
|||||||
|
|
||||||
### Parte 4 - Avanzando en CSS
|
### 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).
|
||||||
|
|
||||||
|
|||||||
@ -5,11 +5,12 @@
|
|||||||
<meta name="viewport" content="width=device-width">
|
<meta name="viewport" content="width=device-width">
|
||||||
<title>Barbería Alura</title>
|
<title>Barbería Alura</title>
|
||||||
<link rel="stylesheet" href="./reset.css">
|
<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">
|
<link rel="stylesheet" href="./style.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="header">
|
|
||||||
<header><h1 id="header">Barbería Alura</h1></header>
|
|
||||||
<header>
|
<header>
|
||||||
<div class="caja">
|
<div class="caja">
|
||||||
<h1><img src="./imagenes/logo.png"></h1>
|
<h1><img src="./imagenes/logo.png"></h1>
|
||||||
@ -22,14 +23,12 @@
|
|||||||
</nav>
|
</nav>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
</div>
|
|
||||||
<img class="banner"
|
<img class="banner"
|
||||||
src="./banner/banner.jpg"
|
src="./banner/banner.jpg"
|
||||||
alt="barbería con dos sillas, fondo con dos espejos y muchos cuadros"/>
|
alt="barbería con dos sillas, fondo con dos espejos y muchos cuadros"/>
|
||||||
<main>
|
<main>
|
||||||
<section class="principal">
|
<section class="principal">
|
||||||
<h2 class="titulo-principal">Sobre Barbería Alura</h1>
|
<h2 class="titulo-principal">Sobre Barbería Alura</h1>
|
||||||
|
|
||||||
<img class="utiles" src="./imagenes/utiles.jpg" alt="Utensilios de barbero"/>
|
<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
|
<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,
|
las últimas tendencias. El atendimiento posee un padrón de excelencia y agilidad,
|
||||||
garantizando calidad y satisfacción de nuestros clientes.</p>
|
garantizando calidad y satisfacción de nuestros clientes.</p>
|
||||||
</section>
|
</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">
|
<section class="diferencias">
|
||||||
<h3 class="titulo-principal">Lo que nos diferencia</h2>
|
<h3 class="titulo-principal">Lo que nos diferencia</h2>
|
||||||
<ul>
|
<ul>
|
||||||
@ -53,11 +61,16 @@
|
|||||||
<li class="items">Localización</li>
|
<li class="items">Localización</li>
|
||||||
<li class="items">Profesionales calificados</li>
|
<li class="items">Profesionales calificados</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<img class="imagen_diferencias"
|
<img class="imagen_diferencias"
|
||||||
src="diferenciales/diferenciales.jpg"
|
src="diferenciales/diferenciales.jpg"
|
||||||
alt="hombre sentado en barbería al que le cortan la barba con tijeras"/>
|
alt="hombre sentado en barbería al que le cortan la barba con tijeras"/>
|
||||||
</section>
|
</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>
|
</main>
|
||||||
<footer>
|
<footer>
|
||||||
<img src="./imagenes/logo-blanco.png">
|
<img src="./imagenes/logo-blanco.png">
|
||||||
|
|||||||
@ -1,10 +1,14 @@
|
|||||||
|
body {
|
||||||
|
font-family: 'Montserrat', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
header {
|
header {
|
||||||
background: #046dfc;
|
background: #046dfc;
|
||||||
padding: 20px 0;
|
padding: 20px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.caja {
|
.caja {
|
||||||
width: 80%;
|
width: 90%;
|
||||||
position: relative;
|
position: relative;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
@ -208,6 +212,20 @@ p.test {
|
|||||||
margin: 0 20px 20px 0;
|
margin: 0 20px 20px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.mapa {
|
||||||
|
padding: 3em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mapa p {
|
||||||
|
margin: 0 0 2em;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
.imagen_diferencias {
|
.imagen_diferencias {
|
||||||
width: 60%;
|
width: 60%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.video {
|
||||||
|
width: 560px;
|
||||||
|
margin: 1em auto;
|
||||||
|
}
|
||||||
|
|||||||
@ -14,5 +14,5 @@ para certificación ORACLE. Notas, apuntes, resumenes y actividades.
|
|||||||
- Introducción [Hello ONE](./001_desarrollo_personal/hello_one.md).
|
- Introducción [Hello ONE](./001_desarrollo_personal/hello_one.md).
|
||||||
- [Desarrollo](./001_desarrollo_personal/README.md) Personal.
|
- [Desarrollo](./001_desarrollo_personal/README.md) Personal.
|
||||||
- [Principiante](./002-003_logica_de_programacion/README.md) y conceptos
|
- [Principiante](./002-003_logica_de_programacion/README.md) y conceptos
|
||||||
primoridiales en programación.
|
primoridiales en programación con Javascript.
|
||||||
- Crea tus primeras [páginas Web](./004_primeras_paginas/README.md).
|
- Crea tus primeras [páginas Web](./004_primeras_paginas/README.md), HTML5 y CSS3.
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user