sábado, 30 de abril de 2022

HTML5 - Código Whatsapp

CÓDIGO PARA CREAR ENLACE EN TU SITIO WEB DE WHATSAPP

Asi fue mi primer pensamiento al intentar agregar el código de whatsapp a mi sitio web, no ubicaba del porque cuando abria el enlace desde el cel se tardaba en cargar o simplemente abria el sitio web de whatsapp, cuando debería ser inmediato en la app... (Aún sigo pensando del porque whatsapp siempre cambia los códigos para sus enlaces directos...)

He aquí la solución de código enlace whatsapp:

Código para enlace Whatsapp (web):

Código para enlace Whatsapp (APP):

lunes, 25 de abril de 2022

CSS - Ajuste de imagen en backgroun para enlace

Código para ajustar una imagen como icono con CSS

.linkkers a:first-child{

display:flex;

background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilIdquQAUNA1u4vVqTNAXjurVGnRzKsyW83SMDNMOYAvhQWHgPKa2D5mw3e83HAy7Bm2dwOTAgG-YFIWA1BocyQStnBbkcAyK-c2OkRi0GxSwgZGPcy6hw2JNuDhW0K14cUeHvfn85Uj1qEeNFR94NVeZJtToEzuVCmMlv3VGRJ8V9C-s-JIiS7M9n1Q/s16000/colmena.png);

background-position: center center;

background-repeat: no-repeat;

background-size: 30px;

}

sábado, 23 de abril de 2022

Wifi - Bloquear dispositivos que estan conectados a mi wifi

Lo primero que tienen que hacer es: abrir cmd y escribir "ipconfig" para que les habilite la siguiente información

De aquí hay que ubicar la direccion que aparece en puerta predeterminada.... Copiarla y pegarla en el navegador.

Accederas a la configuración del servicio de Internet que tienes contratado.

Y hay que acceder a la red wifi que van a configurar

Después copiar el #Mac que aparece ahí. Y regresar al menú donde dice "MAC ADDRESS CONTROL"

Al seguir estos sencillos pasos podrás bloquear el acceso a cualquier dispositivo.

Nota:

01.- Apply

02.- Add #Mac + Apply

viernes, 22 de abril de 2022

HTML CSS - Base para iniciar una página web

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <title>Document</title>

    <meta name="author" content="Mike@Salinas"/>
    <meta name="keywords" content="web designer, mike salinas, mikesalinas6"/>
    <meta name="description" content="Mike Salinas: Deportes y Sistemas"/>

    <link  rel="icon"   href="#" type="image/png" />
    
</head>
<body>
    
</body>
</html>

HTML CSS - Código de Menú con subMenú

  <header>
    <nav class="navegacion">
      <ul class="menu">
        <li><a href="#">Inicio</a></li>
        <li><a href="#">Servicios</a>
          <ul class="submenu">
            <li><a href="#">Invitaciones Web</a></li>
            <li><a href="#">Diseños Web</a></li>
            <li><a href="#">Soporte Técnico</a></li>
          </ul>
        </li>
        <li><a href="#">Galería</a></li>
        <li><a href="#">Contacto</a></li>
        <li><a href="#">Blog</a></li>
      </ul>
    </nav>
  </header>





.navegacion{
    width: 100%;
    background: white;
    display: flex;
    justify-content: right;
}

.navegacion ul{
    list-style: none;
}
.menu > li{
    display: inline-block;
}
.menu > li > a{
    font-size: .8rem;
    display: block;
    padding: 5px 25px;
    color: rgb(209, 209, 209);
    text-decoration: none;
    background: rgb(3, 35, 37);
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}
.menu > li > a:hover{
    text-decoration: underline;
    color: white;
}
.submenu{
    position: absolute;
    width: auto;
    visibility: hidden;
    opacity: 0;
    transition: .3s all ease;
}
.submenu li a{
    font-size: .7rem;
    display: block;
    padding: 10px;
    padding-left: 50px;
    color: black;
    text-decoration: none;
    background: rgb(238, 238, 0);
    margin: 2px;
    margin-left: 15px;
    border-bottom-left-radius: 100px;
}
.submenu li a:hover{
    color: black;
    text-decoration: none;
    background: rgb(127, 238, 0);
    
}


.menu li:hover .submenu{
    visibility: visible;
    opacity: 1;
}


------ OPCION 2 ------


.menu > li{
    display: inline-block;
}
.menu > li:hover .submenu{
    visibility: visible;
    opacity: 1;
}
.submenu{
    position: absolute;
    visibility: hidden;
    opacity: 0;
}
.submenu a{
    background: black;
    color: green;
    display: flex;
    width: 120px;
}

Javascript - Slider con movimiento automático

Código HTML5

