Diseño Y Desarrollo De Un Sitio Web E-Commerce Para La Distribución Y Comercialización De Piezas Gráficas Tridimensionales Producidas En Blender®

Diseño y desarrollo de un sitio web e-commerce para la distribución y comercialización de piezas gráficas tridimensionales producidas en Blender®.

Memoria de Proyecto Final de Grado/Máster Máster Universitario en Aplicaciones multimedia Informática, multimedia y telecomunicación

Autor: Juan Pablo Ruiz Yépez

Consultor: Mikel Zorrilla Berasategui Profesor: Laura Porta Simó

7 junio 2019

Créditos/Copyright

Esta obra está sujeta a una licencia de Reconocimiento-NoComercial-SinObraDerivada 3.0 España de CreativeCommons

2 / 53

FICHA DEL TRABAJO FINAL

Diseño y desarrollo de un sitio web e-commerce para Título del trabajo: la distribución y comercialización de piezas gráficas tridimensionales producidas en Blender®, Nombre del autor: Juan Pablo Ruiz Yépez Nombre del consultor/a: Mikel Zorrilla Berasategui Nombre del PRA: Laura Porta Simó Fecha de entrega (mm/aaaa): 06/2019 Titulación: Máster en Aplicaciones Multimedia Área del Trabajo Final: Trabajo Fin de Máster Idioma del trabajo: Español Palabras clave Modelos 3d, e-commerce, blender Resumen del Trabajo:

Este trabajo tiene como fin la creación de un sitio web adaptivo basado en la plataforma e-commerce para la distribución de objetos tridimensionales creados con la aplicación Blender®. El sitio ha sido desarrollado con la tecnología html5 y el apoyo de la plataforma Wordpress, para finalmente ser alojado en un hosting compartido. Este desarrollo pretende poner en ejecución los conocimientos tanto prácticos como teóricos adquiridos a lo largo de toda la titulación, desde la concepción de la idea hasta la co nsecución de la misma con un proyecto prototipo completamente funcional. Se ha aplicado una metodología que permitió estudiar el mercado y la posibilidad de implementación del proyecto, las herramientas a utilizar y las tecnologías más adecuadas para lograr construirlo. Los resultados del trabajo de fin de máster son muy satisfactorios tanto en el ámbito académico como personal ya que se han logrado los objetivos propuestos mediante la implementación de los conceptos y técnicas aprendidas a lo largo de los estudios y se han superado las dificultades que supone la creación de proyectos de ésta naturaleza. Como conclusión, éste desarrollo ha servido para complementar las experiencias en las aulas virtuales y da la pauta para la expansión de funcionalidades nuevas o existentes que permitan enriquecer el aprendizaje en éste tipo de proyectos.

Abstract:

3 / 53

Diseño y desarrollo de un sitio web e-commerce para la distribución y comercialización de piezas gráficas tridimensionales producidas en Blender®, Máster en Aplicaciones Multimedia, Juan Pablo Ruiz Yépez master’s degree both practical and theoretical, from the conception of the idea to its achievement with a fully functional prototype. The methodology applied allowed to study the market and the possibility of implementation of the project, as well as the tools to be used and the most suitable technologies to achieve it. The results obtained are satisfactory both at the academic and personal levels, the proposed objectives have been achieved through the implementation of the concepts and techniques learned throughout the studies and the difficulties stood by the nature of this kind of projects have been overcome. As a conclusion, this project’s development has served to complement all the experiences at the virtual classrooms and gives away the guidelines needed for the expansion of new or existing functionalities allowing to enrich the learning process to fulfill this kind of of projects.

4 / 53

Dedicatoria

A mi hijo Martín quién se ha convertido en mi fuente de inspiración y fortaleza para seguir adelante.

5 / 53

Agradecimientos

A todos aquellos profesores y colaboradores de la UOC quienes han aportado positivamente en éste proceso, en especial al consultor de ésta asignatura, Mikel Zorrilla Berasategui por todo el soporte brindado durante el desarrollo del proyecto.

A mi madre por su interminable paciencia y apoyo emocional en esta etapa.

6 / 53

Abstract

The purpose of this project is to create an adaptive website based on the e -commerce platform for the distribution of three-dimensional objects created with the Blender® application. The site has been developed with the html5 technology and the backing of the Wordpress platform, to finally be hosted in a shared hosting service. This project’s development aims to put into practice the knowledge acquired throughout the master’s degree both practical and theoretical, from the conception of the idea to its achievement with a fully functional prototype. The methodology applied allowed to study the market and the possibility of implementation of the project, as well as the tools to be used and the most suitable technologies to achieve it. The results obtained are satisfactory both at the academic and personal levels, the proposed objectives have been achieved through the implementation of the concepts and techniques learned throughout the studies and the difficulties stood by the nature of this kind of projects have been overcome. As a conclusion, this project’s development has served to complement all the experiences at the virtual classrooms and gives away the guidelines needed for the expansion of new or existing functionalities allowing to enrich the learning process to fulfill this kind of of projects.

Resumen

Este trabajo tiene como fin la creación de un sitio web adaptivo basado en la plataforma e-commerce para la distribución de objetos tridimensionales creados con la aplicación Blender®. El sitio ha sido desarrollado con la tecnología html5 y el apoyo de la plataforma Wordpress, para finalmente ser alojado en un hosting compartido. Este desarrollo pretende poner en ejecución los conocimientos tanto prácticos como teóricos adquiridos a lo largo de toda la titulación, desde la concepción de la idea hasta la consecución de la misma con un proyecto prototipo completamente funcional. Se ha aplicado una metodología que permitió estudiar el mercado y la posibilidad de implementación del proyecto, las herramientas a utilizar y las tecnologías más adecuadas para lograr construirlo. Los resultados del trabajo de fin de máster son muy satisfactorios tanto en el ámbito académico como personal ya que se han logrado los objetivos propuestos mediante la implementación de los conceptos y técnicas aprendidas a lo largo de los estudios y se han superado las dificultades que supone la creación de proyectos de ésta naturaleza. Como conclusión, éste desarrollo ha servido para complementar las experiencias en las aulas virtuales y da la pauta para la expansión de funcionalidades nuevas o existentes que permitan enriquecer el aprendizaje en éste tipo de proyectos.

Palabras clave Modelos 3d, e-commerce, blender, descargas.

7 / 53

Índice

