Vous êtes sur la page 1sur 50

UNIVERSIDAD DE PANAM

CENTRO REGIONAL UNIVERSITARIO DE COCL


FACULTAD DE INFORMTICA, ELECTRNICA Y COMUNICACIN
LICENCIATURA EN INFORMTICA PARA LA GESTIN EDUCATIVA
Y EMPRESARIAL

PROTOTIPO DE SITIO WEB PARA EL APRENDIZAJE VIRTUAL


MEDIANTE CONTENIDO MULTIMEDIA UTILIZANDO
TECNOLOGAS DE DESARROLLO WEB AVANZADAS

TRABAJO DE GRADUACIN
PARA OPTAR POR EL TTULO
DE
LICENCIADO
EN
INFORMTICA
PARA
LA
GESTIN
EDUCATIVA
Y
EMPRESARIAL

Por:
Leonardo Jos Snchez Coronado
Cdula: 8-853-2397

PENONOM
AGOSTO 2015

Corregir la portada

Dedicatoria
Dedico este proyecto de monografa a Dios, a mis padres y a mi prometida.
A Dios, mi principal gua e inspiracin diaria, quien ha caminado junto a m a lo largo
de este trayecto y me ha concedido el privilegio de llegar a cumplir este anhelo, por darme la
fuerza necesaria para superar momentos difciles dentro de mi etapa estudiantil y en mi vida.
A mis queridos padres Arsenia Coronado y Luis Snchez, quienes siempre han luchado
por sacarme adelante y soaron con el da en el que yo sea un profesional. Inculcndome
desde nio que el estudio y el trabajo es lo principal para progresar en la vida. Gracias a ellos,
al sacrificio diario que hicieron por m y el apoyo brindado he llegado a estas instancias y a
obtener este logro.
A m amada prometida Patricia Lasso, que desde que llego a mi vida siempre ha estado
a mi lado en las buenas y en las malas; me ha brindado su apoyo, comprensin, paciencia y
amor, dndome nimos de fuerza y valor para seguir adelante sin importar los obstculos.

NDICE GENERAL
ndice de figuras
Introduccin..
Captulo I. Aspectos Generales..
1.1. Estado del problema
1.2. Objetivos.
1.2.1. Objetivo General...
1.2.2. Objetivos Especficos
1.3. Tipo de Investigacin..
1.4. Delimitacin
1.5. Restricciones o Limitaciones..
1.6. Justificacin
1.6.1. Importancia..
1.6.2. Aporte..
Captulo II. Marco Institucional..
2.1. Antecedentes del Centro Educativo Berta Elida Fernndez.
2.1.1. Visin...
2.1.2. Misin..
2.2. Aspectos Generales
Captulo III. Marco Terico.........................................................................................
3.1. Antecedentes..
3.2. Qu es un sitio web?.........................................................................................
3.3. Tipos de Sitios Web
3.4. Importancia de un Sitio Web..
3.5. Elementos de un Sitio Web
3.5.1. Otros elementos
3.6. Etapas o pasos para la creacin de un Sitio Web...
3.7. Descripcin del Prototipo de Sitio Web Educativo a desarrollarse...
3.7.1. Pasos para la elaboracin del Prototipo de Sitio Web Educativo...
3.7.2. Acerca de Wix.
3.7.3. Instrucciones para crear un sitio web con Wix....
3.7.4. Tipo de navegacin para el Prototipo de Sitio Web Educativo...
3.7.5. Tcnicas de recoleccin de la informacin..
Captulo IV. Resultado de la Investigacin.
4.1. Representacin grfica de los resultados de la encuesta realizada a los estudiantes

iv
1
3
3
3
3
4
4
4
4
5
5
5
6
6
6
6
7
8
8
9
10
11
12
13
13
17
18
18
20
26
27
28
del

Centro Educativo Berta Elida Fernndez


28
4.2. Representacin grfica de los resultados de la encuesta realizada a los docentes del
Centro Educativo Berta Elida Fernndez
4.3. Interfaces no funcionales del Prototipo de Sitio Web Educativo...
Recomendaciones.
Conclusiones.
Bibliografa
Anexos..

31
35
38
39
40
41

NDICE DE FIGURAS
Figura 1. Centro Educativo Berta Elida Fernndez.
Figura 2. Etapa 1: Recopilacin y aprendizaje.
Figura 3. Etapa 2: Planificacin
Figura 4. Etapa 3: Diseo.
Figura 5. Etapa 4: Desarrollo
Figura 6. Etapa 5: Pruebas y lanzamiento.
Figura 7. Etapa 6: Mantenimiento.
Figura 8. Aplicacin Wix..
Figura 9. Navegacin Lineal.

7
14
14
15
16
16
17
18
27

INTRODUCCIN
En el mundo actual se han venido desarrollando mltiples y diversas tecnologas a las
que han llamado Nuevas Tecnologas de Informacin y Comunicacin (NTIC), que se basan
principalmente en un conjunto de medios que producen, almacenan, transmiten y transforman
informacin, y que permiten la ejecucin de diversas aplicaciones que logran una mayor y
mejor comunicacin entre las personas.
Estas tecnologas en los ltimos aos se han convertido en exigencias de la sociedad
post moderna, y se han insertado en diversos contextos como comercios, empresas,
organizaciones, entretenimiento, ciencia y educacin.
Autores como Sandoval (1999), han relacionado esta revolucin de tecnologas,
especialmente Internet con el trmino de Evolucin, constituyendo un cambio de paradigmas
donde existe un vuelco y se inicia con una hoja en blanco todos los procesos, haciendo una
transformacin radical del significado de las reglas prevalecientes hasta los momentos.
Dentro del contexto educativo, las tecnologas se han ido incorporando de manera que
sean un soporte a las planificaciones y objetivos acadmicos y organizacionales de la
institucin. Por ello, es importante que Instituciones Educativas de calidad y que pretendan
mantener un excelente servicio y efectivos resultados con la comunidad en la que se
desarrolla, cuente con medios que se sumen a sus Fortalezas.
Con respecto a los medios y canales de comunicacin dentro de las organizaciones, es
imposible prescindir de la comunicacin en una organizacin. Por lo que se considera
necesario contar y estructurar un sistema comunicacional que permita una fluida, precisa y
clara informacin, debido que de esta forma se contribuye al logro de las metas institucionales
y por consiguiente al xito de la misma.
En este sentido, el principal objetivo de esta investigacin es disear un prototipo de
sitio web que permita el acceso a contenido multimedia educativo de calidad y comprensible,
para apoyar el aprendizaje de los estudiantes del Centro Educativo Berta Elida Fernndez
utilizando tecnologas de desarrollo web avanzadas.

