SÍLABO

I. DATOS GENERALES
1.1 Nombre de la Institución : IESTP. “Manuel Núñez Butrón” Juliaca
1.2 Programa de estudios : Desarrollo de Sistemas de Información
1.3 Módulo Técnico Profesional N° 01 : Desarrollo de Sistemas de Información y Aplicaciones Web
1.4 Unidad didáctica : Programación Web FrontEnd
1.5 Periodo lectivo : 2023-II
1.6 Periodo académico :I
1.7 Modalidad : Presencial
1.8 Créditos : 03
1.9 Número de horas : 05h (T=01/P=04)
Horas teórico-práctico : 01
Horas practicas : 04
1.10 Plan de estudios : 2021
1.11 Turno : Turno I (Noche)
1.12 Sección : Única
1.13 Fecha de inicio : 21 de agosto del 2023
1.14 Fecha de término : 22 de Diciembre del 2023
1.15 Docente : M.C. Ing Dayvis Víctor Farfán Gavancho
: Tel. 951680606

II. SUMILLA
La Unidad didáctica de Programación FrontEnd, forma parte del Primer semestre académico, y corresponde al
módulo formativo denominado Desarrollo de Sistemas de Información y Aplicaciones Web, según el modelo por
competencias que se desarrollara en la Educación Superior Tecnológica.
Programación FrontEnd es una unidad didáctica de naturaleza Teórico–Práctico, que busca brindar al
estudiante conocimientos y técnicas solidas en el uso del lenguaje HTML y CSS para construir páginas web e interfaces
de usuarios interactivas con ventajas del diseño responsivo y la arquitectura CSS.
Esta unidad está organizada alrededor de dos ejes temáticos:
Primero: Describe el uso y manejo de elementos y etiquetas HTML considerando las tecnologías web. Segundo: Elabora
una interface gráfica con hojas de estilo utilizando maquetación de un sitio web.

III. UNIDAD DE COMPETENCIA VINCULADA AL MÓDULO

UNIDAD DE COMPETENCIA

Desarrollar la construcción de programas de los sistemas de información, de acuerdo al diseño funcional,

estándares internacionales de TI, buenas prácticas de programación y políticas de seguridad de la organización.

IV. CAPACIDAD E INDICADORES DE LOGRO DE LA UNIDAD DIDACTICA

CAPACIDADES INDICADORES DE LOGRO

Desarrollar aplicaciones web cliente servidor Describe el uso y manejo de elementos y etiquetas HTML
adaptando las tecnologías web FrontEnd. considerando las tecnologías web. (1)
Elabora una interface gráfica con hojas de estilo
utilizando maquetación de un sitio web. (2)
V. COMPETENCIAS PARA LA EMPLEABILIDAD Y VALORES
COMPETENCIAS

Liderazgo Personal y Profesional: Articular recursos y potencialidades de cada integrante de su equipo

logrando un trabajo comprometido, colaborativo, creativo, ético, sensible a su contexto social y
ambiente, en pro del bien común.
Trabajo Colaborativo: Participar de forma activa en el logro de objetivos y metas comunes, integrándose con
otras personas con criterio de respeto y justicia, sin estereotipos de género u otros, en un contexto
determinado.

VALORES ACTITUDES
● Participa regular y puntualmente de las actividades no presenciales.
● Entrega sus trabajos según cronograma establecido.
Responsabilidad ● Muestra originalidad y creatividad en sus trabajos.
● Cuenta con los materiales necesarios para realizar las actividades.
● Es perseverante en la realización de las actividades asignadas.
● Organiza su tiempo para el desarrollo de actividades propuestas.
● Revisa los materiales de estudio que orientan sus aprendizajes.
Autonomía ● Complementa información de contenidos propuestos.
● Cumple con sus responsabilidades oportunamente.
● Participa con interés en el desarrollo de las actividades colaborativas de
aprendizajes.
Trabajo en equipo ● Expresa sus ideas, opiniones e inquietudes respetando las ideas de los
demás.
● Muestra iniciativa al realizar actividades de investigación para reforzar sus
aprendizajes.

VI. ORGANIZACIÓN DE LOS APRENDIZAJES

