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 😉
Es un segmento de código que puede ejecutar varios procesos y que devuelve una serie de resultados.
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
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.
Comenta y comparte.
Gracias!
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:
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:
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.
Saludos =)
Documentación Plugin Chat
https://developers.facebook.com/docs/messenger-platform/discovery/customer-chat-plugin/?translation
Fontawesome (Iconos)
HTML Chat WhatsApp
<a id="app-whatsapp" target="_blanck" href="https://api.whatsapp.com/send?phone=50200000&text=Hola! me pueden 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;
}
}