leonardo_monografía de tecnologías web avanzadas correccion doris

8/18/2019 Leonardo_Monografía de Tecnologías Web Avanzadas Correccion Doris

1/50


2/50

Corr56r +" 7or8"#"


3/50

D#6'"8or6"

Dedico este proyecto de monografía a Dios, a mis padres y a mi prometida.

A Dios, mi principal guía e inspiración 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 difíciles dentro de mi etapa estudiantil y en mi vida.

A mis queridos padres Arsenia Coronado y Luis !nchez, quienes siempre han luchado

por sacarme adelante y so"aron con el día en el que yo sea un profesional. #nculc!ndome

desde ni"o que el estudio y el tra$ajo es lo principal para progresar en la vida. %racias a ellos,

al sacrificio diario que hicieron por mí y el apoyo $rindado he llegado a estas instancias y a

o$tener este logro.

A mí amada prometida &atricia Lasso, que desde que llego a mi vida siempre ha estado

a mi lado en las $uenas y en las malas' me ha $rindado su apoyo, comprensión, paciencia y

amor, d!ndome !nimos de fuerza y valor para seguir adelante sin importar los o$st!culos.

1


4/50

ÍNDICE GENERAL

(ndice de figuras)))))))))))))))))))))))))))) iv#ntroducción))))))))))))))))))))))))))))).. *C"798*+o I A$7'8o$ G!r"+$))))))))))))))))))))).. +

*.*. stado del pro$lema))))))))))))))))))))))) +*.-. $jetivos))))))))))))))))))))))))))). +*.-.*. $jetivo %eneral)))))))))))))))))))))... +*.-.-. $jetivos specíficos)))))))))))))))))))) /

*.+. 0ipo de #nvestigación)))))))))))))))))))))).. /*./. Delimitación)))))))))))))))))))))))))) /*.1. 2estricciones o Limitaciones))))))))))))))))))).. /*.3. 4ustificación)))))))))))))))))))))))))) 1

*.3.*. #mportancia))))))))))))))))))))))).. 1*.3.-. Aporte))))))))))))))))))))))))).. 1

C"798*+o II M"r'o I!$868*'6o!"+)))))))))))))))))))).. 3

-.*. Antecedentes del Centro ducativo 5erta lida 6ern!ndez))))))). 3-.*.*. 7isión)))))))))))))))))))))))))... 3-.*.-. 8isión))))))))))))))))))))))))).. 3

-.-. Aspectos %enerales))))))))))))))))))))))) 9C"798*+o III. M"r'o T;r6'o......................................................................................... :

+.*. Antecedentes))))))))))))))))))))))))).. :+.-. ;e$?......................................................................................... @+.+. 0ipos de itios e$))))))))))))))))))))))) *B+./. #mportancia de un itio e$))))))))))))))))))).. **+.1. lementos de un itio e$)))))))))))))))))))) *-

+.1.*. tros elementos)))))))))))))))))))))) *+

+.3. tapas o pasos para la creación de un itio e$)))))))))))... *++.9. Descripción del &rototipo de itio e$ ducativo a desarrollarse))))... *9+.9.*. &asos para la ela$oración del &rototipo de itio e$ ducativo))... *:+.9.-. Acerca de i)))))))))))))))))))))). *:+.9.+. #nstrucciones para crear un sitio >e$ con i))))))))).... -B+.9./. 0ipo de navegación para el &rototipo de itio e$ ducativo)))... -3+.9.1. 0=cnicas de recolección de la información))))))))))).. -9

C"798*+o IV R$*+8"#o # +" I!


5/50

ÍNDICE DE FIGURAS

6igura *. Centro ducativo 5erta lida 6ern!ndez)))))))))))))). 96igura -. tapa * 2ecopilación y aprendizaje)))))))))))))))). */6igura +. tapa - &lanificación)))))))))))))))))))))) */6igura /. tapa + Dise"o)))))))))))))))))))))))). *16igura 1. tapa / Desarrollo))))))))))))))))))))))) *36igura 3. tapa 1 &rue$as y lanzamiento)))))))))))))))))). *36igura 9. tapa 3 8antenimiento))))))))))))))))))))). *96igura :. Aplicación i)))))))))))))))))))))))).. *:6igura @. Eavegación Lineal))))))))))))))))))))))). -9

3


6/50

4


7/50

INTRODUCCIÓN

n el mundo actual se han venido desarrollando mFltiples y diversas tecnologías a las

que han llamado Euevas 0ecnologías de #nformación y Comunicación GE0#CH, que se $asan

principalmente en un conjunto de medios que producen, almacenan, transmiten y transformaninformación, y que permiten la ejecución de diversas aplicaciones que logran una mayor y

mejor comunicación entre las personas.

stas tecnologías en los Fltimos a"os se han convertido en eigencias de la sociedad

post moderna, y se han insertado en diversos contetos como comercios, empresas,

organizaciones, entretenimiento, ciencia y educación.

Autores como andoval G*@@@H, han relacionado esta revolución de tecnologías,

especialmente #nternet con el t=rmino de volución, constituyendo un cam$io de paradigmas

donde eiste un vuelco y se inicia con una hoja en $lanco todos los procesos, haciendo una

transformación radical del significado de las reglas prevalecientes hasta los momentos.

