Creación de Página Web Dinámicas con Website X Evolution

UNIVERSIDAD NACIONAL DE EDUCACIÓN Enrique Guzmán y Valle

Alma Máter del Magisterio Nacional

FACULTAD DE CIENCIAS

Escuela Profesional de Matemática e Informática

TRABAJO DE INVESTIGACIÓN

Creación de Página Web Dinámicas con Website X Evolution

Presentada por:

Evelyn Elizabeth Huanca Campos

Asesor:

Mtro. John Peter Castillo Mendoza

Para optar al Grado Académico de Bachiller Universitario Especialidad: Informática

Lima, Perú

2022

TRABAJO DE INVESTIGACIÓN

Creación de Página Web Dinámicas con Website X Evolution

___________________________

Mtro. John Peter Castillo Mendoza Asesor

Designación de Jurado Res. N° 0072--2022-D-FAC

_______________________________________

Dr. Guillermo Pastor Morales Romero Presidente

___________________________

Dr. Lolo José Caballero Cifuentes Secretario

___________________________

Mg. Walter Rony Yupanqui Huatuco Vocal

Línea de Investigación: Metodología y didáctica

Dedicatoria

A Dios: por extender su bendición y misericordia a mi familia.

A la persona especial que me apoyó sin condición alguna en el desarrollo de esta monografía.

Índice de contenidos

Portada ... i

Hoja de firmas de jurado ...ii

Dedicatoria... iii

Índice de contenidos ... iv

Lista de tablas ... vii

Lista de figuras ... viii

Introducción ... x

Capítulo I. Historia de las páginas web ... 12

1.1 Evolución de las páginas web ... 12

1.2 Generaciones de las páginas web ... 14

1.2.1 Primera generación... 14

1.2.2 Segunda generación. ... 14

1.2.3 Tercera generación. ... 15

1.2.4 Cuarta generación... 16

1.2.5 Quinta generación. ... 16

1.3 World Wide Web o la WEB... 16

1.4 Hipertexto ... 17

Capitulo II. Páginas web ... 19

2.1 Concepto ... 19

2.2 Características ... 20

2.3 Programación Web ... 21

2.4 Creación de páginas web ... 21

2.4.1 Aspecto y finalidad del sitio. ... 22

2.4.2 Esbozo del sitio. ... 22

2.4.2.1 Diseño del sitio Web. ... 23

2.4.2.2 Diseño de la página web. ... 23

2.4.3 Registro de un nombre de dominio. ... 24

2.4.4 Buscar hosting para alojamiento de sitio. ... 24

2.4.5 Etapas del diseño y desarrollo de sitio. ... 25

2.4.6 Publicación y mantenimiento del sitio. ... 26

2.5 Herramientas para generar páginas web ... 26

2.6 Herramientas de diseño Web ... 27

Capítulo III. Páginas web educativas ... 31

3.1 Concepto ... 31

3.2 Creación de web educativas ... 31

3.3 Elementos educativos del ciberespacio ... 32

3.4 Diseño web para las instituciones educativas ... 32

3.5 Diseño web para docentes de las instituciones educativas... 32

3.6 Diseño web para estudiantes ... 33

3.8 Elementos que debe tener un sitio web educativo ... 34

Capítulo IV. Aplicación práctica: página web dinámica con Website X Evolution para la Institución Educativa “Jesús de Nazareth” ... 37

4.1 Selección del proyecto en WebSite x Evolution ... 37

4.2 Ajustes generales ... 38

4.2.1 Sección General. ... 38

4.2.2 Sección Avanzado. ... 39

4.2.3. Elección del tipo menú. ... 40

4.2.4. Elección de la plantilla. ... 40

4.2.5. Editor de plantilla. ... 41

4.3 Creación del mapa ... 42

4.4 Diseño de página ... 42

4.4.1. Objetos utilizados. ... 43

4.5. Exportar ... 46

4.6. Hosting Web host ... 46

Conclusiones ... 48

Recomendaciones ... 49

Referencias ... 50

Apéndices ... 53

Lista de tablas

Tabla 1. Tipos de Hosting... 25

Lista de figuras

Figura 1. Esbozo de Página Web.. ... 22

Figura 2. Aplicaciones para el diseño del sitio Web. ... 23

Figura 3. Partes de maquetación y diseño Web.. ... 23

Figura 4. Ejemplos de dominios.. ... 24

Figura 5. Tipos de letras. ... 27

Figura 6. Diseño de diversas letras. ... 27

Figura 7. Extensión Page Ruler. ... 28

Figura 8. Selección de banco de imágenes. ... 28

Figura 9. Animaciones de texto en Canva. ... 29

Figura 10. Tinypng.. ... 29

Figura 11. Iconfinder. ... 30

Figura 12. Creación del proyecto "JN". ... 38

Figura 13. Ingresando datos generales de la I.E. "JN".. ... 39

Figura 14. Programación personalizada.. ... 39

Figura 15. Opciones de menú.. ... 40

Figura 16. Selección de plantillas.. ... 40

Figura 17. Editor de plantilla encabezado.. ... 41

Figura 18. Editor de pie de página.. ... 41

Figura 19. Creación del mapa.. ... 42

Figura 20. Diseño de página.. ... 42

Figura 21. Textos utilizados.. ... 43

Figura 22. Configuración de galería de fotos.. ... 43

Figura 23. Descripción del formulario.. ... 44

Figura 24. Objeto HTML... 44

Figura 25. Enlace Facebook insertado.. ... 45

Figura 26. Enlace de WhatsApp insertado.. ... 45

Figura 27. Tipos para exportar el proyecto... 46

Figura 28. Página principal Webhost. ... 46

Figura 29. Configuración del Webhost... 47

Figura 30.Dominios, correos y base de datos. ... 47

Introducción

La nueva realidad educativa por la virtualización de la enseñanza, debido a la pandemia, nos obliga a crear nuevos entornos educativos, lo cual nos impulsa a la implementación de páginas web dinámicas utilizando el software Website x Evolution.

Nuestros jóvenes estudiantes diariamente revisan e interactúan diferentes páginas web, en su afán de adquirir nuevos conocimientos frecuentando su visita a una o más páginas en especial, dependiendo de sus intereses.

El software Website Evolution X, permitirá diseñar e implementar páginas dinámicas en el entorno educativo y, específicamente, en la Institución Educativa “Jesús de Nazareth”, considerando muy importante en estos tiempos de pandemia, donde se viene implementando indefectiblemente la nueva enseñanza remota y la virtualización de los procesos educativos.

