INSTITUTO DE EDUCACIÓN SUPERIOR PRIVADO “TEC”

PROGRAMA DE ESTUDIOS DESARROLLO DE SISTEMAS DE INFORMACIÓN

SILABO

I. DATOS INFORMATIVOS

• PROGRAMA DE ESTUDIOS : DESARROLLO DE SISTEMAS DE INFORMACIÓN

• MODULO PROFESIONAL : DESARROLLO DE PRUEBAS INTEGRALES Y PRODUCCION DE
SISTEMA DE INFORMACIONOBJETOS

• UNIDAD DIDACTICA : DISEÑO WEB.

• AÑO LECTIVO : 2022 - II
• PERIODO ACADEMICO : III
• NÚMERO DE HORAS SEMANALES : 03 horas
• CREDITOS : 03 creditos
• DURACION DEL SEMESTRE : 18 semanas
• NÚMERO DE HORAS SEMESTRAL : 80 horas
• DOCENTE : Ing. Matias villalobos Jose Luis.

II. SUMILLA

La presente unidad didáctica impartida a los estudiantes 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. UNIDAD DE COMPETENCIA VINCULADA AL MÓDULO

Desarrollar las pruebas integrales de los sistemas de información y servicios de TI en la fase de

implantación, de acuerdo al diseño funcional, buenas prácticas de TI y políticas de seguridad de la
organización.
Realizar la puesta en producción de los sistemas de información o servicios de TI, de acuerdo a la
planificación efectuada.

1
 INSTITUTO DE EDUCACIÓN SUPERIOR PRIVADO “TEC”
IV. CAPACIDAD DE LA UNIDAD DIDÁCTICA

1. Recuerda los componentes lenguaje de textos, imágenes, gráficos, animaciones, video e

hipervínculos de un sitio web, utilizando conocimientos, técnicas y herramientas propias del
desarrollo web.

2. Analiza todos los mecanismos y código HTML5 y CSS3, junto con las técnicas de maquetación
para la elaboración de la estructura básica de las páginas del Sitio Web.

3. Aplica código HTML5, CSS3 y JavaScript para crear interactividad y dinamismo a las páginas
web creadas en el sitio web, así como también Jquery, ajax, json y apis para mejorar la
apariencia y el manejo del contenido de las páginas del sitio web.

4. Crea portales web en forma rápida y sencilla, utilizandoHTML5, CSS3 y JavaScript dando
interactividad y dinamismo a las páginas web.

V. CRITERIOS DE EVALUACIÓN:

1. Recuerda los componentes lenguaje de textos, imágenes, gráficos, animaciones, video e

hipervínculos de un sitio web, utilizando conocimientos, técnicas y herramientas propias del
desarrollo web mediante un software de diseños web.

2. Analiza todos los mecanismos y código HTML5 y CSS3, junto con las técnicas de maquetación
para la elaboración de la estructura básica de las páginas del Sitio Web a través de una
exposición.

3. Aplica código HTML5, CSS3 y JavaScript para crear interactividad y dinamismo a las páginas
web creadas en el sitio web, así como también Jquery, ajax, json y apis para mejorar la
apariencia y el manejo del contenido de las páginas del sitio web mediante un trabajo grupal.

4. Crea portales web en forma rápida y sencilla, utilizandoHTML5, CSS3 y JavaScript dando
interactividad y dinamismo a las páginas web mediante una exposición grupal.

VI. COMPETENCIAS PARA LA EMPLEABILIDAD

1. Comprender y comunicar ideas, cotidianamente, a nivel oral y escrito, asi como interactuar en
diversas situaciones en idioma inglés, en contextos sociales y laborales.

2
 INSTITUTO DE EDUCACIÓN SUPERIOR PRIVADO “TEC”
VII. ACTIVIDADES DE APRENDIZAJE

ELEMENTOS DE LA SESION DE INDICADORES LOGRADOS