Para lograr lo anteriormente expuesto, se disear un instrumento de recoleccin de


datos que pueda recabar la informacin necesaria dentro de una muestra, para detectar las
caractersticas que deber tener el diseo web, y una vez analizado los resultados, se proceder
a realizar el prototipo adecuado a la Institucin.
La investigacin posee cuatro captulos, en el Captulo I, se expondr brevemente el
problema, su justificacin, el tipo de investigacin, su delimitacin, restricciones o
limitaciones y el objetivo general y los especficos.
En este mismo orden, en el Captulo II, se presentar el marco institucional con los
antecedentes, visin, misin y aspectos generales del Centro Educativo Berta Elida Fernndez.
En el Captulo III, se expondrn las bases tericas seleccionadas para apoyar la
investigacin, en especial la relacionada con tecnologa y sitios web, as como los
antecedentes empricos de otras investigaciones sobre este tema y tambin se explicar la
metodologa utilizada para realizar la investigacin, la poblacin y muestra seleccionada, el
procedimiento realizado y los instrumentos de recoleccin de datos utilizados.
En el Captulo IV, se expondrn y analizarn los resultados arrojados por los
instrumentos y se describirn las conclusiones de la investigacin, adems, se presentarn las
interfaces no funcionales del prototipo de sitio web.

Captulo I
Aspectos Generales

1.1. Estado del problema


Durante los ltimos aos se han fortalecido los modelos de enseanza y de formacin
continua que antes slo eran posibles en escala reducida y con costos muy altos. Desde ese
entonces el crecimiento exponencial de las tecnologas de informacin no slo ha masificado
su uso, sino adems han producido cambios paradigmticos en las prcticas educativas. La
evolucin desde entonces ha sido favorable hasta nuestros das, donde es posible encontrar
herramientas multimedia enfocadas especficamente en el Proyecto Educativo de cada
institucin. Sin embargo en el Centro Educativo Berta Elida Fernndez de Bejuco no cuentan
con un Proyecto Educativo que incluya las nuevas herramientas tecnolgicas que ayuden a
brindar una educacin de calidad y a mejorar el proceso de enseanza-aprendizaje del docente
hacia sus alumnos. En dicha Institucin cuentan con un Laboratorio de Informtica pero no es
aprovechado al mximo para brindar el apoyo necesario que facilite el aprendizaje en los
estudiantes.
Sera de gran ayuda proporcionarles a los estudiantes una herramienta que les permita
generar mejores conocimientos, con el fin de complementar su educacin. Por ello se pretende
el diseo de un prototipo de sitio educativo bajo el paradigma web, el cual permita el acceso a
recursos multimedia que apoyen el proceso de aprendizaje de los estudiantes.
1.2. Objetivos
1.2.1. Objetivo General
Disear un prototipo de sitio web que permita el acceso a contenido
multimedia educativo de calidad y comprensible, para apoyar el aprendizaje
de los estudiantes del Centro Educativo Berta Elida Fernndez utilizando
tecnologas de desarrollo web avanzadas.

1.2.2. Objetivos Especficos


Establecer los requisitos del sitio mediante la realizacin de encuestas, sobre
una muestra de la poblacin estudiantil y sobre un grupo de docentes

pertenecientes a la Escuela.
Plantear la estructura base del sitio utilizando tecnologas de desarrollo web
avanzadas con la informacin obtenida en las encuestas.
4

Crear un prototipo del sitio web mediante herramientas de programacin


gratuitas basndose en los requisitos obtenidos.

1.3. Tipo de Investigacin


Es una investigacin tecnolgica aplicada, puesto que se pretende disear un
prototipo de sitio web Educativo, que contribuya a mejorar el proceso de enseanzaaprendizaje, con el fin de hacerlo ms eficiente.
Este tipo de investigacin es emprendida para adquirir nuevos conocimientos, est
orientada a conseguir un logro especfico prctico en particular.
Mediante la aplicacin de la investigacin aplicada, se abren las posibilidades de
crear nuevas ideas cientficas que hagan aportes significativos.
1.4. Delimitacin
El tema de esta investigacin se delimitara al diseo de un prototipo de sitio web
que permita el acceso a contenido multimedia educativo de calidad y comprensible, para
apoyar el aprendizaje de los estudiantes del Centro Educativo Berta Elida Fernndez
utilizando tecnologas de desarrollo web avanzadas.
El contenido del prototipo del sitio web a disearse estar enfocado en la materia
de informtica; ya que dicha Institucin presenta una deficiencia en esta rea.
1.5. Restricciones o Limitaciones
Entre las restricciones o limitaciones encontradas para la realizacin del presente
proyecto, se puede mencionar el hecho de que el diseo y desarrollo del prototipo del Sitio
Web Educativo es trabajo de un equipo multidisciplinario, donde intervienen diseadores
(de contenidos grficos), programadores y pedagogos; sin embargo, en este proyecto todo
el trabajo recae sobre una sola persona, lo que constituye la realizacin de actividades
paralelas.
Otro aspecto que influye en gran medida es el tiempo, debido a que no se cuenta
con suficientes espacios disponibles para la realizacin del mismo.
1.6. Justificacin
1.6.1. Importancia
5

