jueves, 8 de agosto de 2019

Banner con efecto de imagen fija

Desliza hacia abajo para ver el efecto en el banner




Aquí está el código para hacer este maravilloso efecto

<div style="width: 100%; height: 300px;  background-image: url(images/banner_movil.jpg); 
background-repeat: no-repeat;background-size: cover; background-attachment: fixed;">
   <h3 style="background: rgba(0,0,0,.3); height: 100%;"> </h3>
</div>

Si quieres ver este código funcionando haz click aquí LINK

Procesar un formulario de contacto sin recargar la página

Hola Arcanitos, despues de mucho tiempo vuelvo a escribir en mi blog.

En esta ocasión les voy a mostrar como procesar un formulario de contacto sin recargar la página Lo primero es crear un formulario de contacto, recuerden que en su HTML deben importar el código fuente de jquery (línea 3).
Yo hago los HTML super simples para no confundirlos con diseño, ustedes pueden hacerlo tan bello como quieran

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  </head>
  <body>
    <h2>Contáctanos</h2>
    <div id="mensaje"></div>
    <form method="post" action=""  id="formulario" name="contact">
        Nombre <br>
 <input type="text" id="nombre" name="nombre" placeholder="Tu nombre" /><br><br>
 Email<br>
 <input type="text" id="email"  name="email"  placeholder="Tu Email" /><br><br>
 Mensaje<br>
        <textarea id="texto_mail" name="texto_mail"  placeholder="Mensaje" rows="4" cols="40"></textarea><br><br>
        <div style="width: 150px; height: 40px; background-color:#3498db;" onclick="enviar_contacto()">Enviar</div>
    </form>  
  </body>
</html>

El siguiente paso es crear el javascript para tomar los datos del formulario y enviarlos a ser procesados. Serán procesados por un archivo PHP llamado "procesar_contacto.php", Como ya les he contado, para tomar el contenido de un input con jquery debemos hacerlo asi

nombre: $('#nombre').val()

Dentro de la funcion "$.post" ponemos todas la información que enviaremos al "procesar_contacto.php". Y por último las acciones a tomar cuando el PHP de procesamiento responda.
En este caso mostraremos un mensaje de "OK" y esconderemos el formulario.

<script>
  function enviar_contacto()
  {
    $.post(
        "procesar_contacto.php",
 {
           action:"enviar_mensaje",
    nombre: $('#nombre').val(),
    email: $('#email').val(),
    mensaje: $('#texto_mail').val(),
 },
 function(data, status)
 {
   if(status=='success')
   {
     var serverresponse = JSON.parse(data);
     console.log(serverresponse);
     if(serverresponse.data=='ok')
     {
  $('#mensaje').slideDown();
  $("#mensaje").text('Su mensaje será respondido a la brevedad');
  $("#formulario").slideUp();
     }
     else
     {
  $('#mensaje').slideDown();
  $("#mensaje").text('Intente nuevamente');
     }
   }
   else
   {
     $('#mensaje').slideDown();
     $("#mensaje").text("Tenemos un problema temporal, inténtalo más tarde...");
          }
 }
    );
  }
</script>
En el archivo "procesar_contacto.php", tomaremos las variables que enviamos desde la función anterior y conformaremos un mail (los $headers son para evitar que el email se vaya a spam o cosas asi). Luego, si el mail se envió correctamente devolveremos en modo de JSON un "ok" solamente como señal que funcionó bien.
<?php
$action = $_POST['action']; 
if($action=="enviar_mensaje") 
{ 
    $nombre  = $_POST['nombre']; 
    $email   = $_POST['email']; 
    $mensaje = $_POST['mensaje'];  
 
    $headers = "MIME-Version: 1.0\r\n";
    $headers .= "Content-type: text/html; charset=iso-8859-1\r\n";
    $headers = "From: easyparty@easyparty.cl\r\n";
    $headers .= "Reply-To: $email\r\n";
    $headers .= "Return-path: $email\r\n"; 
    $mensajenuevo='
 Nombre: '.$nombre.'
 Correo: '.$email.'

 ====== Mensaje ========
 '.$mensaje.'
 =======================
 ';

    if(mail("tumail@mail.com","Contacto desde tu web", $mensajenuevo,$headers))
    {
       $data = 'ok';
    } 
    else 
    {
 $data = 'no';
    }  
    $json = array('data' => $data);
    echo json_encode($json);
}
 

