Planet

Hoy voy a explicar cómo he hecho la ventanita emergente (o popup) con javascript y css que se puede ver en esta captura:


Aunque pueda parecer algo complicado no es más que html. Son dos simples divs que se muestran u ocultan según convenga.
html
En nuestra página html debemos añadir un div con el contenido que queramos que se muestre dentro del popup:

1. <div class="input">
2. <img src="/static/images/error.png" class="close" alt="close"/>
3. <div id="master">
4. <label for="master">Master password:</label>
5. <input id="masterpwd" name="master" type="password"/>
6. <br/><button type="submit" id="rec" class="imaged"></button>
7. </div>
8. </div>

Esto es un simple div con la imagen del circulito con la X y un formulario dentro.
Y también habrá que añadir el div que hace que el fondo se ponga oscuro:

1. <div id="overlay"></div>

hojas de estilo (css)
Ahora hay que darle un estilo para que aparezca centrado, que el fondo sea gris medio transparente, etc.
Este es el código css de geco que hace todas estas movidas:

1. #overlay {
2. display: none;
3. position: fixed;
4. left: 0%;
5. top: 0%;
6. width: 100%;
7. height: 100%;
8. z-index: 999;
9. background-image: url('/static/images/overlay.gif');
10. }
11.  
12. #master {
13. clear: both;
14. padding-bottom: 1em;
15. }
16.  
17. .input {
18. display: none;
19. color: black;
20. position: fixed;
21. left: 25%;
22. top: 50%;
23. width: 50%;
24. z-index: 1000;
25. text-align: center;
26. background-color: white;
27. border: 1px solid black;
28. }
29.  
30. .close {
31. cursor:pointer;
32. float: right;
33. }

Lo más importante aquí es el display: none que hace que no aparezca por defecto (ya lo mostraremos con javascript) y los atributos de posición, position: fixed para que sea fijo en la pantalla y left y top que posicionan el div. También es importante el z-indez que posiciona una cosa encima de otra.
El efecto sombreado lo hago con una imágen gif. Pero gif no soporta medio-transparencias, con gif un pixel o es transparente o es opaco. Pues muy fácil, se hace un truqui que consiste en poner un pixel negro y otro transparente alternativamente creando el efecto deseado.
Aparecer/desaparecer (javascript)
Para que aparezca el popup cuando se pulsa sobre un enlace o un div, hay que usar javascript. Lo más fácil es usar jquery y así lo he hecho yo, creando el fichero gecojs.js que contiene lo siguiente:

1. ...
2.  
3. $(document).ready(function() {
4. $(".pwdname").click(function(){
5. var pwd = $(this).next().html();
6. $(".input").fadeIn(300);
7. $("#overlay").fadeIn(300);
8. });
9. $(".close").click(function(){
10. $(".input").fadeOut(300);
11. $("#overlay").fadeOut(300);
12. });
13.  
14. $("#rec").click(function(){
15. mimasterpwd = $("#masterpwd").attr("value");
16. $("#masterpwd").attr("value", "");
17. $(".input").fadeOut(300);
18. $("#overlay").fadeOut(300);
19. setTimeout(olvidar, 10 * 60 * 1000);
20. });
21. });
22. ...

Y aquí está la mágia de jquery, al pulsar sobre cualquier objeto de la clase pwdname, se lanza la función que muestra tanto el input (popup) como el overlay (fondo gris) con un efecto de aparición (fadein)
Luego si se pulsa en el botón de cerrar o en el botón recordar se oculta con un fadeOut.
Esto no tiene más historia y es un efecto visual bastante agradable.
Fácil, Fácil :P

I am proud to announce that the Git repo has moved to sympy's official repo, so you can check out the sources of this project by: git clone git://git.sympy.org/django-sympy.gitsvn repo is still available as ususal:svn checkout https://forja.rediris.es/svn/cusl3-dsympy

