sistema de información web para promover productos y ...€¦ · html (mark-body), css...

13
Sistema de Información Web para promover productos y servicios de comidas y/o bebidas (RONDON K) Kiara Velásquez, Jimmy Vergara, Jhonnier Goméz Facultad de Ingeniería de Sistemas, Universidad Piloto de Colombia-Seccional Alto Magdalena, Girardot, Colombia [email protected] Resumen Este trabajo consta de la creación y construcción de una Pagina Web desarrollado en tres tipos de lenguajes los cuales son: HTML (Marcación-cuerpo), CSS (Diseño-Estilo), JavaScript (Acción-Ejecución); del mismo modo se trabaja con dos tipos de editores de texto, que son: Sublime text 3 y Breakers, siendo así herramienta fundamental para traducir el código de manera manual y se pueda denotar de una manera concreta y eficaz en el computador. Por otro lado; se trabaja con un Hosting de 260 mb.net, que sirve para subir la página sin ningún costo o valor. Su funcionalidad está orientada a servir como una página de diseño donde se denote, se promueva y se demuestre los distintos productos, comidas y bebidas de los distintos tipos, que ofrece RONDON K diariamente. En dicha página Web se encuentra el logo tipo, imágenes, videos, tutoriales, descripciones, cuadro de recomendaciones, recetas e ingredientes de las distintas comidas, postres, bebidas, pastelería, entre otras especialidades que RONDON K brinda. De igual manera, el usuario tiene la opción de estar en contacto con José Arnulfo Rondón Infante, dueño y chef principal de dicho establecimiento, también lo pueden seguir en sus redes sociales encontrándolo en Facebook, Whatsapp, Instagram y YouTube. Por lo tanto; este proyecto se basó en una Metodología de investigación y desarrollo, donde se tuvo en cuenta ideas, opiniones, pensamientos críticos de otras páginas referentes a comida y restaurantes, el cual por medio de estas se crea y se genera información útil, para el desarrollo de dicha página Web. Palabras clave: Bebidas, Código, Comidas, Desarrollo, Investigación, Pagina Web, Programación. Abstract This work consists of the creation and construction of a Web Page developed in three types of languages which are: HTML (Mark-body), CSS (Design-Style), JavaScript (Action-Execution); in the same way, we work with two types of text editors, which are: Sublime text 3 and Breakers, thus being a fundamental tool to translate the code manually and it can be denoted in a concrete and effective way on the computer. On the other hand; it works with a Hosting of 260 mb.net, which serves to upload the page without any cost or value. Its functionality is oriented to serve as a design page where the different products, foods and beverages of the different types, denoted, promoted and demonstrated, are offered by RONDON K daily. On this Web page you will find the standard logo, images, videos, tutorials, descriptions, recommendations table, recipes and ingredients of the different foods, desserts, drinks, pastry, among other specialties that RONDON K offers. Likewise, the user has the option of being in contact with José Arnulfo Rondón Infante, owner and main chef of said establishment, they can also follow him on his social networks by finding him on Facebook, Whatsapp, Instagram and YouTube. Thus; this project was based on a Research and Development Methodology, where ideas, opinions, critical thoughts from other pages referring to food and restaurants were taken into account, which through these useful information is created and generated for the development of said Web page. Keywords: Drinks, Code, Meals, Development, Research, Website, Programming.

Upload: others

Post on 01-Aug-2020

3 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Sistema de Información Web para promover productos y ...€¦ · HTML (Mark-body), CSS (Design-Style), JavaScript (Action-Execution); in the same way, we work with two types of text

Sistema de Información Web para promover productos y servicios de

comidas y/o bebidas (RONDON K)

Kiara Velásquez, Jimmy Vergara, Jhonnier Goméz

Facultad de Ingeniería de Sistemas, Universidad Piloto de Colombia-Seccional Alto Magdalena, Girardot, Colombia

[email protected]

