1

ESPECIALIZACIÓN
EN INFORMÁTICA
EDUCATIVA

FACULTAD DE
EDUCACIÓN
 2

Nombre del programa académico

Especialización en Informática Educativa
Mediaciones Tecnológicas 1

Nombre(s) del (los) estudiante(s)

BRIAN STEVEN JARAMILLO QUINTERO
CÉSAR ANDRÉS FANDIÑO MUÑOZ
CAROL MARITZA GUEVARA BUITRAGO

Nombre de la actividad
Diseñando nuestro sitio web: una experiencia de creatividad e
innovación (Segunda Parte)
Eje 4

Nombre del tutor

RICHARD GIUSSEPPE NOVOA BEJARANO

Diciembre 13 de 2021
 3

1. TABLA DE CONTENIDO

2. introducción..................................................................................................4
3. DISEÑO DE SITIO WEB..............................................................................5
3.1. Fase 1. Análisis de requerimientos para desarrollar el sitio web...........5
 ¿Qué se quiere lograr con el sitio web?....................................................5
 ¿Quiénes serán los usuarios y que encontrarán en el sitio web?.............5
 ¿Cuál es el contenido que se quiere mostrar en el sitio web?..................6
 ¿Qué servicios prestará el sitio web?.......................................................6
 ¿Qué inversión se necesita para realizar el sitio web?.............................7
 ¿De cuánto tiempo se dispone para el desarrollo del sitio web?..............7
3.2. Fase 2. Tipo de arquitectura y tecnología de hardware y software.......7
 Tipo de servidor web se utilizará...............................................................7
 Sistema operativo.....................................................................................8
 Editores para diseño web..........................................................................8
 Lenguajes de programación......................................................................8
 Páginas estáticas o dinámicas..................................................................9
 Navegador.................................................................................................9
 Elementos básicos....................................................................................9
 Ancho de banda de la comunicación del servidor Web con Internet.........9
3.3. Fase 3. Estructura lógica o de navegación del sitio web.....................10
3.4. Fase 4. Estructura física del sitio web.................................................10
3.5. Fase 5. Desarrollar los contenidos del sitio web..................................11
3.6. Fase 6. Realizar el diseño gráfico del sitio web...................................13
3.7. Fase 7. Realizar la programación del sitio web...................................14
3.8. Fase 8. Realizar la prueba del sitio web..............................................15
3.9. Fase 9. Realizar la puesta en marcha del sitio web.............................17
4. conclusiones...............................................................................................18
5. Bibliografía................................................................................................. 19
6. Anexos....................................................................................................... 20
 4

Introducción____________________________________________________________

2. INTRODUCCIÓN

Este trabajo tiene como objetivo evidenciar el proceso de creación y elaboración

de nuestra página web para el aprendizaje y práctica del idioma inglés el cual abarca
diferentes fases de planeación como: el análisis de requerimientos, tipo de arquitectura
y tecnología de hardware y software, estructura lógica o de navegación del sitio web y
estructura física del sitio web. En las fases de creación tenemos: el desarrollo de
contenidos, diseño gráfico, programación, prueba y puesta en marcha de nuestro sitio
web.

A partir de los conocimientos adquiridos a lo largo del curso, hemos podido

entender la importancia de las herramientas tecnológicas en los proceso pedagógicos
actuales y es deber de todos los docentes sacar el mejor provecho de las bondades
que ofrecen los recursos dinámicos para nuestros estudiantes y para personas
externas, en este caso por medio de la creación de una pagina web con contenidos
multimedia interactivos. Debemos hacer un uso práctico de las páginas web según las
necesidades que tengamos en nuestro entorno donde se priorice la motivación y
participación de nuestros estudiantes. (Ferrer, 2005).

A la hora de escribir para el ciberespacio es importante reconocer que la

comunicación es multitemporal y multidireccional y debe poder ser adaptada a
diferentes poblaciones con diferentes horarios por medio de una estructura a través de
enlaces los cuales ofrezcan la posibilidad de navegar en cualquier dirección según las
necesidades del usuario. (Muñoz, 2017)
 5

Desarrollo_____________________________________________________________

3. DISEÑO DE SITIO WEB

url: https://brianjaramillo1994.wixsite.com/my-site

1.1. Fase 1. Análisis de requerimientos para desarrollar el sitio web

 ¿Qué se quiere lograr con el sitio web?