Today I managed to get some useful code running:import osos.environ["DJANGO_SETTINGS_MODULE"] = "test_app.settings"from django.test.client import Clientfrom django.utils import simplejson as json data = {"method" : "solve", "params" : ["2 x + 1", "x"], "id" : "null" } req = json.dumps(data) c = Client() response = c.post('/dsympy/jsonrpc/', data=req, content_type="text/json") output = json.loads(response.content) assert output['result'] == u'[-1/2]' assert output['error'] == u'null'As you can see, this takes some json data, makes a request and returns the result. It is not very complicated, but you can see how powerful this can become once we expose more methods to this json-rpc interface.Full source code for this is available under directory test/

Lo prometido es deuda.Conforme se comentó hace exactamente un mes, una parte apreciable del trabajo que debemos realizar ha sido completado.Específicamente, se han efectuado tanto el modelo de diseño como el modelo de datos. Los respectivos diagramas que resultaron de ello fueron capturados de la pantalla y embutidos en ficheros .jpg, consiguiendo, de este modo, que puedan ser visualizados sin dificultad con un navegador. Naturalmente, los mencionados .jpg ahora están disponibles en la forja.Por otro lado, una lista con los riesgos, la cual ya estaba terminada antes del parón navideño, también ha sido subida a la forja.Al tener realizados el modelo de diseño y el modelo de datos, estabamos en disposición de terminar el documento con la arquitectura software, que ya estaba casi concluido desde algún tiempo atrás y no había podido ser completado a causa de la ausencia de aquellos. En un par de dias se terminó dicho documento y, como no podía ser de otra forma, se subió a la forja.A pesar de no especificar en el plan de trabajo de la prememoria la tarea pertinente, hemos decidido que resulta conveniente efectuar una evaluación de cada iteración que terminemos (recuérdese que estamos llevando a cabo el proyecto siguiendo la metodología RUP).En consecuencia, y teniendo en cuenta que gracias al trabajo que hemos realizado hasta la fecha podemos dar por finalizada la primera iteración (Inicio), se hace necesaria la materialización de la correspondiente evaluación. Para ello hemos elaborado un documento en el que se especifica en detalle esta. Evidentemente, este documento también ha sido subido a la forja.Y eso es todo, por el momento.Dentro de poco vamos a empezar a implementar el proyecto. Paciencia.

Lo prometido es deuda.Conforme se comentó hace casi un mes, una parte apreciable del trabajo que debemos realizar ha sido completado.Específicamente, se han efectuado tanto el modelo de diseño como el modelo de datos. Los respectivos diagramas que resultaron de ello fueron capturados de la pantalla y embutidos en ficheros .jpg, consiguiendo, de este modo, que puedan ser visualizados sin dificultad con un navegador. Naturalmente, los mencionados .jpg ahora están disponibles en la forja.Por otro lado, una lista con los riesgos, la cual ya estaba terminada antes del parón navideño, también ha sido subida a la forja.Como ya están realizados el modelo de diseño y el modelo de datos, estamos en disposición de terminar el documento con la arquitectura software, que ya estaba casi concluido y no había podido ser completado a causa de la ausencia de aquellos.Vereis como en seguida lo tenemos.

Aunque llevemos desaparecidos un mes, todo tiene su explicación. Entre las navidades y los exámenes ( en nuestra Universidad acaban de finalizar ), Locator ha estado algo parado. No obstante hemos seguido trabajando en ello y ahora mismo tenemos un problema con el módulo de comunicaciones y la lectura de datos. Podemos enviar comandos al módulo mediante Arduino pero no recibir la respuesta de estos, lo cual hace que la cosa sea bastante a ciegas. Seguramente haya que modificar el esquema original en el que viene el Telit que Libelium ensambló. Por otra parte son ya varias las personas que se han puesto en contacto interesados en el funcionamiento del proyecto, parece que esta idea gusta.
      

