Chuso! » HTML http://chusete.es A la tercera va la vencida Thu, 17 Nov 2011 19:44:13 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Introducción a la programación Facebook II http://chusete.es/2011/09/16/introduccion-a-la-programacion-facebook-ii/ http://chusete.es/2011/09/16/introduccion-a-la-programacion-facebook-ii/#comments Fri, 16 Sep 2011 08:00:37 +0000 chusete http://chusete.es/?p=1139

Ok, el anterior artículo no estuvo mal; vimos una introducción conceptual a las piezas clave para la construcción de aplicaciones en Facebook. ¡Pero no llegamos a hacer nada! En este post vamos a construir algo sencillo, jugando con el SDK en JavaScript. Vamos a probar a mostrar algunos de los social plugins, usaremos Open Graph, y presentaremos dos nuevas tecnologías: XFBML y Facebook Insights. ¡Al lío!

Paso 1 – Alojamiento para la aplicación

Es responsabilidad del desarrollador buscar un alojamiento para su aplicación. Esto no suele ser un problema, ya que sirve cualquiera al que tengas acceso FTP. Sin embargo, desde el 1 de octubre de 2011 Facebook obliga a que las aplicaciones estén disponibles tanto por HTTP como por HTTPS.

Por lo pronto vamos a crear una carpeta llamada “/facebook” en el directorio raíz de la web, que será desde donde se acceda a nuestra aplicación.

Alojamiento gratuíto

Desde el 15 de septiembre de 2011, Facebook ha llegado a un acuerdo con la compañía Heroku para ofrecer gratis un alojamiento reducido pero funcional para todo el que lo solicite. Queda fuera del alcance de esta guía explicar cómo utilizar este servicio. Más información.

Paso 2 – Configurando la aplicación

Ahora, accedemos a developers.facebook.com, y de ahí vamos a la pestaña Aplicaciones. Seleccionamos la nuestra, y en el apartado de configuración pinchamos en “Edit settings“. En la parte inferior, tal como vimos en el anterior artículo, nos dan cuatro opciones para crear nuestra aplicación. Vamos a seleccionar Website e introducimos la URL completa con la que se accederá a nuestra aplicación. En mi caso, introduzco http://chusete.es/facebook.

Pulsamos en Guardar cambios, y ya está. Ésta ha sido fácil :)

Paso 3 – Creando el esqueleto

Ahora, en la carpeta /facebook de nuestro alojamiento web, vamos a crear un fichero llamado index.html con la estructura básica de un documento HTML. Además, añadiremos el código JavaScript que vimos en el anterior artículo que había que insertar para usar el SDK. Quedaría así el esqueleto:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Demo Facebook</title>
</head>
<body>
    <h1>Demo Facebook</h1>

    <div id="fb-root"></div>
    <script type="text/javascript" src="http://connect.facebook.net/es_ES/all.js"></script>
    <script type="text/javascript">
        FB.init({
            appId  : '256797284360192',
            status : true, // comprobar estado de login
            cookie : true, // habilitar cookies para permitir al servidor acceder a la sesión
            xfbml  : true, // renderizar código XFBML
            channelURL : 'http://chusete.es/facebook/channel.html', // fichero channel.html
            oauth  : true // habilita OAuth 2.0
        });
    </script>
</body>
</html>

Acerca de channelURL

Si te fijas, verás que en la línea 18 hay una URL que apunta a channelURL. Este fichero tan sólo tendrá este contenido:

<script src="http://connect.facebook.net/es_ES/all.js"></script>

Para saber más acerca de por qué es recomendable crear el fichero channel.html, consulta la documentación de la función FB.init.

Llegados a este punto, ya tenemos listo el esqueleto sobre el que construir una pequeña aplicación de demo. Ver resultado del paso 3.

Paso 4 – Añadiendo Social Plugins (XFBML)