Mediante este sistema: los docentes, estudiantes y público, en general, podrán tener información actualizada y dinámica concerniente a la Institución Educativa “Jesús de Nazareth”.

El presente trabajo está dividido en cuatro capítulos; en el primer capítulo, se presenta la historia de las páginas web a través del tiempo: desde la primera, hasta la quinta generación. En el segundo capítulo se trata los conceptos básicos de páginas web, características, programación y creación de páginas web, además de los alojamientos y la dinamización de los mismos. En el tercer capítulo, nos dedicamos específicamente a páginas web educativas, considerando los aspectos más importantes. Finalmente, en el cuarto capítulo, la creación de páginas web educativas dinámicas con el uso del software Website X Evolution en la Institución Educativa “Jesús de Nazareth”.

Con el uso del software Website X Evolution, podemos elegir diferentes plantillas predeterminadas de acuerdo a nuestro interés; y las herramientas facilitarán la construcción y el diseño de la página web de la Institución Educativa “Jesús de Nazareth”.

La página web Dinámicas con Website X Evolution permitirá la interacción en la Institución Educativa “Jesús de Nazareth”, entre: estudiantes, padres de familia y público en general. Los estudiantes obtendrán permisos exclusivos para acceder al Intranet, donde podrán gestionar su matrícula, horario de clase, recibos de pago, etc.

Capítulo I.

Historia de las páginas web

1.1 Evolución de las páginas web Latorre (2018) indica que:

Web no son sinónimo de Internet; Internet es la red de redes donde reside toda la información, siendo un entorno de aprendizaje abierto, más allá de las instituciones educativas formales. La web es un subconjunto de Internet que contiene

información a la que se puede acceder usando un navegador. Tanto el correo electrónico, como Facebook, Twitter, wikis, blogs, juegos, etc. son parte de Internet, pero no la web (p. 1).

Aquino (2016), desde cómo la presentó “Tim Berners-Lee en 1998, creó el nombre de "World Wide Web", elaboró el primer servidor World Wide Web, "http", al igual que el primer programa cliente (un buscador y un editor), "World Wide Web", en octubre de 1990” (p. 2).

El concepto de “La Web” se formó y estableció sobre el Internet. Si bien las conexiones físicas tienen como base el internet, se implantaron ideas frescas e innovadoras, respetando las ya establecidas.

Se inició en 1990, en el centro de Estudios para la Investigación Nuclear, situado en Suiza. El artífice de esta idea e inventor de la página Web fue de Tim Berners-Lee, quien nació en Londres (Reino Unido) el 8 de junio de 1955; fue licenciado en Física en 1976 en el Queens College de la Universidad de Oxford. Él inventó la WWW en 1989 durante su jornada laboral en el CERN (Organización Europea para la Investigación Nuclear) en Ginebra, Suiza.

Debido a la urgencia de querer adquirir y compartir información de sus

investigaciones de manera rápida y eficiente, estableció las bases de la web. Tim, junto con su grupo de colegas, realizó lo que conocemos como HTML (HYPER TEXT MARKUP LANGUAGE) o lenguaje de marcado de hipertexto de páginas web.

Previo a la era de la web, la manera de adquirir datos mediante el internet se tornaba confuso, ya que a pesar de que existían muchas formas de hacerlo, se tenía que tener ideas previas de aplicaciones y diversos sistemas operativos.

La web establece una definición central: la opción de lectura universal, lo que nos da a entender que una vez que la información está en la red, puede ser accedida desde cualquier dispositivo con conexión a Internet, desde cualquier parte del mundo, utilizando un solo programa, que es de uso casi intuitivo. Pero, para que esto se lleve a cabo, se usan diferentes conceptos, siendo el más notorio el hipertexto.

Mediante la web, los usuarios sin saberlo tienen la capacidad de ubicar y acceder a la extensa y amplia información que se encuentra situada en cualquier parte del mundo que cuente con un sistema informático.

La creación de la web ocasionó un tremendo desarrollo del Internet, un impulso gigantesco que en 1993 la World Wide Web aumentó un increíble 341000%; tres años después, en 1996, aún se duplica cada 50 días.

A causa de los avances en la tecnología de hardware y software, el diseño web original se ha visto potenciada durante cinco generaciones posteriores.

1.2 Generaciones de las páginas web 1.2.1 Primera generación.

Latorre (2018) explica que “una página web que se limita a mostrar información y que ni siquiera se actualiza, forma parte de la generación 1.0” (p. 2)

Aquino (2016) menciona que:

La Web 1.0 inicio de la manera más básica que existe, con navegadores de únicamente texto, como ELISA, que tenía como característica su velocidad, luego apareció el HTML (Hyper Text Markup Language) que logró volver las páginas web más llamativas visualmente y posteriormente surgieron los primeros

navegadores visuales como IE, Netscape, etcétera (p. 2).

En 1993 se creó el navegador web llamado Mosaic, que mostraba palabras e imágenes, pero con muchas restricciones: cuando se tenía que diagramar, contaba con un diseño lineal establecido para los científicos y su conectividad se daba mediante vía módem; al ser su estructura muy confusa, los científicos tomaron como base esto para crear los estándares HTML, que se encargarían de dar un orden total a la estructura.

1.2.2 Segunda generación.

Latorre (2018) menciona que “es dinámica, interactiva, de lectura y escritura, desarrolla la inteligencia colectiva y favorece el trabajo colaborativo, etc.” (p. 3).

Aquino (2016) menciona que:

Este término fue acuñado por Tim O’Reilly en 2004 para referirse a una segunda generación en la historia del desarrollo de tecnología Web. En esta nueva versión

los mandos son tomados por los usuarios. Surgen aplicaciones y páginas que utilizan la inteligencia colectiva, consecuencia de ello las páginas pueden ser personalizadas, los usuarios cambios e introducen datos y se convierten en una herramienta dinámica que permite el intercambio de información (p. 3).

Los íconos reemplazaron las palabras; imágenes de fondo, banners, y botones de relieve, eran unos de los tantos cambios que se empezaron a ver en las páginas web, todo esto gracias a la mejora por parte de los monitores y tarjetas gráficas.

1.2.3 Tercera generación.