Resumen Este trabajo consta de la creación y construcción de una Pagina Web desarrollado en tres tipos de lenguajes los cuales son: HTML (Marcación-cuerpo), CSS (Diseño-Estilo), JavaScript (Acción-Ejecución); del mismo modo se trabaja con dos tipos de editores de texto, que son: Sublime text 3 y Breakers, siendo así herramienta fundamental para traducir el código de manera manual y se pueda denotar de una manera concreta y eficaz en el computador. Por otro lado; se trabaja con un Hosting de 260 mb.net, que sirve para subir la página sin ningún costo o valor. Su funcionalidad está orientada a servir como una página de diseño donde se denote, se promueva y se demuestre los distintos productos, comidas y bebidas de los distintos tipos, que ofrece RONDON K diariamente. En dicha página Web se encuentra el logo tipo, imágenes, videos, tutoriales, descripciones, cuadro de recomendaciones, recetas e ingredientes de las distintas comidas, postres, bebidas, pastelería, entre otras especialidades que RONDON K brinda. De igual manera, el usuario tiene la opción de estar en contacto con José Arnulfo Rondón Infante, dueño y chef principal de dicho establecimiento, también lo pueden seguir en sus redes sociales encontrándolo en Facebook, Whatsapp, Instagram y YouTube. Por lo tanto; este proyecto se basó en una Metodología de investigación y desarrollo, donde se tuvo en cuenta ideas, opiniones, pensamientos críticos de otras páginas referentes a comida y restaurantes, el cual por medio de estas se crea y se genera información útil, para el desarrollo de dicha página Web. Palabras clave: Bebidas, Código, Comidas, Desarrollo, Investigación, Pagina Web, Programación. Abstract This work consists of the creation and construction of a Web Page developed in three types of languages which are: HTML (Mark-body), CSS (Design-Style), JavaScript (Action-Execution); in the same way, we work with two types of text editors, which are: Sublime text 3 and Breakers, thus being a fundamental tool to translate the code manually and it can be denoted in a concrete and effective way on the computer. On the other hand; it works with a Hosting of 260 mb.net, which serves to upload the page without any cost or value. Its functionality is oriented to serve as a design page where the different products, foods and beverages of the different types, denoted, promoted and demonstrated, are offered by RONDON K daily. On this Web page you will find the standard logo, images, videos, tutorials, descriptions, recommendations table, recipes and ingredients of the different foods, desserts, drinks, pastry, among other specialties that RONDON K offers. Likewise, the user has the option of being in contact with José Arnulfo Rondón Infante, owner and main chef of said establishment, they can also follow him on his social networks by finding him on Facebook, Whatsapp, Instagram and YouTube. Thus; this project was based on a Research and Development Methodology, where ideas, opinions, critical thoughts from other pages referring to food and restaurants were taken into account, which through these useful information is created and generated for the development of said Web page. Keywords: Drinks, Code, Meals, Development, Research, Website, Programming.

Page 2: Sistema de Información Web para promover productos y ...€¦ · HTML (Mark-body), CSS (Design-Style), JavaScript (Action-Execution); in the same way, we work with two types of text

1 INTRODUCCIÓN El desarrollo de este proyecto se basa en la construcción de una página Web, realizada en el espacio académico de Desarrollo de Aplicaciones con el fin de contribuir y demostrar elementos y materiales útiles y esenciales para la preparación de diferentes tipos de comidas, creando una estrategia de diseño y visualización. Por lo tanto; RONDON K es un sistema de información Web, que tiene como fin promover, brindar y ofrecer los productos y servicios de comidas y/o bebidas que se realizan en dicho establecimiento, esto se convierte en una ayuda eficaz tanto para el sucesor que realiza los productos como para los usuarios que visitan dicha página. Se pretende construir nuevas experiencias, por medio de esta página Web, el cual busca demostrar las diferentes actividades de los disímiles con base al proyecto que se ha construido para ofrecer diferentes tipos de productos, con el fin de que sean de un estilo agradable para los clientes y que por medio de este puedan conocer, contribuir y poner en práctica sus conocimientos en comidas y recetas.

