Jquery

Que es ser un Front End?

Nadie logra lo que quiere rindiendose
Share on LinkedInShare on FacebookTweet about this on TwitterShare on Google+

Que es ser un Front End?, Como ser un Ninja Front End? Y como llegar a ser el mejor Front End?

Son preguntas que al inicio de todo nos hemos preguntamos en algún punto. Si tú al igual que yo te apasiona la web quédate a leer esto te interesará.

La pasión nos conlleva a realizar muchas cosas como por ejemplo dejar de lado unas para hacer otras quizás nuevas o centrarse en una. Esto nos trae la búsqueda de la perfección y la dualidad cognitiva pues como empezó muchos terminan, rápido y fugaz. Ya que luego de un tiempo te pasara que has aprendido mucho y aun te falta mucho más, aunque tratas y pasa el tiempo sigue ocurriendo el mismo escenario pues cuando piensas alcanzar la meta esta se aleja hasta dejarte a una distancia aproximada al punto inicial. La dualidad cognitiva nos llevara a la decepción, percepción equivoca de que perdimos el tiempo y debimos hacer otra cosa, renegaremos, algunos lloraran y otro más locos se reirán de ya no saber qué hacer.

En todos estos escenarios el individuo ha perdido el porqué de que iniciara esto “La Pasión”.

Al parecer la pasión como todo se acaba y ellos perdieron el punto de enfoque y se estancaran, pero tú no, porque? Pues simple, estás leyendo esto.

 

Un Front End apasionado nunca vera un reto como reto sino como una nueva forma de andar, nunca caerá solo tropezará y nada será tan alto pues con algunos trucos y funciones se creara una cascada de ideas que juntas aran el escalón para pasar tal altitud.

Tu que estas desarrollando nunca olvides que esto al igual que tu primer amor inició con pasión y ella no te dejara sino tu a ella a la medidas que la cosa se ponga difícil.

Recuerda la adversidad no está para que te rindas sino para medir tu fortaleza y tus ganas de superarlas, Murieron las tablas y pasamos a div con floats, pues genial; Murió el float paso a display, pues grandioso; muere display empezamos las grillas, valla valla se mesclaron y salió mejor aún; se modifica y nace Flex, nunca te rindas pues a la medida que lo hagas serás uno de los que perdieron o vivieron seguir viviendo con su pasión.

 

Nunca dejes de leer lo que te gusta, no dejes de informarte y recuerda nunca se sabe todo.

Te dejo unos links de ayuda para tu evolución a un Front End o un Ninja Front End o mejor aún el Mejor Front End.

 

http://tympanus.net/codrops/css_reference/

http://tympanus.net/codrops/collective/

Share on LinkedInShare on FacebookTweet about this on TwitterShare on Google+
Read more

Obtener el ancho y el alto del navegador con jquery

jquery-logo
Share on LinkedInShare on FacebookTweet about this on TwitterShare on Google+

how-to-find-browser-window-width-or-browser-window-height-jqueryLas tendencias en diseño hace que cada vez los desarrolladores (nosotros) deben crear capas que ocupen el 100% del ancho y el 100% del alto que se te pude volver un drama pero en este articulo te enseño lo facil que resulta hacer esto.

Jquery sin duda alguna nos facilita la vida y esta vez con una 2 funciones basicas de dicha libreria nos brindara las la medida del alto y ancho del navegador .width() y .height()    pero ahora de que sacamos el alto y el ancho? del document o window?  llego a este punto y  pueda que lo tengan claro pero quiero dejar esto claro para que no quede duda alguna. document nos brindara la medida de todo el contenido del html entonces no es lo que necesitamos y window nos da la medida que tiene el navegador/ browser y a fin de cuenta es toda la pantalla que muestra al abrir la pagina asi q esto si calza a nuestro requerimiento que tenemos.

listo!! entonces obtenemos el alto y ancho del navegador

width=$(window).width();
height=$(window).height();

ahora que hago?… ok ya tenemos el alto y ancho entonces asumimos que nuestra web tendra varias secciones para abajo y estaran en la etiqueta section. las medidas que obtuvimos debemos darle al section. ya teniendo en claro el caso crearemos una funcion que le de la medida al section.

function section()
{
    width=$(window).width();
    height=$(window).height();
    $("section").width(width).height(height);
}
$(document).ready(function(){
    section(); 
})