El desarrollo de este Sitio Web se puede convertir en un beneficio para la


Institucin Educativa, si se planifica y se disea basndose en las necesidades que
presenta.
Las nuevas tecnologas de informacin y comunicacin traen grandes
beneficios a la educacin, es as como un Sitio Web que se incluye dentro de esta gama
de tecnologas, se puede disear para una Institucin Educativa aumentando la
comunicacin entre los docentes y los estudiantes, como tambin facilitando su
aprendizaje.
1.6.2. Aporte
El desarrollo del prototipo de este Sitio Web permitir:

Proveer a la Institucin de una herramienta virtual que permita mejorar el nivel

de enseanza-aprendizaje en la comunidad educativa.


Beneficiar directamente a la comunidad educativa, ya que a travs de l podrn

desarrollar conocimientos, fortalecer habilidades y destrezas.


Tambin permitir a los docentes el perfeccionamiento de los procesos de
formacin pedaggica.

Captulo II
Marco Institucional

2.1. Antecedentes del Centro Educativo Berta Elida Fernndez


A iniciativa de un grupo de moradores de la comunidad se construy una casa que
contaba con un amplio saln y una pequea habitacin para el maestro que dictaba las clases.
El primer Maestro fue Calixto Vsquez. En esa escuela haba un reducido grupo de
nios/as, pero funcionaban todos los grados de primero a sexto. Debido a que la poblacin fue
6

creciendo y en la administracin del Doctor Belisario Porras se construy un edificio de cuatro


aulas ms, adems se usaba la casa anterior.
En la actualidad el Centro Educativo Berta Elida Fernndez ha cumplido
orgullosamente, como comunidad educativa, ms de 101 aos de existencia. Homenajeando a
toda una comunidad por su trayectoria educativa.

2.1.1. Visin
"Ser un centro educativo comprometido con la comunidad trabajando en equipo
de manera eficaz y eficiente, logrando as la vivencia de los valores y la actualizacin
constante que vayan acordes con los avances tecnolgicos cientficos para brindar un
servicio educativo, que nos permita mejorar el perfil de la educacin en todo su
contexto".
2.1.2. Misin
Brindar una educacin de calidad a la comunidad entre los 4 y 14 aos de
edad, bajo los ms altos estndares pedaggicos, cientficos, tecnolgicos y humanos;
fortaleciendo el trabajo en equipo entre directivos, docentes, discentes y comunidad
educativa en general, manteniendo un ambiente de armona, comprometindonos
profesionalmente y promoviendo en el discente o la discente un desarrollo competitivo
para la vida y la vivencia de los Valores Universales".
2.2. Aspectos Generales

NOMBRE LEGAL: Centro Educativo Berta Elida Fernndez


NOMBRE USUAL: Centro Educativo Berta Elida Fernndez
REGIN ESCOLAR: Panam Oeste
ZONA ESCOLAR No: 8
CATEGORA: Primario
JORNADA: Matutina - Vespertina
CORREGIMIENTO: Bejuco
DISTRITO: Chame
DOCENTES: 38
ESTUDIANTES: 630
7

ADMINISTRATIVOS: 5
TRABAJADORES MANUALES: 4

Figura 1. Centro Educativo Berta Elida Fernndez

Captulo III
Marco Terico

3.1. Antecedentes
En un principio las pginas web eran slo texto, pero a medida que ha evolucionado la
tecnologa, tanto los ordenadores como las redes de telecomunicaciones, se ha generado
nuevas formas de desarrollar la web.
La inclusin de imgenes fue la evolucin ms significativa, pero tambin debemos
mencionar el video y la animacin, o los espacios 3D, lo que aporta valores estilsticos, de
diseo y de interactividad jams imaginados antes.

El diseo de pginas web se ha desarrollado a medida que ha evolucionado Internet. En


1992 slo haba alrededor de 50 sitios web. Las ltimas estadsticas nos confirmaban que
actualmente rondan los 8.000 millones de sitios web, a los que diariamente se les suma a raz
de 4,400 por da.
Datos recientes estiman que hay alrededor de 2 mil millones de pginas colgadas y se
espera que en los prximos aos llegue a los 8 mil millones, excediendo el nmero de
habitantes del planeta. Sin embargo, slo una fraccin de este nmero es visitado
habitualmente por la mayora de los usuarios (slo alrededor de 15.000 sitios webs, el 0,4%
del total).
A partir de estos datos se puede entender la necesidad de concentrar los esfuerzos para
atraer y mantener la atencin de los usuarios. Junto con un desarrollo efectivo de la estructura
web y del contenido, el diseo y el uso del color son la llave para atraer y ser identificado,
formando vnculos en el subconsciente del usuario y generar esquemas para captar y fidelizar
a nuevos visitantes.
Al mismo tiempo que la evolucin de los aparatos y de su introduccin en los hogares,
tambin ha aumentado la calidad de las transmisiones a travs internet y ha bajado su precio. A
medida que la tecnologa ha solventado estas dificultades, ya no nos encontramos con
problemas de forma sino de contenido.
3.2. Qu es un sitio web?
Un sitio web, es un espacio virtual en Internet. Se trata de un conjunto de pginas web
que son accesibles desde un mismo dominio o subdominio de la World Wide Web (WWW).
Es importante establecer que en Internet encontramos una gran variedad de tipos de
sitios web que suelen diferenciarse fundamentalmente por la clase de contenido que ofrecen o
por el servicio que brindan a cualquiera de las personas que se encuentran navegando por la
Red.
As, por ejemplo, tendramos que destacar los conocidos blogs. Se tratan de una
especie de bitcora en la que una persona en particular realiza post relativos a sus gustos, a sus
aficiones o a sus conocimientos en una relativa manera. De la misma manera, estn aquellos
que son utilizados simplemente para contar, en forma de diario, lo que les sucede da a da.
9

