Sílabo Diseño Web - Instituto Tecnológico Trujillo

INSTITUTO DE EDUCACIÓN SUPERIOR TECNOLÓGICO PÚBLICO “TRUJILLO”
SÍLABO DE DISEÑO WEB
I. INFORMACIÓN GENERAL
1. Institución educativa:
2. Programa de estudios:
3. Módulo formativo:
4.
5.
6.
7.
8.
Unidad didáctica:
Créditos:
Período académico:
Turno:
Carga horaria lectiva:
8.1. Semanal:
8.2. Horas teóricas:
8.3. Horas practicas:
8.4. Semestral:
9. Duración semestre lectivo:
9.1. Inicio:
9.2. Término:
10. Docente:
Instituto de Educación Superior Tecnológico Público
“Trujillo”
Computación e Informática
Gestión de Aplicaciones para Internet y Producción
Multimedia
Diseño Web
3
Quinto
Diurno/Nocturno
04
01
03
72
lunes 02 de abril del 2018
viernes 03 de agosto del 2018
Mg. Ing. David Gil Meza
II. SUMILLA
La presente unidad didáctica es impartida a los estudiantes del V semestre de la Carrera
Profesional Técnica de Computación e Informática, es de carácter eminentemente práctico
sin descuidar la base teórica que la sustenta.
Esta Unidad Didáctica ha sido planificada para dotar a los estudiantes de los conocimientos
y el desarrollo de habilidades y destrezas para que este sea capaz de realizar las actividades
inherentes a un diseñador web, es decir conocer las tecnologías actuales que se utilizan del
lado del cliente (front-end) y aplicarlas correctamente en el diseño de sitios web.
III. COMPETENCIA DEL MÓDULO FORMATIVO
Diseñar, desarrollar, administrar, gestionar e implementar productos multimedia y
aplicaciones para internet, teniendo en cuenta los requerimientos del cliente.
IV. CAPACIDAD DE LA UNIDAD DIDÁCTICA
Estructurar los componentes de textos, imágenes, gráficos, animaciones, video e
hipervínculos, de un sitio web utilizando conocimientos, técnicas y herramientas propias del
dominio; para expresar estéticamente la identidad visual de una organización.
INSTITUTO DE EDUCACIÓN SUPERIOR TECNOLÓGICO PÚBLICO “TRUJILLO”
V. PROGRAMACIÓN
1. Indicador de logro
1.1. Descripción:
Elabora diseño inicial del sitio web aplicando correctamente fundamentos teóricoprácticos y buenas prácticas del diseño web.
1.2. Duración:
1.2.1. Inicio:
02/04/2018
1.2.2. Término: 13/04/2018
1.3.
Organización
ELEMENTOS
DE
CAPACIDAD
Identificar
conceptos
básicos del
Diseño Web.
Elaborar
Briefing del
Proyecto de
Diseño Web.
ACTIVIDADES
DE
APRENDIZAJE
CONTENIDOS
CONCEPTUALES
PROCEDIMENTALES
Actividad 1
Introducción al
Diseño Web
 Panorama actual del
diseño web.
 ¿Qué constituye una
página web?
 La evolución del
diseño web.
 Herramientas
esenciales.
 Diseña para el pasado,
presente y futuro.
 Diseña para diferentes
tipos de sitios web.
 Blogging y social
media.
 Las siete reglas del
diseño web.
 Evolución del diseño
web.
 Visita guiada a
sitios web
representativos
de diseño web
Actividad 2
Briefing del
Proyecto de
Diseño Web
 Entendiendo los
aspectos estéticos del
diseño web
- Composición.
- Tipografía.
- Color.
 Pautas para
elaboración del
briefing del proyecto
de diseño web.
 Creación de
bocetos del sitio
web.
ACTITUDINALES
HORAS
 Trabajar en equipo en
su entorno laboral
fomentando la
cohesión del grupo
para alcanzar los
resultados previstos.
 Resolver problemas
creativamente en el
ámbito académico y de
su profesión, de
manera individual o
grupal.
 Emplear una
comunicación efectiva
y asertiva con sus
pares y superiores, así
como con clientes y
usuarios.
 Evidenciar
responsabilidad
durante el desarrollo
de las actividades
académicas y
laborales.
 Optimizar el tiempo en
la realización de las
tareas asignadas.
 Demostrar tolerancia al
trabajo bajo presión.
 Demostrar actitud
