UNIVERSIDAD TÉCNICA PARTICULAR DE LOJA

VICERRECTORADO DE MODALIDAD ABIERTA Y A DISTANCIA

FACULTAD: Ingenierías y Arquitectura

CARRERA: TECNOLOGÍAS DE LA INFORMACIÓN

PLAN DOCENTE DE LA ASIGNATURA: Tecnologías Web

PROFESOR AUTOR: Mgs. Diana Alexandra Torres Guarnizo

MODALIDAD DE ESTUDIO: A DISTANCIA

PERÍODO ACADÉMICO ORDINARIO/SEMESTRE

OCTUBRE 2023 - FEBRERO 2024

1
A. Datos de identificación de la asignatura
Asignatura:
Código:
Tipo de asignatura (ECTS)
Campo de formación del currículo
(Rediseño Curricular):
Número de créditos/horas:
Periodo académico ordinario/nivel:
Período académico
ordinario/semestre:
Facultad:
Departamento:
Carrera:
B. Descripción de la asignatura
Presentación:
Contextualización en el marco de la
descripción microcurricular que forma
parte del plan curricular de la carrera:
Tecnologías Web
DSOF_2043
No Aplica
Praxis Profesional
Créditos 2 Horas 96
Cuarto
Octubre 2023 – Febrero 2024
Ingenierías y Arquitectura
Ciencias de la Computación y Electrónica
Tecnologías de la Información
Esta asignatura busca brindar a los estudiantes una sólida
formación en tecnologías web emergentes, preparándolos para
enfrentar los cambios sociales, económicos y políticos de la
actualidad. Al desarrollar habilidades en el desarrollo de
aplicaciones web y generar soluciones innovadoras, los alumnos
estarán capacitados para hacer frente a los desafíos del mundo
digital y aprovechar las oportunidades que ofrece la web
actualmente.
Esta asignatura busca proporcionar a los estudiantes los
conocimientos necesarios para utilizar tecnologías web
vanguardistas, capacitándolos para desarrollar aplicaciones
innovadoras y funcionales.
El uso de tecnologías web en nuestro entorno tiene un efecto
multiplicador, donde su uso y acceso logra reducir costos, generar
eficiencia y mejorar el rendimiento de diversos sectores de
negocios.
2
 Como futuro profesional tiene la oportunidad de construir sitios web
que permitan organizar información de tipos variados de una
organización de manera efectiva que permita gestionarlas de varias
formas.
Contribución de la asignatura al perfil Inicial
de egreso (rediseño curricular):
Diseñar aplicaciones de software que permitan mediante técnicas
avanzadas de modelado para dar solución a los requerimientos del
cliente utilizando estándares de la industria

Implementa aplicaciones a partir de especificaciones y modelos de

software utilizando estándares de documentación y de
programación
Prerrequisitos: Para desarrollar las competencias y los contenidos de la presente
materia el alumno debe tener conocimientos generales de
fundamentos de programación, que le facilitarán la comprensión y
puesta en práctica de los contenidos que se imparten en esta
asignatura.
Adaptaciones curriculares: Para garantizar una educación de calidad acorde a las
características del modelo educativo de la Universidad Técnica
Particular de Loja, al principio de igualdad de oportunidades y a las
necesidades educativas especiales asociadas o no a la
discapacidad, se desarrollan adaptaciones curriculares no
significativas o de grado dos, mismas que siguen una trayectoria de
menor a mayor significación; considerando el aspecto
metodológico, actividades de aprendizaje y el estilo individual de
aprendizaje en cuanto a las estrategias a desarrollar.

Estas adaptaciones se realizan en función de la identificación de

las necesidades educativas en las primeras semanas de trabajo
académico, con la finalidad de dar respuesta a la dificultad de
aprendizaje y apoyar al desarrollo de las competencias del
estudiante.

C. Programación del proceso de aprendizaje de la asignatura

3
 Primer bimestre

1. Descripción de la secuencia didáctica para el aprendizaje de la asignatura

Componentes
del Tiempo
Resultados de Instrumentos
Contenidos aprendizaje1 Actividades de aprendizaje Recursos de aprendizaje Calificación (horas) Semana
Aprendizaje de evaluación
(ACD, APE, AA)

Revisar las orientaciones

generales para el estudio en la
Guía Didáctica que le facilitarán
AA una mejor comprensión y
Guía didáctica NA NA 0.25 1
aplicabilidad de los contenidos
Describe la
estructura de la Unidad 1. Lectura comprensiva de la unidad 1
world wide web Tecnologías web 1 de la Guía Didáctica hasta el
como interconectar AA punto 1.4 donde se explica los
Guía didáctica NA NA 1
documentos de Protocolo http temas de esta unidad
hipertexto. Instalación de XAMPP y 1
Servidores web verificación de su funcionamiento.
Discute y valida En Guía didáctica en el punto 1.3 Resolución de
Instalación de APE se explica el Proceso de
Guía didáctica
ejercicio
NA 0.5
técnicas de datos Apache – XAMPP
de entrada en el Instalación de XAMPP.
lado del cliente Resolución del ejercicio php.info
Programación del
frente a la Desarrollo de actividades 1
lado del servidor
recomendadas y autoevaluación.
programación del AA Revisar guía didáctica unidad 1
Guía Didáctica Autoevaluación NA 1
lado del servidor. (hasta el punto 1.4).
1
Foro de Presentación para
ACD Foro NA NA 0.75
conocer a compañeros y al tutor
Chat de consulta permanente
para resolver las inquietudes que
ACD Chat NA NA 0.5 1
se les presenten durante su
estudio

1
En el caso de que el docente planifique actividades síncronas, deberá también proponer una actividad suplementaria
2
Contacto con el docente (ACD)
Práctico-experimental (APE)
Autónomo (AA)

4
 Componentes
del Tiempo
Resultados de Instrumentos
Contenidos aprendizaje1 Actividades de aprendizaje Recursos de aprendizaje Calificación (horas) Semana
Aprendizaje de evaluación
(ACD, APE, AA)

Chat de consultas permanente

ACD resolver las inquietudes que se Chat de tutoría y consulta NA NA 1 1
presenten durante su estudio
Lectura comprensiva de la unidad
AA 1 de la Guía Didáctica desde el Guía didáctica NA NA 1 2
punto 1.5
Revise los Micro-videos:

https://www.youtube.com/watch?
v=m5kG6lmlW5Q para entender
Unidad 1. la diferencia entre lenguajes de
Tecnologías web programación del lado del
AA servidor y del lado del cliente. NA NA 1 2
Programación del Video
lado del cliente https://www.youtube.com/watch?
Utiliza algunas v=Q2jmAkLGz5U donde se
tecnologías de Lenguajes de explica el funcionamiento de un
presentación. presentación y servidor web.
marcadores
Consulta web para conocer
Servicios web ambas tecnologías. Resumen de
Mapa
APE características de Bootstrap vs. Investigación en la web o libros NA 0.5 2
Tecnologías Conceptual
Hjipster y elabore un Mapa
emergentes
Conceptual
Desarrollo de actividades
Estándares de
recomendadas y autoevaluación
desarrollo AA Guía Didáctica Autoevaluación NA 1 2
revisar Guía Didáctica unidad 1
(desde el punto 1.4)
Mida su nivel de conocimientos
Se promedia
AA sobre los temas de estudio de la Cuestionario Cuestionario 1 2
a 1 punto
unidad de Tecnologías Web EVA 1

Experiencia de usuario en Escala de

ACD Foro 1.75 puntos 1 2
aplicaciones web valoración

5
 Componentes
del Tiempo
Resultados de Instrumentos
Contenidos aprendizaje1 Actividades de aprendizaje Recursos de aprendizaje Calificación (horas) Semana
Aprendizaje de evaluación
(ACD, APE, AA)

Chat de consultas permanente Participación en

ACD resolver las inquietudes que se Chat de tutoría y consulta el chat de NA 0.5 2
presenten durante su estudio consulta

Consultas
ACD Consulta de inquietudes Consultas telefónicas y por email NA 0.75 2
realizadas

Lectura comprensiva del capítulo

AA 1 del texto básico hasta el tema Texto básico NA NA 2 3
proceso de diseño web
Elaboración de un cuadro
sinóptico de los principios y
buenas prácticas en el diseño Cuadro
APE Texto básico NA 0.5 3
web. Revisar texto básico sinóptico
capítulo 1: Tema Principios de
Identifica el propósito Unidad 2. Diseño Diseño web
de un sitio web o Web Elabore una lista de las fases del
género (comercio diseño web. Revisar texto básico
APE Texto básico Lista NA 0.5 3
electrónico, auto- Principios de diseño capítulo 1: tema El Proceso de
servicio, servicio web Diseño web
gubernamental Desarrollo de actividades
educativo, etc.). El proceso de recomendadas y autoevaluación.
AA Guía Didáctica Autoevaluación NA 1 3
diseño web Revisar guía didáctica unidad 2
(hasta el punto 2.2)
Chat de consulta permanente
para resolver las inquietudes que
ACD Chat de tutoría y consulta NA NA 0.75 3
se les presenten durante su
estudio

ACD Consultas telefónicas y por email Consulta de inquietudes NA NA 0.75 3

Construye un sitio Lectura comprensiva del capítulo

web sencillo que Unidad 2. Diseño 2 del texto básico tema
organiza la Web AA características generales y tipos NA NA 2 4
Texto básico
información de tipos de lenguajes
variados de una

6
 Componentes