Hoy ha sido un día bastante productivo por lo que respecta al cliente web de GECO.
Lo primero que he hecho es implementar un sistema de captcha matematico para evitar que se registren bots. ¿Cómo? fácil, generando un par de números aleatorios entre 1 y 10 y validando que en el registro que la suma es correcta.


Por otra parte ya he implementado la funcionalidad del listado de todas las contraseñas que gestionas desde GECO.


Y haciendo uso de mis conocimientos en css, html y jquery he implementado un popup vistoso para preguntar la contraseña maestra para poder descifrar las contraseñas. Por supuesto esa contraseña nunca se va a mandar y tan solo se va a almacenar en el navegador durante un tiempo determinado.


Y por último quería destacar una funcionalidad que le he implementado basandome en el sistema de templates y es que es posible pasar mensajes o errores de una página a otra a traves de unas variables de sesión.


Nota: La palabra desautenticado me la he inventado.

Os comenté que mandé al profesor que se encarga de mi PFC una propuesta.
En ella habia dos opciones: Documentar FAI o bien Documentar FAI y a la vez crearle una interfaz gráfica.
El profesor ha esgrimido el argumento de que con la interfaz gráfica se tomaría mucho tiempo y que además lo que él quiere es que funcione el proyecto y lo antes posible. Y también me dejó a entender que la interfaz gráfica no aportaría mucho valor al proyecto porque siempre habría que actualizar la interfaz gráfica con los cambios del programa que funciona por debajo.
Este es un momento muy importante para el proyecto porque ahora ya sé en qué tengo que centrarme.
Me centraré en documentar el uso de FAI y supongo que hacer algún que otro script para automatizar las cosas.
La cosa se pone interesante.
Adrián.
      

Recientemente he adquirido el dominio libgann.org para el proyecto. Ya podéis acceder a la página del proyecto a través de http://libgann.org o http://www.libgann.org.
Un saludo.
      

Teniendo ya implementado un servidor funcional con un frontend xmlrpc y un cliente funcional de terminal es hora de empezar la parte más importante del proyecto que es el cliente web.
Buscando entre el gran número de frameworks para desarrollo web en python me encontré casi sin querer con web.py que es un framework ultrasencillo que concuerda con mi filosofía de desarrollo, las cosas lo más simple posibles.
¿Cómo implementar el cliente web?
Basandonos en el cliente de terminal es casi tan simple como
eso. No tenemos ni que tratar con bases de datos, ni con modelos complejos, puesto que gecolib ofrece una serie de métodos que hacen todas las operaciones que tendrá que hacer este cliente. Por lo tanto tan solo tenemos que hacer la interfaz, pedir datos y mostrar datos.
De momento tengo desarrollado el login y el registro en la aplicación, quizás en el registro falte un captcha para evitar que se registren bots.


El estilo ya lo tenía decidido de hace algún tiempo, algo simple, pero con alto contenido en colores fuertes, llamativo y a la vez elegante.
He utilizado imágenes para los botones, con un suave degradado, un alto contraste entre la fuente y el fondo y una ligera sombra difuminada. El svg se puede conseguir del repo, posiblemente la fuente te salga diferente porque no la tendrás, se llama "Orange".


Web.py tiene un módulo simple que genera formularios con validación, y un sistema de templates con una sintaxis muy parecida a python, por lo que facilita en gran medida el desarrollo. Por otra parte este "framework" no requiere de gran tiempo de aprendizaje y no por ello se pueden hacer menos cosas, si dominas python, este es tu framework de desarrollo web.
El mayor problema al que me he tenido que enfrentar en esta etapa del desarrollo ha sido a la hora de almacenar el objecto gecolib.GecoClient en una sessión de webpy. Al ser un objeto que contiene una conexión xmlrpc no es posible almacenarlo, por lo que he optado por almacenar la "cookie" de geco y modificar el constructor para que acepte un parametro cookie y no sea necesario pasar por el método auth.
Mañana espero tener al menos la vista de las contraseñas de un usuario autenticado.