Para poder crear a aquellos existen diversos tipos de plataformas gratuitas tales como Blogger
o WordPress.
De la misma forma, tampoco podemos pasar por alto la existencia de los sitios web de
empresas. Como su propio nombre indica, son aquellos lugares en la Red que son utilizados
por negocios de diversa ndole para dar a conocer sus productos o sus servicios. No obstante,
tambin los emplean para aumentar su cartera de clientes y para mantener una relacin ms
directa con sus clientes.
Los sitios personales son, por su parte, aquellos que mantienen los individuos en
distintas plataformas y que utilizan para mostrar informacin sobre s mismos, ya sea a nivel
escrito o bien mediante fotografas. Ejemplos de ellos son los sitios que tienen muchos
usuarios en redes sociales tales como Facebook, Tuenti o Twitter.
Los sitios de subastas, los sitios de noticias o los sitios de descargas son otros de los
tipos ms conocidos.
Los sitios web incluyen documentos HTML, fotografas, sonidos, vdeos, animaciones
Flash y otro tipo de contenidos que pueden compartirse en lnea. La URL raz del sitio web se
conoce como portada o homepage. Lo ms habitual es que esta portada facilite el acceso a
todas las pginas del sitio mediante hipervnculos (tambin conocidos como enlaces o links).
La mayor parte de los sitios web ofrecen sus contenidos de manera gratuita. Otros, en
cambio, cobran una suscripcin y exigen una contrasea para su acceso. Ese es el caso de
muchos sitios de informacin burstil o de juegos online, entre otros servicios.
Cabe destacar que para acceder a un sitio web se necesita contar con un navegador en
la computadora. Este es un programa informtico que posibilita la visualizacin de la
informacin contenida en una pgina web.
3.3. Tipos de Sitios Web
Algunos tipos de sitios web son:

Blog: en estos sitios se introducen lecturas, diarios online o comentarios del autor.
Adems incluyen foros en los que los lectores pueden intercambiar opiniones.
10

Para el comercio electrnico: estos permiten a sus usuarios comprar y vender

cualquier tipo de productos.


De descargas: por medio de estos sitios, los usuarios pueden subir y bajar contenido

electrnico como msica, pelculas, videojuegos, fondos de pantallas, etctera.


De desarrollo: en estos sitios se introduce informacin vinculada con los desarrollos

en diseo, web, software y todo lo que tenga que ver con el mbito de la informtica.
Institucionales: estos sitios son confeccionados por alguna entidad, con o sin fines de
lucro, para darse a conocer, poner informacin propia y funcionan como un medio de
contacto para sus clientes o miembros. Adems, en caso de que sea una empresa, sirve

para promocionar sus bienes y servicios.


De comunidad virtual: por medio de estos sitios, personas que poseen los mismos

intereses e inquietudes pueden ponerse en contacto por medio de foros o chat.


Directorio: en estos se introduce informacin de diversas temticas y se la organiza en

distintas categoras.
De informacin: como su nombre indica, los contenidos de estos sitios buscan
informar a quienes lo visitan pero esto necesariamente no se hace con fines

econmicos. Muchas veces son de organizaciones educativas o pertenecen al gobierno.


Web 2.0: en estos sitios se utilizan las ltimas tecnologas y son sus usuarios los

encargados de mantenerla actualizada.


Personal: estos sitios son administrados por una o muy pocas personas y contienen

material sobre cualquier temtica.


Wiki: en estos sitios, son los usuarios los que suben y editan los contenidos.
Educativo: estos sitios ofrecen cursos a distancia o presenciales, ofrecen informacin
y contenidos descargables sobre distintas asignaturas y pueden estar orientados tanto a

profesores como a alumnos.


Portal: este sitio funciona como punto de inicio para acceder a una intranet o cualquier

otro recurso de Internet.


De subasta: en este los usuarios registrados pueden subastar todo tipo de productos y

servicios.
Spam: estos sitios no contienen valor relevante y lo que buscan es engaar a los
motores de bsqueda para que los usuarios ingresen en ellas y as sus administradores
pueden obtener beneficios econmicos gracias a la publicidad inserta.

3.4. Importancia de un Sitio Web

11

En la actualidad contar con un sitio web es de suma importancia, independientemente


del objetivo del sitio, cada minuto que pasa nuestra sociedad est actualizando informacin de
lo que sucede en diferentes lugares del mundo, y en este siglo XXI es de vital importancia
estar informado de todos los acontecimientos del mismo.
Los sitios web son importantes hoy en da para toda clase de funcin, por ejemplo
refirindose propiamente al mbito empresarial o profesional, algunos beneficios importantes
que hay que tener en cuenta a la hora de adquirir un sitio, pueden ser:

Un sitio web es la tarjeta de presentacin de todo el que se dedique a alguna actividad

comercial o profesional.
El sitio web puede ser el mejor vendedor.
El sitio web podr ser visto por millones de usuarios en el mundo, las 24 horas, los 365

das del ao.


El costo de mantener un sitio web en internet es muy bajo, en comparacin con otros

medios publicitarios.
Un sitio web, da a la empresa una imagen de calidad y constante progreso.
Un sitio web da igualdad de condiciones para competir con otras empresas y/o
profesionales.

3.5. Elementos de un Sitio Web


Cualquier sitio web constar principalmente de los siguientes elementos:

El texto: Es el elemento ms significativo de cualquier sitio web porque los usuarios

navegan por la web fundamentalmente en busca de informacin expresada en texto.


Imgenes: Aunque no se debe abusar de las imgenes por el riesgo de aumentar el
peso de la pgina, y por lo tanto, los tiempos de descarga, las imgenes constituyen un
elemento esencial para ofrecer informacin visual del contenido y mostrar un diseo

atractivo y personal.
Espacio Web: Para que el sitio web sea visible ante todos es necesario colocarlo en un