del Tiempo
Resultados de Instrumentos
Contenidos aprendizaje1 Actividades de aprendizaje Recursos de aprendizaje Calificación (horas) Semana
Aprendizaje de evaluación
(ACD, APE, AA)

organización de Lenguajes de
manera efectiva que marcado generales, Consulta en la web Editores
permita presentarla características HTML. Análisis de las ventajas y Análisis de
APE Consulta web NA 1 4
de varias formas. desventajas de los editores herramientas
Estructura general HTML
de un documento
con lenguaje de Desarrollo de actividades
marcado recomendadas y autoevaluación
AA Guía Didáctica Autoevaluación NA 1 4
revisar guía didáctica unidad 2
(hasta el punto 2.2)
Mida su nivel de conocimientos
Cuestionario Se promedia
AA sobre los temas de estudio de la Cuestionario 1 4
EVA 2 a 1 punto
unidad de Diseño Web
Chat de consultas permanente
para resolver las inquietudes que
ACD NA NA 0.75 4
se les presenten durante su Chat de tutoría y consulta
estudio

ACD Consultas de inquietudes Consultas telefónicas y por email NA NA 0.5 4

Unidad 3. Lectura del capítulo 3 del texto

Lenguajes de básico: tema Lenguajes de
AA Texto básico NA NA 2 5
marcado para Marcado para Presentación de
Construye un sitio presentación de Páginas Web
web sencillo que páginas web Video donde se explica el
organiza la proceso de instalación de
información de tipos Historia de HTML Sublime Text, además muestra NA
APE Video NA 0.5 5
variados de una Estructura de un cómo usar la herramienta
organización de documento HTML https://www.youtube.com/watch?
manera efectiva que v=i2mgWWlj1gA
permita presentarla Texto en HTML Desarrollo de actividades
de varias formas. recomendadas y autoevaluación
Enlaces de AA revisar guía didáctica unidad 3 Guía Didáctica Autoevaluación NA 1 5
Hipertexto (hasta el punto 3-5)

7
 Componentes
del Tiempo
Resultados de Instrumentos
Contenidos aprendizaje1 Actividades de aprendizaje Recursos de aprendizaje Calificación (horas) Semana
Aprendizaje de evaluación
(ACD, APE, AA)

Imágenes Retroalimientaci
ón de los
Ejemplos HTML disponibles en el
AA Participación en el EVA ejemplos NA 1 5
EVA
disponibles en
el EVA
Chat de consultas permanente
ACD para resolver las inquietudes que Chat de tutoría y consulta NA NA 0.75 5
se presenten durante su estudio

ACD Consultas telefónicas y por email Consulta de inquietudes NA NA 0.75 5

Lectura del capítulo 3 del texto

básico tema Lenguajes de Texto básico
AA NA NA 1 6
Marcado para Presentación de
Páginas Web
Video se explica el uso de los
Unidad 3. Implementación
formularios
Lenguajes de AA Revisión de micro-videos. de formulario en NA 1 6
https://www.youtube.com/watch?
marcado para HTML
v=QDOfODwsfuQ
presentación de Implemente el sitio web
páginas web propuesto en el foro sobre
Crea y valida promover el Turismo en su
Listas Provincia
documentos HTML 5.
Tablas Construya una página HTML con
los elementos estudiados en esta Escala de
Formularios APE unidad, incluir las etiquetas EVA 2 puntos 2 6
valoración
semánticas de HTML5. Enlace
HTML 5 web, Listado de etiquetas
HTML5.
http://www.mclibre.org/consultar/h
tmlcss/html/html-etiquetas.html

8
 Componentes
del Tiempo
Resultados de Instrumentos
Contenidos aprendizaje1 Actividades de aprendizaje Recursos de aprendizaje Calificación (horas) Semana
Aprendizaje de evaluación
(ACD, APE, AA)

Desarrollo de actividades
AA recomendadas y autoevaluación. Guía Didáctica Autoevaluación NA 1 6
Revisar guía didáctica unidad 3
Mida su nivel de conocimientos
sobre los temas de estudio de la
Cuestionario Se promedia
AA unidad de Lenguajes de marcado Cuestionario 0.5 6
EVA 3 a 1 punto
para presentación de páginas
web
Chat de consultas permanente
ACD para resolver las inquietudes que Chat de tutoría y consulta NA NA 0.75 6
se presenten durante su estudio

ACD Consultas telefónicas y por email Consulta de inquietudes NA NA 2 6

Describe la
estructura de la world
wide web como Revisión de Guía Didáctica y
interconectar AA Texto básico, unidades primer NA NA 0.25 7
Guía Didáctica y Texto Básico
documentos de bimestre
hipertexto.

Discute y valida
técnicas de datos de
entrada en el lado del
cliente frente a la
programación del Analice el sitio web propuesto el
Guía didáctica Escala de
lado del servidor. EVA y proporcione la solución 1 punto 2.5 7
APE EVA valoración
más adecuada que permita que
Utiliza algunas Revisión de las el sitio se pueda poner en
tecnologías de unidades 1, 2 y 3 producción sin errores.
presentación.
Explorar técnicas y mejores
Identifica el propósito Escala de
prácticas para mejorar el 1.75 puntos 0.5 7
de un sitio web o ACD Chat valoración
rendimiento de los sitios web

9
 Componentes
del Tiempo
Resultados de Instrumentos
Contenidos aprendizaje1 Actividades de aprendizaje Recursos de aprendizaje Calificación (horas) Semana
Aprendizaje de evaluación
(ACD, APE, AA)

género (comercio
electrónico, auto-
servicio, servicio
gubernamental
educativo, etc.).

Construye un sitio
web sencillo que
organiza la
Preparación para la evaluación
información de tipos ACD NA NA 2 7
primer parcial Consulta de inquietudes
variados de una
organización de
manera efectiva que
permita presentarla
de varias formas.

Crea y valida
documentos HTML 5.

Describe la
estructura de la world
wide web como
interconectar
documentos de Revisión del contenido previa a la
AA Guía Didáctica y Texto Básico NA NA 1 8
hipertexto. evaluación presencial

Discute y valida
Revisión de las
técnicas de datos de
unidades 1, 2 y 3
entrada en el lado del
cliente frente a la
programación del
lado del servidor. Dudas sobre la materia del primer Chat de tutoría y consulta
ACD bimestre NA NA 2 8
Utiliza algunas
tecnologías de
presentación.

10
 Componentes
del Tiempo
Resultados de Instrumentos
Contenidos aprendizaje1 Actividades de aprendizaje Recursos de aprendizaje Calificación (horas) Semana
Aprendizaje de evaluación
(ACD, APE, AA)

Identifica el propósito
de un sitio web o
género (comercio
electrónico, auto-
servicio, servicio
gubernamental
educativo, etc.). Evaluación Presencial

Construye un sitio
web sencillo que Cuestionario en
AA 2.5 puntos 2 8
organiza la Evaluación Presencial Bimestral línea o impreso
información de tipos
variados de una
organización de
manera efectiva que
permita presentarla
de varias formas.

Crea y valida
documentos HTML 5.

11
 2. Resumen de las horas de trabajo de la asignatura por componente de aprendizaje en el bimestre.

Componentes del
Horas
aprendizaje
Total de horas de En contacto con el
16
trabajo de la asignatura docente
en el bimestre Práctico-experimental
8

Autónomo 24

Total 48

3. Descripción de las actividades calificadas

Componente de Aprendizaje: En contacto con el docente (ACD) ( )

Práctico-experimental (APE) ( )
Autónomo (AA) ( x )
Actividad de aprendizaje: Mida su nivel de conocimientos sobre los temas de estudio de la unidad
de Tecnologías Web
Tipo de recurso: Cuestionario
Tema de la unidad: Tecnologías Web

Resultados de aprendizaje que se •
espera lograr:
Estrategias Didácticas:
Describe la estructura de la world wide web sobre cómo
interconectar documentos de hipertexto.
• Discute y valida técnicas de datos de entrada en el lado del cliente
frente a la programación del lado del servidor.
• Utiliza algunas tecnologías de presentación.
Leer comprensivamente los temas de estudio señalados y proceder a
resolver la evaluación parcial

Instrumento de Evaluación: Cuestionario EVA 1

Componente de Aprendizaje: En contacto con el docente (ACD) ( X )

Práctico-experimental (APE) ( )
Autónomo (AA) ( )
Actividad de aprendizaje: Experiencia de usuario en aplicaciones web
Tipo de recurso: Foro
Tema de la unidad: Lenguajes de marcado para presentación de páginas web

Resultados de aprendizaje que se Utiliza algunas tecnologías de presentación.

espera lograr:
Estrategias Didácticas: La experiencia de usuario es clave para el éxito de una aplicación web,
se refiere a la interacción que tienen los usuarios con la aplicación y
cómo se sienten al usarla.

Una buena experiencia de usuario no solo implica que la aplicación sea

funcional y cumpla con sus objetivos, sino que también sea fácil de usar,

12
atractiva visualmente y satisfactoria en términos de rendimiento y
respuesta.

Una aplicación web con una experiencia de usuario sólida puede marcar
la diferencia entre el éxito y el fracaso. Algunos aspectos clave a
considerar al diseñar y desarrollar una experiencia de usuario efectiva
en aplicaciones web:

• Usabilidad, facilidad con la que los usuarios pueden interactuar con

