Finalización del curso

Redacción de tesis

En esta semana se trabajo en 3 aspectos:

• Agregar subtemas al capítulo de los Antecedentes para completar la información que se quiere mostrar al usuario.
• Quitar el exceso de footnotes agregando un Apéndice para poder describir ahí todas las herramientas mencionadas y utilizadas en el proyecto. Se realizó una tabla que contiene muchas herramientas como servidores, navegadores, lenguajes, frameworks, etc.
• En el capítulo  4 de solución propuesta se agregó una sección describiendo los requisitos del sistema, tanto funcionales como de diseño.

Código

Se agregó un icono a la extensión:

Se ve de la siguiente manera:

También se agregó un pequeño menú al picarle al botón de la extensión que se ve de la siguiente manera:

Por último se agregó una ubicación por HTML5, aunque se puede obtener en un script aparte, aún no embebido en la extensión.

Los tres cambios están en el repositorio.

Borrador de tesis

Redacción

Esta semana se estuvo trabajando en realizar correcciones en los capítulos 2, 3 y agregando contenido al capítulo 4 y 5.
También se trabajó en la corrección del póster para ir a la exposición y presentar el trabajo realizado hasta el momento.

Código

Se estuvo trabajando en agregar opciones personalizadas para los usuarios, por ejemplo poder decidir si se quiere o no dar la ubicación en la que se esta realizando la compra en línea, también decidir que otro tipo de información mandar, como imágenes, textos, etc.

Se tuvo un poco de problemas con esos cambios así que no se ha subido esa versión ya que no es funcional aún, para la próxima entrega probablemente.

Preparación de un artículo

Esta semana la tarea es investigar alguna revista en la que tenga interés en publicar un artículo, el artículo tiene que cumplir con ciertas normas de la revista elegida, por ejemplo que los temas que abarca el artículo sean temas que encajan en la temática de la revista, por ejemplo no se puede publicar algo se software en una revista que hable de política. También hay que cumplir con ciertas normas de estructura, es decir, los subtemas que contendrá el artículo así como el formato del documento como párrafos, espaciado, márgenes, etc.

La siguiente es la revista que yo elegí:

Ingeniería Investigación y Tecnología


Ingeniería, Investigación y Tecnología tiene como propósito difundir información y conocimientos originales e inéditos relacionados con la ingeniería en todas sus áreas. Es un foro abierto para profesores, investigadores, profesionales y estudiantes de todo el mundo, en el que se publican artículos en español e inglés.

El sitio web: http://www.ingenieria.unam.mx/~revistafi/
http://www.ingenieria.unam.mx/~revistafi/esp_InstruccionesParaAutores.php
http://www.ingenieria.unam.mx/~revistafi/ejemplares/V15N2/V15N2_art03.pdf

Se tiene que enviar el escrito del artículo de la siguiente manera:

• Escrito en Word.
• Una columna con interlineado sencillo.
• No se restringe a algún tipo de fuente en particular, ni los márgenes.
• Las figuras, fotografías y tablas se deben colocar en el lugar que les corresponde a lo largo del artículo. Los títulos de tablas y pies de figuras o fotos deben explicar claramente su contenido.
• Las figuras y fotografías, al insertarlas en Word pierden resolución y se admiten sólo para evaluación. Los autores deben contar con las versiones EPS, TIFF o JPG con calidad mínima de 300 dpi para enviarlas en caso de que el artículo sea aceptado para publicación.
• El artículo debe tener no más de 15 páginas, incluyendo tablas y figuras o 6,000 palabras (máximo).
• Las expresiones matemáticas deben estar escritas claramente y se debe utilizar el Sistema Internacional.
• Debe utilizar cifras arábigas para la identificación de tablas, pies de figuras o fotos.

Esta es otra revista que puede ser tomada en cuenta de acuerdo a la temática de mi investigación más enfocado al medio ambiente que al proceso del desarrollo del software, sin embargo entra por tratar de dar una solución a la disminución de la contaminación y por el uso de la tecnología en esta solución:

Revista Internacional de Contaminación Ambiental 

En esta revista se aceptan para su publicación trabajos originales y de revisión sobre aspectos físicos y químicos de la contaminación, investigaciones sobre la distribución y los efectos biológicos y ecológicos de los contaminantes; así como sobre tecnología e implementación de nuevas técnicas para su medida y control; también son aceptados estudios sociológicos, económicos y legales acerca del tema.

El sitio web: http://www.revistas.unam.mx/index.php/rica

Avance de Código

Se empezó a guardar los nombres de los productos que se encuentran que no están guardados aún en la BD , desde el javascript de llama con un Ajax al url del servidor local y por medio de GET se mandan los parámetros para que se guarde el nombre del producto si es que un no existe en la base de datos.

Se cambio el contenido de los archivos a un content script para no tener que activar o desactivar el plugin simplemente que funcione cuando se abre la página de Soriana o HEB.

Avance de Tesis
Se realizaron correcciones en todos los capítulos y se agrego información al capítulo de Solución propuesta.

Preparación de un póster

Redacción de Tesis

