UCompensar

EDUCACIÓN PARA AVANZAR

Actividad práctica aplicada

Desarrollo Web
ACTIVIDAD DE APRENDIZAJE No. 1:

ACTIVIDAD No. 1:

Programa académico
Técnica Profesional en Producción de Piezas Multimedia

Denominación del curso

Desarrollo Web

Estrategia didáctica

La estrategia didáctica para seguir es el aprendizaje colaborativo, donde el estudiante realizara

de manera conjunta con el docente, diferentes tareas académicas para así poder resolver y
profundizar en su propio aprendizaje. Dentro del aprendizaje colaborativo se plantean diferentes
teorías. Piaget menciona cuatro factores que actúan dentro diferentes estructuras, como los son:
la maduración, la experiencia, el equilibrio y la transmisión del conocimiento. Todos estos se
pueden dar por medio de diferentes ambientes colaborativos. La teoría constructivista (Vygotsky,
1974) el aprendiz requiere la acción de un agente mediado para acceder a la zona de desarrollo
próximo, este será responsable de ir entendiendo un andamiaje que proporcione seguridad y que
permita que aquél se apropie del conocimiento y lo transfiera a su entorno

Etapa de Contextualización
INTRODUCCIÓN
Cuando se navega en la red, se encuentra una gran cantidad de sitios
alojados dentro de esta, como lo son blogs o las páginas web. Las páginas
web nos informan, allí se puede subir información y en algunas ocasiones
permite comprar productos. Pero sí usted quiere crear algún contenido donde
se puedas subir artículos, o subir cualquier tipo de contenido puede
Inicio de la actividad,
es la introducción a la desarrollar un blog.
actividad
En esta actividad se va a poner en contexto entre las diferencias de un blog y
una página web y sus principales diferencias. Debe tener conocimientos
básicos de html y css. Es pertinente tener claro el modelo de caja y las
etiquetas básicas que se emplean para el desarrollo de una web.
 DESARROLLO DE ACTIVIDADES

Trabajo Autónomo (Obligatorio)

Comprende la diferencia entre el blog y una página web. Conoce
etiquetas básicas para el desarrollo de una página web con HTML como
Criterio de realización
componente básico de la estructura de una página web, y lo
complementa con hojas de estilo en cascada de CSS
Páginas web vs blogs
Contenidos a
abordados en la Etiquetas básicas de html
actividad
Elementos de CSS (selectores, declaraciones, propiedad y valor).
Para este trabajo el estudiante debe desarrollar una página web, con tres
pestañas de navegación de una marca a su preferencia con elementos
de multimedia, debe realizar la entrega de:
• Mapa de navegación
• Maqueta de cada pestaña de navegación
1) Home (misión, visión, características de la empresa puedes
dejar cajas de color para entender que vas a poner allí)
2) Productos.( Puedes dejar como unas cajas de color para
entender que allí usaras una imagen )
3) Contáctenos. Formulario de contacto con el cliente
• Desarrollo de la página con html y css, mínimo 3 pestañas
Actividad a realizar
1) Home (misión, visión, características de la empresa
(Debe ser lo
suficientemente explicita 2) Productos. Esta debe tener fotos, videos y animaciones
y detallada)
sencillas con css
3) Contáctenos. Formulario de contacto con el cliente
• Link de la página web, debe subirse en un hosting gratuito

Recuerda que el mapa de navegación nos permite saber cuántas

interacciones se desarrollaran dentro de la página que se va a realizar.
Dentro de la maquetación de las páginas, haremos una pre-visualización de
nuestro archivo final, este se puede desarrollar de una manera muy sencilla,
como lo puede ser illustrator o un prototipado más complejo como lo puede ser
Adobe XD. Una vez que culminemos de realizar nuestra maquetación y sabemos
cómo se verá nuestra página web podremos proceder a desarrollarla. Recuerda
que es importante crear un Índex dentro del desarrollo de una página
web (este por lo general es el home), para que cuando lo subas al
hosting este no genere ningún tipo de inconveniente.
 Debes cargar en la plataforma de UCompensar un archivo en formato
PDF, que consiste en:

• Desarrollo del mapa de navegación

• Maqueta de cada pestaña de navegación
1) Home (misión, visión, características de la empresa) puedes
dejar cajas de color para entender que vas a poner allí
2) Productos. Puedes dejar como unas cajas de color para
Características del
entregable a realizar por entender que allí usaras una imagen
el estudiante
(Documentos, videos, 3) Contáctenos. Formulario de contacto con el cliente
mapa, etc.)
• Desarrollo de la página con html y css, mínimo 3 pestañas

1) Home (misión, visión, características de la empresa

2) Productos. Esta debe tener fotos, videos y animaciones
sencillas con css
3) Contáctenos. Formulario de contacto con el cliente
• Link de la página web, debe subirse en un hosting gratuito y solo
debes enviar el link de la página que hiciste

Espacios de Socialización
De acuerdo con la acción formativa de la unidad sobre el diseño web este es
un espacio académico de interacción y construcción colectiva de conocimiento,
en el que tus participaciones y las de tus compañeros contribuyen al
fortalecimiento del conocimiento del curso.

Este espacio es para brindar apoyo entre pares (compañeros del curso), para
aclarar dudas e inquietudes y profundizar las ideas sobre el contenido de la
Foros de debate, acción formativa del curso (actividades de aprendizaje o materiales de estudio)
colaborativos, de
información u otros Haga
su participación y comente la de dos de sus compañeros, recuerde las
espacios de normas de Netiqueta.
socialización

En el foro de participación colaborativa, deben subir las ventajas y desventajas

de un sitio web tanto un blog como una página web, puedes hablar de la
seguridad, las interacciones, las animaciones, entro otras tantas cosas que
tienen cada una de estas.

Debes participar en dos de las publicaciones de sus compañeros haciendo un

aporte al análisis del autor del ejercicio.

Porcentajes de calificación en Etapa de Contextualización

En este espacio sólo se deben especificar los porcentajes de calificación de las actividades y el cuestionario.
Tenga en cuenta que la suma de los % debe ser igual a 100.

Porcentaje evaluativo de la Actividad académica. 75%

Porcentaje del Cuestionario evaluativo. 20%

Porcentaje del Foro de debate. 5%

Recursos
Técnicos,
tecnológicos Software, aplicaciones, herramientas, etc.
Ambientes de
aprendizaje Solución E-Learning
Mitchell, W. T. (2009). Teoría de la imagen (Vol. 5).
Ediciones Akal. Recuperado de
Obligatorios http://www.fadu.edu.uy/estetica-diseno-
ii/files/2018/04/Mitchell-Teoria-de-La-Imagen.pdf
Recursos
bibliográficos o
audiovisuales Belting, H. (2007). Antropología de la imagen (Vol.
3032). Katz editores.
Complementarios
Barthes, R. (1986). Retórica de la imagen. Lo obvio
y lo obtuso, 29-47.