Archive for the 'Pami' Category

PAMI: Aprendiendo Django con Ejemplos (1): Arrancando.

Fuente: Learning Django by example 1 start the engine

Hecho en falta Tutoriales de Django en Castellano, si alguien encuentra, que avise

Aquí va mi aportación en traducción a mi manera (se agradecen correcciones).

Otro tutorial más de Django, con un par de diferencias:
* El autor es totalmente novato acerca la programación en Django.
* Cada paso esta cuidadosamente guardado con Google Code , podrás bajarte la última versión para entender cómo evoluciona el proyecto.

Pensando a lo Grande

Realmente adoro la intuitiva interfaz de Delicious Library, - creo que no tiene nada que ver con Del.icio.us -. Lamentablemente es solo para Mac, y no creo que se pueda escalar debido a la falta de un servidor de base de datos.

He decidido hacer Gelman que será la librería de cosas chulas.

Escogí Django por el Bombo “python on rail“, solo necesitaba un ligero framework web en python - Django no es de lo más ligeros – Ojala pueda disfrutar con el proceso de desarrollo.

En el siguiente tutorial quisiera mostrar el código en cada paso cuando mencione “check r#”, puedes hacer el checkout:

HTML:
  1. svn checkout http://gelman.googlecode.com/svn/trunk/gelman -r3 gelman

En este caso # es 3. Si google soportara Trac esto sería mucho más fácil.

Arrancando

‘Aquí instalamos Django tenemos múltiples tutoriales para ello, no lo voy a repetir otra vez, el autor usa SqlLite3 por simplicidad, comenta que en producción migrara a MySql’ “check r5”.

Después añadimos la aplicación library:

HTML:
  1. python manage.py startapp library

Gelman está diseñado como un ligero gestor de ebooks, con especial atención en la reutilización de componentes y uso de web services. Por ejemplo el metadata es com Amazon Web Service AWS, la etiqueta sugerida viene de Yahoo.

Solo la información esencial es almacenada localmente, como la cartografía entre la metadata y el ebook. Los siguientes modelos, Author, Publisher, y Books se han añadido.

PYTHON:
  1. class Book(models.Model):
  2.     isbn13 = models.CharField(maxlength=13, primary_key=True)
  3.     name = models.CharField(maxlength=255)
  4.     authors = models.ManyToManyField(Author)
  5.     pages = models.IntegerField()
  6.     publisher = models.ForeignKey(Publisher)
  7.     pub_date = models.DateTimeField(‘data published’)

ISBN-13 es el ultimo estándar, añadiremos ISBN-10 mas tarde si es necesario, Author y Book tienen una relación Muchos a Muchos, usaremos models.ManyToManyField como se sugiere aquí

Finalmente hacemos:
- Añadimos Django.contrib.admin en INSTALLED_APPS setting
- Sincronizamos el cambio en la BD “sinc”
- Editamos el fichero urls.py para activar la admin page.

Ahora podemos autentificarnos en http://localhost:8000/admin usamos “Bookstack” y “gelman” como Usuario y Password. Check r7

En principio, los libros se añaden manualmente para las pruebas, deberos automatizar este tedioso procedimiento mas tarde. Tener en cuenta la relación entre “Libro” y “Publicador”, esto es realmente guay que la administración nos ayude a relacionar los modelos.

Aprendiendo Django con Ejemplos 1- add book

Añadimos una línea a urls.py para activar la interface de usuario para los usarios normales.

HTML:
  1. (r‘^library/(?P<isbn>\d+)/$’, ‘gelman.library.views.detail’),

Añadimos a detail.html en “Template/books” como una vista de template, no olvides añadirla en TEMPLATE_DIRS en settings.py, Implementamos detail in “library/views.py”:

PYTHON:
  1. def detail(request, isbn):
  2.     book = get_object_or_404(Book, isbn13=isbn)
  3.     return render_to_response(‘books/detail.html’, {‘book’: book})

Ahora podemos acceder a la información en “Http://localhost:8000/library/9780596009250/”, esto solo es un aburrido texto que redefiniremos mas tarde. Check r8.

Haciendo feliz al bibliotecario.

En una biblioteca real, el usuario puede navegar, buscar, pedir prestado, devolver libros, pero solo el bibliotecario gestiona la colección, es menos divertido escribir toda la “meta data” del libro mientras nosotros la podemos obtener de Amazon.