Ya vimos que hay, ni más ni menos, que 10 social plugins. Vamos a insertar algunos a nuestra aplicación. Pero antes un poco de teoría. Hace tiempo, Facebook creó su propio lenguaje de marcado para poder insertar social plugins en nuestras aplicaciones. Hablamos del FBML (Facebook Markup Language). Para que pudierar interactuar con JavaScript, crearon FBJS; un dialecto de JavaScript para usarlo en conjunto con FBML dentro del espacio de Facebook. Sin embargo, desde el 11 de marzo de 2011, todo este conjunto de tecnologías ha quedado fuera de uso. ¿Y qué hay en su lugar? Pues un sistema unificado para todas las aplicaciones, ya sean pestañas, aplicaciones en canvas, externas, etc., basado en tecnologías estándar: HTML, CSS y JavaScript. Mucho mejor, ¿verdad?

Para sustituir a FBML crearon XFBML, que es un sistema que, mediante etiquetas HTML estándar, permite definir Social Plugins. Por ejemplo, el botón “Me gusta” es algo tan sencillo como:

<div data-send="false" data-width="450" data-show-faces="false"></div>

¿Cómo se hace para que ese código HTML se renderice como el Social Plugin “Me gusta”? Hay dos opciones:

  1. Si en el código de inicialización del SDK JavaScript (el método FB.init que hemos invocado en index.html) tenemos a true el campo xfbml, entonces se renderizarán todas las etiquetas XFBML automáticamente.
  2. En caso contrario, podremos renderizarlas invocando a FB.XFBML.parse.

Vale, ahora sólo nos queda saber cómo averiguar el código HTML que define cada Social Plugin. Accede a la página de Social Plugins, elige el que quieras usar, completa el formulario con los valores que desees (si es que el plugin te da esa opción), y finalmente pulsa sobre el botón Get Code. ¡Pero ojo! El código que te genera incluye tanto la inicialización del SDK, como el código HTML que define el plugin. Como nosotros ya tenemos el código del SDK, sólo tendremos que copiar el código HTML del plugin.

Por ejemplo, vamos a insertar un plugin Live Stream en nuestra demo. Al pulsar en Get Code obtenemos lo siguiente:

Copiamos sólo el código HTML:

<div data-event-app-id="282078738484719" data-width="400" data-height="500" data-always-post-to-friends="false"></div>

Con lo que ya tendríamos un chat en nuestra aplicación web, con el siguiente aspecto:

Ver resultado del paso 4.

Paso 5 – Botón “Me gusta” y Open Graph

Del mismo modo que hemos insertado un plugin Live Stream, ahora vamos a insertar el famoso botón “Me gusta”. Como vimos, para obtener el código XFBML debemos acceder a la página del plugin, completar el formulario, obtenemos su código, y lo copiamos. Siguiendo esos pasos obtendrás algo similar a esto (en función de cómo complementes el formulario):

<div data-send="false" data-width="450" data-show-faces="false"></div>

Con solo pegar ese código al documento HTML, ya tendremos el botón en nuestra página. ¡Pero un momento! Como vimos en la primera parte, existe una tecnología llamada Open Graph que convierte un documento web en todo un objeto social, referenciable y al que como administradores podemos seguirle el rastro. Pues bien, vamos a hacer esto. En la propia página del plugin del botón “Me gusta” tenemos un formulario que nos permite generar algunos códigos Open Graph -aunque generarlos a mano es algo trivial. En mi caso, lo he dejado así:

<meta property="og:title" content="Página demo de Facebook" />
<meta property="og:type" content="website" />
<meta property="og:description" content="Ésta es la página de demo de la segunda parte de la introducción a programación en Facebook de chusete.es" />
<meta property="og:url" content="http://chusete.es/facebook/index.html" />
<meta property="og:image" content="http://chusete.es/facebook/logo.png" />
<meta property="og:site_name" content="chuso!" />
<meta property="fb:admins" content="1048522537" />

Ahora, cuando alguien comparta esta página en Facebook, ésa será la información que se mostrará por defecto. Por ejemplo, en este caso quedaría así:

Ver resultado final.

Paso 6 – Página para administradores e Insights

Pero hay más. Junto con la información Open Graph hemos insertado una etiqueta más, en la que el atributo property tiene como valor “fb:admins”. Ese campo contiene el id de nuestro usuario, de manera que así constaremos como el propietario de la página. ¿De qué nos sirve esto? Pues en resumen, para dos cosas. Fíjate en cómo queda el botón “Me gusta” cuando tú lo visualizas:


