Dar estilo a aplicaciones de Facebook con Fbootstrapp

Una parte importante de una aplicación es su diseño y estructura del contenido, en mi caso por ejemplo se me dificulta más idear esta parte que el mismo desarrollo, pero gracias a Fbootstrapp ahora me puedo olvidar del CSS y lo que ello conlleva. Fbootstrapp es un framework que incluye todo lo necesario para que nuestra aplicación de Facebook se vea bien: Botones, tablas, tipografías, formularios y demás componentes estilizados y no se limita sólo a eso, también trae consigo una librería Javascript (que usa jQuery) que nos permite hacer alertas, tabs, barras de navegación, etc. Este framework se basa en Bootstrap por lo que trae consigo algunas ventajas como poder usar Less o el Scaffolding adaptado para funcionar de maravilla en aplicaciones iFrame (canvas) o pestañas de fanpages.

Sitio web de Fbootstrapp

¿Qué es Open Graph protocol y cómo funciona?

Para definir Open Graph de una forma sencilla piensa en el momento cuando compartes un enlace en Facebook: lo normal sería ver una imagen, una descripción y un titulo que toma automáticamente Facebook para mostrar, el problema es cuando por ejemplo toma una imagen aleatoriamente del sitio que muchas veces no tiene nada que ver con lo que queremos compartir o en el peor de los casos no aparece una imagen y de la misma forma el titulo y descripción que toma no son descriptivas.

Ahí es donde Open Graph trabaja, permitiendo con un simple método incluir información precisa sobre nuestro sitio web para una correcta representación del contenido de nuestro sitio en redes sociales. En el caso específico de la red social de Mark Zuckerberg, usar este método no solo nos servirá a la hora de compartir un enlace sino también cuando un usuario le de un «me gusta» a un post, en vez de publicarse en su muro un simple enlace aparecerá el titulo, descripción y imagen que nosotros queramos; de esta forma podemos atraer nuevos visitantes/clientes.

¿Cómo funciona Open Graph?

Sencillo, solo debes incluir en la cabecera de tu sitio la etiqueta <meta> especificando la información de la siguiente forma:

<head>
<title>El Tales</title>
<meta property="og:title" content="El Tales"/>
<meta property="og:type" content="movie"/>
<meta property="og:url" content="http://tales.com/info/"/>
<meta property="og:image" content="http://visajes.com/tales.jpg"/>
<meta property="og:site_name" content="Tales"/>
<meta property="fb:admins" content="TU_ID"/>
<meta property="og:description"
content="El tales o visaje visajoso es aquel elemento visaje que se une con el tin
         para formar el visajimiento conocido como TinTales, el cual reune cosillas varias."/>
</head>

Continuar leyendo…

¿Offshore Hosting?

Hace algunos meses me salí un poco de lo habitual e hice una web para un programa de televisión que me gusta mucho, pero me surgió un

The Pirate Bay

The Pirate Bay

problema:  no podía alojarla con la empresa donde normalmente tengo mis webs, debido a que el servidor esta ubicado en Estados Unidos y en este país hay muchas restricciones con respecto a la publicación de contenido que infrinja el derecho de autor o mejor conocido como warez.

Después de buscar en la red alguna solución para mi problema, encontré  un Offshore Hosting.

¿Qué es el Offshore Hosting?

Wikipedia define a Offshore como: …

«la actividad por parte de empresas con sede en un determinado país de trasladar centros de producción en otro país, donde por lo general enfrentarán menores costos en mano de obra, menor presión en leyes laborales, menor cantidad de normativas gubernamentales, reducción de otro tipo de costos, u otros beneficios cualesquiera desde el punto de vista del lucro.»

Comúnmente los servidores Offshore están situados en países/ciudades como Holanda, Panamá, Hong-Kong, Rusia, entre otros. Las notables ventajas son la menor presión  y leyes para publicar Warez,  por lo general las denuncias DMCA son ignoradas. En el caso del precio he podido ver que no es tan barato como un alojamiento normal, pero existen planes cómodos.

Recomendaciones

Tenga en cuenta que también hay algunas restricciones en este tipo de alojamiento web, como por ejemplo está permitido enlazar Warez de otros servidores pero no subirlos al propio servidor, no está permitida la pornografía infantil ni usar el servidor para enviar spam, ni alojar webs para realizar pishing.

Cada empresa puede tener sus diferentes restricciones, antes de comprar el servicio es recomendado leer los términos de uso para saber si cumple con los requerimientos de sus necesidades.

Empresas proveedoras

En lo personal solo tengo experiencia con tres empresas:

HostingWarez.com: Nunca tuve problemas con el servicio, tiene buenos precios pero los planes en cuanto a características son algo bajos. Recomendado para webs pequeñas.  El soporte es en ingles.

HostMywarez.com: Tiene planes económicos, uno de ellos es con todo ilimitado. En el poco tiempo que lo use el servidor murió varias veces. El soporte es en ingles.

DonkieHost.com: Lo estoy usando actualmente, tiene buenos planes y servidores en varios países dependiendo de las necesidades. El soporte es en español.

Otras empresas:

  • Warez-Host.com
  • Wiroos.com el que usa Taringa.
  • WrzHost.com
  • UnderHost.com

¿Qué otros conoces?

Pedir permisos en una aplicación de Facebook

