Invitar amigos usando la API de Facebook
By creacciona | February 3, 2010
Facebook proporciona una serie de tags fbml para implementar de forma relativamente sencilla la capacidad de invitar a tus amigos de Facebook a que usen tu aplicación. Las invitaciones dentro de nuestra aplicación , nos permiten la oportunidad de dar a conocer a un gran número de gente nuestra web, por lo que bien usado puede ser una poderosa herramienta de promoción . Estas son las etiquetas necesarias para su implementación:
fb:serverFbml : proporciona el contenedor necesario para mostrar etiquetas fbml tales como fb:request-form and fb:connect-form
fb:request-form : Crea el formulario que envia las peticiones de invitación a los usuarios seleccionados. Para enviar invitaciones a varios amigos a la vez , es necesario el uso de la etiqueta fb:multi-friend-selector
fb: multi-friend-selector : Esta etiqueta FBML nos muestra a todos nuestros amigos de facebook y nos permite seleccionar a varios de nuestros amigos de facebook para poder mandar de una misma vez varias invitaciones .
Enlace a la documentacion oficial:
http://wiki.developers.facebook.com/index.php/Fb:multi-friend-selector
A continuación, un ejemplo de código en PHP que está funcionando en fotos.creacciona.com
<?php
require_once ‘./facebook-platform/php/facebook.php’;
$apikey = “<!– ESCRIBE AQUI TU API KEY –>”;
$secret = “<!– ESCRIBE AQUI TU SECRET KEY –>”;
$fb = new Facebook($apikey, $secret);
?>
<script src=”http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php” type=”text/javascript”></script>
<script type=”text/javascript”>FB.init(”<?php echo $apikey; ?>”);</script>
<?php
if ($fb->get_loggedin_user())
{
?>
<fb:serverfbml style=”width:470px;”>
<script type=”text/fbml”>
<fb:fbml>
<fb:request-form action=”http://fotos.creacciona.com/” method=”POST”
invite=”true”
type=”fotos.creacciona.com”
content=”fotos.creacciona.com would like to share that experience with you.
<?php echo htmlentities(”<fb:req-choice url=\”http://apps.facebook.com/fotos-creacciona\” label=\”Authorize My Application\”") ?>”>
<fb:multi-friend-selector rows=”4″ cols=”3″ showborder=”false” actiontext=”Invite your Facebook Friends to use fotos.creacciona.com” />
</fb:request-form>
</fb:fbml>
</script>
</fb:serverfbml>
<?php }
else
{?>
<h1>Invite Friends from Facebook</h1>
<br/>
<h2>Yow need to be connected for this!</h2>
<br/>
<?php } ?>
Topics: Desarrollo web, Facebook | No Comments »
Generador de menús HTML + CSS
By creacciona | January 10, 2010
CSS menu maker
http://www.cssmenumaker.com/ es una magnífica ayuda para generar menús personalizados para el desarrollo de páginas web. Y todo de forma gratuita. Según sus creadores, el objetivo es crear una libreria de Menús CSS que cualquier desarrollador web pueda descargar y personalizar libremente. Nos dan la posibilidad de generar y descargar menus de 3 tipos:
1. Menús Drop down: Menus horizontales con submenú desplegable de navegación.
2. Menús horizontales: Igual que lso Drop down pero sin submenú de navegación
3. Menús verticales: perfectos para una navegación vertical en la barra lateral del site.
Desde aquí, les damos la enhorabuena por este gran trabajo.
Topics: Desarrollo web, Proyectos Web | No Comments »
El símbolo Copyright en Photoshop y otros caracteres especiales
By creacciona | January 4, 2010
Quizás nunca te preocupe algo así y pueda parecer una tontería preguntar cómo poner el símbolo del copyright a una imagen,
pero eso es hasta que te sucede. Al principio uno se pregunta que Photoshop tendrá en su menú un listado de símbolos y caracteres especiales. Como no parece existir, el truco es el siguiente:
Buscar el símbolo en cualquier texto de Internet donde aparezca, o desde este post mismo, seleccionarlo y copiarlo:
©
y luego pegarlo en Photoshop. Rápido y sencillo. De la misma forma, el símbolo de marca registrada también nos puede ser útil:
®
Dejo aqui una tabla que puede ser de utilidad:
| Literal | Hex | Dec | Entidad | Carácter |
|---|---|---|---|---|
| 00A0 | 0160 | |
espacio que no produce saltos de línea | |
| ¡ | 00A1 | 0161 | ¡ |
exclamación de apertura |
| ¢ | 00A2 | 0162 | ¢ |
signo de centavo |
| £ | 00A3 | 0163 | £ |
signo de libra |
| ¤ | 00A4 | 0164 | ¤ |
signo internacional de moneda |
| ¥ | 00A5 | 0165 | ¥ |
signo de yen |
| § | 00A7 | 0167 | § |
signo de sección |
| ¨ | 00A8 | 0168 | ¨ |
diéresis |
| © | 00A9 | 0169 | © |
signo de copyright |
| ª | 00AA | 0170 | ª |
indicador ordinal femenino |
| « | 00AB | 0171 | « |
comillas anguladas de apertura |
| ¬ | 00AC | 0172 | ¬ |
signo de negación lógica |
| ® | 00AE | 0174 | ® |
signo de marca registrada |
| ¯ | 00AF | 0175 | ¯ |
raya alta |
| ° | 00B0 | 0176 | ° |
signo de grado |
| ± | 00B1 | 0177 | ± |
signo de más/menos |
| ´ | 00B4 | 0180 | ´ |
acento agudo |
| µ | 00B5 | 0181 | µ |
signo de micro |
| ¶ | 00B6 | 0182 | ¶ |
signo de fin de parágrafo |
| · | 00B7 | 0183 | · |
punto medio (coma georgiana) |
| ¸ | 00B8 | 0184 | ¸ |
cedilla |
| º | 00BA | 0186 | º |
indicador ordinal masculino |
| » | 00BB | 0187 | » |
comillas anguladas de cierre |
| ¿ | 00BF | 0191 | ¿ |
signo de interrogación de apertura |
| À | 00C0 | 0192 | À |
A con acento grave |
| Á | 00C1 | 0193 | Á |
A con acento agudo |
| Â | 00C2 | 0194 | Â |
A con acento circunflejo |
| Ã | 00C3 | 0195 | Ã |
A con tilde |
| Ä | 00C4 | 0196 | Ä |
A con diéresis |
| Å | 00C5 | 0197 | Å |
A con anillo |
| Æ | 00C6 | 0198 | Æ |
Ligadura AE |
| Ç | 00C7 | 0199 | Ç |
C cedilla |
| È | 00C8 | 0200 | È |
E con acento grave |
| É | 00C9 | 0201 | É |
E con acento agudo |
| Ê | 00CA | 0202 | Ê |
E con acento circunflejo |
| Ë | 00CB | 0203 | Ë |
E con diéresis |
| Ì | 00CC | 0204 | Ì |
I con acento grave |
| Í | 00CD | 0205 | Í |
I con acento agudo |
| Î | 00CE | 0206 | Î |
I con acento circunflejo |
| Ï | 00CF | 0207 | Ï |
I con diéresis |
| Ñ | 00D1 | 0209 | Ñ |
N con tilde |
| Ò | 00D2 | 0210 | Ò |
O con acento grave |
| Ó | 00D3 | 0211 | Ó |
O con acento agudo |
| Ô | 00D4 | 0212 | Ô |
O con acento circunflejo |
| Õ | 00D5 | 0213 | Õ |
O con tilde |
| Ö | 00D6 | 0214 | Ö |
O con diéresis |
| Ø | 00D8 | 0216 | Ø |
O con barra |
| Ù | 00D9 | 0217 | Ù |
U con acento grave |
| Ú | 00DA | 0218 | Ú |
U con acento agudo |
| Û | 00DB | 0219 | Û |
U con acento circunflejo |
| Ü | 00DC | 0220 | Ü |
U con diéresis |
| ß | 00DF | 0223 | ß |
doble s (alemán) |
| à | 00E0 | 0224 | à |
a con acento grave |
| á | 00E1 | 0225 | á |
a con acento agudo |
| â | 00E2 | 0226 | â |
a con acento circunflejo |
| ã | 00E3 | 0227 | ã |
a con tilde |
| ä | 00E4 | 0228 | ä |
a con diéresis |
| å | 00E5 | 0229 | å |
a con anillo |
| æ | 00E6 | 0230 | æ |
diptongo (ligadura) ae |
| ç | 00E7 | 0231 | ç |
c cedilla |
| è | 00E8 | 0232 | è |
e con acento grave |
| é | 00E9 | 0233 | é |
e con acento agudo i co |
| ê | 00EA | 0234 | ê |
e con acento circunflejo |
| ë | 00EB | 0235 | ë |
e con diéresis |
| ì | 00EC | 0236 | ì |
i con acento grave |
| í | 00ED | 0237 | í |
i con acento agudo |
| î | 00EE | 0238 | î |
i con acento circunflejo |
| ï | 00EF | 0239 | ï |
i con diéresis |
| ñ | 00F1 | 0241 | ñ |
n con tilde |
| ò | 00F2 | 0242 | ò |
o con acento grave |
| ó | 00F3 | 0243 | ó |
o con acento agudo |
| ô | 00F4 | 0244 | ô |
o con acento circunflejo |
| õ | 00F5 | 0245 | õ |
o con tilde |
| ö | 00F6 | 0246 | ö |
o con diéresis |
| ÷ | 00F7 | 0247 | ÷ |
signo de división |
| ø | 00F8 | 0248 | ø |
o con barra |
| ù | 00F9 | 0249 | ù |
u con acento grave |
| ú | 00FA | 0250 | ú |
u con acento agudo |
| û | 00FB | 0251 | û |
u con acento circunflejo |
| ü | 00FC | 0252 | ü |
u con diéresis |
| ÿ | 00FF | 0255 | ÿ |
y con diéresis |
| ? | 20AB | 20AB | &dong; |
dong |
Topics: Diseño Web | No Comments »
Visor de imágenes Spacegallery – jQuery
By creacciona | January 4, 2010
Spacegallery. visor de imagenes en JQuery
Topics: Desarrollo web, jquery | No Comments »
Cómo crear un virus informático
By creacciona | December 6, 2009
En este artículo te enseñaremos a desarrollar un virus informático en cuestión de minutos usando las últimas técnicas de programación en C++ usando muchos punteros a null y exploits a ninguna parte.
Es evidente que si has llegado aquí desde un enlace en Google, algo no funciona bien, porque primeramente este post no sirve para nada, y si lo que buscas es hacer un virus para hacer daño, lo mejor que puedes hacer es instalar Windows Vista y hacer páginas web en Drupal.
Creo que con eso es suficiente.
Topics: Actualidad, Desarrollo web, Internet | No Comments »
¿UTF-8 o ISO-8859-1? Problemas con el charset en PHP
By creacciona | December 3, 2009
¿Que usar? UTF-8 o ISO-8859-1. Personalmente yo uso solamente UTF-8 para codificar todo, aunque sean páginas en castellano. A la larga se evitan muchos problemas . Los problemas de charset surgen de dos cuestiones:
* Estoy abriendo una fuente utf-8 y mi salida se ve en iso-8859-1
* o bien el opuesto: iso-8859-1 la fuente, salida utf-8
Primer caso: Por lo general se dá cuando salen en vez de eñes y tildes, caracteres extraños del tipo úl , á , etc… la cadena de origen estaría codificado en UTF-8 y nuestra página se vé en iso-8859-1
Solución: La fuente está codificada en utf8 y es necesario pasarlo a Latin-1. Esto se hace con la función utf8_decode().
1 //En este caso hacemos la conversion de utf-8 a iso-8859-1
2 $cadena = utf8_decode($origen);
Segundo caso: En vez de caracteres especiales vemos unos signos de interrogación o cuadraditos con números. Esto significa que no puede traducir el caracter a alguno Unicode porque está “mal formado”.
Solución: Hay que convertir nuestra cadena a utf-8 mediante la función utf8_encode().
1 //hacemos la conversion de iso-8859-1 a UTF-8
2 $contenido = utf8_encode($origen);
Todos estos problemas se solucionarian usando el mismo charset para todo, recomendable usar UTF-8 en nuestras páginas, ya que si vamos a usar llamadas AJAX, todo esto se trata en UTF-8, y así nos evitaremos luego las complicaciones de los distintos juegos de caracteres.
Topics: Desarrollo web | No Comments »
Publicar en el muro de Facebook desde tu web con PHP
By creacciona | November 30, 2009
La idea es usar un formulario desde nuestra página web que publique mensajes en el muro de Facebook. Para ello usaremos el método de la API stream_publish()
Como siempre que queramos hacer uso de la API de Facebook, deberemos tener creada una aplicación Facebook que nos proporcionará las clave API y la clave secreta.
Para crear la aplicación entra aqui:
http://www.facebook.com/developers/createapp.php
También debes haber descargado el API PHP de facebook, lo puedes hacer desde el siguiente link:
http://svn.facebook.com/svnroot/platform/clients/packages/facebook-platform.tar.gz
Código PHP para publicar mensajes desde tu Web en el muro de Facebook
< ?php
include_once("path_libs/facebook.php");
$api_key = "TU_API_KEY";
$secret_key ="TU_SECRET_KEY";
$facebook = new Facebook($api_key, $secret_key);
$user = $facebook->require_login();
$message = $_POST['mensaje']; //Este es el texto que vamos a publicar, lo suyo es que sea una variable POST de un formulario
$has_permission = $facebook->api_client->users_hasAppPermission(”publish_stream”);
//El usuario debe dar permiso para que tu aplicación publique información en su muro.
if($has_permission)
{
$facebook->api_client->stream_publish($message);
}
else {
$address = “http://www.facebook.com/connect/prompt_permissions.php?api_key=
header(”location:$address”);
}
?>
Topics: Desarrollo web, Facebook | 3 Comments »
Cómo integrar comentarios en tu web con facebook Connect
By creacciona | November 4, 2009
Facebook Connect es un poderoso conjunto de APIs para desarrolladores web que permiten usar la infraestructura de comentarios y autenticación de usuarios de facebook dentro de otras páginas web. Hay que aclara que para usar Facebook Connect, lo primero es tener una cuenta en Facebook.
1. Crear la aplicación facebook que nos proporcionará nuestra clave API para utilizar facebook Connect. Para crear una nueva aplicación, accedemos al panel de aplicaciones de nuestra cuenta de facebook.
http://www.facebook.com/developers
También puedes usar el siguiente enlace que te va guiando en 3 pasos con ejemplos de código.
http://developers.facebook.com/connect.php
Una vez creada la aplicación, vemos que tiene asociada una clave API y una clave secreta. La clave API es la que necesitaremos para usar facebook connect, mientras que la clave secreta ( junto con la clave API ) nos porporcionará el acceso a la API de Facebook y nunca debe ser difundida.
2. El siguiente paso es añadir en nuestro código HTML algunas lineas JavaScript. Primero añadir en el tag ‘html’ de nuestra web :
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
3. Añadir las librerias JS que nos permiten conectar con facebook. Estas llamadas Javascript se recomiendan poner justo antes del cierre de body, pero pueden ser puestas en cualquier sitio:
<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/es_LA" type="text/javascript"></script>
<script type="text/javascript">FB.init("<API_KEY>");</script>
<script type="text/javascript">FB.init("<API_KEY>");</script>
donde <API_KEY> lo sustituimos por la clave API de nuestra aplicación.
4. Por último, añadir donde se quieran mostrar los comentarios, las etiquetas fbml que gestionan y montan toda la parte de los comentarios:
<fb:comments width=”520px” numposts=”5″ reverse=”true” >
<fb:title>Comments</fb:title>
</fb:comments>
Otros parámetros de la etiqueta fb:comments
- xid: el identificador único de tu caja de comentarios, debe ser único, es un campo de tipo alfanumérico.
- canpost: sirve para determinar si los usuarios pueden publicar comentarios o no, es un campo de tipo booleano, o sea que admite true o false.
- candelete: sirve para permitir a cualquier usuario borrar cualquier comentario, tened en cuenta que un usuario siempre puede borrar los comentarios que él haya escrito. Es también un campo de tipo booleano con true o false.
- numposts: número máximo de comentarios que se mostrarán en pantalla. Obviamente este campo es de tipo entero (o sea, de números).
- publish_feed: sirve para publicar en el feed principal de Facebook el comentario del usuario.
- showform: para introducir los posts sin recargar la página completa, mejora además un poquito la estética del formulario.
más info: http://wiki.developers.facebook.com/index.php/Fb:comments
Por último, y como prueba de que esto funciona, podeis visitar http://fotos.creacciona.com/
Tutoriales en video oficiales sobre Facebook Connect:
Topics: Desarrollo web, Facebook, Internet | 3 Comments »
lanetro prescinde de su equipo editorial
By creacciona | October 29, 2009
lanetro, el portal de contenidos orientado al ocio en España, despide a toda su plantilla editorial encargada de introducir los contenidos y actualizaciones del portal. Se queda de esta manera sin la cualidad que los diferenciaba con respecto a otros portales de la misma temática, como salir.com y 11870.com, con tan sólo el equipo de desarrollo encargado de velar por el código y el funcionamiento del sistema, un monstruo programado en un Drupal reconvertido, el cuál no ha hecho más que dar problemas de rendimiento desde su puesta en marcha.
Topics: Actualidad, Internet | No Comments »
llamada AJAX para mostrar dentro de una capa una URL
By creacciona | October 28, 2009
La idea es parsear el contenido que genera un script php en una capa de nuestra web sin tener que usar iframes. De esta forma podemos crear módulos independientes de contenidos y poder ser reutilizados en otras partes de nuestra página web. Por supuesto, hay otros métodos para mostrar el contenido de un script en una capa, como la función include() en PHP.
ATENCION: la URL tiene que ser interna al dominio. Esto no funciona con urls con dominios distintos. El script al que se llama debe estar dentro de nuestra web.
Código Javascript para hacer la llamada AJAX:
<script language="javascript" type="text/javascript">
function ajaxobj() {
try {
_ajaxobj = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e) {
try { _ajaxobj = new ActiveXObject("Microsoft.XMLHTTP"); }
catch (E) {
_ajaxobj = false; }
}
if (!_ajaxobj && typeof XMLHttpRequest!='undefined') { _ajaxobj = new XMLHttpRequest(); }
return _ajaxobj;
}
function carga(w,url)
{
ajax = new ajaxobj();
ajax.onreadystatechange=
function()
{
if (ajax.readyState==1)
{
if (i==1) document.getElementById(w).innerHTML = "<div align='center'><img src='/img/cargando.gif' width='268px' height='224px'></div>";
else
{
if (i==2) document.getElementById(w).innerHTML = "";
else document.getElementById(w).innerHTML = "<img src='/img/load.gif' width='16px' height='16px'>";
}
}
if (ajax.readyState == 4)
{
document.getElementById(w).innerHTML = ajax.responseText;
if(ajax.status==200)
{
document.getElementById(w).innerHTML = ajax.responseText;
}
else
{
if(ajax.status==404) {document.getElementById(w).innerHTML = "<div align='center'>La direccion no existe</div>"; }
else { document.getElementById(w).innerHTML = "Error: "+ajax.status;
}
}
}
};
ajax.open("GET", url, true);
ajax.send(null);
}
</script>
y este es el código que vá en el HTML para llamarlo:
<div id="ultimas_noticias"></div>
<script language="javascript" type="text/javascript">
carga('ultimas_noticias','/script_capa.php');
</script>
Topics: Actualidad | No Comments »