Un Bibliotecario utilizar un lector de código de barras, preferimos el titulo o palabra clave que el aburrido numero de 13 dígitos (ISBN).

Vamos a utilizar Ajax, con The Dojo Javascript Toolkit puedes bajarte la versión dojo-1.0.2 obteniendo las completas ventajas de AOL’S CDN.

Como servir ficheros estáticos es probablemente la pregunta más frecuente en #django desde la URLConf basado en expresiones regulares más o menos sobre destructivas.

HTML:
  1. (r‘^static/(?P<path>.*)$’, ‘django.views.static.serve’, {‘document_root’: ‘/home/bookstack/projects/media’}),

Preparamos el fichero correctamente:

HTML:
  1. cd /home/bookstack/projects/media;
  2. mkdir scripts
  3. sudo mount -o bind $DOJO_ROOT/trunk scripts

Ahora http://localhost:8000/static/scripts/dojo/dojo.js es donde apunta la librería de dojo

Consideramos que los usuarios introducen el guión el espacio de ISBN, necesitaremos anular la “maxlength” por defecto del atributo ISBN13 and añadir una validación para ISBN usando javascript:

JavaScript:
  1. dojo.addOnLoad(function() {
  2.             var p = dojo.byId(“id_isbn13″);
  3.             var n = document.createElement(“div”)
  4.             p.parentNode.appendChild(n);
  5.  
  6.             dojo.connect(p, ‘onblur’, function() {
  7.                 if(isValidISBN(p.value)) {
  8.                     n.innerHTML = “<div>Searching…</div>”
  9.                 } else {
  10.                     n.innerHTML = “<div>Invalid ISBN</div>”
  11.                 }
  12.             });
  13.             p.removeAttribute(“maxlength”);
  14.         });

NOTA: IsValidISBN se fusiona dentro dojox.validatie.isbn, renombrado como djox.validate.isValidsbn. Esto es uno de beneficiós de usar dojo SVN.

Esto es una buena oportunidad para personalizar la pagina de admin, una nueva template add.html es añadida:

HTML:
  1. {% block content %}
  2.         <div id=“content-main”>
  3.         <h1>Add Book<h1>
  4.             <input type=“textid=“id_isbn13″ class=“vTextField” name=“isbn13″ size=“30value=“”/>
  5.             <input type=“button” id=“search_isbn” value=“Search ISBN” />
  6.             <div id=“isbn_valid”></div>
  7.             <input type=“textid=“id_title” class=“vTextField” name=“titlesize=“30value=“”/>
  8.             <input type=“button” id=“search_title” value=“Search Title”/>
  9.             <form action=“” method=“post” id=“book_form”> <div>
  10.                 <fieldset class=“module aligned ()id=“books”>
  11.                 <div class=“form-row” id=“firstrow”> No book found
  12.                 </div>
  13.                 </fieldset>
  14.                     <div class=“submit-row”>
  15.                         <input type=“submit” value=“Save and add another” name=“_addanother”  />
  16.                         <input type=“submit” value=“Save and continue editing” name=“_continue” />
  17.                         <input type=“submit” value=“Save” class=“default” />
  18.                     </div>
  19.  
  20.             </div></form>
  21.         </div>
  22. {% endblock %}

Si usamos XmlHttpRequest, tendremos que parsear y crear un proxy para interpretar el aburrido xml, nada de esto es agradable. La interface de AWS's JSONP viene al rescate, en Dojo 0.9, dojo.io.script.get substituye la magica dojo.io.bind con sintasis TWisted , esto es todavia mas agradable.

JavaScript:
  1. dojo.connect(searchISBN, ‘onclick’, function() {
  2.         dojo.io.script.get({
  3.             url: ‘http://xml-us.amznxslt.com/onca/xml’,
  4.             content: {
  5.                 Service: ‘AWSECommerceService’,
  6.                 SubscriptionId: ‘19267494ZR5A8E2CGPR2′,
  7.                 AssociateTag: ‘kokogiak7-20′,
  8.                 Operation: ‘ItemLookup’,
  9.                 Style: ‘http://kokogiak.com/amazon/JSON/ajsonSingleAsin.xsl’,
  10.                 ContentType: ‘text/javascript’,
  11.                 IdType: ‘ISBN’,
  12.                 ResponseGroup: ‘Medium’,
  13.                 SearchIndex: ‘Books’,
  14.                 ItemId: isbn.value,
  15.             },
  16.             callbackParamName: “CallBack”
  17.             }).addCallback(function(response) {
  18.                 var item = response.Item;
  19.                 var row = dojo.byId(“firstrow”);
  20.                 row.textContent = null;
  21.                 var node = document.createElement(“div”);
  22.                 node.innerHTML = ‘<div> <img src="’ + item.thumburl + ‘"/> ‘ + item.title;
  23.                 row.appendChild(node);
  24.             });
  25.     });

