Archivo

Entradas Etiquetadas ‘example’

Primeros pasos con Buzz (segunda parte): Un widget de Buzz para Wordpress

Jueves, 11 de Febrero de 2010
Sin comentarios

En el articulo anterior analizábamos la API de acceso a Buzz. Una vez analizada ya podemos ver como integrar Buzz en nuestra pagina. Para eso vamos a utilizar la API de Google para leer feeds y un script propio que lo que hará es mostrarnos el código HTML de los comentarios en in iframe refrescándolo cada 1 segundo. De este modo es posible crear un widget de Buzz para nuestro wordpress.

Antes de nada hay que tener en cuenta dos aspectos importantes:

  • Al estar usando librerías Ajax de Google es necesario que solicites una clave API propia:
    <script type=”text/javascript” src=”http://www.google.com/jsapi?key=ABQIAAAAMGph6fpNzf-ET0oBGVVHJxRpfcICevY5tQgqnPHEJCivekQnPxSD1FOWXFY6-VJtM6TmsT-tOJc9mg“></script>
  • En el lector de RSS debes indicar el RSS de tu cuanta de Buzz en el articulo anterior te explicamos como obtenerla.

    var feed = new google.feeds.Feed(“http://buzz.googleapis.com/feeds/111738004311961586383/public/posted”);

sample.html

<html>
        <head>
                <script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAAMGph6fpNzf-ET0oBGVVHJxRpfcICevY5tQgqnPHEJCivekQnPxSD1FOWXFY6-VJtM6TmsT-tOJc9mg"></script>
                <script type="text/javascript" src="buzz.js"></script>
        </head>
        <body>
                <div id="buzz" style="width:300px;background-color:#e1f3fa;">
                        <h1 style="font:20px Verdana;Color:#2193c5;margin:7px;">Iker.perez</h1>
                        <hr style="border: 1px dotted #CCCCCC;margin:5px 7px 0px 7px;">
                        <iframe id="buzz_msg_box" style="margin:0px 7px 0px 7px;border:0px; width:286px; height:450px;background-color:#ffffff;"></iframe>
                        <hr style="border: 1px dotted #CCCCCC;margin:0px 7px 0px 7px;">
                        <img src="buz.png" style="margin: 7px" width="100px">
                </div>
        </body>
</html>

buzz.js

google.load("feeds", "1");
var Editor;
window.onload = function()
{
Editor = document.getElementById(‘buzz_msg_box’).contentWindow.document;
Editor.designMode = "on";

}

function initialize() {
var feed = new google.feeds.Feed("http://buzz.googleapis.com/feeds/111738004311961586383/public/posted");
feed.setNumEntries(20);
feed.load(function(result) {
if (!result.error) {
var alltest = "";
var simplepost = "";
for (var i = 0; i < result.feed.entries.length; i++) {
simplepost = "";
var entry = result.feed.entries[i];

simplepost +’                <div id="message" style="font: 12px Verdana;"><b>’+entry.publishedDate.split(" -")[0]+’:</b><br/>’+entry.content+’</div>\r\n’;
simplepost = simplepost +’<hr style="border: 1px dotted #CCCCCC;"/>\r\n’;
//entry.title+"<br>"+;
alltest = alltest + simplepost ;

}
Editor.body.innerHTML = alltest;
}
});
}

function reloadComments() {
google.setOnLoadCallback(initialize);
setTimeout(‘reloadComments()’,1000);
}

reloadComments();


Ikalbeniz

Iker Noticias , , , , , ,

Sencillo Mirror de imágenes para tu Blog usando Google App Engine

Lunes, 25 de Enero de 2010
6 comentarios

Muchos de los Hostings que usamos para albergar nuestras webs tienen una limitación de ancho de banda mensual. Por tanto es bastante interesante disponer de un sistema de almacenamiento de imágenes que nos permita disponer de dichos archivos sin consumir ancho de banda de nuestro posting. En este artículo voy a explicar como realizar una pequeña aplicación para tener nuestro mirror de imágenes.

En este articulo no voy a dar por echo que el lector conoce y se maneja en el entorno Google App Engine por tanto me centrare en explicar el código utilizado.

main.py

import cgi
import os
from google.appengine.api import users
from google.appengine.ext import webapp
from google.appengine.ext.webapp.util import run_wsgi_app
import google.appengine.ext.webapp.util
from google.appengine.ext import db
from google.appengine.ext.webapp import template

class Mirror(db.Model):
 name = db.TextProperty()
 mime = db.TextProperty()
 picture = db.BlobProperty(default=None)

class GetImage(webapp.RequestHandler):
 def get(self,name):
  image = getImageFile(name)
  if (movie and movie.picture):
   self.response.headers['Content-Type'] = image.mime
   self.response.out.write(image.picture)
  else:
   self.response.out.write(“<!DOCTYPE HTML PUBLIC \”-//IETF//DTD HTML 2.0//EN\”>\r\n”)
   self.response.out.write(“<html>\r\n\t<head>\r\n”)
   self.response.out.write(“\t\t<title>404 Not Found</title>\r\n”)
   self.response.out.write(“\t</head>\r\n\t<body>\r\n”)
   self.response.out.write(“\t\t<h1>Not Found</h1>\r\n”)
   self.response.out.write(“\t\t<p>The requested URL /%s was not found on this server.</p>\r\n”%name)
   self.response.out.write(“\t</body>\r\n</html>\r\n”)

def getImageFile(name):
 images = Mirror.all()
 for image in images:
  if image.name == name:
   return image
 return None

class MainHandler(webapp.RequestHandler):

 def get(self):
  images = Mirror.all()
  template_values = {
   ’error’: “”,
   ’images’: images,
  }
  path = os.path.join(os.path.dirname(__file__), ‘form.html’)
  self.response.out.write(template.render(path, template_values))

 def post(self):
  newimage = Mirror()
  imagedata = self.request.get(“image”)
  newimage.picture = db.Blob(imagedata)
  newimage.name = self.request.POST[u'image'].filename
  newimage.mime = self.request.POST[u'image'].type
  newimage.put()
  self.redirect(“/”)

def main():
 application = webapp.WSGIApplication([('/', MainHandler),(r'/(.*)', GetImage)],debug=True)
 run_wsgi_app(application)

if __name__ == ‘__main__’:
 main()

Comos sabéis la aplicación que subimos a los servidores de Google corren en una SandBox donde no es posible escribir en disco, por tanto usaremos el sistema de almacenamiento de GAE para almacenar las imágenes. Por tanto primero de todo deberemos definir un modelo de datos.

class Mirror(db.Model):
 name = db.TextProperty()
 mime = db.TextProperty()
 picture = db.BlobProperty(default=None)

En este caso definimos la estructura Mirror con sus propiedades name (nombre de la imagen), mime (mime de la imagen) y picture (la imagen en bruto).

Comos sabéis el sistema de paths de GAE es gestionado a través de SGIApplication por tanto para poder acceder a las imágenes almacenadas deberemos definir una política de paths. En este caso he definido la siguiente:

application = webapp.WSGIApplication([('/', MainHandler),(r'/(.*)', GetImage)],debug=True)
run_wsgi_app(application)

Es decir en caso de acceder a / se nos mostrara la pagina principal a través de la clase MainHandler y en caso de que se nos muestre / se nos mostrara el archivos a través de la classe GetImage.

La Clase MainHandler

class MainHandler(webapp.RequestHandler):

def get(self):
 images = Mirror.all()
 template_values = {
  ’error’: “”,
  ’images’: images,
 }
 path = os.path.join(os.path.dirname(__file__), ‘form.html’)
 self.response.out.write(template.render(path, template_values))

def post(self):
 newimage = Mirror()
 imagedata = self.request.get(“image”)
 newimage.picture = db.Blob(imagedata)
 newimage.name = self.request.POST[u'image'].filename
 newimage.mime = self.request.POST[u'image'].type
 newimage.put()
 self.redirect(“/”)

La clase MainHandler en caso de se accedida mediante GET mostrara el formulario HTML (form.html) y un listado de imágenes almacenadas, para hacer mas legible el código he optado por usar la funcionalidad de platillas que ofrece GAE.

El formulario envía su mismo path la imagen utilizando el método POST por tanto en el tetrodo POST de la clase MainHandler donde se almacenara la imagen enviada.

La Clase GetImage

class GetImage(webapp.RequestHandler):
 def get(self,name):
 image = getImageFile(name)
 if (movie and movie.picture):
  self.response.headers['Content-Type'] = image.mime
  self.response.out.write(image.picture)
 else:
  self.response.out.write(“<!DOCTYPE HTML PUBLIC \”-//IETF//DTD HTML 2.0//EN\”>\r\n”)
  self.response.out.write(“<html>\r\n\t<head>\r\n”)
  self.response.out.write(“\t\t<title>404 Not Found</title>\r\n”)
  self.response.out.write(“\t</head>\r\n\t<body>\r\n”)
  self.response.out.write(“\t\t<h1>Not Found</h1>\r\n”)
  self.response.out.write(“\t\t<p>The requested URL /%s was not found on this server.</p>\r\n”%name)
  self.response.out.write(“\t</body>\r\n</html>\r\n”)

La clase getImage recoge en el parámetro nombre de la función get el resultado de la expresión regular definida en el path r’(.*)’. Por tanto en este caso name será el nombre del archivo. Mediante la función getImageFile recorremos la base de datos y buscamos el archivo solicitado.

def getImageFile(name):
 images = Mirror.all()
 for image in images:
  if image.name == name:
   return image
 return None

Si existe el archivo este es mostrado modificando la cabecera Content-Type con el mime del archivo para que el navegador lo muestre correctamente. En caso contrario se muestra un mensaje de error.

form.html

<!DOCTYPE HTML PUBLIC “-//IETF//DTD HTML 2.0//EN”>
<html>
<head>
<title>Upload File</title>
</head>
<body>
<h1>Select File to Upload</h1>
<form action=”" method=”POST” enctype=”multipart/form-data” >
<input name=”image” type=”file” size=”42″ />
<input type=”submit” value=”Upload”>
</form>
<H1>Index of Files</H1>
<PRE>
<IMG SRC=”/blank.gif” ALT=”     “> <A HREF=”?N=D”>Name</A>
<HR>
{% for image in images %}
<IMG SRC=”/image2.gif” ALT=”[IMG]“> <A HREF=”/{{image.name}}”>{{image.name}}</A>
{% endfor %}
</PRE>
<HR>
</body>
</html>

Se trata de un ejemplo sencillo, no hay validación de imágenes duplicadas. Además seria posible enviar un código de control a través de la petición POST para evitar que nos suban imágenes de terceros o incluso usar el sistema de loging de Google.

Iker Tecnologia , , , , , , , , , , ,

Crear un cliente de Gtalk con Adobe Air

Martes, 1 de Abril de 2008
1 comentario

Según comentan en Barrapunto Adobe lanza Flex y Air para Linux. A mi no me decía mucho, ya que conocía estas tecnologías de oídas, y la verdad es que no tenia ni idea de que se trataban.

En el artículo comentan que Air es algo similar al Prism de Mozilla, por lo que me he podido hacer una idea inicial y no he tardado en intentar hacer algún script de ejemplo.

Instalando la SDK

Lo primero que tienes que hacer es instalar el “interprete” de AIR para poder ejecutar tus aplicaciones.

http://get.adobe.com/air/
o
http://airdownload.adobe.com/air/win/download/1.0/AdobeAIRInstaller.exe

Una vez instalado el intérprete tienes que instalar la SDK que es posible descargar desde este enlace:

http://airdownload.adobe.com/air/win/download/1.0/AdobeAIRSDK.zip

Descomprimimos el ZIP y añadimos al PATH el directorio /bin

Creando un Ejemplo Básico

Creamos un Directorio llamada GTalk y dentro de este dos archivos: GTalk-app.xml y GTalk.html

Gtalk-app.xml

<?xml version=”1.0″ encoding=”UTF-8″?>
<application xmlns=”http://ns.adobe.com/air/application/1.0″>
<id>google.gmail.GTalk</id>

<version>0.1</version>
<filename>Googel Talk</filename>
<initialWindow>
<content>GTalk.html</content>

<visible>true</visible>
<width>300</width>
<height>600</height>
</initialWindow>

</application>

Donde Indicamos propiedades como el nombre de la aplicación o las dimensiones de la ventana de la aplicación.

GTakl.html

<html>
<head>
<title>Google Talk</title>
</head>

<body>
<iframe src =”http://talkgadget.google.com/talkgadget/popout” width=”100%” height=”100%” name=”gtalk” frameborder=”0″> </iframe>

</body>
</html>

Es un archivo HTML normal. En el head editamos la etiqueta titulo para definir el titulo que aparecerá en la ventana. En el body editamos una etiqueta iframe que se enlazara con el cliente flash de Gtalk propio de Google.

Si abrimos GTakl.html podemos ver que el cliente funciona correctamente.

GTalk.html en Firefox

Por tanto es hora de probar que funciona nuestro scripr de AIR. Por tanto ejecutaremos el comando ADL

$~ [ruta_air_sdk]\adl.exe GTalk-app.xml

Y veremos ejecutarse nuestra aplicación de AIR.

Gtalk ejecutandose en Adobe AIR

Finalmente “compilaremos” nuestra aplicación para generar un .air instalable y redistribuible.

Para ello deberemos primero crear un certificado.

$~ [ruta_air_sdk]\adt -certificate -cn SelfSigned 1024-RSA sampleCert.pfx samplePassword

Y finalmente generar a instalador.

$~ [ruta_air_sdk]\adt -package -storetype pkcs12 -keystore sampleCert.pfx GTalk.air
GTalk-app.xml GTalk.html

Ya disponemos de una aplicación GTalk basada en Adobe AIR multiplataforma.

Iker Manuales, Tecnologia , , ,