servidor.
Un nombre de dominio: Es la primera parte de una direccin web que identifica al

servidor que almacena el sitio.


Hipervnculos: Por s misma, una pgina web no puede hacer mucho. La magia de
verdad comienza cuando se relacionan varias pginas mediante enlaces.
12

Video: Mientras Internet es cada vez ms asequible, confiable y veloz, los programas
de edicin de video se hacen ms cercanos a los usuarios.
Ahora es ms fcil realizar un video desde una cmara digital o un telfono mvil con
cmara incorporada y que se termine subiendo a la web para ponerlo al alcance de

todos.
Animaciones en Flash: Es una imagen animada, fcil de crear y sobre todo que ocupa
poca memoria. Tiene diferentes usos, desde la creacin de dibujos animados hasta el

despliegue de dibujos interactivos.


Sonidos: Un elemento cada vez ms importante. La comercializacin de nuevos
dispositivos digitales mviles como el iPhone ha potencializado este elemento.
Adems de incorporar sonido a las pginas web puede descargar de ellas archivos de

audio para sus dispositivos mviles.


El formato MP3 es el ms conocido y ms usado por su calidad y nivel de compresin.
El e-mail o correo electrnico: Que ser la va gratuita de contacto de los visitantes
del sitio web. Este elemento, dado su carcter gratuito y su versatilidad para poder
transmitir todo tipo de documentacin a cualquier parte del mundo se presenta como el
sustituto del fax, y en determinados casos tambin del telfono, al menos como
sustituto de los sms.
Estos son los principales elementos que constituirn cualquier sitio web. A partir de

aqu, existe todo un sin fin de productos y servicios que irn a cubrir las necesidades ms
especficas.
3.5.1. Otros elementos
Otros elementos bastante comunes son:

Banner: Una imagen fija o animada utilizada generalmente para publicidad.


Marcos: Tambin llamados frames, son una especie de recuadro independiente
en el que se puede cargar una pgina web.
De esta forma es posible dividir una pgina web en diferentes partes o
ventanas, cada una con sus propios bordes y barras de desplazamiento,
cargando dentro de cada una de ellas una pgina web externa independiente.
Actualmente se pueden obtener los mismos resultados con CSS.

3.6. Etapas o pasos para la creacin de un Sitio Web

13

A pesar de la impresin de sencillez que se pueda apreciar en una pantalla, crear un


buen sitio web comparte los mismos requisitos que construir un rascacielos. Para tener
xito, ambos proyectos necesitan una buena arquitectura.
Como cualquier estructura fsica que debe construirse de cero, la creacin de un
sitio web tambin necesita un plano. Y ese plano o esquema consta de seis etapas.
A. Etapa 1: Recopilacin y aprendizaje
La primera etapa en la creacin de un sitio web consiste en recopilar la mayor
cantidad de informacin posible para conocer lo que se quiere (y lo que no se quiere)
para el sitio. Se puede recopilar esta informacin observando los sitios que usan
actualmente, los comentarios de los amigos y colegas.

Figura 2. Etapa 1: Recopilacin y aprendizaje

B. Etapa 2: Planificacin
La informacin recopilada en la etapa 1 nos ayudar enormemente a la hora de
planificar el sitio. Ahora se deben llevar a cabo las siguientes tareas:

Creacin del mapa del sitio.


Decisin sobre las tecnologas requeridas.
Determinacin de las resoluciones compatibles.
Creacin de bocetos.
Planificacin del contenido.

14

Figura 3. Etapa 2: Planificacin

C. Etapa 3: Diseo
Si ya se definieron todos los temas vistos en las etapas 1 y 2, el diseo de la
pgina de inicio y de las subpginas posteriores ser sencillo.
Ver el diseo de las pginas con contenidos y fotografas reales, su logotipo y el
esquema de colores elegido, le darn vida a la visin para el sitio. Hay que provechar
esta etapa para hacer los cambios necesarios, porque hacer cambios ms adelante
resulta costoso y difcil de implementar, por lo que se debe aprovechar con inteligencia
esta etapa.

15

Figura 4. Etapa 3: Diseo

D. Etapa 4: Desarrollo
Una vez que el diseo est finalizado y aprobado es posible crear el sitio web.
Se tomarn todos los elementos grficos del prototipo y se utilizarn para crear un sitio
funcional. Tambin se implementarn en esta etapa los elementos interactivos, como
por ejemplo los formularios de contacto, las animaciones flash, etc.
En este momento es posible hacer cambios y arreglos menores.

Figura 5. Etapa 4: Desarrollo

E. Etapa 5: Pruebas y lanzamiento


En esta etapa se pondr a prueba el sitio web, verificando desde su correcta operacin
hasta posibles problemas de compatibilidad. Adems, se verificar que todo el cdigo
del sitio web sea vlido, cumpliendo con los estndares web actuales.
Una vez aprobado definitivamente, se cargarn los archivos del sitio web al servidor.

Figura 6. Etapa 5: Pruebas y lanzamiento

16

F. Etapa 6: Mantenimiento
En esta etapa el sitio Web es controlado y est en constante mantenimiento para
posibles mejoras. Se procura obtener informes sobre el rendimiento, para asegurar que
el sitio Web sea un xito.
Uno de los elementos del plan de mantenimiento debe ser la evaluacin
peridica del sitio, esta evaluacin podra dar lugar a una decisin de mejora o
reconstruccin total de la misma. Una correcta evaluacin puede dar lugar a la
consolidacin de los contenidos y por ende del sitio.

Figura 7. Etapa 6: Mantenimiento

3.7. Descripcin del Prototipo de Sitio Web Educativo a desarrollarse