Dentro del conteto educativo, las tecnologías se han ido incorporando de manera que

sean un soporte a las planificaciones y o$jetivos acad=micos y organizacionales de la

institución. &or ello, es importante que #nstituciones ducativas de calidad y que pretendan

mantener un ecelente servicio y efectivos resultados con la comunidad en la que se

desarrolla, cuente con medios que se sumen a sus 6ortalezas.

Con respecto a los medios y canales de comunicación dentro de las organizaciones, es

imposi$le prescindir de la comunicación en una organización. &or lo que se considera

necesario contar y estructurar un sistema comunicacional que permita una fluida, precisa y

clara información, de$ido que de esta forma se contri$uye al logro de las metas institucionales

y por consiguiente al =ito de la misma.

n este sentido, el principal o$jetivo de esta investigación es dise"ar un prototipo desitio >e$ que permita el acceso a contenido multimedia educativo de calidad y comprensi$le,

para apoyar el aprendizaje de los estudiantes del Centro ducativo 5erta lida 6ern!ndez

utilizando tecnologías de desarrollo >e$ avanzadas.

1


8/50

&ara lograr lo anteriormente epuesto, se dise"ar! un instrumento de recolección de

datos que pueda reca$ar la información necesaria dentro de una muestra, para detectar las

características que de$er! tener el dise"o >e$, y una vez analizado los resultados, se proceder!

a realizar el prototipo adecuado a la #nstitución.

La investigación posee cuatro capítulos, en el Capítulo #, se epondr! $revemente el

pro$lema, su justificación, el tipo de investigación, su delimitación, restricciones o

limitaciones y el o$jetivo general y los específicos.

n este mismo orden, en el Capítulo ##, se presentar! el marco institucional con los

antecedentes, visión, misión y aspectos generales del Centro ducativo 5erta lida 6ern!ndez.

n el Capítulo ###, se epondr!n las $ases teóricas seleccionadas para apoyar la

investigación, en especial la relacionada con tecnología y sitios >e$, así como los

antecedentes empíricos de otras investigaciones so$re este tema y tam$i=n se eplicar! la

metodología utilizada para realizar la investigación, la po$lación y muestra seleccionada, el

procedimiento realizado y los instrumentos de recolección de datos utilizados.

n el Capítulo #7, se epondr!n y analizar!n los resultados arrojados por los

instrumentos y se descri$ir!n las conclusiones de la investigación, adem!s, se presentar!n las

interfaces no funcionales del prototipo de sitio >e$.

2


9/50

C"798*+o I

A$7'8o$ G!r"+$

3


10/50

44 E$8"#o #+ 7ro=+>"

Durante los Fltimos a"os se han fortalecido los modelos de ense"anza y de formación

continua que antes sólo eran posi$les en escala reducida y con costos muy altos. Desde ese

entonces el crecimiento eponencial de las tecnologías de información no sólo ha masificadosu uso, sino adem!s han producido cam$ios paradigm!ticos en las pr!cticas educativas. La

evolución desde entonces ha sido favora$le hasta nuestros días, donde es posi$le encontrar

herramientas multimedia enfocadas específicamente en el &royecto ducativo de cada

institución. in em$argo en el Centro ducativo 5erta lida 6ern!ndez de 5ejuco no cuentan

con un &royecto ducativo que incluya las nuevas herramientas tecnológicas que ayuden a

$rindar una educación de calidad y a mejorar el proceso de ense"anzaIaprendizaje del docente

hacia sus alumnos. n dicha #nstitución cuentan con un La$oratorio de #nform!tica pero no es

aprovechado al m!imo para $rindar el apoyo necesario que facilite el aprendizaje en los

estudiantes.

ería de gran ayuda proporcionarles a los estudiantes una herramienta que les permita

generar mejores conocimientos, con el fin de complementar su educación. &or ello se pretende

el dise"o de un prototipo de sitio educativo $ajo el paradigma >e$, el cual permita el acceso a

recursos multimedia que apoyen el proceso de aprendizaje de los estudiantes.

40 O=?86e$ que permita el acceso a contenido

multimedia educativo de calidad y comprensi$le, para apoyar el aprendizaje

de los estudiantes del Centro ducativo 5erta lida 6ern!ndez utilizando

tecnologías de desarrollo >e$ avanzadas.

400 O=?86e$

avanzadas con la información o$tenida en las encuestas.

4


11/50

• Crear un prototipo del sitio >e$ mediante herramientas de programación

gratuitas $as!ndose en los requisitos o$tenidos.

4/ T67o # I!e$ ducativo, que contri$uya a mejorar el proceso de ense"anzaI

aprendizaje, con el fin de hacerlo m!s eficiente.ste tipo de investigación es emprendida para adquirir nuevos conocimientos, est!

orientada a conseguir un logro específico pr!ctico en particular.8ediante la aplicación de la investigación aplicada, se a$ren las posi$ilidades de

crear nuevas ideas científicas que hagan aportes significativos.

4 D+6>68"'6;!

l tema de esta investigación se delimitara al dise"o de un prototipo de sitio >e$

que permita el acceso a contenido multimedia educativo de calidad y comprensi$le, para

apoyar el aprendizaje de los estudiantes del Centro ducativo 5erta lida 6ern!ndez

utilizando tecnologías de desarrollo >e$ avanzadas.

