martes, 29 de abril de 2014

Presentación

Redacción de Tesis

Esta semana se estuvo trabajando principalmente en las correcciones de los primeros capítulos de la tesis, agregando contenido, agregando imágenes y reescribiendo párrafos para poder presentar de una manera más claras las ideas que se pretenden mostrar al lector.

Se agregaron tablas para expresar mejor algunos experimentos que aunque no están terminados se está avanzando en la idea, la parte de los capítulos de Evaluación y Solución propuesta se piensan terminar en el transcurso de esta semana para tener todo listo para las pruebas finales con el usuario.

También se redactó una presentación que será la guía para usar en la defensa de tesis, la cuál dividí en los principales capítulos de la tesis.
Se utilizó como referencia estas recomendaciones a seguir.

Código

En esta parte se estuvo trabajando en la idea de poder guardar datos desde las tiendas en línea para poder generar información de productos aunque sea "fake" para que la segunda vez que se consulte ese producto se muestra la misma información que se mostró anteriormente y ser consistente.
Para esto se creó una nueva cuenta en appspot, de google app  utilizando Python.
La idea es que el servidor Python pueda desde una URL guardar datos en su base de datos para así al momento del evento "mouseover" se guarde el dato si es que se consulta por primera vez o se muestre la información ya generada de manera random en la primera vez que se hizo "mouseover" sobre el producto.
Actualmente se tiene trabajando el servidor de manera local, estas son algunas capturas de pantalla:




También se cambió un poco el color del sidebar para poder mostrar de manera más amigable la información al usuario y no contrasten mucho los colores.
Además de una funcionalidad de promediar los resultados verdes de cada categoría para así mostrar estrellas que indican el promedio total. Por lo pronto todo es autogenerado. Pero en las siguientes semanas se estará relacionando este promedio con la otra información generada de manera automática.



Los cambios están el repositorio.

Trabajo de la siguiente semana.

  • Redacción: Terminar todas las correcciones de manera general y diseñar de manera más detallada los experimentos y terminar de redactar el capítulo de solución propuesta.
  • Código: Guardar los datos desde el javascript y comenzar a guardar datos random pero que tenga coherencia con el promedio indicado en las estrellas del producto y de esta manera poder comenzar las pruebas con usuarios.

martes, 8 de abril de 2014

Conclusiones y trabajo a futuro

Código

Esta semana se dedicó parte del tiempo a resolver los conflictos que se tenían para insertar en la segunda tienda online elegida el jQuery que se requería para poder mostrar la sidebar verde que  aparece para mostrar la información ecológica.
El problema era que la página de HEB cuenta con una restricción para que no se inserte código javascript de manera manual, entonces se utilizó una instrucción de la librería de Chrome:

chrome.tabs.executeScript(null, {file:"js/jquery-2.1.0.min.js"});  
chrome.tabs.executeScript(null, {file:"js/bootstrap.min.js"}); 

 con lo que se pudo resolver este conflicto.

Una vez que se realizó este cambio se insertó la barra del lado izquierdo, sin embargo tapaba algunas opciones de la página como se ve a continuación:




Entonces se tuvieron que hacer algunas modificaciones al CSS que acomoda los productos de la página en línea para de esta manera hacer que la barra no tapara ningún botón original.
Se redujo el ancho de la pagina a un "85%" sin embargo fue complicado ya que los elementos no cuentan con ninguna "id" y esta acomodado todo con tablas de html, por lo que se tuvo que estar trabajando con números de elementos en vez de ids o clases.

Así es como queda la interfaz con el ancho de la tabla que muestra el contenido a escala:



Lo siguiente fue tomar el nombre, la marca y la imagen de cada producto mostrado, sin embargo fue también complicado por la cantidad de tablas que hay dentro de tablas y no contienen ids ni clases para organizar el estilo. Los cuales fueron encontrados de la siguiente manera:

  var marca = $(this).find("td").eq(1);
  marca = marca.find("div").eq(0).html();
  console.log(marca);

  var image_src = $($(this).find("td").eq(0).find("a").first().find("img").get(0).outerHTML).attr('src');
  console.log(image_src);

  var product = $(this).find("td").eq(1);
  product = product.find("div").eq(1).html();
  console.log(product);

Como se puede ver se agarró de manera arbitraría por numero de elemento en html cada unos de los componentes que describen el producto mostrado.

Y finalmente se pudo replicar la funcionalidad para este sitio. Los cambios están el repositorio.

Redacción

En la parte de la redacción se trabajó esta semana corrigiendo algunos errores de ortografía y algunos en la bibliografía.
Falta terminar el diseño de los experimentos :(.
Se agregó en Conclusiones el trabajo a futuro.

Para la siguiente semana se tienen que terminar el diseño de experimentos en la redacción y la solución propuesta.
En el código hay que agregar ya interacción con algún servidor.