Latorre (2018) menciona que “la web 3.0 apunta a que todos podamos disfrutar de la información y de las herramientas de Internet sin importar el aparato a través del cual nos conectemos” (p. 5)

Aquino (2016) explica que:

La web 3.0 se diferencia de las demás generaciones en que es una web semántica, utiliza la inteligencia artificial, interviene el usuario en la creación, organización y rendimiento del contenido a través de un modelo de cooperación globalizada y potencia nuevas formas de comunicación entre usuarios. La Web 3.0 se encarga de definir el significado de las palabras y facilitar que un contenido Web pueda ser portador de un significado adicional que va más allá del propio significado textual de dicho contenido (p. 4).

Estaba dirigida para los diseñadores, que tenían como prioridad el vender sus distintos artículos, noticias, información, etc. En pocas palabras, casi todo era compra y venta de productos, servicios y publicidad.

1.2.4 Cuarta generación.

Latorre (2018) menciona que:

En el 2016 empezó la web 4.0, que es el próximo gran avance y se centrará en ofrecer un comportamiento más inteligente, más predictivo, de modo que podamos, con sólo realizar una afirmación o petición, poner en marcha un conjunto de

acciones que tendrán como resultando aquello que pedimos o decimos (p. 6).

Aquino (2016) también llamada “Web ubicua permite la conexión del mundo físico al mundo virtual por medio de dispositivos inalámbricos (por ejemplo, GPS, Tablet, teléfonos celulares), sin importar el lugar y el tiempo; está en todas partes en tiempo real”

(p. 10).

Ya en esta generación, el enfoque cambió de dirección hacia lo audiovisual; los nuevos navegadores traían nuevos elementos dirigidos a todo tipo de usuario.

1.2.5 Quinta generación.

Aquino (2016) que la “Web 5.0 también pondrá nuevas exigencias en materia de publicidad, una de las principales fuentes de ingresos en la web” (p. 13).

La implementación de la página de televisión significó un avance muy grande para esta generación, ya que integrarlo conllevó el cambio más notorio en la actualidad.

1.3 World Wide Web o la WEB Aquino (2016) menciona que:

Debemos tener en claro que la World Wide Web está basada en documentos y enlaces de hipertexto, este diseño hace que la información no se procese de forma automática, sino que antes tiene que pasar por la lectura humana. Si, por ejemplo, realizamos la búsqueda de un documento por el término “hipertexto”, la Web no sabrá

diferenciar los distintos significados o los diferentes contextos en lo que se sitúa este término (información académica, programas para diseñar hipertexto, empresas que publicitan su web, etc.) (p. 2).

WWW es una cobertura mundial con ramificaciones, que se basa en ofrecer una interface intuitiva y precisa para introducirnos en la gran cantidad de recursos que nos brinda el Internet. En la actualidad, es la forma más rápida de dar y recibir información.

Las páginas electrónicas son las que nos posibilitan acceder a la información, y este servicio solo parece crecer más con el pasar del tiempo. Para acceder a la página web, requerimos de direcciones las cuales se llaman URL (Uniform Resource Locator). Cada página web posee su URL y la cual es http://www.lotar.com

 Donde http:// Es un prefijo que precisa el protocolo al que forma parte y se repite en toda dirección URL. identifica

 WWW. Detecta que es una dirección del WWW y está situada en casi todas las direcciones URL.

 lotar.com. Identifica explícitamente la dirección a la cual se desea entrar y tiene como nombre dominio.

 Com. Nos precisa que el lugar al que se está accediendo es comercial.

1.4 Hipertexto

Tabares (2014) explica que:

El hipertexto, no era algo nuevo, sino que era algo que existía como un concepto académico desde 1940. De hecho, el primero en usar esta expresión fue Ted Nelson, en su artículo «No more teacher´s dirty looks» (Nelson, 1970), para referirse a escritos no secuenciales que coordinaran la presentación de cualquier

tipo de información, texto, imagen o audio. Un medio en el que el usuario podría interactuar con la información de varias maneras (p. 60).

Son datos que contienen enlaces (links) a otros datos. En el lenguaje web, un documento de hipertexto no solo contiene datos, también contienen enlaces a otros documentos.

Ejemplo:

Una enciclopedia que al final de un tema cuenta con referencias de cierto tema en especial o referencias bibliográficas a textos externos.

En Hipertexto, el computador hace que el usuario siga referencias, para que la investigación sea más sencilla. Esto conlleva a que el usuario no tenga que ir de forma lineal, y le da la libertad de poder seguir por la información que más le sirva. En hipertexto podemos hacer enlaces en cualquier parte de la estructura no necesariamente solo en el final.

Cada enlace cuenta con una marca que lo diferencia, puede estar establecido en un número, subrayado o resaltado. El hipertexto no se limita solo a datos textuales también podemos encontrar dibujos del elemento a buscar, sonidos o videos que traten sobre el tema. Al tratarse de documentos que cuentan con una enorme gama de datos, como texto, sonido y video, en el ambiente del hipertexto recibe el nombre de hipermedia.

El hipertexto es un instrumento primordial para potenciar el aprendizaje. El texto debe estar diseñado para poder ser analizado con libertad y así obtener un intercambio de ideas más eficiente y productivo.

Capitulo II.

Páginas web 2.1 Concepto

Se conoce como página web a un documento electrónico, que posee datos digitales;

esta puede estar compuesta por información visual y/o sonora, como también una

combinación de ambos, mediante textos, sonidos, imágenes o videos, entre otros medios, ya sean animados o inamovibles. Esta información ha sido establecida para acoplarse a la red informática mundial, conocida como World Wide Web.

Las páginas web se ubican dentro los sitios web, y estas almacenan el contenido que puede utilizar el usuario, los desarrolladores web llaman a los sitios web con el nombre de dominio.

Todo lo previamente mencionando es información virtual, pero el lugar físico, donde se encuentra y archivan todos estos documentos se llama servidor o hosting, que es como una computadora conectada todo el tiempo al Internet, que nos permite ingresar a las páginas web de nuestro interés en el lugar y momento que lo necesitemos. Podemos

acceder a las páginas web por medio de los motores de búsqueda o navegadores, los más destacables son Google Chrome, Mozilla Firefox, Microsoft Edge, entre otros.

El lenguaje mediante el cual se rigen las páginas cibernéticas se llama HTML, se trata la programación de un formato que posibilita ingresar a diferentes páginas web