Nuestro sitio web tiene como objetivo ser un medio de apoyo a los estudiantes
del idioma inglés quienes necesiten mejorar su nivel a través de recursos explicativos y
prácticos propios y de otros creadores. También queremos brindar un espacio de
intercambio de opiniones entre los usuarios de la páginas web y los creadores, así
como entre los mismos usuarios. Serviremos de puente entre otras páginas web y los
usuarios al proveer material externo para fortalecer el aprendizaje.

 ¿Quiénes serán los usuarios y que encontrarán en el sitio web?

Los usuarios del sitio web serán estudiantes del idioma inglés de instituciones
educativas de primaria, bachillerato y educación superior, así como público general
interesado en fortalecer sus habilidades en el idioma. Igualmente, la página servirá
para que los docentes de inglés puedan usarla como recurso dentro de sus aulas con
sus estudiantes.

En el sitio web encontrarán una parte informativa acerca de la historia donde se

explicará cuáles fueron los motivos que incitaron en la creación de la página web, los
objetivos que se tienen y la proyección a futuro. Además contaremos con una entrada
para Recursos, con la cual se pretende explicar diferentes temáticas. Aquí se alojarán
videos, presentaciones e imágenes pensado para aquellos internautas que se les
facilite el aprendizaje mediante el uso de dichos materiales visuales. También con el fin
de potenciar la motivación de los usuarios, se tendrá una entrada de Actividades en
donde los usuarios podrán practicar mediante ejercicios, juegos y canciones. Para la
parte colectiva, tendremos un Foro en el cual los usuarios podrán hacer sugerencias de
 6

temas, realizar preguntas, aclarar dudas y compartir opiniones. Finalmente, en la parte

de Contacto, los usuarios podrán hacer sus preguntas y sugerencias de manera
privada a través de un correo electrónico.

 ¿Cuál es el contenido que se quiere mostrar en el sitio web?

En cuanto al contenido, tendremos una variedad de temáticas del inglés

correspondiente al nivel intermedio (B1), ya que es este nivel en donde se requiere
mayor refuerzo y ayuda externa para alcanzar los objetivos comunicativos. La página
ofrecerá recursos explicativos y actividades de práctica.

Recursos

En esta página se encontrarán: videos, presentaciones e imágenes.

Los videos serán sobre temas de pronunciación, gramática, vocabulario, lecturas

y recomendaciones de aprendizaje. Algunos videos se incrustarán en la página y otros
aparecerán como enlace. Todos los videos serán de producción externa.

Las presentaciones abarcarán temas de gramática y vocabulario y serán

externas.

Las imágenes serán acerca de temas de gramática y vocabulario y serán

creación propia.

Actividades

En esta página se encontrarán: ejercicios, juegos y canciones.

Los ejercicios serán enlaces a páginas externas de práctica de gramática,

vocabulario, lecturas y audios.

Los juegos serán creación propia y enlaces externos para la práctica de

gramática y vocabulario.

Las canciones serán enlaces a páginas externas de práctica auditiva.

 ¿Qué servicios prestará el sitio web?

 7

Los servicios que se prestarán serán el acceso gratuito a los contenidos

explicativos y de práctica, así como el derecho a la participación en los foros de
discusión y respuestas por parte de los creadores ante dudas sobre el aprendizaje del
idioma.

 ¿Qué inversión se necesita para realizar el sitio web?

La plataforma seleccionada para crear nuestra página web es Wix, por medio de
dicha plataforma podemos crear nuestro sitio web de manera muy sencilla gracias a
todas las funciones que te ofrece la posibilidad de realizarlo sin pagar por utilizar los
servicios.

 ¿De cuánto tiempo se dispone para el desarrollo del sitio web?

Para el desarrollo del sitio web se dispondrá de aproximadamente 1 mes y

medio de trabajo entre los 3 creadores. Este tiempo contempla la planeación y puesta
en marcha de la página web, la cual contará inicialmente con algunos recursos y
actividades de nivel intermedio y progresivamente se alimentará con más material.

1.2. Fase 2. Tipo de arquitectura y tecnología de hardware y software.

En cuando a software

 Tipo de servidor web se utilizará

Teniendo en cuenta la dimensión de nuestro proyecto y las características

específicas del mismo, encontramos que el tipo de servidor más adecuado a emplear
es el que está configurado para ser desarrollado en la nube como lo ofrece Wix, ya que
aloja el servicio de HTTP, la lógica de negocio, junto con la lógica de datos y los datos.
Este modelo de único servidor facilita el mantenimiento de nuestro sitio al encapsular
toda la lógica del lado del servidor en un solo espacio.

Realizando una comparación entre la gran variedad de empresas que ofrecen

alojamiento y dominios de sitios web actualmente, y que se adaptan a nuestras
 8

necesidades, encontramos que Wix es la que brinda la mayor facilidad a la hora de

