giancarlospot - desarrollo web

Participa tú también

giancarlo — Thu, 13 Oct 2011 03:52:26 +0000

Si quieren participar en este blog con algún artículo interesante, ya sea escrito o con video, solo envíenmelo a giancarlo(arroba)giancarlospot.com.

Se pondrá los créditos respectivos

Pedir permisos en una aplicación de Facebook

giancarlo — Fri, 30 Sep 2011 22:31:06 +0000

Desde hace ya un par de años estoy haciendo aplicaciones para Facebook y algo que uso casi siempre es el pedir permisos a los usuarios para poder acceder a sus datos, publicar en su muro, en el muro de sus amigos, saber su fecha de nacimiento, email, etc.

Este tutorial no explica como crear una aplicación, sino como pedir permisos al usuario.

Primero que todo a partir del 01 de octubre de 2011 Facebook no va a permitir tener una aplicación que corra en un dominio que no tengo un certificado SSL (https).

Bueno, yendo al grano. Cómo lo conseguimos?

Es muy simple, primero hay que descargar la clase Facebook (facebook.php), está en la carpeta “src”

En mi caso, normalmente ninguna página de la aplicación puede correr si no has aceptado los permisos. Entonces creo un PHP que lo llamo “header.php”

require_once("facebook.php");
$canvas_base_url = "http://apps.facebook.com/URL_DE_LA_APLICACION/";
$fanpage_base_url = "http://www.facebook.com/NOMBRE_DEL_FAN_PAGE";
$tab_base_url = "http://www.facebook.com/NOMBRE_DEL_FAN_PAGE?sk=app_IDDELAAPLICACION";
$facebook = new Facebook(array(
  'appId'  => 'IDDELAAPLICACION',
  'secret' => 'CLAVE_SECRETA',
  'cookie' => true,
));
$session = $facebook->getSession();
 
$me = null;
 
if($session){
	try{
		$me = $facebook->api('/me');
	} catch(FacebookApiException $e) {
 
	}
}
 
if(!$me){
	$loginUrl = $facebook->getLoginUrl(array('canvas' => 1,
		'fbconnect' => 0,
		'req_perms' => 'email, user_birthday',
		'next' => $tab_base_url,
		'cancel' => $fanpage_base_url));
	echo("");
	exit();
}

Cuando el usuario ya aceptó los permisos de tu aplicación, entonces la variable “$me” tendrá los datos del usuario.

//PROBAR LA INFORMACIÓN
echo "<pre>";
print_r($me);
echo "</pre>";

Facebook te ayuda a ver todos los permisos que puedes solicitar al usuario.

Aquí les dejo el archivo facebook.php que utilizo.

Problema con display: inline-block; en IE7

giancarlo — Fri, 11 Mar 2011 19:50:04 +0000

Lo sé. Internet Explorer, sobre todo el 7 para abajo, nos ha traido muchos problemas y hoy tuve uno en particular. Cuando quería centrar un menú que tenía “divs” flotantes (da igual si fuese “li”). Lo que hacía y funcionaba era poner un contenedor alineado al centro (con la propiedad display: inline-block;) y dentro los divs (los que muestran los items del menú) y todo perfecto, excepto en Internet Exploret 7.

Solución:

div.menu{
	width: 100%;
	text-align: center;
	height: 39px;
	margin-top: 3px;
}
div.menu div.items{
	text-align: center;
	display:inline-block;
	margin: 0 auto;
	height: 39px;
	zoom: 1;
	*display:inline;
}
div.items div.item{
	width: 150px;
	height: 39px;
	background-color: #333;
	float: left;
	margin: 0 5px;
}

He usado el zoom, para poder hacer que el contenedor se muestre con las verdaderas dimensiones. El “*” es comentario en CSS para todos los navegadores, excepto internet explorer, así que con esto digo que utilice, en vez de display: inline-block, display: inline;

Con esto, solucionado.

“Como llegar” y la Api de Google Map

giancarlo — Thu, 11 Nov 2010 21:41:31 +0000

Me imagino que conocen Google Map y han visto que tiene un servicio para saber como llegar de un punto en el mapa a otro. Es una ayuda muy interesante para conocer la ruta de tu destino. Pero es más interesante que, por ejemplo, un restaurante te diga desde su página web cómo llegar desde el punto donde estás. Un gran servicio verdad?