la aplicación.
• Diseño visual, es fundamental para crear una experiencia atractiva
y agradable; el diseño debe ser coherente, estéticamente
agradable. Los elementos visuales, como colores, tipografía,
iconos y espaciado, deben combinarse para proporcionar una
interfaz atractiva y fácil de entender.
• Respuesta y rendimiento, una aplicación web debe ser rápida y
responder de manera fluida a las interacciones del usuario.
• Personalización y adaptabilidad, permitir que los usuarios
personalicen la aplicación según sus preferencias individuales
puede mejorar significativamente la experiencia de usuario.

Con base a lo expuesto, este trabajo consiste en diseñar un sitio web

para promover el turismo en su provincia, para lo cual se puede escoger
entre las siguientes temáticas:

• Atractivos turísticos, dedica secciones del sitio web a destacar los

principales atractivos turísticos de tu provincia, como playas,
parques naturales, monumentos históricos, sitios culturales,
eventos locales, etc. Proporciona información detallada sobre cada
lugar, incluyendo imágenes, descripciones, actividades que se
pueden realizar y cómo llegar.
• Rutas turísticas: crea itinerarios sugeridos para que los visitantes
puedan explorar tu provincia de manera eficiente y completa.
Organiza las rutas por temáticas, como ruta gastronómica, ruta de
aventura, ruta cultural, etc. Incluye puntos de interés y
recomendaciones de establecimientos locales en cada ruta.
• Experiencias locales, destaca las experiencias auténticas que los
visitantes pueden tener en tu provincia; puede incluir actividades
como la participación en festivales tradicionales, la visita a
mercados locales, la interacción con artesanos o la degustación de
platos típicos.
• Recursos para viajeros, proporciona información práctica y útil para
los viajeros, como consejos de viaje, mejores épocas para visitar,
alojamiento, transporte local, recomendaciones de restaurantes y
actividades adicionales. Incluye enlaces a recursos externos
confiables.

13
Para el desarrollo de la actividad puede usar:

• Figma, es una herramienta de diseño y prototipado para crear

diseños de páginas web y aplicaciones móviles de manera
colaborativa y eficiente. Es una aplicación basada en la nube,
lo que significa que no es necesario descargar ni instalar
ningún software, ya que se puede acceder a ella a través de
un navegador web. Link oficial, https://www.figma.com/
• Adobe Photoshop, es una herramienta de diseño gráfico
ampliamente reconocida y utilizada. Es ideal para la creación
y manipulación de imágenes, edición de fotografías y diseño
de elementos visuales para páginas web. Link oficial,
https://www.adobe.com/es/express/feature/image/editor
• Uizard es una herramienta de diseño y prototipado de páginas
web objetivo principal es permitir a los usuarios crear diseños
web de manera rápida y sencilla, incluso sin tener
conocimientos profundos de diseño o programación. Link
Oficial, https://uizard.io/

El foro consta de dos partes:

Parte 1

• Subir la imagen o imágenes de su propuesta al foro

Parte 2

• Grabar un video, donde vendan la idea del sitio web de su provincia

para buscar un auspiciante, el video tiene que tener una duración
de 3 minutos.

Lineamientos para desarrollar la actividad:

§ Profundice el tema de estudio investigando en la web y otros

recursos bibliográficos.
§ Asegúrate de que la navegación del sitio sea intuitiva, el diseño sea
atractivo y adaptable a diferentes dispositivos, y la información esté
bien organizada y fácil de encontrar.
§ Cada propuesta del sitio web al Foro debe ser diferente a quienes
ya respondieron anteriormente. Trabajos idénticos no serán
evaluados.
§ Cada estudiante debe comentar al menos una de las
participaciones de sus compañeros, sobre la propuesta analziar el
video enviado; el aporte que hagan (un comentario), debe ser
coherente y con fundamento (al menos 10 líneas) .

14
 Instrumento de Evaluación:

Escala de valoración

Escala de valoración
Criterios de evaluación Excelente Muy bien Bien No Aplica
2 1 0.5 0
Creatividad y originalidad: ¿La propuesta de diseño demuestra
ideas frescas y originales?
Atractivo visual ¿El diseño del sitio web propuesto es
visualmente atractivo y coherente con la temática de promover
el turismo en la provincia?
Calidad de la presentación: ¿El video de venta está bien
estructurado, tiene una duración adecuada y utiliza un lenguaje
claro y persuasivo?
Argumentación persuasiva: ¿El video presenta argumentos
sólidos y convincentes sobre por qué un auspiciante debería
apoyar el proyecto?
Realizó un aporte fundamentado al compañero sobre el diseño
del sitio web

Componentes del aprendizaje: En contacto con el docente (ACD) ( )

Práctico-experimental (APE) ( )
Autónomo (AA) (X)
Actividad de aprendizaje: Mida su nivel de conocimientos sobre los temas de estudio de la unidad
de Diseño Web
Tipo de recurso: Cuestionario
Tema de la unidad: Diseño Web

Resultados de aprendizaje que se • Identifica el propósito de un sitio web o género (comercio

espera lograr: electrónico, auto-servicio, servicio gubernamental educativo, etc.).
• Construye un sitio web sencillo que organiza la información de
tipos variados de una organización de manera efectiva que
permita presentarla de varias formas.
Estrategias Didácticas: Leer comprensivamente los temas de estudio señalados y proceder a
resolver la evaluación parcial

Instrumento de Evaluación: Cuestionario EVA 2

Componentes del aprendizaje: En contacto con el docente (ACD) ( )

Práctico-experimental (APE) ( x )
Autónomo (AA) ( )
Actividad de aprendizaje: Implemente el sitio web propuesto en el foro sobre promover el
Turismo en su Provincia
Tipo de recurso: EVA
Tema de la unidad: Lenguajes de Marcado para presentación de páginas web

Resultados de aprendizaje que se Crea y valida documentos HTML 5.

espera lograr:
Estrategias Didácticas: Revisar en la Guía didáctica las Unidades 2 y 3 y desarrollar un sitio
web, que demuestre todo lo aprendido en el primer bimestre.

15
La solución final debe ser presentada en una carpeta comprimida que
contenga:
• El sitio web
• Informe
• Link de GitHub o Bitbucket

Subir el archivo comprimido en el entorno en la tarea creada.

Lineamientos para el desarrollo de la actividad:

• Crea mínimo 6 páginas para tu sitio web, siendo la página principal

llamada index.html.
• Utiliza HTML5 y aprovecha las etiquetas semánticas en todas las
páginas para estructurar adecuadamente el contenido.
• Diseña un menú de navegación que se encuentre presente en
todas las páginas, permitiendo a los usuarios moverse fácilmente
por el sitio.
• Utiliza URLs y rutas relativas tanto para enlazar las páginas entre
sí como para referenciar las imágenes.
• Utiliza encabezados <h1>, <h2>, etc., para jerarquizar el contenido
y mejorar la legibilidad.
• Incluye al menos 5 imágenes relevantes en diferentes secciones de
tu sitio web, utilizando la etiqueta <img>.
• Utiliza listas, como las listas ordenadas <ol> o las listas
desordenadas <ul>, para presentar información de manera
estructurada.
• Aprovecha las tablas <table> para mostrar datos tabulares, como
información sobre precios, horarios o características de los lugares
turísticos.
• Incorpora videos relacionados al turismo o atractivos del destino
utilizando la etiqueta <video> (al menos 3 videos).
• Incluye un formulario de contacto para que los visitantes puedan
comunicarse contigo o realizar consultas. Utiliza elementos como
<input>, <textarea> y <button> para construir el formulario.

Recuerda que esta implementación inicial se enfoca en la estructura y

el contenido básico del sitio web. En el siguiente bimestre, podrás
trabajar en el aspecto visual y en la aplicación de estilos CSS para
mejorar la apariencia del sitio.

16
Instrumento de Evaluación:

Escala de valoración

Escala de valoración
Criterios de evaluación Excelente Muy bien Bien No aplica
2 1 0.5 0
Estructura y organización del sitio. Se creó una
jerarquía clara utilizando encabezados (<h1>, <h2>,
etc.), la navegación entre las diferentes secciones es
fácil y coherente.
El sitio web cumple con los estándares de HTML5. Uso
de etiquetas semánticas para estructurar el contenido,
no hay etiquetas obsoletas o no recomendadas.
Funcionalidad y enlaces, los enlaces tanto internos
como externos funcionan correctamente y los
formulario de contacto se implementaron
adecuadamente
Calidad y relevancia del contenido, la información
proporcionada es precisa, actualizada y relevante.
Se incorporaron imágenes, videos y otros elementos
multimedia de manera adecuada

Componentes del aprendizaje: En contacto con el docente (ACD) ( )

Práctico-experimental (APE) ( )
Autónomo (AA) ( x )
Actividad de aprendizaje: Mida su nivel de conocimientos sobre los temas de estudio de la unidad
de Lenguajes de marcado para presentación de páginas web
Tipo de recurso: Cuestionario
Tema de la unidad: Lenguajes de marcado para presentación de páginas web

Resultados de aprendizaje que se • Construye un sitio web sencillo que organiza la información de tipos
espera lograr: variados de una organización de manera efectiva que permita
presentarla de varias formas.
• Crea y valida documentos HTML 5.

Estrategias Didácticas: Leer comprensivamente los temas de estudio señalados y proceder a

resolver la evaluación parcial

Instrumento de Evaluación: Cuestionario EVA 3

Componentes del aprendizaje: En contacto con el docente (ACD) ( )

