Login estilo Hotmail con HTML, CSS y Javascript

En este tutorial se muestra como diseñar un formulario de login estilo Hotmail, haciendo uso de HTML, CSS y Javascript puro, aplicando efectos tipo slider.

Descarga el proyecto desde el siguiente link y no olvides darle clic a la publicidad del sitio para apoyar con más contenido gratuito 😉

DESCARGAR AQUÍ

Procedimientos Almacenados en MySQL

Procedimiento Almacenado (Stored procedure)

Es un segmento de código que puede ejecutar varios procesos y que devuelve una serie de resultados.

Ventajas

Desventajas


Recursos


Temario del curso

Procedimientos Almacenados
CLASE 1
Crear Base de Datos en MySQL
CLASE 2
Relacionar tablas en MySQL
CLASE 3
Instruccion ALTER Y DROP en MySQL
CLASE 4
INSERTAR DATOS EN UNA TABLA RELACIONAL MYSQL (INSTRUCCIÓN INSERT)
CLASE 5
Instrucción select en MySQL
CLASE 6
Instrucción select en MySQL
CLASE 7
Instrucción select en MySQL
CLASE 8
Extraer registros de tablas diferentes ( (SELECT WHERE, LIMIT, INNER JOIN en MYSQL)
CLASE 9
Actualizar y Eliminar Registros en MySQL
CLASE 10
Extraer Registros con Stored Procedure de MySQL
CLASE 11
Extraer Un Registro con Stored Procedure en MySQL
CLASE 12
Buscar Registros Con Stored Procedure en MySQL
CLASE 13
Insertar registros
CLASE 14
Stored Precedure en MySQL (Actualizar Registros)
CLASE 15
Eliminar registros
CLASE 16

Conectar PHP con MySQL - MVC y POO
CLASE 17
Integrar Bootstrap 5 en PHP, MVC y POO
CLASE 18
19 Configurar Template HTML en PHP, MVC y POO
CLASE 19
Formulario Registro
CLASE 20
Alert Personalizado
CLASE 21
Configurar Controladores y Modelos  MVC, PHP y MySQL
CLASE 22
Ejecutar Procedimiento Almacenado de MySQL en PHP, MVC y POO
CLASE 23
EXTRAER INFORMACIÓN POR AJAX CON ASYNC-AWAIT EN JAVASCRIPT, PHP, MVC
CLASE 24
Botones de Acción con JavaScript, PHP, MVC y POO
CLASE 25
Enviar Datos por AJAX desde Fromulario HTML
CLASE 26
Guardar Datos con Procedimiento Almacenado en MySQL y PHP
CLASE 27
Extraer Datos por AJAX y Mostrar en un Formulario HTML
CLASE 28
Editar Registros con Procedimiento Almacenado en MySQL y PHP
CLASE 29
CLASE 30
Buscador por AJAX Con PHP, MVC y MySQL
CLASE 31
Buscador por AJAX Con PHP, MVC y MySQL
CLASE 32
CLASE 33
Buscador por AJAX Con PHP, MVC y MySQL
CLASE 34

Integración de script para carga de imagen en formulario HTML con Javascript puro.

Copiar y pegar el HTML donde se mostrará la foto.

<div class="photo">
    <label for="foto">Foto (570x380)</label>
    <div class="prevPhoto">
      <span class="delPhoto notBlock">X</span>
      <label for="foto"></label>
      <div>
        <img id="img" src="<?= media(); ?>/images/portada_categoria.png">
      </div>
    </div>
    <div class="upimg">
      <input type="file" name="foto" id="foto">
    </div>
    <div id="form_alert"></div>
</div>

Copiar y pegar los estilos en el archivo con extensión CSS del proyecto donde se insertará la foto.

.prevPhoto {
    display: flex;
    justify-content: space-between;
    width: 300px;
    height: 200px;
    border: 1px solid #CCC;
    position: relative;
    cursor: pointer;
    background: url(../images/portada_categoria.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    margin: auto;
}
.prevPhoto label{
	cursor: pointer;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
}
.prevPhoto img{
	width: 100%;
	height: 100%;
}
.upimg, .notBlock{
	display: none !important;
}
.errorArchivo{
	font-size: 16px;
	font-family: arial;
	color: #cc0000;
	text-align: center;
	font-weight: bold; 
	margin-top: 10px;
}
.delPhoto{
	color: #FFF;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
	width: 25px;
	height: 25px;
	background: red;
	position: absolute;
	right: -10px;
	top: -10px;
	z-index: 10;
}
#tbl_list_productos img{
	width: 50px;
}
.imgProductoDelete{
	width: 175px;
}

Copiar y pegar el código Javascript en el archivo de funciones del proyecto donde se integrará la foto.

if(document.querySelector("#foto")){
    var foto = document.querySelector("#foto");
    foto.onchange = function(e) {
        var uploadFoto = document.querySelector("#foto").value;
        var fileimg = document.querySelector("#foto").files;
        var nav = window.URL || window.webkitURL;
        var contactAlert = document.querySelector('#form_alert');
        if(uploadFoto !=''){
            var type = fileimg[0].type;
            var name = fileimg[0].name;
            if(type != 'image/jpeg' && type != 'image/jpg' && type != 'image/png'){
                contactAlert.innerHTML = '<p class="errorArchivo">El archivo no es válido.</p>';
                if(document.querySelector('#img')){
                    document.querySelector('#img').remove();
                }
                document.querySelector('.delPhoto').classList.add("notBlock");
                foto.value="";
                return false;
            }else{  
                    contactAlert.innerHTML='';
                    if(document.querySelector('#img')){
                        document.querySelector('#img').remove();
                    }
                    document.querySelector('.delPhoto').classList.remove("notBlock");
                    var objeto_url = nav.createObjectURL(this.files[0]);
                    document.querySelector('.prevPhoto div').innerHTML = "<img id='img' src="+objeto_url+">";
                }
        }else{
            alert("No selecciono foto");
            if(document.querySelector('#img')){
                document.querySelector('#img').remove();
            }
        }
    }
}

if(document.querySelector(".delPhoto")){
    var delPhoto = document.querySelector(".delPhoto");
    delPhoto.onclick = function(e) {
        removePhoto();
    }
}

function removePhoto(){
    document.querySelector('#foto').value ="";
    document.querySelector('.delPhoto').classList.add("notBlock");
    document.querySelector('#img').remove();
}

Accede al curso Premium

https://cutt.ly/WfUUHo2

A continuación se muestra como crear una Slider o Carrusel de Imagenes Responsive haciendo uso de HTML5, CSS3 y JavaScript puro.

Para integrar el slider o carrousell de imagenes sigue los siguientes pasos:

En el head de la página donde tendrás el slider, agrega la dirección del archivo style.css, como se muestra a continuación. (la ruta depende de la ubicación del archivo style.css).

<link rel="stylesheet" href="style.css">

En el footer del archivo donde tendrás el slider, agrega las siguientes líneas de código.

<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<script defer src="functions.js"></script>

Copia y pega el siguiente html en la pagina donde quieres integrar el slider.

<section id="container-slider">	
   <a href="javascript: fntExecuteSlide('prev');" class="arrowPrev"><i class="fas fa-chevron-circle-left"></i></a>
   <a href="javascript: fntExecuteSlide('next');" class="arrowNext"><i class="fas fa-chevron-circle-right"></i></a>
   <ul class="listslider">
     <li><a itlist="itList_0" href="#" class="item-select-slid"></a></li>
     <li><a itlist="itList_1" href="#"></a></li>
     <li><a itlist="itList_2" href="#"></a></li>
   </ul>
   <ul id="slider">
     <li style="background-image: url('https://cdn.pixabay.com/photo/2020/04/15/11/20/telework-5046230_1280.jpg'); z-index:0; opacity: 1;">
       <div class="content_slider" >
         <div>
           <h2>Emprendimiento empresarial</h2>
	   <p>Descubra en qué consiste el emprendimiento empresarial por medio de 5 estrategias fundamentales.</p>
	   <a href="#" class="btnSlider">Ver más</a>
	 </div>
       </div>
     </li>
     <li style="background-image: url('https://cdn.pixabay.com/photo/2018/02/20/10/28/business-3167295_960_720.jpg'); ">
       <div class="content_slider" >
         <div>
           <h2>Negocios</h2>
	   <p>Recursos, guías, herramientas y consejos para emprender, crear tu empresa o iniciar un negocio exitoso</p>
	   <a href="#" class="btnSlider">Ver más</a>
	 </div>
       </div>
     </li>
     <li style="background-image: url('https://cdn.pixabay.com/photo/2015/07/17/22/42/typing-849806_960_720.jpg'); ">
       <div class="content_slider" >
         <div>
           <h2>Estrategias de negocio</h2>
	   <p>Las estrategias de negocio representan planes o métodos...</p>
	   <a href="#" class="btnSlider">Ver más</a>
	 </div>
       </div>
     </li>
  </ul>
</section>

Debes sustituir la url de las imágenes por las tuyas.

En el archivo style.css pega los siguiente estilos, si ya tienes un archivo de estilos puedes pegarlos allí.

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
#container-slider
{
    position: relative;
    display: block;
    width: 100%;
}
#slider {
    position: relative;
    display: block;
    width: 100%;
    height: 100vh;
    min-height: 500px;
}
#slider li {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100%;
    height: 100%;
    display: block;
    -webkit-transition: opacity 1s;
    -moz-transition: opacity 1s;
    -ms-transition: opacity 1s;
    -o-transition: opacity 1s;
    transition: opacity 1s;
    z-index: -1;
    opacity: 0;
}
#container-slider .arrowPrev, #container-slider .arrowNext{
    font-size: 30pt;
    color: rgba(204, 204, 204, 0.65);
    cursor: pointer;
    position: absolute;
    top: 50%;
    left: 50px;
    z-index: 2; 
}
#container-slider .arrowNext {
    left: initial;
    right: 50px !important;
}
.content_slider{
    padding: 15px 30px;
    color: #FFF;
    width: 100%;
    height: 100%;
}
.content_slider div{
    text-align: center;
}
.content_slider h2{
    font-family: 'arial';
    font-size: 30pt;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 20px;
}
.content_slider p {
    font-size: 15pt;
    font-family: 'arial';
    color: #FFF;
    margin-bottom: 20px;
}
#slider li .content_slider{
    background: rgba(0, 0, 0, 0.50);
    padding: 10px 125px;
}
.content_slider{
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: center;
    align-items: center;
}
.btnSlider{
    color: #FFF;
    font-size: 15pt;
    font-family: 'arial';
    letter-spacing: 1px;
    padding: 10px 50px;
    border: 1px solid #CCC;
    background: rgba(13, 13, 13, 0.55);
    border-radius: 31px;
    text-decoration: none;
    transition: .5s all;
}
.btnSlider:hover{
    background: #111;
    border: 1px solid #111;
}
.listslider {
    position: absolute;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: space-between;
    align-items: center;
    left: 50%;
    bottom: 5%;
    list-style: none;
    z-index: 2;
    transform: translateX(-50%);
}
.listslider li {
    border-radius: 50%;
    width: 10px;
    height: 10px;
    cursor: pointer;
    margin: 0 5px;
}
.listslider li a {
    background: #CCC;
    border-radius: 50%;
    width: 100%;
    height: 100%;
    display: block;
}
.item-select-slid {
    background: #FFF  !important;
}