Capítulo 1: Introducción...... 11 1.Introducción ...... 11 2. Descripción ...... 12 3. Objetivos generales ...... 14 3.1 Objetivo principal...... 14 3.2 Objetivos secundarios...... 14 3.3 Alcance...... 14 4. Metodología y proceso de trabajo ...... 15 5. Planificación...... 16 6. Presupuesto ...... 17 7. Estructura del resto del documento...... 18

Capítulo 2: Análisis ...... 19 1. Estado del arte ...... 19 2. Análisis del mercado...... 23 2.1 Comparativa de la competencia ...... 23 3. Definición de objetivos/especificaciones del producto...... 25

Capítulo 3: Diseño ...... 26 1. Arquitectura general del sistema ...... 26 2. Arquitectura de la información y diagramas de navegación ...... 27 3. Diseño gráfico e interfaces ...... 29 3.1 Estilos ...... 29 3.2 Usabilidad/UX...... 31 3.3 Problemas encontrados ...... 33 4. Lenguajes de programación y APIs utilizadas ...... 35

Capítulo 4: Implementación ...... 37 1. Pre-Requisitos de uso...... 37

Capítulo 5: Demostración ...... 37 1. Acceso al sitio...... 37 2. Prototipos ...... 37 3. Tests...... 42 4. Ejemplos de uso del producto ...... 46

8 / 53

Capítulo 6: Conclusiones y líneas de futuro ...... 48 1. Conclusiones ...... 48 2. Líneas de futuro ...... 48

Bibliografía...... 50 Anexos ...... 52 Anexo A: Glosario ...... 52 Anexo B: Entregables del proyecto ...... 53

9 / 53

Figuras y tablas Índice de figuras Figura 1: Tablas del sistema ...... 27 Figura 2: Flujo lógico de navegación ...... 27 Figura 3: Sistema de plantillas de Wordpress ...... 28 Figura 4: Imagotipo transparente para cabecera ...... 29 Figura 5: Imagotipo sólido para ícono del sitio ...... 30 Figura 6: Paleta de colores ...... 30 Figura 7: Fuente del sitio...... 30 Figura 8: Menú de navegación horizontal ...... 31 Figura 9: Menú adaptivo en dispositivos iPad...... 31 Figura 10: Menú adaptivo en dispositivos Samsung Galaxy S5...... 32 Figura 11: Mapa del sitio ...... 33 Figura 12: Página de detalle de producto original ...... 34 Figura 13: Página de detalle de producto actualizada ...... 35 Figura 13: Área de edición de javascript ...... 35 Figura 12: Área de edición de CSS...... 35 Figura 14: Página de inicio (parcial)...... 38 Figura 15: Página insumos de oficina (parcial) ...... 38 Figura 16: Página visor 3D (lámpara) ...... 39 Figura 17: Página Checkout ...... 39 Figura 18: Página login...... 40 Figura 18: Página registro de usuario...... 40 Figura 19: Página tutoriales...... 41 Figura 20: Página confirmación de compra ...... 41 Figura 21: Página historial de compras ...... 42 Figura 22: Resultados obtenidos de PSI – versión escritorio ...... 45 Figura 23: Resultados obtenidos de PSI – versión móvil ...... 45 Figura 22: Registro de usuario ...... 46 Figura 23: Compra de producto ...... 47

Índice de tablas Tabla 1: Ventas de comercio electrónico en todo el mundo desde 2014 hasta 2021...... 11 Tabla 2: Planificación del proyecto...... 16 Tabla 3: Hitos del proyecto ...... 16 Tabla 4: Presupuesto...... 17 Tabla 5: Uso de los CMS a nivel mundial ...... 20 Tabla 6: Comparativas entre frameworks webgl...... 23 Tabla 7: Arquitectura general del sistema...... 26

10 / 53

Capítulo 1: Introducción

1.Introducción

El desarrollo de éste proyecto se basa por un lado en la experiencia profesional tanto en el ámbito de desarrollo web así como en la creación de proyectos 3d como modelados y animaciones, y por otro lado la profundización en el uso de tecnologías de desarrollo de sitios de ventas online de tipo e-commerce.

El comercio electrónico permite a los clientes eliminar las barreras geográficas y comprar productos en cualquier momento y desde cualquier lugar. Una de las principales diferencias entre los mercados en línea y los tradicionales son las estrategias de negocio. Los mercados tradicionales ofrecen poca variedad de productos debido a las limitaciones del espacio físico mientras que las tiendas en línea generalmente no cuentan con inventario pero envían los pedidos de los clientes directamente al fabricante. Los mercados tradicionales basan sus precios en el tráfico de la tienda y el costo de mantener su inventario mientras que los mercados en línea basan los precios generalmente en la velocidad de entrega.

El crecimiento y popularidad del comercio electrónico van en aumento, se estima que el mercado en línea se incremente en un 56% en el periodo 2015-2020. Sólo en el 2017, las ventas de e-commerce en todo el mundo llegaron a los 2,3 billones de dólares y se prevé aumentarán a 4,88 billones de dólares para el año 2021 (1) . En éste mismo año, se espera un crecimiento del 2% en los mercados tradicionales.

Tabla 1: Ventas de comercio electrónico en todo el mundo desde 2014 hasta 2021.

11 / 53

Con éstos antecedentes se ha decidido implementar un sitio web e-commerce que permita la distribución mediante la compra 1 de objetos tridimensionales desarrollados con la aplicación Blender®, esto debido a que a más de ser gratuita y de libre distribución, reúne una serie de características que la han convertido en un fuerte rival de aplicaciones existentes en el mercado como Maya o 3DS Max, algunas de éstas características son la posibilidad de ejecutar el programa en varios sistemas operativos como Windows, Mac, Linux, el tamaño en disco requerido es bastante reducido, la rapidez de ejecución, la implementación de un nuevo y mejorado sistema de renderizado en tiempo real (2) , entre otros.

Se ha elegido un proyecto dentro del cual se pueda aplicar tanto conceptos de interfaces multimedia, como experiencias de usuario, manejando herramientas de programación que se alineen con los estándares de desarrollo actuales y de esta forma experimentar el funcionamiento tanto desde una perspectiva de usuario como de desarrollador.

2. Descripción