l contenido del prototipo del sitio >e$ a dise"arse estar! enfocado en la materia

de inform!tica' ya que dicha #nstitución presenta una deficiencia en esta !rea.

4. R$8r6''6o!$ o L6>68"'6o!$

ntre las restricciones o limitaciones encontradas para la realización del presente

proyecto, se puede mencionar el hecho de que el dise"o y desarrollo del prototipo del itio

e$ ducativo es tra$ajo de un equipo multidisciplinario, donde intervienen dise"adores

Gde contenidos gr!ficosH, programadores y pedagogos' sin em$argo, en este proyecto todo

el tra$ajo recae so$re una sola persona, lo que constituye la realización de actividades

paralelas.

tro aspecto que influye en gran medida es el tiempo, de$ido a que no se cuenta

con suficientes espacios disponi$les para la realización del mismo.

4 J*$86@6'"'6;!44 I>7or8"!'6"

5


12/50

l desarrollo de este itio e$ se puede convertir en un $eneficio para la

#nstitución ducativa, si se planifica y se dise"a $as!ndose en las necesidades que

presenta.

Las nuevas tecnologías de información y comunicación traen grandes $eneficios a la educación, es así como un itio e$ que se incluye dentro de esta gama

de tecnologías, se puede dise"ar para una #nstitución ducativa aumentando la

comunicación entre los docentes y los estudiantes, como tam$i=n facilitando su

aprendizaje.

40 A7or8

l desarrollo del prototipo de este itio e$ permitir!

• &roveer a la #nstitución de una herramienta virtual que permita mejorar el nivel

de ense"anzaIaprendizaje en la comunidad educativa.• 5eneficiar directamente a la comunidad educativa, ya que a trav=s de =l podr!n

desarrollar conocimientos, fortalecer ha$ilidades y destrezas.• 0am$i=n permitir! a los docentes el perfeccionamiento de los procesos de

formación pedagógica.

C"798*+o II

M"r'o I!$868*'6o!"+

04 A!8'#!8$ #+ C!8ro E#*'"86


13/50

creciendo y en la administración del Doctor 5elisario &orras se construyó un edificio de cuatro

aulas m!s, adem!s se usa$a la casa anterior.

n la actualidad el Centro ducativo 5erta lida 6ern!ndez ha cumplido

orgullosamente, como comunidad educativa, m!s de *B* a"os de eistencia. Komenajeando atoda una comunidad por su trayectoria educativa.

044 V6$6;!

er un centro educativo comprometido con la comunidad tra$ajando en equipo

de manera eficaz y eficiente, logrando así la vivencia de los valores y la actualización

constante que vayan acordes con los avances tecnológicos científicos para $rindar un

servicio educativo, que nos permita mejorar el perfil de la educación en todo su

conteto.

040 M6$6;!

M5rindar una educación de calidad a la comunidad entre los / y */ a"os de

edad, $ajo los m!s altos est!ndares pedagógicos, científicos, tecnológicos y humanos'

fortaleciendo el tra$ajo en equipo entre directivos, docentes, discentes y comunidad

educativa en general, manteniendo un am$iente de armonía, comprometi=ndonos

profesionalmente y promoviendo en el discente o la discente un desarrollo competitivo

para la vida y la vivencia de los 7alores Nniversales.

00 A$7'8o$ G!r"+$

• E852 L%AL Centro ducativo 5erta lida 6ern!ndez• E852 NNAL Centro ducativo 5erta lida 6ern!ndez• 2%#OE CLA2 &anam! este•