Práctico-experimental (APE) ( X )
Autónomo (AA) ( )
Actividad de aprendizaje: Analice el sitio web propuesto el EVA y proporcione la solución más
adecuada que permita que el sitio se pueda poner en producción sin
errores.
Tipo de recurso: EVA
Tema de la unidad: Elementos HTML 5

Resultados de aprendizaje que se Crea y valida documentos HTML 5.

espera lograr:
Estrategias Didácticas: Revisar en la Guía didáctica las Unidades 2 y 3.

17
 Lineamientos para desarrollar la actividad.

• Descargue el sitio web en su servidor local.

• Revise el sitio para que evalúe las posibles mejoras al mismo.
• Realiza una revisión exhaustiva del código, analiza el código HTML
en busca de posibles errores de sintaxis, etiquetas mal cerradas o
mal utilizadas, y corrige cualquier problema que encuentres,
puedes apoyarte en https://validator.w3.org/
• Optimiza la carga de imágenes
• Valida los enlaces
• Valida que el sitio

La solución debe contener:

• El sitio web corregido
• Informe de los problemas encontrados y los resultados del
validador de html.

La solución final debe ser presentada en una carpeta comprimida que

contenga los elementos anteriores y subirla en el entorno en la tarea
creada para el efecto.

Instrumento de Evaluación:

Escala de valoración

Escala de valoración
Criterios de evaluación Excelente Muy bien Bien No aplica
2 1 0.5 0
Los archivos HTML están estructurados
adecuadamente
Se optimizó las imágenes y los elementos multimedia
Existen errores de sintaxis en el código HTML
Los enlaces funcionan y están estructurados
adecuadamente
Se incluye el informe

En contacto con el docente (ACD) ( X )

Componentes del aprendizaje: Práctico-experimental (APE) ( )
Autónomo (AA) ( )
Actividad de aprendizaje: Explorar técnicas y mejores prácticas para mejorar el rendimiento de los
sitios web
Tipo de recurso: Chat

Tema de la unidad: Unidades 1, 2 y 3

Resultados de aprendizaje que se • Construye un sitio web sencillo que organiza la información de tipos
espera lograr: variados de una organización de manera efectiva que permita
presentarla de varias formas.
• Crea y valida documentos HTML 5.

18
Estrategias Didácticas Estimados estudiantes, el chat académico del primer bimestre, está
enfocado en Optimización de rendimiento web.

La actividad consiste en explorar técnicas y mejores prácticas para

mejorar el rendimiento de los sitios web, como la optimización de
imágenes, la compresión de archivos, el almacenamiento en caché y la
reducción del tiempo de carga, luego compartir los resultados de su
investigación con los compañeros.

Algunas temáticas que puede usar de base para su investigación:

• Importancia de la optimización del rendimiento web: ¿Por qué es

importante optimizar el rendimiento de los sitios web? ¿Cuáles son
los beneficios para los usuarios?
• Estrategias para la optimización de imágenes: ¿Qué técnicas se
pueden utilizar para optimizar las imágenes en un sitio web?
¿Cómo se puede reducir el tamaño de las imágenes sin perder
calidad? ¿Qué formatos de imagen son más adecuados?
• Compresión de archivos: ¿Qué es la compresión de archivos y
cómo puede mejorar el rendimiento de un sitio web? ¿Qué métodos
de compresión se utilizan comúnmente? ¿Cómo se implementan
en el desarrollo web?
• Almacenamiento en caché: ¿Qué es el almacenamiento en caché
y cómo puede beneficiar el rendimiento de un sitio web?
• Reducción del tiempo de carga: ¿Qué factores afectan el tiempo de
carga de un sitio web?¿Cuáles son las técnicas y herramientas
disponibles para reducir el tiempo de carga de un sitio?
• Optimización de recursos externos: ¿Cómo se puede optimizar el
rendimiento cuando se utilizan recursos externos, como fuentes
web, scripts de terceros o servicios de análisis?
• Herramientas y técnicas de medición de rendimiento: ¿Qué
herramientas y técnicas se pueden utilizar para medir y evaluar el
rendimiento de un sitio web?

Antes de participar en el chat académico, debemos realizar una

investigación exhaustiva sobre el tema y tomar nota de los puntos más
relevantes. Además, debemos responder a las inquietudes que la tutora
plantee el día del chat académico.

Durante el desarrollo del chat académico, debemos tomar en cuenta lo

siguiente:

• Ingresar al chat 5 minutos antes de la hora indicada.

• Saludar a los presentes al ingresar a la sesión de chat.

19
 • Ser respetuosos con las opiniones de nuestros compañeros.
• Utilizar un lenguaje claro y sencillo, siendo breves en nuestras
respuestas.
• Mantener un uso correcto del lenguaje, recordando que se trata
de un chat académico.
• Leer atentamente las indicaciones del tutor.

La actividad se llevará a cabo a través de la generación de preguntas

por parte del docente. Cada estudiante deberá analizar la pregunta y
presentar su respuesta en una sola línea, finalizando con un punto para
indicar que ha concluido su idea. Podrán haber réplicas a las preguntas
y el docente proporcionará retroalimentación.

Al finalizar el chat académico, el docente emitirá una conclusión sobre

el tema, basada en las opiniones vertidas durante la discusión, con el
objetivo de aclarar ideas.

¡Esperamos contar con su participación activa y enriquecedora en este

chat académico!

Instrumento de Evaluación:

Escala de valoración

Escala de valoración
Criterios de evaluación Excelente Muy bien Bien No aplica
2 1 0.5 0
Participación activa, capacidad para plantear preguntas
relevantes, contribuir con ideas y participar en
discusiones constructivas
Conocimiento y comprensión del tema
Calidad de las respuestas
Análisis crítico
Colaboración y retroalimentación

En contacto con el docente (ACD) ( X )

Componentes del aprendizaje:
Actividad de aprendizaje:
Tipo de recurso:
Práctico-experimental (APE) ( )
Autónomo (AA) ( )
Realiza un análisis exhaustivo de las ventajas y desventajas del uso de
Sistemas de Gestión de Contenidos (CMS, por sus siglas en inglés)
como un elemento importante para el desarrollo de aplicaciones web
Actividad Suplementaria - Foro

Tema de la unidad: Unidades 1, 2 y 3

Resultados de aprendizaje que se • Construye un sitio web sencillo que organiza la información de tipos

20
espera lograr: variados de una organización de manera efectiva que permita
presentarla de varias formas.
• Crea y valida documentos HTML 5.

Estrategias Didácticas En el foro de la actividad suplementaria del primer bimestre, nos

centraremos en analizar los Sistemas de Gestión de Contenidos (CMS)
para el desarrollo de aplicaciones web. El objetivo de esta actividad es
investigar los CMS disponibles en el mercado, conocer sus beneficios,
licencias y ejemplos prácticos, y luego compartir los resultados de
nuestra investigación con nuestros compañeros.

Es importante que en nuestra investigación descubramos herramientas

interesantes y de fácil aprendizaje.

Algunas temáticas generales que debemos revisar incluyen:

• ¿Qué son los Sistemas de Gestión de Contenidos?

• ¿Cómo funcionan?
• Características principales
• Evolución de los CMS
• Beneficios
• Los CMS más populares
• Cómo elegir el CMS más adecuado

Para cumplir la actividad debe:

Investigación y resumen: Realiza una investigación exhaustiva sobre los

Sistemas de Gestión de Contenidos (CMS) y analiza cada uno de los
puntos mencionados en la tarea. A partir de la información recopilada,
crea un mapa conceptual que resuma los conceptos clave y la relación
entre ellos.

Subir el mapa conceptual: Una vez completado el mapa conceptual,

súbelo al entorno designado para compartirlo con tus compañeros y el
docente. Asegúrate de seguir las instrucciones proporcionadas para la
entrega.

Conclusión sobre el trabajo de otros compañeros: Después de que los

compañeros hayan subido sus mapas conceptuales, selecciona al azar
los trabajos de dos de ellos y emite una conclusión sobre su trabajo.

21
Instrumento de Evaluación:

Escala de valoración

Escala de valoración
Criterios de evaluación Excelente Muy bien Bien No aplica
2.5 1.25 0.75 0
Claridad y estructura general del mapa conceptual,
debe tener una organización lógica de los conceptos y
las relaciones entre ellos
El mapa es creativo, se buscó elementos visuales
atractivos y la presentación facilitó la comprensión de
los conceptos
El mapa es creativo, se buscó elementos visuales
atractivos y la presentación facilitó la comprensión de
los conceptos
Participa y estimula la interacción con las conclusiones
de al menos 2 compañeros

22
D. Evaluación de la asignatura primer bimestre

Calificación Peso
Componente Actividad Instrumento Fechas de ejecución
Foro: Experiencia de Semana 2:
usuario en aplicaciones Escala de valoración 16 al 22 de octubre 1.75 17.5%
web 2023

Chat: Explorar técnicas y