Nota: Todos los parametros son case-Sensitive, especialmente CALLBACK para "callbackParamName" Oh olvidaba añadirlo al repositorio, check r11 para la ultima versión, continuaremos en el capitulo 2 (Pendiente de traducir)

El codigo anterior es una idea dojoized de Kokogiak's, y usaremos us ajsonSingleAsin.xsl para pequeños prototipos, que desarollamos en XSLT para los requerimientos del capitulo siguiente.

Aprendiendo Django con Ejemplos 1 - add book by ISBN

PAMI: La primera impresión es lo que cuenta.

Otra de mis cutres salchicheras traducciones ya sabéis si no os gusta la traducción viento...

En el blog de Vandelay Design encuentro este pedazo de post que habla sobre la primera impresión de un visitante cuando llega a un WebSite, me ha gustado tanto el articulo que lo he traducido (chapuzeramente) para no perderlo entre mis links de del.icio.us y empaparme muy mucho de lo que dicen.

Fuente Original http://vandelaydesign.com/blog/design/first-impression/ (Inglés)

Factores que intervienen en la primera impresión que transmite tu WebSite.

1. Tiempo de carga.

La mayoría de nosotros somos muy impacientes, no regresamos a las páginas que cargan lentamente, Por otro lado, la carga rápida de las paginas (otro articulo interesante http://vandelaydesign.com/blog/design/designing-pages-to-load-quickly/ ) fomenta que el visitante navegue por tu site, porque sabe que no tendrá que esperar mucho en la carga de cada página.

2. Mensajes de error.

Si los nuevos visitantes se encuentran con errores y no les es posible acceder a tu site, estate seguro que no vuelven, hay diferentes errores que pueden ocurrir, BlogStorm (http://www.blogstorm.co.uk/) ha publicado un artículo Porque las empresas necesitan un website que trabaje (http://www.blogstorm.co.uk/blog/why-small-businesses-need-a-website/ ) .

3. Colores.

El aspecto de tu site obviamente es un factor importante en la primera impresión de tus visitantes, el color en especial tiene un gran impacto en el atractivo general del site.
Escoger la combinación de colores adecuada, puede ser difícil pero afortunadamente tienes múltiples herramientas que te pueden ayudar. (Recursos, links y algunos artículos sobre la filosofía del color.).

4. Logo/Branding.

Otro factor importante en la apariencia general de tu website es el Logo y el Branding (No sé cómo traducirlo, tal vez formato de marca, identidad corporativa, se aceptan sugerencias) , Lo más importante, el Logo debe contribuir a la marca de tu empresa, en la idea que tus visitas tienen de ti. Para más información mirar What Makes a Great Logo?

5. Imágenes del Header.

Las imágenes del header demasiado llamativas o dominantes usadas habitualmente tienen un duro efecto en las primeras impresiones. Personalmente no soy un gran seguidor de los headers para blogs, pero algunos han tenido muy buenos resultados.

6. Tipografías.

Algo sutil suele ser la influencia de las fuentes, un cambio en las tipos, no debe ser un cambio drástico pero puede crear la diferencia.
Mirar Five Simple Steps to Better Typography

7. Layout.

Uno de los elementos de diseño más importantes es el LAYOUT, Sea cual sea la disposición que utilice debe llamar la atención del lector a los temas que son más importantes.

El LAYOUT no solo debe ser para crear un atractivo diseño sino también para ser un site fácil de usar por los visitantes.
Mientras la mayoría de sites utilizan un diseño bastante estándar, una buena manera de destacar tu site es tener un creativo LAYOUT, pero por supuesto debe asegurarse que su LAYOUT creativo añade eficacia en vez de afectarle la facilidad de uso.

8. Publicidad.

Una sencilla manera de tener una mala impresión es estar lleno de publicidad. La mayoría de los actuales usuarios de internet, comprenden que haya publicidad en la mayoría de los websistes, pero demasiada publicidad, tipos erróneos de publicidad y la mala disposición de los anuncios harán que nuestros usuarios desaparezcan.

Una regla general es que debes tener la publicidad en los lugares que no estorben al usuario, la publicidad animada es sensible de distraer y molestar a los usuarios.

Si utilizas publicidad relevante para los usuarios y la mantienes fuera del flujo de tu contenido, Normalmente los usuarios no lo tienen en cuenta como efecto negativo.

9. Tu reputación.

Si tienes buena relación con otros bloggers, estas enlazado y tienes opiniones positivas, vendrán con una pre-actitud positiva.

10. Facilidad de navegación.

Todos hemos estado probablemente en sites que parecían que tenían mucho contenido que ofrecernos pero no encontramos lo que buscamos. No estoy seguro si hay algo mas frustante en site que una navegación pobre o mala navegación.
Una navegación bien construida puede ayudar a tus visitantes a tener una muy positiva experiencia en tu site.

11. Propósito Claro.

Los nuevos visitantes deberían tener rápidamente el objetivo, tematica del sitio.
Algunos sitios incorporan muy eficazmente una línea descriptiva que resume el objetivo del site.
La página About puede ser de gran ayuda para comunicar nuestro objetivo.

12. Items no profesionales.

Imágenes de mala calidad, gifs animados y contadores suelen llevara a una primera impresión negativa.

13. Calidad de las imágenes y las fotos.

Es asombroso el gran impacto que pueden tener en un site, fotos o gráficos de gran calidad. Afortunadamente tenemos múltiples recursos para obtener imágenes de alta calidad a un bajo precio, incluso algunos gratuitos.
Buscar una buena foto gratis no vale la pena cuando por 1 o 2 tienes lugares que encontraras buen material rápidamente, este link te puede ayudar.

14. Accesibilidad.

La Accesibilidad es el gran rompecabezas - Elemento pendiente - en el diseño Web. La realidad es que no todos tus visitantes están englobados en el visitante medio. Muchos tienen hándicaps o discapacidades, algunos usan navegadores antiguos, o tienen conexiones muy lentas, etc. Si tu website no es accesible para el visitante siempre se llevara una mala impresión.

15. Popups y Pop-unders

La mayoría de usuarios utilizan algún bloqueador de popups, pero algunos websites insisten en su uso. La mayoría de usuarios no aprecian los popups que no han sido bloqueados, esto les causa muy mala impresión. Algunos sites sin embargo utilizan popups de manera efectiva, debes valorar los pros y los contras.

16. Vídeo y Audio.

Cada vez mas y mas usuarios tienen conexiones rápidas, audio y vídeo se convertirá en algo muy común. Algunos visitantes aprecian estos elementos por ejemplo YouTube.
Un buen uso seria el que el vídeo no empiece automáticamente sin que el usuario pulse explicitamente.

17. Asociaciones.

Los visitantes percibirán una buena impresión si tienes puntos de unión con Grandes Empresas.

18. Calidad de Contenido.

Por supuesto la calidad del contenido no se puede olvidar en esta lista. Mientras el contenido no tiene el impacto instantáneo de algunos puntos de esta lista, pero si tienen un gran impacto en los usuarios que pasan 1 minuto o mas en tu site. Para la primera vez que un usuario te visita que encuentre lo que busca o que le parezca bueno la recordara mucho más fácilmente.

19. Tono.

El tono de un contenido puede tener impacto en la primera impresión, una actitud negativa en un buen contenido puede ser contraproducente.

20. Numero de Comentarios y Trackbacks.

Los visitantes normalmente tienen la percepción ('acertada') de un site con muchos comentarios y trackbacks tiene algo que ofrecerles, que es un recurso valorable. Intenta propiciar los comentarios en tu site.

21. Intros Flash.

Positiva o Negativa las intros en flash tienen un impacto muy grande en la primera impresión. A mi no me gustan demasiado las intros en flash, creo que tiene lugar en ciertas industrias, pelis, música, valóralo.

Falta Añadir algo más a la lista.???

« Previous Page