Esta semana se corrigieron errores en la bibliografía y en los capítulos 1, 2, 3 y 6. Los capitulos 4 y 5 aún no están completos pero se avanzó un poco en la redacción.
También se completó la presentación y se agregaron imágenes en las diapositivas.
Por último se creo un póster en el que se trata de resumir lo más posible el trabajo realizado durante el semestre.

Código

En esta parte se estuvo trabajando en la idea de crear módulos separados y genéricos para poder utilizar en cualquier tienda en línea conociendo los elementos html que contienen el nombre de los productos. Se cambiaron aspectos de diseño, como el color y el efecto de transición del sidebar para que sea un poco más amigable al usuario.

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.

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.

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.

Análisis de experimentos

Código

En la parte de código se estuvo trabajando los últimos 3 días de esta semana, teniendo como meta agregar diccionarios que contuvieran marcas y tipos de productos para poder filtrar de una manera más organizada los tipos de certificaciones que puede tener cada producto por su tipo, así como por la marca.

Por ejemplo un tipo de producto es el aceite que puede tener ciertas certficaciones solamente y de esta manera lograr restringir la búsqueda para que no sea muy extenso el número de posibilidades a elegir de certificaciones.

En las herramientas del navegador se puede ver como se identifican las marcas y los tipos de producto.

La marca es 'Cristal' y el tipo es 'Aceite'.

La marca es 'undefined' ya que esa marca no esta incluida en el diccionario.

Y de esta manera hacer el filtro como sigue:
Tipo de producto > Marca > Certificaciones posibles


También se agregó la tienda HEB al dominio permitido por la extensión para poder hacer también búsqueda de productos ahi y de esa manera cumplir con el requisito de que la extensión se pueda usar en dos tiendas en línea.

HEB online.

Sin embargo la página de HEB esta protegida de alguna manera para no agregar jquery ni javascripts en su contenido, por lo que se estará trabajando en eso lo que resta de esta semana para solucionar ese problema.

El código se encuentra en el repositorio.


Redacción de tesis

Se trabajó en la redacción los primeros días de esta semana y se realizaron los siguientes avances:

• Corrección de ortografía
• Corrección en bibliografía
• Se agregaron algunos experimentos de usabilidad para analizar los resultados.

En la siguiente semana se espera ya tener el sistema de alguna manera más completa para empezar a hacer las pruebas y checar si funciona en diferentes tiendas en línea y hacer los experimentos de rendimiento.

Análisis de experimentos; agregaciones pendientes

Herramienta web

Esta semana se avanzó en la extensión de Chrome para mostrar algo más amigable y un diseño que sea muy semejante al que se quedará al final.

Se cambió la manera de mostrar el sidebar ya que antiguamente se mostraba como un elemento que aparecía y desaparecía al momento de picar al botón del plugin que se muestra al lado de la barra de direcciones del navegador. El plugin se veía de esta manera:

Versión antigua

Versión antigua

Como se puede ver en las capturas de pantalla, el plugin tenía colores muy claros que se perdían con la página web de la tienda en línea, así que se decidió cambiar estos colores, además de agregar las transiciones al momento de esconder o mostrar la información.

En seguida se muestran una serie de capturas de pantallas, de como fue cambiando la vista del plugin durante esta semana de trabajo:

Se agregó un botón en la esquina derecha superior para el sidebar.

El sidebar desplegado.

Se modificó el color del botón y se agregó un icono que represente el plugin.

Se cambio el color del sidebar.

Se agregaron los eventos de javascript.

Después de cambiar colores y haber agregado las transiciones se investigó como poder combinar colores de texto y fondo, teniendo en cuenta que se quiere que el plugin tenga un fondo que contraste, entonces se buscó que paleta de colores sería adecuada, se encontró la página http://colorschemedesigner.com/ , y se utilizó por lo pronto la siguiente paleta de colores generada http://colorschemedesigner.com/#2P41Tg0sSw0w0, es sólo una sugerencia ya que los colores aún no están completamente definidos, lo único que se tiene pensado es que el color del sidebar no debe ser blanco ya que se confunde con el fondo de la tienda.

Paleta de colores.

Después de investigar como poder combinar colores (aún falta una elección definitiva), se buscó si existía ya alguna manera de mostrar de manera amigable, clara y rápida la información ambiental de productos, se encontraron dos etiquetas que parecen ser buenas opciones para poder partir de esta información para representar y mostrar:

http://iopscience.iop.org/1748-9326/6/1/014017/fulltext/

http://www.greencirclecertified.com/multi-attribute.html

Se agregaron algunos de estos datos solo a manera de prueba, para ver la manera en que se van a mostrar los datos, así es como está actualmente el plugin:

Versión actual.

Aún hay que modificar la manera de visualizar la información, ya que hay que agruparla y ver si está bien mostrarla con gráficas, estrellas, iconos de colores o cualquier otra forma de representar los datos y elegir la mejor para mostrar más datos ecológicos con menos elementos y de la manera mas clara y ordenada.

El video para mostrar el funcionamiento actual que se tiene del plugin:

El código se encuentra en el repositorio.

Redacción de Tesis