Semana 7:
mejores prácticas para
Escala de valoración 20 al 26 de noviembre
mejorar el rendimiento de
2023
los sitios web
APRENDIZAJE EN
CONTACTO CON EL Actividad Suplementaria -
DOCENTE Foro: Realiza un análisis
exhaustivo de las 1.75 17.5%
ventajas y desventajas
del uso de Sistemas de Semanas 8:
Gestión de Contenidos Escala de valoración 27 de noviembre al 3
(CMS, por sus siglas en de diciembre 2023
inglés) como un elemento
importante para el
desarrollo de
aplicaciones web
Subtotal 3.5 35%
Semana 2:
16 al 22 de octubre
Cuestionario EVA 1 2023
Semana 4:
Evaluación parcial 30 de octubre al 5 de 1 10%
APRENDIZAJE
Cuestionario EVA 2 noviembre 2023
AUTÓNOMO
Semana 6:
13 al 19 de noviembre
Cuestionario EVA 3 2023
Evaluación presencial Cuestionario en línea o 1 al 5 de diciembre
2.5 25%
bimestral impreso 2023
Subtotal 3.5 35%
Implemente el sitio web
Semana 6:
propuesto en el foro
Escala de valoración 13 al 19 de noviembre 2 20%
sobre promover el
2023
Turismo en su Provincia

Analice el sitio web

propuesto el EVA y
proporcione la solución Semana 7:
1
más adecuada que Escala de valoración 20 al 26 de noviembre 10%
APRENDIZAJE permita que el sitio se 2023
PRÁCTICO pueda poner en
EXPERIMENTAL producción sin errores.

Subtotal 3 30%
TOTAL 10 100%

23
 Segundo Bimestre

1. Descripción de la secuencia didáctica para el aprendizaje de la asignatura

Componentes
Resultados de del Instrumentos Tiempo
Contenidos Actividades de aprendizaje Recursos de aprendizaje Calificación (horas) Semana
Aprendizaje aprendizaje2 de evaluación
(ACD, APE, AA)
Orientaciones generales para el
estudio, que le facilitarán una
Unidad 4. ACD mejor comprensión y aplicabilidad Guía didáctica NA NA 0.5 9
Contenidos de los contenidos. Revisar guía
Identifica los tipos de Multimedia y didáctica
medios, basados en Hojas de Estilo Lectura comprensiva del Capítulo
el tiempo de uso AA 8 y 9 (Integración de elementos
Texto básico NA NA 1.5 9
común en la web. Integración de multimedia en páginas web) del
Elementos texto básico
Utiliza hojas de estilo Multimedia Ejemplo de inserción de audio y
en cascada para video HTML5. Demo,
crear normas de Formateado de http://ejemplocodigo.com/ejemplo
estilo para un sitio páginas web a -html5-video-y-audio-en-html5/,
APE Demo Ejemplo NA 1 9
web. través de hojas de de cómo insertar un audio, video
estilo e imagen en los sitios web, tiene
la ventaja de que se puede ver
descargar el código html.
Desarrollo de actividades
AA recomendadas y autoevaluación. Guía Didáctica Autoevaluación NA 1.5 9
Revisar guía didáctica unidad 4

3
En el caso de que el docente planifique actividades síncronas, deberá también proponer una actividad suplementaria
4
Contacto con el docente (ACD)
Práctico-experimental (APE)
Autónomo (AA)

24
 Componentes
Resultados de del Instrumentos Tiempo
Contenidos Actividades de aprendizaje Recursos de aprendizaje Calificación (horas) Semana
Aprendizaje aprendizaje2 de evaluación
(ACD, APE, AA)
Chat de consulta permanente
para resolver las inquietudes que
ACD Chat NA NA 1 9
se les presenten durante su
estudio

ACD Consultas telefónicas y por email Consulta de inquietudes NA NA 0.5 9

Lectura comprensiva del Capítulo

AA Texto básico, capítulo 4 Autoevaluación NA 2 10
4 del texto básico

Video:

Identifica los tipos de https://www.youtube.com/watch? Ideas

AA Revisión de Micro-videos. NA 1 10
medios, basados en Unidad 4. v=uqkj7HQ7ids, donde se indica principales
el tiempo de uso Contenidos como crear cada tipo de estilo
común en la web. Multimedia y
Hojas de Estilo
Desarrollo de ejercicios de
Ejercicio
Utiliza hojas de estilo Elementos y APE creación de estilos de selectores, Texto básico y Guía didáctica NA 1 10
Práctico
en cascada para estructura de una clase y id
crear normas de hoja de estilos Mida su nivel de conocimientos
Se promedia
estilo para un sitio sobre los temas de estudio de la Cuestionario
AA Cuestionario sobre a 1 1 10
web. Sintaxis de atributos unidad de Contenidos Multimedia EVA 1
punto
y Hojas de Estilo
Foro: Investigación: Flexbox vs.
Foro Escala de
ACD CSS Grid: Comparativa y 1.75 puntos 1 10
valoración
aplicaciones recomendadas

25
 Componentes
Resultados de del Instrumentos Tiempo
Contenidos Actividades de aprendizaje Recursos de aprendizaje Calificación (horas) Semana
Aprendizaje aprendizaje2 de evaluación
(ACD, APE, AA)
Chat de consultas permanente
para resolver las inquietudes que
ACD Chat NA NA 1 10
se les presenten durante su
estudio

ACD Consultas telefónicas y por email Consulta de inquietudes NA NA 0.5 10

Lectura comprensiva del Capítulo

AA Texto básico NA NA 1 11
5 del texto básico

Elaboración de un diagrama de la
interacción entre las capas y los
posibles problemas de seguridad.
Ver video donde se explica el
Unidad 5. modelo de capas a detalle,
APE Video Diagrama NA 1 11
Discute y contrasta Arquitectura de apoyándose con unas láminas
en el lado del cliente, Aplicaciones Web aclaratorias,
de problemas de https://www.youtube.com/watch?
seguridad del Arquitectura en v=plr1H4rFg_g
servidor. Capas

Interacción entre las Retroalimentación

capas cliente y Ejemplos de arquitecturas en de los ejemplos
AA Participación en el EVA NA 1 11
servidor Capas disponibles en el EVA disponibles en
el EVA
Desarrollo de actividades
AA recomendadas y autoevaluación, Guía Didáctica Autoevaluación NA 1 11
revisar guía didáctica unidad 5

26
 Componentes
Resultados de del Instrumentos Tiempo
Contenidos Actividades de aprendizaje Recursos de aprendizaje Calificación (horas) Semana
Aprendizaje aprendizaje2 de evaluación
(ACD, APE, AA)
Chat de consulta permanente
para resolver las inquietudes que
ACD Chat NA NA 1 11
se les presenten durante su
estudio

11
ACD Consultas telefónicas y por email Consulta de inquietudes NA NA 1

Lectura comprensiva del Capítulo

AA Texto básico, capítulo 6 NA NA 1 12
6 del texto básico
Unidad 5.
Arquitectura de Instalación de Navegador Instalación de
APE NA 1 12
Construye un sitio Aplicaciones Web Chrome y Firefox Guía Didáctica Navegadores
web sencillo que
organiza la Navegadores web Mida su nivel de conocimientos
Cuestionario Se promedia
información de tipos AA sobre los temas de estudio de Cuestionario 1 12
EVA 2 sobre 1 punto
variados de una Arquitectura de un Arquitectura de Aplicaciones Web
organización de navegador
manera efectiva que Desarrollo de actividades
permita presentarla Seguridad en AA recomendadas y autoevaluación, Autoevaluación NA 1 12
de varias formas. Guía didáctica
navegadores web revisar guía didáctica unidad 5

ACD Chat de consultas permanente Chat NA NA 0.75 12

para resolver las inquietudes que

27
 Componentes
Resultados de del Instrumentos Tiempo
Contenidos Actividades de aprendizaje Recursos de aprendizaje Calificación (horas) Semana
Aprendizaje aprendizaje2 de evaluación
(ACD, APE, AA)
se les presenten durante su
estudio

ACD Consultas telefónicas y por email Consulta de inquietudes NA NA 0.75 12

Unidad 6. Lectura del capítulo 10 del texto

AA Texto básico NA NA 2 13
Describe las Accesibilidad y básico
características que Usabilidad
mejoran la usabilidad
de un sitio web. Accesibilidad web Describa un ejemplo de
contenido accesible en la vida
Analogía de
Guías para el real, revisando el sitio Web sobre
APE Consulta web Accesibilidad en NA 1 13
cumplimiento Accesibilidad Web
la Vida Real
https://www.w3c.es/Divulgacion/G
Herramientas para uiasBreves/Accesibilidad
la Evaluación de
Accesibilidad
Desarrollo de actividades
AA recomendadas y autoevaluación, Guía Didáctica Autoevaluación NA 1 13
revisar guía didáctica unidad 6

Retroalimentaci
ón de los
Ejemplos de Accesibilidad Web
ACD Participación en el EVA ejemplos NA 1 13
disponibles en el EVA
disponibles en
el EVA

28
 Componentes
Resultados de del Instrumentos Tiempo
Contenidos Actividades de aprendizaje Recursos de aprendizaje Calificación (horas) Semana
Aprendizaje aprendizaje2 de evaluación
(ACD, APE, AA)

Chat de consultas permanente

para resolver las inquietudes que
ACD Chat NA NA 0.75 13
se les presenten durante su
estudio

Consultas telefónicas y por email

ACD Consulta de inquietudes NA NA 0.75 13

Describe las
características que Lectura del capítulo 11 del texto
AA Texto básico NA NA 1.5 14
mejoran la usabilidad básico
de un sitio web.

Desarrollo de actividades
AA recomendadas y autoevaluación, Guía Didáctica Autoevaluación NA 1 14
revidar guía didáctica unidad 6

Mida su nivel de conocimientos

Cuestionario Se promedia
AA sobre los temas de estudio de la Cuestionario 1.5 14
EVA 3 sobre 1 punto
unidad de Accesibilidad y
Usabilidad Web

Enriquece el aspecto visual de tu