2 PROBLEMA El problema principal, según las estadísticas, promedio y teorías obtenidas por el docente Jimmy Alexander Vergara y estudiantes de la Universidad Piloto de Colombia-SAM, en el transcurso de este inter semestral es el ¿Por qué son importantes las páginas Web y porque es importante que se ofrezca, se promueva y se den a conocer productos y servicios en estas plataformas? Para esto se interactúa, con ideas, pensamientos y conocimientos necesarios que sostienen la construcción de este proyecto.

“En nuestro día a día, estamos expuestos a multitud de cosas que nos rodean. Y en la era de la información, es frecuente toparte con cientos de anuncios publicitarios, ya sea en la calle, en la televisión o en Internet. Estos anuncios no son más que un escaparate donde exponer servicios o productos que buscan cubrir ciertas necesi-dades que las personas podamos tener. Con tanta información, a veces puede llegar a tu cerebro, de forma visual o auditiva, alguna marca que ofrece algo que tú estás buscando o necesitas, para esto se utilizan de una mejor manera las Páginas Web, para mostrarse de una manera más fácil y eficaz”. (Pienso en Web, 2017).

Por esta razón; se creó y se desarrolló una Pagina Web, para demostrar la importancia de estas en la sociedad; denotando la construcción pasó a paso basado en codificaciones y ejecuciones. Con esto, se denota que las páginas Web, son importantes para la sociedad, ya que brindan una serie de información concreta y eficaz, las cuales mantienen informados a los usuarios, con el fin de que pueden interactuar, descubrir y conocer aspectos e ideologías nuevas todos los días. También, demostrando lo importante que es para una empresa o comunidad tener o utilizar una página Web, ya que por medio de esta cualquier persona, sociedad o empresa puede ofrecer, adquirir y dar a conocer sus productos, servicios o publicidades generales. Las cuales generan ingresos, ventas, negocios; entre otros aspectos. Por tal motivo; creamos una página Web que promueva y dé a conocer productos y servicios de comidas, alimentos, postres, pastelería, dulcería y bebidas, con el fin de que los usuarios puedan estar revisando la información constantemente, siendo una información veril y actualizada e interactuando, conociendo y colocando en práctica sus ideas, pensamientos y habilidades frente a estos temas útiles y necesarios no solamente para restaurantes y establecimientos públicos-privados, si no de igual manera para los hogares familiares.

.

Page 3: Sistema de Información Web para promover productos y ...€¦ · HTML (Mark-body), CSS (Design-Style), JavaScript (Action-Execution); in the same way, we work with two types of text

3 JUSTIFICACIÓN RONDON K es una comunidad que surgió en la Ciudad de Girardot-Cundinamarca y hoy en día se desarrolla y crece en el País de España, tiene más de 20 años de experiencia en el campo socio-cultural y arte Culinario, brindando un servicio de productos ejemplares de alimentación, junto con una excelente calidad de productos y personal. Esta sociedad comienza, cuando el señor José Arnulfo Rondón Infante, dueño y chef principal de dicho establecimiento con tan solo 7 años de edad; comenzó a realizar dulces y merengues con su abuela y desde entonces comenzó su trayectoria y sus estudios para culminar sus etapas, su carrera y ser hoy en día la persona que es, teniendo muchas cosas y creciendo cada día más por sus ventas, preparaciones y recetas.

“En algún momento de la historia, entre el final de los años 90 y el inicio de los años 2000, contar con un sitio web empresarial era una moda. La cobertura de Internet en el país y en el mundo no era tan amplia como lo es ahora y muy pocos tenían acceso a este servicio. Por eso, tener una página web en aquella época tal vez no era tan necesario ni tan funcional como puede serlo hoy”. (Gonzales Ugalde, 2020).