<div id="driver_car">
  
  <div class="buttons">
    <button id="prev"><i class="fas fa-arrow-left"></i></button>
    <button id="next"><i class="fas fa-arrow-right"></i></button>
  </div>

  <div class="slider">
    <div class="slide current"></div>
    <div class="slide"></div>
    <div class="slide"></div>
    <div class="slide"></div>
  </div>

</div>

Código CSS

#driver_car{
    width: 100%;
    height: 60vh;
    display: flex;
    align-content: center;
    justify-content: center;
    position: absolute;
    z-index: 0;
    margin: 50px 0px;
}

.slider {
    width: 70%;
    height: 100%;
    position: relative;
    z-index: 1;
  }
  
  .slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
  }
  
  .slide.current {
    opacity: 1;
  }
  
  .buttons button#next {
    position: absolute;
    top: 40%;
    right: 25px;
    z-index: 2;
  }
  
  .buttons button#prev {
    position: absolute;
    top: 40%;
    left: 25px;
    z-index: 2;
  }
  
  .buttons button {
    border: 2px solid #fff;
    background-color: rgb(0, 140, 255);
    color: rgb(255, 255, 255);
    cursor: pointer;
    padding: 13px 15px;
    border-radius: 50%;
    outline: none;
  }
  
  .buttons button:hover {
    background-color: rgb(0, 161, 13);
    color: #333;
  }
  
  /* Backgorund Images */
   
  .slide:first-child {
    background: url('https://images.unsplash.com/photo-1493238792000-8113da705763?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8OHx8fGVufDB8fHx8&w=1000&q=80') no-repeat
      center center/cover;
  }
  .slide:nth-child(2) {
    background: url('https://www.xtrafondos.com/descargar.php?id=9162&resolucion=3840x2160') no-repeat
      center center/cover;
  }
  .slide:nth-child(3) {
    background: url('https://c4.wallpaperflare.com/wallpaper/971/1023/719/abstracto-coche-wallpaper-preview.jpg') no-repeat
      center center/cover;
  }
  .slide:nth-child(4) {
    background: url('https://images7.alphacoders.com/338/338509.jpg') no-repeat
      center center/cover;
  }
  .slide:nth-child(5) {
    background: url('https://source.unsplash.com/ULmaQh9Gvbg/1600x900') no-repeat
      center top/cover;
  } 
  .slide:nth-child(6)  {
    background: url('https://source.unsplash.com/ggZuL3BTSJU/1600x900') no-repeat
      center center/cover;
  }


Código Javascript

const slides = document.querySelectorAll('.slide');
const next = document.querySelector('#next');
const prev = document.querySelector('#prev');
const auto = true; // Auto scroll
const intervalTime = 5000;
let slideInterval;

const nextSlide = () => {
  // Get current class
  const current = document.querySelector('.current');
  // Remove current class
  current.classList.remove('current');
  // Check for next slide
  if (current.nextElementSibling) {
    // Add current to next sibling
    current.nextElementSibling.classList.add('current');
  } else {
    // Add current to start
    slides[0].classList.add('current');
  }
  setTimeout(() => current.classList.remove('current'));
};

const prevSlide = () => {
  // Get current class
  const current = document.querySelector('.current');
  // Remove current class
  current.classList.remove('current');
  // Check for prev slide
  if (current.previousElementSibling) {
    // Add current to prev sibling
    current.previousElementSibling.classList.add('current');
  } else {
    // Add current to last
    slides[slides.length - 1].classList.add('current');
  }
  setTimeout(() => current.classList.remove('current'));
};

// Button events
next.addEventListener('click', e => {
  nextSlide();
  if (auto) {
    clearInterval(slideInterval);
    slideInterval = setInterval(nextSlide, intervalTime);
  }
});

prev.addEventListener('click', e => {
  prevSlide();
  if (auto) {
    clearInterval(slideInterval);
    slideInterval = setInterval(nextSlide, intervalTime);
  }
});

// Auto slide
if (auto) {
  // Run next slide at interval time
  slideInterval = setInterval(nextSlide, intervalTime);
}

martes, 19 de abril de 2022

Bluetooth - Transferencia de archivos de tu computadora hacia tu celular

Configuración

Bluetooth y dispositivos

Ver más dispositivos

Enviar o recibir archivos a través de Bluetooth

lunes, 4 de abril de 2022

GitHub - Actualizando los repositorios desde Windows con Visual Studio Code

Ya cuando se tienen los archivos en GitHub solo hay que clonar los archivos en la PC.

Ya después de haber clonado el repositorio hay que abrir una terminal desde VSC y seguir los pasos.

git add -A
git commit -m "comentario el que gustes"
git push

Pero para tenerlo tienes que tener GitHub instalado en tu pc, ya sea portable o completa.

Y desde ahí se enlaza directo a la página para la descarga.
Sino accede, les dejo el link.. clic aquí (ojo este enlace es para windows).

Y para poder actualizar los repositorios, hay que clonarlos.

git clone + (url que nos da <code>) https://github.com/Mittchhel/Mike-Salinas.git

Links