monografÍa examen de suficiencia profesional res. …
TRANSCRIPT
i
UNIVERSIDAD NACIONAL DE EDUCACION
Enrique Guzmán y Valle
Alma Máter del Magisterio Nacional
FACULTAD DE CIENCIAS
Escuela Profesional de Matemática e Informática
MONOGRAFÍA
PÁGINAS WEB EDUCATIVAS. Introducción, la Web en los ambientes educativos,
educación y Web, ventajas y desventajas, diseño, tipos de información, herramientas para
construir una página Web, aplicación.
Examen de Suficiencia Profesional Res. N°0752-2019-D-FAC
Presentada por:
Xiomira Alexandra Jaime Torres
Para optar al Título Profesional de Licenciado en Educación
Especialidad: Informática
Lima, Perú
2019
ii
iii
Dedicatoria
A Dios;
Mi Madre, Rogelia Torres;
Mis profesores por su apoyo en todos los
momentos, por sus enseñanzas y por su
dedicada labor por mi formación
académica profesional.
iv
Tabla de contenidos
Introduccion
Cápitulo I. Educacion y Web ........................................................................................ 07
1.1 Historia de la Web .................................................................................................. 07
1.1.1 Web 1.0 ........................................................................................................... 07
1.1.2 Web 2.0 ........................................................................................................... 07
1.1.3 Web 3.0 ........................................................................................................... 08
1.1.4 Web 4.0 ........................................................................................................... 08
1.2 Páginas Web ........................................................................................................... 08
1.2.1 Páginas Web Estáticas .................................................................................... 09
1.2.2 Páginas Web Dinámicas ................................................................................. 09
1.3 Páginas Web Educativas ......................................................................................... 09
1.3.1 Ventajas .......................................................................................................... 10
1.3.2 Desventajas ..................................................................................................... 10
1.4 Tipos de Enseñanza – Aprendizaje ........................................................................ 11
1.4.1 E-Learning ...................................................................................................... 11
1.4.2 M-Learning ..................................................................................................... 11
1.4.3 B-Learning ...................................................................................................... 13
1.4.4 Machine -Learning .......................................................................................... 13
1.4.5 U-Learning ...................................................................................................... 13
Capítulo II. La Web en los ambientes Educativos ....................................................... 14
2.1 Educacion virtual .................................................................................................... 14
2.2 Plataformas educativas ........................................................................................... 14
2.2.1 Moodle ............................................................................................................ 15
2.2.2 Chamilo ........................................................................................................... 15
2.2.3 Google for education ...................................................................................... 15
2.2.4 OpenDex ......................................................................................................... 16
2.3 Tipos de sitios web educativos ............................................................................... 16
2.3.1 web instituciones ............................................................................................. 17
2.3.2 web de recursos y base de datos educativos ................................................... 17
2.3.3 Intranet Educativa ........................................................................................... 18
2.3.4 Campus Virtual ............................................................................................... 18
2.3.5 Aula virtual ..................................................................................................... 19
v
2.4 Páginas web con contenido educativo .................................................................... 20
2.4.1 Informativa ...................................................................................................... 20
2.4.2 Comunicativa .................................................................................................. 20
2.4.3 Formativa ........................................................................................................ 20
Capítulo III. Diseños de páginas Web Educativas ....................................................... 23
3.1 Diseño adaptativo ................................................................................................... 23
3.1.1 Bootstraps ....................................................................................................... 23
3.1.2 Wix .................................................................................................................. 23
3.1.3 Joomla ............................................................................................................. 24
3.1.4 Drupal ............................................................................................................. 25
3.2 Plantillas web .......................................................................................................... 25
Capítulo IV. Herramientas para construir una página ................................................. 27
4.1 Servidor Local ........................................................................................................ 27
4.2 Editores ................................................................................................................... 27
Aplicación didáctica ..................................................................................................... 29
Sintesis .......................................................................................................................... 44
Referencias ................................................................................................................... 45
Anexos .......................................................................................................................... 48
vi
Introducción
El presente trabajo monográfico está orientado a conocer los espacios educativos
dentro de una plataforma Web que ofrece información, recursos o materiales relacionados
con el campo o ámbito de la educación. La mayoría de estudiantes realizan sus actividades
académicas empleando internet, pero ¿cuántos son absorbidos por los distractores?,
¿Cuánta información es verosímil? Somos conscientes de que una educación en línea no
reemplaza una educación tradicional; cada una de estas tiene ventajas y desventajas que la
estaremos viendo en el transcurso de este trabajo.
Hoy en día, el docente no ocupa el mismo protagonismo que en una educación
tradicional. Con el avance de las tecnologías, el rol del docente es de facilitador de la
información para que los estudiantes construyan su propio aprendizaje y puedan adquirir
un aprendizaje íntegro. Pasamos de las aulas a una educación en línea o también llamada e-
learning que proporciona al estudiante material educativo, en este espacio se trabaja el
proceso colaborativo. Aquí, el estudiante ocupa el rol del investigador y constructor de
sus conocimientos.
Las páginas web educativas facilitan el aprendizaje, ofrecen información y
promueven la comunicación. Existen tipos de páginas web informativas, como formativas.
Por ello, el presente trabajo nos abre una puerta hacia el campo de las páginas web
educativas sus principales conceptos e ideas básicas para tener un acercamiento hacia este
aspecto de la educación que hoy en día se presenta como una de las vías para la educación
del futuro e-learning que pretende ser la mejor plataforma de contenidos de gestión de
aprendizaje, para ser utilizados en las escuelas, universidades e institutos.
Como docentes, no podemos estar ajenos de la utilización de las TIC en el proceso
de enseñanza – aprendizaje, debemos desarrollar habilidades técnicas para interactuar con
los cambios tecnológicos y de acompañar los procesos para lograr una formación integral.
7
Capítulo I
Educación y Web
1.1 Historia de la web
La Web más conocida con sus siglas WWW (World Wide Web), es una red informática
con un conjunto de documentos (webs), los cuales contienen archivo multimedia como
videos, gráficos, texto, audio y otros materiales dinámicos o estáticos. Interconectados por
enlaces de hipertexto, disponibles en Internet que se pueden comunicar, entre ellos por
medio de la tecnología digital.
Debemos tener en cuenta que Web no es igual a Internet. Silvia y Lopez (2003)
definen que “Internet es un conjunto de redes interconectadas, gracias al cual tenemos
acceso desde nuestro Pc a la mayor fuente de información que existe” (p.17).
La web fue desarrolla en diciembre del año 1990 por el laboratorio Europeo CERN,
Suiza. El inventor de esta plataforma fue el informático Tim Berners-Lee. Publicó la
primera página web usando un computador NeXT. Este sistema permitía compartir de
manera sencilla la información.
Durante estos años la web ha evolucionado notoriamente y hasta nuestros días no ha
dejado de evolucionar, siendo un entorno accesible para todo el público, más allá de las
instituciones educativas formales.
1.1.1 Web 1.0
Son documentos de hipertextos enlazados al internet que nacen a mediados de los
años 60; estas son páginas estáticas. Los clientes que los visitan solo pueden acceder a esta
información mas no intercambiarla. Estas contienen formulario HTML (HyperText
Markup Lenguage) traducido como Lenguaje de formato de documentos para hipertexto.
Algunos datos que encontrábamos en esta web fueron las informaciónes
periodísticas, nutricionales entre otras, las cuales mantenían informados a los usuarios.
1.1.2 Web 2.0
Conocida también como social media , esta apareció a mediados del año 2004. A
diferencia de la web 1.0, esta se centra en el usuario, la información está constantemente
actualizada y mayor interactividad entre la red-usuario.
8
Los medios más conocidos que encontramos son los Blog que permiten compartir
contenidos de un tema en específico en la cual los usuarios que ingresan pueden dejar
comentarios u opiniones, YouTube, plataformas educativas, entre otras.
1.1.3 Web 3.0
Esta web fue activa desde el año 2010, conocida como web inteligente, es mucho
más rápida, abierta, clasifica las páginas, se registran los historiales, frecuencia de
navegación, podemos realizar compras en línea, conexión de internet a Tablet,
computadoras, Smartphone. Encontramos en esta plataforma a Facebook groups search,
amazon, ebay, entre otras.
1.1.4 Web 4.0
Hoy en día nos encontramos en este tipo de web, aun conocemos que las
interacciones con el buscador son muy limitadas. La principal limitación es que estas no
son capaces de responder preguntas como ¿en qué año murió Kennedy? Debido a que no
habla el lenguaje de usuario.
La web 4 o también llamada web semántica mejora este problema aplicando
técnicas de procesado de lenguaje natural pero esta no soluciona el problema
completamente.
Existen cuatro pilares fundamentales de la web semántica:
Comprensión del lenguaje natural.
Uso de información de contacto de usuario.
Nuevos modelos de comunicación máquina – máquina.
Nuevo modelo de interacción con el usuario.
1.2 Páginas web
Es un documento en los cuales encontramos texto, gráficos que aparecen de manera
digital en la pantalla de un ordenador, las páginas web son partes del sitio web. Estas se
encuentran programadas en un formato HTML, las cuales contienen enlaces de hipertexto.
Es un documento o información electrónica capaz de contener texto, sonido, vídeo,
programas, enlaces, imágenes y muchas otras cosas, adaptada para la llamada Word
Wide Web (WWW) y que puede ser accedida mediante un navegador web. Esta
9
información; se encuentra generalmente en formato HTML o XHTML, y puede
proporcionar acceso a otras páginas web mediante enlaces de hipertexto
(Recuperado de: Repositorio Wikipedia, 2019).
Existen dos tipos de páginas web dinámicas y estáticas. Definimos como páginas
web estáticas aquellas que solo muestran información no hay ninguna interacción.
A diferencia de las páginas web estáticas las dinámicas poseen mayor interacción
con el navegante, podemos compartir información, los contenidos se actualizan
constantemente, contienen todo tipo de funciones como blogs, venta online, encuestas,
foros.
1.2.1 Páginas web estáticas.
Se denomina página web estática debido a que estas pueden actualizar los
contenidos, como requisito principal para poder actualizarse era con ayuda del
desarrollador.
Las características principales son:
Es simple
No se añaden blog
Son complicadas de modificar
1.2.2 Páginas web dinámicas
En su mayoría las páginas web de hoy en día son dinámicas construidas en distintos
lenguajes de programación. Los recursos principales que encontramos aquí son blogs,
foros, chat, venta online entre otros.
Estás tienen una gran ventaja dentro del buscador al ser dinámicas y por
consecuente sus contenidos se actualizan constantemente se posicionan dentro de las
primeras òpciones de búsqueda.
Poseen un diseño que se adapta con todo tipo de dispositivo como Tablet, portátiles,
tablets.
1.3 Páginas web educativas
Hoy en día Internet es una herramienta utilizada en todo el mundo y nos permite
acceder a múltiples recursos y conocer sobre otras empresas con facilidad. Estas páginas
generan contenido educativo.
10
1.3.1 Ventajas .
- Cualquier persona puede subir opiniones sobre temáticas.
- Las páginas web son medios de comunicación que permiten al usuario que entra en
la mismas, comunicarse con un contenido y también puede poner su opinión en un
comentario y así interactuar con otras personas.
- Es posible estar al tanto de lo que se publica en una página web mediante las redes
sociales, como Twitter o Facebook, entre las más conocidas.
- Si no se tienen enciclopedias cerca y necesitamos buscar información instantánea sin
adentrarnos al contenido, podemos buscar información en las páginas web, y esto es
una gran ventaja ya que se tienen datos rápidos y fáciles de conseguir.
- Si no conocían su institución, el sitio web puede ayudarlo en esto y hacerse notar las
24 horas del día. Tener un sitio web implica, por ejemplo, que si alguien no tiene su
número telefónico a la mano o le hablan de usted y quiere saber más, la persona
simplemente lo busca en la web y lo encuentra fácil y rápido.
- Las personas pueden ingresar en cualquier momento y desde cualquier equipo.
- Es la mejor manera para dar a conocer no solo su imagen, sino sus valores, misión y
proyecto pedagógico, así como difundir noticias de actualidad o actividades
especiales organizadas por su colegio.
- Es su plataforma para mostrar un diferencial: Son cientos o miles las páginas de
instituciones educativas que se encuentran en la web. Si su contenido deja claro cuál
es su diferencial con respecto a la competencia, tendrá un gran terreno ganado.
- Los padres buscan un colegio que sepa realmente lo que hace y por eso no dejan la
educación de sus hijos en manos de cualquiera. La página es un instrumento que le
puede servir para ofrecer información que lo ayude a posicionarse como referente de
educación.
- A través de una sección de comentarios, Chat, soporte en línea, o un espacio para
compartir e intercambiar ideas con los padres, su institución puede crear canales de
comunicación que lo ayudarán a acercarse a ellos y, lo más importante en este sector,
fortalecer la confianza.
1.3.2 Desventajas.
- Cualquier persona del mundo puede subir información que no es cierta simplemente
porque lo beneficia en algún sentido económico o social.
11
- El aislamiento que se puede llegar a dar entre seres humanos, eliminando la
interacción social física. Requiere equipos y recursos técnicos.
- Puede convertirse en un arma de doble filo; se puede evidenciar si no se guía
correctamente y si no se mantiene un control estricto en su uso.
- Los estudiantes a distancia cuentan con capital cultural acorde a su mundo virtual.
- Los archivos se dejan guardados en el servidor de la institución u/o empresa que
ofrecen herramientas Informáticas, quedando vulnerables a los usuarios. forma muy
superficial.
1.4 Tipos de enseñanza – aprendizaje
La Educación en definición es “Un proceso de socialización y aprendizaje
encaminando al desarrollo intelectual y ético de una persona” (WordReference, 2019).
Es un proceso de enseñanza – aprendizaje que permite desarrollar en los estudiantes
capacidades intelectuales, como docentes nuestra labor es transmitir conocimiento de
manera sistematizada, experimental o de manera informal.
Ante las innovaciones tecnológicas en la sociedad, se demanda una transformación
radical de los procesos educativos (tantos formales como informales) en la
necesidad de interactividad que garantice la conectividad tecnológica, lo cual
permita a los sistemas educativos de américa latina, una serie de transformaciónes
que re-significaran la enseñanza y aprendizaje; este escenario representa a la vez un
peligro y una oportunidad. (Gonzales, 2016, p15)
1.4.1 E- learning
Conocido también como aprendizaje electrónico (e-learning) es un curso a distancia
que busca una educación global y constante. De acuerdo con Barbera, E. (2001):
Se basa en un proceso formativo que debe ser planificado, organizado, seguido,
apoyado y valorado sirviéndose de los medios necesarios para hacer posible una
comunicación lo más completa posible entre aprendiz y docente. El medio que
materializa dicha comunicación es comúnmente el ordenador que está conectado a
una red…incluso con conexión inalámbrica. (p.18)
1.4.2 M-learning
También conocido como aprendizaje móvil, en la actualidad muchas instituciones
educativas están empleando recursos tecnológicos como proyector, laboratorios
informática, pizarras electrónicas y todas estás conectadas a internet. Se dice que el fin de
12
los libros ha llegado ya que estos se encuentran descontextualizados, el contenido es
excesivo no es atractivo para el estudiante, como docentes somos conscientes que en la red
hay mayor flexibilidad, al encontrarse en la red el estudiante construye su propio
aprendizaje.
Ventajas
- Ubicuidad
- Autonomía
- Interacción inmediata
- Aprendizaje contextualizado
- Aprendizaje informal
- Fácil acceso
Desventajas
- Distracción en los estudiantes
- En algunos casos requieren más tiempo para realizar una tàrea académica
- no todo lo que encontramos en línea es verosímil.
- Duración de la batería.
- La conectividad.
1.4.3 B- learning
Blended learnig, si traducimos la palabra blended al español se traduce como
“mezcla o mistura”. Combina e-learning con encuentros presenciales. De acuerdo con
Thorne (2003) , “B-Learning es casi ilimitado y representa un proceso que evoluciona
naturalmente desde las formas tradicionales de aprendizaje hasta un camino de desarrollo
personalizado y enfocado”(p.16).
Es importante reconocer que ahora el centro del proceso educativo es el estudiante,
es el actor principal el docente ocupa el rol de facilitador ya que no es el protagonista ya
que no es la única fuente de conocimiento aunque no deja de ser guía para que los
estudiantes construyan conocimientos.
13
1.4.4 Machine learning
Machine learning o Aprendizaje automático Utiliza la ciencia artificial como
disciplina es posible que con esta se cree sistemas que aprendan automáticamente pero
debemos entender que aprender en esta rama quiere decir identificar patones complejos de
millones de datos.
Este tipo de aprendizaje ayuda:
- Detectar fraudes
- Presentar resultados de sitios web favoritos
- Incorporar publicidad en tiempo real en páginas web y dispositivos móviles
- Analizar el estado de ánimo en base a los textos
- Modelar precios
- Filtrar correos no deseados
El machine learning reproduce patrones de datos, la integra a otros antecedentes, y
aplica resultados de manera automática para la toma de decisiones.
1.4.5 U-learning.
Aprendizaje ubicuo es la capacidad de aprender con distintos contextos, momentos
y por medio de distintos medios digitales.
Características:
El acceso es permanente
El aprendizaje se adapta al tiempo del estudiante
Brinda un aprendizaje individual como colaborativo
Es variado en cuanto a recursos educativos
Constante actualización de información
14
Capítulo II
La Web en los ambientes Educativos
2.1 Educación virtual
También llamada educación en línea es un espacio de formación donde no
necesariamente tiene que haber una interacción de forma presencial ya que esta propicia un
espacio propio de formación apoyado en las TIC.
Es importante precisar esta solo es una modalidad de aprendizaje, estas ayudan a
estudiantes que se encuentren muy ocupados o son absorbidos por su forma de trabajo.
Recordemos que la educación de calidad puede sobresalir a pesar de no tener una
tecnología adecuada, pero si tienes una buena tecnología y no brindas una buena educación
entonces esta seguirá siendo de baja calidad.
La educación virtual es una modalidad educativa una manera de hacer educación no
significa por tanto que sea única o la mejor alternativa para el desarrollo de
procesos educativos. La bondad de la educación virtual no se encuentra en ella;
depende de una serie de características y condiciones de los sujetos que en ella
intervienen. (Unigarro, 2004, p.18).
2.2 Plataformas educativas
En definición, “Una plataforma educativa, Learning Management system (LMS) o
sistema de gestión de aprendizaje, es aquella herramienta que posibilita crear, gestiònar y
distribuir las actividades formativas virtual a través de un servidor web” (CERMI)
Actualmente tenemos distintas plataformas virtuales cada una de ellas con recursos y
herramientas accesibles para el usuario. Las funciones principales de gestión de
aprendizaje son:
- Distribución de recursos y actividad de formación
- Gestión de usuarios
- Control de acceso
- Seguimiento
- Evaluaciones
- Servicios como foros, chat.
Con el único objetivo de brindar una educaciónn a distancia con una constante
interacción entre docente – estudiante.
Tenemos aquí algunas plataformas más conocidas:
- Moodle
15
- JClic- JClicFressa
- Constructor 2.0
- iBooks Author
- Picaa 2
2.2.1 Moodle.
En definición,
Moodle es un sistema de gestión de cursos de código abierto (CMS, universidades,
colegios comunitarios, escuelas de K-12 e incluso instructores individuales que
utilizan para agregar tecnología web a sus cursos. Más de 30,000 organizaciones
educativas de todo el mundo utilizan actualmente Moodle para impartir cursos en línea
y para complementar los cursos tradicionales presenciales. Moodle está disponible de
forma gratuita en la Web (http://www.moodle.org), de modo que cualquiera puede
descargarlo e instalarlo. Más sobre esto más adelante en este prefacio.(Cole y Foster,
2008, p. 18).
2.2.2 Chamilo.
La página web oficial de chamilo lo define esta como:
Es un proyecto de opta por el código abierto de una manera radical. Su objetivo es
hacerle llegar la mejor plataforma de e-learning y colaboración en el mundo del
código abierto, también es una marca cuya propiedad ostentan todos los que son parte
de la asociación chamilo La marca no es, ni será jamas, propiedad de un único titular
esta se distribuye bajo la licencia GNU/GPLv3. (Chamilo, 2019)
2.2.3 Google for Education.
De acuerdo con la web oficial Google for Education (2019) proporciona:
Libertad de dedicar más tiempo a personalizar la experiencia de aprendizaje y menos
tiempo a administrarla. Los alumnos pueden aprender las destrezas de solución de
problemas que se necesitan en el siglo XXI y las habilidades que utilizarán en sus
futuras carreras profesionales, con funciones de accesibilidad que permiten que toda la
clase pueda optimizar el trabajo.
16
2.2.4 OpenDex
Es la plataforma de software de aprendizaje masivamente escalable detrás de
OpenDex también es la plataforma de aprendizaje elegida por organizaciones globales
como Microsoft e IBM. OpenDex es el destino de aprendizaje en línea fundado por
Harvard y MIT en 2012 ofrece cursos de alta calidad desde las mejores universidades
e instituciones del mundo hasta estudiantes de todo el mundo. Es el único proveedor
de MOOC líder que es sin fines de lucro y de código abierto. La misión de edX Es:
Aumentar el acceso a la educación de alta calidad para todos, en todas partes, mejorar
la enseñanza y el aprendizaje en el campus y en línea, Avanza la enseñanza y el
aprendizaje a través de la investigación. (OpenDex, 2019)
2.3 Tipos de sitios web educativos
De acuerdo con Moreira (2003) ,
Un sitio web educativo pudiéramos definirlo, en un sentido amplio, como espacios o
páginas en la WWW que ofrecen información, recursos o materiales relacionados con
el campo o ámbito de la educación. De este modo, bajo la categoría de web educativo
o de interés educativo se aglutinan páginas personales del profesorado, webs de
instituciones educativas como las universidades o el Ministerio de Educación, Cultura
y Deportes, entornos o plataformas de teleformación en los que se desarrollan cursos a
distancia, páginas de empresas dedicadas a la formación, bases de datos en las que se
pueden consultar revistas o documentos sobre la enseñanza y la educación, webs en
los que se encuentran actividades para que sean cumplementadas por los alumnos o
unidades didácticas para el aula, etc. (p.23-24).
El objetivo principal de una web o plataforma educativa es mejorar y facilitar el
proceso de enseñanza – aprendizaje con recursos educativos de fácil acceso.
Debemos considerar que existe tipos de página web dependiendo de su
finalidad pueden ser las siguientes:
17
2.3.1 Web Institucionales.
En definición, Se denomina página web institucional a aquella que publica la
información oficial de la empresa, entidad u organismo (Folgado et al., 2015).
Las web institucionales educativas son herramientas educativas que brindan
información por medio de una plataforma. Las instituciones cuentan con un dominio
dentro de la Red con fines educativos.
Estas web tienen que ser atractivas para los usuarios, deben estar actualizadas
constantemente y estructurada. Dentro de este tipo de páginas web tenemos:
- Ministerio de educación
- Ministerio de Cultura
- Ministerio de deportes
- Web institucionales
2.3.2 Web de recursos y bases de datos educativos.
Los recursos que podemos encontrar en este tipo de web son enlaces, documentos,
direcciones, software entre otros. Existe un repositorio virtual de revistas educativas. Las
bases de datos educativas son bibliotecas electrónicas especializadas en temas específicos
es posible encontrar libros, papers, archivos, imágenes.
A continuación una lista de recursos para el docente:
- Profesorado:
http://www.profesorado.net/
- TESEO
TIPOS DE SITIOS WEB EDUCATIVOS
Informativa
web de institución o
grupos educativos
Web de recursos y base
de datos educativas
Formativa
Material didáctico
intranet Educativas
18
http://www.mcu.es/TESEO/teseo.html
- Eduteca
www.eduteca.com
- Educa Web
http://www.educaweb.com
- Educalia
www.educalia.org
2.3.3 Intranet educativa
En definición intranet es “un sitio web interno diseñado para ser utilizado dentro de
los límites de la compañía” (InnovaAge, 2011). Debemos tener en cuenta que intranet no
es sinónimo de internet las intranet son privadas y el acceso es restringido.
La intranet está restringidas a aquellas personas que están conectadas a la red
privada de una empresa dentro de un campus web.
Son aquellas que ofrecen un entorno o escenario virtual restringido, normalmente
con contraseña, para el desarrollo de alguna actividad de enseñanza. Suelen ser sitios web
dedicados a la teleformación o educación a distancia empleando los recursos de Internet.
Para la creación de estas webs suele utilizarse un software específico denominado como
plataforma, sistema o entorno de teleformación. Actualmente existen varios programas de
este tipo entre los que destacan el WebCT, Learning Space, Luvit, FirstClass, entre otros.
Este tipo de entornos o intranets suelen ser desarrollados bien por universidades para la
oferta de cursos dentro de un campus virtual.
2.3.4 Campus virtual.
Un campus virtual es un espacio netamente para docentes que utiliza un entorno
virtual de aprendizaje apoyado en la web, esta posee una estructura.
Debemos tener en cuenta que todas estas están apoyadas en Internet, estas
contienen:
- Foros
- Aulas virtuales
- Chat
- Material educativo
- Evaluaciones en línea
19
2.3.5 Aula Virtual
En definición,
Las aulas virtuales son una nueva modalidad educativa que se desarrolla de manera
complementaria o independiente a las formas tradicionales de educación, y que
surge a partir de la incorporación de las tecnologías de información y comunicación
(TIC), en los procesos de enseñanza-aprendizaje. Actualmente se utiliza en muchas
universidades, escuelas y organizaciones laborales (Recuperado de: Repositorio
Wikipedia, 2019).
De acuerdo con la definición es la plataforma de enseñanza virtual mediante la cual
los actores del proceso educativo tienen acceso de diversas herramientas que facilitan el
desarrollo de los procesos educativo.
Proporciona otras herramientas de carácter general que facilitan una comunicación
más flexible y permiten el acceso a la información y los recursos digitales de las
asignaturas.
Esta es de fácil acceso y versátil que proporciona herramientas que facilitan la
docencia de forma virtual con la posibilidad de crear espacios colaborativos.
Herramientas
Una vez creado el sitio o espacio de asignatura por parte del profesorado, éste
puede configurar dicho sitio con las herramientas en las que desee trabajar con el
alumnado. Entre las herramientas que se disponen en el Aula Virtual se destacan las
siguientes:
Recursos
Algunos recursos que encontramos son:
- Material educativo.
- Guía docente
- Calendario asignatura (fechas de sesiones, fecha de entrega de tàreas entre otros).
- Anuncios
- Mensajes
- Foros
- Chat
- Tàreas
- Evaluaciones
20
2.4 Páginas web con contenido educativo
Las páginas web educativas deben poseer las siguientes características de acuerdo
con Badia, Mauri y Monereo (2006) sostienen:
a) Toda página web educativa supone la existencia de una institución,
organismo, colectividad, grupo o persona que promueve la existencia de
dicho espacio en la red. La autoría debe poseer un reconocimiento de dicho
espacio en la red. La autoría debe poseer un reconocimiento público,
garantizar la autenticidad de los datos públicos, y mantener un sistema de
actualización permanente de la información que se publica en la página
web.
b) Una página web educativa debe estar orientada a contribuir al logro de una
serie de finalidades educativas socialmente definidas relaciona con el
aprendizaje de las personas, bien de la educación formal o bien de la
educación no formal. En otras palabras, debe estar intencionalmente
diseñada y elaborada para poder ser usada con vistas a promover el cambio
del conocimiento de las personas en un sentido muy amplio. (pp. 20 -21)
Podemos concluir que específicamente las páginas educativas poseen tres
funciones específicas:
2.4.1 Informativa
La información que encontramos aquí debe estar directamente relacionada
con el contenido curricular, para que pueda ser utilizado como herramienta
educativa.
Podemos representar estos contenidos en forma textual, grafica, imagen,
video, animaciones, enlaces de hipermedia modelos dinámicos entre otros.
2.4.2 Comunicativa
Es importante tener una buena relación educativa con el estudiante esta
función nos permite intercambiar información por medio de estos espacios
virtuales.
Los recursos más utilizados son Audioconferencias, videoconferencia, chat,
foros, correos electrónicos entre otros.
2.4.3 Formativa
21
Consideramos una educación formativa ya que dentro de estas podemos
reforzar (retroalimetacion-feedback), se puede hacer un seguimiento por medio de
las evaluaciones.
Aquí te mostramos algunas páginas educativas más utilizadas:
Aulablog
Son blog educativos, en la cual se publica noticias o post de docentes inscritos en la
página.
Biblioteca escolar digital
Es un repositorio de material educativo que te enlaza directamente a la información
por medio de una cita textual. Aquí encontraremos recursos para los distintos niveles
educativos (inicial, primaria y secundaria).
Buscador infantil
Considerando que es el primer buscador para niños, el uso de esta es muy sencillo.
Sobre todo es que la información esta filtrada y adaptada con un lenguaje infantil.
Está basada en la tecnología de búsqueda de google.
Educ.ar
Es un portal web administrado por el ministerio de educación de Argentina
podemos encontrar material que puede ser utilizado para la docencia, y para aquellos
que son autodidactas.
Educared
Específicamente es una plataforma para el docente esta fue fundado por una
compañía telefónica en colaboración con otras instituciones. Es muy amplio ofrece
foros, noticia, puedes conectarte con escuelas latinoamericanas entre otros.
educ@contic
Portal español impulsado por el plan avanza especialmente su objetivo es la plana
docente.
Eduteka
En esta plataforma encontramos documentos de carácter teórico sobre las TIC en la
educación.
Instituto de tecnologías educativas
Es un portal gratuito, completo, podemos encontrar material educativo para las
distintas áreas de trabajo interconectadas con las TIC.
22
Maestroteca
Esta plataforma posee un buscador propio donde encontramos, blogs, Social
Networking side, aplicaciones didácticas, enciclopedias entre otras.
Profes.net
De propiedad privada pero puede tener acceso cualquier docente en los accesos
libres. Disponible para todos los niveles educativos inicial, primaria y secundaria.
Contiene un repositorio de revistas digitales, biblioteca entre otros.
23
Capítulo III
Diseños de páginas Web Educativas
3.1 Diseño adaptativo
Rubio (2013) sostiene que,
El diseño web adaptativo o adaptable (en inglés, Adaptive) es una técnica de
diseño y desarrollo web que mediante el uso de estructuras e imágenes fluidas, así
como de media-queries en las hojas de estilo CSS, se consigue adaptar el sitio web
al dispositivo del usuario. (p.23)
3.1.1 Bootstraps
Según la página web oficial de Boostrap “es un conjunto de herramientas de código
abierto para desarrollar con HTML, CSS y JS. Realice rápidamente un prototipo de sus
ideas o construya su aplicación completa con nuestras variables y mixins de Sass, sistema
de cuadrícula sensible, extensos componentes precompilados y potentes complementos
creados en jQuery.” (Bootstraps, 2019).
Ventajas
- Estas se actualizan por twitter
- Puedes realizar distintas combinaciones con HTML5, CSS3
- Tienen adaptación responsive
- Se integra fácilmente con JavaScript
- Ofrece una gran cantidad de plugins
- Se maquetan en 12 columnas
3.1.2 Wix
Wix fue creada por 3 fundadores: Avishai Abrahami, Nadav Abrahami y
Giora Kaplan. La idea nació (¡en la playa!) mientras tres amigos construían
una página web para desarrollar otro proyecto. Mientras construían una
página web como base de otra idea de emprendimiento, el trío de
emprendedores se dio cuenta rápidamente que crear su propio sitio web era
difícil, frustrante y muy costoso. Esta desagradable experiencia fue la que
los llevó a que, en ese instante, comenzara a volar la imaginación y
decidieran dar la posibilidad a cualquier persona de crear su propia página
24
web sin necesidad de códigos ni conocimientos de diseño. Mejor aún,
decidieron también que sea gratis. (Wix, 2019)
Lo que hace atractivo a Wix es su fácil uso y sobre todo es gratuito. Podemos
asegurar que incluso un niño ya puede poseer su propia página web, todo está hecho a base
de bloques, el internas es sencillo de usar.
Hoy en día podemos afirmar que es tendencia incluso youtubers muy reconocidos
como “Luisito comunica” lo utilizan (influencer).
Características
- Sencillo editor
- Hosting gratuito
- Puedes incluir App de ventas
- Se adapta a dispositivos móviles
Desventajas
- Una vez que creas tu página web en esta plataforma al querer buscarte no te encontrarán
de forma sencilla, usualmente una posting cuesta entre 12 € anuales, ahora si quieres tu
página tenga más visitas tendrás que pagar 4€ mensuales a este compañía.
Personalmente creo que esa es la mayor desventaja.
- No puedes modificar el CSS.
- Tienes tres òpciones para crear; puedes escoger solo una, no puedes tenerlas todas.
3.1.3 Joomla
Es un sistema de gestor dinámicos (CMS, en adelante siglas de Content
Management System) que permite crear sitios web de alta interactividad, profesionalidad,
eficiencia y sencillez.
La interfaz administrativa de Joomla es tan sencilla y amigable que cualquier
persona puede administrar sus propio contenidos web sin la necesidad de poseer
conocimientos técnicos, sin saber lenguaje HTML, y sin recurrir a un webmaster cada vez
que hay que actualizar tal o cual cosa en un sitio web.
Todos los aspectos técnicos del sistema están ocultos al usuario común, y han sido
resueltos por los programadores de joomla haciendo las cosas sencillas para que los
25
administradores y editores de contenidos puedan prescindir casi completamente de una
capacitación técnica especializada.
Joomla se lleva a cabo gracias a sus dos principales elementos:
1. La base de datos MySQL: se guarda toda la información y la mayor parte de la
configuración del sistema, de una forma ordenada y en distintas tablas, cada una de
las cuales almacena información específica y determinadas.
2. Los scripts PHP: son los que ejecutan las acciones de consulta y realizan
modificaciones en la base de datos convirtiendo los datos en simples páginas web
interpretables por los navegadores de internet y perfectamente inteligibles para los
usuarios y administradores.
3.1.4 Drupal
Drupal es un programa o una aplicación web, que se utiliza para gestiònar
contenidos de un sitio web. Es una herramienta para la gestión de contenidos de los sitios
web. Es es una herramienta utilizada por desarrolladores web para crear herramientas de
publicación web a media en algunos aspectos, incluso se puede llamar a Drupal un
lenguaje de programación.
Drupal es una comunidad repartida en el mundo, que comparten una meta común o
interés; y sienten que tienen algo que los conecta.
Esta comunidad cuenta con más de medio millón de miembros que de una manera u
otra contribuyen al proyecto llamado Drupal.
3.2 Plantillas web
De acuerdo con Alcayde y Gómez (2014), “Las principales ventajas del uso de
plantillas son indudables, aunque muchas de otras ventajas no son tan aparentes. A
continuación se muestran las principales ventajas del uso de plantillas” (p.19).
Reducción del tipo de desarrollo
Cuando a través de la plantilla se tiene desarrollado el aspecto gráfico de la página,
y la creación de las zonas fijas, el diseñador puede obviar estos temas y centrarse
exclusivamente en la creación de contenido.
26
Facilidad de mantenimiento
Cuando un sitio se desarrolla en base a plantillas, realizar un cambio global tan
solo requiere un cambio. Por ejemplo, si se requiere cambiar el logo, modificando la
plantilla, se actualizan automáticamente todas las páginas del sitio.
Flexibilidad
El diseño con plantillas permite separar por un lado el diseño de la web y su
contenido, siendo mucho más flexible, ya que un cambio de diseño: color, fuente; se
realiza de forma rápida y sencilla.
Coherencia
Al aplicar plantillas se consigue que todas las páginas del sitio mantengan el mismo
formato, distribución, tipo de letras. Mostrando al usuario una imagen corporativa, sólida
y consistente.
Fácil acceso e indexación por los buscadores
Al usar plantillas el contenido de la página queda mejor estructurado, Facilitando a
los robots de los buscadores analizar con facilidad, mejorando el posicionamiento.
Pero no todo son ventajas. El abuso de la utilización de plantillas produce sitios que
tienen prácticamente la misma apariencia y poco personalizados a los requerimientos
reales del usuario.
27
Capítulo IV
Herramientas para construir una página
4.1 Servidor Local
En definición, un servidor local es:
Es el servicio que provee a los usuarios de Internet un sistema para poder almacenar
información, imágenes, vídeo, o cualquier contenido accesible vía web. Es una
analogía de "hospedaje o alojamiento en hoteles o habitaciones" donde uno ocupa
un lugar específico, en este caso la analogía alojamiento web o alojamiento de
páginas web, se refiere al lugar que ocupa una página web, sitio web,
sistema, correo electrónico, archivos, etc., en internet o más específicamente en
un servidor que, por lo general, hospeda varias aplicaciones o páginas web
(Recuperado de: Repositorio Wikipedia, 2019).
Algunos servidores locales más conocidos son:
- BlueHost
- HostGator
- Hostinger
- GoDaddy
- Web.com
- A2Hosting
- Inmotion
- 00webhost
4.2 Editores
Son aplicaciones diseñadas para la elaboración de documentos desarrollados en
lenguaje HTML. Podemos distinguir tres tipos de editores: sin formato, los editores de
texto con ventanas y los editores WYSIWYG.
A continuación una lista de editores:
- Sublime Text
- Notepad ++
- Dreamweaver
- Brackets
- Netbeans
- Microsoft Visual Studio for Web
28
- Amaya
- JetBrains Webstorm
- Kompozer
- Aptana Studio
- CoffeeCup Editor
- TextWrangler
- Textmate
- BlueGriffon
- Komodo Edit
- VIM
- PSPad
- Atom
- EditPlus
- Light Table
29
APLICACIÓN DIDÀCTICA
MÒDULO LUGAR DURACI
ÓN
UNIDAD
DIDÀCTICA N° …
Pàginas Web Taller de Cómputo 02H.
APRENDIZAJE introducción a Boostrap FECHA
NOMBRE DE LA ACTIVIDAD Mi primera página Web
1. VALORES, ACTITUDES Y EJES TRANSVERSALES
CONOCIMI
ENTOS
PROCEDIMI
ENTO VALORES ACTITUDES
CONT.
TRANSVERSAL
-Manejo de
HTML
-manejo
correcto de
slider.
-insertar
texto,
imagenes,
enlaces en
URL.
Insertar y editar
sliders, narvbar,
video,
imágenes
utilizando la
herramienta
boostraps,
utilizando el
sublime tex
como editor de
texto.
Honestidad
Obrar con transparencia y clara
orientación moral cumpliendo con
las responsabilidades asignadas en
el uso de las máquinas, equipos y
herramientas. Así como de la
información, los recursos materiales
y económicos. Mostrar una
conducta ejemplar dentro y fuera
del trabajo.
Gestión de Riesgos:
Fomentar el
desarrollo de una
cultura de previsión
y control del riesgo
de desastre en la
sociedad.
Respeto
Desarrollar una conducta que
considere en su justo valor los
derechos fundamentales de nuestros
semejantes y de nosotros mismos.
30
Asimismo, aceptar y cumplir las
leyes, las normas sociales y las de la
naturaleza.
2. SECUENCIA METODOLÓGICA
ESTRATEGIAS/ ACCIONES
MÉTODOS/
TÉCNICAS
DURAC
IÓN
MINUT
OS
Presentación de la actividad (inicio)
Se incentiva al alumno indicando la importancia de tener una página web en
la actualidad.
Se plantea:
¿Qué es Boostrap?
Bootstrap es un framework CSS y Javascript diseñado para la creación de
interfaces limpias y con un diseño
responsive. Además, ofrece un amplio
abanico de herramientas y funciones,
de manera que los usuarios pueden
crear prácticamente cualquier tipo de sitio web haciendo uso de los mismos.
Se basa en una estructura dividida en un total de 12 columnas que los
desarrolladores pueden gestiònar en función de sus necesidades y preferencias,
en función de cuatro tamaños de dispositivo.
Se explica al alumno que al igual que la mayoria de framework cadad cierto
periodo de tiempo saca nuevas versiones, del cual usaremos la version 5.
Se comenta al alumno que reconoceremos la distribucion de boostrap, y el uso
de el editor sublimeText.
- Observación
- Lluvia de ideas
20
31
Proporcionar la información
Se resalta la importancia de poseer una página web, ya que actualmente
muchas empresas lo utilizan para brindar información acerca de negocios,
instituciones o en algunos casos hacer ventas en línea.
Se muestra por medio del proyector las partes del área de trabajo de sublime
text, boostrap y se reconoce la distribución de las herramientas.
Se describe el procedimiento para iniciar con la creación de la página web.
- Casuísticas
- Estudio
dirigido 80
Desarrollar la práctica dirigida.
Se indica a los estudiantes revisar el instructivo para Guìarse en el
reconocimiento de la distribución
Del área de trabajo en sublimetext.
Se debe considerar las recomendaciones y el uso de las buenas pràcticas
explicadas en clase
Siguiendo los ejemplos.
- Demostración
- Observación
- Práctica dirigida
100
Solución de problemas y transferencia. (Cierre)
Se explica la importancia de poseer una página web y la importancia de
gozar de sus beneficios.
- Planteamiento de
casos
- Participación
directa y diàlogo
25
Evaluación – Comprobación de lo aprendido
Inicio y proceso teórico: Los alumnos muestran lo aprendido aplicando los
standares de boostrap.
Proceso práctico: Los alumnos reconocen, ejecutan y aplican la ficha de
laboratorio.
- Participación
personal y
diàlogo 15
32
3. RECURSOS, MEDIOS Y MATERIALES
MEDIOS DIDÁCTICOS MEDIOS Y MATERIALES
Hoja de información, pràcticas digital. Computadora, proyector multimedia, parlantes
4. EVALUACIÓN
CRITERIO DE
EVALUACIÓN
Elabora una página web sobre tus viajes utilizando enlaces, videos, fotos,
texto.
INDICADORES TÉCNICAS INSTRUMENTOS
- Identifica y maqueta su sitio web de
forma independiente.
- Reconoce el interfaz de trabajo y
realiza cambios dentro de una etiqueta.
- Inserta slider, narvar, videos, fotos,
texto al sitio web
- Observación e
intervención
- Participación activa.
- Lista de cotejo
________________________
Xiomira Jaime Torres
Profesora
33
MATRIZ DE EVALUACIÓN
UNIDAD III ÀREA: EDUCACION PARA EL TRABAJO
DOCENTE:
GESTIÒN DE
PROCESOS
EJECUCIÒN DE
PROCESOS
COMPRENSIÒN
Y APLICACIÓN
DE
TECNOLOGÌAS
ACTITUDIN
AL
Define las
estructuras de una
página web por
medio de la
maquetación
Reconoce el
interfaz de trabajo
y realiza cambios
dentro de una
etiqueta
Inserta slider,
narvar, videos,
fotos, texto al sitio
web
Cumple con
mantener
limpia y
ordenada el
aula y el lugar
donde trabaja.
N° APELLIDOS Y NOMBRES 4 4 4 4
1
2
3
4
5
6
7
8
9
10
11
34
1. Descargamos un editor de texto plano:
visualCode
Atom
SublimeText
1
2
NOTA:
Ctrl + S = guardar
Shift + direccional =seleccionar
35
Crea una carpeta principal con el nombre “Mi primera página web”, esta tiene que
contener 3 carpetas más:
Img
Css
jv
Ingresamos al siguiente Link : https://getbootstrap.com/
3
Guardamos nuestro
archivo con la
extensión .html
4
36
Abrimos la carpeta “Mi primera pàgina”, y damos click al formato index. - Actualizamos la pàgina aprimiento F5
5
37
Maquetamos
Creamos los contenedores (dependiendo de la maquetación).
1
BARRA DE MENÙ
SLIDER
TÌTULO
IMAGEN TEXTO
VIDEO
TÌTULO
TEXTO
12
12
4-4-4
4-2-6
4-4-4
4-2-6
FLUI
D
CO
NT
AIN
ER
2
38
Creamos un Narvbar o también llamado barra de Menú. Copiaremos el siguiente
Código.
<div class="container-fluid">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Logo</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-
target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-
expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
3
39
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Principal<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">fotos</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
video
</a>
</li>
</div>
</nav>
Insertamos un slider, hacemos el mismo procedimiento.
Còdigo: <div class="content">
<div class="row">
//INSERTAMOS AQUÍ EL CÒDIGO COPIADO//
</div>
</div> <div id="carouselExampleControls" class="carousel slide" data-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active"> <img src="..." class="d-block w-100" alt="..."> </div> <div class="carousel-item"> <img src="..." class="d-block w-100" alt="..."> </div> <div class="carousel-item"> <img src="..." class="d-block w-100" alt="..."> </div> </div> <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span>
4
40
</a> <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div>
INSERTAMOS LAS IMÁGENES QUE DESEAMOS PERO SE SUGIERE
UNA MEDIDA DE 1000 PX X 500 PX
<div class="carousel-item active">
<img src="img/1.jpg" class="d-block w-100" alt="...">
</div>
Img ----- texto
<!-- segundo Row-->
<div class="row">
<div class="col-4">
</div>
<div class="col-2">
</div>
<div class="col-6">
</div>
Imagen
<div class="col-4">
<img src="img/1.jpg" class="img-fluid">
</div>
Ingresamos Texto con el siguiente código
<div class="col-6">
<div class="parrafo">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
41
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
Agregar títulos
<div class="row">
<div class="col-4">
</div>
<div class="col-4">
<div class="tìtulo">
Lorem ipsum dolor sit amet
</div>
</div>
<div class="col-4">
</div>
</div>
url – enlaces
<div class="row">
<div class="col-4">
</div>
<div class="col-2">
</div>
<div class="col-6">
</div>
Para insertar video copiar el URL de youtube
Importante para que se adapte a las columnas
class="img-fluid"
42
Importante enlazar
<link rel="stylesheet" type="text/css" href="css/estilos.css">
Antes de terminar la cabecera
Modificamos los estilos
.row{
margin: 30px;
}
.tìtulo {
text-align: center;
font-size: 25px;
font-family: century gothic;
}
.parrafo {
text-align: justify;
43
font-size: 15px;
font-family: century gothic;
}
PRODUCTO FINAL
44
Síntesis
Hoy en día el docente debe ser capaz de adaptarse a las nuevas tecnologías, y emplear
nuevas técnicas, herramientas y metodologías de aprendizaje. Sabemos que como docentes
debemos brindar una educación integral apoyados con las nuevas tecnologías como son:
las páginas web educativas. En internet, podemos encontrar distinta información la cual no
es 100% segura; es por ello que En la presente monografía incluimos páginas educativas
seguras Debemos recordar que páginas web y sitio web no son sinónimos, sino que estas se
encuentran dentro de una jerarquía
Tenemos que tener en cuenta que las aulas virtuales no reemplazan al docente. Son un
apoyo para lograr nuestro objetivo. A diferencia de una educación tradicional aquí
podemos interrelacionarnos estudiante – profesor, entre compañeros, lo cual desarrolla en
ellos un trabajo colaborativo.
Hemos visto distintas herramientas para desarrollar páginas web gratuitas como
privadas. En la actualidad, la herramienta más utilizada es Boostraps que es una
framework útil para las páginas web. La rapidez con que se puede crear un sitio web es
impresionante, su código es de fácil acceso, encontramos distintos elementos como barras,
tablas, botones, formularios, entre otros.
45
REFERENCIAS
Alcayde, A y Gómez, J. (2014).Construcción de páginas Web.RA-MA,S.A.Madrid.
Area, M. (2003). De los webs educativos al material didáctico web. Artículo publicado en
la revista Comunicación y pedagogía.
Badia, A., Mauri, T. y Monereo,C.(2006). La práctica psicopedagógica e educación no
formal.Barcelona: UOC.
Barberá, E. (2008).Aprender e-learning.Barcelona: Paidós Ibérica, S.A.
Cole, J. y Foster, H.(2008).Using Moodle, 2nd Edition.O’Reilly media,Inc,United States of
America.
González, J. (2016).Uso de las tecnologías en la educación.Mexico: UNID.
Silva y Lopez (2003).Internet y Correo electrónico,España. Pág 2: NetBilblo,S.L.
Thorne, k. (2003). Blended learning: How to integrte online and traditional learning.Library
British library cataloguing in publication Dato.London.
Valverde, M., Ormeño, J., García, J., y Carbajal, M.(2015).Ofimática y archivo de
documentos. Madrid:Editex.
Unigarro, M.(2004).Educación virtual: Encuentro formativo en el ciberespacio. Colombia:
UNAB.
46
Webgrafía
Boostraps(2019).Definición de Boostraps. https://getbootstrap.com
Caisaguano, H.(2016). Ventajas y desventajas de las
pàginasweb.http://hugocaisaguano.blogspot.com/2016/07/normal-0-21-false-
false-false-es-x-none_25.html
Concepto (2018). Definición Página web.https://concepto.de/pàgina-web/#ixzz5rmx8Jm4t
Google (2019).Plataforma google for educational. https://edu.google.com/intl/es-4
19_ALL/why-google/k-12-solutions/?modal_active=none
Manarea(2014). Sitios web educativos.https://manarea.webs.ull.es/12-sitios-web-
educativos-imprescindibles-para-los-docentes/
Multimedia (2013). Ventajas y desventajas de las pàginas web.
http://multimediapasto2.blogspot.com/2013/09/ventajas-y-desventajas-de-una-
pàgina.html
OpenDex (2019).Definición. https://open.edx.org/about-open-edx/
Publicar(2015).Beneficios de las páginas web. https://www.publicar.com/blog/beneficios-
pàginas-web-educacion
Rubio, M. (2013). Definición de diseño adaptativo. https://magazine.joomla.org/es/ediciones-
anteriores/sept-2013/item/1514-que-es-diseno-adaptativo
Wikipedia (2019) .definición Páginas Web.
https://es.wikipedia.org/wiki/P%C3%A1gina_web
Wikipedia (2019).Definición Aula virtual. https://es.wikipedia.org/wiki/Aula_virtual
47
Wix(2019).fundamentos de wix, características.
https://es.wix.com/upgrade/website?fbclid=IwAR2s_RjWPI7Oq_8_xQ-
zHdv7xk87RMaSvghwb6ZLPZoBGv-sMYs9xeP9RUw
48
ANEXOS
49
MANUAL DE BOOTSTRAP
EJEMPLO DE WEB DE BOOTSTRAP.
Podremos visualizar webs realizadas con Bootstrap y ver los acabados finales de otros
desarrolladores y/o diseñadores web. http://expo.getbootstrap.com
50
COMO TRABAJAR CON BOOTSTRAP.
PARTES DEL SITIO WEB.
Para iniciar a trabajar con Bootstrap nos dirigimos al sitio web https://getbootstrap.com y visualizaremos la presentación del sitio web, luego podemos observar el menú donde lo componen 7 opciones. Digitamos las opciones.
51
TRABAJANDO CON BOOTSTRAP.
En el sitio de Bootstrap encontramos 3 formas de trabajar en BOOTSTRAP, la cuales son:
CSS compilado y JS El método convencional de
trabajar con Bootstrap 4, por la
facilidad de los archivos css y
Js.
Archivo Fuente En estos archivos nos descarga
todo el proyecto de Bootstrap
4 para comprimirlo con sass
(KoalaSass)
Bootstrap CDN En la manera de trabajar
rápidamente con Bootstrap ya
que nos enlazamos median una
etiqueta a los archivos base de
Bootstrap 4.
Nos dirigimos a DOCUMENTACIÓN/ COMENZANDO / DESCARGA.
52
Vamos a trabajar con los archivos de CSS COMPILADO Y JS, descargamos de la web y obtenemos
los siguiente archivos.
53
CREAMOS NUESTRO PRIMER DOCUMENTO.
Entramos a la web de Bootstrap 4 nos vamos al menú DOCUMENTACIÓN y clic en la lista
INTRODUCCION categoría PLANTILLA DE INICIO, bajamos y copiamos el código de plantilla de inicio
para colocarlo en nuestro archivo HTML(index.html).
Platilla del sitio web.
Visualizamos en nuestro sitio web.
Vamos a Eliminar y redireccionar los códigos que descargamos para empezar a trabajar.
Redireccionamos el CSS y JS.
54
Index.html ()
<!DOCTYPE html>
<html lang="es"><!-- Cambiamos en a es (Español) -->
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.css">
</head>
<body>
<h1>Hola Mundo!</h1>
<!-- Optional JavaScript -->
<script src="js/bootstrap.js"></script>
</body>
</html>
Comprobación del sitio web.
Comprobamos mediante el explorador los cambios de la etiqueta y sus propiedades
Presionando F12 nos dirigimos a Elementos.
55
BOOTSTRAP 4 ENTORNO DE TRABAJO.
Vea cómo funcionan los aspectos del sistema de cuadrícula Bootstrap en varios dispositivos con
una tabla práctica.
Documentación>Diseño >Cuadricula
Encontraremos el método las condiciones de celdas y método de usas las clases por cada dimensión
de celdas.
“Atención en Bootstrap 4 tenemos una sintaxis más para crear celdas adaptables, en el ejemplo
siguiente visualizaremos y como utilizar”
Index.html
<!DOCTYPE html>
<html lang="es"><!-- Cambiamos en a es (Español) -->
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>Primeras celdas</h1>
<div class="container">
<div class="row">
<div class="col columna">1 of 2</div>
<div class="col columna">2 of 2</div>
56
</div>
<div class="row">
<div class="col-sm-2 columna">1 de 6</div>
<div class="col-sm-3 columna">1 de 3</div>
<div class="col-sm-3 columna">1 de 3</div>
</div>
</div>
<!-- Optional JavaScript -->
<script src="js/bootstrap.js"></script>
</body>
</html>
Style.css
.columna {
background-color: #fc0;
border:1px solid #333;
}
En una etiqueta podemos agregar varias clases parar que se alinea de forma automática.
<div class=" col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2 "> Celda </div>
TEXTO EN BOOTSTRAP. Para acceder a las demás características, propiedades y clases de texto de Bootstrap 4 nos
dirigimos a la web Bootstrap>Documentación>Contenido.
57
Copiamos el siguiente código dentro del BODY.
<div class="container">
<div class="row">
<div class="col-sm-12">
<h1>Titular nivel 1</h1>
<h2>Titular nivel 2</h2>
<h3>Titular nivel 3</h3>
<h4>Titular nivel 4</h4>
<h5>Titular nivel 5</h5>
<h6>Titular nivel 6</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea, fuga dolorum
molestias ex vitae adipisci rerum tempora est error reprehenderit excepturi repellendus
facere iusto repellat atque. Eos, porro ad adipisci.</p>
<h4>Titular <small>con texto secundario</small></h4>
<p class="lead">Párrafo destacado con <code>.lead</code>: <em>Lorem ipsum dolor
sit amet, consectetur adipisicing elit.</em></p>
58
<blockquote class="blockquote-reverse">
<p>O texto destacado con blockquote.</p>
<footer>Con efectos adicionales como un footer o alineación invertida con
<code>.blockquote-reverse</code>.</footer>
</blockquote>
<p class="text-left">Alineamiento a la izquierda con <code>.text-left</code>.</p>
<p class="text-right">Alineamiento a la derecha con <code>.text-right</code></p>
<p class="text-center">Alineamiento centrado con <code>.text-center</code></p>
<p class="text-justify">E incluso alineamiento justificado mediante la clase
<code>.text-justify</code> que requiere de textos más extensos para poder apreciarse
correctamente su efecto sobre un párrafo.</p>
<p>Formato propio para direcciones:</p>
<address> <strong>Marcos González</strong><br>
Calle vivienda, 1 2º<br>
Ciudad, CP008<br>
<abbr title="teléfono">t.</abbr> (+34) 999 999 777</address>
</div>
</div>
<div class="row">
<div class="col-sm-12 col-md-6 columna">
<p>Tiene soporte para <abbr title="esto es una explicación">abreviaturas</abbr>
mediante la etiqueta <pre><abbr></pre></p>
</div>
<div class="col-sm-12 col-md-6 columna" >
<p>E incluso un formato para representar entradas de teclado del usuario como
<kbd>Ctrl+E</kbd> mediante la etiqueta <pre><kbd></pre></p>
</div>
</div>
</div>
Gestión de listas con Bootstrap. Para acceder a las demás características, propiedades y clases de texto de Bootstrap 4 nos
dirigimos a la web Bootstrap>Documento>Contenido
59
Digitar el siguiente cuadro.
<div class="container">
60
<div class="row">
<div class="col-xs-12">
<h4>Listas simples: ordenadas o sin orden.</h4>
<ol>
<li>Elemento primero.</li>
<li>Elemento segundo.
<ol>
<li>Subelemento primero.</li>
<li>Subelemento segundo.</li>
</ol>
</li>
<li>Elemento tercero.</li>
</ol>
<ul>
<li>Elemento primero.</li>
<li>Elemento segundo.
<ul>
<li>Subelemento primero.</li>
<li>Subelemento segundo.</li>
</ul>
</li>
<li>Elemento tercero.</li>
</ul>
<h4>Listas sin estilo con <code>.list-unstyled</code>.</h4>
<ol class="list-unstyled">
<li>Elemento primero.</li>
<li>Elemento segundo.
<ol>
<li>Subelemento primero.</li>
<li>Subelemento segundo.</li>
</ol>
</li>
<li>Elemento tercero.</li>
</ol>
<h4>Listas en línea con <code>.list-inline</code>.</h4>
<ol class="list-inline">
<li>Elemento primero.</li>
<li>Elemento segundo.</li>
<li>Elemento tercero.</li>
</ol>
61
<h4>Listas de descripción verticales u horizontales (con <code>.dl-
horizontal</code>).</h4>
<dl>
<dt>Elemento primero.</dt>
<dd>Definición primera.</dd>
<dt>Elemento segundo.</dt>
<dd>Definición segunda.</dd>
<dt>Elemento tercero.</dt>
<dd>Definición tercera.</dd>
</dl>
<dl class="dl-horizontal">
<dt>Elemento primero.</dt>
<dd>Definición primera.</dd>
<dt>Elemento segundo.</dt>
<dd>Definición segunda.</dd>
<dt>Elemento tercero.</dt>
<dd>Definición tercera.</dd>
</dl>
</div>
</div>
</div>
Gestión de tablas con Bootstrap. Para acceder a las demás características, propiedades y clases de texto de Bootstrap 4 nos
dirigimos a la web Bootstrap>Documento>Contenido
Practica5.
62
Digitar el siguiente contenido.
<div class="container">
<div class="row">
<div class="col-sm-12">
<h4>Tabla básica</h4>
<table class="table">
<thead>
<tr>
<th>ID</th>
<th>Nombre</th>
<th>Apellido</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Marcos</td>
<td>González</td>
</tr>
<tr>
<td>2</td>
<td>Pedro</td>
<td>Picapiedra</td>
</tr>
<tr>
<td>3</td>
<td>Pablo</td>
<td>Mármol</td>
</tr>
</tbody>
</table>
<p>A partir de aquí se puede modificar su estética y algunos comportamientos con las
clases:</p>
<ul>
<li><code>.table-bordered</code></li>
<li><code>.table-striped</code></li>
<li><code>.table-condensed</code></li>
</ul>
</div>
</div>
</div>
63
Tabla responsiva en Bootstrap.
Table resonsive agregar otra etiqueta html <div>
<div class="table-responsive">
<table class="table">
Formularios en Bootstrap. Los formularios son una de las áreas de HTML más complicadas de normalizar entre navegadores,
pero Bootstrap logra un muy buen resultado.
64
Practica 6
Digitar el siguiente formulario.
<div class="container">
<div class="row">
<div class="col-12">
<form role="form" action="">
<div class="form-group">
<label>ID</label>
<p class="form-control-static">12</p>
</div>
<div class="form-group">
<label for="username">Nombre de usuario</label>
<input id="username" type="text" class="form-control">
</div>
<div class="form-group">
<label for="email">E-mail</label>
<input id="email" type="text" class="form-control">
</div>
<span class="clearfix"></span>
<div class="form-group">
<label for="passwd">Contraseña</label>
<input id="passwd" type="password" class="form-control">
</div>
<div class="form-group">
<label for="detalle">Detalle</label>
<textarea id="detalle" class="form-control" rows="10"></textarea>
65
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="item-a" value="a"> Opción A
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="item-b" value="b"> Opción B
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="item-c" value="c"> Opción C
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="opcionNumero" id="opcionPrimera" value="1"
checked>
Opción primera
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="opcionNumero" id="opcionSegunda" value="2">
Opción segunda
</label>
</div>
<select class="form-control">
<option>Rojo</option>
<option>Amarillo</option>
<option>Azul</option>
<option>Verde</option>
<option>Violeta</option>
</select>
</form>
</div>
</div>
<form role="form" action="">
66
<fieldset>
<div class="row">
<div class="col-12">
<legend>Campos con dimensiones</legend>
</div>
</div>
<div class="row">
<div class="col-12 col-sm-3">
<div class="form-group">
<label for="primero" class="control-label">Primero</label>
<input id="primero" type="text" class="form-control">
</div>
</div>
<div class="col-12 col-sm-5">
<div class="form-group">
<label for="segundo" class="control-label">Segundo</label>
<input id="segundo" type="text" class="form-control">
</div>
</div>
<div class="col-12 col-sm-3 col-sm-offset-1">
<div class="form-group">
<label for="tercero" class="control-label">Tercero</label>
<input id="tercero" type="text" class="form-control">
</div>
</div>
</div>
<div class="row">
<div class="col-4">
<div class="form-group">
<label for="alto" class="control-label">Alto</label>
<input id="alto" type="text" class="form-control input-lg">
</div>
</div>
<div class="col-4">
<div class="form-group">
<label for="pordefecto" class="control-label">Por defecto</label>
<input id="pordefecto" type="text" class="form-control">
</div>
</div>
<div class="col-4">
<div class="form-group">
<label for="pequenio" class="control-label">Pequeño</label>
<input id="pequenio" type="text" class="form-control input-sm">
</div>
67
</div>
</div>
</fieldset>
</form>
</div>
Ordenamos el formulario en modo lineal. En las clases de <form> agregamos una clase para que se aline los formulario a los lados
<form role="form" class="form-inline" action="">
Lo Ordenamos por columna de Descripción y de formulario, utiizando las etqueta <div>
<div class="col-sm-9"><div class="col-sm-3">
¡ATENCION!
Ponemos en la clase de cada formulario disabled para que sea editable o accesible
68
<div class="form-group">
<label for="email" class="control-label col-xs-3">E-mail</label>
<div class="col-xs-9">
<input id="email" type="text" class="form-control" disabled>
<span class="help-block">Este es un texto de ayuda que se muestra debajo del
input, como en este que está desactivado. </span>
</div>
Para poner color e icono a los formularios colocamos en la etiqueta.
Botones en Bootstrap. Los botones son elementos principales en todo sitio web. En esta ocasión Bootstrap nos ofrece
una opción de estilos, para un uso adecuado de ellos.
Documentación> Componentes> botones
69
Digitar el siguiente código para la visualización del botones en Bootstrap.
<div class="container">
<div class="row">
<div class="col-sm-12">
<h4>Uso de botones</h4>
<button class="btn btn-danger btn-lg">Botón "button"</button>
<a class="btn btn-default" href="#">Botón "a"</a>
<input type="button" class="btn btn-info btn-sm" value="Botón input">
<input type="submit" class="btn btn-primary btn" value="Botón submit">
</div>
</div>
</div>
Otros ejemplos que podemos encontrar en la web de Bootstrap.
Botones con colores.
Imágenes con BootsTrap. Las imgenes es otro de los elementos mas inportantes en un sitio web, pero en bootstrap
podemos acceder rapidamente a unas configuraciones de los contornos, rellenos, etc.
Documentación> Utilidades> botones
70
Borde.
Forma de las esquinas.
71
Practica Realizar la siguiente foto diferente fondo
Desplegables en Bootstrap. Botones desplegables de un solo botón
Cualquier single .btnpuede ser convertido en un dropdown con algunos cambios de marcado. Así
es como puede ponerlos a trabajar con cualquiera de los <button>elementos:
Documentación> Utilidades> botones
<div class="dropdown">
72
<button class="btn btn-secondary dropdown-toggle" type="button"
id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-
expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
Encabezado de la lista.
73
División de menú.
Deshabilitado de elementos.
Navegación en Bootstrap.
74
Carrusel o slider. Los carruseles o slider son muy didácticos en todo sitio web. Su función es mostrar al cliente un visualización rápida de los productos o servicios que ofreces al usuario. Documentación / Componentes/ Carrusel
Como funcionan. El carrusel es una presentación de diapositivas para el ciclismo a través de una serie de
contenido, construido con CSS transforma 3D y un poco de JavaScript. Funciona con una
serie de imágenes, texto o marcado personalizado. También incluye soporte para
controles e indicadores anteriores / siguientes.
Tipos de Carruseles. Solo Diapositivas. Aquí hay un carrusel con diapositivas solamente. Tenga en cuenta la presencia de las imágenes .d-blocky .img-fluiden el carrusel para evitar la alineación predeterminada del navegador.
75
<div id="carouselExampleSlidesOnly" class="carousel slide" data-
ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="..." alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="..." alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="..." alt="Third slide">
</div>
</div>
</div>
Solo Diapositivas. Añadiendo los controles anterior y siguiente:
76
<div id="carouselExampleControls" class="carousel slide" data-
ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="..." alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="..." alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="..." alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls"
role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls"
role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
77
Con Indicadores. También puede agregar los indicadores al carrusel, junto con los controles, también.
<div id="carouselExampleIndicators" class="carousel slide" data-
ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0"
class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="..." alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="..." alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="..." alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators"
role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators"
role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>