INDICADOR DE LOGROS DE CAPACIDAD
Describe el uso y manejo de elementos y etiquetas HTML considerando las tecnologías web. (1)
SEMANA CONTENIDOS LOGROS DE APRENDIZAJE HTP HP
1ª Fundamentos de la programación Front End Identifica el diseño de la interface de 2 3
• Desarrollador FrontEnd, Desarrollador UI. Usuario
• Diseño, Maquetación, Usabilidad.
2ª Fundamentos de HTML Identifica los elementos HTML para la 2 3
• Definición y Sintaxis HTML. definición de un Layout.
• Índex y estructura básica.
• Layout (header, nav, aside, section, article,
footer).
3ª Elementos de Texto y listas en HTML Emplea elementos HTML de texto y lista 2 3
• Etiquetas de Texto y agrupación. para agregar información.
• Etiquetas de línea y bloque.
• Listas ordenadas, no ordenadas, de descripción.
4ª Enlaces y contenido externo en HTML Emplea los enlaces para vincular 2 3
• Rutas de Enlaces (absolutas y relativas). contenidos externos o internos.
• Enlaces internos y externos.
• Tipos de Enlaces: Anclas, Imágenes, Descargas.
5ª Tablas en HTML Emplea Tablas para ordenar, agrupar y 2 3
• Tablas básicas. estilizar el contenido de una página web.
• Combinando columnas, filas.
• Tablas avanzadas.
 6ª Imágenes y multimedia en HTML Emplea los elementos multimedia de 2 3
• Imágenes y figuras. HTML 5.
• Video, audio, Plug-ins.
•Api’s HTML 5 – Geolocalización.
7º Diseña Formularios Web con HTML Diseña formularios Web para interacción 2 3
• Etiqueta Form (action, name). con el usuario.
• Elemento Input (texto, numérico, botón).
• Elementos Select, Group y Option.
• Controles deshabilitados y solo lectura
8º Procesa Formularios Web Emplea formularios Web para procesar la 2 3
•Definición de Variables información.
•Métodos de envió Get y Post.
• Validación con HTML5. Primer examen parcial tomando en
Primer Examen Parcial cuenta el material del primer indicador
de logro.
Planifica los recursos necesarios para el proyecto utilizando herramientas y técnicas para la gestión de
proyectos. (2)
SEMANA CONTENIDOS LOGROS DE APRENDIZAJE HTP HP
9º Diseño de la Interface de Usuario Crea un boceto de su interface para su 2 3
• Diseño Fijo, elástico, fluido, adaptativo, sitio web.
responsivo.
• Prototipado UI.
10º Fundamentos de CSS Estiliza los elementos de la página web. 2 3
• Definición, Vincular con HTML.
• Pilares del CSS.
• Selectores Básicos CSS.
11º Formateo de elementos con CSS Aplica estilos de apariencia a los 2 3
• Estilos para textos, enlaces elementos HTML.
• Estilos para listas, imágenes.
• Estilos para tablas
12º Modelo de Caja CSS Aplica estilos de dimensión a los 2 3
• Margin, Padding elementos
• Border, Box Sizing
• Display y Visibility
13º Posicionamiento CSS Aplica los estilos de posicionamiento en 2 3
• Top, bottom, left, right, z-index la pagina web.
• Fijo, Absoluto, Relativo, Pegado
14º Diseño Responsivo – Flexbox Aplica el diseño responsivo utilizando 2 3
• ViewPort y Media Queries flexbox.
• Unidades: Porcentaje, em y rem, viewport.
• Flexbox (alineación, justificación y espacio libre)
15º Diseño Responsivo – CSS Grid Aplica el diseño responsivo utilizando CSS 2 3
• Contenedor Grid: filas y columnas Grid.
• Elementos Grid posición y tamaño
• Áreas Grid, GAP.
16º Fundamentos Javascript Utiliza Javascript para realizar peticiones 2 3
• Manejo de eventos, variables, cadenas de datos a servicios web.
• Serialización de datos: XMLHttpRequest, Fetch.
17º Sustentación de Trabajos encargados. Implementa la maquetación de la 2 3
interface web del sitio web.
18º Recuperación Elabora su examen de recuperación 2 3

VII. ORIENTACIONES METODOLÓGICAS

Considera las orientaciones metodológicas según el currículo por competencias, es decir centrada en los
estudiantes.
 El desarrollo de esta unidad didáctica se realizará utilizando mecanismos presenciales y no presenciales,
