Visor de imágenes para xkcd

Una de mis tiras cómicas favoritas es xkcd, y desde ya hace tiempo quería descargarme todas las tiras para tenerlas en el disco duro. Si han leido xkcd seguro sabran de los textos adicionales que Randall Munroe pone en el atributo title de las imágenes, este texto es complementario a la tira y en muchas ocasiones mas gracioso que la tira misma.

Así que si descargaba las tiras tenia que hacerlo con todo y titulo. Tuve un tiempo libre esta navidad y me puse a recolectar información de como hacerlo, lo primero era descargar las imágenes y guardar el texto del tooltip en los metadatos de la imagen, para esto me fue de mucha ayuda este articulo donde se explica como hacerlo usando la libreria PIL.

Lo siguiente era crear un visor de imágenes que mostrara los tooltip, algo complicado y mas teniendo en cuenta que esta es la segunda interfaz gráfica "seria" que hago, pero encontré muy buenos recursos como este libro online sobre tkinter con muy buenos ejemplos, ademas de un script que implementa un tooltip que me cayo de perlas.

Luego de varias horas de pelearme acomodando los widget (con pack y grid), he aquí el visor de imágenes junto con todas las tiras hasta la fecha (1-995).

• Visor de imágenes para Windows.
• Código fuente (puede causar dolor de cabeza XD).
• Tiras cómicas de 1-995.

Si bajan el código fuente necesitaran instalar las siguientes librerías:

• PIL (en Windows y Linux)
• ImageTk (solo en Linux: python-imaging-tk)
• Tkinter (solo en Linux)

Si tienen alguna sugerencia no duden en dejarla en los comentarios, siempre es bueno saber en que mejorar.

Actualización: canvas-event-js 0.2

Después de meses sin actualizar, he aquí algunas cosas nuevas que pueden encontrar en canvas-event:

• Documentación terminada.
• Soporte para zoom.
• Nuevo objeto text.
• Animaciones usando RequestAnimationFrame.
• Corrección de errores.

Ideas que tengo pero no he implementado:

• Drag-n-Drop live para evitar llamar drag en cada objeto creado, ya que demasiados callback pueden poner lenta las aplicaciones.
• moveUp, moveDown, toFront, toBack: para mover objetos entre capas (como en PowerPoint). 

Todo esto lo pueden encontrar en el repositorio de github a donde he movido el proyecto, donde ademas pueden dejar sus sugerencias y reportes de errores, su ayuda es muy importante y siempre bien recibida.

P.D.: Has creado alguna aplicación usando canvas-event, deja el link en los comentarios (simple curiosidad *¬*)

Creando un blog con django - parte 3

En la parte anterior dejamos la base de datos lista, es momento de crear las plantillas para visualizar estos datos.
Lo primero que haremos es configurar el directorio donde estaran guardas las plantillas. Creamos el directorio templates en la raíz del proyecto y editamos el archivo settings.py.

view plainprint?

1. .....  
2. import os  
3.   
4. TEMPLATE_DIRS = (  
5.     os.path.join(os.path.dirname(__file__) ,"templates"),  
6. )  
7. ....  

.....
import os

TEMPLATE_DIRS = (
    os.path.join(os.path.dirname(__file__) ,"templates"),
)
....

Así el script puede encontrar el directorio templates aun cuando cambiemos de ubicación la carpeta del proyecto. Ahora editamos el archivo urls.py para incluir la url a la pagina.

view plainprint?

1. ....  
2. urlpatterns = patterns('',  
3.     (r'^$', 'blog.views.index'),  
4.     ....  
5. )  

....
urlpatterns = patterns('',
    (r'^$', 'blog.views.index'),
    ....
)

Con esto le decimos a django que toda petición hecha a la raíz del blog sera manejada por la función index ubicada en el archivo views, la cual luce así:

view plainprint?

1. from django.shortcuts import render_to_response  
2.   
3. def index(request):  
4.   return render_to_response("index.html")  

from django.shortcuts import render_to_response

def index(request):
  return render_to_response("index.html")

Al visitar la raíz del sitio, django llamara la función index pasando como argumento un objeto request que contiene información sobre la solicitud (datos POST y GET entre otros). La función index realizar algún proceso y retornar un objeto response.