• Se corrigió la ortografía de los capítulos 1 al 4.
• Se reescribió los objetivos y métodos de estudio que se encuentra en el apartado de resumen.
• Se agregó metodología basada en el desarrollo ágil al capitulo de Solución propuesta.
• Se agregó contenido al capítulo de evaluación.

Avances para la siguiente semana

• Se terminará el capítulo de Solución Propuesta.
• Se tendran los experimentos más definidos.
• La extensión mostrará los datos ecológicos seleccionados.
• La extensión funcionara en una segunda tienda en línea.
• Se agregarán imágenes de eco-etiquetas al capítulo 2.

Diseño experimental

Trabajo de la semana 8

Código

Los primeros 3 días de esta semana se comenzó a hacer el catalogo de los productos que se van a tener en la base de datos, utilizando Ruby on Rails como framework de desarrollo, SQLite para la base de datos y CSS para dar estilo al HTML.
Lo primero que se creó fue un Catálogo, en donde el catálogo tiene "Products" , a su vez los productos tienen "name", "trademark" y "ecolabels".

De esta manera se puede acceder al servidor y obtener un json que contenga el producto con su información, que hasta la fecha se limita a esos tres campos pero se irán agregando más cuando se tengas las características que se van a tomar en cuenta.

Este es el controlador que se tiene hasta ahora, para obtener json:


Y el ejemplo de la vista:



Estos cambios, y los demás para que funcione el servidor están en el repositorio: https://github.com/cecyurbina/EcoFriendlyPlugin

Para la siguiente semana se espera poder hacer consultas directamente del plugin, al servidor.

Redacción

Los siguientes dos días de esta semana se dedicaron a las correcciones de la semana pasada y las de esta semana, y un borrador del diseño experimental.

• Se arreglaron principalmente faltas de ortografía como acentos y puntuaciones.
• Se agregó mas datos a la autobiografía.
• Se arregló los URL de la biografía.
• Se terminó el resumen con lo que se tiene hasta ahora, faltan la conclusiones.
• Se hizo un borrador del diseño experimental.

Para la próxima entrega se terminaran todos los capitulos antes del capítulo 5, y se llenará con más informaciión el capítulo 5.

Implementación de la solución propuesta

Semana 7

Código

Esta semana se trabajó en  implementar un sidebar que pudiera ser colapsable. es decir que mostrara alguna a transición, con toggle("tiempo_seg") y/o toggleClass("class_css").

La función que se estuvo probando fue la de toogleClass aunque hace una transición el efecto no se ve muy amigable para el usuario ya que se esta poniendo el tamaño del sidebar en pixeles en vez de en porcentajes, para esto se utilizaron funciones básicas de jQuery, sin embargo el resultado no fue el esperado debido a las limitaciones. En esto se estuvo trabajando desde la entrega pasada que fue el día viernes 28 de febrero, hace 3 días, es por eso que se avanzó poco en la implementación pero se logró el objetivo de probar las transiciones.

Este avance de código se encuentra en https://github.com/cecyurbina/EcoFriendlyPlugin.

Para la próxima entrega se espera poder implementar estas funciones de jQuery pero con modificaciones propias de Javascript y CSS como se muestra en el siguiente ejemplo:

http://startbootstrap.com/templates/simple-sidebar.html

Otro tema que se estuvo trabajando en cuanto a la interfaz web fue checar si es o no posible incluir esta extensión en un navegador de dispositivo móvil, al entrar a Chrome web store desde un dispositivo Android este es el resultado: 

Tableta Android 4.4.2

Redacción

Esta semana se tuvieron muy pocos días (3 días) para trabajar en la redacción de la tesis, sin embargo se logró un avance en cuestión de corrección de errores y completar los capítulos anteriores al de solución propuesta.

Se utilizó \texttt{} para dar estilo a los nombres de herramientas, además se agregó a cada herramienta cuando es mencionada por primera vez una referencia de tipo \footnote que contiene la página oficial de los desarrolladores de esta herramienta.
Lo que da como resultado una pequeña referencia en la misma página en la que se hace mención de la herrmaienta, referenciado por un pequeño número que se pone automáticamente de acuerdo al orden en que fueron agregados.

También se agregó en el archivo .bib una referencia a un Estándar ISO usando @misc.

La lista de las características que se comparan en la tabla de trabajos relacionadas fue renombrada para mantener la consistencia.

Por último en el capítulo de Solución propuesta se agregaron cajas a las imágenes para poder separar el espacio que va a ocupar cada una, y se agrego la metodología tentativa que se va a seguir en el proceso de software.


Para la próxima semana en el código se va a realizar el avance ya dicho en la sección anterior y en la redacción las correcciones que aún faltan y lo de la semana correspondiente.

Diseño de la solución propuesta

Revision de la semana #5