En base al objetivo principal de esta investigacin el cual es disear un prototipo de
sitio web que permita el acceso ha contenido multimedia educativo de calidad y
comprensible, para apoyar el aprendizaje de los estudiantes del Centro Educativo Berta
Elida Fernndez; se expone en este espacio las lneas bsicas para la estructuracin de un
sitio web utilizando las herramientas destinadas para su diseo y organizacin.
Orientando la investigacin a dicho logro, se aprecian las afirmaciones de autores
como Kahn y Logan (1996), quienes explican que una pgina web es bastante parecida a
una pgina impresa, ya que contiene una coleccin de palabras, grficos y dems objetos

17

organizados de manera continua y lineal de arriba hacia abajo. La diferencia ms notable


entre una y otra sera que la pgina web no posee un lmite fsico.
De la misma manera, los autores relatan que cuando se pretende organizar un sitio
web, se pasa por un proceso similar por el que pasa el autor de un libro, debido a que tiene
que pensar en la estructura, formato y presentacin.
Por lo anteriormente expuesto, explicar en este punto paso a paso cmo se va a
realizar o disear el prototipo de sitio web, procedimiento que se llevar a cabo como
resultado de la investigacin.
3.7.1. Pasos para la elaboracin del Prototipo de Sitio Web Educativo
Actualmente existe una gran diversidad de programas o herramientas que sirven
para la creacin de sitios web de una manera ms fcil, completa, dinmica e
interactiva. En la presente investigacin, una vez recabadas las necesidades e intereses
de la comunidad educativa hacia un sitio web, se realizar el prototipo utilizando la
herramienta Wix.
Wix es una excelente herramienta para la creacin y gestin de sitios web; ya
que permite crear, editar, y manejar sitios para luego ser publicados en la web. Es una
herramienta on line para sitios web con mucha facilidad y gran atractivo, ya que estn
basados en tecnologa flash lo que le entrega a estos sitios, grandes posibilidades de
animacin y personalizacin a partir de una serie de diseos predeterminados de
planillas a eleccin.

18

Figura 8. Aplicacin Wix

3.7.2. Acerca de Wix


Wix es una aplicacin para la creacin de pginas web que a travs de una
interfaz intuitiva y mediante el sencillo drag&drop (Arrastrar y soltar es una
caracterstica muy comn. Es cuando se "agarra" un objeto y arrastrarlo a una
ubicacin diferente), nos permite ir editando sitios web a partir de plantillas Flash o
incluso desde cero.
Esta herramienta que desde su lanzamiento en 2008 ya ha creado ms de trece
millones de sitios web de forma gratuita, ahora tambin permite crear sitios web
optimizados para dispositivos mviles con el Asistente para WixMobile o incluso
disear una pgina de fans en Facebook.
Wix es una interesante opcin gratuita para aquellos que deseen crear su
espacio web con un estilo profesional y sin necesidad de conocimientos en
programacin u otras habilidades tcnicas.
A.

Para que sirve Wix?


Nos sirve para poder crear nuestro propio sitio web con facilidad.
No hay necesidad de agregar una sola lnea de cdigo de programacin.
Est diseado con una vistosa interfaz grfica con funcin arrastrar y colocar, la
pgina creadora de sitios web se realiz de modo que sea muy fcil de usar y

permita una completa libertad en la creacin.


Se puede elegir entre miles de plantillas web diseadas profesionalmente o
crearlas desde cero.

B.

Ventajas:
No hay necesidad de agregar una sola lnea de cdigo de programacin.
Puedes crear tu propio sitio web con facilidad.
Est diseado con una vistosa interfaz grfica.
Para crear un sitio web se puede comenzar con una plantilla y despus

simplemente hacer clic para reemplazar y personalizar.


Permite crear una pgina web con una completa libertad en la creacin.

C. Desventajas:
No se tiene total dominio de la pgina.
19

Cambios en las condiciones del servicio: puede que el servicio sea gratis hoy y

maana puede que no.


Informacin privada a terceros generalmente no se sabe en manos de quin

caen los datos ni qu uso se va hacer de ellos.


El color de las fuentes es limitado.
Para mejoras en Wix hay que pagar.

D. Creadores de Wix
Wix fue fundada en el ao 2006 por Nadav Abrahami, Avishai Abrahami y
Glora Kaplan en la sede Tel Aviv y respaldada de varios inversores entre ellos la
compaa Insignt Venture Parthers-Benchmark capital.
3.7.3. Instrucciones para crear un sitio web con Wix
Wix nos permite hacer una pgina o sitio web en cuestin de segundos; entre
muchas de las opciones que nos ofrece este servicio online, destacan las cuentas de
hospedaje gratuito y la posibilidad de promocionar nuestro sitio en diferentes redes
sociales, as como poder comprar un dominio personalizado.
Para crear un sitio web con Wix hay que seguir una serie de instrucciones, las
cuales se presentan a continuacin:
1. Acceder a Wix.com y seleccionar Entrar/Regstrate.

20

2. Escribir un correo electrnico y contrasea para, a continuacin, hacer clic en


Regstrate!.

3. Pulsar Crear para comenzar a escribir contenido en la nueva pgina web.

4. Dirigirse a la columna de la izquierda y seleccionar una categora que concuerde


con la temtica del objetivo por el que se crea el sitio.

21

5. Wix abrir una ventana emergente mostrando de manera amplia la plantilla que se
ha seleccionado; luego hay que hacer clic en Editar para empezar a
personalizarla.

6. Seleccionar en la nueva ventana Reproducir Vdeo para aprender a editar el


contenido de la pgina web o, al menos, adquirir algunas nociones.

22

7. Seleccionar toda aquella informacin que se desee modificar realizando un


pequeo clic con el botn izquierdo del ratn para, seguidamente, hacer clic a
Editar.

8. Para modificar el men superior nos dirigimos a la columna de la derecha


Administrar Pginas y, haciendo clic en el pequeo icono de la flecha,
seleccionar Renombrar.
23

9. Edita el contenido de todas aquellas pginas del men que se deseen; cuanto ms
personalizada est la pgina o sitio web, mejor.