@media screen and (max-width: 460px){
	.content_slider h2 {
	    font-size: 15pt !important;
	}
	.content_slider p {
	    font-size: 12pt !important;
	}
	#container-slider .arrowPrev, #container-slider .arrowNext{
		font-size: 20pt;
	}
	#container-slider .arrowPrev{
		left: 15px;
	}
	#container-slider .arrowNext{
		right: 15px !important;
	}
	#slider{
		height: 400px;
		min-height: 400px;
	}
	#slider li .content_slider{
		padding: 10px 35px;
	}
	.btnSlider{
		padding: 10px 30px;
    	font-size: 10pt;
	}

}

En el archivo functions.js pega el siguiente código js que se creo anteriormente, si ya tienes un archivo de funciones debes colocarlo allí.


if(document.querySelector('#container-slider')){
   setInterval('fntExecuteSlide("next")',5000);
}
//------------------------------ LIST SLIDER -------------------------
if(document.querySelector('.listslider')){
   let link = document.querySelectorAll(".listslider li a");
   link.forEach(function(link) {
      link.addEventListener('click', function(e){
         e.preventDefault();
         let item = this.getAttribute('itlist');
         let arrItem = item.split("_");
         fntExecuteSlide(arrItem[1]);
         return false;
      });
    });
}