La relevancia de éste proyecto se basa en el surgimiento de nuevas tecnologías basadas en entornos 3D como la realidad virtual y realidad aumentada, que en principio estaban asociadas con el entretenimiento pero actualmente su potencial de uso se extiende a áreas tan importantes como la medicina o ingeniería, en el caso de la realidad aumentada que es considerada mucho más relevante debido a la interacción del usuario con elementos de su entorno como elementos c reados artificialmente (3).

Con éste proyecto los artistas y/o diseñadores cuentan con una plataforma de distribución de objetos tridimensionales permitiendo acelerar el proceso de producción de cualquier tipo de contenido sean animaciones, aplicaciones interactivas, paseos virtuales, entre otros, y también sirve como un punto de convergencia en el cual se puedan compartir comentarios y tutoriales. Se espera además con éste proyecto contribuir en cierta medida con el soporte a la aplicación Blender al igual que ser un espacio donde converjan tanto expertos en el tema como quienes se inician en este campo.

El sitio web cuenta con una sección para compras de objetos tridimensionales, algunos de ellos catalogados como gratuitos, se podrán descargar los archivos en las versiones blend (4) y fbx (5), una sección de tutoriales de terceros organizados por objetivos, de los cuales se podrán aportar comentarios u otros contenidos de aprendizaje, una sección para el mantenimiento de las cuentas de usuario y acceso dentro de la cual el usuario podrá revisar su historial de compras y descargas.

Ya que el sitio web funciona dentro de los navegadores a través de internet, este aspecto ha sido tomado en cuenta para adaptar el diseño de la interfaz e interactividad en base al tamaño del dispositivo de visualización y al modelo adaptivo (Responsive Web Design) ya que la navegación

1 Algunos objetos podrán ser descargados gratuitamente

12 / 53

Diseño y desarrollo de un sitio web e-commerce para la distribución y comercialización de piezas gráficas tridimensionales producidas en Blender®, Máster en Aplicaciones Multimedia, Juan Pablo Ruiz Yépez generalmente se lleva a cabo desde diferentes dispositivos, computadores de escritorio, laptops, tabletas, smartphones, entre otros. El diseño de la interfaz está enfocado en los tres tipos de dispositivos más comúnmente utilizados, computadores, tabletas y smartphones.

Se ha tomado como base de diseño el patrón Column drop que tiene como principio mantener el contenido intacto dentro de sus contenedores en dispositivos laptops y computadoras de escritorio, y en los más pequeños hacer fluir verticalmente los contenedores uno debajo de otro para permitirle al usuario la navegación vertical.

13 / 53

3. Objetivos generales

3.1 Objetivo principal

Desarrollar un sitio web e-commerce que permita la comercialización de objetos tridimensionales creados en Blender.

3.2 Objetivos secundarios

1. Crear y preparar los objetos tridimensionales a distribuir mediante la aplicación Blender. 2. Implementar el sistema de visualización de los objetos en páginas html mediante la tecnología webgl a través de Verge3D . 3. Implementar y configurar localmente el entorno servidor MAMP (Apache, MySQL, Apache) y Wordpress. 4. Instalar y configurar el plugin de wordpress Easy Digital Downloads (EDD). 5. Desarrollar las secciones del sitio a través de un tema adecuado al contexto de e-commerce. 6. Integrar los conocimientos adquiridos durante el Máster en la implementación del sitio que cumpla con criterios de adaptabilidad. 7. Implementar y configurar la puesta en línea del sitio desde el hosting.

3.3 Alcance

A continuación y en base a los objetivos planteados se describe el alcance del producto:

Creación de objetos: Se crearán en total ocho objetos relacionados con activos de oficina los mismos que contarán con sus respectivos materiales y texturas (cuando sea aplicable).

Implementación webgl: En base a los objetos creados, se desarrollarán las visualizaciones tridimensionales a través de la aplicación verge3D contenidas en documentos independientes con formato HTML.

Implementación entorno servidor: La funcionalidad del sitio se lleva a cabo en un entorno servidor remoto con un stack (Apache, MySQL, PHP) con una instalación de la más reciente versión de Wordpress.

Implementación del plugin EDD: Se instalará sobre la plataforma Wordpress el plugin EDD (y plugins complementarios para su funcionamiento) para el manejo y administración de las compras y descargas de los productos y convertir el sitio en e-commerse. Para las compras se hace uso de un Gateway de prueba.

Diseño de páginas: Las páginas del sitio están basadas en el tema Vendd.

14 / 53

Adaptabilidad del sitio: Las páginas serán desarrolladas tomando en cuenta criterios de adaptabilidad para ser visualizados correctamente independiente del tamaño del dispositivo.

4. Metodología y proceso de trabajo

Para el desarrollo de éste trabajo se decidió adoptar una temática común existente en los sitios web que ofrecen el mismo tipo de servicio que es la comercialización de objetos y los sistemas de ayuda en base a tutoriales, sin embargo, éste proyecto ofrece la posibilidad de que el potencial comprador interactúe con los objetos en base a la tecnología webgl ya que pocos sitios han implementado esta funcionalidad.

Debido a que no se contaba con un equipo de trabajo para la elaboración de éste trabajo, se ha adoptado una metodología en cascada en la cual se han definido cuatro fases de desarrollo, la fase de diseño conceptual del sitio, la fase de desarrollo del sitio, la fase de pruebas y corrección de errores, y finalmente la fase de implementación del sitio.

15 / 53

5. Planificación

A continuación se expone la planificación definida para el desarrollo del proyecto :

Tabla 2: Planificación del proyecto

Nombre Duración (días) Fecha de inicio Fecha de fin

PEC 3 – Entrega 1 28 19/03/2019 15/04/2019

PEC 4 – Entrega 2 28 16/04/2019 13/05/2019

PEC 5 - Cierre 25 14/05/2019 07/06/2019

Tabla 3: Hitos del proyecto

Cabe mencionar que la planificación se mantuvo sin alterar durante todo el proceso de desarrollo del trabajo, cada actividad ha sido realizada en los tiempos establecidos.

16 / 53

6. Presupuesto

A continuación se presenta el coste que supone la producción del proyecto:

Concepto Tiempo Costo por Total ($) (horas) hora ($) Conceptualización del producto 24 - 800 Creación de objetos 3D2 30 35 1050 Creación de visualización de objetos con Verge3D 21 15 315 Implementación local entorno servidor web MAMP 1 15 15 Instalación y configuración de Wordpress 1 15 15 Instalación y configuración del plugin EDD 2 15 30 Configuración del sitio staging online 1 15 15 Desarrollo de las páginas del sitio en Wordpress 8 15 120 Testeo de adaptabilidad del diseño de las páginas 2 15 30 Puesta en línea del sitio completamente funcional 3 15 45 Hosting y Dominio (anual) - - 32 Servicio eléctrico - - 90 Total ($) 2557