SEMA HORA CONTENIDOS BÁSICOS RECURSOS
CAPACIDAD TERMINAL APRENDIZAJE EN LA CAPACIDAD
NAS
Recuerda los
componentes lenguaje de • Desarrollo web.
SESIÓN N° 01
textos, imágenes, • HTML5, CSS3, Javascript.
Desarrollo web Nombra los elementos y
gráficos, animaciones, • Recursos que utilizaremos Plataforma
requisitos funcionales de un
1 5 video e hipervínculos de . Académica
SESION N° 02 sistema web considerando los
un sitio web, utilizando • Visual Studio Code: Configuración y extensiones. Q10.
Visual Studio estándares de calidad.
conocimientos, técnicas y • HTML5: Estructura y Contenido.
Code
herramientas propias del • HTML5: ¿Qué es? ¿Cómo se usa?.
desarrollo web.
Recuerda los
• Etiquetas y estructura básica.
componentes lenguaje de
SESIÓN N°03 • Etiquetas de texto.
textos, imágenes,
Etiquetas y • Enlaces de navegación y tipos de enlaces. Enumera cada una de las
gráficos, animaciones, Plataforma
estructura etiquetas correspondiente al
2 5 video e hipervínculos de Académica
HTML para luego crear listas
un sitio web, utilizando Q10.
SESION N° 04 • Rutas en HTML explicadas a detalle. y tablas.
conocimientos, técnicas y
Listas y Tablas • Creación de Listas.
herramientas propias del
desarrollo web. • Creación de Tablas.

3
 INSTITUTO DE EDUCACIÓN SUPERIOR PRIVADO “TEC”

Recuerda los
componentes lenguaje de SESIÓN N°05
textos, imágenes, • Creación de Formularios.
Formularios
gráficos, animaciones, • Tipos de Input en un formulario.
Plataforma Selecciona formulario según
3 5 video e hipervínculos de SESION N° 06 Académica el uso que se le dará tomando
un sitio web, utilizando Validación de Q10. en cuenta la validación de
conocimientos, técnicas y • Validación de datos con HTML5.
datos y datos en html5.
herramientas propias del • Contenido Multimedia: Imágenes, audio, videos.
Multimedia
desarrollo web.

Recuerda los
componentes lenguaje de
• Etiquetas de Maquetado HTML.
textos, imágenes,
SESIÓN N°07 • Prueba de contenido HTML5.
gráficos, animaciones,
Maquetado Plataforma Enumera los pasos para
video e hipervínculos de
4 5 un sitio web, utilizando Académica realizar el maquetado en
conocimientos, técnicas y
SESION N 08 • Introducción CSS3: ¿Qué es? ¿Cómo se usa? Q10. HTML5 y también en CSS3.
herramientas propias del CSS3 - • Sintaxis básica
desarrollo web. • Selectores avanzados

Analiza todos los • Propiedades de Fonts CSS

SESIÓN N° 09
mecanismos y código • Propiedades para textos
Fonts CSS
HTML5 y CSS3, junto • Unidades de medida en CSS
Plataforma Contrasta los elementos CSS
con las técnicas de
5 5 Académica con las propiedades.
maquetación para la
Q10.
elaboración de la • Como aplicar Colores
SESION N°10
estructura básica de las • Contenedores: Box model
aplicar Colores
páginas del Sitio Web • Contenedores: Aplicamos Sombras

4
 INSTITUTO DE EDUCACIÓN SUPERIOR PRIVADO “TEC”

• Contenedores: Desbordamiento del contendio

• Contenedores: Propiedades de Background
Analiza todos los SESIÓN N° 11
• Contenedores: Nueva propiedad Background-Blend-
mecanismos y código Contenedores
Mode Describe el uso de CSS para
HTML5 y CSS3, junto
Plataforma la creación de presentación y
con las técnicas de
6 5 Académica modificación de plantillas
maquetación para la
• Taller: Aplicar estilos a Tablas Q10. CSS.
elaboración de la
• Taller: Aplicar estilos a listas para convertirlo en un
estructura básica de las SESION N° 12
menú vertical
páginas del Sitio Web Taller
• Taller: Aplicar estilos a enlace para convertirlo en un
botón
• Posicionamiento CSS
Analiza todos los SESIÓN N° 15
• Flexbox: Introducción
mecanismos y código Posicionamiento
• Flexbox: Ejes/Direcciones
HTML5 y CSS3, junto CSS
• Flexbox: Alineación de elementos Plataforma
con las técnicas de Identifica Flexbox del CSS,
5 Académica
7 maquetación para la SESIÓN N° 16 para su posterior uso.
Q10.
elaboración de la Alineación de
• Flexbox: Alineación de elementos multilinea
estructura básica de las elementos
• Flexbox: Alineación individual
páginas del Sitio Web multilinea
• Flexbox: Propiedades elementos hijo