mediante enlaces de hipertexto, que también reciben el nombre de enlaces; eso quiere decir que en el interior de un documento electrónico se puede encontrar otro contenido, lo que nos movilizará a otra parte de la misma página web o directamente a una página distinta;

su principal objetivo es volver la experiencia de navegar por Internet mucho más

satisfactoria y eficiente. El formato HTML está formado por códigos, mientras que para el usuario común no se ve de esta forma, ya que los navegadores convierten los documentos HTML a imágenes, textos y sonidos que citamos previamente y se les muestra a los usuarios de tal manera que puedan entenderse mejor.

Las páginas poseen diferentes diseños, esto se hace así con la finalidad de que no se torne repetitivo, de modo que sea una herramienta de entretenimiento, educativo,

ilustrativo, productivo y funcional (García, 2021).

2.2 Características

Lo resumimos en 7 puntos. Si se cuenta con una web, recomendamos que compruebe si cumple con todas ellas y, en caso contrario, contactar con un especialista para el asesoramiento de cómo realizarlo. Y si aún no se tiene una página web, se debe considerar los aspectos más importantes (Actium digital, 2022):

 Capacidad de autonomía sencilla, perspicaz y simple.

 Páginas web que se acoplan / Diseño responsive.

 Rapidez de carga óptima.

 Optimización de motores de búsqueda.

 Facilidad de uso y organización.

 Página de contacto o elementos de interacción notorias.

 Un diseño acorde al estilo corporativo.

2.3 Programación Web

Se utiliza para la elaboración de sitios dinámicos en Internet. Podemos lograr esto gracias a la introducción de contenidos mediante una base de datos por medio de lenguajes de programación Web. Si adquirimos los conocimientos necesarios seremos capaces de crear sitios web versátiles, tales como blogs, páginas de venta, periódicos digitales, etc.

Lenguajes de programación HTML.

El lenguaje de programación más reconocido es Web es el HTML (Hyper Text Markup Language). Que se define como lenguaje de marcado de hipertexto, se usa este lenguaje para la creación de páginas web en internet. Este lenguaje de programación web, HTML, encripta un documento y al lado del texto añade algunas etiquetas o marcas que nos dan información auxiliar sobre la estructura y entrega de ese texto.

HTML se ha transformado en los lenguajes de programación Web más relevantes debido a que todos los navegadores de Internet lo toleran de forma eficiente, es el lenguaje de programación más sencillo de aprender y el más usado para la elaboración de

documentos (Ecured, 2022).

2.4 Creación de páginas web

El diseño de páginas web es la elaboración de documentos de hipertexto para su exhibición en los distintos navegadores. Estas páginas web se pueden crear de las siguientes maneras: Creando archivos de texto en HTML, Aspx, Asp, JavaScript, JSP, Python, Ruby o utilizando un software visual de creación de páginas WYSIWYG o WYSIWYM.

2.4.1 Aspecto y finalidad del sitio.

La internet crece a una velocidad indescriptible y con ella aumentan las

posibilidades de negocio que tengan como cimiento el establecer y brindar información, productos y servicios que puedan hallar con tan solo un clic. Es por eso que es esencial conocer con certeza ¿Cómo se define un sitio web? ¿Qué es una página web? ¿Cuáles son los tipos de sitio web existen? Entre otros cuestionamientos que debemos aclarar para podemos posicionar nuestra página web sobre las demás y conducir nuestro negocio a un nivel superior. Ahora bien, para llegar a ese lugar, comenzáramos por los puntos más básicos (Miguel Soler, 2022).

2.4.2 Esbozo del sitio.

Iniciaremos con un boceto en el cual podamos plasmar la estructura que deseamos que tenga nuestra página web. En el boceto estableceremos cómo estará organizado y cómo será su interfaz gráfica. Este proceso de organización, estructuración y realización se ejecuta previo a la fase de diseño web (Palbin, 2022).

Figura 1. Esbozo de página web. Fuente: Autoría propia.

2.4.2.1 Diseño del sitio web.

Diseño web es un sector centrado en la elaboración de interfaces digitales, como el diseño de aplicaciones y sitios web. Los diseñadores web toman como base el lenguaje de programación HTML para así poder crear las distintas páginas web (Rockcontent, 2022).

Figura 2. Aplicaciones para el diseño del sitio web. Fuente: Recuperado de:

https://www.trecebits.com/

2.4.2.2 Diseño de la página web.

El diseño web involucra empleos vinculados con la maquetación y el diseño de páginas en línea, así como la creación de contenidos; sin embargo, usualmente se usa para la elaboración de sitios web. XML y HTML son los lenguajes de programación por excelencia que los diseñadores web prefieren usar (Rockcontent, 2022).

Figura 3. Partes de maquetación y diseño web. Fuente: Autoría propia.

2.4.3 Registro de un nombre de dominio.

a. Asegúrese que el nombre de su dominio se encuentre disponible.

b. Introduzca sus datos personales.

c. Establezca cuánto tiempo desea tener el dominio registrado.

d. Pagar el dominio, habitualmente con tarjeta de crédito (o también por una transferencia bancaria).

Figura 4. Ejemplos de dominios. Fuente: Autoría propia.

2.4.4 Buscar hosting para alojamiento de sitio.

El hosting permite almacenar la información, diseñado en la página web, por ejemplo: textos, imágenes, base de datos, etc. De esta manera las personas pueden acceder en todo momento.

El almacenamiento puede ser de forma gratuita, pero se debe tener en cuenta que puede ocasionar distintos riesgos, porque brindan espacio y ancho de banda con límites, la información puede ser vulnerada.

Los usuarios deciden contratar el servicio de almacenamiento de paga, ya que brindan más opciones en recursos, alojamiento, más cantidad de conexiones y copias de seguridad lo cual no permiten el acceso en un hosting gratuito.

Tabla 1.

Tipos de Hosting

Free Hosting Ad-free Disk Space Bandwidth

Hostinger * √ 30GB 100GB

Weebly √ 500MB Desconocido

Wix X 500MB 500MB

20i √ 10GB 250MB

Web host (Elegido) √ 1GB 10GB

5GB gratis √ 5GB 20GB

Espacio de premios √ 1GB 5GB

Por el momento √ 5GB Ilimitada

Sueñonix √ 1GB 1GB

Freehostia √ 250MB 6GB

FreeHosting.com √ 10GB Ilimitada

FreeHostingEU √ 200MB 4GB

Freehostingnoads.net √ 1GB 5GB