Tabla 4: Presupuesto

2 Incluye materiales, texturas y renderizado

17 / 53

7. Estructura del resto del documento

Breve descripción de los otros capítulos de la Memoria.

Explicación de los contenidos de cada capítulo y su relación con el trabajo en global.

18 / 53

Capítulo 2: Análisis

1. Estado del arte

En éste apartado se ha tomado como base de investigación y análisis tres ramas tecnológicas muy importantes que en conjunto darán origen al producto final, los sistemas manejadores de contenidos CMSs, las plataformas e-commerce y el diseño 3D junto con las tecnologías que este conlleva.

Diseño 3D Una de las tendencias con un futuro prometedor y que día a día gana más fuerza es la creación de contenidos 3D, donde se pueden crear objetos a partir de diseños esquematizados existentes en nuestro entorno o concebidos en la mente mediante herramientas de software creadas para éste propósito, debido a su versatilidad, éste tipo de contenido puede adaptarse a los diferentes campos de aplicación como el entretenimiento, la educación, ingeniería e inclusive ha empezado a ganar terreno en el área de la medicina, con la incursión de la realidad aumentada (6).

Éste tipo de contenido se vuelve más relevante aún con la posibilidad de producir físicamente los modelos digitales a través de una emergente tecnología de impresión 3D (7) con la cual muchos han empezado a sacar provecho de sus beneficios (8), como por ejemplo la posibilidad de producir repuestos para ciertos aparatos mecánicos, piezas de juegos para niños, entre otros.

Algunas de las aplicaciones más famosas y utilizadas para la creación de contenido 3D se detallan a continuación:

3DS Max: Producido por Autodesk es un software de modelado y renderización para diseños visuales, juegos y animaciones, se ejecuta sobre la plataforma Windows únicamente. Su costo está basado en una suscripción de uso anual de aproximadamente $1545 (9) , con éste costo se tiene como beneficio el soporte de especialistas, recursos en línea y asistencia remota.

Maya: Producido por Autodesk, comparte las mismas características que 3DSMax y adicionalmente permite la creación de proyectos de realidad virtual, su costo por suscripción anual es el mismo que 3DSMax (10) y los beneficios adquiridos van desde el manejo de herramientas administrativas hasta soporte técnico vía chat, teléfono o en línea.

Blender: Producido por The Blender Foundation (11), una comunidad de programadores a nivel mundial, comparte las mismas características que los productos de Autodesk, sin embargo es gratuito, multiplataforma y opensource lo cual permite que los bugs sean corregidos más rápidamente y se reduzcan las vulnerabilidades que podría producir en el sistema operativo. Éstas características fueron el punto decisivo para emplear ésta aplicación para la creación del contenido 3D del proyecto.

19 / 53

Sistemas Manejadores de Contenido

Un CMS (12) permite manejar contenido digital mediante la colaboración de múltiples usuarios en un entorno colaborativo. Se caracteriza principalmente en la publicación basada en la web, control de versiones, inserción de contenido que puede ser texto, gráficos, fotos video, audio, entre otros. Básicamente separan el contenido de la presentación con la posibilidad del uso de plantillas o temas prediseñados para ser adaptados en los sitios web.

A continuación se presentan las características de algunos de éstos CMSs:

Wordpress

Se trata de un sistema de manejo de contenidos (13) de código abierto y de libre distribución, está basado en PHP y MySQL, sus principales características incluyen una base extensa de plugins que pueden ser utilizados para realizar diferentes tareas como respaldos automatizados, optimización de imágenes, moderación de mensajes, entre otros, también cuenta con un sistema de plantillas que hacen que el desarrollo de un sitio dentro de esta plataforma sea rápido y relativamente sencillo. A continuación se detallan algunas características importantes que vale la pena mencionar:

- Funciona localmente y online - Implementa un sistema de usuarios para limitar el acceso a partes sensibles. - Fácil instalación y actualización. - Temas y estilos de página libres y de pago.

Wordpress cuenta con una base de usuarios bastante extensa (14), conforma el 30.6% de los sitios web más famosos a nivel mundial.

Tabla 5: Uso de los CMS a nivel mundial

20 / 53

Joomla

Es un CMS gratuito y de código abierto para la publicación de contenido web. Está basado en un patrón de desarrollo modelo-vista-controlador(MVC) (15) el cual permite utilizarlo independientemente del sistema manejador de contenidos. Al igual que Wordpress, Joomla cuenta con miles de extensiones creadas por terceros. También hay miles de plantillas de disponibles, muchas de las cuales son gratuitas y otras de pago. Algunas de sus principales características incluyen:

- Soporte multilenguaje. - Optimización de Motores de búsqueda (SEO) (16). - De uso gratuito bajo la licencia GPL (17). - Extensiones que extienden la funcionalidad de los sitios.

Drupal

Es gratuito y de código abierto (18) escrito en PHP y distribuido bajo la Licencia Pública General de GNU. Proporciona un marco de desarrollo para al menos el 2,3% de todos los sitios web del mundo, su uso va desde la creación de blogs personales hasta sitios corporativos, políticos y gubernamentales. Drupal también es utilizado para la gestión del conocimiento y para la colaboración empresarial. Cuenta con una versión Core que permite extender su funcionalidad con:

- Acceso a estadísticas y accesos. - Creación y edición multiusuario. - Restricción de acceso al sistema - Blogs, libros, comentarios, foros y encuestas.

Según algunos estudios, el sistema de gestión de contenido más popular es WordPress (19), manejado en más del 34% de todos los sitios web en Internet, y ocupando aproximadamente el 60.8% de la cuota de mercado, seguido por Joomla con un 5.1% y Drupal con un 3.3%. Por ésta razón y por ser un sistema completamente compatible con el plugin EDD (Easy Digital Downloads) se ha decidido usar Wordpress como gestor manejador de contenidos.

E-commerce

Se trata de un término que hace referencia a la compra y/o venta de productos o servicios a través de internet (20), la ventaja de ésta plataforma es que éstas ventas pueden incluir productos digitales como libros electrónicos, canciones, películas, entre otros y también productos físicos como aparatos electrónicos, computadoras, aparatos de limpieza, accesorios de vehículos, etc.