Con esto ya tienes todo listo para tener tu section con el alto y ancho del navegador Pero que sucede si comienzan a cambiar de tamaño? todo se veria mal y la solucion es simple pero eficaz.

$(window).resize(function(){
    section(); 
})

Y es asi como tienes un codigo simple y limpio para tus desarrollos espero que te sirva este articulo.

Share on LinkedInShare on FacebookTweet about this on TwitterShare on Google+
Read more

Crear animacion en bucle con jquery

Share on LinkedInShare on FacebookTweet about this on TwitterShare on Google+

jquery_logoJquery nos facilita hacer las animaciones y ya lo hable en un articulo anterior animacion jquery pero hay animacion que queremos que sea un bucle que sea infinito y si viste el primer articulo veras que no es nada dificil solo debemos saber 1 funcion nativa de javascript pero aqui puede haber un poco de confucion por que javascript tienen 2 funciones para menejar eventos que se ejecutan en cierto tiempo y he hecho en tu proceso de aprendisaje ya lo habras visto en algun momento hablo de setTimeout  setInterval aun que sus nombre ya nos da una idea.

un poco de definicion de ambas funciones.

setTimeout
ejecuta un codigo despues de un tiempo indicado una vez.
setInterval
ejecuta un codigo en intervalos de un tiempo que le indicamos.

entonces la funcion que nos ayudara para nuestra animacion es setInterval y con esto podemos hacer muchas cosas por ejemplo vamos hacer un ejemplo basico de un bucle.

< script src="https://code.jquery.com/jquery-1.10.1.min.js">
div{
	width:100px;
	height:100px;
	background:red;
}
< div>

 

aqui comenzamos con una animacion de un movimiento que a estas alturas ya lo deben saber hacer ejemplo 1

$(document).ready(function(){
$("div").animate({marginLeft:100},2000)
})

aqui aprovechamos el callback para hacer un 2do movimiento pero vamos agregarle un estilo de movimiento con un plugins “jQuery Easing Plugin” que esto ya les habia mencionado en el articulo anterior y lo habia puesto en un ejemplo pero aqui les detallo mejor en este ejemplo en particular uso el estilo “easeInOutBounce” pero hay varios ya es cuestion que prueben y ver cual les gusta o se adapte a la animacion que requieren ejemplo 2

$(document).ready(function(){
$("div").animate({marginLeft:100},2000,"easeInOutBounce",function(){
   //como ya estamos dentro podemos hacer referencia del elemento como this
   $(this).animate({marginTop:100},2000,"easeInOutBounce")
})
})

si es que no les salio debe ser pro que aun no agregaron la libreria

< script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js">

entonces si hacemos uso del callback 3 podemos hacer llegar el cuadrado al punto de inicio (pueden cambiar en cada animate el estilo de movimiento en mi ejemplo no lo aplico pero si es permitido) ejemplo 3

$(document).ready(function(){
$("div").animate({marginLeft:100},2000,"easeInOutBounce",function(){
   //como ya estamos dentro podemos hacer referencia del elemento como this
   $(this).animate({marginTop:100},2000,"easeInOutBounce",function(){
 
   		$(this).animate({marginLeft:0},2000,"easeInOutBounce",function(){
   			$(this).animate({marginTop:0},2000,"easeInOutBounce")   	
   		})
 
   })
})
})

Bueno llegamos al punto donde realmente vamos a ver como hacer que este elemento este en un bucle dando vuelvas y es simple. ejemplo 4

var vueltas= function (){
$("div").animate({marginLeft:100},2000,"easeInOutBounce",function(){
   //como ya estamos dentro podemos hacer referencia del elemento como this
   $(this).animate({marginTop:100},2000,"easeInOutBounce",function(){
 
   		$(this).animate({marginLeft:0},2000,"easeInOutBounce",function(){
   			$(this).animate({marginTop:0},2000,"easeInOutBounce")   	
   		})
 
   })
})
}
$(document).ready(function(){
    vueltas();
    setInterval("vueltas()",8000);
})

aqui hay un punto importante que deben tener muy en cuenta al setInterval le indicamos 8 segundos y por que? no es por que se me ocurrio si no que la animacion que hicimos dura 8 segundos si es que no te diste cuenta con 4 movimientos y cada movimiento dura 2 segundos entonces debemos hacer que se vuelva ejecutar la funcion vueltas cuando termine la vuelta y eso seria 4*2 = 8 segundos. ademas te diste cuenta que no corre al cargar la pagina si no esperamos 8 segundos pero para hacer que comienze en la primera carga es simplemente llamar la funcion vuelvas.