• Arreglar la ortografía en la sección de agradecimientos.
• Agregar algo de texto entre 1.3 & 1.3.1 o que 1.3.1 & 1.3.2 sean \paragraph en lugar de \subsection. 
• lo de 1.4 no hacer una lista, hacer párrafos de texto y poner todos los capítulos con un \label en cada \chapter y luego usa los \ref para mencionar los capítulos ahí en esa sección de estructura con una frase simple explicas de qué se trata cada capítulo, en orden aquí hay ligas a PDFs de tesis ejemplo para que tengas modelos: http://elisa.dyndns-web.com/students/espanol.html
•  El capítulo 1 esté completo, todas sus secciones en una primera versión todo eso entra en el registro de la tesis y necesita estar redactado ya lo único que te falta es en realidad lo de estructura.
• lo de CERTIFIED ponlo en minúscula.
• nombres de productos y de software podrían estar en {\em ... } para que al lector le quede claro que esos son nombres de cosas (punto por checar detalladamente).
• Terminar ya una primera versión completa del capítulo 2; les interesará eso a tus revisores y ocupamos incorporarles a ellos en esto a inicios de marzo para que nos indiquen sí o no van a entrar al comité antes de finales de marzo.
• Revisa el uso de espacios alrededor de puntuación; hay errores al inicio del capítulo 2 ahí tampoco debería de haber una lista; es mejor redactar en párrafos una tesis es un _libro_
• la lista de 3.2 podría mejor ser description en lugar de itemize ya que les has puesto "títulos" a los elementos.
• Quitar las abreviaciones ya que no se esta corto de espacio.
• creo que pusiste \scriptsize o algo en tu tabla no hagas eso sino usa un \scalebox en tu tabla, 
• alínea la primera columna a la izquierda o sea, ahí en \begin{tabular} pones primero una l y luego las c de las demás columnas.
• Los \caption{...} deben contener enunciados completas que tienen puntuación al finalo sea, agrega un .
• Separar el último renglón de los demás con un \hline doble para que se diferencia de los demás (también haría bien una doble \hline entre el primer renglón que tienes las características y la segunda que es el primer trabajo).
• Agregar en la bibliografía de los libros los campos publisher & address, también estaría bien incluir su ISBN, en "publisher" va el nombre de la empresa editorial en "address" van en español el nombre de la ciudad, el estado (si existe) y el país de residencia de dicha empresa editorial.
• en puros sitios web se agrega como nota en el bib la fecha de consulta.
• creo que en [8] Iranian iría en mayúscula si es así, hay que ponerles llaves extra: "on {Iranian} consumers" .
• Pon el nombre completo de la revista (ahora lo tienes abreviado); en eso también es de ayuda google. (No encuentro ese nombre de revista abreviado).
• Agregar campos en [13] igual en [18].
• Escribir la ficha autobiográfica.

Trabajo de la semana #6

Código
El código referente se encuentra en https://github.com/cecyurbina/EcoFriendlyPlugin .

Para poder organizar mejor el código se agregaron y eliminaron algunas carpetas, también se cambió la manera en que se manda llamar los archivos de CSS, ya que antiguamente los tenía descargados en mi carpeta local, este cambio se hizo porque no se podía utilizar los glypicons que tiene por default esta librería. La manera en que ahora lo hago es agregando con jQuery en head el archivo de Bootstrap CDN, pero solamente los CSS ya que si se agregan los Javascripts desde ahi, se esta violando la politíca de Google Extensions, así que se descargan todos los Javascripts como jQuery y Bootstrap.min.js.

Algunos iconos de muestra

También se estuvo trabajando en la lógica que habrá en los diccionarios que se van a estar leyendo en Javascript.
En donde lo que se va a utilizar es la función de String.prototype.match(), para buscar dentro de toda la cadena por ejemplo "Bertolli Aceite 100% Puro Oliva 500 Ml Pz", la marca y el producto que es, por ejemplo se tendría en un diccionario de marcas, muchas marcas posibles de productos por ejemplo "Soriana, Bertolli, Capullo, Nutrioli, Canoil", y de ahi se encuentra la marca que es el producto y de esta manera poder buscar los certificados con que cuenta la marca, entre otros datos. El siguiente es un ejemplo de como se implementa:




Redacción de tesis

Aquí se hicieron todas las correcciones además se agrego la estructura al capítulo de Solución propuesta.

Trabajo para la semana #7

Implementar un sidebar en la interfaz con CSS y jQuery y la búsqueda en los diccionarios en javascript o ruby.

Resumen de trabajos relacionados relevantes

Revisión de la semana #4

• Escribir Dra. para Sara y Dr. para Frank
• Incluir de una vez el número del proyecto en agradecimientos; está en la página web de Elisa bajo investigación en una tabla.
• Texto de "REDACTAR" en la sección del resumen en otro color.
  
• La línea de donde firma Elisa podría estar más simétrica con respeto al nombre y hay que ocupar un poco más espacio encima de ella para que quepa la firma.
  
• En bibliografía el estilo está raro ahora debería verse igual que los capítulos, pero sin número
• En capítulo 1 falta un párrafo o dos de introducción general antes de que comience 1.1
• Crear objetivos específicos
  
• Intentar a completar capítulos 1 y 2.
• Modificar como la plantilla para que la bibliografía aparezca en español.
• Corrección de los autores en la bibliografía
• Consistencia en mayúsculas y minúsculas.

Trabajo de la semana #5

Redacción de tesis