21 / 53

Con la aparición del e-commerce básicamente poner a la venta un producto o servicio resulta bastante rentable desde el punto de vista de la implementación ya que no requiere de un local físico para funcionar, virtualmente una tienda no requiere de pago de rentas, u otros servicios, lo cual hace que ésta sea una alternativa atractiva para muchas empresas. Existen varias formas de crear sitios del tipo e-commerce, para el desarrollo del proyecto, se ha tomado como referencia un plugin diseñado específicamente para desarrollar tiendas digitales sobre Wordpress, se llama Easy digital downloads (EDD) y la elección se debe a que ofrece un conjunto de características de venta aplicables al proyecto como reportes, control de descargas, manejo de pagos online, entre otros.

3D en la web

WebGL Es una tecnología emergente de renderizado interactivo 2D y 3D (21) desarrollada por The Khronos Group que se ejecuta sobre páginas web sin la necesidad del uso de plugins. Vio la luz por primera vez en el año 2011 y desde entonces su uso y aceptación han ido incrementando con los años debido principalmente a que está basado en javascript y por lo tanto integrado completamente con los estándares web. Esta integración permite el aprovechamiento del canvas introducido en HTML5 que con la ayuda de las unidades de procesamiento gráficas (GPUs) se pueden procesar no sólo las imágenes sino las simulaciones de interacciones físicas entre objetos.

Frameworks que usan WebGL Debido a la versatilidad de WebGL, actualmente existen en el mercado algunas herramientas basadas en ésta tecnología, algunas de libre distribución y otras de paga. A continuación se presenta un análisis de las características de algunas de las herramientas de este tipo más comunes.

Three.js: Es una librería basada en javascript de libre distribución (22), y aunque su implementación resulta bastante sencilla y funciona perfectamente con otras bibliotecas de javascript, su principal desventaja es que posee funcionalidades muy limitadas en términos de interacción con el usuario y a pesar de ser un proyecto opensource, aún existe escasa documentación y referencias.

Blend4Web: Es una herramienta (23) de libre distribución y opensource creada por Triumph LLC, permite la creación de previews interactivos en proyectos creados en Blender, sus características principales son que se puede aplicar hasta ocho tipos de animación del tipo esqueleto y basado en vértices, y la posibilidad de agregar interactividad en las escenas mediante la introducción de una herramienta de programación basada en bloques lógicos similar a la que ofrece Blender en su motor de juegos. En la actualidad el futuro de ésta herramienta aún no tiene un horizonte definido ya que en el

22 / 53

2017 una parte esencial del grupo de desarrolladores, abandonó la empresa (24) para iniciar el desarrollo de un nuevo proyecto similar dando origen de esta forma a Verge3D.

Verge3D: Es un kit de herramientas desarrollada por Soft8Soft (25) que soporta actualmente proyectos creados en 3ds max y Blender convirtiéndolos a un formato compatible para ser visualizado en los navegadores web. Verge3D al igual que Blend4Web permite la animación basada en esqueletos y la programación de la interacción puede ser implementada mediante Puzzles, que no es más que un entorno visual de programación basado en Google Blocky (26).

Existen otras herramientas adicionales que emplean la misma tecnología a manera de motores de videojuegos (27), sin embargo, como objetivo específico de éste proyecto se pretende darle la posibilidad al usuario de navegar en el espacio 3D, sin la necesidad de manejar un sistema de puntuaciones o de simulación de física, por ésta razón se han excluido de éste análisis.

La figura a continuación representa una tabla comparativa entre algunos frameworks WebGL y sus principales características:

Tabla 6: Comparativas entre framew orks webgl

2. Análisis del mercado

2.1 Comparativa de la competencia

A continuación se presenta un análisis sobre las plataformas existentes en el mercado que ofrecen similares características a los objetivos del presente proyecto:

Blender market (28): Es una empresa desarrollada por entusiastas del diseño de productos digitales tridimensionales, basados en Blender, permite a los usuarios registrarse en el sitio y convertirlos en potenciales vendedores, con el pago de una comisión por venta. Los tipos de productos que

23 / 53

Diseño y desarrollo de un sitio web e-commerce para la distribución y comercialización de piezas gráficas tridimensionales producidas en Blender®, Máster en Aplicaciones Multimedia, Juan Pablo Ruiz Yépez comercializan son modelos tridimensionales, Materiales, Sombreadores, Scripts y Addons. Ofrece la posibilidad de visualizar las piezas antes de la compra a través de imágenes estáticas y en el caso de piezas animadas, cuentan únicamente con videos que muestran las diferentes poses del objeto.

Sketchfab (29): Este sitio de venta de piezas tridimensionales, al igual que Blender market le da la posibilidad al usuario de vender sus propias piezas gráficas manejando un modelo de negocio, completamente diferente basado en planes de pago mensual que dependiendo del plan, permiten al usuario el uso de una u otras características de venta en el sitio. A diferencia de Blender market, aquí se puede visualizar los objetos en un visor incorporado a la página web, sin embargo, en algunos modelos existe un comportamiento inesperado del visor asociado a la cantidad de geometría de los objetos y el nivel de detalle, la navegación no responde adecuadamente y toma mucho tiempo cargar el visor.

24 / 53

3. Definición de objetivos/especificaciones del producto

El sitio está definido en el idioma español y ha sido desarrollado sobre la plataforma Wordpress. Su objetivo principal es la venta de modelos tridimensionales creados en Blender. Para realizar una compra, el cliente debe haberse registrado primero. El procedimiento es intuitivo, se le presenta una lista de objetos disponibles (algunos de ellos gratuitos) de los cuales puede escoger más de uno y agregarlo al carrito de compras, puede previsualizar el modelo en el espacio tridimensional con la ayuda de un control de navegación y, cuando haya decidido realizar la compra, accede al checkout dentro del cual se le mostrará la lista de ítems seleccionados, puede agregar o eliminar ítems y finalmente realiza el pago tras del cual se le presentan los enlaces de descarga correspondientes.

25 / 53

Capítulo 3: Diseño

1. Arquitectura general del sistema