Servidores virtuales gratuitos √ 100MB 200MB

Freewebhostingarea X 1.5GB Ilimitada

InstaFree √ 10GB 100GB

Nota: Se implementó el sistema en000Webhost para la I.E. Jesús de Nazaret. Fuente: Autoría propia.

2.4.5 Etapas del diseño y desarrollo de sitio.

a. Recolección de datos. Se obtiene toda la información necesaria como, por ejemplo:

docentes, estudiantes, pagos, a quien va dirigido, tipo de temática, funciones necesarias para los usuarios.

b. Planificación. Se clasifica la información, para asignar los títulos y secciones adecuadamente, considerando el lenguaje de programación y actualizaciones pertinentes.

c. Diseño cosmético, empresarial y operativo. Se utilizan diversas plantillas, herramientas, para obtener el diseño acorde a las expectativas.

d. Elaboración e incorporación de tecnologías web. Permite agregar formularios, subir y descargar archivos, inscribirse a cursos, etc.

e. Simulacro y publicación del sitio web. Se prueba y explora los contenidos para descartar errores y corregirlos.

f. Mantenimiento y actualizaciones. Permite insertar y renovar información, para una interacción actualizada.

g. Reflexiones. Se debe ofrecer opciones estratégicamente para las necesidades del sitio web.

2.4.6 Publicación y mantenimiento del sitio.

El mantenimiento web tiene como objetivo que el sitio web ofrezca una imagen totalmente profesional: libre de fallas, modernizada y con las últimas actualizaciones. Las labores de mantenimiento web más frecuentes son: arreglar fallos y defectos que puedan originarse en la web o servidor de alojamiento (Xplora, 2022).

2.5 Herramientas para generar páginas web

 Github. Es una plataforma con la cual se pueden revisar, analizar y configurar los códigos de aplicaciones web.

 WordPress. Permite diseñar, personalizar y mostrar su interfaz; por ejemplo: página web, boletines digitales, aplicaciones, etc.

 Chrome DevTools. Son herramientas utilizadas para desarrollar páginas web de forma integrada utilizando Google Chrome, estas herramientas permiten supervisar los

códigos HTML.

 Balsamiq. Facilita la creación de bocetos.

 Angular JS. Los programadores pueden interactuar en diversos proyectos, permitiendo analizar el código y comprenderlo.

2.6 Herramientas de diseño Web

Herramientas de diseño de sitios web y blogs.

 Google Fonts. Ofrece diversidad de tipos (librerías) de letras, para un mejor diseño, y de esa manera sea óptima la lectura.

Figura 5. Tipos de letras. Fuente: Recuperado de: https://www.creaxid.com.mx/

 WhatFont. Reconoce los tipos de letras de diversas páginas web, permitiendo tener acceso a utilizar su diseño.

Figura 6. Diseño de diversas letras. Fuente: Recuperado de: https://www.onlineprinters.ie/

 Page Ruler. Es una extensión del navegador Chrome. Se utiliza para medir

exactamente el alto y ancho de la página y a la vez observar la posición exacta de la pantalla.

Figura 7. Extensión Page Ruler. Fuente: Recuperado de https://marketingwebmadrid.es/page-ruler/

 Pixabay: Permite descargar imágenes y videos compartidos online, sin restricciones de autor.

Figura 8. Selección de banco de imágenes. Fuente: Recuperado de https://maquetatulibro.com/

 Canva: Facilita el diseño de logos publicitarios, gigantografías, íconos, etc. Es una aplicación que permite diseñar desde una Pc o celular.

Figura 9. Animaciones de texto en Canva. Fuente: Recuperado de: https://www.canva.com/

 Tinypng: Comprime imágenes para lograr que la página web sea más rápida de cargar, sin perder la calidad de las mismas.

Figura 10. Tinypng. Fuente: Recuperado de: https://apkpure.com/

 Iconfinder. Facilita la búsqueda de íconos en alta calidad.

Figura 11. Iconfinder. Fuente: Recuperado de: https://joscarcastro.net/

Capítulo III.

Páginas web educativas

3.1 Concepto

Se conceptualiza a Páginas web educativas como los distintos sitios WEB que nos proporcionan: información, herramientas y medios relacionados con el aprendizaje y la enseñanza.

Persuadir o inculcar a los estudiantes para que utilicen el ordenador como una herramienta más para obtener información, adquirir conocimientos, comprobar lo ya adquirido o ampliar parcelas de especial interés (Uaeh, 2022).

3.2 Creación de web educativas

Una de las tantas alternativas de la tecnología en el s. XXI es que cualquier persona puede crear su sitio web de forma gratuita. Y si llevamos esto a un ambiente educativo, se transforma en una actividad sumamente llamativa e interesante para los estudiantes, sea que lo trabajen de forma individual o grupal, contando con una infinidad de herramientas de uso intuitivo para la creación de diversos tipos de páginas web como lo son: las páginas de venta, los blogs, páginas educativas, etc.

3.3 Elementos educativos del ciberespacio

El aprendizaje del espacio cibernético tiene como característica una premisa combinada, ya que ha unido los elementos principales de las demás hipótesis para la educación mediante el internet, como lo son el trabajo en conjunto, la pedagogía flexible, animada y proactiva, así también como los nuevos aspectos que son parte de esta

iniciativa. como el progreso y la evolución (Redalyc, 2022).

3.4 Diseño web para las instituciones educativas

Podemos encontrar distintos softwares, herramientas, aplicaciones gratuitas o pagadas, las cuales permiten estructurar el diseño y a la vez se organiza la información según los requerimientos de las instituciones educativas.

Por las circunstancias de la pandemia, las instituciones deciden implementar su página web con información actualizada para que docentes, estudiantes, padres de familia y público, en general, puedan gestionar y obtener conocimiento del servicio que brinda.

Los usuarios podrán acceder desde cualquier dispositivo digital, el cual permite mantenerse informado en todo momento y a la vez gestionar trámites desde cualquier lugar.

La web es en una fabulosa herramienta aliada al servicio de las instituciones educativas: facilita administrar información en tiempo real, la misma que llega de forma instantánea a miles de personas.

3.5 Diseño web para docentes de las instituciones educativas

La web diseñada para los docentes permitirá y concederá la implementación paulatina de una base de datos de materiales, con registros, bibliografía, tutoriales,

infografías y webs de interés para los distintos cursos, lo que servirá para potenciar el aprendizaje del estudiante (Ciberconta, 2022).

