How To: Pjax en Django Form

Esta es de las cosas que aprendo gracias a mi trabajo. Y resulta ser algo muy cool, les muestro: En este demo luego de activar el checkbox de pjax (si no están en internet explorer) -que asumo que no, para no enojarme apuff-. Pueden navegar por la página sin que esta haga refresh nunca. Nunca. Jamás. Y lo mejor es que el atrás, adelante e historial de su navegador sigue funcional.

Me explico si aún no ven la maravilla; esto es poder usar ajax en toda su web permitiendo navegar entre contenidos de diferentes urls con acciones de back y forward. En pocas palabras PushState + Ajax = pjax.

Para usar pjax en Django necesitan:

Sigan los pasos del setup y si tienen alguna duda, respondo en comentarios; pues la idea no es traducir tutoriales.

Hasta ahora todo suena bien hasta que se presenta el envío de un formulario por get. El truco está en que realmente no se hará nunca un submit como tal. Más bien se imita el submit de un form por get, que básicamente es el envío de datos por url -que gracias a pjax es posible-. Así:

$('#form-id').on('submit', function(e){
    e.preventDefault();
    $.pjax({
        url: $(this).attr('action') + '?' + $(this).serialize(),
        container: '#pjax-container-id'
    });
});

El serialize de jQuery retorna los datos de la forma listos para el url y es todo 🙂 .

Dentro de los posibles problemas que se pueden presentar está que el action que le definan a la forma no sea la url exacta que usa Django para procesar esta vista; por ejemplo la falta del slash al final de la url puede generar una redirección y esto ocasiona múltiples procesos pjax al tiempo.

Para hacer debug de pjax simplemente agreguen esto a los parámetros:

error: function(e, xhr, err){
    alert('Error: ' + err);
}

Para todo lo demás están los comments 😛 .

Jack White – Love Interruption

Boolean desde JS a Python

En algún momento me encontré con el dilema de recibir booleanos en una función de Python que es llamada desde Javascript y la manera más limpia de hacerlo me pareció simplemente enviar un string desde el JS con algún valor, por ejemplo “true” y otro vacío “”; también podría usarse null. Si hacen la prueba en Python se puede ver que cualquier cadena no vacía en booleano es true, la cadena vacía resulta false y el null viene siendo None que también resulta false en booleano.

The Cardigans – Communication

PS: Gracias a @JamF0x por la alternativa de null !

Enter en un Form Ajax

Cuando se tiene una función ajax para manejar un formulario la gracia de todo es que las operaciones sean instantáneas y no se requiera nunca refrescar la página. La magia de ajax se pierde cuando el usuario termina; y en vez de darle click al botón que tiene bind, puesto con el mayor de los cuidados llamando a nuestra querida y mágica función ajax; el usuario da enter y nuestro form se envía dejando una pantalla blanca para nada mágica. La solución es tan simple como agregar este evento al form:

<form action="" method="post" onsubmit="return false;">
...
</form>

El botón sería algo así:

<input type="submit" value="Aceptar" />

O si prefieren el tag button:

<button type="submit">Aceptar<button>

Lo que sucede al definir onsubmit como “return false;” es que el formulario no hará el submit como normalmente lo haría, de hecho, no hará ningún submit. Esto arregla el problema inicial, ahora solo deben manejar el llamado ajax como deseen 🙂 . En Django recomiendo usar dajax (L)

Lykke Li – Get Some (God bless Sweden (L) )

Baby Steps en Django

Antes de empezar a hablar de proyectos y demás addons de Django (pronunciado yan-goh, pues la ‘D’ es silenciosa) debí empezar por este post. Primero que todo muy resumido les digo que Django es de lo mejorcito en frameworks para desarrollo web y está hecho en Python.

Para usarlo por supuesto deberán tener instalado python en su útima versión estable preferiblemente. Si usas MacOS ya viene por defecto y es solo hacer esto para probar:

Python Consola

Lo siguiente es descargar Django descomprimirlo como prefieran y por consola cambiar al directorio donde se descomprimió y ejecutar lo siguiente:

Instalando Django

Que por supuesto yo no voy a correr porque ya lo tengo instalado 😛 .

Les pédira el pass de administrador y hará lo suyo…

Comprobamos que está django instalado; primero abrimos python y luego importamos django y le pedimos la versión instalada:

Comprobar instalación

(more…)

Bootstrap!

El título del post bien podría ser suficiente y ya podrían parar de leer los que saben a lo que voy. Pero tu que seguiste leyendo, entérate:

  • Bootstrap es un toolkit de estilos CSS, muy web 2.0 y muy muy bonito, listo para usar  y creado por Twitter.
  • En su última versión le agregaron también funciones de JavaScript que complementan el CSS.
  • Es cross-browser 🙂 .
  • Bootstrap también viene en versión LESS; esto es CSS un poco más inteligente y reutilizable (L) .
  • La documentación habla por sí sola, es el vivo ejemplo de Bootstrap en acción y todo muy bien explicado.
  • Para los que ya usan uni-form, es completamente compatible usando estos templates.

Este proyecto resulta de lo más interesante para programadores que no tienen tiempo, no saben diseñar (vamos, que ninguno de nosotros programa y diseña. No mientan por favor) ni tienen dinero para pagar por un diseño. Y sé que en esta definición se van un poco 😉 . Bootstrap tiene la paleta de colores ideal para la mayoría de páginas y además puede acomodarse con otros colores. Por todo eso, recomiendo mucho este proyecto, existen muchas alternativas, pero me parece esta la más fácil de usar, muy funcional y atractiva.

Bootstrap en GitHub

Amy Winehouse – Tears Dry On Their Own

Como generar ingresos con tu web

Para nadie es un secreto que este blopp usa usaba adsense para generar ingresos para mi, y no voy a disfrazar esto con que es para donarlos o alguna buena causa (aunque si sirve para el host 😛 ). El mes pasado alcanzé mis primeros 100 dólares 😀 y a final de este mes les cuento como me fue al recibir el pago y esas cosas 😛 .

Pero este blopp no genera ingresos únicamente con AdSense, si no con Text Link Ads y muchos ni habrán notado esta publicidad que es perfectamente compatible con el Adsense de Google. Ahora lo que les voy a decir suena a que les estoy vendiendo algo, y es precisamente el caso por aquello de que nada es gratis. Pero tranquilos que les conviene (y a mí también).

Win-Win situation

Les explico, y es bastante simple: los invito a unirse a Text Link Ads. Text link ads es un sistema de compra-venta de links que han surgido durante los últimos tiempos. Se pueden definir como intermediarios que facilitan los trámites al anunciante y al vendedor, llevándose una parte del pastel como es lógico. Un webmaster da de alta su página y el servicio la aprueba o deniega siguiendo su política. A continuación la clasifica en categorías para que los anunciantes interesados en su temática se anuncien y decide si el enlace es o no apropiado para su web. Cada página tiene un precio por enlace que depende del tráfico, popularidad (datos de Alexa), cantidad de enlaces a vender y la posición de estos. Normalmente son unas decenas de dólares al mes por enlace. También está el servicio para los anunciantes y comprar enlaces para dirigir tráfico a sus webs. Ahora ¿Qué gano yo? Al ustedes unirse haciendo click en siguiente botón yo gano $25 dólares por cada site aprovado que llega gracias a mi 😀 . Y claramente ustedes podrán hacer/ganar lo mismo una vez se unan con sus propios afiliados.