Este articulo hace parte de la vieja API de Facebook, para más información sobre la nueva API te recomiendo leer Funcionamiento de la Graph API de Facebook.

Facebook permite a las aplicaciones poder tomar datos concretos de los usuarios, como por ejemplo el nombre para dar un saludo, el ID, el sexo y entre otros. Por razones de privacidad hay datos que no se pueden obtener y para ello hay que pedir permisos al usuario. En este caso vamos a suponer que necesitamos el email y fecha de cumpleaños del usuario, al no tener los permisos veríamos algo como:

Continuar leyendo…

¿Cómo maquetar y diseñar una web?

Cuando hablamos de hacer una web básicamente nos encontramos con dos partes importantes, una de ellas es el diseño «lo bonito», lo que los usuarios pueden ver y la otra parte son «las entrañas» las cuales realizan diferentes tipos de acciones. Aquí no escribo mucho sobre maquetación y diseño ya que no es mi fuerte, pero para quienes les gusta el tema les comparto estos videotutoriales que me encontré en la web de César Cancino.

Introducción al diseño y maquetación web

En este primer vídeo se diseña la estructura del sitio web haciendo uso de Photoshop.

Continuar leyendo…

Crear una aplicación de Frases para Facebook: Recuperar frases desde una base de datos

Este articulo hace parte de la vieja API de Facebook, para más información sobre la nueva API te recomiendo leer Funcionamiento de la Graph API de Facebook.

Anteriormente había explicado como mostrar aleatoriamente las frases desde un archivo de texto usando PHP, el problema de usar este método es que se puede volver muy fastidioso estar editando el archivo de texto para introducir una nueva frase; el uso de una base de datos convierte este proceso en algo más sencillo ademas nos de muchas más ventajas como la posibilidad de permitirle a los usuarios enviar sus propias frases, mostrar todas las frases en una tabla, etc.

Creando la base de datos en MySQL

Se debe crear una base de datos con el nombre que quieran, en este caso yo usare el nombre «app_quotes» y luego debemos crear una tabla con una estructura como la siguiente:

CREATE TABLE frases
 (
 id INT PRIMARY KEY AUTO_INCREMENT,
 frase VARCHAR(150)
 );

Después de crear la tabla deben insertar las frases para luego mostrarlas.

Recuperar las frases desde la base de datos

$conexion = mysql_connect("localhost", "usuario", "password");
mysql_select_db("app_quotes", $conexion);
$consulta = "SELECT frase FROM frases ORDER BY RAND() LIMIT 1";
$query = mysql_query($consulta, $conexion) or die(mysql_error());
$row = mysql_fetch_row($query);
$frase = $row[0];
echo "La frase del día es: ".$frase;

Publicar la frase en el muro

<script>
 function publicar(){
 var mensaje = "<?php echo $frase; ?>";
 var user_message_prompt = "¿Deseas comentar algo?";
 var user_message = "Que buena frase!";
 var attachment = {'media':
 [{'type':'image',
 'src':'http://tuweb.info/logo.png',
 'href':'http://apps.facebook.com/tuaplicacion/'}],
 'name': mensaje +'<br />',
 'description':'Frases Urban'};

 Facebook.streamPublish(user_message,attachment,'','',user_message_prompt);
 }
publicar();
</script>

Crear una aplicación de Frases para Facebook: Invitar amigos a usar la aplicación

Este articulo hace parte de la vieja API de Facebook, para más información sobre la nueva API te recomiendo leer Funcionamiento de la Graph API de Facebook.

Continuando con el Tutorial para crear una aplicación de frases, veremos algo muy importante para hacer crecer nuestra aplicación: Invitar amigos.

Para hacer esto necesitamos hacer uso de las siguientes etiquetas FBML:

<fb:request-form
 action="index.php?accion=amigos"
 method="POST"
 invite="true"
 type="Tu aplicacion!"
 content="Hola! encontre esta aplicacion y pense que te podria gustar. Descripcion de la aplicacion
 <fb:req-choice url='http://www.facebook.com/login.php?api_key=<c:out value='${apiKey}' />'
 label='Ir a la aplicacion!' />">

 <fb:multi-friend-selector
 showborder="false"
 actiontext="Invita a tus amigos a usar esta aplicacion."
 exclude_ids="<c:out value='${appUserFriends}' />"
 max="20" />
</fb:request-form>

El resultado:

Pueden ver el ejemplo funcionando aquí.

Función en PHP para recuperar registros a una etiqueta select

Ya he visto en varios foros a personas preguntando como poder recuperar registros de una base de datos MySQL a un campo de selección (<SELECT>), con esto lo que podemos hacer es por ejemplo desde en un formulario de registro, permitir a el usuario seleccionar su ciudad:

<?php
//Brian Urban - https://www.brianur.info
function genera_select($nombre,$id,$tabla,$campo_visual,$campo_valor,$default=0){
 $sql="select $campo_valor, $campo_visual from $tabla order by $campo_visual";
 $result= mysql_query($sql);
 echo "<select name='$nombre' id='$id'>";
 echo "<option value='0'>Seleccione opcion</option>";
 while ($row=mysql_fetch_assoc($result)){
 $id= $row[$campo_valor];
 $texto= $row[$campo_visual];
 $sel="";
 if ($default==$id){
 $sel="Selected";
 }
 echo "\n <option value='$id' $sel>$texto</option>";
 }
 echo "</select>";
}
?>

Continuar leyendo…