function fntExecuteSlide(side){
    let parentTarget = document.getElementById('slider');
    let elements = parentTarget.getElementsByTagName('li');
    let curElement, nextElement;

    for(var i=0; i<elements.length;i++){

        if(elements[i].style.opacity==1){
            curElement = i;
            break;
        }
    }
    if(side == 'prev' || side == 'next'){

        if(side=="prev"){
            nextElement = (curElement == 0)?elements.length -1:curElement -1;
        }else{
            nextElement = (curElement == elements.length -1)?0:curElement +1;
        }
    }else{
        nextElement = side;
        side = (curElement > nextElement)?'prev':'next';

    }
    //RESALTA LOS PUNTOS
    let elementSel = document.getElementsByClassName("listslider")[0].getElementsByTagName("a");
    elementSel[curElement].classList.remove("item-select-slid");
    elementSel[nextElement].classList.add("item-select-slid");
    elements[curElement].style.opacity=0;
    elements[curElement].style.zIndex =0;
    elements[nextElement].style.opacity=1;
    elements[nextElement].style.zIndex =1;
}

Listo, puedes probar en el navegador.

VER DEMO

Comenta y comparte.

Gracias!

Desarrollo Web en PHP, MVC, POO y MySQL – Tienda Virtual

Bienvenido al Curso de PHP donde aprenderás a desarrollar Sistema Web bajo la arquitectura MVC (Modelo Vista Controlador) con POO (Programación Orientada a Objetos) de una forma práctica y sencilla.

