Enseñanza en aplicar responsive web en la implementación de un sitio web
Teaching in applying responsive web in the implementation of a website
Ensinando na aplicação da web responsiva na implementação de um site
 |
Correspondencia: loaizacecibel@gmail.com
Ciencias de la Computación
Artículo de Investigación
* Recibido: 23 de julio de 2023 *Aceptado: 12 de agosto de 2023 * Publicado: 01 de septiembre de 2023
Resumen
En la actualidad los sitios Web es un campo en desarrollo, representa una gran importancia a las empresas con posibilidades de crecimiento en e-commerce. Gramon es una empresa dedicada a la venta de semi-joyas el problema existente es que no cuenta con un sitio web, para comercializar sus productos, el objetivo del TFM propone la creación, desarrollo e implementación de un Sistema Web CMS de pedidos mediante código abierto, con herramientas de software orientada en JavaScript JS, HTML, CSS, PHP, SQL, aplicando las Fases del desarrollo de software para el sitio web, obteniendo como resultado la implementación del sitio web, optimizando recursos, tiempo y llegue al lugar deseado en base del manejo de pedidos de productos con su respectivo detalle desde su smartphone u ordenador aplicando tecnología multiplataforma proporcionando un mejor servicio a sus clientes.
Palabras Clave: Recurso educativo digital; Sitios web; Herramientas interactivas; Retroalimentación; Participación.
Abstract
At present, Web sites are a developing field, representing great importance to companies with growth potential in e-commerce. Gramon is a company dedicated to the sale of semi-jewelry, the existing problem is that it does not have a website, to market its products, the objective of the TFM proposes the creation, development and implementation of a CMS Web System for orders through open source , with software tools oriented in JavaScript JS, HTML, CSS, PHP, SQL, applying the Phases of software development for the website, obtaining as a result the implementation of the website, optimizing resources, time and reaching the desired place based on the management of product orders with their respective detail from your smartphone or computer applying multiplatform technology providing a better service to your customers.
Keywords: CMS Web System; HTML; PHP; JavaScript JS; E-commerce.
Resumo
Actualmente, os websites são uma área em desenvolvimento, representando grande importância para empresas com potencial de crescimento no comércio electrónico. A Gramon é uma empresa que se dedica à venda de semijoias, o problema existente é que não possui um site, para comercializar os seus produtos, o objetivo do TFM propõe a criação, desenvolvimento e implementação de um Sistema Web CMS para pedidos através código aberto, com ferramentas de software orientadas em JavaScript JS, HTML, CSS, PHP, SQL, aplicando as Fases de desenvolvimento de software para o site, obtendo como resultado a implementação do site, otimizando recursos, tempo e atingindo o local desejado com base em a gestão de pedidos de produtos com seus respectivos detalhes a partir do seu smartphone ou computador aplicando tecnologia multiplataforma proporcionando um melhor serviço aos seus clientes.
Palavras-chave: Sistema Web CMS; HTML; PHP; JavascriptJS; comércio eletrônico.
Introducción
Este trabajo consiste en el desarrollo de un sitio web de pedidos de productos para la empresa Semi-joyas Gramon, la empresa comercializa por mayor y menor Semi-joyas bañadas en oro, plata y acero, el sitio web comercial ayudará optimizar el proceso de pedidos de Semi-joyas, se facilita a los clientes el precio, stock y detalle del producto.
Según (El gran libro del Comercio Electronico, 2016) nos aporta en su escrito que el comercio electrónico está inmerso en la transformación digital, dando a conocer lo importante de crecer en conocimiento de herramientas, estrategias y técnicas para el mejoramiento de participación en ventas, invirtiendo grandes empresas en diseño web, comercial y marketing, tener crecimiento en inversión, ventas e intereses.
El sitio web adaptado a las necesidades solicitadas de la empresa es un aporte muy importante, puede ser visitado desde un ordenador, móvil o Tablet, con un FrontEnd, base de datos en MySql, utilizando responsive web desing archivos en JavaScript JS, HTML, CSS, PHP, SQL que se desarrollará utilizando Fases de desarrollo de Software modificando el software Magento Open Source.
La clasificación de clientes con sus respectivos precios hace la diferencia de otros sitios web de similares características, el problema actual de la empresa es que no cuentan con un sitio web y se plantea ¿Cómo optimizar el proceso de pedidos de Semi-joyas a los clientes de la Empresa Gramon de Ecuador? Se propone desarrollar un sitio web que tiene una particularidad con respecto a otros sitios web similares de pedidos haciendo la diferencia, en esta página web tiene usuarios clasificados en clientes por mayor y consumidor final; mayorista es la persona intermediaria que se dedica a vender a otros mayoristas o minoristas, el mayorista tiene precios preferenciales en los productos, y el consumidor final es la persona minorista que compra al precio al público para su uso o regalo.
La estructura del trabajo se inicia con la fase de análisis, entrevistar al administrador y dueña con el resultado de éstas se empieza a determinar los objetivos planificar sus procesos por fases identificando cada uno de los tiempos a desarrollarse, luego diseñar el sitio web de acuerdo a las necesidades de la empresa, en la fase implementación se realiza la construcción del sitio web organizando los elementos que la componen, los factores considerados como estructura, diseño, contenidos de imágenes y texto, secciones, menú, formularios, navegabilidad, interactividad, accesibilidad. Como última fase es la validación del sitio web con el uso de los usuarios para poder controlar las falencias y realizar las correcciones pertinentes. La finalidad del desarrollo del Sitio Web de pedidos pretende cubrir a todos los clientes por mayor para incrementar su comercialización brindando una mejor atención igual al consumidor final.
Justificación
Semi-Joyas Gramon es una compañía de media escala dedicada a la venta de joyería de gama media-alta, dentro de sus catálogos cuentan con diferentes artículos disponibles para variedad de los usuarios, aunque cuentan con una cartera de clientes considerable y aceptable la empresa puede verse opacada por otras entidades que comercializan el mismo tipo de producto, la empresa intenta buscar la manera de resaltar sobre ellos para diferenciarse de sus competidores.
El problema radica que la empresa no tiene un sitio web para realizar pedidos. Además, se debe considerar que la empresa es distribuidora de semi-joyas por lo que es necesario clasificar a los clientes porque vuelven a comercializarlo por esta razón las entrevistas realizadas al dueña de la empresa nos indica las causas de este problema se puede resaltar que desconocían que es asequible a las empresas tener un sitio web e incluso de su forma gratuita de utilizar ciertas páginas de construcción de comercio electrónico, el tiempo que se dedican a la comercialización no le permitía darse cuenta lo importante de poder realizar pedidos en línea promocionando más su producto, desconocimiento del comercio electrónico.
Planteamiento del problema
Para solventar la problemática de la empresa se propone el desarrollo e implementación del Sitio Web de pedidos mediante el uso de nuevas tecnologías, ésta da a la empresa la oportunidad al usuario mayorista o consumidor final conocer los productos de la empresa realizar algún pedido del producto que seleccione sin la necesidad de visitar el local o buscar más comerciales y así tener mayor alcance de servicios, productos, muchas oportunidades de nuevos clientes, proveedores y publicidad efectiva.
Para el desarrollo del sitio web, se ha empleado la técnica de las entrevistas realizadas a la gerente propietaria, la investigación requiere del análisis de las diferentes páginas y gestores de contenido existentes, considerando que en la actualidad existen muchas tiendas en línea, sitios web de construcción de forma gratuita por tiempo limitado o luego pagar por el servicio ofrecido, también hay herramientas para crear sitios web dinámicos ofreciendo al desarrollador plantillas prediseñadas para que elijan y puedan modificarlas según las necesidades de cada uno. Por esta razón para determinar cuáles son las mejores tiendas del mundo en línea se considera el posicionamiento de las empresas de tiendas online se destaca por el nivel del ranking, sus estrategias, diseño, y seguridad de lo que ofrecen.
Es muy importante en la actualidad contar con un sitio web para el negocio porque al no tener uno puede perder clientes dependiendo del lugar, área, sector en el cual se desarrolla su actividad por aquello en el desarrollo de sitio web de pedidos para la Semi-joyas Gramon se debe decidir qué gestor de contenidos es el apropiado de acuerdo con los costos, diseño, utilidad, la ubicación del usuario potencial, manejo para la construcción del sitio web para pedidos.
Al conocer la tecnología existente resulta de significativa importancia, la nueva tecnología plantea cambios técnicos también cambios de valores, creencias pensamientos, valores y comportamiento del elemento humano que obedece a la elección del tipo de tecnología que se van adaptando, asimilando a la comercialización digital.
Con el análisis se presenta el objetivo principal, desarrollar un sitio web mediante código abierto para optimización del proceso de pedidos, para poder cumplir ese objetivo se consideró analizar los sitios web que permiten reutilizar su código fuente, se debe identificar los requisitos para el desarrollo del sitio web, diseñar el sitio web dinámico donde se exponga los servicios que ofrece la empresa, establecer el lenguaje de codificación del lado del cliente, del servidor y del servidor de la base de datos, realizar las respectivas pruebas de funcionamiento.
Contexto del estudio
El sitio web como tema ha sido realizado para la empresa Gramon, ubicado en la ciudad de Machala, provincia de El Oro, Ecuador, es una empresa dedicada a la comercialización de Semi joyas, nació debido a la necesidad distribuir al por mayor y menor productos similares a la joya de oro de 18 quilates, diferenciando del costo asequible a la comunidad, conocida como joya bañada en oro o Semi-joya conforme a esto la propietaria la Sra. Lcda. Graciela Sánchez forma la empresa, Fundada en el año 1990, los productos son de origen de Brasil, las empresas proveedoras ofrecen la mejor calidad en los productos cumpliendo las normas internacionales.
Afirma (Sánchez, 2019), que desde el año 2008 se convirtió en una empresa PYMES, en la actualidad es reconocida por sus grandes descuentos y su stock surtido en modelos de Semi-joyas, destacando de la empresa la comercialización de Semi-joya al por mayor, él cliente obtiene un porcentaje de ganancia muy alto.
Gramon se ha convertido en una empresa pionera en fortalecer estrategias de ventas de mercadotecnia, aproximadamente por tres décadas la empresa ha trabajado con honestidad y eficiencia brindando excelencia en servicio, uno de los pilares fundamentales es su crecimiento empresarial, fomentando el desarrollo y nuevas fuentes de trabajo.
Para el trabajo se ha utilizado la técnica de entrevista para poder realizar la recopilación de información, se planificó varias entrevistas, llamadas por teléfono y reuniones con la dueña de la empresa, para poder crear un sitio web funcional, además de las entrevistas, tuve que solicitar documentación de inventarios y facturación, para el desarrollo del sitio web, se tiene presente que se debe seguir fases de desarrollo con su respectiva modelo para identificar, analizar, diseñar, desarrollar, elaborar pruebas o evaluación en el desarrollo.
Con la información obtenida y la necesidad que tiene la empresa de no poseer un sistema de comercio electrónico, se considera necesario tener claro los requisitos, roles del administrador y usuarios, estructura organizacional, reglas, actividades, componentes de software, modelo, diversas herramientas, recursos a utilizar; se da como solución a la problemática el resultado desarrollar un sitio web para pedidos. Es necesario tener conocimiento de ecommerce e importancia de la tecnología en el desarrollo de sitios web.
Como señala (Masclans, y otros, 2016) existen muchas necesidades a la hora de plantearse a tener un ecommerce entre ellos: los clientes fácilmente pueden visitar otros sitios, considerar que se tendrá nueva clientela, la cantidad de producto que puede faltar o acumularse y estar atentos a la competencia para igualar o mejorar.
El comercio electrónico es importante conocer e identificar que, es una forma diferente de comercializar, se debe planificar, organizar en primera instancia saber que se venderá, los productos se deberán clasificar, categorizar, en el marketing conocer qué tipo de tienda será y promocionarla según la plataforma que se vaya a elegir, en la fase del análisis se debe enfatizar que existen diversas formas, herramientas para poder revisar nuestro comercio.
Otro de los problemas es establecer ¿qué plataforma elegir para el desarrollo del sitio web?, ¿cómo se hace?, ¿por qué es importante?, ¿qué pasos seguir?, ¿cuál es el resultado del producto?, ¿cómo saber si está bien?, con todas las interrogantes mencionadas se plantea
Considerar las herramientas, ¿qué modelo es la adecuada para crear un sitio web para pedidos?
Para el desarrollo del sitio web, se considera la ingeniería de software es importante identificar las tecnologías y entre los requisitos para poder diseñar, recalcando lo importante que es conocer los requisitos de la empresa para poder construir, considerando el problema que se resolverá utilizando lista de funciones, pruebas, test, tareas, evaluación para cumplir con los requerimientos adaptándose a las necesidades de la empresa. (Pressman R. S., 2012)
Estado del arte
Fundamentación del Comercio Electrónico
El comercio electrónico es conocido como e-commerce o electronic commerce la mayor parte consiste en la venta o compra on-line de producto, servicios, o acceso a contenido Premium por medios electrónicos como es el internet u otros medios informáticos, uno de los medios de pago es la tarjeta crédito, La compra o venta de productos o servicios se realiza entre personas y empresas que transaccionan de manera on-line, y no se tiene el contacto físico, existen varias maneras de comercializarlo y son conocidas las tiendas electrónicas
Nos indica (Castillo S. & Navarro H., Comercio electrónico y aspectos prácticos de Implementación con Magento, 2015)la clasificación de modelos de comercio electrónico basado en los agentes que intervienen.
El comercio electrónico nos puede indicar para comprar o vender todo tipo de productos, ¿la pregunta inicial es cuál es la mejor?, ¿cómo encontrarla? No se debe tener optimizado la tienda en referente a las ventas, se debe conocer como posicionarse en SEO, desconocimiento del mal uso de Google Adwords, debe conocer su funcionamiento, cómo saco provecho y rendimiento de las redes sociales, ya que tiene cada día mucho más usuario, es importante tener, conocer y utilizar de la mejor manera las redes sociales
Desarrollo de una Tienda Electrónica
Para el desarrollo de una tienda electrónica se considera algunos aspectos para su construcción:
- Necesidad y problema del cliente o empresa.
- Elegir una plataforma o lenguaje de programación Web.
- Fases o Modelo de desarrollo de software; para conocer en cada fase si cumple o no, con lo propuesto; y poder verificar los análisis de riesgo existentes.
- Construcción y Adaptación (Seleccionar el hosting y dominio).
Diseño Web
Para (Xabier & Tellado, 2019) es importante en el diseño del sitio web, se integre interactividad del diseño web y su navegabilidad, diseño responsive que permite al sitio ser navegable en cualquier dispositivo considera que el mayor tiempo utiliza el usuario, por lo cual debe ser un sitio web de fácil uso, navegar, sencillo.
En los diseños web a simple vista se cree que, sólo es la parte de imágenes y formato del sitio web, para el diseño web se debe identificar por medio del cliente o empresa, que es lo que desea presentar a los clientes, de acuerdo con sus necesidades, dificultades y proyecciones, se considera el diseño: visual, interactividad, información y usabilidad.
Considera (Martínez Rolán, 2019) destacar que el diseño web es parte fundamental al momento de interactuar con el usuario usando de vía los navegadores; para todo esto se considera mantener, planificar y mantener los diseños y sitio web por ello se presenta una pequeña resumiendo cada uno de ellos
Modelos para desarrollo de Software
Los modelos para el desarrollo de software nos permiten tener una perspectiva de las actividades que se realizan durante el desarrollo de software entre ellos son el diseño, análisis y desarrollo, nos guían determinando en cada una de las etapas de manera técnica, administrativas y mantenimiento dependiendo del modelo que se elija. Así nos permite estimar todos los recursos, riesgos, e ir examinando los avances. Se considera que existe un ciclo de vida para el desarrollo del software o sitio web.
Los modelos nos permiten: Describir las etapas principales, definir cuáles son las etapas primarias y ayudar a poder administrar el proceso y progreso del desarrollo del sitio web.
Almacenamiento de Datos
Varios sitios web necesitan almacenar, encontrar datos, por lo tanto los datos on-line se convierte en parte esencial con ellos de acuerdo a las páginas sirven para ingresar lográndose, dejar comentarios y muchas más formas, se debe considerar que hay dos maneras de guardar la información, se almacena en el cliente o en el servidor, para que se quede almacenado en el cliente son archivos llamados cookies donde se almacena pequeños datos, preferencias del usuario o identificación de sesión que ayudan a mejorar la experiencia del usuario, pero para los datos reales con poco significativo.
Nos afirma (Vera M., López S., Granada, Irrazábal, & Jiménes H., 2014) En la actualidad existen varias tecnologías que nos permiten almacenar datos de una manera más sofisticada por parte del cliente como para el servidor, entre ellas son:
- Las API (Application Proramming Interface en español Interfaz de programación de Aplicaciones) de almacenamiento web en HTML5 o conocidas como Web History, ha ayudado a mejorar la experiencia del usuario porque permite almacenar en los navegadores los datos de las últimas visitas,
- Código XMLó Standard Generalized Markup Language, etiquetas similares a HTML la diferencia es que puede almacenar datos y pueden ser recuperados.
- JSON o JavaScript Object Notation (Formato liviano de intercambio de datos) este código permite almacenar valores simples en un archivo de texto.
Todos estos métodos nos permiten utilizar Java Script para almacenar o recuperar datos desde el archivo correspondiente de manera fácil de utilizarlo, pero éstos no son lo suficiente, ni real para guardar datos complejos, grandes conjuntos de datos para ello se necesita la base de datos.
Base de datos
Base de datos según (Rafael & Wilson, 2017); nos enseña que primero se debe conocer que un dato son palabras y números que por sí solos no tienen significado, por lo cual la base de datos es la colección de datos relacionados, ordenados y organizados, de tal forma que tengan sentido, que puedan ser consultados por medio de un programa, quiere decir que es el lugar donde se almacenará la información. La base de datos tiene elementos entre ellos son:
- Campo que se identifica por tipos, es donde se va almacenar los datos y deben ser del mismo tipo.
- Registro es una colección de datos que pueden ser del mismo tipo o varios tipos que están relacionados.
- Archivo es una colección de registros relacionados pero que tienen una relación, se sigue una estructura homogénea deben tener campos del mismo tipo, luego se tiene registros.
Base de datos (BD) es el que reside en el servidor y puede almacenar toda información que se requiera, está estructurada por tablas que pueden estar relacionadas o no. Normalmente los sitios web que no utilizan BD relacionadas son las que pueden promocionar algún producto e indicar las características. Y la BD Relacional nos permite conocer las características de un producto y el vínculo que tiene entre el cliente, producto y pedido, con este puede revisar si ha realizado un pedido o compra de aquel producto.
Modelo Entidad Relación
Nos indica (Osorio R., 2008) que el modelo entidad relación es una especie de diagramas de flujo que describe la forma como se va a diseñar en una base de datos, aparte que nos indica cómo se relacionan la lógica de las entidades en la base de datos. Es una herramienta para el modelado de datos de un sistema de información. También conocidos como Modelo Entidad Relación, Diagrama entidad relación o MER. Están compuestos por entidades, atributo, relaciones y tipos de relación.
Hospedaje de la Tienda (Hosting)
Para las empresas es muy importante considerar que es lo que ofrece y como mantenerse en el sito ¿En la investigación se considera puntos estratégicos para dar a conocer que es el Hosting?
Resalta (Soria A. & Osterling L., 2015) la fundamentación de Hosting que es donde se almacenará toda la información del sitio web, el hosting puede ser compartido o gratuito por medio de éste ofrece un espacio de un servidor conectado a Internet, los servidores web aloja el nombre del dominio, suelen brindar panel de control, recursos y aplicaciones que alojan sus datos y serán accedido en línea desde cualquier equipo o dispositivo.
Servidor web
Enseñan (Ramos Martín & Ramos Martín, 2014) Servidor web es un dispositivo que se puede realizar conexiones remotas con una red local o global, donde recibe y transfiere datos, nos sirve para almacenar sitios web, la función del servidor web consiste en enviar los archivos HTML, CSS, JavaScript, imágenes, música para estructurar y construir un sitio web. Están diseñados para poder comunicarse entre una aplicación a otra sin la intervención humana.
Estructura de un Sitio Web
De acuerdo (Desongles C., Ponce C., Garzón V., Sampalo de la Torre, & Martos N., 2006) Un sitio web es un conjunto de páginas que está enfocado a ofrecer información o servicios, si se tiene una organización, la estructura de éstas permitirá al usuario visualizar la información de forma fácil, por tal razón es importante realizar un bosquejo teniendo un orden de ¿cómo será el sitio? considerando las necesidades del cliente o empresa.
Lo que define un sitio web es la manera de organizar los elementos que la componen. El contenido del sitio web es la clave del éxito y es parte fundamental, existen contenidos para empresas, periódicos, centros educativos, portales y cada una de estas especificaciones tienen un formato para poder categorizarlos. La estructura del sitio web se ha subdivido en:
- Estructura física: La estructura física es la parte donde se almacena la información, se debe evitar colocar toda la información en único directorio o es la forma de almacenar los elementos de un sitio web. En la estructura física contiene imágenes, videos, información
- Estructura lógica: La estructura lógica son agrupaciones jerárquicas de páginas y secciones, es donde se estructura el contenido que se presentará al visitante. Enfatiza (Desongles C., Ponce C., Garzón V., Sampalo de la Torre, & Martos N., 2006) En la estructura del sitio web dependerá del contenido que desea publicar, esto depende de qué tipo información mostrará la empresa, existen tipos de estructuras que pueden ser combinadas dependiendo del modelo que desee estructurar.
Arquitectura en Tecnología de la Información
Se puede organizar y clasificar en algunos tipos de arquitectura en el área de tecnología de la información existen roles que nos permiten relacionarlos con la Arquitectura dividiendo en arquitectos de: sistemas, datos, redes, software y web.
de (Castillo S. & Navarro H., Comercio electrónico y aspectos prácticos de Implementación con Magento, 2015) no muestra que las competencias son:
- Diseño de la interfaz: Es la parte visual que contiene estructura de contenidos, considerando diseño gráfico, usabilidad y la experiencia del usuario, teniendo el conocimiento de DOM, CSS, HTML5, estándares Web entre otros.
- Diseño e implementación lógica: es la planeación y diseño usando como medio los lenguajes de programación, son la parte de las funciones y proceso de datos, resultados, calculo, diseño y ejecución de algoritmos.
- Diseño de la arquitectura de la información: Es la parte que determina la parte real que estará expuesto el sitio web la información almacenada considerando entidades y relaciones, se plantea el uso de la base de datos.
La arquitectura de un sitio web será la estructura del contenido de un sitio web, se debe considerar pasos sencillos, debe tener contenido que cubran al usuario en tiempo real las necesidades de éste, realizar un bosquejo del sitio web, un mapa del sito, diagrama que indique las páginas y niveles, es importante considerar la identificación de palabras claves para atraer a los usuarios entre ellas debe tener relevancia, competencia. La arquitectura web puede ser considerad como modelo cliente-servidor siendo éste un modelo de aplicación distribuye tareas que reparte entre los proveedores de recursos o servicios, se pueden llamar servidores de los servicios o recursos.
CMS (Content management System)
Indica (Eíto-Brun, 2014) El sistema de gestión de contenido es un programa desarrollado para que cualquier persona pueda gestionar y administrar contenido de una web sin conocimientos de programación. Un CMS es una herramienta que nos permite administrar en un que son: crear, clasificar y publicar contenidos en un sitio por un medio digital. Algunos son libres y otras pagadas
|
Ventajas |
Funciones |
|
|
Plataformas en CMS
Según (Castillo S. & Navarro H., 2015) Presenta los CMS más utilizados en un e-commerce. Los autores describen a Magento, WooCommerce, Shopify, Drupal, WordPress entre los más utilizados para la comercialización de productos o servicios. Luego del análisis se decide seleccionar a Magento Open Source se encuentra clasificada como uno de los mejores gestores de contenido para comercialización de productos que es el e-commerce.
Se recomienda elegir una arquitectura web plana, nos quiere decir que no tenga más de tres niveles de profundidad (nivel 0 inicio del sitio web, nivel 1 productos, nivel 2 pedidos) cuanto más sencillo encuentre el usuario su producto, mayor probabilidad de realizar sus pedidos. Quien conoce las necesidades del sitio web desde Front-End es el cliente, por eso se debe escuchar y entender lo que manifiesta, Servidor web, comparación de interfaces. Según (Ionos, 2019) Los gestores de contenido más utilizados a nivel mundial son los de la siguiente imagen predomina WordPress con 18 millones de páginas aproximadamente.
Plantillas
Conocidos como temas o plantillas, son la presentación diseño y estructura del sitio web. Como enseña (Ollero, 2014) dentro de las plantillas es importante la interactividad con los usuarios y la manera de hacerlos es por medio de formularios que dentro de ellos el usuario son quienes realizarán el relleno de información, existirá diversidad de resultados de acuerdo como se planteé los formularios que pueden tener imágenes, datos personales, información laboral, profesional, etc., para enviar aquellos datos se necesitará de un servidor para conectarse con la base de datos que en lo posterior podrá ser guardada.
Diseño Responsive
El diseño Responsive en una página o sitio web es una técnica de diseño web que utiliza y se adapta buscando la correcta visualización en distintos dispositivos smartphones, tablets, iPads, computadores. El diseño web responsive (adaptativo) o diseño web multidispositivo consiste en colocar los elementos de la web de forma que se adaptan al ancho de cada dispositivo que permite de forma correcta la visualización, mejorando la experiencia del usuario porque los contenidos (layoust) e imágenes son fluido utilizando código de CSS3, reduciendo el tiempo de desarrollo evitando contenidos duplicados. Brindado al usuario contenidos y experiencia lo más parecido a las aplicaciones móviles (app) y pudiendo haber cambios servidos en función al dispositivo. Siendo en la actualidad denominada como mejor practica de Diseño Web.
Menciona (Ángel Cobo, 2005) Internet ha jugado un papel esencial en la expansión de la denominada corriente open Source. Los defensores de esta corriente defienden el desarrollo de aplicaciones informáticas y su distribución libre, de forma gratuita; pero no solo eso, sino que también ponen a disposición de los usuarios el código fuente de los programas desarrollados. Se trata, en definitiva, de que los usuarios puedan utilizar los programas sin ninguna restricción y puedan conocer si desean su funcionamiento interno. Por esta razón se utiliza código libre en el desarrollo del sitio web.
Para el trabajo se ha utilizado una recopilación de información en los procesos de identificar, diseñar, desarrollar, elaborar pruebas; de cómo solucionar la problemática considerando varios aspectos personas, estructura organizacional, reglas, actividades, componentes de software, modelo, herramientas y requisitos a utilizar dando como resultado un sitio web y que se desarrollará gradualmente con las siguientes fases teniendo un principio y un fin. Existen varios lenguajes para crear sitios web, para el desarrollo se seleccionó HTML5 primero se debe hacer una distinción en tecnología Front-End son las que trabajan y funcionan del lado del cliente y tecnología Back-End son aquellas que operan y funcionan del lado de los servidores. En función del Framework se permite el desarrollo en gran escala.
Ventajas y desventajas de utilizar un Diseño Responsive
De acuerdo con el estudio realizado se puede identificar las ventajas al desarrollar un sitio web utilizando diseño Responsive, al crear un sitio web se puede modificar, realizar cambios, actualizar nos permite tener un sólo URL del sitio web y pueden acceder rápidamente, fácilmente sin redireccionarlos.
Ventajas:
- Tener un sitio web que permite navegar de forma sencilla, buena experiencia para el usuario y que funciona en cualquier dispositivo.
- Teniendo un único URL utilizando diseño responsive se ahorra dinero y tiempo porque no se debe estar diseñando para distintos tipos de dispositivos obteniendo resultados favorables.
Desventajas:
- Se debe considerar que necesita tiempo y conocimientos para que pueda tener un buen aspecto y resultado al usuario desde cualquier tipo de plataforma considerando complejo de diseñar.
- La carga de imágenes y contenido puede ser un poco lenta cuando se optimiza por la sobre carga de información y dependiendo del dispositivo podrá estar o no visible, y lo que necesita el usuario resulta de mucha espera sin encontrar lo que buscan.
HTML5
HTML5 significa Hyper Text Markup Language, versión 5, éste lenguaje nos ofrece una diversidad de herramientas, lo que me permite diseñar sitios y aplicaciones web que superen las expectativas de los usuarios, lo que proporcionara una gran experiencia, con su uso se obtiene un código más limpio y ordenado el cual ayuda al momento de hacer modificaciones al sitio web; tiene compatibilidad con todos los navegadores web, además cabe mencionar que esta optimizado para dispositivos móviles con lo cual se podrá llevar a cabo proyectos responsivos para cualquier dispositivo.
Según (Gauchat, 2012) HTML utiliza un lenguaje de etiquetas para crear sitios web. LAs etiquetas HTML son palabras clave y atributos rodeados del signo mayor que y menor que: <html Lang="es"> indica que hay una mejora en el lenguaje de HTML a HTML5 que permite sean página y sitios web más dinámicas de fácil acceso y uso.
HTML5 propone estándares para cada aspecto de la web involucrando nueva tecnología y también un propósito claro para cada una de las tecnologías involucradas, HTML provee los elementos estructurales, CSS se centra dejar una estructura utilizable y atractiva a la vista, y JavaScript tiene todo el poder necesario para proveer dinamismo y construir aplicaciones web completamente funcionales. (Gauchat, 2012).
“Las mejores tiendas en línea por sus diferentes tipos de sitios web, diseños y sobre todo seguridad en ventas son las siguientes: Alibaba, Amazon, Ebay, Tencent, Rakuten” (wiboomedia, 2019). De acuerdo con la investigación realizada existen muchas tiendas en línea, sitios de construcción de forma gratuita por un tiempo limitado o luego pagar por el servicio ofrecido, también hay herramientas para crear sitios web dinámicos ofreciendo al desarrollador plantillas prediseñadas para que elijan y puedan modificarlas según las necesidades de cada uno.
La importancia del diseño responsive se puede decir que la mayoría de las personas navegan a través de los dispositivos móviles, por tal razón se debe considerar un punto importante en el momento de diseñar y desarrollar un sitio web. En la actualidad existen muchos sitios web y herramientas que facilitan a las personas crear páginas web, aunque no posean conocimiento de programación web. Se considera importante la reutilización de un sitio web existente de acuerdo con la necesidad de la empresa. En el estudio de los sitios web de pedidos se presentan limitaciones en codificación, almacenamiento, la información no es confidencial, en la investigación.
Para el desarrollo de la programación del sitio web considero importante la reutilización de una plantilla de e-commerce para la herramienta Magento open source. Teniendo en cuenta a (VODAFONE, 2019) considera que en la actualidad existen plataforma y sitios web que facilitan a crear tiendas gratuitas o de pago entre ellas están WooComerce, PrestaShop, Magento, Shopify, entre otros. Muchas páginas web permiten crear sitios web para pedidos de varios tipos entre las principales las de comida y reservaciones entre los más relevantes son los siguientes:
- Wix: https://es.wix.com/restaurant/website
- Jimdo: https://es.jimdo.com/pagina-web/tienda-online/
- Emiweb: https://www.emiweb.es/paginas/presentacion/tienda-online/
- Bigcommerce: https://www.bigcommerce.com
Estos sitios web ayudan a crear tiendas online o páginas web, algunas tienen limitaciones de pago, almacenaje, cobro de comisiones, el usuario elige según los requisitos de la necesidad.
Open Source Software
Nos indica (Free Software Foundation, 20019) Open Source Software o Programa de código abierto, Software libre no es cuestión de que no tiene costo o precio es de libertad. Se debe comprender como concepto que podemos pensar de forma libre recordando que se tiene libertad de Expresión y no como resaltar como algo gratis. Es respetar la libertad de usuarios y comunidad de que puedan y tengan libertad de copiar, distribuir, modificar, ejecutar, estudiar el software. Quiere decir que cuando un software no puede controlar un usuario el programa no es libre queriendo decir que es privativo.
Identificar el termino libre porque puede existir ambigüedad, confundir como gratis porque no tiene valor monetario para descargar o utilizarlo. Quiere decir que el software es distribuido, pero el código fuente no está disponible, considerando que existen software distribuidos con licencias restrictivas. El software libre nos permite ejecutar el programa, nos da la libertad de estudiar cómo funciona, adaptar de acuerdo con la necesidad, quizás en algunos de poder obtener el código fuente.
Es importante destacar que el software libre viene con licencia que pueden tener las siguientes restricciones como: prohibir el uso para comercializarlo, pueden discriminar licencias a individuos, redistribuir las mejoras, la libertad de redistribuir para beneficio de la comunidad, y si lo permite lanzar mejoras del programa.
Software de aplicación
Según (Pressman R. S., 2010). Son programas que resuelven las necesidades del comercio, se procesan datos comerciales que facilitan la toma de decisiones administrativas o técnicas, operaciones de negocios. Se utiliza para controlar funciones en tiempo real del comercio como por ejemplo en la producción de un producto, en puntos de ventas.
Patrón MVC
El modelo de Vista controlador (Model-View-Controller o Modelo-Vista-Controlador) se establece como patrón de arquitectura de software separando en tres componentes distintos: los datos de la aplicación, interfaz de usuario y lógica de control. Se resume que se tiene separado la interfaz del usuario y los datos del Sitio Web para ser un sitio Web más robusto pudiendo dar facilidad al mantenimiento y reutilización de código trabajando con otras librerías como PDO. La Mayoría de frameworks actuales utilizan MVC. Es una arquitectura importante porque se utiliza en sistemas empresariales y en componentes gráficos.
Según (Andalucía, 2019) “MVC viene de Model, View, Controller, o bien: Modelo, Vista y Controlador. La idea básica de este patrón es separar nuestros sistemas en tres capas, el Modelo, la Vista y el Controlador.
JavaScript
Según (Pluralsight, 2019) Mediante el uso de este lenguaje de programación hacemos que el sitio web sea dinámico incluyo efectos visuales y sencillos, además nos permite manipular datos y hace que la aplicación use poca memoria y su tiempo de carga sea rápido.
Plantilla Admin LTE
La plantilla AdminLTE es un panel de administración basado en Bootstrap y es desarrollado, mantenido por el estudio Almsaeed, éste es una solución de código abierto, nos permite a los desarrolladores un diseño modular que facilita crear y personalizar de manera sencilla. Mediante esta plantilla se va creando la interfaz del usuario tanto para la parte Front-end como el Back-end.
JQuery
Es una librería de JavaScript de código abierto, minimiza el tiempo de programar en JavaScript y permite agregar interactividad al proyecto en el desarrollo de este sitio web. Basados en esta librería ayuda a resolver escenarios concretos dentro del maquetado del sitio, por ejemplo: desarrollar un menú responsive, una galería de fotos atractiva, un carrusel de imágenes, búsquedas incrementales, una serie de efectos y ayudas extras que nos ahorran mucho tiempo de desarrollo.
Ajax
Es una técnica de desarrollo web que permite realizar una comunicación asincrónica entre el cliente y el servidor. Por medio de Ajax, las tareas que se realizan desde el lado del servidor, nos evitan una recarga innecesaria de la página porque las consultas a la base de datos pueden ejecutarse desde el lado del cliente, brindando la navegación más rápida.
Es un sistema de base de datos relacional muy conocido siendo de los más usados en el desarrollo de aplicaciones y sitios webs, nos brinda un conjunto de ventajas que me permitió elegir para la realización de este sitio web; es una base de datos gratuita, al ser de código abierto (libre), no tiene coste, evitando el gasto de pago de licencias, facilita una curva de aprendizaje muy rápida, su rendimiento es excelente sin agregarle funcionalidades avanzadas, usa varias capas de seguridad, utiliza pocos recursos de RAM y CPU, excelente integración con PHP.
El PHP (Hypertext Preprocessor) es un lenguaje de alto nivel, interpretado, embebido en páginas HTML y ejecutado en el servidor. PHP se inició como una modificación a Perl escrita por Rasmus Lerdorf a finales de 1994. Su primer uso fue el de mantener un control sobre quien visitaba su currículo en su web. En los siguientes tres años, se fue convirtiendo en lo que se conoce como PHP/FI 2.0. Esta forma de programar llego a muchos usuarios, pero el lenguaje no tomo el peso actual hasta que Zeev Surasky y Andi Gutmans le incluyeron nuevas características en 1997, que dio por resultado el PHP 3.0 (Pelissier, 2019)
PHP es un lenguaje de programación muy popular y utilizado especialmente para el desarrollo web, que interactúa fácilmente con la mayoría de motores de base de datos tales como MySQL, MS SQL, Oracle, Informix, PostgreSQL, y otros muchos; es muy rápido al ser utilizado como un módulo del servidor web apache, es un lenguaje Open Source, en el cual se tiene una gran comunidad que permiten ayudar ante cualquier error o problema que se suscite durante cualquier proyecto en mi caso para el desarrollo del sitio web; por todos estos beneficios la decisión de utilizar este lenguaje y según estadísticas es el más usado en el desarrollo web.
La creación del Sitio Web está desarrollada en programación orientada a objetos en el cual he realizado modificaciones de acuerdo con las necesidades de la empresa Gramon por lo cual detallo como fui insertando las tecnologías mencionadas. El sitio Web ha tenido las siguientes ventajas al utilizar programación orientada objetos. La biblioteca multiplataforma o herramienta Bootstrap en el sitio web ayuda a tener un ambiente agradable al usuario final, por sus iconos desplegables combinando HTML5, CSS y JavaScript creando un diseño adaptable a cualquier dispositivo y tamaño de pantalla, permitiendo maquetar de forma fácil, por lo que permite configurar en código abierto utilizando de forma gratuita, cargando el sitio web de forma rápida, fluida e intuitiva.
Bootstrap
La biblioteca multiplataforma o herramienta Bootstrap en el sitio web ayuda a tener un ambiente agradable al usuario final, por sus iconos desplegables combinando HTML5, CSS y JavaScript creando un diseño adaptable a cualquier dispositivo y tamaño de pantalla, permitiendo maquetar de forma fácil por lo que permite configurar en código abierto utilizando de forma gratuita, cargando el Sitio Web de forma rápida, fluida e intuitiva.
CSS con sus siglas en inglés Cascading Style Sheets (en español Hojas de estilo en cascada). Con el uso de hojas de estilos puedo modificar la presentación de los elementos sin editar el código HTML, logrando un ahorro significativo de tiempo y esfuerzo, así el mantenimiento del sitio se logra realizar de una manera más sencilla.
Usabilidad
Para (Torrente, 2011) Usabilidad: Se desarrolló por el trabajo de Jakob Nielsen, nace del desarrollo web. Hace referencia al aspecto funcional y el otro a los usuarios como podrán utilizar aquella funcionalidad. De aquí surge el estudio en la interacción persona-ordenador para que pueda estar cómodo el usuario en usar un software determinado, de manera sencilla y fácil.
Accesibilidad
(Fernández Casado, 2018), la accesibilidad se refiere a que se tiene fácil acceso permitiendo navegar, se refiere a normas de diseño que facilita a todo tipo de usuarios con o sin discapacidad entender, navegar e interactuar con una interfaz. Se puede decir que es un conjunto de recursos, recomendaciones, estrategias permiten que la web sea o no accesible, considerando fuente, tamaños porque existen personas con discapacidades auditivas y/o visuales, permitiendo a tener acceso a sitios web para las personas con capacidades limitadas.
Con el estudio realizado se puede dar un análisis, En la actualidad la tecnología cada vez nos facilita todo y no se queda la comercialización, comunicación y servicios, es importante recalcar que mediante el estudio de campo me permitió revisar, conocer la diversidad que existe para la creación de sitios web para e-commerce e incluso sin la prioridad de programar, sin olvidar que existe modelos, tecnología que nos ayudan a mejorar la construcción de un sitio web por aquella razón elegí como herramienta Magento open Source, MySQL, con la tecnología design responsive, PHP, JQuery, Bootstrap, JavaScript, HTML5, que en los siguientes capítulos explico detalladamente
Conclusiones
Al realizar el estudio se puede concluir que, por la diversidad de tiendas on-line existentes en la actualidad, es importante conocer cuáles son las mejores alternativas para el desarrollo de un sitio web con gestores de contenido, en la actualidad son los más ejecutados para la construcción del sitio web, el cliente de acuerdo con sus necesidades optará por elegir el de mayor rendimiento para s empresa.
En el estudio de campo es de tal importancia los gestores de contenido, se puede indicar que es una de las herramientas más utilizada para el e-commerce por su potencialidad de organización y administrador de información, aunque se tiene desventajas en algunos por su costos, es la tendencia, día a día ofertan nuevas versiones, siempre para facilidad del cliente, los CMS en versión gratuita tiene una pequeña desventaja al momento de desarrollar que es que no cuentan con todas las características, limitando en ciertos procesos.
Referencias
Andalucía, M. d. (30 de 05 de 2019). Marco de Desarrollo de la Junta de Andalucía. Obtenido de http://www.juntadeandalucia.es/servicios/madeja/contenido/recurso/257
Ángel Cobo, P. G. (2005). PHP y MySQL Tecnologías para el desarrollo de aplicaciones web. En P. G. Ángel Cobo, PHP y MySQL Tecnologías para el desarrollo de aplicaciones web (pág. 2). Santander: Ediciones Díaz de Santos.
Castillo S., J. L., & Navarro H., M. Á. (2015). Comercio electrónico y aspectos prácticos de Implementación con Magento. En J. L. Castillo S., & M. Á. Navarro H., Comercio electrónico y aspectos prácticos de Implementación con Magento (págs. 19-43). Alcalá de Henares: Universidad de Alcalá-Servicio de publicaciones- Cimapress.
Castillo S., J. L., & Navarro H., M. A. (2015). Comercio electrónico y asprectos prácticos de implementación con Magento. En J. L. Castillo S., & M. A. Navarro H., Comercio electrónico y asprectos prácticos de implementación con Magento (págs. 248-255). Álcala de Hernares: Universidad de Álcala.
Desongles C., J., Ponce C., E. A., Garzón V., M. L., Sampalo de la Torre, M. d., & Martos N., F. (2006). Técnicos de Soporte Informático. En J. Desongles C., E. A. Ponce C., M. L. Garzón V., M. d. Sampalo de la Torre, & F. Martos N., Técnicos de Soporte Informático (págs. 342-343). Sevilla: Mad, D.L.
Eíto-Brun, R. (2014). Gestión de contenidos. En R. Eíto-Brun, Gestión de contenidos (págs. 17-20). 10: UOC.
El gran libro del Comercio Electronico. (2016). En M. Masclans, M. Picazo, M. Rodríguez, R. Alejandro, A. Fueyo, & M. Panera, El gran libro del Comercio Electronico (págs. 8-20). Madrid, España: Publixed. Recuperado el 05 de 08 de 2019, de http://observatorioecommerce
Fernández Casado, P. E. (2018). Usabilidad Web Teoría y Uso. En P. E. Fernández Casado, Usabilidad Web Teoría y Uso (págs. 160-180). Madrid: RA-MA Editorial.
Fischer, M. (2017). Website Boosting, optimiza los buscadores, Usabilidad y Marketing Web. En M. Fischer, Website Boosting, optimiza los buscadores, Usabilidad y Marketing Web (págs. 213-260). Madrid: marcombo ediciones técnicas.
Free Software Foundation, I. (21 de 03 de 20019). Sistema operativo GNU, 1.153. Recuperado el 03 de 06 de 2019, de Sistema operativo GNU.
Gallego, J. A. (2011). Desarrollo Web con PHP y MySQL. Madrid: EDICIONES ANAYA MULTIMEDIA .
Gauchat, J. D. (2012). El gran libro de HTML5, CSS3 y Javascrip. En J. D. Gauchat, El gran libro de HTML5, CSS3 y Javascrip (pág. 712). Barcelona, España: Ediciones técnicas Marcombo.
Ionos. (20 de 07 de 2019). Digital Guide Ionos. Digital Guide Ionos.
Martínez Rolán, X. (2019). Diseño de Páginas Web. En X. Martínez Rolán, Diseño de Páginas Web (págs. 30-41). Barcelona: UOC.
Masclans, M., Rodríguez, M., Ramírez, A., Gracia, M., Panera, M., Zafra, D., . . . García del Poyo, R. (2016). El Gran Libro del comercio electrrónico. En M. Masclans, M. Rodríguez, A. Ramírez, M. Gracia, M. Panera, D. Zafra, . . . R. García del Poyo, El Gran Libro del comercio electrrónico (págs. 149-160). Madrid: edición Publixed .
Ollero, C. (2014). Elaboración de plantillas y formularios. Madrid, España: EDITORIAL CEP S.L.
Osorio R., F. L. (2008). Base de datos Relacionales teoría y práctica. En F. L. Osorio R., Base de datos Relacionales teoría y práctica (págs. 13-25). Medellin : Editorial Instituto Tecnológico Metropolitano.
Pelissier, C. (26 de 05 de 2019). Programación en PHP. Obtenido de Profesores: ttp://profesores.elo.utfsm.cl/~agv/elo330/2s02/projects/pelissier/informe.html
Pluralsight. (03 de 08 de 2019). JS JavaScript. Obtenido de JS JavaScript: https://www.javascript.com/
Pressman, R. S. (2010). Ingeniería del Software. Un enfoque práctico (Séptima ed.). México: Mc Graw Hill.
Pressman, R. S. (2012). Ingeniería del software, un enfoque práctico. En R. S. Pressman, Ingeniería del software, un enfoque práctico (págs. 265-270). México: Mc Graw Hill Educación.
Rafael, C. P., & Wilson, N. B. (2017). Diseño de Base de datos. En C. P. Rafael, & N. B. Wilson, Diseño de Base de datos (págs. 18-20). Barranquilla: Universidad del Norte.
Ramos Martín, A., & Ramos Martín, M. J. (2014). Aplicaciones Web. Madrid, España: Paraninfo, SA.
Sánchez, G. (20 de 05 de 2019). Problemática . (C. Loaiza, Entrevistador)
Soria A., A. F., & Osterling L., M. (2015). Contratos modernos: elementos esenciales y reglas aplicables para acuerdos comerciales. En A. F. Soria A., & M. Osterling L., Contratos modernos: elementos esenciales y reglas aplicables para acuerdos comerciales (págs. 217-250). Lima: Universidad Peruana de Ciencias Aplicadas (UPC).
Torrente, S. (2011). Sistema de evaluación de la usabilidad Web orientado al usuario y basado en la determinación de tareas críticas.
Vera M., J. M., López S., M., Granada, D., Irrazábal, E., & Jiménes H., J. J. (2014). Desarrollo web en entorno cliente. En J. M. Vera M., M. López S., D. Granada, E. Irrazábal, & J. J. Jiménez H., Desarrollo web en entorno cliente (págs. 200-210). Madrid: RA-MA S..A.
VODAFONE. (12 de 05 de 2019). Ideas para tu empresa.
wiboomedia. (28 de 04 de 2019). Wiboo. Obtenido de Wiboomedia: Las mejores tiendas en línea por sus diferentes tipos de sitios web, diseños y sobre todo seguridad en ventas son las siguientes: Alibaba, Amazon, Ebay, Tencent, Rakuten
Xabier, M. R., & Tellado, F. (2019). Diseño de páginas web. En M. R. Xabier, & F. Tellado, Diseño de páginas web (págs. 21-30). Barcelona: UOC.
© 2023 por los autores. Este artículo es de acceso abierto y distribuido según los términos y condiciones de la licencia Creative Commons Atribución-NoComercial-CompartirIgual 4.0 Internacional (CC BY-NC-SA 4.0)
(https://creativecommons.org/licenses/by-nc-sa/4.0/).