Interesante… Hay un link a “Página para administradores” y a “Estadísticas”. ¿Qué son?

Página para administradores

Cuando alguien pulse sobre el botón “Me gusta”, se creará un nuevo panel de administración con el que podrás comunicarte con tus “likers” (aquellos a los que les ha gustado tu publicación). Este panel estará disponible desde tu lista de Facebook Pages. Y lo más interesante: todo lo que publiques en el muro de esta página, aparecerá en las lista de novedades de los usuarios a los que les gustó tu publicación.

Insights

Y en segundo lugar, tendrás acceso a las estadísticas en Facebook Insights (¡otra más de las tecnologías de Facebook!). Básicamente, es un panel de análisis de tráfico web, similar a Google Analytics. Puedes acceder desde el enlace “Estadísticas” que acompaña al botón “Me gusta”, pero es preferible reclamar la propiedad de tu dominio ante Facebook, para de ese modo tener acceso completo a todo lo que ocurre con tu página. Para ello, accedemos a la página principal de Insights, y pulsamos sobre el botón . Mete el dominio de tu web, copia el código “meta” que te ha generado, y pégalo en la página principal del dominio:

Finalmente pulsa en Get Insights y ya habrá finalizado el proceso de alta en Facebook Insights. Ahora, cada vez que accedas al dashboard de Insights, podrás consultar qué historias de tu página se han compartido o han gustado en Facebook.

Para más información, consulta la documentación de Facebook Insights.

Resumen

En la primera parte dimos un repaso a las principales tecnologías que involucran el desarrollo de aplicaciones Facebook, y dimos de alta un nuevo perfil de aplicación.

Hoy, hemos visto cómo crear una aplicación en una web externa a Facebook vinculada a nuestro alojamiento. Hemos creado un documento HTML con el código de incialización del SDK JavaScript. Hemos conocido una tecnología de Facebook -XFBML- que nos permite crear plugins de una forma muy sencilla. Como ejemplo, hemos creado un plugin de tipo Live Stream, y otro con el botón “Me gusta”. También hemos añadido los códigos Open Graph y hemos visto su utilidad. Finalmente, hemos visto cómo interactuar con los usuarios a los que les gustan nuestras publicaciones, y cómo explorar las estadísticas de uso de nuestro sitio por los usuarios de Facebook.

 



]]> http://chusete.es/2011/09/16/introduccion-a-la-programacion-facebook-ii/feed/ 1 Google ya indexa SVG, mientras IE9 mejora su implementación http://chusete.es/2010/09/01/google-ya-indexa-svg-mientras-ie9-mejora-su-implementacion/ http://chusete.es/2010/09/01/google-ya-indexa-svg-mientras-ie9-mejora-su-implementacion/#comments Wed, 01 Sep 2010 17:35:57 +0000 chusete http://chusete.es/?p=832 SVG, el estándar del w3c para gráficos vectoriales, está dando mucho de qué hablar. Hasta ahora su uso no ha sido muy extendido, e incluso muchos diseñadores y programadores web ni siquiera lo conocen. Es posible que esto cambie poco a poco.

Ejemplo en SVG

Estos días ha habido dos importantes novedades que seguro ayudarán a impulsar esta tecnología.

Google ahora indexa SVG

Por una parte, desde hoy Google indexa los ficheros SVG, tanto si está empotrado dentro de un documento HTML como si está en su propio fichero. Podemos ver ejemplos de cómo funcionan estas búsquedas: Ejemplo 1 y Ejemplo 2. De modo que ya cuentan con un tipo de fichero más a sumar a su extensa lista.

Una de las ventajas más evidentes es que esto impulsará el uso de SVG respecto a Flash. Recordemos que una de las principales funcionalidades de Flash es poder emplear gráficos vectoriales y animaciones en la web, cosa que también se puede realizar con SVG y JavaScript. Salvo que en el caso de Flash, la indexación de contenidos siempre ha sido bastante pobre. Esto con SVG parece que no pasará :)

IE9 se hace amigo de SVG

Y la segunda noticia viene de mano de Microsoft. Precisamente ayer publicaban en el IEBlog un artículo animándonos a que nos preparemos para SVG. A la vista de los resultados, han hecho una estupenda implementación de este estándar en su próximo navegador. Muestran además cómo se comporta, además de algunas pruebas en distintos navegadores.