El sitio se desarrolló sobre Wordpress en un hosting compartido (30), a continuación se detallan los elementos que componen el proyecto: Front-end: El área de control de Wordpress. Todos los plugins requeridos para la funcionalidad del sitio: Akismet Anti-Spam – Controlar los mensajes spam en los blogs. Easy Digital Downloads – Manejo de productos, compras y descargas. Login Logout Register Menu – Maneja los vínculos de ingreso y salida del sistema. Page Builder – Constructor de páginas responsive mediante drag & drop. User Menus – Control de visualización de ítems en base al rol de usuario. Verge3D – Toolkit para la creación de experiencias web interactivas. Back-end: Servidor web remoto con los siguientes componentes: Motor de base de datos MySQL. Leguaje de servidor PHP. Software de servidor web Apache.

Front-ent (cliente) Back-end (servidor) Plugins MySQL Akismet Lenguaje PHP

Easy Digital Downloads Apache Login Logout Register Menu

Page Builder Wordpress User Menus Verge3D

Tabla 7: Arquitectura general del sistema

26 / 53

2. Arquitectura de la información y diagramas de navegación

Los datos manejados presentados al cliente en el sitio son manejados en el back-end mediante el lenguaje PHP y están almacenados en tablas dentro de una base de datos, las tablas se detallan a continuación:

Figura 1: Tablas del sistema

El diagrama a continuación muestra el flujo lógico de navegación del sitio:

Figura 2: Flujo lógico de navegación

27 / 53

Las páginas están basadas en un sistema de plantillas que funcionan independientemente del tema aplicado, a continuación el esquema estructural de éste sistema:

Figura 3: Sistema de plantillas de Wordpress

28 / 53

3. Diseño gráfico e interfaces

Debido a que Wordpress permite el uso de temas como elementos base para el diseño de las páginas, no se han definido bocetos ni croquis, se eligió el tema llamado Vendd (31) que es gratuitio y totalmente compatible con el plugin EDD y Wordpress. Este tema permite la personalización de colores, fondos, logos, entre otros, al igual que la inserción de shortcodes (32) tanto en páginas como en entradas. El diseño utilizado en las páginas es simplista, enfocando la atención en los elementos de interés para el usuario.

3.1 Estilos

Imagotipo El sitio cuenta con dos imagotipos, uno para la cabecera de las páginas y el otro como ícono del sitio para ser visualizado en las pestañas del navegador, barras de favoritos y dentro de las aplicaciones móviles.

Figura 4: Imagotipo transparente para cabecera

29 / 53

Figura 5: Imagotipo sólido para ícono del sitio Paleta de colores La elección de los colores se basa en una paleta de colores fríos y cálidos.

Figura 6: Paleta de colores

Tipografía La fuente utilizada a lo largo del sitio es “Open Sans” de Google, el tamaño base es de 16px o 1 em y la fuente es adaptaba a sus diferentes variaciones dependiendo de las secciones en las que se encuentre.

Figura 7: Fuente del sitio

30 / 53

3.2 Usabilidad/UX

Patrón de Navegación Para los menús en dispositivos de escritorio y tabletas se ha tomado como referencia el patrón de diseño horizontal (33), junto al nombre de la aplicación, se ha elegido este patrón ya que la mayoría de los usuarios están familiarizados con este diseño lo cual cubre las expectativas del usuario sobre dónde está la navegación del sitio.

Figura 8: Menú de navegación horizontal

En el caso de los dispositivos de menor tamaño como los smartphones y ciertos modelos de tabletas, se ha dispuesto una versión adaptiva del menú en el que todos los elementos se comprimen y son mostrados verticalmente, manteniendo su jerarquía.

Figura 9: Menú adaptivo en dispositivos iPad.

31 / 53

Figura 10: Menú adaptivo en dispositivos Samsung Galaxy S5.

Sitemap La figura a continuación representa la estructura de navegación a cada una de las páginas del sitio:

32 / 53

Figura 11: Mapa del sitio

3.3 Problemas encontrados

Organización de contenido Durante la fase de desarrollo, surgi ó un inconveniente de carácter organizacional que pudo ser resuelto oportunamente. En el caso de la presentación tridimensional de los objetos, el diseño original del tema mostraba únicamente la imagen del producto y su descripción (figura 12), el objetivo era eliminar esa imagen y en lugar de ella insertar una tabla con las características del modelo, y debajo de ella, texto de ayuda sobre la navegación en el espacio, y al final el visor 3D, la configuración resultó bastante limitada en éste sentido por lo que se procedió a insertar código html css y javascript dentro del diseño de la página.

33 / 53

Figura 12: Página de detalle de producto original

34 / 53

Figura 13: Página de detalle de producto actualizada

Seguridad del sitio con certificado SSL En la práctica, cualquier sitio de venta de productos o servicios online debe implementar una capa de seguridad en las transacciones basada en certificados SSL que establecen un vínculo encriptado entre el servidor y el cliente para garantizar que los datos proporcionados por el cliente sean transmitidos de manera segura en la red, en el backend dentro de Wordpress existe la posibilidad de implementar ésta seguridad la cual es compatible y recomendada por el plugin utilizado para manejar las transacciones EDD, sin embargo, en éste proyecto no se la ha implementado ya que no se pudo validar la solicitud de firma de certificado (CSR) debido a que los datos proporcionados no pudieron ser verificados por el servidor, por ésta razón las pruebas de compra son manejadas con el protocolo convencional http.

4. Lenguajes de programación y APIs utilizadas

Wordpress es una herramienta que permite la manipulación de contenido ajustándolo automáticamente al tema seleccionado, sin embargo, en muchos de los casos se requiere alterar en cierta medida ya sea algún comportamiento del sitio o la apariencia de los elementos, como sea el caso, se vuelve imprescindible el uso de algunas tecnologías web existentes, en éste proyecto, se han manejado Javascript, CSS y HTML. La escritura del código CSS ha sido manejada directamente desde Wordpress a través de la sección CSS adicional, y el código javascript fue inyectado dentro de las páginas en la sección HTML.

Figura 13: Área de edición de javascript

Figura 12: Área de edición de CSS

35 / 53

Plugins Para lograr la funcionalidad requerida para la venta de los productos se ha requerido de la instalación de plugins de terceros, a continuación el detalle:

Ea sy Digital Downloads: Sistema de venta de productos digitales en línea, ofrece una completa integración con los procesadores comerciales más comunes, la versión gratuita permite la integración con Paypal Standard y Amazon Payments.