Optimizar bucle de animacion Jquery

la forma que indico arriba funciona perfectamente pero hay un detalle que en algun momento va consumir muchos recursos y hasta colgar el navegador y para eso hay una variacion y usando ahora setTimeout
a nuestra funcion vueltas lo metemos dentro de otra funcion que la llamaremos bucle entonces hacemos que cuando el documento este listo llame a bucle y al entrar al bucle llamamos a vuelas que tiene el efecto y sabemos que el efecto dura 8 segundos entonces hacemos que setTimeout a los 8 segundos se llame asi misma haciendo un bucle y cual es la ventaja? o como esto conviene? simple que setInterval al ejecutarlo siempre esta abierto y esto hace que consuma memoria pero setTimeout como ya lo defini en la parte superior solo cumple su proceso y muere pero claro nosotros hacemos que este en una funcion que se auto llama.

bucle = function()
{
    vueltas();
    setTimeout("bucle();",8000)
 
}
$(document).ready(function(){
    bucle() ;
})

seguro ya con esto podran hacer mejores animaciones y amplir su vision para el uso de animate.

Share on LinkedInShare on FacebookTweet about this on TwitterShare on Google+
Read more

Como crear animaciones con jquery

Share on LinkedInShare on FacebookTweet about this on TwitterShare on Google+

jquery_logoJquery realmente nos da una tremenda ayuda con su function animate para crear diversos efectos y animaciones desde basicas como complejas. Ya el uso de flash es una practica desde ya muchos años atras por motivos que hable ya en un articulo anterior por que no usar flash y eso por eso que tomo mucho peso el uso de javascript para las animaciones que en algun tiempo lo hizo flash.

Jquery es el framework mas usado en proyectos web y personalmente es el framework que uso y este articulo sera basado con jquery y para comenzar debes saber:

Que es un callback?

quiere decir “una devolución de llamada o retrollamada” y nos sirve para correr alguna funcion cuando termine un proceso previo.

animate de jquery tiene un callback que nos servira para el desarrollo en la animacion entonces esta es la estructura.

$("elemento").animate({marginTop:100},1000,function(){
/*colocas tus instrucciones que se ejecutaran al terminar la animacion*/
})

explico el codigo que primero seleccionado a la etiqueta del html con nombre elemento y le pasamos animate con una instruccion que es darle un margin top de 100px con una velocidad de 1 segundo (se trabaja en milisegundos) y esa funcion que vez al final es el llamado callback.

entonces en la parte donde indicamos el margin top es la parte donde podemos agregar todo el css para que se realize la animacion y vamos hacer un ejemplo basico que seria que se mueva un cuadro que creamos con css pero esto sucedera cuando cargue el DOM.

#cuadrado{
 width:200px;
 height:200px;
 background:red;
}
< div id="cuadrado">< /div>

entonces al darle 100 pixeles a la izquierda y nos da el efecto del movimiento a la derecha

$(document).ready(function(){
 
  $("#cuadrado").animate({marginLeft:100},2000)
 
})

ahora al ejemplo anterior implementamos el callback

$(document).ready(function(){
 
  $("#cuadrado").animate({marginLeft:100},2000,function(){
    console.log('al terminar el movimiento esto se va a imprimir')
  })
 
})

y aprovechamos el callback para que al finalizar realize otro movimiento pero bajando la velocidad y esto va hacer 2 movimientos fluidos

$(document).ready(function(){
 
  $("#cuadrado").animate({marginLeft:100},2000,function(){
     $(this).animate({marginTop:100},1000)
  })
 
})

ahora puedes seguir haciendo el movimiento n veces usando un callback despues de otro

$(document).ready(function(){
 
  $("#cuadrado").animate({marginLeft:100},2000,function(){
     $(this).animate({marginTop:100},1000,function(){
        /*puedes colocar n veces animate*/
     })
  })
 
})

 

hasta aqui es lo tipico y comun que enseñan pero vamos hacer otros ejemplos que nos ayuden a comprender mejor y abra nuestra mente de la potencia.

hace un tiempo me pidieron hacer un efecto en un intro con javascript y que es esta web http://piaverme.com y lo explico paso a paso como lo hice para que tengan mejor idea de como usarlo en un momento real de desarrollo.

tenemos en el html