Se identificaron los puntos para comparar en la tabla de trabajos relacionados y se analizó cada trabajo relacionado para poder clasificarlo de acuerdo a estos criterios:

• Muestra información ecológica de productos. Verificar si la herramienta es ca- paz de mostrar información ecológica de algún producto, como si esta hecha de material reciclable, si es reutilizable, etc.
• Busca crear conciencia ecológica. Si el trabajo se enfoca en ayudar a crear conciencia para cuidar el medio ambiente.
• Recomendaciones personalizadas en base al usuario. Si el trabajo puede recomendar en base a búsquedas o compras hechas anteriormente.
• Muestra recomendación de otros usuarios. Mostrar estadísticas de diferentes características que han evaluado otros usuarios.
• Consulta con una base de datos propia. Se buscan datos dentro de una base de datos previamente creada con las características de un producto.
• Multiplataforma. Es posible utilizar la herramienta en distintos sistemas operativos.
• Se adapta a diferentes tiendas en línea. Se evalúa su la herramienta puede tomar datos de otras páginas de internet.
• Diseño responsivo. Se adapta a diferentes tamaños de pantalla.
• Fácil de manejar. Se evalúa si cualquier persona podría hacer uso de la herramienta sin conocimientos técnicos.
• Relación de la información ecológica con las compras. En el trabajo se puede ver si la información ecológica influye o no en las compras.

Código

Para esta semana se agregaron varias carpetas al código con el css necesario para poder ir agregando todos los iconos que se ocuparan en la aplicación, así como los iconos nativos de bootstrap.
También se modifico el manifest.json para poder hacer match solamente con las tiendas mexicanas, en este caso "soriana" solamente.
Los archivos se componen de tres carpetas:

• src
• Aquí se ubican los archivos para poder mostrar el panel y el que tiene el action browser para el icono de la extensión.
• También esta el código inject.js
• js
• Los js de jquery y bootstrap.

También se probó el funcionamiento de la herramienta Extensionizr que ayuda a usar hojas de estilo y a organizar mejor las extensiones para Chrome.

Se adaptó el código a esa nueva estructura, y se trabajo con agregar los iconos para dar una mejor visualización al panel.

El código referente se encuentra en https://github.com/cecyurbina/EcoFriendlyPlugin .

Trabajo para la semana #6

Seguir trabajando en la estructura del código para hacerlo lo más modular posible, modificar el diseño para hacerlo más agradable y comenzar a investigar como será la manera de comunicación con el server, y crear algo para empezar a hacer pruebas con un servidor local, y así tener preparado para comunicar con el servidor definitivo que aún no esta decidido como y quienes trabajaran esta parte.

Búsqueda y clasificación de trabajos relacionados

Correcciones semana 3

Algunas correcciones simples en el formato, como cambiar co-asesor, por revisor, espacios, etc.
Además de agregar nombres tentativos de los revisores.


Avances semana 4

Trabajos relacionados

La busqueda de trabajos relacionados de mi tesis se hizo en las siguientes herramientas, usando las palabras claves de busqueda "eco product decisions", "Purchase Decisions eco labels consumer", estas busquedas se hicieron en Google Scholar, ACM Digital Library, IEEE Xplore y Science Direct.

• Sustainable consumption and production: how to make it possible
• El artículo revisa los diferentes casos de recursos eficiente y la producción más limpia , así como productos y servicios sostenibles desarrolladas en Austria , Bulgaria , Estonia , Lituania y España .
  
• A Study on Consumer Behavior for Green Products from a Lifestyle Perspective"
  
• Este estudio analiza la relación entre el estilo de vida y comportamiento de consumo verde para identificar potenciales consumidores verdes. El uso de productos verdes es el objetivo de la investigación. En este estudio se tomaron muestras de personas mayores de 16 a partir de la población general en el centro de Taiwán y recogió 433 muestras válidas. Se aplicó un modelo de ecuaciones estructurales (SEM) para analizar los datos y facilitar una discusión sobre el efecto del comportamiento de consumo verde en el estilo de vida.
• Most Feasible Strategies for Green Marketing Mix under Business Sustainable Development
  
• El objetivo principal de esta investigación es explorar la relación entre los estilos de vida del consumidor y estrategias de marketing verde. Las muestras de investigación se hicieron a personas de la población en el centro de Taiwán y  se recolectaron 439 muestras válidas. Un modelo de ecuaciones estructurales se utilizó para analizar los datos y facilitar una discusión sobre el efecto del estilo de vida en las estrategias de marketing mix verdes. De esta manera, las estrategias de marketing mix verdes se utilizan de manera oportuna a los consumidores con diferentes estilos de vida para aumentar la venta de productos ecológicos.
• Sustainability, daily practices and vacation purchasing: are they related?
  
• Este trabajo tiene como objetivo explorar las relaciones entre las prácticas de los consumidores verdes y sus cogniciones verdes relacionadas, evaluaciones y creencias cuando se considera la compra de productos turísticos o de mercancías generales.
• Consumer discount rates and the decision to repair or remplace a durable product: a sustainable consumption issue.
• Este trabajo intenta responder a la pregunta de por qué, cuando se les da dos consumidores con el mismo nivel de ingresos y nivel socio-económico, un consumidor decide sustituir un producto de la casa que funciona, mientras que el otro elige tener el producto reparado para su posterior reutilización. Para ayudar a abordar esta cuestión un modelo de reemplazo mejorado es presentado y probado empíricamente.
  