5
 INSTITUTO DE EDUCACIÓN SUPERIOR PRIVADO “TEC”

• Taller: Creación de un menú de navegación con Flexbox

• Taller: Aplicar estilos a un formulario con Flexbox
Analiza todos los
SESIÓN N° 17 • Grid: Introducción Distingue entre la
mecanismos y código
Creación de un • Grid: Fundamentos herramientas del CSS
HTML5 y CSS3, junto
menú de Plataforma elementos necesarios para la
con las técnicas de
8 5 navegación Académica creación de menú de
maquetación para la
Q10. navegación con Flexbox,
elaboración de la
SESIÓN N° 18 • Grid: Posicionamiento formularios y trabajo con
estructura básica de las
Grid • Grid: Areas Grids en CSS3
páginas del Sitio Web
• Grid: Alineación de elementos
• Grid: Alineación en grupos de elementos
Aplica código HTML5, • Grid: Implícita y Explícita
CSS3 y JavaScript para
SESIÓN N° 17 • Grid: Fill y Fit
crear interactividad y
Grid-002 • Teoria: Creación de estructura de una página web con
dinamismo a las páginas
Grid
web creadas en el sitio Plataforma Modifica un sitio web
9 5 web, así como también Académica utilizando código Grid y
Jquery, ajax, json y apis Q10. transformaciones CSS3.
SESIÓN N° 18 • Transformaciones con CSS
para mejorar la
Transformaciones • Transiciones CSS
apariencia y el manejo
con CSS • Animaciones con CSS
del contenido de las
páginas del sitio web. • Taller: Creación de un Preloader con CSS

6
 INSTITUTO DE EDUCACIÓN SUPERIOR PRIVADO “TEC”

Aplica código HTML5,

CSS3 y JavaScript para SESIÓN N° 19
• Variables
crear interactividad y Transformaciones
• Propiedad Clip Path
dinamismo a las páginas con CSS Construye una página web
• contenido CSS3
web creadas en el sitio Plataforma utilizando CSS3 y
10 5 web, así como también Académica RESPOPNSIVE DESING
Jquery, ajax, json y apis Q10. obteniendo un sitio web
para mejorar la SESIÓN N° 20 interactivo y amigable.
• Responsive Desing: Adaptable a dispositivos moviles
apariencia y el manejo Responsive
• Introducción: ¿Qué es? ¿Cómo funciona?
del contenido de las Desing
páginas del sitio web. • Etiqueta Meta Viewport.

Aplica código HTML5, • Trabajando con Media Query

CSS3 y JavaScript para • Taller: Creación de un sitio web básico adaptable a
crear interactividad y SESIÓN N° 21 dispositivos móviles
dinamismo a las páginas Trabajando con • Prueba de contenido Responsive Desing.
web creadas en el sitio Media Query
Plataforma Utiliza código java script y
11 5 web, así como también Académica produce un sitio web
Jquery, ajax, json y apis Q10. interactivo y dinámico
para mejorar la • Java script: Interacion y dinamismo.
apariencia y el manejo SESIÓN N° 22 • Javascript ¿Qué es? ¿Cómo se utiliza?
del contenido de las Java script • Variables
páginas del sitio web. • Tipos de datos
• Arreglos
Aplica código HTML5, SESIÓN N° 23 • Métodos, Arreglos
Emplea herramientas de
CSS3 y JavaScript para Arreglos • Condicionales y ciclos o bucles. Plataforma
desarrollo y prueba de
12 5 crear interactividad y • Funciones Académica
aplicaciones web.
dinamismo a las páginas Q10.
web creadas en el sitio