< a href="inicio.php">< img src="images/logo-intro.png" id="logo-intro" />< /a>
< div id="linea1">< /div>
< div id="linea2">< /div>
< div id="linea3">< /div>
< div id="linea4">< /div>

a las lineas no le damos el ancho aun pero sera necesario por que cuando es position absolute es obligatorio colocarlo pero eso lo capturamos con javascript

img#logo-intro {
  position: absolute;
  bottom: 150px;
  left: 50%;
  margin-left: -256px;
}
div#linea1 {
  width: 3px;
  position: absolute;
  background: #fff;
}
div#linea2 {
  width: 3px;
  position: absolute;
  background: #fff;
}
div#linea3 {
  width: 3px;
  position: absolute;
  background: #fff;
}
div#linea4 {
  width: 3px;
  position: absolute;
  background: #fff;
}

ahora para que pase el efecto que los elementos entren es simple pero debes hacer que esten fuera las lineas pero antes como habia comentado en arriba vamos a dar la medida del ancho que tiene las lineas pero para que sea el efecto que ocupe el 100% del browser lo capturamos por javascript y por que no con css? simple por que esta en posicion absoluta y por defecto no va a ocupar el 100% y por que no colocamos la medidas del ancho por que estarias trabajando con 1 medida pero recuerda que sera visto por varios monitores con distintas medidas.

$(document).ready(function(){
/*primero vamos a obtener la posicion del logo  que nos devuelve el top y el left del elemento*/
posicion=$("#logo-intro").position(); 
/*esta parte ya no la explicare ya que puede llegar extenso y no es el punto realmente pero basicamente esto hace que las 4 lineas esten ubicadas fuera del browser y en la posicion adecuada para entrar luego con animate*/
$("#linea1").css({"width":$(window).width(),"left":-($(window).width()),"top":posicion.top})
$("#linea2").css({"width":$(window).width(),"left":$(window).width()*2,"top":posicion.top-212})
$("#linea3").css({"height":$(window).height(),"left":posicion.left-256,"top":-($(window).height())})
$("#linea4").css({"height":$(window).height(),"left":posicion.left+256,"top":$(window).height()*2})
})

ya teniendo ordenado los elementos hacemos el efcto de las entradas.

/*hacemos que funcione el efecto cuando todo las peticiones este cargadas*/
$(window).load(function(){
    $("#linea1").animate({"left":"0"},2000,"easeInOutCubic",function(){
        $("#linea2").animate({"left":"0"},1000,"easeInOutCubic")
    })
    $("#linea3").animate({"top":"0"},2000,"easeInOutCubic",function(){
        $("#linea4").animate({"top":"0"},1500,"easeInOutCubic")
    })
})

aqui empleamos los callback y ademas podemos ver que juego con las velocidades pero adicionalmente he agregado un atributo a la funcion pero si no lo colocas por defecto ya tiene uno pero jquery tiene unos cuantos tipos de efectos de movimientos entonces para ampliar estos movimientos puedes agregar a tu proyecto un plugins “jQuery Easing” que hace que podamos usar mas movimientos.

Share on LinkedInShare on FacebookTweet about this on TwitterShare on Google+
Read more

Crear un autocompletar en jquery

Screenshot_2
Share on LinkedInShare on FacebookTweet about this on TwitterShare on Google+

En ocasión tenemos mucha data que cargar en un select que nos inclinamos por usar un autocompletar y de hecho podemos encontrar varios pero no siempre se amoldan a nuestras necesidades y modificarlos puede llegar a dar dolor de cabeza.

Para los reacios que no quieren ver las ventajas aquí les dejo unas.

  1. Velocidad para mejorar tu SEO
  2. Facilidad de Búsqueda UX
  3. Diseño más atractivo de UI

A continuación voy hacer un ejemplo paso a paso de cómo se crea uno en jquery y php.

aqui el html con lineas comentadas explicando

 
<!DOCTYPE html> 
<html>
    <head>
        <title>atocompletar</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <!--formulario del autocompletar-->
        <form method="post">
            <!--aqui escribimos el nombre de departamento y activa el autocompletar-->
            <input type="text" name="departamentos" id="departamentos" />
            <!--aqui va el codigo del departamento cuando selecciona-->
            <input type="hidden" name="codigo_departamentos" id="codigo_departamentos" />
        </form> 
        <!--agregamos jquery-->
        <script src="js/jquery.js" type="text/javascript"></script>
        <!--agregamos nuestro script de autocompletar-->
        <script src="js/autocompletar.js" type="text/javascript"></script>
    </body>