sitio web del primer bimestre Guía didáctica y texto básico Escala de
APE 2 puntos 1
incorporando elementos visuales EVA valoración 14
utilizando los conceptos de CSS

29
 Componentes
Resultados de del Instrumentos Tiempo
Contenidos Actividades de aprendizaje Recursos de aprendizaje Calificación (horas) Semana
Aprendizaje aprendizaje2 de evaluación
(ACD, APE, AA)
aprendidos durante el segundo
bimestre.

Chat permanente de consulta

para resolver las inquietudes que
ACD Chat NA NA 1 14
se les presenten durante su
estudio

Consultas telefónica y por email

ACD Consulta de inquietudes NA NA 1 14

Identifica los tipos de

medios, basados en Explora la accesibilidad y
el tiempo de uso usabilidad de los sitios web Escala de
ACD Chat 1.75 puntos 1 15
común en la web. académicos de la Universidad valoración
Técnica Particular de Loja.
Utiliza hojas de estilo
en cascada para
crear normas de Implementa Bootstrap en el sitio
estilo para un sitio Guía didáctica y Texto Básico Escala de
APE web dedicado a la Promoción del 1 punto 2 15
EVA valoración
web. Turismo en tu Provincia

Discute y contrasta Chat de consulta permanente

en el lado del cliente, para resolver las inquietudes que
de problemas de ACD se les presenten durante su Chat NA NA 1.5 15
seguridad del estudio
servidor

30
 Componentes
Resultados de del Instrumentos Tiempo
Contenidos Actividades de aprendizaje Recursos de aprendizaje Calificación (horas) Semana
Aprendizaje aprendizaje2 de evaluación
(ACD, APE, AA)
Preparación de la evaluación
Construye un sitio Guía Didáctica y Texto Básico
AA presencial NA NA 2 16
web sencillo que
organiza la
información de tipos Chat de consulta permanente Chat para resolver las inquietudes que
ACD NA NA 1 16
variados de una se les presenten durante su estudio
organización de
manera efectiva que
permita presentarla Revisión de las
de varias formas. unidades 1, 2 y 3

Describe las
características que
Cuestionario en
mejoran la usabilidad AA Evaluación presencial bimestral Evaluación presencial 2.5 puntos 2 16
línea o impreso
de un sitio web.

31
 2. Resumen de las horas de trabajo de la asignatura por componente de aprendizaje en el bimestre

Componentes del
Horas
aprendizaje
Total de horas de En contacto con el
16
trabajo de la asignatura docente
en el bimestre Práctico-experimental
8

Autónomo 24

Total 48

3. Descripción de las actividades calificadas

Componentes de Aprendizaje: En contacto con el docente (ACD) ( )

Práctico-experimental (APE) ( )
Autónomo (AA) (x )
Actividad de aprendizaje: Mida su nivel de conocimientos sobre los temas de estudio de la unidad
de Contenidos Multimedia y Hojas de Estilo
Tipo de recurso: Cuestionario
Tema de la unidad: Contenidos Multimedia y Hojas de Estilo

Resultados de aprendizaje que se •
espera lograr:
Estrategias Didácticas:
Identifica los tipos de medios, basados en el tiempo de uso común
en la web.
• Utiliza hojas de estilo en cascada para crear normas de estilo para
un sitio web.
Leer comprensivamente los temas de estudio señalados y proceder a
resolver la evaluación parcial

Instrumento de Evaluación: Cuestionario EVA 1

Componentes de Aprendizaje: En contacto con el docente (ACD) ( x )

Práctico-experimental (APE) ( )
Autónomo (AA) ( )
Actividad de aprendizaje: Investigación: Flexbox vs. CSS Grid: Comparativa y aplicaciones
recomendadas
Tipo de recurso: Foro
Tema de la unidad: Contenidos Multimedia y Hojas de Estilo

Resultados de aprendizaje que se Utiliza hojas de estilo en cascada para crear normas de estilo para un
espera lograr: sitio web.
Estrategias Didácticas: En esta investigación, se analizará y comparará el uso de Flexbox y
CSS Grid en el desarrollo web, con el objetivo de determinar cuál de
estos dos enfoques es más adecuado en diferentes situaciones.

Los temas a abordar incluyen:

32
 • Fundamentos de Flexbox y CSS Grid: Explorar los conceptos
básicos de Flexbox y CSS Grid, comprendiendo cómo funcionan y
cómo se utilizan para diseñar
• Comparativa de características: Analizar en detalle las
características y funcionalidades de Flexbox y CSS Grid,
identificando las fortalezas y limitaciones de cada uno
• Escenarios de aplicación, examinar diferentes escenarios y casos
de uso, y determinar cuándo es más apropiado utilizar Flexbox o
CSS Grid en función de los requisitos de diseño.

En base a la investigación grabe un video (duración de 5 minutos

exactos) donde:

• Muestre ejemplos prácticos y demostraciones visuales de

cómo se aplican Flexbox y CSS Grid en situaciones reales.
• Destaque las ventajas y desventajas de cada uno en términos
de diseño flexible, organización de elementos y rendimiento.
• Finalice con recomendaciones basadas en la comparativa y
análisis realizados, ofreciendo pautas claras sobre cuándo
utilizar Flexbox o CSS Grid en función de las necesidades
específicas de cada proyecto.
• Emitir una conclusión sobre su experiencia en el uso de
ambas prácticas

Para la entrega de la actividad:

• Suba el link video (asegure de que sea público)

• Revise el video de otro compañero y emita una conclusión
sobre el trabajo.

Instrumento de Evaluación:

Escala de valoración

Escala de valoración
Criterios de evaluación Excelente Muy bien Bien No aplica
2.5 1.25 0.75 0
Su investigación cumple con los lineamientos
solicitados y responde a las preguntas planteadas
Genera el recurso video y lo explica de forma oportuna,
clara y basada en la investigación realizada
El video cumple con los lineamientos solicitados.
Participa y estimula la interacción comentando con
criterio al menos una de las participaciones de sus
compañeros de forma válida y explicativa

33

Componentes del aprendizaje:
Actividad de aprendizaje:
Tipo de recurso:
Tema de la unidad:
Resultados de aprendizaje que se Construye un sitio web sencillo que organiza la información de tipos
espera lograr:
Estrategias Didácticas:
Instrumento de Evaluación: Cuestionario EVA 2
Componentes del aprendizaje:
Actividad de aprendizaje:
Tipo de recurso:
Tema de la Unidad:
Resultados de aprendizaje que se Describe las características que mejoran la usabilidad de un sitio web.
espera lograr:
Estrategias Didácticas:
En contacto con el docente (ACD) ( )
Práctico-experimental (APE) ( )
Autónomo (AA) ( x )
Mida su nivel de conocimientos sobre los temas de estudio de
Arquitectura de Aplicaciones Web
Cuestionario
Arquitectura de Aplicaciones Web
variados de una organización de manera efectiva que permita
presentarla de varias formas.
Leer comprensivamente los temas de estudio señalados y proceder a
resolver la evaluación parcial
En contacto con el docente (ACD) ( )
Práctico-experimental (APE) ( x )
Autónomo (AA) ( )
Enriquece el aspecto visual de tu sitio web del primer bimestre
incorporando elementos visuales utilizando los conceptos de CSS
aprendidos durante el segundo bimestre.
EVA
HTML 5 y CSS3
Aprovecha lo que has estudiado para aplicar estilos y darle vida a tu
propuesta de Turismo en la Provincia.
Para realizar tu trabajo de forma ordenada, sigue los siguientes pasos:
• Revisa las Unidades 4, 5 y 6 en la Guía didáctica para obtener la
información necesaria.
• Analiza la problemática planteada en la pregunta y realiza cada una
de las tareas solicitadas.
• Retoma el sitio web que trabajaste en el primer bimestre y revisa el
diseño propuesto en Figma para analizar la distribución del
contenido.
Considera los siguientes elementos durante la implementación de la
hoja de estilos:
• Diseño de página: Utiliza CSS para crear una estructura
visualmente atractiva y bien organizada en tu sitio web.
Experimenta con diferentes diseños utilizando propiedades de CSS
como posicionamiento, márgenes y bordes.
• Estilos de texto: Aplica estilos a los textos de tu sitio web utilizando
propiedades de CSS como tamaño de fuente, color, espaciado
entre líneas y decoración del texto. Asegúrate de que el texto sea
34
 legible y esté en armonía con el diseño general.
• Imágenes y gráficos: Agrega imágenes y gráficos relevantes a tu
sitio web utilizando la propiedad CSS "background-image" o la
etiqueta HTML <img>. Ajusta el tamaño de las imágenes, agrega
efectos como sombras o bordes, y optimiza su carga para mejorar
el rendimiento del sitio.
• Colores y paletas: Utiliza CSS para definir colores y crear una
paleta visual coherente en todo el sitio web. Experimenta con
diferentes combinaciones de colores y considera la psicología del
color para transmitir el mensaje adecuado y crear una experiencia
agradable para los usuarios.
• Transiciones y animaciones: Añade interactividad a tu sitio web
mediante la aplicación de transiciones y animaciones con CSS.

Asegúrate de que tu sitio web no contenga errores de CSS. Puedes

validar tu código utilizando la herramienta http://jigsaw.w3.org/css-
validator/.

Finalmente, presenta tu solución en una carpeta comprimida que

contenga todos los archivos necesarios, incluyendo las hojas de estilo
CSS y los archivos de imagen utilizados.

