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.

Continuar leyendo…

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…