Esta sencilla aplicación, llamada Frame Box, es una herramienta online que en ocasiones puede darte un respiro a la hora de explicar tus bocetos o compatirlos de manera rapida con quien quieras, o simplemente plasmar un prototipo de manera instantanea y que no se te olvide…
Seguir leyendo Frame Box – comparte tus bocetos online de manera rápida
Ahora que no hay posibilidad de crear pestañas FBML, los usuarios de Facebook tienen que utilizar el método IFrame con el fin de agregar pestañas personalizadas a su página de fans. Las pestañas IFrame son sin duda un poco más complicadas para crear en comparación con las pestañas FBML, debido principalmente al hecho de que es necesario configurar una aplicación de Facebook ( clic aqui para ver cómo preparar una aplicación facebook para el uso de pestañas personalizadas iframe).
A pesar de que puede ser más difícil de crear, existen numerosas ventajas para el uso de pestañas IFrame en lugar de las extintas FBML, el código se encuentra en tu propio servidor, el flash no requiere activación, un sin fin de oportunidades Javascript, y mucho más. En la entrada anterior mostraba cómo configurar la aplicación Facebook, ahora vamos a ver cómo crear la actual pestaña personalizada Facebook IFrame y la manera correcta de sincronizarlo con nuestra aplicación.
Con el fin de crear una pestaña Facebook IFrame primero tendrás que crear una aplicación de Facebook. Si aún no lo ha creado tu aplicación, házlo ahora. Si no sabes cómo configurar una aplicación de Facebook para su pestaña personalizada IFrame, por favor, primero lee y completa este tutorial: Cómo preparar una aplicacion facebook para el uso de pestañas personalizadas iframe
Ahora que tienes la aplicación de Facebook en funcionamiento y listo para empezar a crear tu actual Pestaña IFrame, deberías tener un archivo en blanco ‘index.php’ listo para editar. Lo primero que haremos es agregar lo normal de código HTML necesario para conseguir que nuestro archivo php funcione. Abre el archivo PHP y añade el siguiente código:
TU CODIGO AQUI
Ahora debes tener el archivo ‘index.php’ en funcionamiento básico. Todo esto es HTML muy básico y cualquiera que sepa algo de HTML no debería tener problemas para comprender lo que se ha hecho aquí.
En el interior de la etiqueta <head> te darás cuenta de que he vinculado a una hoja de estilo externo «style.css», a esto se hará referencia más adelante en Paso 5.
el «base Target» se establece como _blank siempre y cuando queramos que cualquier enlace salga fuera del iframe, en caso contrario deberemos usar _self.
Finalmente, una vez que hayas completado los pasos de este post ya deberias crear tu codigo personalizado donde dice «TU CODIGO AQUI«.
Ahora que tenemos el archivo ‘index.php’ funcional, podemos añadir el Javascript Facebook que se necesita para ayudar a crear nuestra pestaña personalizada IFrame. Este poco de Javascript es lo que realmente hará que nuestro «index.php» se comunique con nuestra aplicación de Facebook. Añade el siguiente script justo antes de cerrar la etiqueta </body>:
Asegúrate de cambiar donde dice «INSERTA TU APP ID AQUI» para la identificación real de la aplicación única, que conseguiste al crear la aplicacion en facebook.
Este script te ayudará a cambiar el tamaño del lienzo IFrame para eliminar barras de desplazamiento no deseadas que suelen resultar del uso de un IFrame. De forma dinámica se ajustará tu IFrame de tamaño de modo que no es necesario para establecer realmente una altura predeterminada. Esto es definitivamente una ventaja adicional para los usuarios cuya pestaña contará con contenido actualizable que no siempre se ajusta a un determinado tamaño. Coloca el siguiente código dentro de etiqueta <head> dentro de tu index.php
Crear el archivo «style.css» lo pones junto a tu ‘index.php’ archivo. Agregua el siguiente codigo CSS a tu archivo:
body{
margin: 0;
overflow: auto;
}
#container{
width: 520px;
margin: 0 auto;
overflow: hidden;
position: relative;
}
Este codigo ayudará a eliminar correctamente las barras de desplazamiento no deseado de nuestra ficha. Ya que nuestra área real de la pestaña IFrame es sólo 520px, se requierer establecer el «margin» a cero, lo que ayudará a eliminar cualquier margen adicional no deseado en nuestro IFrame. Al añadir el «overflow» como auto o a nuestro «cuerpo» estamos asegurando que nuestros pestaña IFrame muestre correctamente el tamaño, su falta se traducirá en una pestaña IFrame muy inestable.
Los estilos que se añaden para el div contenedor son sólo una sugerencia, y se puede alterar esto de cualquier manera. Pero recuerda que es una buena practica ceñirse a esos 520px de ancho…
Ahora sube tus archivos index.php y style.css a tu servidor en la direccion que especificaste a tu aplicacion facebook. La falta de estos se traducirá en una pestaña rota IFrame. Después de cargar los archivos, vamos a tu página de fans en Facebook, buscas la pestaña en el menú de la izquierda y si todos los pasos se realizaron correctamente, deberías ver «TU CÓDIGO AQUÍ». Ahora que tu ficha IFrame está en pleno funcionamiento,puedes insertar tu codigo.
CODIGO COMPLETO:
TU CODIGO AQUI
Desde que Facebook se ha decidido a poner fin a la creación de pestañas personalizadas basadas en FBML, los usuarios de Facebook se ven obligados a crear pestañas con el nuevo método actualizado Iframe. Antes la creacion de dichas pestañas era un proceso «sencillo» que casi cualquier usuario con conocimientos mínimos podia lograr llegar a cabo, pero no puede decirse lo mismo de la nueva metodologia IFrame, ya que requiere la creación de una verdadera aplicación de Facebook. Seguir leyendo Cómo preparar una aplicación facebook para el uso de pestañas personalizadas (IFrame)
Excelente tutorial paso a paso para poder probar nuestros primeros «pinitos» en nuestro móvil sin tener que hacer uso de la licencia de desarrollador de apple por el momento.
Poco a poco redes como Facebook van uniéndose al e-commerce y se van convirtiendo en un nuevo canal de venta que debemos aprovechar pero siempre teniendo en mente y como objetivo principal ofrecer un valor añadido a nuestros clientes. Esto es lo que empieza a denominarse f-commerce.
Seguir leyendo Soluciones simples y rápidas para crear una tienda virtual en la plataforma Facebook
Una de las cosas mas impresionantes acerca del iPhone es la gran variedad de aplicaciones disponibles para el, algunas de ellas pueden hacer los trabajos creativos un poquito mas faciles. Aqui expongo 6 de las mas prácticas.
Anoche un amigo me hacia la cuestión del Título, problematica que yo tambien me he encontrado en diversas ocasiones, asi que en mi modesto empeño de encontrar esa font recurro a nuestro compañero de viaje Google. Obviamente el resultado fue nefasto ya que lo único que encontré fueron enormes galerias de tipografías, bien de pago, bien gratuitas, y la verdad… ni tiempo, ni ganas.
Esta mañana vuelvo a “googlear” en un segundo intento y de pura casualidad encuentro My Fonts:
Hasta ahí todo igual que el resto, pero esta vez encuentro una solapita que me lleva a el paraiso:
WhatTheFont te da la opcion a darle la URL de la imagen de internet , o bien subir el archivo para que éste lo examine, dándote las coincidencias y preguntandote si alguna de las letras no la entiende.
En mi caso necesitaba saber que tipografia usaba el logotipo de una web concreta, asi que le indique la url del jpg. Acto seguido me solicito ayuda para decirle que letra era la imagen que correspondia a la letra I (¿estaba un poco ciego el software? o lo confundia con un uno y ante la duda…)
Acto seguido me ofrecio todas las posibles tipografias que resultaban de su analisis… Lithos Light, Lithos Regular, etc!!!
Simplemente un servicio genial.
Este sitio ha sido creado con una finalidad. Dar la oportunidad de probar algunos de los mejores sistemas de software OpenSource basados en php/mysql del mundo.
Seguir leyendo Elige tu propio sistema gestor de contenidos gratuito en OpenSourceCMS