mantener nuestra página web, puesto que ofrece diversas clases de plantillas y
funciones con las cuáles podremos crear nuestro sitio web.

 Sistema operativo

Una de las características principales de Wix es que nos ofrece la posibilidad de

crear nuestro sitio web sin tener conocimientos avanzados de programación y no
tenemos la necesidad de interactuar con el sistema operativo sobre el cual funciona la
plataforma, ya que las plantillas y sus funcionalidades ofrecen la posibilidad de tomar
los elementos y adaptarlos a nuestras necesidades sin escribir líneas de código, por tal
motivo no es relevante para los usuarios de Wix el conocer el manejo del sistema
operativo sobre el cual está montada la plataforma. Sin embargo la página se probó
ingresando con el sistema operativo Windows sin ningún inconveniente.

 Editores para diseño web

A la hora de realizar el diseño de nuestra página web, seguimos inclinándonos

hacia el software que surge de iniciativas de código abierto como Gimp, debido a las
funcionalidades y opciones que ofrece que en muchos aspectos iguala o mejora al
software pago.

Este editor de imágenes diseñado para ser utilizado en Linux, Mac os y

Windows, ofrece posibilidades configurables para artistas gráficos, fotógrafos y todo el
interesado en realizar tareas de diseño con diferentes formatos de imágenes que
pueden ser manipuladas y retocadas dependiendo de las necesidades.

En caso de que finalmente ninguna de las opciones anteriores satisfaga nuestras

necesidades podemos utilizar las opciones de edición que nos ofrece la misma
plataforma Wix, lo cual agiliza bastante el trabajo ya que la opciones van integradas.

 Lenguajes de programación

Entre los lenguajes de programación más empleados para el desarrollo de

páginas web encontramos los lenguajes de etiqueta e hipertexto como html y los
 9

encargados de dar estilo a la página como css. También podemos emplear javascript
para realizar páginas dinámicas, y php para realizar el código del lado del servidor.

 Páginas estáticas o dinámicas

Las páginas dinámicas son más atractivas visualmente y por medio de la

interacción que generan se convierten en un elemento didáctico a la hora de transmitir
un mensaje como se menciona en la revista Comunicar, en la que se presentan los
resultados de varias investigaciones donde se evidencian las beneficios de la
interactividad en los procesos pedagógicos. (Aparici & Silva, 2012)

 Navegador

Los navegadores más recomendados son Firefox y Google Chrome, debido a su

extendido uso y opciones de configuración con las que cuenta. Sin embargo la página
estará creada con los estándares que permitan ser accedidos desde cualquier
navegador actualizado.

En cuanto a hardware

Para poder navegar adecuadamente por nuestra página web el usuario debe
contar con:

 Elementos básicos

Según el portal de análisis de tecnología e informática (GOUFORIT.COM) en

cuanto a la configuración básica del equipo de cómputo, este debe contar con mínimo
una pantalla de 14 pulgadas en promedio, un procesador core i5,8 gigabytes de
memoria ram, y disco duro SSD de un terabyte. Adicionalmente debe contar con
parlantes, una cámara web y entrada y salida de audio, ya sean integrados o externos.
(Benito, 2021)

 Ancho de banda de la comunicación del servidor Web con Internet.

Respondiendo a las características de infraestructura de comunicaciones y

acceso a internet por parte de la población en general, donde aún se emplean anchos
de banda de 3 gigabits. Se debe desarrollar una página lo más ligera posible sin
 10

sacrificar su diseño y estructura física. Como ejemplo de lo anterior debemos reducir lo

más posible el tamaño de los videos o las imágenes para facilitar su transmisión en la
red.

1.3. Fase 3. Estructura lógica o de navegación del sitio web

La siguiente estructura de navegación se caracteriza por combinar la jerárquica

junto con la lineal y aprovecha las ventajas de ambas. Podemos navegar por la página
y subpáginas por medio de los diferentes niveles y a su vez como si fuera un libro, es
decir, se puede acceder a la página siguiente o a la anterior.

1.4. Fase 4. Estructura física del sitio web

A continuación, se puede observar la estructura de árbol que se empleará para

el diseño de la página web. Esta fue seleccionada con el fin de facilitar la navegación
de los usuarios una vez ingresen al sitio web dado que la información está organizada
jerárquicamente.
 11

1.5. Fase 5. Desarrollar los contenidos del sitio web

12
 13

1.6. Fase 6. Realizar el diseño gráfico del sitio web

1.7. Fase 7. Realizar la programación del sitio web

 14

ENCABEZADO

1. Logo: dará un toque de profesionalidad a nuestra página y permitirá a los