Los docentes utilizan herramientas y/o aplicaciones para el desarrollo de la interfaz, que, por ser de acceso sencillo, permite la interacción de docente – estudiante,

contribuyendo en la enseñanza de forma interactiva, por ejemplo:

 Nearpod. Contiene ejercicios y prácticas de diversos temas, mediante preguntas y respuestas.

 Khan Academy. Se encuentran videos interactivos de múltiples cursos, incluye áreas exclusivas para estudiantes de 03 a 06 años de edad.

 Google Classroom. Es una aplicación de Google, donde el docente puede crear cursos y tener comunicación con los estudiantes de modo síncrono y asíncrono, mediante la publicación y programación según fecha y hora de tareas, comunicados e incluso anexar sus evaluaciones, donde los estudiantes podrán visualizar sus notas y asistencias de los cursos.

 ThingLink. Permite desarrollar de forma interactiva imágenes, infografías y videos.

 Zoom. Facilita la conexión remota con los estudiantes y a la vez se puede enviar mensajes, compartir pantalla, chat en línea, etc.

 Drive. Almacena información y puede ser compartido con los estudiantes mediante un enlace, y configurar para que puedan descargar y modificar la información.

3.6 Diseño web para estudiantes

De acuerdo a Sánchez (2004) varias de las páginas que ofrecen materiales educativos, cuentan con esquemas que no están relacionados al organismo educativo regular y son elaborados por expertos en programación y pedagogía. Las páginas

educacionales son un medio para la enseñanza, los creadores de estas páginas son docentes

y estudiantes. Son también una ramificación de la labor desarrollada por y para la

ampliación académica. Los informativos están formados por webs organizacionales y webs de bases de datos académicas (Área, 2003; García de León y Garrido, 2002).

Los estudiantes tienen acceso a información ilimitada, para afianzar sus

aprendizajes, de forma interactiva y didáctica, utilizando diversos recursos, por ejemplo:

 Mindly. Permite a los estudiantes organizar sus contenidos en la creación de mapas conceptuales y/o semánticos, los cuales les permiten estudiar para evaluaciones o explicar diversos temas.

 Busuu. Los estudiantes tienen acceso a comunicarse con docentes que dialogan en diversos idiomas.

 Google docs. Facilita la edición de documentos compartidos en la nube.

 Dropbox. Guarda, gestiona y comparte la información, desde la nube.

 Ilove PDF. Conviertes diversos formatos de texto a pdf.

 Y2meta. Transforma y descarga videos de youtube a distintos formatos.

3.8 Elementos que debe tener un sitio web educativo

Un sitio web escolar es un recurso óptimo para relacionarse con los distintos grupos colectivos. Ella se relaciona con los diversos usuarios, fomentando una conexión estable y de acceso sencillo entre nuestra casa y el colegio.

Los estudiantes, miembros administrativos, docentes y eventuales familias usan esta herramienta para hallar y mostrar información. A continuación, se refiere a diez elementos más relevantes que debe poseer un sitio web escolar para potenciar la divulgación.

 Diseño. La web debe contar con un diseño llamativo, agradable y sencillo de acceder y descifrar y transmitir una sensación de magnificencia que demuestre la mentalidad escolar.

 Actualizado. Percatarse que la página web se examine y renueve esporádicamente. Las modificaciones frecuentes harán que los padres, maestros y estudiantes cuenten con expectativas habitualmente por ver lo que se implementará.

 Datos informativos de contacto. Constatar que los datos principales como: ubicación de la institución educativa, número de teléfono y un email, estén actualizados. La ubicación y el número de teléfono deben ubicarse en el encabezado como en el pie de página.

 Directorio del personal. La página web debe añadir una lista de contactos de email del todo el personal de la institución educativa para incentivar la interrelación entre todos los miembros y los hogares de los estudiantes.

 Calendario. Es primordial poseer un calendario donde se ubique las fechas de las actividades institucionales y otras fechas de interés.

 Páginas por aula. Los docentes deben publicar las áreas con un apartado donde se visualicen las tareas, los materiales, trabajos y las fechas de vencimiento de entregas. Y los proyectos de los estudiantes deben ser mostrados con habitualidad para incentivar un ambiente de paz y para fortalecer la autoestima de los mismos.

 Documentos. Las hojas de permiso, los manuales de los estudiantes, los formularios varios y otros documentos escolares, como la carta de compromiso, se pueden publicar en formato PDF en la página web para reducir y ahorrar tiempo, evitando así la tarea tediosa de imprimir y dárselo al estudiante para que se lo lleve a su hogar.

 Boletín. La página debe brindar boletines actualizados de las áreas o comunicados.

 Filosofía de la educación. Es una pequeña exposición de principios que tiene la institución educativa, que permite a los padres de familia a comprender la visión del colegio, los datos sobre la estrategia de enseñanza y las actividades fuera del currículo, lista de áreas y metas cumplidas de la institución, entre otros; también son de gran ayuda para las personas que desean saber más.

 Oportunidades para la interacción. Es de suma importancia proporcionar vínculos a otras redes sociales de la incitación educativa y páginas web, foros o blogs de debate para brindar otras maneras de divulgación.

Capítulo IV.

Aplicación práctica: página web dinámica con Website X Evolution para la Institución Educativa “Jesús de Nazareth”

La promotora de la Institución Educativa “JESÚS DE NAZARETH” aceptó la propuesta de realizar el diseño y ejecución de la página web dinámica con Website X Evolution, porque mediante sus diversas versiones de actualización permitirá acceder a

diversas plantillas con diseños predefinidos, los cuales en un corto tiempo se podrán agregar como elementos necesarios, mediante sus herramientas. Se desarrollará en código HTML, lo que permitirá ser compatible con diversos navegadores y aptos para PC y celulares. Contiene un wizard, que indica cada procedimiento para el diseño completo y atractivo. Mediante el Incomedia que contiene Website Evolution se podrá diseñar, enlazar y/o insertar álbumes digitales, blogs, etc.

4.1 Selección del proyecto en WebSite x Evolution

En esta ventana se crea y especifica el nombre del proyecto “I.E.P. Jesús de

Nazareth”, para diseñar la página web, teniendo en cuenta que también permite almacenar y modificar en un futuro, con el botón Guardar, el cual se encuentra en la parte superior.

Figura 12. Creación del proyecto "JN". Fuente: Autoría propia

