Crear un TimeLine estilo Facebook con CSS y jQuery

Neysi — Mon, 20 Feb 2012 23:03:28 +0000

Hoy no será un día como los demás, porque les enseñaré como diseñar un Timeline como Facebook. Este último arrasó desde su lanzamiento hace aproximadamente tres meses y se convirtió en el sueño de cualquier programador Web. El Timeline de Facebook gano terreno con su simplicidad y buen diseño.

Lo que haremos en este artículo será algo muy exclusivo, les mostraré paso a paso y con imágenes explicativas como programar el Timeline. Utilizaremos CSS & el Framework jQuery.

Paso 1: Crear diseño HTML.

Primero crearemos un elemento DIV, La ID la llamaremos container. Luego creamos DIVS múltiples y le damos a la Class el valor ítem.

Agregamos un poco de CSS para mejorar el diseño.

Codigo CSS:

#container{width:860px; margin: 0 auto; }
 .item {
 width: 408px;
 margin: 20px 10px 10px 10px;
 float: left;
 background-color:#ffffff;
 border:solid 1px #B4BBCD;
 min-height:50px;
 text-align:justify;
 word-wrap:break-word;
 }

Paso 2: Quitar los espacios.

Usaremos el plugin Mansory para eliminar los espacios entre las DIVS.


 
 
 $(function()
 {
 $('#container').masonry({itemSelector : '.item',});
 });

Después de utilizar el plugin Mansory:

Paso 3: Navegador Timeline.

Ahora crea un “timeline_container” DIV dentro del DIV “container”. Este DIV contendrá un segundo Div, lo llamaremos “plus”


 
 
 
 
 

 1
 --------
 --------

Ahora insertaremos un código Javascript para centrar el navegador del Timeline.

$('.timeline_container').mousemove(function(e)
 {
 var topdiv=$("#containertop").height();
 var pag= e.pageY - topdiv-26;
 $('.plus').css({"top":pag +"px", "background":"url('images/plus.png')","margin-left":"1px"});}).
 mouseout(function()
 {
 $('.plus').css({"background":"url('')"});
 });

Y un poco de CSS para dar estilo.

.timeline_container{
 width: 16px;
 text-align: center;
 margin: 0 auto;
 cursor:pointer;
 display: block;
 }
 .timeline{
 margin: 0 auto;
 background-color:#e08989;
 display: block;
 float: left;
 height: 100%;
 left: 428px;
 margin-top: 10px;
 position: absolute;
 width: 4px;
 }
 .timeline:hover{cursor: pointer;margin: 0 auto;}
 .timeline div.plus{width: 14px;height: 14px;position: relative;left: -6px;}

Paso 4: Inyección de flechas en los contenedores.

Buscaremos los contenedores con este código $(‘#container’).find(‘.item’) y luego inyectaremos las flechas

function Arrow_Points()
 { 
 var s = $('#container').find('.item');
 $.each(s,function(i,obj){
 var posLeft = $(obj).css("left");
 $(obj).addClass('borderclass');
 if(posLeft == "0px")
 {
 html = "";
 $(obj).prepend(html); 
 }
 else
 {
 html = "";
 $(obj).prepend(html);
 }
 });
 }

Código CSS:

.rightCorner { 
 background-image: url("images/right.png");
 display: block;
 height: 15px;
 margin-left: 408px;
 margin-top: 8px;
 padding: 0;
 vertical-align: top;
 width: 13px;
 z-index:2;
 position: absolute;
 }
 .leftCorner{
 background-image: url("images/left.png");
 display: block;
 height: 15px;
 width: 13px;
 margin-left: -13px;
 margin-top: 8px;
 position: absolute;
 z-index:2;
 }

Paso 5: Bloque de eliminación.

Añadiremos Link para eliminar los contenedores seleccionados por el usuario.



 
 X
 1
 
 
 X
 2
 
 -----------
 -----------
 -----------

Código Javascript:

$(".deletebox").live('click',function()
 {
 if(confirm("Are your sure?"))
 {
 $(this).parent().fadeOut('slow'); 
 $('#container').masonry( 'remove', $(this).parent() );
 $('#container').masonry( 'reload' );
 $('.rightCorner').hide();
 $('.leftCorner').hide();
 Arrow_Points();
 }
 return false;
 });

Paso 6: Contenedor para añadir estado.



 1
 --------
 --------

 
  
 Que hay de Nuevo?

Código Javascript:

$(".timeline_container").click(function(e)
 {
 var topdiv=$("#containertop").height();
 $("#popup").css({'top':(e.pageY-topdiv-33)+'px'});
 $("#popup").fadeIn();
$("#update").focus();
 }); 
 $("#popup").mouseup(function() {return false});
 $(document).mouseup(function(){$('#popup').hide();});
 $("#update_button").live('click',function()
 {
 var x=$("#update").val();
 $("#container").prepend('X'+x+'');
 $('#container').masonry( 'reload' );
 $('.rightCorner').hide();
 $('.leftCorner').hide();
 Arrow_Points();
 $("#update").val('');
 $("#popup").hide();
 return false;
 });

Código CSS:

#popup{ 
 display: block;width: 408px;
 float: left;margin-top:10px;
 background-color:#ffffff;
 border:solid 1px #A9B6D2;
 min-height:60px;display:none;
 position:absolute;margin:10px;
 }