promoviendo de esta manera el trabajo autónomo y responsable en la construcción de aprendizajes significativos.
Para el desarrollo de las actividades no presenciales se utilizarán herramientas y medios de comunicación
digital.
Estrategias:
a. Asincrónica. Se empleará el Entorno Virtual de Aprendizaje Institucional https://tecnomnbjuliaca.edu.pe/ para
la mensajería (publicación de recursos didácticos, presentación de actividades de los estudiantes, etc.).
b. Presencial. Los estudiantes asistirán a las aulas en los horarios programados.

VIII. RECURSOS DIDÁCTICOS

Los materiales que se emplearán en el desarrollo de la UD se consideran en relación a los canales de
comunicación siguientes:
● Medios visuales digitalizados como: Diapositivas, separatas, artículos periodísticos de revistas, fichas de
trabajo, lecturas y diapositivas.
● Medios auditivos: palabra hablada (exposición – diálogo) y móviles.
● Medios audiovisuales: video, multimedia, internet, correo electrónico y chat.
A. Del docente
Se desarrollarán las sesiones de aprendizaje en forma semipresencial. En estas se emplearán presentaciones
en diapositivas, videos u otros para desarrollar el marco teórico y las actividades prácticas. El material didáctico
se compartirá a través de la plataforma Institucional.
B. Del estudiante
Los estudiantes ingresarán mediante un usuario y contraseña que la institución les proporcionara para
participar de las sesiones virtuales y tendrán acceso a los materiales didácticos de la UD. Asimismo, según lo
descrito y de ser necesario se hará empleo de otros medios audiovisuales como correo electrónico o chat, entre
otros.

IX. EVALUACIÓN
El tipo de evaluación que se utilizará es la Formativa, considerando que la evaluación es un proceso de
valoración continua que nos permite identificar los logros de aprendizaje alcanzados en las capacidades propuestas,
con el fin de tomar decisiones sobre los reajustes a realizar en el proceso de enseñanza y aprendizaje.
La evaluación de las capacidades se hará en función a los indicadores de logro de aprendizajes descritos. La
evaluación se realiza en forma permanente a través de actividades de aplicación e investigación que realizan los
estudiantes en las sesiones presenciales y asíncronas tanto a nivel individual como grupal.
Los instrumentos empleados son: fichas de observación de coevaluación, de metacognición, listas de cotejo,
rúbricas, pruebas escritas, entre otros.
De acuerdo con las normas de evaluación se establecen los siguientes requisitos:
● El sistema de calificación es vigesimal siendo la nota mínima aprobatoria de 13 (trece). En todos los casos la
fracción 0,5 o más se considera como una unidad a favor del estudiante.
● El estudiante que acumulará inasistencias injustificadas en número igual o mayor al 30% del total de horas
desarrolladas en la UD, será desaprobado en forma automática perdiendo el derecho al proceso de
recuperación respectivo. Sin embargo, tiene derecho a justificarlas a través de un proceso administrativo.
● El logro de las capacidades propuestas, así como el logro de aprendizaje final se logra durante el desarrollo de
la UD, por ello, cuando el estudiante evidencia dificultades en el logro de alguna de ellas, el docente puede
programar actividades necesarias para recuperarlas.
● El logro final de aprendizaje de la UD se obtiene de la siguiente manera:
✔ En caso de que la UD tuviera una capacidad, el logro final de aprendizaje se obtiene promediando los
indicadores de logro correspondientes.
✔ En caso de que la UD tuviera dos o más capacidades, el logro final de aprendizaje se obtiene
promediando el logro de aprendizaje de las capacidades respectivas.
X. FUENTES DE INFORMACIÓN

BIBLIOGRAFÍA (En Biblioteca)

[1.] P.A. Gabriel (2022) Front-End: Curso Completo de Html, css e Javascript

PÁGINAS WEB
• Lenguaje HTML 5 – https://lenguajehtml.com/html/
• Lenguaje CSS – https://lenguajecss.com/css/maquetacion-y-colocacion/posicionamiento-css/
• Aula Virtual, https://tecnomnbjuliaca.edu.pe/avirtual/

Juliaca, agosto del 2023

___________________ ____________________________ ____________________

Docente Coordinador de Programa de Estudios Jefe de Unidad Académica