• Analysing the impact of green marketing strategies on consumer purchasing patterns in Mauritius
• El propósito de este trabajo es analizar el impacto de las estrategias de marketing verde en los patrones de compra de los consumidores en la Isla Mauricio. El presente estudio también explora la posibilidad de introducir patrones de consumo más ecológicos en los estilos de vida contemporáneos en el contexto actual en el que los productos ecológicos son cada vez más disponibles.
  
• Green products and corporate strategy: an empirical investigation.
  
• El propósito del estudio es analizar la influencia de múltiples factores en que influyen en la compra verde de los clientes en Australia.
• The consumption side of sustainable fashion supply chain
  
• El propósito de este trabajo es examinar la relación entre el producto y los atributos relacionados con el almacén de las decisiones de consumo ecológicos y los consumidores.
  
• La relación del consumidor con el etiquetado responsable
  
• El trabajo que aquí se presenta profundiza en la relación del consumidor con el etiquetado social y medioambiental con el objetivo no solo de describir esta relación sino también de proponer acciones que conduzcan a una mayor utilidad de este. Tras analizar los datos obtenidos de una encuesta personal a 385 responsables de compra de Madrid capital, se concluye que hay falta de comprensión y credibilidad en el etiquetado de RSC, aunque estas limitaciones se atenúan entre los consumidores más interesados en los aspectos socia- les y ambientales de los productos.
  
• Some issues of consumer preferences for eco-labeled fish to promote sustainable marine capture fisheries in peninsular Malaysia
  
• Su trabajo tiene como objetivo analizar la posibilidad de etiquetado ecológico como una herramienta para promover la pesca sostenible en Malasia.
  
• Sustainability labels on food products: Consumer motivation, understanding and use.
  
• Este estudio investiga la relación entre la motivación del consumidor, la comprensión y el uso de etiquetas de sostenibilidad en los productos alimenticios (etiquetas ambientales y éticos), que están apareciendo cada vez más en los productos alimenticios.
  
• DOES GREEN MARKETING WORKS WITH CONSUMERS?
  
• Demuestra que a través del marketing verde es posible que una empresa pueda aumentar su valor de marca de un producto a los clientes, pero puede tener menos posibilidades de influir en el comportamiento de compra del consumidor.
• Consumer Behavior in Relation to the Decision to Buy Green Products: an Investigation on Iranian Consumers
  
• En este artículo se investiga el comportamiento consumidor iraní sobre los productos verdes. Sus creencias ambientales y su proceso de toma de decisiones en la compra de productos verdes / ecológicos.

Código

En el código se modificó el código del change_content.js, para que se pudieran agarrar más faciles los productos de cualquier tienda, ya sea Soriana o HEB, aquí esta una muestra del código, que también esta en el repositorio.

El código referente se encuentra en https://github.com/cecyurbina/EcoFriendlyPlugin .

Avances esperados para la semana 5

Para esta semana se espera tener un modelo sencillo de como se va a tomar los nombres de las tiendas en línea, es decir un diccionario que tenga algunas marcas, o nombres de productos y empezar a identificar esas dos cosas.

Identificación y estructuración de antecedentes

Revisión de la semana #2

• Organizar por colores las partes de la tesis que aún no están completas o que se tienen que agregar más cosas.
• Cambiar fecha de la tesis.
• Escribir nombres tentativos de asesores de tesis. 
• Ligar de manera coherente los párrafos en la sección de Objetivos.

Trabajo realizado en la semana #3

En esta semana se tiene que avanzar en la redacción de la sección de Antecedentes de la tesis y en el código referente avances en la extensión de Chrome.

Redacción de tesis

Para poder demostrar como una aplicación web de un asistente de compras verde inteligente es capaz de influir en las decisiones al momento de compra del usuario es necesario conocer los aspectos que hacen ecológico a un producto, así como las diferentes maneras que los productos tienen para cumplir con estándares de cuidado al medio ambiente, por esta razón se dedica una sección para explicar este tema de manera más profunda.

También sería adecuado tener conocimiento de algunos aspectos básicos de las tecnologías que permiten crear esta herramienta, por ejemplo la aplicación que se esta creando depende de un navegador web para poder funcionar, se necesita obtener la información ecológica de los productos de alguna base de datos existente, y para intercambiar datos entre aplicaciones se ocupa un servidor web, por lo que estos temas deben de ser mencionados y así poder crear un contexto adecuado de la investigación.

Además hay que mencionar que existen distintas maneras de mostrar los elementos que componen la herramienta y de visualizar toda la información de los productos que se muestra al usuario, para lograr hacerlo de una forma adecuada se requiere el estudio de áreas como diseño web y visualización de datos, estos temas también serán explicados dentro de este capítulo.

Código

Ecoetiquetas