10. Una vez terminada la edicin, hay que pulsa Publicar para que la pgina o sitio
web pueda ser vista(o) online por todo el mundo.

24

11. Nombrar el sitio en el formulario en blanco y pulsar Aceptar.

12. Luego Wix abrir una ventana donde nos dir: Felicidades! Tu pgina web ha
sido publicada; luego hay que seleccionar Ir y nos llevar al sitio creado.

25

.
3.7.4. Tipo de navegacin para el Prototipo de Sitio Web Educativo
El prototipo de sitio web que permitir el acceso ha contenido multimedia
educativo de calidad y comprensible, para apoyar el aprendizaje de los estudiantes del
Centro Educativo Berta Elida Fernndez sobre la materia de Informtica; estar basado
en el tipo de navegacin lineal.
La navegacin lineal permite un flujo de la informacin ms estable, es muy
til cuando se quiere explicar al usuario paso a paso, pues permite que el usuario reciba
la informacin en un orden adecuado, nicamente con la opcin de ir adelante y atrs.
La estructura lineal es la ms simple de todas, la manera de recorrerla es la
misma que si estuvisemos leyendo un libro, de manera que estando en una pgina,
podemos ir a la siguiente pgina o a la anterior.
Esta estructura es muy til cuando queremos que el lector siga un camino fijo y
guiado, adems impedimos su distraccin con enlaces a otras pginas.

26

Figura 9. Navegacin Lineal

3.7.5. Tcnicas de recoleccin de la Informacin


Para recolectar la informacin que permitiera la validacin de esta propuesta se
utiliz la encuesta, la cual consiste en obtener informacin de los sujetos de estudio,
proporcionada por ellos mismos, sobre opiniones, actitudes o sugerencias. Hay dos
maneras de obtener informacin con este mtodo: la entrevista y el cuestionario,
aplicando en este caso el segundo de manera individual, para la que se elabor una
encuesta como instrumento de estudio (Ver Anexos).

Captulo IV
Resultado de la Investigacin
27

4.1. Representacin grfica de los resultados de la encuesta realizada a los


estudiantes del Centro Educativo Berta Elida Fernndez

1. Posee computador con acceso a Internet en casa?

36%

64%

No

2. Utilizas frecuentemente Internet en casa o en tu escuela?

42%
58%

No

Anlisis de Grafica No. 2

28

En base a los resultados se determina que ms de la mitad de los estudiantes


utiliza frecuentemente el internet y el resto no lo utiliza porque no tienen acceso a l o
simplemente no les llama la atencin y prefieren otras actividades.

3. Crees que existen diferencias entre un sitio web y una pgina web?

40%

60%

No

Anlisis de Grafica No. 3


La mayora de los estudiantes no conocen muy bien estos trminos y tienden a

confundirlos; los dems saben que tienen diferencias pero no saben con exactitud
cules son sus diferencias.
4. Consideras necesario la implementacin de un sitio web en tu escuela como medio de informacin para mejorar el aprendizaje?

44%
56%

S No

29

Anlisis de Grafica No. 4


Los estudiantes consideran un sitio web como una innovacin y les llama

mucho la atencin, mientras que los dems lo ven como un poco dificil de manejar.

5. Te gustara aprender sobre la computadora por medio de un sitio web en tu escuela?

22%

78%

No

Anlisis de Grafica No. 5


A muchos estudiantes les agrada la idea de que, si es posible todo se realice a

travs de la tecnologa, porque se les hace ms fcil; sin embargo, algunos por no tener
al alcance una computadora con conexin a internet no tienen la oportunidad de
desarrollar habilidades en este aspecto.

30

6. Crees que mediante la implementacin del sitio Web en la escuela se mejorara el proceso de enseanza-aprendizaje?

48%

52%

No

Anlisis de Grafica No. 6


Debido a los constantes cambios tecnolgicos es fundamental que tanto

estudiantes como docentes amplen sus conocimientos, es por ello que es ms que
necesaria esta implementacin.

4.2. Representacin grfica de los resultados de la encuesta realizada a los docentes


del Centro Educativo Berta Elida Fernndez
1. Maneja herramientas TIC:

27%

73%

No

Anlisis de Grafica No. 1

31

Muchos docentes no tienen la capacidad de manejar estas herramientas debido a


que no cuentan con los conocimientos necesarios o bsicos.

2. Conoce plataformas virtuales?


20%

80%
S

No

Anlisis de Grafica No. 2


La mayora conocen plataformas virtuales, pero muy poco las utilizan.

3. Le gustara aprender a manejar plataformas virtuales:

100%
S

No

Anlisis de Grafica No. 3


Como docentes se est a disposicin de aprender, a pesar de que algunos tienen

un poco de temor hacia este tipo de tecnologa.


32

4. Qu importancia le da usted al uso de las TIC en el interior del aula?

Mucha, debido a que


es una herramienta de
apoyo para el docente
Poca, ya que no poseo
conocimientos sufientes
Ninguna

20%
40%

40%

Anlisis de Grafica No. 4


Como se ha recalcado anteriormente, no todos los docentes poseen

conocimientos acerca de estas herramientas; algunos siempre buscan estar actualizados


y otros solo les interesa saber lo bsico, mientras que el resto no est dispuesto a
aprender y a ir evolucionando con la tecnologa.

5. Estara de acuerdo en apoyar la creacin de un prototipo de sitio web para Institucin Educativa donde usted trabaja?
7%

93%

S No

33

Anlisis de Grafica No. 5


La mayora de los docentes estn de acuerdo en apoyar la creacin de un

prototipo de sitio web; ya que proporcionara grandes beneficios a la Institucin


Educativa donde trabajan.

6.

A su criterio cuales seran las ventajas y desventajas de la utilizacin de un sitio


web en la institucin educativa?
Ventajas

20%
13%
67%

Nueva forma de aprender