Si quieren probar que esto funciona pueden hacerlo haciendo click aquí LINK
Espero les sirva!!
saludos! :)

Cómo tomar contenido desde un input textarea con saltos de linea

A veces tenemos un input type="textarea" y la gente que lo rellena pone saltos de linea, bueno para recibir este valor y mantener los saltos de linea...
Es muy simple! solo antepone nl2br a tu funcion php para guardar el valor.

Asi
<?php
$mensaje = nl2br($_POST['mensaje']);
?>

lunes, 19 de diciembre de 2016

Hacer pagina que solo cargue el contenido

Hola Arcanitos, en esta ocasión les enseñaré mi forma de hacer que dentro de una página solo se cargue una vez el marco (banner, menu, footer, etc) y solo recargue el contenido según el link al que entramos. Por ejemplo en esta página:

(Pueden visitarla haciendo click aquí)
En la página del ejemplo al hacer click en cada ítem del menú, no va a recargar toda la página, solo recargara lo que esta dentro del div "contenido" o como quieran llamarle.

Ademas de ahorrar tiempos de cargas, es muy útil por si quieren hacer algún cambio en el marco (como les dije antes, menu, banner, footer, etc).
Si quieren hacer un cambio en el marco y no tienen este sistema implementado, tendrían que hacer el cambio en el código de todas las páginas que tengan. En cambio con este sistema lo hacen en el index.php y listo.

El código para esto es muy simple. Deben crear su página de "home" como cualquier otra que creen, luego dentro del div que tendrá el contenido deberán poner esto:


<div class="contenido">
    <?php
    if(!isset($_GET['id'])) 
    {
        ?><h1>Este es el home de la página</h1><?php
    }
    else if(file_exists($_GET['id'].".php")) 
    {
        $id = htmlspecialchars(trim($_GET["id"]));
        $id = eregi_replace("<[^>]*>","",$id) ;
        $id = eregi_replace(".*//","",$id) ;
        include("$id.php");
    } ?>
</div>


*Lo mas diferente es que al momento de crear el menú o de insertar links, deben poner una url un poquito mas larga, debe ser así:


<div class="menu">
    <img src="banner.png" style="height:90px;float:left;">
    <div onclick="location.href='index.php'" class="menu_blanco">HOME</div>
    <div onclick="location.href='index.php?id=empresa'" class="menu_blanco">EMPRESA</div>
    <div onclick="location.href='index.php?id=productos'" class="menu_blanco">PRODUCTOS</div>
    <div onclick="location.href='index.php?id=contacto'" class="menu_blanco">CONTACTO</div>
</div>


Dentro de los archivos "empresa.php", "productos.php", "contacto.php"; no deben poner nada del marco, solo la información que va en el contenido, por ejemplo el archivo "empresa.php" es asi de simple:


<h1>Empresa</h1>
 <p style="text-align:justify; padding: 50 50 50 50px;">Lorem ipsum dolor sit amet, 
 consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore 
 magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
 nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
 voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat 
 cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

miércoles, 7 de diciembre de 2016

Como hacer carrusel para banner de página

Hola amigos Arcanitos.

Siempre que quiero hacer un carrusel de fotos para el banner de una página web, tengo que buscar alguno en internet y siempre hay que descargarlo y son una lata.

En esta entrada les mostraré como hice un banner con fotos, las cuales van cambiando después de un cierto tiempo y además tiene flechitas para cambiarlas.

Es ideal que las imágenes tengan el mismo tamaño.

Es súper simple.
El HTML para esto quedará asi:



<body onload="cargar_banner();">
<div id="banner" style="margin:auto; width:100%; background-repeat:no-repeat; height:430px; background-position:center;" >
 <div style="width:5%;float:left; margin-top:150px; cursor:pointer;" onclick="slide('izq')">
            <img src="images/flecha_izq.png">
        </div>
 <div style="width:5%;float:right; margin-top:150px; cursor:pointer;" onclick="slide('der')">
            <img src="images/flecha_der.png">
        </div>
</div>
</body>

Las funciones que utilizaremos serán cargar "banner" y "slide".
Estas funciones se verán así.
(Nota: recuerden que estas funciones pueden ir en el mismo archivo HTML, recuerden tambien incluir la libería jquery antes de estas funciones)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>


<script>