Verge3D: Permite la interactividad con sitios web a través de la tecnología webgl, algunas de sus características incluyen la generación de gráficos fotorrealistas, integración con herramientas de desarrollo de contenidos 3D como Blender o 3DS Max y un entorno de scripting visual para interacciones más complejas.

36 / 53

Capítulo 4: Implementación

1. Pre-Requisitos de uso

Ya que se trata de un sitio web alojado en un hosting remoto, no se requiere de una instalación sin embargo para garantizar su correcto funcionamiento, se sugiere contar con los siguientes requisitos e software y hardware:

Pre-Requisitos de software: Un sistema operativo con los requisitos mínimos establecidos. Un navegador web actualizado que soporte la generación de gráficos tridimensionales.

Pre-Requisitos de hardware: Cualquiera que permita la correcta ejecución de los pre-requisitos de software.

Capítulo 5: Demostración

1. Acceso al sitio

Para acceder al sitio, se debe escribir la dirección http://www.3dmarket.website desde un navegador.

2. Prototipos

A continuación se muestran las páginas creadas dentro del CMS a manera de prototipos de alta resolución.

37 / 53

Figura 14: Página de inicio (parcial)

Figura 15: Página insumos de oficina (parcial)

38 / 53

Figura 16: Página visor 3D (lámpara)

Figura 17: Página Checkout

39 / 53

Figura 18: Página login

Figura 18: Página registro de usuario

40 / 53

Figura 19: Página tutoriales

Figura 20: Página confirmación de compra

41 / 53

Figura 21: Página historial de compras

3. Tests

Adaptabilidad Para comprobar la adaptabilidad del sitio a los diferentes dispositivos de visualización, se ha hecho uso de las herramientas para desarrolladores de Google Chrome, con el fin de virtualizar algunos de ellos y comprobar la existencia de fallas en los breakpoints de ajuste para corregirlas posteriormente. A continuación el resumen de resultados

Pruebas de adaptabilidad Dispositivo Ajuste de Ajuste Ajuste de Ajuste Referencia bloques de tamaño de de de texto imágenes menú contenido

Galaxy S5 Ok Ok Ok Ok

42 / 53

iPhone X Ok Ok Ok Ok

iPhone Ok Ok Ok Ok 6/7/8

43 / 53

iPad Ok Ok Ok Ok

iPad Pro Ok Ok Ok Ok

Rendimiento La comprobación del rendimiento del sitio se ha realizado con la herramienta PageSpeed Insights (PSI) que analiza el contenido de los sitios web y reporta el nivel de rendimiento tanto en dispositivos móviles como de escritorio. Para la versión de escritorio, los resultados obtenidos son los siguientes:

44 / 53

Figura 22: Resultados obtenidos de PSI – versión escritorio

Los resultados sugieren que en general el rendimiento del sitio es bastante aceptable aún con un índice de velocidad 3 de 1.9 segundos. Para la versión móvil, los resultados obtenidos son los siguientes:

Figura 23: Resultados obtenidos de PSI – versión móvil

Aunque los indicadores demuestran un leve incremento en la carga de la página principal con respecto a la versión móvil, esto no significa que el sitio sufra de una baja radical en su rendimiento, la herramienta sugiere algunos puntos a corregir para mejorar la puntuación, sin embargo, no se han realizado los cambios sugeridos en el núcleo de wordpress ya que existe la posibilidad de que alguno de los plugins instalados no funcione o funcione incorrectamente.

3 Muestra qué tan rápido se cargan los contenidos de una página

45 / 53

4. Ejemplos de uso del producto

A continuación se detallan los pasos necesarios para completar algunas de las funcionalidades que ofrece el sitio.

Registro de un nuevo usuario: Se puede acceder a ésta página desde el menú principal con el nombre “Registrarse”, una vez dentro de ella, el sitio requiere de un nombre de usuario, correo electrónico (para enviar los recibos de compra), y la contraseña. Estos son los datos principales que se requiere para registrar un nuevo usuario, una vez registrado, el usuario puede proceder a registro de datos adicionales a través del vínculo “Perfil” en el menú principal.

Figura 22: Registro de usuario

Compra de un producto: Dentro de la página de inicio, en el menú objetos, en el encabezado, se mostrará una lista de objetos categorizados por tipo, en éste proyecto sólo existen insumos de oficina, al seleccionar ésta opción se le mostrará al cliente la lista de objetos con sus respectivos precios, algunos están marcados como gratuitos, antes de realizar la compra haciendo click en la etiqueta de precio, puede previsualizar el objeto tridimensionalmente haciendo click en su imagen.

Finalmente al seleccionar el precio de algún producto, el carrito de compras se actualiza y el cliente puede proceder a la página de pago haciendo click en el botón “Proceder al pago” la cuál mostrará un resumen del o los objetos añadidos al carrito, deberá asegurarse de que el email y el nombre estén presentes antes de hacer click en el botón “Compra”.

46 / 53

Una vez realizada la compra, se presenta una página con la confirmación y los vínculos de descarga de los objetos comprados, por razones de seguridad, únicamente podrá descargarlos dos veces antes de que el vínculo se bloquee.

Figura 23: Compra de producto

47 / 53

Capítulo 6: Conclusiones y líneas de futuro

1. Conclusiones

Con la consecución del proyecto, se concluye que independiente de la naturaleza o tamaño del mismo, es muy importante partir con una idea bien clara de lo que se espera obtener, de ésta forma se ha logrado organizar el desarrollo cumpliendo a cabalidad con todos los objetivos propuestos. La planificación del trabajo ha permitido resolver cada uno de los objetivos secundarios planteados, y aunque se presentaron algunas dificultades durante el proceso de construcción, éstas pudieron ser resueltas sin mayor dificultad.

Cabe mencionar también la importancia de las aportaciones de terceros, la comunidad de programadores que hace posible la distribución gratuita de herramientas para la creación de aplicaciones, en éste proyecto se ha hecho uso de plugins para lograr los objetivos planteados y funcionalidades esperadas, sin ellos, el tiempo de desarrollo se habría incrementado exponencialmente y algunas de las características muy probablemente no habrían funcionado como se esperaba.

Finalmente, durante el desarrollo han surgido algunos cambios menores con el fin de extender la funcionalidad del proyecto sin que esto influya en los objetivos planteados, y se ha logrado cumplir con cada una de las etapas en los tiempos previstos.

2. Líneas de futuro