Es de agradecer también que publiquen ejemplos de uso. No puedo evitar recordar mis inicios con la informática, cuando dibujaba polígonos en Basic o indagaba con la aplicación de renderizado 3d POV-Ray. Afortundamente, contamos con fantásticas aplicaciones para dibujar nuestros gráficos en SVG.

Recordemos que IE9 no saldrá hasta finales de 2010, a pesar de que este mes veremos la primera beta.



]]> http://chusete.es/2010/09/01/google-ya-indexa-svg-mientras-ie9-mejora-su-implementacion/feed/ 3 10 errores comunes de programadores web novatos http://chusete.es/2010/07/22/10-errores-comunes-de-programadores-web-novatos/ http://chusete.es/2010/07/22/10-errores-comunes-de-programadores-web-novatos/#comments Thu, 22 Jul 2010 21:53:33 +0000 chusete http://chusete.es/?p=777 Hace poco comentaba que en SitePoint habían publicado una lista de los 10 errores comunes de diseñadores web novatos. Pues recientemente publicaron un nuevo artículo, pero esta vez sobre los programadores web. Aquí el resumen:

  1. Ignorar los estándares web. Destacan el uso incorrecto del DOCTYPE, uso de etiquetas antiguas de HTML, o no validar el código.
  2. Delegar en software WYSIWYG. Muy acertadamente indican que, con este tipo de software uno se centra en la visualización, y no en la estructura.
  3. Descuidar aspectos semánticos. El ejemplo que ponen es impagable: El programador novato, si quiere escribir un titular, lo pondrá encerrado en la etiqueta <h1>. Pero posteriormente es posible que “involucione”, y lo diseñe con divs anidados y estilos CSS.
  4. Nombres de clases de estilos. ¿Qué tal una clase como “columna-izquierda-50px”? ¿Y si en un futuro el ancho cambia?
  5. Prueba de navegadores tardía. Invitan al programador novato a revisar su página en varios navegadores desde el primer momento, y no dejarlo para el final. Personalmente, en este punto no estoy de acuerdo; Siempre he preferido desarrollar para una plataforma, y al final, corregir errores de las demás.
  6. Ignorar la portabilidad. Destacan enlaces a rutas absolutas, conexiones a bases de datos sin centralizar, o realizar suposiciones sobre el entorno de ejecución.
  7. Descuidar el ancho de banda. Poco más que añadir… En local un fichero de unos megas es irrelevante, no así en Internet.
  8. Pésima accesibilidad. No consiste sólo en seguir unas reglas mecánicas de código, sino en tener en cuenta aspectos funcionales como poder consultar la web sin javascript, sin flash, en un móvil, o sin ratón.
  9. Despreciar al SEO. Me encanta la definición que hacen del SEO: Es una mezcla de psicoanálisis, complejidad técnica, y misteriosas artes oscuras. En cualquier caso, indican que el desarrollador novato, dejará el SEO para el departamento de marketing una vez lanzada la página. Para entonces, ya será demasiado tarde.
  10. Actualizaciones erróneas. Destacan la práctica de muchos programadores web de tener durante horas una página web en mantenimiento, cuando suele ser una tarea que no debería llevar más de unos minutos. En este punto tampoco estoy de acuerdo. Muchas actualizaciones tan sólo consisten en añadir documentos html, imágenes, y actualizar hojas de estilo y javascript. Sin embargo, hay aplicaciones web que requieren mucho más que eso a la hora de actualizar, por ejemplo cuando cambiamos la estructura de una base de datos, y se deben reestablecer todos los índices.
  11. Como bonus, dejan una lista de otros 20 errores.

En general, este artículo me ha parecido bastante más pobre que el anterior. Sobre todo, por lo mucho que se centra en la capa de presentación HTML, que dista mucho de ser coto exclusivo de los programadores web. En ningún punto se ha mencionado ni una sola práctica o error relacionada con la programación (Salvo el punto 6, donde sugieren no incluir hard coded la conexión a base de datos).



]]> http://chusete.es/2010/07/22/10-errores-comunes-de-programadores-web-novatos/feed/ 2