Para sostener el trabajo y por cuestiones del entorno del cual trabajamos en dicho proyecto nosotros realizamos esta Página Web, con el fin de demostrar la importancia y el valor de esta en la actualidad, en este caso representando la comida del establecimiento dicho anteriormente Se busca brindar una nueva ventana de oportunidades y el inicio a un nuevo mercado web, transportar las habilidades y experiencia de una persona en el ámbito de la cocina, panadería y pastelería para así tener un mayor reconocimiento nacional e internacional, que muchas personas de diferentes edades puedan ver las exquisiteces que el ofrece en sus plataformas para hacer en casa, al mismo tiempo generando oportunidades en el área laboral.

“Una página web es una serie de archivos y conjunto de datos electrónicos (generalmente escritos en HTML) que permiten crear un documento que es visible utilizando un navegador de internet. Este documento puede contener textos, imágenes, videos, sonidos, archivos y demás elementos que en conjunto conforman la estructura de una página web. Este documento está adaptado para la World Wide Web (www.) que básicamente es una serie de conexiones mundiales a las que se puede tenerse acceso mediante una conexión a Internet. En pocas palabras es el mundo virtual en el que habitan las páginas web”. (Carmen, 2020).

Basado en la consulta y recolección de datos para este proyecto, esta problemática se debería solucionar de una manera única y concreta, donde se desarrolle una manera de aprendizaje totalmente diferente a la común. Ya que, las personas acostumbramos aprender las cosas de una manera sencilla y del mismo modo realizar las cosas de esta manera, sería un gran beneficio para la sociedad, ya que por medio de este tipo de páginas Web, sería una mejor manera de búsqueda, porque se muestran los productos, cualidades y habilidades de muchas personas, las cuales nos sirven como herramienta o aprendizaje en el momento que se desee. Para este proyecto se utilizó una metodología de desarrollo e investigación aplicada donde se están tomando los conocimientos y competencias adquiridas en clase, para así formar un proyecto formativo, aplicando un tipo de investigación. Este sistema también puede conseguir diferentes variedades de informaciones en distintos tipos de páginas Web, el cual el usuario necesite en cualquier situación. Esto con el fin de que los Usuarios y dueños, identifiquen y conozcan los productos y servicios. Que la persona pueda contribuir de una manera más práctica, teórica y específicamente en el preciso y desarrollo de estos. Del mismo modo, que pueda generar datos de entrada, un proceso cronológico para que así se lleva a la solución o resultado, brindando así una mejoría.

Page 4: Sistema de Información Web para promover productos y ...€¦ · HTML (Mark-body), CSS (Design-Style), JavaScript (Action-Execution); in the same way, we work with two types of text

4 METODOLOGÍA Por consiguiente, se demuestra el desarrollo de la Página Web RONDON K. Su estructura se compone de cuatro secciones, las cuales son: Inicio, recetas, tutoriales y conóceme. En donde en cada uno de estos módulos se denota información, imágenes y videos, que son útiles e importantes para que el usuario descubra, conozca e interactúe con distintas especialidades de comidas. Por otro lado; en todas las cuatro secciones que se encuentran en la página, se puede visualizar la foto del chef y dueño de dicho establecimiento, los logotipos de sus redes sociales para que el usuario pueda seguirlo y vea consecutivamente sus recetas y publicaciones. Para la creación de esta Página se trabajó con tres tipos de lenguajes los cuales son: HTML (Marcación-cuerpo), CSS (Diseño-Estilo), JavaScript (Acción-Ejecución del programa); del mismo modo se trabaja con dos tipos de editores de texto, que son: Sublime text 3 y Breakers, que se indican para escribir el lenguaje de programación y que pueda ser ejecutado de la mejor manera.