</html>

un php que debe mandar un json con la data real pero aqui puse un dato en duro pero en javascript hago que envie un dato en get para que sirva para filtrar una consulta sql que eso seria en casos reales.

solo por demo coloco un json en duro.

$data=array(array("codigo"=>"001","provincia"=>"LIMA"),
            array("codigo"=>"002","provincia"=>"AYACUCHO"),
            array("codigo"=>"003","provincia"=>"JUNIN"),
            array("codigo"=>"004","provincia"=>"PUNO"),
            array("codigo"=>"005","provincia"=>"TRUJILLO"),
            array("codigo"=>"006","provincia"=>"IQUITOS"),
            array("codigo"=>"007","provincia"=>"LORETO")
        );
 
echo json_encode($data);

las siguientes lineas son la base de todo y cada linea tiene explicacion

//cuando tecle en el input se ejecutara
    $("#departamentos").on("keyup",function(){
        //la referencia al input lo metemos en una variable
        var $this=$(this);
        //eliminamos el div si existiera
        $("#autocompletar").remove();  
        //solo si es mayor a 3 envia un ajax
        if ($("#departamentos").val().length >=3)
        {
            //para hacer bonito el efecto agregamos un gif de load en la parte derecha del input 
            //sera un background
            $this.css({"background":"url('chrome-extension://hlngmmdolgbdnnimbmblfhhndibdipaf/images/loader.gif') top right no-repeat"})
           //capturamos el valor de ingreso en el campo
            var departamentos=$this.val();
            //hacemos un ajax en get y enviamos un variable get que es el dato que ingreso en el input
            $.get("data.php",{"departamentos":departamentos},function(data){
                //ahora crearemos un div para mostrar los resultados pero queremos que sea debajo del input 
                //y para eso debemos obtener la posicion del elemento para eso position de jquery
                posicion=$this.position(); 
                //guardamos el top , left y width 
                //
                //el top actual + el alto de la cajita para posicionarlo debajo de la cajita me refiero al input
                //adicionalmente 10 px mas para que no sea tan pegado
                var top=parseInt(posicion.top)+parseInt($this.height())+10; 
                //el left del la cajita
                var left=posicion.left;
                //el ancho de la cajita + 100 px
                var width=parseInt($this.width())+100
                //debemos crear el div pero consultamos si existe para no volver a crearlo
                if (!$("#autocompletar").length)
                {
                    //en caso no exista lo creamos dando las medidas
                    $("body").append("<div id='autocompletar' style='overflow:auto;top:"+top+"px;left:"+left+"px;width:"+width+"px; height:100px;position:absolute; border:1px solid #ebebeb'></div>")
                }
                var html='';
                //ahora creamos el contenido que va dentro del div sera un ul con la respuesta
                html +='<ul id="lista">';
                data=$.parseJSON(data);
                //un recorrido a la respuesta que nos envio el ajax que en este caso se llama data
                $.each(data, function(i, item) {
                        //creamos un li por cada vuelta y con atributos en el li que 
                        //nos serviran para que cuando seleccione guardarlos de alguna forma
                        html +='<li data-codigo="'+item.codigo+'"  data-provincia="'+item.provincia+'"><a href="javascript:;">'+item.provincia+'</a></li>';
                });
                html +='</ul>';
                //cancelamos el efecto del load del gif
                $this.css({"background":""})
                //limpiamos todo lo que pueda tener el div contenedor y agregamos toda nuestra ul que tiene
                //la data obtenida como respuesta del ajax
                $("#autocompletar").empty().append(html)
            });
        }
    })

ahora la funcion que se ejecuta al selecciona un item de la respuesta.

//funcion que se ejecuta cuando hace click en una opcion de la respuesta al escribir
    $(document).on("click","li",function(){
        //aqui tenemos los atributos que creamos en el li
        //jalamos el codigo y el texto del nombre de la provincia
        codigo=$(this).attr("data-codigo");
        provincia=$(this).attr("data-provincia");
        //asignamos los valores
        $("#codigo_departamentos").val(codigo)
        $("#departamentos").val(provincia)
        //y finalmente eliminamos el elementos del autocompletar
        $("#autocompletar").remove();
    })

puede ver en funcionamiento el script

autocompletar jquery demo
y descargarlo aqui
autocompletar jquery

Share on LinkedInShare on FacebookTweet about this on TwitterShare on Google+
Read more