positiva ante la vida
2. Indicador de logro
2.1. Descripción:
Implementa diseño inicial del sitio utilizando correctamente los elementos del
lenguaje de marcado.
04
04
INSTITUTO DE EDUCACIÓN SUPERIOR TECNOLÓGICO PÚBLICO “TRUJILLO”
2.2. Duración:
2.2.1. Inicio:
16/04/2018
2.2.2. Término: 11/05/2018
2.3. Organización
ELEMENTOS
DE
CAPACIDAD
ACTIVIDADES
DE
APRENDIZAJE
CONTENIDOS
CONCEPTUALES







Elaborar
páginas web
básicas con
HTML5.
Actividad 3
El leguaje de
marcado HTML

Usar imágenes y
enlaces en
páginas
HTML5.
Actividad 4
Imágenes y enlaces
HTML



Organizar
contenidos en
páginas
HTML5.
Actividad 5
Organización de
contenidos en
HTML



Lenguajes de etiquetas.
¿Qué es HTML?
Elementos HTML.
Atributos HTML.
Eventos HTML.
Estructura básica HTML.
Textos HTML
- Párrafos, retornos de carro
en HTML.
- Encabezados en HTML.
- Formateo semántico del
texto en HTML.
- Citando textos en HTML.
Definición y textos
preformateados.
- Formateo del texto en
HTML: etiqueta span.
- Caracteres especiales en
HTML.
Imágenes en HTML
- Usando imágenes en el
HTML.
- Etiquetas de imagen en
HTML.
- Imágenes de fondo en
HTML.
- Etiqueta picture en HTML.
- Iconos para la barra de
navegador en HTML.
- Uso de fuentes como iconos
en HTML: font awesome.
- Mapas de imagen en HTML
Enlaces HTML
- Enlaces con HTML: la
etiqueta a.
- Enlaces a partes de la
página.
- Enlaces a archivos.
- Atributo target
- Enlaces especiales.
Imágenes con enlaces en
HTML.
Contenedores no semánticos
en HTML: etiqueta div
Organizando contenidos en
HTML.
Listas desordenadas en
HTML.
Listas ordenadas en HTML.
PROCEDIMENTALES
 Creación de
página HTML
básica.
 Creación de
páginas HTML
con imágenes y
enlaces.
 Creación de
contenido
organizado a
través de
elementos
HTML.
ACTITUDINALES
 Trabajar en
equipo en su
entorno laboral
fomentando la
cohesión del
grupo para
alcanzar los
resultados
previstos.
 Resolver
problemas
creativamente
en el ámbito
académico y de
su profesión, de
manera
individual o
grupal.
 Emplear una
comunicación
efectiva y
asertiva con sus
pares y
superiores, así
como con
clientes y
usuarios.
 Evidenciar
responsabilidad
durante el
desarrollo de las
actividades
académicas y
laborales.
 Optimizar el
tiempo en la
realización de
las tareas
asignadas.
 Demostrar
tolerancia al
trabajo bajo
presión.
 Demostrar
actitud positiva
ante la vida
HORAS
04
04
04
INSTITUTO DE EDUCACIÓN SUPERIOR TECNOLÓGICO PÚBLICO “TRUJILLO”
Estructurar
información de
las páginas web
usando tablas y
marcos.
 Listas de definición en
HTML.
 Etiqueta nav en HTML.
 Estructura de tablas
- Etiqueta Table.
- Etiquetas tr y td.
- Etiquetas th, thead, tbody y
tfoot
 Uso de iframes
- Iframes.
- Marcos
Actividad 6
Formas
adicionales de
organizar los
contenidos en
HTML
 Creación de
contenido
estructurado a
través de tablas y
marcos.
04
3. Indicador de logro
3.1. Descripción:
Realiza el proceso de maquetación web aplicando correctamente técnicas y
herramientas de diseño web actuales de acuerdo con los requisitos estructurales
y estéticos definidos previamente.
3.2. Duración:
3.2.1. Inicio:
14/05/2018
3.2.2. Término: 15/06/2018
3.3. Organización
ELEMENTOS
DE
CAPACIDAD
Analizar la
estructura a
reproducir.
Crear las
etiquetas HTML
que la
representarán.
Estilizar los
elementos de las
páginas del sitio
web.
ACTIVIDADES
DE
APRENDIZAJE
Actividad 7
Elementos
estructurales y
semántica
Actividad 8
CSS
Aplicar estilos
de dimensión y
posición.
Actividad 9
Dimensión y
Posición CSS
Aplicar estilos
de apariencia.
Actividad 10
Formateando
con CSS
Maquetar el
sitio web.
Actividad 11
Maquetación del
sitio web
CONTENIDOS
CONCEPTUALES
 Principales tipos de