Figura 1. Logo HTML, CSS, JavaScript (https://skywell.software/blog/how-to-make-a-website-with-javascript-html-and-css/)

Figura 2. Logo Sublime text 3

(https://aficionweb.wordpress.com/2018/01/20/sublime-text-full/)

Page 5: Sistema de Información Web para promover productos y ...€¦ · HTML (Mark-body), CSS (Design-Style), JavaScript (Action-Execution); in the same way, we work with two types of text

Figura 3. Logo Brackest

(https://worldvectorlogo.com/es/logo/brackets) Después, encontraremos los códigos de cada una de los módulos que componen la Pagina Web, realizados en la plataforma de Brackest.

Figura 4. Módulo de Inicio RONDON K (Autoridad propia, trabajado en Brackest)

Figura 5. Módulo de Recetas RONDON K (Autoridad propia, trabajado en Brackest)

Page 6: Sistema de Información Web para promover productos y ...€¦ · HTML (Mark-body), CSS (Design-Style), JavaScript (Action-Execution); in the same way, we work with two types of text

Figura 6. Módulo de Tutoriales RONDON K (Autoridad propia, trabajado en Brackest)

Figura 7. Módulo de Conóceme RONDON K (Autoridad propia, trabajado en Brackest)

Figura 8. Código de Privacidad RONDON K (Autoridad propia, trabajado en Brackest)

Page 7: Sistema de Información Web para promover productos y ...€¦ · HTML (Mark-body), CSS (Design-Style), JavaScript (Action-Execution); in the same way, we work with two types of text

De igual manera, notamos el estilo de la página Web en el lenguaje CSS.

Figura 9. Estilo de RONDON K (Autoridad propia, trabajado en CSS)

Ahora, se muestra el código de la Pagina Web en JavaScript.

Figura 10. Código de Ejecución de RONDON K (Autoridad propia, trabajado en JavaScript)

Por otro lado; se muestran el logotipo principal de RONDON K que representa esta sociedad.

Figura 11. Logotipo RONDON K (Autoridad propia)

Page 8: Sistema de Información Web para promover productos y ...€¦ · HTML (Mark-body), CSS (Design-Style), JavaScript (Action-Execution); in the same way, we work with two types of text

Entonces, ahora se muestra la página Web oficial.

Figura 12. Bienvenidos a RONDON K (Autoridad propia)

Figura 13. Barra superior RONDON K (Autoridad propia)

Figura 14. Módulo de Inicio RONDON K (Autoridad propia)

Page 9: Sistema de Información Web para promover productos y ...€¦ · HTML (Mark-body), CSS (Design-Style), JavaScript (Action-Execution); in the same way, we work with two types of text

Figura 15. Módulo de Recetas RONDON K (Autoridad propia)

Page 10: Sistema de Información Web para promover productos y ...€¦ · HTML (Mark-body), CSS (Design-Style), JavaScript (Action-Execution); in the same way, we work with two types of text

Figura 16. Módulo de Tutoriales RONDON K (Autoridad propia)

Figura 17. Módulo Conóceme RONDON K (Autoridad propia)

Page 11: Sistema de Información Web para promover productos y ...€¦ · HTML (Mark-body), CSS (Design-Style), JavaScript (Action-Execution); in the same way, we work with two types of text

Figura 18. Módulo Políticas de Privacidad RONDON K (Autoridad propia)

Figura 19. Registro y Opinión de la Página RONDON K (Autoridad propia)

Page 12: Sistema de Información Web para promover productos y ...€¦ · HTML (Mark-body), CSS (Design-Style), JavaScript (Action-Execution); in the same way, we work with two types of text

5 RESULTADOS Y DISCUSIÓNLos resultados obtenidos en este proyecto fueron primordialmente la creación y construcción de dicha página Web, realizada por códigos y etiquetas de programación, donde se utilizó distintos temas y librerías para la formación de espacios, diseños, letras y colores. Se cumplió con los aspectos y requisitos necesarios para dicho trabajo.

“El proceso de enseñanza-aprendizaje es una labor compleja que puede suponer grandes desafíos en los estudiantes y docentes, ya que solicita un gran esfuerzo por parte de ambos. De acuerdo con Michalko, involucrar dinámicamente a los estu-diantes en las áreas de conocimiento por medio de herramientas no tradiciona-les de enseñanza-aprendizaje incrementa su capacidad de abstracción, facilita la profundización y desarrolla el pensamiento crítico así como la habilidad de solucio-nar problemas cotidianos”. (Goméz, Echeverry, Jaime, & Gonzales, Liliana, 2017).

La mejor forma de aprender, es practicar lo aprendido, gran parte de los estudiantes solo practican en clase y el resto del tiempo se dedican a otras cosas dejando a un lado lo aprendido en clase, solo lo vuelven a practicar en la próxima clase. Lo que genera poco desarrollo en la lógica general. Es necesario utilizar diferentes recursos o herramientas online para explicar de forma rápida y resumida las temáticas complejas ya que en algunos casos los estudiantes y personas no logran realizar conexiones tan extensas. La solución de dicho trabajo es lograr que todas estas peticiones y recomendaciones sean utilizadas en cualquier tipo de Página Web para que se puedan codificar en una estrategia de aprendizaje, donde las personas puedan interactuar con esta actividad y desarrollen un coeficiente intelectual mucho mejor, logrando aprender, analizar y aprender temas útiles de una manera mucho más fácil eficaz. Un problema que se tuvo en el desarrollo de esta página Web clasificada RONDON K fue la falta de tiempo, ya que no se pudieron incluir otras opciones y aspectos planteados desde un comienzo, por el motivo de que fue solamente un mes para todo lo que se tenía deseado. Se recomienda utilizar este método como estrategia de aprendizaje, investigación y desarrollo ya que se obtuvieron buenos resultados y comodidades con dicha estrategia. En donde, se vio reflejado el manejo y uso de lenguajes y etiquetas esenciales para la construcción de cualquier tipo de página Web. 6 CONCLUSIONES Y RECOMENDACIONES

• Los resultados fueron bastantes satisfactorios, ya que se logró generar las peticiones y necesidades planteadas desde inicio de proyecto. En el cual se digna a demostrar el proceso para la creación de dicha página y del mismo modo, que el usuario aprende e interactúe con esta.

• A parte de realizar un trabajo para ejemplificar y demostrar pautas importantes de las comidas para

brindar a los usuarios, del mismo modo; nosotros adquirimos conocimientos utilizando programas de codificaciones, diseño, estilo y lenguajes de etiquetas. Los cuales fueron importante para el desarrollo de este proyecto.

• Se concluye que la estrategia utilizada en la metodología de desarrollo e investigación es importante y relevante, ya que se compone de distintas ideologías, actividades y conceptos los cuales se manejan de una manera fácil, para generar un mejor énfasis en la transformación y creación de páginas Web.

• Se realizó la página con diferentes lenguajes de diseño, estilo y codificación; logrando así una

ejecución correspondiente, se pretende que a futuro se logre aplicar diferentes estilos, diseños y gran cantidad de información necesaria para suministración de datos generales y esenciales para que la página crezca de una manera trascendental. Se tiende a agregar diferentes opciones de ayuda y manejo para que así fortalezca y mejor la calidad de la Página Web RONDON K.

Page 13: Sistema de Información Web para promover productos y ...€¦ · HTML (Mark-body), CSS (Design-Style), JavaScript (Action-Execution); in the same way, we work with two types of text

7 REFERENCIAS

Carmen, J. d. (2020). CualHost. Obtenido de https://www.cualhost.com/sitios-web/para-que-sirve-una-pagina web/ Goméz, M., Echeverry, Jaime, & Gonzales, Liliana. (2017). Estrategia de evaluación basada en juegos: Caso

Ingeniería de Sistemas Universidad de Medellín. Revista Chilena de Ingeniería, 25. com.unipiloto.basesdedatosezproxy.com/docview/2001042856/A075F07C90DE4F54PQ/1?accountid=50440 Gonzales Ugalde, D. (2020). DinterWeb. Obtenido de https://blog.dinterweb.com/por-que-es-tan-importante-

contar-con-un-sitio-web Pienso en Web. (9 de Julio de 2017). Obtenido de https://piensoenweb.com/entradas-blog/la-importancia-de-

una-pagina-web.html