Recuerda seguir los lineamientos y conceptos aprendidos en las

unidades estudiadas para lograr un resultado óptimo en términos de
diseño visual y estructura del contenido de tu sitio web.

Instrumento de Evaluación:

Escala de valoración

Escala de valoración
Criterios de evaluación Excelente Muy bien Bien No aplica
2 1 0.75 0
Cumplimiento de los requisitos
Diseño visual y distribución del contenido
Los textos del sitio web, en tema de legibilidad, el
tamaño de fuente, uso de colores y decoraciones que
se ajustea al diseño general
La elección de colores y la creación de una paleta
visual es coherente y armónica en todo el sitio web
El código CSS utilizado en el sitio web cumple con los
estándares y no contiene errores

35

Componentes del aprendizaje:
Actividad de aprendizaje:
Tipo de recurso:
Tema de la unidad:
Resultados de aprendizaje que se Describe las características que mejoran la usabilidad de un sitio web.
espera lograr:
Estrategias Didácticas:
Instrumento de Evaluación: Cuestionario EVA 3
Componentes del aprendizaje:
Actividad de aprendizaje:
Tipo de recurso:
Tema de la unidad:
Resultados de aprendizaje que se Describe las características que mejoran la usabilidad de un sitio web.
espera lograr:
Estrategias Didácticas:
En contacto con el docente (ACD) ( )
Práctico-experimental (APE) ( )
Autónomo (AA) ( x )
Mida su nivel de conocimientos sobre los temas de estudio de la unidad
de Accesibilidad y Usabilidad Web
Cuestionario
Accesibilidad y Usabilidad Web
Leer comprensivamente los temas de estudio señalados y proceder a
resolver la evaluación parcial
En contacto con el docente (ACD) ( )
Práctico-experimental (APE) ( x )
Autónomo (AA) ( )
Implementa Bootstrap en el sitio web dedicado a la Promoción del
Turismo en tu Provincia
EVA
Hojas de Estilo en Cascada
Bootstrap es un framework de desarrollo web que proporciona una serie
de herramientas y componentes predefinidos para facilitar la creación
de interfaces y mejorar la experiencia de usuario.
Para llevar a cabo esta tarea, sigue los siguientes pasos:
• Descarga la última versión de Bootstrap desde su sitio web oficial
(https://getbootstrap.com) o utiliza un enlace de CDN para
agregarlo a tu proyecto.
• Revisa la estructura y diseño visual de tu sitio web existente y
determina qué elementos se beneficiarían de la implementación de
Bootstrap.
• Utiliza las clases de Bootstrap para estilizar y organizar tus
elementos HTML.
• Aprovecha los componentes de Bootstrap, como barras de
navegación, carruseles, tarjetas y botones, para mejorar la
funcionalidad y el aspecto de tu sitio web.
• Asegúrate de que tu sitio web sea compatible con diferentes
dispositivos y tamaños de pantalla.
• Personaliza el aspecto de Bootstrap utilizando variables y estilos
propios.
• Realiza pruebas exhaustivas para verificar que la implementación
de Bootstrap no cause conflictos con tu código existente y que el
36
 sitio web se vea y funcione como se espera.

Recuerda que Bootstrap es una herramienta poderosa, pero es

importante utilizarla de manera efectiva y coherente con el diseño y la
identidad visual de tu sitio web.

Al finalizar, habrás mejorado el aspecto y la funcionalidad de tu sitio web

de promoción turística gracias a la implementación de Bootstrap.

La solución final debe ser presentada en una carpeta comprimida que

contenga el sitio web y subirla en el EVA en la tarea creada para el
efecto.

Elabore un informe donde se evidencie sus conclusiones sobre la

comparativa de la implementación de su propia hoja de estilos vs. el uso
de Bootstrap, considere:

• Tiempo de implementación
• Facilidad
• Diseño Final

Instrumento de Evaluación:

Escala de valoración

Escala de valoración
Criterios de evaluación Excelente Muy bien Bien No aplica
2 1 0.75 0
Implementación adecuada de Bootstrap
Diseño responsivo
Coherencia visual, el diseño implementado con
Bootstrap es coherente con la temática y la identidad
visual del sitio web de promoción turística
El informe cumple los lineamientos solicitado
Correcta validación de CSS

En contacto con el docente (ACD) ( x )

Componentes del aprendizaje: Práctico-experimental (APE) ( )
Autónomo (AA) ( )
Actividad de aprendizaje: Explora la accesibilidad y usabilidad de los sitios web académicos de la
Universidad Técnica Particular de Loja.
Tipo de recurso: Chat
Tema de la unidad: Accesibilidad y Usabilidad web

Resultados de aprendizaje que se Describe las características que mejoran la usabilidad de un sitio web.
espera lograr:
Estrategias Didácticas: Estimados estudiantes, el chat académico del segundo bimestre, está
relacionado con los contenidos que se estudian en la sexta unidad sobre
Accesibilidad y Usabilidad web.

37
El objetivo de la actividad es compartir su experiencia en el análisis de
accesibilidad hecho al conjunto de sitios web seleccionado.

Las temáticas que pueden abordar:

• Cumplimiento de las pautas de accesibilidad web: evaluar si los

sitios web UTP?L cumplen con las pautas de accesibilidad
establecidas, para garantizar que sean accesibles para personas
con discapacidades visuales, auditivas, motoras y cognitivas.
• Navegación y estructura del sitio: Analizar la organización y
estructura de los sitios web, asegurándose de que la navegación
sea clara, intuitiva y fácil de seguir para los usuarios, incluyendo
aquellos con limitaciones cognitivas o dificultades de atención.
• Legibilidad y contraste: Evaluar la legibilidad del contenido de los
sitios web, incluyendo el tamaño y estilo de fuente, el espaciado
entre líneas y el contraste de colores, para garantizar que sea fácil
de leer para todos los usuarios, incluyendo aquellos con
discapacidades visuales.
• Formularios y funcionalidades interactivas: Analizar la usabilidad
de los formularios y otras funcionalidades interactivas presentes en
los sitios web.
• Multimedia y contenido audiovisual: Evaluar la accesibilidad de los
elementos multimedia, como videos y audios, presentes en los
sitios web están debidamente subtitulados, tengan alternativas de
texto y sean accesibles para personas con discapacidades
auditivas o visuales.
• Adaptabilidad y responsividad: Analizar la adaptabilidad y
responsividad de los sitios web, en diferentes dispositivos y
tamaños de pantalla, asegurándose de que la experiencia de
usuario sea consistente y satisfactoria, tanto en computadoras de
escritorio como en dispositivos móviles.
• Realiza pruebas con usuarios reales.

Para el análisis puede apoyarse en las siguientes herramientas

o Examinator: http://examinator.net/
o Validador CSS: https://jigsaw.w3.org/css-validator/
o Validador HTML: https://validator.w3.org/
o Plugins Accesibilidad Firefox
o Wave: https://wave.webaim.org/

Antes de participar en el chat académico, debemos realizar una

investigación exhaustiva sobre el tema y tomar nota de los puntos más
relevantes. Además, debemos responder a las inquietudes que la tutora
plantee el día del chat académico.

38
 Durante el desarrollo del chat académico, debemos tomar en cuenta lo
siguiente:

• Ingresar al chat 5 minutos antes de la hora indicada.

• Saludar a los presentes al ingresar a la sesión de chat.
• Ser respetuosos con las opiniones de nuestros compañeros.
• Utilizar un lenguaje claro y sencillo, siendo breves en nuestras
respuestas.
• Mantener un uso correcto del lenguaje, recordando que se trata
de un chat académico.
• Leer atentamente las indicaciones del tutor.

La actividad se llevará a cabo a través de la generación de preguntas

por parte del docente. Cada estudiante deberá analizar la pregunta y
presentar su respuesta en una sola línea, finalizando con un punto para
indicar que ha concluido su idea. Podrán haber réplicas a las preguntas
y el docente proporcionará retroalimentación.

Al finalizar el chat académico, el docente emitirá una conclusión sobre

el tema, basada en las opiniones vertidas durante la discusión, con el
objetivo de aclarar ideas.

¡Esperamos contar con su participación activa y enriquecedora en este

chat académico!

Instrumento de Evaluación:

Escala de valoración

Escala de valoración
Criterios de evaluación Excelente Muy bien Bien No aplica
2 1 0.5 0
Participación activa, capacidad para plantear preguntas
relevantes, contribuir con ideas y participar en
discusiones constructivas
Conocimiento y comprensión del tema
Calidad de las respuestas
Análisis crítico
Colaboración y retroalimentación

39

Componentes del aprendizaje:
Actividad de aprendizaje
Tipo de recurso
Tema de la unidad
Resultados de aprendizaje que se
espera lograr:
Estrategias Didácticas
Instrumento de Evaluación:
Criterios de evaluación
Claridad y organización, presenta la información de
manera clara y organizada
En contacto con el docente (ACD) ( x )
Práctico-experimental (APE) ( )
Autónomo (AA) ( )
Discutir sobre las mejores prácticas y estándares en el desarrollo web
Actividad Suplementaria - Foro
Accesibilidad y Usabilidad web
Identifica los tipos de medios, basados en el tiempo de uso común en
la web.
Discutir sobre las mejores prácticas y estándares en el desarrollo web,
incluyendo la semántica HTML, el uso adecuado de etiquetas y
atributos, la optimización de código, la compatibilidad entre
navegadores, etc.
Revise las siguientes temáticas:
• Semántica HTML, explorar la importancia de utilizar una estructura
HTML semántica y significativa para mejorar la accesibilidad
• Uso adecuado de etiquetas y atributos
• Optimización de código:
• Compatibilidad entre navegadores
• Responsividad y diseño adaptable.
• Accesibilidad web
• Estándares web y validación
• Rendimiento web
Estas temáticas permiten profundizar en las mejores prácticas y
estándares en el desarrollo web.
Basado en su investigación, cree una infografía que resuma los
principales de su trabajo
La infografía es una herramienta visual que permite presentar
información de manera clara y concisa.
Recuerde que una infografía es una representación visual de datos o
información, por lo que deberá identificar los aspectos más relevantes
de su investigación y presentarlos de manera atractiva y fácil de
entender.
Escala de valoración
Escala de valoración
Excelente Muy bien Bien No aplica
2 1 0.5 0
40
Diseño Visual, el diseño de la infografía es atractivo y
llamativo
Contenido Relevante, resume de manera precisa y
concisa los puntos clave de la investigación
Originalidad y Creatividad, se utilizan elementos
creativos para representar la información de manera
innovadora
Coherencia y consistencia, se utiliza un estilo
consistente en términos de colores, tipografía,
iconografía

41
D. Evaluación de la asignatura segundo bimestre

Calificación Peso
Fechas de
Componente Actividad Instrumento
ejecución
Foro: Investigación:
Flexbox vs. CSS Grid: Semana 10:
Comparativa y Escala de valoración 11 al 17 de 1.75 17.5%
aplicaciones diciembre 2023
recomendadas

Chat: Explora la
accesibilidad y
Semana 15:
usabilidad de los sitios
APRENDIZAJE EN Escala de valoración 15 al 21 de enero
web académicos de la
CONTACTO CON EL 2024
Universidad Técnica
DOCENTE Particular de Loja.

1.75 17.5%
Actividad
Suplementaria – Foro: Semana 16:
Discutir sobre las 22 al 28 de enero
Escala de valoración
mejores prácticas y 2024
estándares en el
desarrollo web

Subtotal 3.5 35%

Semana 10:
11 al 17 de
Cuestionario EVA 1 diciembre 2023 10%
Semana 12:
Evaluación parcial 25 al 31 de 1
APRENDIZAJE Cuestionario EVA 2 diciembre 2023
AUTÓNOMO
Semana 14:
8 al 14 de enero
Cuestionario EVA 3 2024

Evaluación presencial Cuestionario en línea 26 de enero al 30 de 2.5

bimestral o impreso enero 2024 25%
Subtotal 3.5 35%
Enriquece el aspecto
visual de tu sitio web
del primer bimestre
incorporando Semana 14:
elementos visuales Escala de valoración 8 al 14 de enero 2 20%
utilizando los 2024
conceptos de CSS
aprendidos durante el
APRENDIZAJE segundo bimestre.
PRÁCTICO Implementa Bootstrap Semana 15:
1
EXPERIMENTAL en el sitio web Escala de valoración 15 al 21 de enero 10%
dedicado a la 2024

42
 Promoción del Turismo
en tu Provincia
Subtotal 3 30%
TOTAL 10 100%

EVALUACIÓN DE RECUPERACIÓN

Actividades académicas Puntaje Fechas importantes

Evaluación de recuperación 3.5 17 y 18 de febrero de 2024

E. Datos del equipo docente:

Horario de tutoría3

Paralelo Día Horario Sala Teléfono Extensión

A Lunes 17H00 – 19H00 VI 3701444 2390

Nombre
Título(s) de tercer nivel
Título(s) de cuarto nivel
Departamento
Correo electrónico
Teléfono
Currículo profesional resumido
Profesor autor
Diana Alexandra Torres Guarnizo
Ingeniera en Sistemas Informáticos y Computación
Magister en Tecnologías de la Web
Ciencias de la Cumputación y Electrónica
datorres@utpl.edu.ec
07 37014 44 Ext. 2390

Maestría en “Tecnologías Avanzadas de la Web”. Universidad de Alcalá - España. Ingeniera en Sistemas

Informáticos y Computación en la Universidad Técnica Particular de Loja, Docente Universitario
(Establecimiento UTPL). Experiencia de 13 años en el Departamento de Ciencias de la Computación y
Electrónica en la sección de Tecnologías Avanzadas de la Web. Administrador del Sistema de Información
Académica y Científica SIAC-UTPL.

F. Relación con el perfil de egreso (rediseño curricular)

Resultados de aprendizaje de la Contribución Resultado/s de aprendizaje del perfil de

asignatura
Describe la estructura de la world
wide web como interconectar
documentos de hipertexto.
(inicial, medio, final) egreso
Implementa aplicaciones a partir de
especificaciones y modelos de software
Inicial utilizando estándares de documentación y de
programación

5
El nombre del profesor tutor y horario de tutoría constará en el entorno virtual de aprendizaje.

43
 Discute y valida técnicas de datos de
entrada en el lado del cliente frente a
la programación del lado del servidor.

Utiliza algunas tecnologías de

presentación.

Identifica el propósito de un sitio web

o género (comercio electrónico, auto-
servicio, servicio gubernamental
educativo, etc.).

Construye un sitio web sencillo que

organiza la información de tipos
variados de una organización de
manera efectiva que permita
presentarla de varias formas.

Crea y valida documentos HTML 5.

Identifica los tipos de medios,

basados en el tiempo de uso común
en la web.

Utiliza hojas de estilo en cascada

para crear normas de estilo para un
sitio web.

Discute y contrasta en el lado del

cliente, de problemas de seguridad
del servidor.

Describe las características que

mejoran la usabilidad de un sitio web.

G. Bibliografía básica y complementaria

a) Nombre del texto básico