var i = 0;
var arrImagenes = [ 'images/banner1.jpg','images/banner2.jpg', 'images/banner3.png' ];
function cargar_banner()
{
    $("#banner").css('backgroundImage', 'url('+arrImagenes[i]+')');
    var tiempo = 5000;
    var id_contenedor = 'banner';
    setInterval( cambiarImagenFondo, tiempo) 
}
 
function cambiarImagenFondo()
{
    if(i == arrImagenes.length-1)
    {
 i=0;
    }
    else
    {
 i=i+1;
    }
    $('#banner').fadeTo('slow', 0.3, function()
    {
 $(this).css('background-image', 'url(' + arrImagenes[i] + ')');
    }).fadeTo('slow', 1);
}

function slide(lado)
{
    if(lado == 'izq')
    {
 if(i == 0){ i = 2; }
 else{ i--; }
 $('#banner').fadeTo('slow', 0.3, function()
 {
            $(this).css('background-image', 'url(' + arrImagenes[i] + ')');
 }).fadeTo('fast', 1);
    }
    else
    {
 if(i == 2){ i = 0; }
 else{ i++; }
 $('#banner').fadeTo('slow', 0.3, function()
 {
            $(this).css('background-image', 'url(' + arrImagenes[i] + ')');
 }).fadeTo('slow', 1);
    }
}

</script>

Para ver funcionando este código hace click aquí

Gracias por leer, si te gustó déjame un comentario ^^

Crear slider de elementos que están en la BDD

Hola amigos Arcanitos!
En esta entrada, les mostraré como hacer un slider para mostrar, por ejemplo, productos de una página, o fotos o lo que sea.
El punto es que sacaremos estos elementos desde nuestra base de datos. El resultado quedará algo así:


*Nota: si no recuerdas como conectarse a una base de datos revisa este artículo

1) Crear el <div> correspondiente para este espacio de nuestra página.
2) Que al cargar la página se carguen los primeros 4 elementos
3) Que al presionar las flechas se invoquen mas elementos de la base de datos y vallan mostrándose.

Nuestra base de datos para el ejemplo será así:



Paso 1: El HTML para el div será asi:
(Nota: Es importante que en el tag <body> se debe agregar la acción "onload='cargar_slider()" para que al cargar la página se ejecute esa función. 
Nota 2: Es importante poner "id" a cada objeto que será usado por nuestra función javascript.)


<body onload="cargar_slider()">
<div style="background-color:#AED6F1;">
   <div id="productos" class="productos">
 <div class="flecha" onclick="cambiar_productos('izq')"><img src="images/flecha_izq.png"></div>
 <div class="producto" id="producto0" >
    <div class="producto_blanco"  style="cursor:pointer;" >
              <img width="190" style="max-height:210px;" id="prod0_b">
           </div>
    <div class="producto_abajo">
              <span style="padding-top:20px;"   id="prod0_a"></span>
           </div>
 </div>
 <div class="producto" id="producto1">
    <div class="producto_blanco" style="cursor:pointer;">
              <img width="190" style="max-height:210px;"  id="prod1_b">
           </div>
    <div class="producto_abajo">
              <span style="padding-top:20px;" id="prod1_a"></span>
        </div>
 </div>
 <div class="producto" id="producto2">
    <div class="producto_blanco" style="cursor:pointer;" >
              <img width="190" style="max-height:210px;" id="prod2_b">
           </div>
    <div class="producto_abajo">
              <span style="padding-top:20px;" id="prod2_a"></span>
           </div>
 </div>
 <div class="producto" id="producto3" >
    <div class="producto_blanco" style="cursor:pointer;">
              <img width="190" style="max-height:210px;"  id="prod3_b">
           </div>
    <div class="producto_abajo">
              <span style="padding-top:20px;" id="prod3_a"></span>
           </div>
 </div>
 <div class = "flecha" onclick="cambiar_productos('der')"><img src="images/flecha_der.png"></div>
   </div> 
</div>
</body>

El CSS de los estilos que usé es el siguiente:
(Nota: este pedazo de código puede estar en el mismo archivo HTML en que se encuentra el div creado anteriormente)

<style>
 .productos{
  width:1100px;
  height:350px;
  padding-top:50px;
  margin:auto; 
  font-size:20px; 
  text-align:left;
  display: table;
 }
 .producto{
  width: 20%;
  height: 220px;
  float:left;
 }
 
 
 
 .flecha{
  width: 10%;
  padding-top:100px;
  height: 150px;
  float:left;
  vertical-align:middle;
  text-align:center;
  cursor:pointer;
 }
 .producto_blanco{
  width: 200px;
  background-color: white;
  text-align:center;
  height:220px;
 }
 .producto_abajo{
  background-color: black;
  height: 30px;
  color:white;
  width: 200px;
  font-size:14px;
  text-align:center;
  vertical-align:middle;
  font-weight:bold;
  padding-top:10px;
 }