Google Map tiene un API para javascript, el cual te ayuda a incrustarlo dentro de una página web. Para esto necesitas una clave que Google te la da gratuitamente, también hay un servicio de pago, para que puedas colocarlo en tu página web. Y no solo eso, sino te da más servicios, como agregar íconos, puntos, tipos de vista, zoom y lo que vamos a hablar hoy: “Cómo llegar”.

Primero que todo, la idea es que sepas primero donde está la persona que ha entrado a la página web, cómo puedes saber eso? Con HTML5, si lo sé, no todos los navegadores aceptan HTML5, hasta la fecha. Pero si éste fuese el caso, le daremos un “IF”.

Para saberlo, utilizamos javascript.

Prueba esto (te recomiendo en Firefox):

<script type="text/javascript">
function Mostrar(position){
	alert("Latitud: "+position.coords.latitude+"\nLongitud: "+position.coords.longitude);
}
function NoMostrar(){
	alert("No has dejado mostrar tu ubicacion");
}
navigator.geolocation.getCurrentPosition(Mostrar, NoMostrar);
script>

Como ven, les dice donde están (en realidad tu operador de internet tiene mucho que ver con este tema, acá en Perú, a muchos les sale su ubicación en la Victoria, a mi personalmente si me sale exactamente en mi casa.

Ahora hay otro tema, debemos validar si el navegador acepta “navigator.geolocation”, por ejemplo, por ahora IE no lo acepta (benditos los de Microsoft, como siempre!).

Cambiamos la séptima línea:

if(typeof navigator.geolocation != "undefined"){
	navigator.geolocation.getCurrentPosition(Mostrar, NoMostrar);
}else{
	NoMostrar();
}

Por cierto, hasta ahora, Firefox y Safari parecen que tienen un problema, y es que la primera vez que pruebas esto funciona, pero luego no corre nada. Como si no se llamara a ninguna función. Para solucionar el problema, lo que encontré fue:

navigator.geolocation.getCurrentPosition(Mostrar, NoMostrar,  {timeout: 10000});

Luego de 10 segun| irá a la segunda opción, como si no se haya dejado ver la ubicación.

Bien, esto fue la primera idea, ahora, cómo muestro el mapa y el cómo llegar? Fácil!




<script type="text/javascript">
/* PRIMERO DEBO SABER LA LATITUD Y LONGITUD A DODNE QUIERO LLEGAR */
var longitud = -77.03274250030518;
var latitud = -12.113809456579942;
 
function Mostrar(position){
	if (GBrowserIsCompatible()) {
		var wp = new Array();
		wp[1] = new GLatLng(latitud, longitud);
		/* ESTAMOS INDICANDO DONDE ESTÁ UBICADA LA PERSONA QUE ENTRÓ A LA WEB */
		wp[0] = new GLatLng(position.coords.latitude, position.coords.longitude);
		var map = new GMap2(document.getElementById("map"));
		map.setCenter(new GLatLng(latitud, longitud), 15);
		directions = new GDirections(map);
		directions.loadFromWaypoints(wp);
	}
}
function NoMostrar(){
	if (GBrowserIsCompatible()) {
		var wp = new Array();
		var map = new GMap2(document.getElementById("map"));
		map.setCenter(new GLatLng(latitud, altitud), 15);
		var point = new GLatLng(latitud, altitud);
		var marker = new GMarker(point,{title:"Aquí estoy!"});
		map.addOverlay(marker);
	}
}
 
if(typeof navigator.geolocation != "undefined"){
	navigator.geolocation.getCurrentPosition(Mostrar, NoMostrar,  {timeout: 10000});
}else{
	NoMostrar();
}
script>

Aquí puedes ver el ejemplo

Bien. Espero que les haya sido de utilidad. No se olviden de darle clic a mis anuncios para apoyarme.

Un “auto height” cuando se usa float en css

giancarlo — Mon, 31 May 2010 18:15:26 +0000

Existen problemas cuando se está armando con capas y css una web, ya que muchas veces necesitamos tener una columna a la izquierda de la otra. Para lograr esto, necesitamos poner los tamaños de anchos exactos para que no se mueva para abajo la capa que debe estar al costado, pero también se debe trabajar con una capa contenedora y esto es lo que a muchos les trae problemas cuando el alto de la capa (height) es dinámico.
Para solucionar este inconveniente siempre debemos tener una capa contenedora, pero como no sabemos el alto que ésta debe tener, le debemos de poner