estructuras HTML
 Elementos en línea y de
bloque para maquetación
web.
 El modelo de caja para
maquetación web.
 Estructura basada en
etiquetas semánticas.
 ¿Qué es CSS?
 Sintaxis CSS.
 Selectores Básicos CSS.
 Formas de insertar CSS.
 Selectores Avanzados
 Unidades CSS.
 Dimensiones en CSS.
 Posición con CSS.
 Posición: float.
 Formateando texto.
 Formateando imágenes.
 Formateando enlaces.
 Contenidos y diseño de
la estructura web.
 Cabecera y menú de
nuestra web.
 Zona de contenidos de la
web.
 Cierre y pie de la web.
PROCEDIMENTALE
S
 Representación
de la estructura
del sitio web
con etiquetas
HTML.
 Creación y uso
de hojas de
estilo en las
páginas del sitio
web.
 Dimensionando
y distribuyendo
estéticamente
los elementos
de las páginas
del sitio web.
 Formateando
elementos html
con CSS.
 Elaboración del
layout del sitio
web.
ACTITUDINALES
 Trabajar en equipo en su
entorno laboral
fomentando la cohesión
del grupo para alcanzar
los resultados previstos.
 Resolver problemas
creativamente en el
ámbito académico y de
su profesión, de manera
individual o grupal.
 Emplear una
comunicación efectiva y
asertiva con sus pares y
superiores, así como con
clientes y usuarios.
 Evidenciar
responsabilidad durante
el desarrollo de las
actividades académicas y
laborales.
 Optimizar el tiempo en
la realización de las
tareas asignadas.
 Demostrar tolerancia al
trabajo bajo presión.
 Demostrar actitud
positiva ante la vida
HORAS
04
04
04
04
04
INSTITUTO DE EDUCACIÓN SUPERIOR TECNOLÓGICO PÚBLICO “TRUJILLO”
4. Indicador de logro
4.1. Descripción:
Implementa la interactividad del usuario con el sitio web siguiendo criterios
técnicos de accesibilidad y usabilidad.
4.2. Duración:
4.2.1. Inicio:
18/06/2018
4.2.2. Término: 27/07/2018
4.3. Organización
ELEMENTOS
DE
CAPACIDAD
ACTIVIDADES
DE
APRENDIZAJE
CONTENIDOS
HORAS
CONCEPTUALES
PROCEDIMENTALES
 ¿Qué son los
formularios HTML?
Implementar la
interacción del
usuario con el
sitio web.
Actividad 12
Formularios
HTML
 La etiqueta form.
Atributos.
 Elementos de
formulario.
 Trabajando con
formularios.
 Tipos para el elemento
input.
Agregar código
JavaScript
básico a nuestro
sitio web.
Actividad 13
JavaScript:
programación
básica
 ¿Qué es JavaScript?
 Elementos básicos.
 Estructuras de control
de flujo.
Crear arreglos y
funciones
JavaScript.
Actividad 14
JavaScript:
arreglos y
funciones
Usar funciones
y objetos de
JavaScript para
crear contenido
aleatorio.
Actividad 15
JavaScript: crear
contenido
 HTML y JS
Actividad 16
jQuery para
diseño
 Introducción
Utilizar jQuery
en el diseño de
las páginas del
sitio web.
Integrar el
diseño del sitio
web.
Actividad 17
Presentación y
sustentación del
proyecto de diseño
web
 Arreglos
 Funciones
 CSS y JS.
 Instalación y
codificación.
 Agregando
condigo
JavaScript básico
a las páginas del
sitio web.
 Trabajando con
arreglos y
funciones
JavaScript.
 Creación de
contenido
aleatorio.
 Trabajando con
jQuery.
 Briefing del proyecto.
 Bocetos iniciales.
 Diseño final del sitio
web.
 Demostración del
diseño elaborado.
Actividad 18
Recuperación Académica
ACTITUDINALES
 Trabajar en equipo en
su entorno laboral
fomentando la
cohesión del grupo
para alcanzar los
resultados previstos.
 Resolver problemas
creativamente en el
ámbito académico y de
su profesión, de
manera individual o
grupal.
 Emplear una