7
 INSTITUTO DE EDUCACIÓN SUPERIOR PRIVADO “TEC”

web, así como también SESIÓN N° 24 • Scope de Javascript

Jquery, ajax, json y apis Scope de • Métodos para cadenas de texto
para mejorar la apariencia Javascript - • DOM: Crear elementos de forma dinámica
y el manejo del contenido Evaluación
de las páginas del sitio
web.

• DOM: Crear elemento de forma dinámica y manipular su

SESIÓN N° 25 contenido
Crea portales web en DOM • DOM: Editar elementos
forma rápida y sencilla, • DOM: Trabajar con atributos
utilizandoHTML5, CSS3 y Plataforma Genera aplicaciones web que
13 5 JavaScript dando Académica sean interactivo
interactividad y • DOM: Aplicar estilos de forma dinámica
Q10. En el front-end lado cliente..
dinamismo a las páginas SESION N° 26 • Eventos
web Modificando • Taller: Modificando elementos del DOM
elementos del • Taller: Creación de una calculadora simple con
DOM Javascript
• Taller: Aplicando validación a campos de un formulario

Crea portales web en SESIÓN N° 27

• Timers
forma rápida y sencilla, Timers
• Tiempo y fecha Escribe código utilizando
utilizandoHTML5, CSS3 y Plataforma
• Taller: Creación de un reloj con Javascript métodos javascrip y APIs
14 5 JavaScript dando Académica
como el storage.
interactividad y Q10.
.
dinamismo a las páginas SESIÓN N° 28
• Local storage y Session storage
web Storage
• Video-Prueba de contenido Javascript

8
 INSTITUTO DE EDUCACIÓN SUPERIOR PRIVADO “TEC”

• Proyecto practico: Pagina web de restaurante de

comida rapida.
• sitio web
SESIÓN N° 29 • Creación de archivos y carpetas necesarias
Proyecto practico • Estilos generales
Crea portales web en
Revisa código HTML5, CSS3,
forma rápida y sencilla,
JavaScripty demás
utilizandoHTML5, CSS3 y Plataforma
herramientas que se utilizan
15 5 JavaScript dando Académica
para crea crear interactividad
interactividad y Q10.
• Menú de navegación: Creación de estructura y dinamismo en una páginas
dinamismo a las páginas
SESION N° 30 • Menú de navegación: Adaptable a dispositivos móviles web.
web
Slider de • Menú de navegación: Interacción con el usuario
productos • Slider de productos: Creación de estructura
• Slider de productos: Aplicar estilos
• Slider de productos: Adaptable a dispositivos móviles
• Slider de productos: Funcionalidad del slider
.
SESIÓN N° 31 • Servicios: Creación de estructura
Servicios • Servicios: Aplicar estilos con Grid
Crea portales web en
• Servicios: Adaptable a dispositivos móviles Revisa código HTML5, CSS3,
forma rápida y sencilla,
• Equipo: Creación de estructura JavaScripty demás
utilizandoHTML5, CSS3 y Plataforma
herramientas que se utilizan
16 5 JavaScript dando Académica
para crea crear interactividad
interactividad y Q10.
• Equipo: Aplicar estilos y dinamismo en una páginas
dinamismo a las páginas
• Ingredientes: Creación de estructura y estilos web.
web
SESION N° 32 • Contacto: Creación de estructura
Contacto • Contacto: Aplicar estilos
• Contacto: Adaptable a dispositivos móviles

9
 INSTITUTO DE EDUCACIÓN SUPERIOR PRIVADO “TEC”

• Contacto: Validación de formulario

• Alertas: Aplicar estilos e integrarlas con el formulario de
contacto
• Footer: Creación de estructura y estilos
• Aplicando funcionalidad a botones de menú de
navegación
• Creación de estructura, estilos y funcionalidades de
botón de "Ir Arriba"
17 EVALUACION FNAL

18 EXAMEN EXTRAORDINARIO