Mayor contacto con los estudiantes
Actualizacin profesional

34

Desventajas
20%

Capacitacin necesaria

27%

Requiere tiempo y dedicacin

Estrs

53%

4.3. Interfaces no funcionales del Prototipo de Sitio Web Educativo


Interfaz Principal

35

Interfaz de Inicio

Interfaz de Quines Somos

36

Interfaz de Lecciones

Interfaz de C. E. Berta Elida Fernndez


37

Interfaz de Registro

RECOMENDACIONES
38

Un sitio deber hacerse lo ms corto y conciso posible; ya que est demostrado que
a las personas no les gusta leer tanto en la pantalla de un ordenador: La vista se
cansa y las personas se aburren.

Se recomienda disear sitios web con frame o marcos que permitan dividir la
pantalla; ya que nos permiten ejercer un gran control sobre la disposicin general y
la apariencia del sitio.

En los sitios Web no se debe de abusar de exceso de imgenes; ya que estas hacen
que carguen lentos y sean muy pesados.

Se debe de tener cuidado en emplear una armona de colores que no perturbe la


lectura de los sitios, procurando no emplear colores fuertes o combinaciones
extraas.

CONCLUSIONES

39

El prototipo de web educativo, es un aplicativo que permite el manejo de la


informacin de una forma gil, sencilla y rpida, con la ventaja de tenerla disponible
en cualquier momento y lugar en donde se tenga acceso a la Web, lo que es de gran
utilidad para los docentes y estudiantes de la institucin.

Se dise el prototipo web educativo, haciendo uso de herramientas libres lo cual


facilit este trabajo y tambin permite que sea un aplicativo de bajo costo, lo que
beneficiara a las instituciones Educativas con bajos recursos econmicos.

El software orientado a la web facilita el acceso y el trabajo simultneo, que permite


una mayor difusin y edicin de la informacin.

En este prototipo de web educativo, se implementaron las medidas requeridas,


cumpliendo con las necesidades de la institucin para brindarle a su comunidad escolar
una herramienta que ayude a mejorar el proceso de enseanza-aprendizaje. Lo cual
tambin aporta que cada rol pueda desarrollar ciertas actividades especficas.

BIBLIOGRAFA

40

Betty Del Rosario Medrano Tirado, Maricely Villalba Buelvas, 2009. Diseo e
Implementacin de un Sitio Web como medio de Comunicacin Interactiva para
promocionar y fortalecer los procesos de formacin pedaggicos. Versin digital en
pdf.

David Agudelo Restrepo, Luis Miguel Carmona Ruiz, 2012. Prototipo Web Educativo.
Versin digital en pdf.

WordPress (2015). Definicin de Sitio Web. Disponible en http://definicion.de/sitioweb/.

Tiposde.org, Portal Educativo (2015). Tipos de Sitio Web. Disponible en


http://www.tiposde.org/internet/174-tipos-de-sitios-web/.

Akus.net.

Elementos

de

un

Sitio

Web.

Disponible

en

http://disenowebakus.net/elementos-de-un-sitio-web.php.

Akus.net.

Etapas

para

la

creacin

de

un

Sitio

Web.

Disponible

en

http://disenowebakus.net/fases-para-el-desarrollo-de-un-proyecto-web.php.

Desarrolloweb.com.

(2011).

Wix.

Disponible

en

http://www.desarrolloweb.com/de_interes/wix-crea-web-forma-rapida-sencillagratuita-5891.html.

Uncomo.

Cmo

hacer

una

pgina

web

con

Wix.

Disponible

en

http://tecnologia.uncomo.com/articulo/como-hacer-una-pagina-web-con-wix2575.html.

ANEXOS
Formato de Encuesta (Estudiantes)
41

Objetivo: Identificar el uso de medios y herramientas tecnolgicas entre los miembros de


la comunidad educativa.
1. Posee computador con acceso a Internet en casa?
S ______ No ______
2. Utilizas frecuentemente Internet en casa o en tu escuela?
S ______ No ______
Objetivo: identificar el conocimiento que tienen los miembros de la comunidad educativa
acerca de las aplicaciones ms actualizadas en el mbito tecnolgico y de comunicacin.
3. Crees que existen diferencias entre un sitio web y una pgina web
S ______ No ______
4. Consideras necesario la implementacin de un sitio web en tu escuela como medio de
informacin para mejorar el aprendizaje?
S ______ No ______
5. Te gustara aprender sobre la computadora por medio de un sitio web en tu escuela?
S ______ No ______
6. Crees que mediante la implementacin del sitio Web en la escuela se mejorara el
proceso de enseanza-aprendizaje?
S ______ No ______

Formato de Encuesta (Docentes)


1. Maneja herramientas TIC:
S ______ No ______
Si la respuesta es s, especifique el tipo de herramienta(as):

42

______________________________________________________________________
______________________________________________________________________
______
2. Conoce plataformas virtuales:
S ______ No ______
Cuales:
______________________________________________________________________
______________________________________________________________________
______
3. Le gustara aprender a manejar plataformas virtuales:
S ______ No ______
4. Qu importancia le da usted al uso de las TIC en el interior del aula?
______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
__________
5. Estara de acuerdo en apoyar la creacin de un prototipo de sitio web para Institucin
Educativa donde usted trabaja?
6. S ______ No ______

Por qu?
______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
__________
7. A su criterio cuales seran las ventajas y desventajas de la utilizacin de un sitio web
en la institucin educativa?
8.
Ventajas:
______________________________________________________________________
______________________________________________________________________
43

______________________________________________________________________
__________
Desventajas:
______________________________________________________________________
______________________________________________________________________
______________________________________________________________________
__________

Aplicar norma APA a todo el trabajo


ParFRASEAR , recordemos que se hace necesario respetar derecho de autores.
Las divisiones van en paginas a parte.
En relacin a lo escrito lo veo bien
Hubiese sido interesante ver el sitio.

44