PEA CLA2 Eo :• CA0%2(A &rimario• 42EADA 8atutina I 7espertina• C22%#8#E0 5ejuco• D#02#0 Chame• DCE0 +:• 0ND#AE0 3+B

7


14/50

• AD8#E#02A0#7 1• 02A5A4AD2 8AENAL /

6igura *. Centro ducativo 5erta lida 6ern!ndez

C"798*+o III

M"r'o T;r6'o

/4 A!8'#!8$

n un principio las p!ginas >e$ eran sólo teto, pero a medida que ha evolucionado la

tecnología, tanto los ordenadores como las redes de telecomunicaciones, se ha generado

nuevas formas de desarrollar la >e$.

La inclusión de im!genes fue la evolución m!s significativa, pero tam$i=n de$emos

mencionar el video y la animación, o los espacios +D, lo que aporta valores estilísticos, de

dise"o y de interactividad jam!s imaginados antes.

8


15/50

l dise"o de p!ginas >e$ se ha desarrollado a medida que ha evolucionado #nternet. n

*@@- sólo ha$ía alrededor de 1B sitios >e$. Las Fltimas estadísticas nos confirma$an que

actualmente rondan los :.BBB millones de sitios >e$, a los que diariamente se les suma a raíz

de /,/BB por día.

Datos recientes estiman que hay alrededor de - mil millones de p!ginas colgadas y se

espera que en los próimos a"os llegue a los : mil millones, ecediendo el nFmero de

ha$itantes del planeta. in em$argo, sólo una fracción de este nFmero es visitado

ha$itualmente por la mayoría de los usuarios Gsólo alrededor de *1.BBB sitios >e$s, el B,/Q

del totalH.

A partir de estos datos se puede entender la necesidad de concentrar los esfuerzos para

atraer y mantener la atención de los usuarios. 4unto con un desarrollo efectivo de la estructura>e$ y del contenido, el dise"o y el uso del color son la llave para atraer y ser identificado,

formando vínculos en el su$consciente del usuario y generar esquemas para captar y fidelizar

a nuevos visitantes.

Al mismo tiempo que la evolución de los aparatos y de su introducción en los hogares,

tam$i=n ha aumentado la calidad de las transmisiones a trav=s internet y ha $ajado su precio. A

medida que la tecnología ha solventado estas dificultades, ya no nos encontramos con

pro$lemas de forma sino de contenido.

/0 *% $ *! $686o =

Nn sitio >e$, es un espacio virtual en #nternet. e trata de un conjunto de p!ginas >e$

que son accesi$les desde un mismo dominio o su$dominio de la orld ide e$ GH.

s importante esta$lecer que en #nternet encontramos una gran variedad de tipos de

sitios >e$ que suelen diferenciarse fundamentalmente por la clase de contenido que ofrecen o

por el servicio que $rindan a cualquiera de las personas que se encuentran navegando por la

2ed.

Así, por ejemplo, tendríamos que destacar los conocidos $logs. e tratan de una

especie de $it!cora 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, est!n aquellos

que son utilizados simplemente para contar, en forma de diario, lo que les sucede día a día.

9


16/50

&ara poder crear a aquellos eisten diversos tipos de plataformas gratuitas tales como 5logger

o ord&ress.

De la misma forma, tampoco podemos pasar por alto la eistencia de los sitios >e$ de

empresas. Como su propio nom$re indica, son aquellos lugares en la 2ed que son utilizados por negocios de diversa índole para dar a conocer sus productos o sus servicios. Eo o$stante,

tam$i=n los emplean para aumentar su cartera de clientes y para mantener una relación m!s

directa con sus clientes.

Los sitios personales son, por su parte, aquellos que mantienen los individuos en

distintas plataformas y que utilizan para mostrar información so$re sí mismos, ya sea a nivel

escrito o $ien mediante fotografías. jemplos de ellos son los sitios que tienen muchos

usuarios en redes sociales tales como 6ace$ooR, 0uenti o 0>itter.

Los sitios de su$astas, los sitios de noticias o los sitios de descargas son otros de los

tipos m!s conocidos.

Los sitios >e$ incluyen documentos K08L, fotografías, sonidos, vídeos, animaciones

6lash y otro tipo de contenidos que pueden compartirse en línea. La N2L raíz del sitio >e$ se

conoce como portada o homepage. Lo m!s ha$itual es que esta portada facilite el acceso a

todas las p!ginas del sitio mediante hipervínculos Gtam$i=n conocidos como enlaces o linRsH.

La mayor parte de los sitios >e$ ofrecen sus contenidos de manera gratuita. tros, en

cam$io, co$ran una suscripción y eigen una contrase"a para su acceso. se es el caso de

muchos sitios de información $urs!til o de juegos online, entre otros servicios.

Ca$e destacar que para acceder a un sitio >e$ se necesita contar con un navegador en

la computadora. ste es un programa inform!tico que posi$ilita la visualización de la

información contenida en una p!gina >e$.

// T67o$ # S686o$ W=

Algunos tipos de sitios >e$ son

B+o5: en estos sitios se introducen lecturas, diarios online o comentarios del autor.

Adem!s incluyen foros en los que los lectores pueden intercam$iar opiniones.

10


17/50

• P"r" + 'o>r'6o +'8r;!6'o: estos permiten a sus usuarios comprar y vender

cualquier tipo de productos.• D #$'"r5"$: por medio de estos sitios, los usuarios pueden su$ir y $ajar contenido

electrónico como mFsica, películas, videojuegos, fondos de pantallas, etc=tera.

• D #$"rro++o: en estos sitios se introduce información vinculada con los desarrollosen dise"o, >e$, soft>are y todo lo que tenga que ver con el !m$ito de la inform!tica.

• I!$868*'6o!"+$: estos sitios son confeccionados por alguna entidad, con o sin fines de

lucro, para darse a conocer, poner información propia y funcionan como un medio de

contacto para sus clientes o miem$ros. Adem!s, en caso de que sea una empresa, sirve

para promocionar sus $ienes y servicios.• D 'o>*!6#"# 7or8"!'6" # *! S686o W=

11


18/50

n la actualidad contar con un sitio >e$ es de suma importancia, independientemente

del o$jetivo del sitio, cada minuto que pasa nuestra sociedad est! actualizando información de

lo que sucede en diferentes lugares del mundo, y en este siglo SS# es de vital importancia

estar informado de todos los acontecimientos del mismo.

Los sitios >e$ son importantes hoy en día para toda clase de función, por ejemplo

refiri=ndose propiamente al !m$ito empresarial o profesional, algunos $eneficios importantes

que hay que tener en cuenta a la hora de adquirir un sitio, pueden ser

• Nn sitio >e$ es la tarjeta de presentación de todo el que se dedique a alguna actividad

comercial o profesional.• l sitio >e$ puede ser el mejor vendedor.• l sitio >e$ podr! ser visto por millones de usuarios en el mundo, las -/ horas, los +31

días del a"o.• l costo de mantener un sitio >e$ en internet es muy $ajo, en comparación con otros

medios pu$licitarios.• Nn sitio >e$, da a la empresa una imagen de calidad y constante progreso.• Nn sitio >e$ da igualdad de condiciones para competir con otras empresas yJo

profesionales.

/. E+>!8o$ # *! S686o W=

Cualquier sitio >e$ constar! principalmente de los siguientes elementos

• E+ 8H8o: s el elemento m!s significativo de cualquier sitio >e$ porque los usuarios

navegan por la >e$ fundamentalmente en $usca de información epresada en teto.• I>&5!$: Aunque no se de$e a$usar de las im!genes por el riesgo de aumentar el

peso de la p!gina, y por lo tanto, los tiempos de descarga, las im!genes constituyen un

elemento esencial para ofrecer información visual del contenido y mostrar un dise"o

atractivo y personal.• E$7"'6o W=: &ara que el sitio >e$ sea visi$le ante todos es necesario colocarlo en un

servidor.• U! !o>=r # #o>6!6o: s la primera parte de una dirección >e$ que identifica al

servidor que almacena el sitio.• 67r


19/50

• V6#o: 8ientras #nternet es cada vez m!s asequi$le, confia$le y veloz, los programas

de edición de video se hacen m!s cercanos a los usuarios.Ahora es m!s f!cil realizar un video desde una c!mara digital o un tel=fono móvil con

c!mara incorporada y que se termine su$iendo a la >e$ para ponerlo al alcance de

todos.• A!6>"'6o!$ ! F+"$(: s una imagen animada, f!cil de crear y so$re todo que ocupa

poca memoria. 0iene diferentes usos, desde la creación de di$ujos animados hasta el

despliegue de di$ujos interactivos.• So!6#o$: Nn elemento cada vez m!s importante. La comercialización de nuevos

dispositivos digitales móviles como el i&hone ha potencializado este elemento.Adem!s de incorporar sonido a las p!ginas >e$ puede descargar de ellas archivos de

audio para sus dispositivos móviles.l formato 8&+ es el m!s conocido y m!s usado por su calidad y nivel de compresión.

E+ ->"6+ o 'orro +'8r;!6'o: e$. ste elemento, dado su car!cter gratuito y su versatilidad para poder

transmitir todo tipo de documentación a cualquier parte del mundo se presenta como el

sustituto del fa, y en determinados casos tam$i=n del tel=fono, al menos como

sustituto de los sms.

stos son los principales elementos que constituir!n cualquier sitio >e$. A partir de

aquí, eiste todo un sin fin de productos y servicios que ir!n a cu$rir las necesidades m!s

específicas.

/.4 O8ro$ +>!8o$

tros elementos $astante comunes son

B"!!r: Nna imagen fija o animada utilizada generalmente para pu$licidad.

M"r'o$: 0am$i=n llamados frames, son una especie de recuadro independiente

en el que se puede cargar una p!gina >e$.De esta forma es posi$le dividir una p!gina >e$ en diferentes partes o

ventanas, cada una con sus propios $ordes y $arras de desplazamiento,

cargando dentro de cada una de ellas una p!gina >e$ eterna independiente.Actualmente se pueden o$tener los mismos resultados con CSS.

/ E8"7"$ o 7"$o$ 7"r" +" 'r"'6;! # *! S686o W=

13


20/50

A pesar de la impresión de sencillez que se pueda apreciar en una pantalla, crear un

$uen sitio >e$ comparte los mismos requisitos que construir un rascacielos. &ara tener

=ito, am$os proyectos necesitan una $uena arquitectura.

Como cualquier estructura física que de$e construirse de cero, la creación de unsitio >e$ tam$i=n necesita un plano. T ese plano o esquema consta de seis etapas.

A E8"7" 4: R'o76+"'6;! "7r!#6)"?

La primera etapa en la creación de un sitio >e$ consiste en recopilar la mayor

cantidad de información posi$le para conocer lo que se quiere Gy lo que no se quiereH

para el sitio. e puede recopilar esta información o$servando los sitios que usan

actualmente, los comentarios de los amigos y colegas.

6igura -. tapa * 2ecopilación y aprendizaje

B E8"7" 0: P+"!6@6'"'6;!

La información recopilada en la etapa * nos ayudar! enormemente a la hora de

planificar el sitio. Ahora se de$en llevar a ca$o las siguientes tareas

• Creación del mapa del sitio.• Decisión so$re las tecnologías requeridas.• Determinación de las resoluciones compati$les.• Creación de $ocetos.• &lanificación del contenido.

14


21/50

6igura +. tapa - &lanificación

C E8"7" /: D6$Ko

i ya se definieron todos los temas vistos en las etapas * y -, el dise"o de la

p!gina de inicio y de las su$p!ginas posteriores ser! sencillo.

7er el dise"o de las p!ginas con contenidos y fotografías reales, su logotipo y el

esquema de colores elegido, le dar!n vida a la visión para el sitio. Kay que provechar

esta etapa para hacer los cam$ios necesarios, porque hacer cam$ios m!s adelante

resulta costoso y difícil de implementar, por lo que se de$e aprovechar con inteligencia

esta etapa.

15


22/50

6igura /. tapa + Dise"o

D E8"7" : D$"rro++o

Nna vez que el dise"o est! finalizado y apro$ado es posi$le crear el sitio >e$.e tomar!n todos los elementos gr!ficos del prototipo y se utilizar!n para crear un sitio

funcional. 0am$i=n se implementar!n en esta etapa los elementos interactivos, como

por ejemplo los formularios de contacto, las animaciones flash, etc.

n este momento es posi$le hacer cam$ios y arreglos menores.

6igura 1. tapa / Desarrollo

E E8"7" .: Pr*="$ +"!)">6!8o

n esta etapa se pondr! a prue$a el sitio >e$, verificando desde su correcta operación

hasta posi$les pro$lemas de compati$ilidad. Adem!s, se verificar! que todo el código

del sitio >e$ sea v!lido, cumpliendo con los est!ndares >e$ actuales.

Nna vez apro$ado definitivamente, se cargar!n los archivos del sitio >e$ al servidor.

6igura 3. tapa 1 &rue$as y lanzamiento

16


23/50


24/50

organizados de manera continua y lineal de arri$a hacia a$ajo. La diferencia m!s nota$le

entre una y otra sería que la p!gina >e$ no posee un límite físico.

De la misma manera, los autores relatan que cuando se pretende organizar un sitio

>e$, se pasa por un proceso similar por el que pasa el autor de un li$ro, de$ido a que tieneque pensar en la estructura, formato y presentación.

&or lo anteriormente epuesto, eplicar= en este punto paso a paso cómo se va a

realizar o dise"ar el prototipo de sitio >e$, procedimiento que se llevar! a ca$o como

resultado de la investigación.

/24 P"$o$ 7"r" +" +"=or"'6;! #+ Pro8o867o # S686o W= E#*'"86e$ de una manera m!s f!cil, completa, din!mica e

interactiva. n la presente investigación, una vez reca$adas las necesidades e intereses

de la comunidad educativa hacia un sitio >e$, se realizar! el prototipo utilizando la

herramienta W6H.

W6H es una ecelente herramienta para la creación y gestión de sitios >e$' ya

que permite crear, editar, y manejar sitios para luego ser pu$licados en la >e$. s una

herramienta on line para sitios >e$ con mucha facilidad y gran atractivo, ya que est!n

$asados en tecnología flash lo que le entrega a estos sitios, grandes posi$ilidades de

animación y personalización a partir de una serie de dise"os predeterminados de

planillas a elección.

18


25/50

6igura :. Aplicación i

/20 A'r'" # W6H

i es una aplicación para la creación de p!ginas >e$ que a trav=s de una

interfaz intuitiva y mediante el sencillo #r"5#ro7 GArrastrar y soltar es una

característica muy comFn. s cuando se agarra un o$jeto y arrastrarlo a una

u$icación diferenteH, nos permite ir editando sitios >e$ a partir de plantillas 6lash o

incluso desde cero.

sta herramienta que desde su lanzamiento en -BB: ya ha creado m!s de trece

millones de sitios >e$ de forma gratuita, ahora tam$i=n permite crear sitios >e$

optimizados para dispositivos móviles con el Asistente para i8o$ile o incluso

dise"ar una p!gina de fans en 6ace$ooR.

i es una interesante opción gratuita para aquellos que deseen crear su

espacio >e$ con un estilo profesional y sin necesidad de conocimientos en

programación u otras ha$ilidades t=cnicas.

A P"r" * $6re$ con facilidad.• Eo hay necesidad de agregar una sola línea de código de programación.• st! dise"ado con una vistosa interfaz gr!fica con función arrastrar y colocar, la

p!gina creadora de sitios >e$ se realizó de modo que sea muy f!cil de usar y

permita una completa li$ertad en la creación.• e puede elegir entre miles de plantillas >e$ dise"adas profesionalmente o

crearlas desde cero.

B V!8"?"$:• Eo hay necesidad de agregar una sola línea de código de programación.• &uedes crear tu propio sitio >e$ con facilidad.• st! dise"ado con una vistosa interfaz gr!fica.• &ara crear un sitio >e$ se puede comenzar con una plantilla y despu=s

simplemente hacer clic para reemplazar y personalizar.• &ermite crear una p!gina >e$ con una completa li$ertad en la creación.

C D$


26/50

• Cam$ios en las condiciones del servicio puede que el servicio sea gratis hoy y

ma"ana puede que no.• #nformación privada a terceros generalmente no se sa$e en manos de qui=n

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

• l color de las fuentes es limitado.• &ara mejoras en i hay que pagar.

D Cr"#or$ # W6H

i fue fundada en el a"o -BB3 por Eadav A$rahami, Avishai A$rahami y

%lora Uaplan en la sede 0el Aviv y respaldada de varios inversores entre ellos la

compa"ía #nsignt 7enture &arthersI5enchmarR capital.

/2/ I!$8r*''6o!$ 7"r" 'r"r *! $686o = 'o! W6H

i nos permite hacer una p!gina o sitio >e$ en cuestión de segundos' entre

muchas de las opciones que nos ofrece este servicio online, destacan las cuentas de

hospedaje gratuito y la posi$ilidad de promocionar nuestro sitio en diferentes redes

sociales, así como poder comprar un dominio personalizado.

&ara crear un sitio >e$ con i hay que seguir una serie de instrucciones, las

cuales se presentan a continuación4 Acceder a i.com y seleccionar MntrarJ2egístrateV.

20


27/50

0 scri$ir un correo electrónico y contrase"a para, a continuación, hacer clic en

MW2egístrateXV.

/ &ulsar MCrearV para comenzar a escri$ir contenido en la nueva p!gina >e$.

Dirigirse a la columna de la izquierda y seleccionar una categoría que concuerde

con la tem!tica del o$jetivo por el que se crea el sitio.

21


28/50

. i a$rir! una ventana emergente mostrando de manera amplia la plantilla que se

ha seleccionado' luego hay que hacer clic en MditarV para empezar a

personalizarla.

eleccionar en la nueva ventana M2eproducir 7ídeoV para aprender a editar el

contenido de la p!gina >e$ o, al menos, adquirir algunas nociones.

22


29/50

2 eleccionar toda aquella información que se desee modificar realizando un

peque"o clic con el $otón izquierdo del ratón para, seguidamente, hacer clic a

MditarV.

&ara modificar el menF superior nos dirigimos a la columna de la derecha

MAdministrar &!ginasV y, haciendo clic en el peque"o icono de la flecha,

seleccionar M2enom$rarV.

23


30/50

1 dita el contenido de todas aquellas p!ginas del menF que se deseen' cuanto m!s

personalizada est= la p!gina o sitio >e$, mejor.

43 Nna vez terminada la edición, hay que pulsa M&u$licarV para que la p!gina o sitio

>e$ pueda ser vistaGoH online por todo el mundo.

24


31/50

44 Eom$rar el sitio en el formulario en $lanco y pulsar MAceptarV.

40 Luego W6H a$rir! una ventana donde nos dir! F+6'6#"#$ 0u p!gina >e$ ha

sido pu$licada' luego hay que seleccionar M#rV y nos llevar! al sitio creado.

25


32/50

./2 T67o # !"


33/50

6igura @. Eavegación Lineal

/2. T%'!6'"$ # r'o+''6;! # +" I!@or>"'6;!

&ara recolectar la información que permitiera la validación de esta propuesta se

utilizó la encuesta, la cual consiste en o$tener información de los sujetos de estudio,

proporcionada por ellos mismos, so$re opiniones, actitudes o sugerencias. Kay dos

maneras de o$tener información con este m=todo la entrevista y el cuestionario,

aplicando en este caso el segundo de manera individual, para la que se ela$oró una

encuesta como instrumento de estudio G7er AneosH.

C"798*+o IV

R$*+8"#o # +" I!


34/50

4 R7r$!8"'6;! 5r&@6'" # +o$ r$*+8"#o$ # +" !'*$8" r"+6)"#" " +o$

$8*#6"!8$ #+ C!8ro E#*'"86!8 I!8r!8 ! '"$" o ! 8* $'*+"

S9 No

A!&+6$6$ # Gr"@6'" No 0

28


35/50

n $ase a los resultados se determina que m!s 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 atención y prefieren otras actividades.

3

3

/ Cr$ * H6$8! #6@r!'6"$ !8r *! $686o = *!" 7&56!" =

S9 No

A!&+6$6$ # Gr"@6'" No /

La mayoría de los estudiantes no conocen muy $ien estos t=rminos y tienden a

confundirlos' los dem!s sa$en que tienen diferencias pero no sa$en con eactitud

cu!les son sus diferencias.

.BP

AAP

A: Co!$6#r"$ !'$"r6o +" 6>7+>!8"'6;! # *! $686o = ! 8* $'*+" 'o>o >#6o # 6!@or>"'6;! 7"r" >?or"r + "7r!#6)"?F

S9 No

29


36/50

A!&+6$6$ # Gr"@6'" No

Los estudiantes consideran un sitio >e$ como una innovación y les llama

mucho la atención, mientras que los dem!s lo ven como un poco dificil de manejar.

2,P

00P

.: CT 5*$8"r9" "7r!#r $o=r +" 'o>7*8"#or" 7or >#6o # *! $686o E= ! 8* $'*+"F

S9 No

A!&+6$6$ # Gr"@6'" No .

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

trav=s de la tecnología, porque se les hace m!s f!cil' sin em$argo, algunos por no tener

al alcance una computadora con coneión a internet no tienen la oportunidad de

desarrollar ha$ilidades en este aspecto.

30


37/50

.0PA,P

B: Cr $ M* >#6"!8 +" 6>7+>!8"'6;! #+ $686o W= ! +" $'*+" $ >?or"r9" + 7ro'$o # !$K"!)"-"7r!#6)"?F

S9 No

A!&+6$6$ # Gr"@6'" No

De$ido a los constantes cam$ios tecnológicos es fundamental que tanto

estudiantes como docentes amplíen sus conocimientos, es por ello que es m!s que

necesaria esta implementación.

0 R7r$!8"'6;! 5r&@6'" # +o$ r$*+8"#o$ # +" !'*$8" r"+6)"#" " +o$ #o'!8$

#+ C!8ro E#*'"86


38/50

8uchos docentes no tienen la capacidad de manejar estas herramientas de$ido a

que no cuentan con los conocimientos necesarios o $!sicos.

3

03

0 Co!o' 7+"8"@or>"$


39/50

A3P

A3P

03P

A: D*% 6>7or8"!'6" + #" *$8# "+ *$o # +"$ TIC ! + 6!8r6or #+ "*+"F

8ucha, de$ido a quees una herramienta de

apoyo para el docente

&oca, ya que no poseo

conocimientos sufientes

Einguna

A!&+6$6$ # Gr"@6'" No

Como se ha recalcado anteriormente, no todos los docentes poseen

conocimientos acerca de estas herramientas' algunos siempre $uscan estar actualizados

y otros solo les interesa sa$er lo $!sico, mientras que el resto no est! dispuesto a

aprender y a ir evolucionando con la tecnología.

93%

2P

.: E$8"r9" # "'*r#o ! "7oJ"r +" 'r"'6;! # *! 7ro8o867o # $686o = 7"r" I!$868*'6;! E#*'"86


40/50

A!&+6$6$ # Gr"@6'" No .

La mayoría de los docentes est!n de acuerdo en apoyar la creación de un

prototipo de sitio >e$' ya que proporcionaría grandes $eneficios a la #nstitución

ducativa donde tra$ajan.

A $* 'r68r6o '*"+$ $r9"! +"$


41/50

02

./

03

D$


42/50

I!8r@") # I!6'6o

I!8r@") # *6%!$ So>o$

36


43/50

I!8r@") # L''6o!$

I!8r@") # C E Br8" E+6#" Fr!&!#)

37


44/50

I!8r@") # R56$8ro

RECOMENDACIONES

38


45/50


46/50

• l prototipo de >e$ educativo, es un aplicativo que permite el manejo de la

información de una forma !gil, sencilla y r!pida, con la ventaja de tenerla disponi$le

en cualquier momento y lugar en donde se tenga acceso a la e$, lo que es de gran

utilidad para los docentes y estudiantes de la institución.

• e dise"ó el prototipo >e$ educativo, haciendo uso de herramientas li$res lo cual

facilitó este tra$ajo y tam$i=n permite que sea un aplicativo de $ajo costo, lo que

$eneficiaría a las instituciones ducativas con $ajos recursos económicos.

• l soft>are orientado a la >e$ facilita el acceso y el tra$ajo simult!neo, que permite

una mayor difusión y edición de la información.

• n este prototipo de >e$ educativo, se implementaron las medidas requeridas,

cumpliendo con las necesidades de la institución para $rindarle a su comunidad escolar

una herramienta que ayude a mejorar el proceso de ense"anzaIaprendizaje. Lo cual

tam$i=n aporta que cada rol pueda desarrollar ciertas actividades específicas.

BIBLIOGRAFÍA

40


47/50

• 5etty Del 2osario 8edrano 0irado, 8aricely 7illal$a 5uelvas, -BB@. Dise"o e

#mplementación de un itio e$ como medio de Comunicación #nteractiva para

promocionar y fortalecer los procesos de formación pedagógicos. 7ersión digital en

pdf.

• David Agudelo 2estrepo, Luis 8iguel Carmona 2uiz, -B*-. &rototipo e$ ducativo.

7ersión digital en pdf.

• ord&ress G-B*1H. Definición de itio e$. Disponi$le en httpJJdefinicion.deJsitioI

>e$J.

• 0iposde.org, &ortal ducativo G-B*1H. 0ipos de itio e$. Disponi$le en

httpJJ>>>.tiposde.orgJinternetJ*9/ItiposIdeIsitiosI>e$J.

• ARus.net. lementos de un itio e$. Disponi$le en

httpJJdiseno>e$aRus.netJelementosIdeIunIsitioI>e$.php.

• ARus.net. tapas para la creación de un itio e$. Disponi$le en

httpJJdiseno>e$aRus.netJfasesIparaIelIdesarrolloIdeIunIproyectoI>e$.php.

• Desarrollo>e$.com. G-B**H. i. Disponi$le en

httpJJ>>>.desarrollo>e$.comJdeYinteresJ>iIcreaI>e$IformaIrapidaIsencillaI

gratuitaI1:@*.html.

• Nncomo. Cómo hacer una p!gina >e$ con i. Disponi$le en

httpJJtecnologia.uncomo.comJarticuloJcomoIhacerIunaIpaginaI>e$IconI>iI

-191.html.

ANEQOS

For>"8o # E!'*$8" E$8*#6"!8$

41


48/50

O=?86*!6#"# #*'"866!8o * 86!! +o$ >6>=ro$ # +" 'o>*!6#"# #*'"86


49/50

YYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYY


YYYYYY

-. Conoce plataformas virtualesí YYYYYY Eo YYYYYY

Cuales



YYYYYY

+. Le gustaría aprender a manejar plataformas virtuales

í YYYYYY Eo YYYYYY

/. ;e$ para #nstitución

ducativa donde usted tra$aja?3. í YYYYYY Eo YYYYYY

;&or qu=? YYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYY



YYYYYYYYYY

9. ;A su criterio cuales serían las ventajas y desventajas de la utilización de un sitio >e$

en la institución educativa?:.

7entajas YYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYY


43


50/50


YYYYYYYYYY Desventajas YYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYY

YYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYY YYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYY

YYYYYYYYYY

A7+6'"r !or>" APA " 8o#o + 8r"="?o

P"rFRASEAR , r'or#>o$ * $ ("' !'$"r6o r$78"r #r'(o # "*8or$

L"$ #6

leonardo_monografía de tecnologías web avanzadas correccion doris

Documents