Si iniciamos el servidor de desarrollo y entramos a la dirección localhost:8000 veremos un mensaje de error como el de la imagen ya que la plantilla index.html aun no existe, así que manos a la obra.

view plainprint?

1. <!DOCTYPE HTML>  
2. <html lang="es-ES">  
3. <head>  
4.  <title>Mi Blog</title>  
5. </head>  
6. <body>  
7. <!-- hasta aquí siempre es igual -->  
8. <h1>Hola Django</h1>  
9. </body>  

<!DOCTYPE HTML>
<html lang="es-ES">
<head>
 <title>Mi Blog</title>
</head>
<body>
<!-- hasta aquí siempre es igual -->
<h1>Hola Django</h1>
</body>

No muy útil, pero por el momento es todo lo que necesitamos. Imagine que creamos otras plantillas para post individuales, contacto, faq, quejas... debemos repetir la cabecera en cada una de ellas.

El sistema de plantillas de django permite crear plantillas base con bloques que luego pueden ser reemplazados por las plantillas que heredan de ésta; para tal efecto creamos la plantilla base.html:

view plainprint?

1. <!DOCTYPE HTML>  
2. <html lang="es-ES">  
3. <head>  
4.  <title>Mi Blog</title>  
5. </head>  
6. <body>  
7. {% block content %}  
8. {% endblock %}  
9. </body>  

<!DOCTYPE HTML>
<html lang="es-ES">
<head>
 <title>Mi Blog</title>
</head>
<body>
{% block content %}
{% endblock %}
</body>

Y editamos la plantilla index.html para que extienda base.html:

view plainprint?

1. {% extends "base.html" %}  
2. {% block content %}  
3. <h1>Hola Django</h1>  
4. {% endblock %}  

{% extends "base.html" %}
{% block content %}
<h1>Hola Django</h1>
{% endblock %}

Ok, teniendo una idea general del sistema de plantillas, seguimos con la pagina inicial del blog empezando por editar el archivo views.py.

view plainprint?

1. from django.shorcuts import render_to_response  
2. from blog.models import Post  
3.   
4. def index(request):  
5.     # recuperamos 5 primeras entradas  
6.     posts = Post.objects.filter()[:5]  
7.     return render_to_response("index.html", locals())  

from django.shorcuts import render_to_response
from blog.models import Post

def index(request):
    # recuperamos 5 primeras entradas
    posts = Post.objects.filter()[:5]
    return render_to_response("index.html", locals())

Cada vez que visitemos a la raíz del blog se consultaran los primeros 5 post y se pasaran a la plantilla index.

view plainprint?