El proyecto presentado puede mejorar y extender su funcionalidad, con el tiempo y presupuesto adecuado, algunas de éstas implementaciones podrían ser:

- La conversión del sitio web a una aplicación web progresiva para lograr una mayor inmersión tanto en dispositivos de escritorio como móviles.

- La posibilidad de que el cliente ponga a la venta sus propias creaciones convirtiendo el proyecto en un sitio con funcionalidad de tipo Marketplace.

- Poner a la venta también otro tipo de recursos como materiales, texturas, add-ons, entre otros.

- Convertir el sitio en multilenguaje, para lograr captar una mayor base de clientes.

48 / 53

- Implementar un sistema de cupones y/o descuentos en las compras de productos.

- Mejorar la interacción con el entorno 3D permitiendo que el usuario no solo pueda navegar en la interfaz sino también que pueda alterar su apariencia.

49 / 53

Bibliografía

1. Retail e-commerce sales worldwide from 2014 to 2021 (in billion U.S. dollars). https://www.statista.com/statistics/379046/worldwide-retail-e-commerce-sales/. [En línea] marzo de 2018. 2. Blender 2.8 Highlights. https://code.blender.org/2018/03/blender-2-8-highlights/. [Online] marzo 22, 2019. 3. Auge de las tecnologías inmersivas: la realidad aumentada y la virtual se generalizarán en las operaciones empresariales en los próximos 3 años. https://bigdatamagazine.es/auge-de-las-tecnologias-inmersivas-la-realidad-aumentada-y-la-virtual-se- generalizaran-en-las-operaciones-empresariales-en-los-proximos-3-anos. [Online] octubre 10, 2018. 4. Common types of Assets. https://docs.unity3d.com/Manual/AssetTypes.html. [Online] abril 11, 2018. 5. Fbx. ttps://en.wikipedia.org/wiki/FBX. [Online] mayo 27, 2019. 6. Realidad aumentada. https://es.wikipedia.org/wiki/Realidad_aumentada. [Online] mayo 27, 2019. 7. Impresión 3D. https://es.wikipedia.org/wiki/Impresi%C3%B3n_3D. [Online] abril 18, 2019. 8. Pearson A. 10 Advantages of 3D printing. https://3dinsider.com/3d-printing-advantages/. [Online] enero 22, 2018. 9. Suscripción a 3DSMax. https://www.autodesk.com/products/3ds-max/subscribe?plc=3DSMAX&support=BASIC&quantity=1. [Online] 10. Suscripción a Maya. https://www.autodesk.com/products/maya/overview. [Online] 11. Acerca de Blender. https://www.blender.org/about/. [Online] 12. Content Management System. https://en.wikipedia.org/wiki/Content_management_system. [Online] junio 3, 2019. 13. Wordpress. https://en.wikipedia.org/wiki/WordPress#Overview. [Online] junio 3, 2019. 14. What content management system (cms) should you use? http://www.artisteer.com/?p=nl_article3. [Online] 15. Joomla. https://en.wikipedia.org/wiki/Joomla#Features. [Online] mayo 28, 2019. 16. Search Engine Optimization. https://en.wikipedia.org/wiki/Search_engine_optimization. [Online] junio 3, 2019. 17. B., Smith. A Quick Guide to GPLv3. https://www.gnu.org/licenses/quick -guide-gplv3.html. [Online] noviembre 8, 2014. 18. Drupal. https://en.wikipedia.org/wiki/Drupal#History. [Online] junio 3, 2019. 19. Usage of content management systems. https://w3techs.com/technologies/overview/content_management/all. [Online] 20. E-commerce. https://en.wikipedia.org/wiki/E-commerce. [Online] mayo 16, 2019. 21. OpenGL ES for the Web. https://www.khronos.org/webgl/. [Online] 22. Three.js. https://en.wikipedia.org/wiki/Three.js. [Online] abril 1, 2019. 23. Blend4Web Company. https://www.blend4web.com/en/company/. [Online] 24. Y., Kovelenov. Yury kovelenov. https://vk.com/wall294271419_581. [Online] septiembre 18, 2017.

50 / 53

25. About Verge3D. https://www.soft8soft.com/about/. [Online] 26. Google Blocky. https://developers.google.com/blockly/. [Online] 27. HTML5 Game Engines. https://html5gameengine.com/tag/webgl. [Online] 28. Blender Market. https://blendermarket.com/page/blender-fund. [Online] 29. Sketchfab. https://sketchfab.com/. [Online] 30. Shared hosting. https://www.namecheap.com/hosting/shared/. [Online] 31. Vendd. https://easydigitaldownloads.com/downloads/vendd/. [Online] 32. Shortcodes. https://en.support.wordpress.com/shortcodes/. [Online] 33. V., Trulock. Navigation. http://hci.ilikecake.ie/des_navigation.htm. [Online]

51 / 53

Anexos

Anexo A: Glosario

API: Application programming interface (Interface de programación de aplicaciones).

Back-end: Una parte de un sistema de cómputo o aplicación que no es accedida directamente por el usuario.

Breakpoint: Un punto en el que el contenido de un sitio web se reajusta dependiendo del ancho del dispositivo.

CMS: Content Management System (Sistema manejador de contenidos)

CSR: Certificate Signing Request (Solicitud de firma de certificado).

Fbx: Formato de gráficos (Filmbox) compatible entre aplicaciones.

Front-end: Parte de un computaor o aplicación en la que el usuario interactúa directamente.

Gateway: Servicio de comercio provisto por aplicaciones e-commerce para autorizar pagos directos o con tarjetas de crédito.

GPL: General Public Licence (Licencia para público en general)

GPU: Graphics processing unit (Unidad de procesamiento gráfico)

Imagotipo: Conjuto de imágenes y texto en el que ambos elementos se encuentran claramente diferenciados.

MAMP: Grupo de paquetes de software para servidores que hacen referencia a Mac OX, Apache,

MySQL y PHP

MVC: Model View Controller (Modelo Vista Controlador)

SEO: Search Engine Optimization (Optimización para motores de búsqueda)

SSL: Secure Sockets Layer (Capa de Sockets Seguros)

Stack: Colección de software que forma la infraestructura operativa en una máquina determinada.

52 / 53

Anexo B: Entregables del proyecto

Se anexa a éste documento los siguientes elementos: • Presentación en Powerpoint del Trabajo de Fin de Máster. • Video demostrativo del Trabajo de Fin de Máster.

53 / 53