4.2 Ajustes generales

Se ingresa los datos más relevantes, que servirán de forma útil para obtener los parámetros esenciales.

4.2.1 Sección General.

Ingresaremos el título de la página web, (se mostrará en la barra superior del Browser), el nombre del autor quien lo desarrolla, la dirección URL donde se publicará la página culminada, la descripción de las características principales de la web, las palabras claves (separadas por comas para funcionamiento de búsqueda), el idioma (seleccionado según el criterio a desarrollar), el ícono (en el lado izquierdo del URL).

Figura 13. Ingresando datos generales de la I.E. "JN". Fuente: Autoría propia.

4.2.2 Sección Avanzado.

Se utiliza en casos de programar códigos de forma personalizada para el encabezado, introducir herramientas para Google mediante código HTML, enlaza la ubicación en el mapa del sitio y códigos indispensables para la activación de estadísticas del mismo.

Figura 14. Programación personalizada. Fuente: Autoría propia.

4.2.3. Elección del tipo menú.

Se plasma el diseño del menú dentro de la distribución del sitio. Se puede configurar de manera vertical y horizontal.

Figura 15. Opciones de menú. Fuente: Autoría propia.

4.2.4. Elección de la plantilla.

Website Evolution nos ofrece una gama alta de plantillas, que se pueden elegir para definir el diseño; brinda la opción de particularizar insertando textos, imágenes, etc.

Figura 16. Selección de plantillas. Fuente: Autoría propia.

4.2.5. Editor de plantilla.

En esta ventana procederemos a elaborar la parte superior del encabezado y/o pie de página; añadiendo contenido utilizando las herramientas de edición.

Figura 17. Editor de plantilla encabezado. Fuente: Autoría propia.

Figura 18. Editor de pie de página. Fuente: Autoría propia.

4.3 Creación del mapa

Es la articulación de la estructura, donde agregamos niveles y sub niveles, nueva página; también permite eliminar, renombrar, etc.; en la parte superior se ubican los botones de control: cortar, pegar, copiar.

Figura 19. Creación del mapa. Fuente: Autoría propia.

4.4 Diseño de página

En esta sección insertaremos los objetos que se utilizarán para diseñar el contenido y, de forma progresiva, se puede observar la vista previa de los diseños.

Figura 20. Diseño de página. Fuente: Autoría propia.

4.4.1. Objetos utilizados.

 Texto

Figura 21. Textos utilizados. Fuente: Autoría propia.

 Galería de fotos

Figura 22. Configuración de galería de fotos. Fuente: Autoría propia.

 Formularios

Figura 23. Descripción del formulario. Fuente: Autoría propia.

 Programación HTML

Figura 24. Objeto HTML. Fuente: Autoría propia.

 Enlaces insertados

Figura 25. Enlace Facebook insertado. Fuente: Autoría propia.

Figura 26. Enlace de WhatsApp insertado. Fuente: Autoría propia.

4.5. Exportar

Al finalizar el diseño, se procede a elegir la exportación de tres formas en el sitio de Internet, a un disco y optimización de los archivos.

Figura 27. Tipos para exportar el proyecto. Fuente: Autoría propia.

4.6. Hosting Web host

El Hosting Web host es una opción segura que ofrece a los usuarios 1.5 Gb para alojar las páginas Web de forma gratuita, incluye algunas funciones de pago como PHP, MySQL Y cPanel.

Figura 28. Página principal Webhost. Fuente: Recuperado de https://www.000webhost.com/

Figura 29. Configuración del Webhost. Fuente: Recuperado de https://www.000webhost.com/

Figura 30.Dominios, correos y base de datos. Fuente: Recuperado de https://www.000webhost.com/

Conclusiones

Después de investigar sobre la información de la creación de páginas Web dinámicas con el software Website X Evolution y aplicarlo en la Institución Educativa

“JESUS DE NAZARETH”, podemos concluir que:

 Debido a la vertiginosa implementación de herramientas virtuales en pandemia por Covid 19 y por la no presencialidad de los estudiantes en las Instituciones Educativas, es de imperiosa necesidad que las instituciones educativas cuenten con páginas web que permitan mostrar sus bondades y el desarrollo de la enseñanza a los estudiantes;

también, a la interacción de los docentes y padres de familia.

 El software Website X Evolution ofrece plantillas sencillas que facilitan el diseño e implementación de una página web mediante un asistente virtual.

 Con el uso del software Website X Evolution se simplifica la creación de páginas web educativas necesarias en estos tiempos de educación remota para toda institución educativa.

 El software Website X Evolution permite continuar implementando y cómodamente toda la información de interés para la institución educativa donde el público, docentes y estudiantes puedan acceder.

 El software Website X Evolution nos permite potenciarnos de forma global con poco concomimiento de programación sofisticada.

 Al implementarse la página web para la Institución Educativa “JESUS DE

NAZARETH”, se evidencio que se logra mayor eficacia en cuanto a interactividad dinámica, entre la comunidad educativa y público en general.

Recomendaciones

Después de investigar sobre la información de la creación de páginas Web dinámicas con el software Website X Evolution y aplicarlo en la Institución Educativa

“JESUS DE NAZARETH”, podemos ofrecer las siguientes recomendaciones:

 Debido a la vertiginosa implementación de herramientas virtuales en pandemia por Covid 19 y por la no presencialidad de los estudiantes de las Instituciones Educativas

“JESUS NAZARETH”, es de imperiosa necesidad implementar páginas web que permitan mostrar sus bondades y el desarrollo de la enseñanza a los estudiantes;

también la interacción con los docentes y padres de familia.

 El software Website X Evolution ofrece plantillas sencillas que facilitan el diseño e implementación de una página web, las mismas que debemos aprovechar para la implementación de páginas web de las instituciones educativas.

 Debemos utilizar el software Website X Evolution porque simplifica la creación de páginas web educativas, necesarias en estos tiempos de educación remota para toda institución educativa.

 Debemos utilizar el software Website X Evolution porque permite continuar

implementar escaladamente los procesos propios de la institución educativa, donde el público, docentes y estudiantes puedan acceder.

 Debemos utilizar el software Website X Evolution porque nos permite potenciarnos de forma global con poco conocimiento de programación sofisticada.

 Se recomienda implementar páginas web en las instituciones educativas, para lograr una mayor interactividad entre los miembros de la comunicad educativa.

Referencias