10
 INSTITUTO DE EDUCACIÓN SUPERIOR PRIVADO “TEC”

VIII. RECURSOS DIDÁCTICOS

Durante el proceso del semestre se emplearán diversos materiales didácticos que ayudarán a que las
sesiones de aprendizaje sea lo más provechosa para el estudiante, como, por ejemplo:

Copias del tema, diapositivas del tema videos relacionados al tema, imágenes, etc.

IX. METODOLOGÍA

Metodología durante todo el proceso de las sesiones educativas se utiliza diferentes técnicas: como:

➢ discusión de casos, exposiciones para intercambiar experiencia de aprendizaje. Métodos:

Inductivo, deductivo, analítico y sintético

➢ Procedimientos: Expositiva – interactiva.

➢ Técnicas: Exposición. Diálogo. Trabajos prácticos.

➢ Recursos: Textos, Separata, Diapositivas, Trabajos Prácticos, otros.

X. EVALUACIÓN

La evaluación es integral y permanente con el fin de obtener la información y reflexión sistemática

sobre el aprendizaje del estudiante.

En la evaluación del aprendizaje se utiliza el sistema vigesimal. El calificativo mínimo aprobatorio es

de (13). En todos los casos la fracción 0.5 o más se considera como una unidad a favor del estudiante.

La nota final de la UD, es la sumatoria de las diferentes notas dentro de las capacidades terminales

El estudiante que acumule el 30% de inasistencia injustificada del total de horas programadas, será
desaprobado en forma automática sin derecho a evaluación

El peso asignado en porcentajes de las diferentes evaluaciones es:

Promedio evaluación Conceptual 40 %, Promedio evaluación Procedimental 30% y Promedio

evaluación Actitudinal.

Prom UD = PEC+PP+PA
100
Promedio .U.D = Promedio Unidad Didáctica

11
 INSTITUTO DE EDUCACIÓN SUPERIOR PRIVADO “TEC”

PC = 40 % -- Promedio evaluación Conceptual. (Evaluaciones orales,

Evaluaciones escritas y prácticas calificadas)
PP = 30% -- Promedio evaluación Procedimental. (Trabajos
encargados, exposición, resúmenes)
PA = 30 % Promedio evaluación Actitudinal.( participación,
identificación institucional, asistencia y otros )

XI. FUENTES DE INFORMACION (página Digitales)

1. Córcoles Tendero, J. E. RA-MA Editorial. Diseño de interfaces web.

2. https://elibro.net/es/lc/intec/titulos/62487
3. Orós Cabello, J. C. RA-MA Editorial. Diseño de páginas Web con XHTML, JavaScript y CSS.
4. https://elibro.net/es/lc/intec/titulos/106414
5. Trevejo Alonso, J. A. Ministerio de Educación y Formación Profesional de España. Joomla! 3.5: diseño web.
6. https://elibro.net/es/lc/intec/titulos/49445
7. Martínez Rolán, X. Editorial UOC. Diseño de páginas web: Wordpress para todos los públicos.
8. https://elibro.net/es/lc/intec/titulos/106387
9. Javier Zofío J. Macmillan Iberia, S.A. Aplicaciones web.
10. https://elibro.net/es/lc/intec/titulos/43262
11. Celaya Luna, A. Editorial ICB. Editorial ICB. Creación de páginas web: HTML 5
12. https://elibro.net/es/lc/intec/titulos/56045
13. Terán Anciano, J. Editorial CEP, S.L. Manual de Introducción al lenguaje HTML. Formación para el Empleo.
14. https://elibro.net/es/lc/intec/titulos/50964
15. Terán Anciano, J. Editorial CEP, S.L. Cuaderno del alumno: introducción al lenguaje HTML. Formación para el
empleo.
16. https://elibro.net/es/lc/intec/titulos/50804
17. Orós Cabello, J. C. RA-MA Editorial. Diseño de páginas Web con XHTML, JavaScript y CSS.
18. https://elibro.net/es/lc/intec/titulos/106414

DOCENTE JEFE DE UNIDAD ACADEMICA

SECRETARIA ACADEMICO

12