usuarios identificarla.

2. Menú de navegación: en esta sección se encontrará las páginas internas

donde se alberga; ¿Quiénes somos?, recursos, actividades, foros y contactos.

CUERPO

3 y 4. Imagen y texto complementario: estos serán seleccionados

cuidadosamente de manera que llame la atención del internauta y lo motive a seguir
explorando la página web.

5. Vídeo y texto complementario: con el fin de hacer la página de inicio más

llamativa se incluirá un video relacionado con el aprendizaje del inglés junto con un
texto persuasivo.

6. Imagen y texto complementarios: se integrará un gráfico que evidencie

estadísticas acerca del número de personas que aprenden inglés al año.

PIE

7. Redes sociales: nos permitirá darnos a conocer y compartir información.

 15

1.8. Fase 8. Realizar la prueba del sitio web

 16

1.9. Fase 9. Realizar la puesta en marcha del sitio web

Conclusiones___________________________________________________________
 17

4. CONCLUSIONES

La elaboración de una página web con enfoque educativo plantea diversos retos
para los docentes que estén interesados en incluir dicha herramienta en su práctica
pedagógica.

El primer reto al que nos enfrentamos surgió al momento de decidir el lugar en el

cual hospedaríamos nuestro proyecto, ya que se debió debatir acerca de la opción más
adecuada teniendo en cuenta la gran cantidad de opciones que se ofrecen actualmente
en lo que tiene que ver con la creación de páginas web. Como resultado del proceso de
seleccionar la mejor opción tuvimos la oportunidad de descubrir muchas de las
posibilidades que se ofrecen actualmente para la creación de páginas dinámicas que
sean atractivas, y sobre todo que cumplan la función para la cual fueron creadas.

Siguiendo las indicaciones del trabajo a realizar pudimos reconocer los aspectos
más importantes a tener en cuenta a la hora de elaborar una página web, no solo en lo
relacionado con los elementos técnicos, sino también los relacionados con el contenido
a incluir en la página web.

En lo relacionado con el diseño de la página, tuvimos que explorar teorías

relacionadas con dicho campo, lo cual nos brinda nuevas competencias y habilidades
para el desarrollo de los espacios de aprendizaje.

Para finalizar es importante resaltar las habilidades adquiridas durante el

desarrollo de la actividad ya que nos permiten agilizar y mejorar constantemente en la
creación e implementación de los entornos digitales en los procesos formativos.
 18

Bibliografía_____________________________________________________________

5. BIBLIOGRAFÍA

Aparici, R., & Silva, M. (2012). Pedagogy of Interactivity. Obtenido de

https://doi.org/10.3916/c38-2012-02-05
Benito, I. (2021). 10 características que debería tener un buen ordenador portátil en
2021. Obtenido de Gouforit: https://gouforit.com/10-caracteristicas-que-deberia-
tener-un-ordenador-portatil/
Benito, I. (2021, 20 septiembre). ¿Dónde comprar dominios baratos y registrarlos con
seguridad? Algoentremanos.com. https://algoentremanos.com/cual-es-el-mejor-
sitio-para-comprar-y-registrar-dominios-online/

Como crear un blog en blogger y editarlo |parte 1|. (2013, 18 septiembre). YouTube.
https://www.youtube.com/watch?v=yFlwLO0u0AY&ab_channel=Joalgoba
Weblog o blog -lecturarecomendada – EDUCAR.
Consejos de cómo escribir en la web. (2013, 22 septiembre). YouTube.
https://www.youtube.com/watch?v=1YY0Oypjh_E&ab_channel=JosaCornejo

Estandares y Accesibilidad. (s.f.). Los 5 Principios del Buen Diseño. Obtenido de

Areandina.instructure: https://areandina.instructure.com/courses/20127
Ferrer, R. (2005). Diseño de páginas web en educación. Obtenido de
Areandina.instructure: https://areandina.instructure.com/courses/20127
Hosting Gratuito www.260mb.org. (2012b, noviembre 18). [Vídeo]. YouTube.
https://www.youtube.com/watch?v=VuLckOVOBdQ&ab_channel=jegiraldp

Muñoz, L. (2017). Referente de pensamiento eje 4. Obtenido de Areandina.instructure:

https://areandina.instructure.com/courses/20127
Sas, C. H. (2021). ColombiaHosting: Hosting y Dominios.
https://www.colombiahosting.com.co. https://www.colombiahosting.com.co/?
gclid=EAIaIQobChMI17Tsqan52wIVTAOGCh0aGwskEAAYASAAEgKIX_D_BwE
 19

6. ANEXOS
20