comunicación efectiva
y asertiva con sus
pares y superiores, así
como con clientes y
usuarios.
 Evidenciar
responsabilidad
durante el desarrollo
de las actividades
académicas y
laborales.
 Optimizar el tiempo en
la realización de las
tareas asignadas.
 Demostrar tolerancia al
trabajo bajo presión.
 Demostrar actitud
positiva ante la vida
04
04
04
04
04
04
04
INSTITUTO DE EDUCACIÓN SUPERIOR TECNOLÓGICO PÚBLICO “TRUJILLO”
VI.
RECURSOS DIDÁCTICOS
 Laboratorio de cómputo con acceso a internet.
 Software específico.
 Proyector multimedia.
 Presentaciones con diapositivas.
 Documentos digitales e impresos.
 Otros: pizarra, plumones, papel, bolígrafos.
VII.
VIII.
METODOLOGÍA

Diálogo utilizando preguntas rectoras para recuperar y activar conocimientos previos sobre los
temas tratados.

Disertación por parte del docente sobre los contenidos teóricos con el apoyo de medios
audiovisuales.

De búsqueda e intercambio de información a fin de profundizar en los contenidos teóricos
disertados por el docente.

Lluvia de ideas que permitan a los estudiantes expresar libremente sus ideas.

Demostración del uso de las herramientas utilizadas en el desarrollo de la unidad didáctica.

Estudio en equipo del material preparado por el docente.

Cuatro pasos de la demostración a fin de garantizar la debida transferencia de conocimiento y su
aplicación práctica.

Diseño de un sitio web organizacional a fin de garantizar la aplicación del conocimiento teórico
en un caso práctico real.

Presentación, exposición y sustentación de los trabajos desarrollados.
EVALUACIÓN
1. Requisitos de aprobación (R.D. Nº 0929-2011-ED y RSG N° 311-2017-MINEDU)
Sistema de calificación es vigesimal; es decir, de cero (0) a veinte (20).
 La nota mínima aprobatoria es trece (13). El medio punto es a favor del alumno.
 Los estudiantes que desaprueben una Unidad Didáctica, con calificativo entre diez (10)
y doce (12), tienen derecho a participar en el proceso de recuperación.
 Los discentes que después del proceso de recuperación obtengan una nota menor a trece
(13), repiten la Unidad Didáctica en el semestre académico inmediato en el cual se
programe. Si desaprueba una Unidad Didáctica por segunda vez, repetirá el módulo
educativo.
Los alumnos que desaprueben un módulo educativo podrán volverlo a llevar cuando sea
nuevamente programado. Si desaprueban un módulo educativo por segunda vez, serán
retirados de la carrera profesional.
Los estudiantes que al promediar las evaluaciones de las capacidades de una Unidad
Didáctica obtengan una calificación menor a diez (10) no podrán asistir al proceso de
recuperación; por tanto, repetirán la unidad.
Las inasistencias injustificadas no deben exceder el 30% de horas programadas en la Unidad
Didáctica; caso contrario, los alumnos serán desaprobados en forma automática.
INSTITUTO DE EDUCACIÓN SUPERIOR TECNOLÓGICO PÚBLICO “TRUJILLO”
2. Técnicas de evaluación
 Aplicación de pruebas escritas.
 Observación sistemática.
 Monitoreo de actividades en laboratorio a través de software específico.
 Comprobación de resultados.
IX. RECURSOS BIBLIOGRÁFICOS
Delamater, M., Ruvalcaba, Z. (2017). JavaScript anda jQuery (3 ed.). Fresno, USA: Mike Murach
& Associates, Inc.
Eccher, C. (2008). Professional Web Desing – Techniques and Templates (3 ed.). Boston, USA:
Course Technology.
Eccher, C. (2015). Professional Web Desing – Techniques and Templates (5 ed.). Boston, USA:
Course Technology
Gauchat, J. (2012). El gran libro de HTML5, CSS3 y JavaScript. Barcelona, España: Marcombo.
Gil, D. (2012-2018). El blog de David Gil. Trujillo, Perú. Recuperado de
https://davidgilsm.wordpress.com
Schmitt, C., Trammell, M., Marcotte, E., Orchard, D., Dominey, T. (2008). Profesional CSS:
Cascading Style Sheets for Web Desing (2 ed.). Indianapolis, USA: Wiley Publishing, Inc.
Trujillo, marzo de 2018
Mg. Ing. David Gil Meza
DOCENTE