Se creo una carpeta compartida en Dropbox con un grupo de imágenes que corresponden a los logos de distintas certificaciones ecológicas, conocidos como Ecoetiquetas, se obtuvieron aproximadamente 40 logos correspondientes a los más conocidos a nivel mundial según el sitio inhabitat.com.

Carpeta en Dropbox

Extensión

Se adaptó la extensión de Chrome para el sitio de Soriana, en el cual se detectó como poder obtener los productos que se están vendiendo, esto se hace por medio de la clase que utiliza el div en el cual se muestra toda la información, como el nombre, marca, contenido, precio, cantidad de piezas a comprar, etc.

Con jQuery se detecta el evento mouseover dentro del div de cada producto y se extrae el nombre por medio de la primer etiqueta font encontrada en el div. También se toma por medio de la etiqueta img la imagen que contiene el div para mostrarla después en el panel del lado derecho.

También se cambió el icono de la aplicación de cuando esta activo a cuando esta inactivo el panel derecho, de modo que se muestra el icono con fondo transparente cuando esta inactivo y con fondo blanco cuando esta activo.

El mouse ya no esta apuntando a ningún producto, pero esta habilitado el panel por eso el icono esta con fondo blanco.

El mouse esta sobre el producto pero no se tiene activo el panel. por eso se muestra el icono de la extensión con fondo transparente.

En el archivo Manifest.json se agrego la condición para que la extensión solo funcione en la tienda Soriana.





El código referente se encuentra en https://github.com/cecyurbina/EcoFriendlyPlugin .

Trabajo para la semana #4

• Para la semana 4 quedó pendiente de realizar un objetivo que se planteó para esta semana, sin embargo se dio prioridad a adaptar en tiendas nacionales la extensión realizada, es por eso que se va a trabajar en poner los iconos nativos de Bootstrap ya que el problema sigue con mostrar gráficos en la extensión.
• También esta semana se detecto que para adaptar la extensión fácilmente a cualquier otra tienda online sería más fácil crear módulos en los que se reciban solamente como parámetros las clases que utiliza cada tienda en línea para mostrar su catálogo.
• Y por último en la redacción de la tesis realizar las correcciones sugeridas por la Doctora en la sección de Antecedentes y hacer una búsqueda y clasificación de trabajos relacionados .

Hipótesis y objetivos

Revisión de tesis en la semana #1

• En la sección de antecedentes dar una estructura en general de lo que se va a cubrir en la tesis
• Agregar algo referente a la arquitectura de web services, 
• Mencionar lo que se cubrirá de web design, 
• Hablar sobre los factores que influyen en que un producto sea o no ecológico,
• Mostrar las mejores maneras de visualizar la información.
• En la solución propuesta se debe agregar estructura, módulos que muestren los elementos principales que se van a estar tratando, como por ejemplo la parte donde se analiza la página, que información mostrar y como acomodarla.
• Ser consistente en mayúsculas y minúsculas.

Trabajo realizado en la semana #2

Para esta segunda semana del módulo de Investigación se tiene que hacer un borrador de lo que será la Hipótesis y los Objetivos del tema de tesis, así como seguir avanzando en el código correspondiente al proyecto.

En la hipótesis se tiene que plantear la idea de algo que yo pienso que es útil, verdad o bueno y en los objetivos lo que se pretende aportar o demostrar en el trabajo.

Por ejemplo en hipótesis podría plantear que utilizar la herramienta al momento de hacer compras en línea podría ayudar a que las personas tengan conciencia ecológica a la hora de comprar productos y esto se podría demostrar por medio de experimentos con dos grupos de usuarios que realicen compras en una tienda en línea, un grupo utilizando la herramienta y el otro no, así de esta manera saber si la información brindada sirve a la hora de comprar los productos.

Y en los objetivos se puede hablar sobre lo que se aportará o se demostrará en el trabajo, por ejemplo un objetivo es realizar los experimentos con diferentes usuarios, usando o no la extensión.

La hipótesis en que se basa este trabajo es que si los usuarios de tiendas en lí nea cuentan con una herramienta que les muestra de manera amigable, f ácil y autom ática toda la informaci ón ecol ógica del producto se puede llegar a influir de manera positiva en la consciencia sobre la ecológ ica de los consumidores.
Se pretende demostrar que los usuarios pueden comprar productos que tengan menor impacto negativo para el medio ambiente, sin tener hacer esfuerzo por realizar consumo ecol ógico con el uso de la herramienta propuesta.

El objetivo de este trabajo es realizar una interfaz web como una extensión que se instale en el navegador y sirva como un ayudante de compras en línea, la herramienta debe de ser capaz de mostrar de manera automática y cómoda la información ecológica del producto para poder apoyar como un consumidor verde. La interfaz web debe de poder funcionar en por lo menos un navegador y dos tiendas en línea.

También se deben de poder llevar a cabo evaluaciones de usabilidad haciendo pruebas reales a diferentes grupos de usuarios, utilizando o no la herramienta en un contexto real, y así obtener los resultados de utilidad del asistente en línea.

Colaborar en el desarrollo de un modelo de procesamiento, almacenaje y consulta de información ecológica de productos, combinando fuentes de información disponibles en línea con los datos de decisiones anteriores de compra realizados por los usuarios.