1. {# plantilla index.html #}  
2. {% extends "base.html" %}  
3.   
4. {% block content %}  
5. {% for post in posts %}  
6.     <h1><a href="/{{ post.id }}">{{ post.title }}</a></h1>  
7. <p>{{ post.pub_date}}</p>  
8. {{ post.body }}  
9.     {# esto no es muy eficiente* #}  
10.     {% for tag in post.tags.filter %}  
11.         <a href="/tags/{{ tag.tag }}">{{ tag.tag }}</a>  
12.     {% endfor %}  
13. {% endfor %}  
14. {% endblock %}  

{# plantilla index.html #}
{% extends "base.html" %}

{% block content %}
{% for post in posts %}
    <h1><a href="/{{ post.id }}">{{ post.title }}</a></h1>
<p>{{ post.pub_date}}</p>
{{ post.body }}
    {# esto no es muy eficiente* #}
    {% for tag in post.tags.filter %}
        <a href="/tags/{{ tag.tag }}">{{ tag.tag }}</a>
    {% endfor %}
{% endfor %}
{% endblock %}

* Extraer las etiquetas de esta forma no es eficiente ya que al llamar a filter (5 veces) se hace una nueva consulta a la base de datos, algunas soluciones se pueden encontrar aquí.

Con esto la pagina principal esta lista. Sigamos con la pagina individual, veremos que al trabajar con django se sigue mas o menos el mismo patrón:

view plainprint?

1. # archivo urls.py  
2. urlpatterns = patterns('',  
3.     (r'^$', 'blog.views.index'),  
4.     # expresión regular que captura el numero después de post/  
5.     (r'^post/(?P<id>\d+)$', 'blog.views.single'),  
6. )  

# archivo urls.py
urlpatterns = patterns('',
    (r'^$', 'blog.views.index'),
    # expresión regular que captura el numero después de post/
    (r'^post/(?P<id>\d+)$', 'blog.views.single'),
)

view plainprint?

1. # Archivo views.py  
2. ...  
3. # la funcion recibe el numero capturado  
4. def single(request, id=0):  
5.     # recuperar post según id  
6.     post = Post.objects.get(id=int(id))  
7.   
8.     return render_to_response("single.html", locals())  

# Archivo views.py
...
# la funcion recibe el numero capturado
def single(request, id=0):
    # recuperar post según id
    post = Post.objects.get(id=int(id))

    return render_to_response("single.html", locals())

view plainprint?

1. {# plantilla single.html #}  
2. {% block content %}  
3.     <h1><a href="/{{ post.id }}">{{ post.title }}</a></h1>  
4.     <p>{{ post.pub_date}}</p>  
5.     {{ post.body }}  
6.     {# esto no es muy eficiente* #}  
7.     {% for tag in post.tags.filter %}  
8.         <a href="/tags/{{ tag.tag }}">{{ tag.tag }}</a>  
9.     {% endfor %}  
10. {% endblock %}  

{# plantilla single.html #}
{% block content %}
    <h1><a href="/{{ post.id }}">{{ post.title }}</a></h1>
    <p>{{ post.pub_date}}</p>
    {{ post.body }}
    {# esto no es muy eficiente* #}
    {% for tag in post.tags.filter %}
        <a href="/tags/{{ tag.tag }}">{{ tag.tag }}</a>
    {% endfor %}
{% endblock %}

Notan algo raro? el código de single.html e index.html luce muy similar; podemos eliminar el código repetido moviéndolo a otra plantilla (article.html) que luego incluimos en estas.

view plainprint?

1. {# plantilla article.html #}  
2. </div>  
3.     <h1><a href="/{{ post.id }}">{{ post.title }}</a></h1>  
4.     <p>{{ post.pub_date}}</p>  
5.     {{ post.body }}  
6.     {# esto no es muy eficiente* #}  
7.     {% for tag in post.tags.filter %}  
8.         <a href="/tags/{{ tag.tag }}">{{ tag.tag }}</a>  
9.     {% endfor %}  
10. </div>  

{# plantilla article.html #}
</div>
    <h1><a href="/{{ post.id }}">{{ post.title }}</a></h1>
    <p>{{ post.pub_date}}</p>
    {{ post.body }}
    {# esto no es muy eficiente* #}
    {% for tag in post.tags.filter %}
        <a href="/tags/{{ tag.tag }}">{{ tag.tag }}</a>
    {% endfor %}
</div>

Ahora editamos las plantillas index.html y single.html para que utilicen article.html.

view plainprint?

1. {# plantilla inde.html #}  
2. {% extends 'base.html' %}  
3.   
4. {% block main_content %}  
5.     {% for post in posts %}  
6.         {# pasamos la variable post como argumento #}  
7.         {% include 'include/article.html' with post=post %}  
8.     {% endfor %}  
9.   
10. {% endblock %}  

{# plantilla inde.html #}
{% extends 'base.html' %}

{% block main_content %}
    {% for post in posts %}
        {# pasamos la variable post como argumento #}
        {% include 'include/article.html' with post=post %}
    {% endfor %}

{% endblock %}

view plainprint?

1. {# plantilla single.html #}  
2. {% extends 'base.html' %}  
3.   
4. {% block main_content %}  
5.       {% include 'include/article.html' %}  
6. {% endblock %}  

{# plantilla single.html #}
{% extends 'base.html' %}

{% block main_content %}
      {% include 'include/article.html' %}
{% endblock %}

Con esto damos por terminado esta parte. No se olviden de comentar.

P.D.: Procurare tener la próxima parte mas rápido.

Actualización mget

Debido al rediseño de megaupload mget ha dejado de funcionar, el problema se debe específicamente a que el link de descarga ya no se identifica con el id downloadlink sino con la clase download_regular_usual, ademas el tiempo de espera ahora es de 60 segundos.

Por el momento no tengo como arreglar la versión para windows pero la de linux ya esta lista, solo hay que reemplazar el archivo antiguo y dar permisos de ejecución.