</style>

(odio los colores del highlighter pero el que usaba antes como que murió :c  )

Las funciones javascript que usaremos serán "cargar slider" y "cambiar slider" la primera no recibe ni un parámetro y la segunda recibe el "lado", si derecha o izquierda.

Recuerden agregar la libreria de jquery ya que lo usaremos para hacer llamadas con ajax.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

Las funciones script quedarán así: (Puede verse complicado pero no lo es, es simple, solo que queda largo porque lo haremos por la fuerza bruta XD)



var pos1=0;
var pos2=1;
var pos3=2;
var pos4=3;
function cargar_slider()
{
   $.post(
 "cargar_slider.php",
 {
           action:"cargar_slider"
 },
 function(data, status)
 {
    if(status=='success')
    {
  var serverresponse = JSON.parse(data);
  if(serverresponse.arreglo_id.length != 0)
  {
   $("#prod"+pos1+"_b").attr("src", "images/"+serverresponse.arreglo_foto[pos1]);
   $("#prod"+pos1+"_a").html(serverresponse.arreglo_producto[pos1]);
   $('#producto0').click(function() {
     window.location.href='detalle.php?producto='+serverresponse.arreglo_id[pos1]+'';
   });
   $("#prod"+pos2+"_b").attr("src", "images/"+serverresponse.arreglo_foto[pos2]);
   $("#prod"+pos2+"_a").html(serverresponse.arreglo_producto[pos2]);
   $('#producto1').click(function() {
     window.location.href='detalle.php?producto='+serverresponse.arreglo_id[pos2]+'';
   });
   $("#prod"+pos3+"_b").attr("src", "images/"+serverresponse.arreglo_foto[pos3]);
   $("#prod"+pos3+"_a").html(serverresponse.arreglo_producto[pos3]);
   $('#producto2').click(function() {
     window.location.href='detalle.php?producto='+serverresponse.arreglo_id[pos3]+'';
   });
   $("#prod"+pos4+"_b").attr("src", "images/"+serverresponse.arreglo_foto[pos4]);
   $("#prod"+pos4+"_a").html(serverresponse.arreglo_producto[pos4]);
   $('#producto3').click(function() {
     window.location.href='detalle.php?producto='+serverresponse.arreglo_id[pos4]+'';
   });
  }
    }
 }
   );
}