Ya tenemos nuestro Timeline finalizado solo queda ver la demostración o Descargar el ejemplo.

Tutorial original por 9lessons, publicado con autorización oficial.

Ejemplo de Geolocalización con HTML5 y Google Maps

Neysi — Sun, 09 Oct 2011 07:35:45 +0000

Existen muchas técnicas para localizar un dispositivo a través de Internet, anteriormente para obtener la ubicación se necesitaba saber la dirección IP del cliente . Actualmente gracias a la W3C que ha incluido en HTML5 un conjunto de APIS que permiten a cualquier dispositivo móvil Iphone 3G, teléfonos Android e incluso a nuestro ordenador de escritorio; a través de JavaScript recuperar información de su posición en el mapa, hoy en día la mayoría de navegadores tienen soporte para geolocalización.

Estos son algunos navegadores soportados:

Firefox 3.5 +: Sí
Google Chrome 6 +: Sí
iPhone Safari: Sí
Opera 10 +: Sí
Safari: Si
Internet Explorer 9 + : Si

En este tutorial haré un simple ejemplo el cual mostrará la Latitud, Altitud donde estamos ubicados y ademas mostrar la posición en el mapa usando la API de Google MAPS.

Para comenzar hay que crear nuestro diseño en HTML5.



  
    Posicionamiento con HTML , JavaScript y Google Maps

Ahora hay que programar las APIS que nos da HTML5 Y Google Maps

inicializar() - Se encargará de detectar si el navegador soporta Geolocalización luego crear una nueva instancia del objeto de Google Maps

      function inicializar() {
			var opciones = {
			  zoom: 6,
			  mapTypeId: google.maps.MapTypeId.ROADMAP
			};
			mapa = new google.maps.Map(document.getElementById('mapa_content'), opciones);
			if (navigator.geolocation)
			{
			    //Hago el CallBack a mostrarLocalizacion
				navigator.geolocation.getCurrentPosition(mostrarLocalizacion,manejadorDeError);
			}
			else{
			    //Caso contraio muestro error
				alert("Su navegador no soporta Geolocalizacion");
				}
		}

mostrarLocalizacion(posicion) – Graficará en un div el mapa y su respectivo punto de nuestra posición.

      function mostrarLocalizacion(posicion)
	     {
            var pos = new google.maps.LatLng(posicion.coords.latitude,posicion.coords.longitude);
            //Muestro un tooltip con un mensaje sobre el mapa
            var infowindow = new google.maps.InfoWindow({
              map: mapa,
              position: pos,
              content: 'Tu ubicacion usando HTML5.'
            });

            mapa.setCenter(pos);
	      }

manejadorDeError(error) – Encarga de controlar todos los posibles errores que re presente en el caso.

    function manejadorDeError(error) {

	switch(error.code)
             {
                case error.PERMISSION_DENIED: alert("El usuario no permite compartir datos de geolocalizacion");
                break;

                case error.POSITION_UNAVAILABLE: alert("Imposible detectar la posicio actual");
                break;

                case error.TIMEOUT: alert("La posicion debe recuperar el tiempo de espera");
                break;

                default: alert("Error desconocido");
                break;
              }
	      var opciones = {
			 map: mapa,
			  position: new google.maps.LatLng(60, 105),
			  content: content
		 };
		var infowindow = new google.maps.InfoWindow(opciones);
		mapa.setCenter(opciones.position);
      }

El código final quedaría de la siguiente manera:



  
    Posicionamiento con HTML , JavaScript y Google Maps

Pueden una demostración del ejemplo :

Gelocalizacion HTML5

Hay mucha información sobre este tema la W3C en el siguiente link:

http://www.w3.org/TR/geolocation-API/

TutsNT » HTML5