Código realizado

Para esta semana el avance en funcionalidad agregado es capturar el evento del click en el icono de la extensión en el navegador :

Se activa el evento cuando se da click en el icono.

Al momento de dar click en el icono se abre un panel del lado derecho que muestra las características que se tienen del producto en el que se tiene el mouse over:

El panel de la derecha se esconde y se muestra cuando se da un click.

El código referente se encuentra en https://github.com/cecyurbina/EcoFriendlyPlugin .

Trabajo para la semana #3

• En cuanto al código lo que se va a estar realizando en la 3er semana es poder mostrar información de una manera más dinámica en el panel derecho, es decir tomar datos de algún JSON y mostrarlos de acuerdo al producto seleccionado. 
• También poder agregar iconos al panel ya que actualmente no se esta mostrando imágenes ni nada debido a que hay un error en el Bootstrap que se esta utilizando al momento de importar la fuente que sirve para visualizar los iconos.
• Se quiere poder cambiar de manera dinámica el icono que muestra la extensión en el navegador, pudiendo cambiar de color cuando esta seleccionado y cuando no.
• Hacer una carpeta en Dropbox en la que se comparta con los compañeros que se encargan del reconocimiento de imágenes los logos que certifican a los productos de acuerdo a diferentes estándares cumplidos.
• Y como última tarea identificar y estructurar los antecedentes en la tesis.

Planteamiento del tema y preparación de la plantilla

En este blog estaré publicando cada semana las tareas correspondientes al módulo de Investigación para cubrir los 22 créditos del último semestre, el módulo consiste en preparar una investigación científica y/o un desarrollo tecnológico que tendrá como producto una tesis de licenciatura y a manera opcional alguna publicación en revista y/o participación en congresos, supervisada por la Doctora Elisa Schaeffer, de forma semi-presencial de tiempo completo en donde se espera que invierta en promedio 40 horas semanales en el trabajo durante 16 semanas.

Primera junta de apertura

Esta junta se realizo el pasado lunes 13 de enero en el CIIDIT de manera grupal, en donde se plantearon los resultados que se esperan obtener de manera general de todas las tesis así como la primer tarea a cubrir para esta semana.

Para comenzar esta trabajo y tener todo ordenado de la manera correcta se pidió que se organizaran los documentos y evidencias de trabajo  por medio de 3 tecnologías:

• Blog.- En donde se va a estar documentando por semana los avances que se tienen con la investigación, así como links o notas importantes de acuerdo a cada semana que pasa.
• Dropbox.- En donde se tendrán los archivos de LaTeX de la tesis.
• Git (liga al repositorio).- Todo el código correspondiente al proyecto.

Evidencia primer semana

Tema de tesis

El titulo de mi tesis es "Apoyo visual de información de impacto ecológico para la toma de decisiones en tiendas en línea", la cual como su nombre lo dice trata de mostrar en una interfaz web mientras se navega por alguna tienda online si el producto que se esta consultando es o no amigable con el medio ambiente.

Esto se hace por medio de un plugin que se instala en el navegador y funciona de manera predeterminada en una tienda online que se este consultando. 

El plugin debe de funcionar en por lo menos un navegador y en por lo menos dos tiendas en línea.

La información mostrada al usuario corresponde principalmente a si las envolturas o la manera en que se fabrico el producto es realmente amigable con el medio ambiente y esto se obtiene por medio de una BD compartida que el plugin va a consultar cada vez que se seleccione un producto.

El plugin estará escrito utilizando Javascript, HTML5 y CSS3, así como el framework Bootstrap para ayudar al diseño de la interfaz.

Trabajos relacionados

Existen diferentes tecnologías diseñadas para ayudarte a decidir al momento de compra, sin embargo ninguna de las consultadas son un plugin que se instala en el navegador si no más bien herramientas completamente separadas que se dedican a mostrar solamente productos buenos con el medio ambiente ignorando por completo los demás datos.

Por ejemplo la tienda "Ecodirecory" que se limita a mostrar una lista de categorías de productos que son amigables con el medio ambiente. Sin dar información de más no hablar de productos que no son amigables.

Otra tecnología es vine.com que se encarga de mostrar una serie de productos que deben ser diseñados para eliminar las toxinas, de alta eficiencia energética, natural, orgánico, impulsado por la energía renovable, reutilizable, fabricados con materiales sostenibles o agua-eficiente, permite a los consumidores a hacer compras para cosas como pañales reutilizables, productos de limpieza no tóxicos, las tablas de cortar de bambú, de bajo flujo ducha cabezas y cosmética natural todos en el mismo lugar.

Y aunque no se encontró ningún asistente de compra que sea un plugin que se enfoque en productos verdes, si encontré asistentes de compra que ayudan a comprar precios de diferentes tiendas por ejemplo de Amazon, aunque no es en si un ayudante para saber si un producto es verde o no, sirve para saber la manera en que se identifican los productos y se hace la compración con otros, el plugin se llama ExtensionBang5Tao y funciona para Chrome.

Tesis "Apoyo visual de información de impacto ecológico para la toma de decisiones en tiendas en línea"