function cambiar_productos(lado)
{ 
   $.post(
 "cargar_slider.php",
 {
           action:"cargar_slider"
 },
 function(data, status)
 {
    if(status=='success')
    {
  //lo que se recibe desde "cargar_slider.php"
  var serverresponse = JSON.parse(data);
  if(lado == 'der')
  {
   if(pos4 == serverresponse.arreglo_id.length-1)
   {
    pos4=0;
    pos3=pos3+1;
    pos2=pos2+1;
    pos1=pos1+1;
   }
   else if(pos3 == serverresponse.arreglo_id.length-1)
   {
    pos3=0;
    pos4=pos4+1;
    pos2=pos2+1;
    pos1=pos1+1;
   }
   else if(pos1 == serverresponse.arreglo_id.length-1)
   {
    pos1=0;
    pos4=pos4+1;
    pos2=pos2+1;
    pos3=pos3+1;
   }
   else if(pos2 == serverresponse.arreglo_id.length-1)
   {
    pos2=0;
    pos4=pos4+1;
    pos3=pos3+1;
    pos1=pos1+1;
   }
   else
   {
    pos1 = pos1+1;
    pos2 = pos2+1;
    pos3 = pos3+1;
    pos4 = pos4+1;
   }
   
   $("#prod0_b").attr("src", "images/"+serverresponse.arreglo_foto[pos1]);
   $("#prod0_a").html(serverresponse.arreglo_producto[pos1]);
   //agrego la funcion que al hacer click en el producto se habra su información 
   $('#producto0').click(function() {
     window.location.href='detalle.php?producto='+serverresponse.arreglo_id[pos1]+'';
             });
   
   $("#prod1_b").attr("src", "images/"+serverresponse.arreglo_foto[pos2]);
   $("#prod1_a").html(serverresponse.arreglo_producto[pos2]);
   $('#producto1').click(function() {
     window.location.href='detalle.php?producto='+serverresponse.arreglo_id[pos2]+'';
   });
  
   $("#prod2_b").attr("src", "images/"+serverresponse.arreglo_foto[pos3]);
   $("#prod2_a").html(serverresponse.arreglo_producto[pos3]);
   $('#producto2').click(function() {
     window.location.href='detalle.php?producto='+serverresponse.arreglo_id[pos3]+'';
   });
   $("#prod3_b").attr("src", "images/"+serverresponse.arreglo_foto[pos4]);
   $("#prod3_a").html(serverresponse.arreglo_producto[pos4]);
   $('#producto3').click(function() {
     window.location.href='detalle.php?producto='+serverresponse.arreglo_id[pos4]+'';
   });
  }
  if(lado == 'izq')
  {      
   if(pos1 == 0)
   {
    pos1=serverresponse.arreglo_id.length-1;
    pos3=pos3-1;
    pos2=pos2-1;
    pos4=pos4-1;
   }
   else if(pos2 == 0)
   {
    pos2=serverresponse.arreglo_id.length-1;
    pos3=pos3-1;
    pos4=pos4-1;
    pos1=pos1-1;
   }
   else if(pos3 == 0)
   {
    pos3=serverresponse.arreglo_id.length-1;
    pos1=pos1-1;
    pos2=pos2-1;
    pos4=pos4-1;
   }
   else if(pos4 == 0)
   {
    pos4=serverresponse.arreglo_id.length-1;
    pos3=pos3-1;
    pos2=pos2-1;
    pos1=pos1-1;
   }
   else
   {
    pos1 = pos1-1;
    pos2 = pos2-1;
    pos3 = pos3-1;
    pos4 = pos4-1;
   }
   
   $("#prod0_b").attr("src", "images/"+serverresponse.arreglo_foto[pos1]);
   $("#prod0_a").html(serverresponse.arreglo_producto[pos1]);
   $('#producto0').click(function() {
     window.location.href='index.php?id=detalle&producto='+serverresponse.arreglo_id[pos1]+'';
   });
     
   $("#prod1_b").attr("src", "images/"+serverresponse.arreglo_foto[pos2]);
   $("#prod1_a").html(serverresponse.arreglo_producto[pos2]);
   $('#producto1').click(function() {
     window.location.href='index.php?id=detalle&producto='+serverresponse.arreglo_id[pos2]+'';
   });
     
   $("#prod2_b").attr("src", "images/"+serverresponse.arreglo_foto[pos3]);
   $("#prod2_a").html(serverresponse.arreglo_producto[pos3]);
   $('#producto2').click(function() {
     window.location.href='index.php?id=detalle&producto='+serverresponse.arreglo_id[pos3]+'';
   });
    
   $("#prod3_b").attr("src", "images/"+serverresponse.arreglo_foto[pos4]);
   $("#prod3_a").html(serverresponse.arreglo_producto[pos4]);
   $('#producto3').click(function() {
     window.location.href='index.php?id=detalle&producto='+serverresponse.arreglo_id[pos4]+'';
   });
  }
    }
      }
   );
}


3) El archivo que procesará la respuesta de estas funciones anteriores, es decir "cargar_slider.php", será de la siguiente forma:
(Nota: "json_encode" lo uso como forma de enviar de forma ordenada los arreglos que enviaré de vuelta como respuesta.)


<?php
include("config.php");

$action = $_POST['action'];
if($action == "cargar_slider")
{
 $arreglo_foto = Array();
 $arreglo_id = Array();
 $arreglo_producto = Array();
 $arreglo_id = Array();
 $sql = mysqli_query($link, "select * from Productos");
 while($row = mysqli_fetch_array($sql))
 {
  array_push($arreglo_foto, $row['foto']);
  array_push($arreglo_id, $row['id_producto']);
  array_push($arreglo_producto, $row['producto']);
 }
 $json = array('arreglo_foto' => $arreglo_foto, 'arreglo_id' => $arreglo_id, 'arreglo_producto' => $arreglo_producto );
 echo json_encode($json);
}

Si tienes cualquier duda escríbeme, si te sirvió este artículo también recuerda dejar un comentario ^^

Si quieres ver este código en funcionamiento haz click aquí,

Haciendo click aquí podrás ver el código completo del archivo html con el css y las funciones javascript incluídas.