Actium digital. (17 de 01 de 2022). Actium digital. Recuperado de

https://www.actiumdigital.es/es/blog/7-caracteristicas-página-web

Aquino, A. (2016) Evolución de la Web. Universidad Católica "Nuestra Señora de la Asunción". Asunción, Paraguay. Recuperado de http://jeuazarru.com/wp- content/uploads/2016/11/Evolucion-de-la-web.pdf

Ciberconta. (17 de 01 de 2022). www.ciberconta.unizar.es. Recuperado de http://www.ciberconta.unizar.es/leccion/frontpage/curso/2.htm Ciberconta. (17 de 01 de 2022). www.ciberconta.unizar.es. Recuperado de

http://www.ciberconta.unizar.es/leccion/webdocente/webdocente.HTM#:~:text=La

%20web%20de%20una%20asignatura,www.ecomur.com).

Concepto definición. (30 de enero de 2021). Concepto definicion. Recuperado de https://conceptodefinicion.de/página-web/

Ecured. (17 de 01 de 2022). www.ecured.cu. Recuperado de

https://www.ecured.cu/Programaci%C3%B3n_Web#:~:text=Permite%20la%20cre aci%C3%B3n%20de%20sitios,peri%C3%B3dicos%20digitales%20o%20tiendas%

20virtuales.

Educaciontrespuntocero. (17 de 01 de 2022). www.educaciontrespuntocero.com.

Recuperado de https://www.educaciontrespuntocero.com/recursos/plataformas- crear-una-pagina-web-gratis-para-clase/

Hubspot. (17 de 01 de 2022). hubspot. Recuperado de

https://blog.hubspot.es/marketing/herramientas-de-diseno-web

Latorre, M. (2018) Historia de las Web, 1.0, 2.0, 3.0 Y 4.0. Universidad Marcelino Champagnat. Lima, Perú. Recuperado de

http://umch.edu.pe/arch/hnomarino/74_Historia%20de%20la%20Web.pdf

Miguel Soler. (17 de 01 de 2022). Gradiweb. Recuperado de

https://www.gradiweb.com/que-es-un-sitio-web-y-su-importancia-en-mi-negocio/

Neubox. (17 de 01 de 2022). neubox. Recuperado de https://neubox.com/blog/programas- para-crear-páginas-web/

Palbin. (17 de 01 de 2022). Palbin. Recuperado de https://www.palbin.com/es/blog/p1027- como-crear-un-boceto-web-o-

wireframe.html#:~:text=Un%20wireframe%20es%20un%20boceto,la%20fase%20 de%20dise%C3%B1o%20web.

Recursostic. (17 de 01 de 2022). www.recursostic.educacion.es. Recuperado de http://recursostic.educacion.es/observatorio/web/es/software/software- educativo/600-la-pagina-web-del-centro-educativo-criterios-de-calidad Redalyc. (17 de 01 de 2022). www.redalyc.org. Recuperado de

https://www.redalyc.org/pdf/4418/441846104005.pdf Rockcontent. (17 de 01 de 2022). rockcontent. Recuperado de

https://rockcontent.com/es/blog/diseno-

web/#:~:text=El%20dise%C3%B1o%20web%20es%20un,lenguajes%20de%20ma rcado%20como%20HTML.&text=Para%20que%20no%20suceda%20con,un%20d ise%C3%B1o%20web%20de%20calidad.

Rockcontent. (17 de 01 de 2022). rockcontent. Recuperado de https://rockcontent.com/es/blog/diseno-

web/#:~:text=%C2%BFQu%C3%A9%20es%20el%20dise%C3%B1o%20web,mar cado%20como%20HTML%20o%20XML.

Tabares, R. (2014) El inicio de la Web: historia y cronología del hipertexto hasta HTML 4.0 (1990-99) Universidad de Salamanca. Salamanca, España. Recuperado de http://revistas.usal.es/index.php/artefactos/article/viewFile/12423/12757

Uaeh. (17 de 01 de 2022). https://www.uaeh.edu.mx. Recuperado de

https://www.uaeh.edu.mx/scige/boletin/actopan/n2/e2.html#:~:text=La%20P%C3

%A1gina%20WEB%20educativa%2C%20se,materiales%20relacionados%20con%

20la%20educaci%C3%B3n.

Uaeh. (17 de 01 de 2022). www.uaeh.edu.mx. Recuperado de https://www.uaeh.edu.mx/scige/boletin/actopan/n2/e2.html

Webhostingsecretrevealed. (17 de 01 de 2022). webhostingsecretrevealed. Recuperado de https://www.webhostingsecretrevealed.net/es/blog/web-hosting-guides/free- hosting-sites/

Websitex5. (17 de 01 de 2022). websitex5. Recuperado de

https://www.websitex5.com/es/#:~:text=%C2%BFQu%C3%A9%20es%20WebSite

%20X5%3F,inmediato%20de%20la%20mejor%20manera.

Wikipedia. (17 de 01 de 2022). wikipedia. Recuperado de https://es.wikipedia.org/wiki/Dise%C3%B1o_web

Xplora. (17 de 01 de 2022). xplora. Recuperado de https://www.xplora.eu/mantenimiento-

pagina- web/#:~:text=El%20mantenimiento%20web%20est%C3%A1n%20orient ado,web%20o%20servidor%20de%20alojamiento.

Apéndices

Apéndice A: Presentación del Software implementado en la Institución Educativa “Jesús de Nazareth” con Website X Evolution

Apéndice A: Presentación del Software implementado en la Institución Educativa “Jesús de Nazareth” con Website X Evolution

Figura A1. Portada de Inicio, contiene la trayectoria de la Institucion Educativa. Fuente: Autoría propia

Figura A2. Observamos a lado derecho, fotos de diversas actividades realizada, al lado izquierdo Misión, Visión y Valores institucionales. Fuente: Autoría propia

Figura A3. Especifica los Nivel de atencion: Inicial, Primaria, Secundaria. Fuente: Autoría propia

Figura A4.Pueden tramitar online matrícula, realizar solicitudes y/o descargar documentos. Fuente: Autoría propia

Figura A5.Están constantemente informados mediante los comunicadicados publicados. Fuente: Autoría propia

Figura A6.Puede enviar sus consultas y/o dudas. Fuente: Autoría propia

Figura A7.Los estudiantes tienen acceso directo a diversas plataformas de su interés. Fuente: Autoría propia

-.-