López, M., Sánchez, D. Y Moreno, Á. (2016). Programación Web en el Entorno Cliente. Madrid,
España: RA-MA

b) Información general del texto

44
 Programación Web en el Entorno Cliente es un texto básico que abarca conceptos relacionados con los
lenguajes y técnicas involucradas en el desarrollo de soluciones web en el entorno del cliente, así como
las arquitecturas y herramientas propias del diseño de páginas web, además incluye temas importantes
hoy en día como usabilidad y accesibilidad web en entornos cliente.

Se ha seleccionado este texto porque en cada capítulo se incluyen todo tipo de ejemplos, imágenes,
tablas y casos prácticos, con el propósito de facilitar la asimilación de los conocimientos tratados.

c) Nombre de la guía didáctica

Torres, D. (2019). Guía didáctica Tecnologías Web. Loja: Editorial UTPL.

d) Breve descripción general de la guía didáctica

Esta guía es un instrumento didáctico que se usará como complemento del texto básico, en el cual usted
encontrará lineamientos que lo guiarán a través del texto básico; además de brindar orientaciones
adecuadas para facilitar el proceso de enseñanza–aprendizaje de esta asignatura.

BIBLIOGRAFÍA COMPLEMENTARIA

a) Nombre del texto

MacDonald, M. (2012). Creación y diseño Web. Madrid, España: Anaya Multimedia.

b) Breve descripción del texto

En este libro se explica a detalle los elementos y estructura del Lenguaje de Etiquetado HTML 5, con la
finalidad de que el alumno pueda profundizar en algunos temas si lo requiere, además aprenderá a utilizar
motores de búsqueda populares para sacar rentabilidad económica a su sitio web, así como a sorprender
a los visitantes de su página web con menús, botones y otros elementos atractivos, entre muchas
posibilidades más.

c) ¿El texto está disponible en la biblioteca general física o virtual de la UTPL?

Física x Virtual
d
e
BIBLIOTECA VIRTUAL l
T
Repositorio (base de datos) Enlace
e
x
t
o
RECURSOS EDUCATIVOS ABIERTOS (REAs) B
á
s
45
i
 Título del REA Enlace

Desarrollo de http://serendipity.utpl.edu.ec/serendipity/ocw/browse?details=1&fq=id:3920
Aplicaciones Web
HTML y CSS https://www.codecademy.com/es/tracks/html-css-traduccionalespanol-
america-latina-clone
Introducción a https://codigofacilito.com/cursos/HTML5
HTML 5
Validación de http://cidecame.uaeh.edu.mx/lcc/mapa/PROYECTO/libro40/35_validacin_
Entradas de de__entradas_de_datos_del_lado_cliente.html
datos de lado del
cliente
Procesamiento http://cidecame.uaeh.edu.mx/lcc/mapa/PROYECTO/libro40/21_procesami
del Lado del ento_del_lado_del_servidor.html#:~:text=La%20Programaci%C3%B3n%2
Servidor 0del%20lado%20del,p%C3%A1ginas%20HTML%20din%C3%A1micamen
te%20como%20respuesta.

La utilización de los REAs (al menos uno por bimestre) es obligatoria.

NOTA: Durante todo el bimestre el profesor deberá utilizar un portafolio docente digital donde respalde todo el material
utilizado para el desarrollo de la asignatura, sean diapositivas, pruebas, recursos, etc.)

H. Elaboración y aprobación

Actividades Nombre Función Firma

Elaboración: Diana Alexandra Torres Guarnizo Profesor autor

Fecha de elaboración: 14 de mayo de 2023

Miembro del equipo de calidad

Evaluación: Ramiro Leonardo Ramírez
y/o par académico

Aprobación: Daniel Alejandro Guamán Coronel Director de la carrera

Número y fecha de Acta de aprobación: Acta Número: 13, 15 de mayo de 2023

46