Durante el curso aprenderás PHP, conceptos de POO de forma práctica paso a paso para desarrollar un framework con MVC, implementación y manejo de rutas amigables.

Durante este curso aprenderás las siguientes tecnologías:

  1. HTML
  2. CSS
  3. PHP
  4. jQuery
  5. Javascript puro
  6. AJAX
  7. JSON
  8. MySQL
  9. API Paypal

Durante este curso aprenderás a desarrollar proyectos reales que te servirán como base para implementar cualquier proyecto de acuerdo a requerimientos.

Proyectos a desarrollar:

  1. Diseño y desarrollo Sistema de Usuarios con Roles y Permisos el cual se pude implementar en cualquier proyecto.
  2. Sistema administrativo para una Tienda Virtual o Tienda en Línea.
  3. Tienda en Línea con pasarela de pagos de Paypal.

El código fuente de cada sección estará disponible para su descarga de tal forma que podrás compararlo con el de tu proyecto y verificar posibles errores.

Tienda Virtual

Inscríbete dando CLIC AQUÍ

Q.135 Comprar Ahora

Saludos =)

Celebración 10k

Documentación Plugin Chat

https://developers.facebook.com/docs/messenger-platform/discovery/customer-chat-plugin/?translation

Fontawesome (Iconos)

https://fontawesome.com/

HTML Chat WhatsApp

<a id="app-whatsapp" target="_blanck" href="https://api.whatsapp.com/send?phone=50200000&amp;text=Hola!&nbsp;me&nbsp;pueden&nbsp;apoyar?">
     <i class="fab fa-whatsapp"></i>
</a>

HTML Chat Messenger

<a id="app-messenger" target="_blanck" href="https://m.me/abelosh">
    <i class="fab fa-facebook-messenger"></i>
</a>

Estilos iconos WhatsApp y Messenger

#app-messenger, #app-whatsapp{
	position: fixed;
	right: 24px;
	bottom: 25px;
	width: 60px;
	z-index: 1000;
	display: none;
}
#app-whatsapp{
	bottom: 95px;
	display: block;
}
#app-messenger i, #app-whatsapp i{
	font-size: 63px;
}
#app-whatsapp i{
	color: #1ebea5;
}
#app-messenger i{
	color: #0084ff;	
}

Estilos Media Queries

@media screen and (max-width: 766px){
	#fb-root{
		display: none;
	}
	#app-messenger{
		display: block;
	}
}