Sílabo del Curso

Arquitectura de Entornos Web

I.INFORMACIÓN GENERAL
DESARROLLO DE SISTEMAS DE INFORMACIÓN Y
Programa de Estudios
ADMINISTRACIÓN DE REDES Y COMUNICACIONES

Periodo Académico I

Módulo I

Pre-requisito Ninguno

Créditos 3

Horas por semana 8/Horas

 INSTITUTO SUPERIOR PRIVADO PERUANO DE SISTEMAS “SISE”

II.SUMILLA La Unidad didáctica de Arquitectura de Entornos Web, perteneciente a la

escuela de tecnologías de la información al nivel formativo Profesional técnico su
propósito está orientado al que el estudiante domine las etapas de un proyecto web,
diseño de los elementos gráficos para un proyecto web. Elabora etiquetas CSS3 y
HTML5 implementando páginas web, multimedia, desarrollando formularios en una
página web con elementos input, button y textArea
Unidad I: Introducción a la elaboración de proyectos Web, wireframes de alta y baja fidelidad
con elementos gráficos para estos proyectos.
Unidad II: Diseño de páginas web aplicando etiquetas HTML5 y estilos CSS3 y estructuras de
bloques.
Unidad III: Desarrollo de aplicaciones web aplicando Multimedia, Transiciones, Animaciones
y generación de Formularios.

III.COMPETENCIA POR DESARROLLAR

- Desarrollar la construcción de programas de los sistemas de información, de acuerdo
con el diseño funcional, estándares internacionales de TI, buenas prácticas de
programación y políticas de seguridad de la organización.
Permite al estudiante analizar la arquitectura web con el uso de las herramientas
utilizadas en este mercado competitivo que vivimos, para ello se utilizará en la primera
parte el de la arquitectura de los servidores web y sus elementos de todo grafico web y
para la segunda se implementará páginas web trabajando con CSS3 Y HTML5,
finalizando con el desarrollo de formularios básicos de toda página de un proyecto web.

IV.LOGRO DE APRENDIZAJE GENERAL (Resultados que pueden denominarse:

logros, productos, desempeños)
Al finalizar la unidad didáctica, el estudiante desarrollará las capacidades técnicas
requeridas para crear aplicaciones utilizando las diversas técnicas en el desarrollo
de casos comerciales respetando las buenas prácticas de diseño web esto permitirá
tener el conocimiento teórico y práctico que se requieren para un trabajo en
empresa.
 V. PROGRAMACIÓN Y ORGANIZACIÓN DE CONTENIDOS

UNIDAD DE APRENDIZAJE I : Introducción a la elaboración de proyectos Web, wireframes de alta y baja fidelidad con elementos gráficos para estos proyectos

• CAPACIDAD I: Diseña una aplicación web básica y dinámica.

LOGRO UNIDAD I: Al finalizar la unidad el estudiante, emplea los tópicos base que permiten la elaboración de un proyecto web, protocolos de
de internet TCP/IP, los controles del servidor y los controles HTML y aplicaciones web con técnicas para la implementación de los Wireframes.

CONTENIDOS CONTENIDOS CONTENIDOS ACTIVIDAD DE

SEMANA RECURSOS EVIDENCIA
CONCEPTUALES PROCEDIMENTALES ACTITUDINALES APRENDIZAJE
1. -Foro 1: Importancia de -PPT, lecturas, videos: .
Fundamentos de • Reconoce las tecnologías las páginas web en las https://youtu.be/9Y4R Participación en
que empresas? 3AFJ_go?si=AlcQxFM el Foro en
programación Web hacen posible la cFjBRnkYv Canvas
construcción de
aplicaciones web.
• Introducción. • Desarrolla casos usando
• Internet, importancia y normas que utilizan
equipos y dispositivos de Aplica de manera
características. informática en los tipos de
• Protocolos protocolos de internet responsable los protocoles
• Reconoce servidores web de internet
• Páginas Web estáticos y más utilizados en el TCP/IP,controles del
dinámicos mundo como Apache, servidor y HTML
Microsoft IIS, Nginx,
• Servidores Web Litespeed.
• Hipertexto.
• Identifica los diferentes
• Hosting funcionamiento y tipos servicios de un Hosting
de hosting. antes de contratar.

• Dominio de Internet • Reconoce la diferencia

entre un hosting y dominio
2. HTML • Reconoce las tecnologías - Actividad Individual - PPT, lecturas, -Cuadro
de navegadores de Internet. Indaga en grupos de videos: Comparativo
• Implementa un proyecto trabajo los tipos de https://www.youtube.c de la estructura
• Navegadores de Internet y web con controles comunes Servidores Web y los om/watch?v=XqFR2lq de un proyecto
herramientas de desarrollo de diseño y publicación. registra en un BYPs Web.
• Utiliza el término
Internet Explorer, Chrome, organizador
arquitectura web, para
Mozilla, Safari etc. definir una tarea que
requiere conocimientos
• Etapas de un proyecto Web, técnicos de construcción,
estrategias, arquitectura, diseño, funcionales y de diseño
para sitios o páginas web.
construcción y publicación
• Conoce la estructura de
• Arquitectura de un Proyecto. enlaces de páginas web
para una nueva navegación
• Mapa de sitio Web.
dentro de un sitio web.
• Importancia, características - Actividad Individual
• Ventajas y técnicas de • Aplica técnicas de Investigar las técnicas
construcción de páginas existentes
construcción web.
web. Wireframes - PPT, lecturas, Sustenta de
videos: forma oral y
https://www.youtube.c argumentativa el
3. om/watch?v=tOCGcU Informe de
Elementos Gráficos para la • Define Wireframes UsEF0 Proyecto Web
Web visualizando el diseño al
cliente con boceto básico en
• Wireframes. paralelo con el
Evaluación aplicativa 1
desarrollador. Informe de Proyecto Web
• Beneficios de crear Wireframes.
• Evalúa los beneficios del
• Creación de Wireframes simple o Wireframes. Instrumento: Ficha para
calidad básica. • Aplica las técnicas para la evaluar proyectos.
creación de Wireframes.
 UNIDAD DE APRENDIZAJE II: Diseño de páginas web aplicando etiquetas HTML5 y estilos CSS3 y estructuras de bloques.
CAPACIDAD II: Construye su página web Avanzada
LOGRO UNIDAD II: Utiliza editores avanzado para el diseño de páginas web.
Maneja los diferentes métodos de estilos de líneas.
Utiliza los elementos de un documento y etiquetas HTML5.
SEMANA
CONTENIDOS CONTENIDOS CONTENIDOS ACTIVIDADES DE
RECURSOS EVIDENCIA
CONCEPTUALES PROCEDIMENTALES ACTITUDINALES APRENDIZAJE
4 • Estructura Básica HTML • Reconoce la estructura Asume con ética la creación y - Foro 2: Cuales son los P- PPT, lecturas, videos: -Informe del Foro
• Conceptos básica de HTML y su diseño de páginas web, tipos de estilos de líneas https://www.youtube.com/ en Canvas
• Características de HTML característica. imágenes y posicionamiento. más usados watch?v=xF8xe9WuwPQ
• Estructura de una página • Construye con el Editor su
• página web avanzada.
• Elementos de una página • Elabora la cabecera y el
HTML (doctype, html, head, cuerpo de una estructura
Body). web.
• Etiquetas básicas (headings, • Implementa los elementos
párrafo, salto dé línea, trazo, de un documento HTML5.
comentario, marcado, • Aplica las etiquetas en un
enlace). documento HTML.
• Estilos de Lines: Inline, • Desarrolla diferentes
Internal, External. métodos de estilo de
• Color de Fondo y Texto líneas.
Fuente Define formatos de un
texto determinado.

- Actividad Individual PPT, lecturas, videos:

- Cuadro
• Representa imágenes Comparativo de
Etiquetas de Imágenes para mostrar fondos de Investigar el uso de https://www.youtube.com/
• Imágenes página. Anclajes y Enlaces watch?v=qxXzmcSAV38 las etiquetas de
5 • Atributos Src y Alt. imágenes
• Representa la url y texto
• Atributos Width y Height.
de los atributos src y alt en
• Atributo Borde.
una imagen.
• Etiquetas Figuras. Evaluación Examen
• Define la anchura y altura - Lista de cotejo
• Uso de Anclajes y Enlaces Parcial
en la muestra de la
Ancla
imagen.
• Técnica: Proyecto Web de evaluación
Instrumento: Lista de
• Reconoce las etiquetas Cotejo.
figure introducidas en
HTML5.
 • Implementa hiperenlace,
vinculo o hipervínculo y
sus diferentes tipos de
anclaje HTML.
• Crea enlaces anclas.

6 Modelo de cajas y • Reconocen el PPT, lecturas, videos:

posicionamiento CSS Comportamiento https://www.youtube.com/wat
• Modelo de cajas. del estilo CSS o cajas. - Actividad Grupal ch?v=PTy1qyD-Fs0
• Posicionamiento de cajas • Desarrolla los cinco Desarrollar 3 modelos de
(estático, relativo, absoluto, modelos diferentes para cajas CSS
flotante). posicionar cajas.
• Visualización: • Implementa las
Display. propiedades de los
Visibility. elementos de la página en
Overflow(visible,hidden, una solución display,
scroll, auto). visibility.
• Z- index. • Reconocen la división
• Etiquetas de bloques estructural de páginas web
estructurales: header, nav, en partes lógicas del
aside, section, article, footer. contenido a desarrollar
• Elementos estructurales. como header, nav, aside,
• Etiquetas flexibles:box-sizing article, footer, section.
, • Permiten cambiar las
Loyout , grid. propiedades de las
• Creación de menú. etiquetas flexibles.
Lista y navegación • Uso de listas en la
creación de menús
navegables
 UNIDAD DE APRENDIZAJE III : Desarrollo de aplicaciones web aplicando Multimedia, Transiciones, Animaciones y generación de Formularios.
CAPACIDAD III: .Conoce las aplicaciones con multimedia, transiciones, animaciones
LOGRO UNIDAD III: Al finalizar la unidad didáctica el estudiante implementa archivos de audio en la web mediante propiedades y atributos utilizando etiquetas de Audio,
Video y Iframe, la página HTML en la página actual con Iframe. navegadores de Transición
RECURSOS EVIDENCIA
SEMANA CONTENIDOS CONTENIDOS CONTENIDOS ACTIVIDADES DE
CONCEPTUALES PROCEDIMENTALES ACTITUDINALES APRENDIZAJE

7 - Foro 3: Como PPT, lecturas, videos: - Participación

Audio, video e iframe • Expone las características incorporamos paginas https://www.youtube.co en Foro en
específicas de audios y HTML en páginas m/watch?v=8p7n5_u5S Canvas.
• Audios y videos en la videos en la web. actuales? 20
Web.
• Etiquetas de audio • Añade archivos de audio
propiedades y atributos. en la web mediante
• Etiqueta de video propiedades y atributos. Uso correctamente de
HTML5 propiedades y • Utiliza etiquetas de video Herramientas y Funciones
atributos. para insertar un
• Etiqueta Iframe. reproductor en la página
HTML.
Como insertar video de
YouTube en HTML • Aprende a incorporar una
página HTML en la página
actual con la etiqueta
iframe.
• Reconoce los códigos de
inserción de un video
YouTube en HTML.

• Aprende a incorporar una - Trabajo Individual

página HTML en la página Desarrolla animaciones PPT, lecturas, videos: -Informe en
actual con la etiqueta
8 de Ventas y los registra https://www.youtube.co Canvas
iframe.
en un informe m/watch?v=r7VBscwvB
3E
Animaciones, transiciones y • Evaluación Aplicativa - Rubrica de
• Reconoce las propiedades II. Técnica: Desarrolla evaluación
transformaciones
de la transición aplicación web.
• Transiciones (Firefox, • Implementa transiciones
 Chrome, Safari y de ejemplo Instrumento: Lista de
Opera). • Reconoce las propiedades .
de la animación cotejo (matriz de
• Propiedades (property, • Implementa animaciones valoración).
duration, timing- de ejemplo.
function). • Utiliza propiedades de
• Animaciones, CCS3 en las
propiedades. transformaciones web.
• Transformaciones. • Aprende a incorporar las
• Funciones: funciones de PPT, lecturas, videos:
Rotate transformaciones sobre https://www.youtube.co
Translate elementos de un diseño. m/watch?v=rNMMzf5n
Scale K8E
Múltiples
transformaciones

- Trabajo Grupal:
9 Formularios Básicos • Reconoce los elementos Trabajar con
clásicos de los formularios. aplicaciones Web con
• Elementos clásicos de atributos Action y
• Aprende a utilizar los
un formulario: for, input.
botones y cuadros de texto Method
• Elementos de entrada
(Button y Textarea).
Button y Texttarea del
• Implementa los nuevos
formulario.
atributos de etiqueta input:
• Nuevos Atributos para la
email, url, date, time,
Etiqueta INPUT.
search, color, etc.
• Atributos del
• Desarrolla aplicaciones
Formulario: action y
web con los atributos
method.
action (url) y method
• Vistosidad de las (forma de envío).
Entradas: Placeholder,
• Reconoce la guía visual de
Autofocus.
entrada de un formulario y
• Validación de las automatización de una
Entradas: Required, carga de página
Pattern. placeholder y autofocus.
• Aprende a validar entradas
de formularios con los
atributos más conocidos
required y pattern

10 semana: Evaluación final: Presentación del Producto

VI. ESTRATEGIAS METODOLÓGICAS
Las estrategias metodológicas contenidas en el modelo educativo pueden servir
de guía al docente en el proceso enseñanza y aprendizaje:
1. Aprendizaje basado en Problemas (ABP),
2. El Método de Proyectos,
3. Método de casos.
4. Autoaprendizaje,
5. Flipped Learning (Aula Invertida)
El docente puede utilizar otras metodologías que le permitan al estudiante:
− Participación, dinámica de discusión, desarrollo del análisis crítico reflexivo y la
formulación de propuestas innovadoras.
− Indagación y construcción de fuentes de información.
− Análisis crítico de las lecturas.
− Producción individual y/o trabajos de investigación grupal.
− Exposición individual y grupal.
VII. EVALUACIÓN
El instituto superior SISE presenta un modelo educativo que busca medir el
desarrollo de las competencias, por lo tanto, consideramos que la evaluación es
una actividad sistemática y continua, centrada en el aprendizaje del estudiante,
que lo retroalimenta oportunamente con respecto a sus progresos durante todo el
proceso de enseñanza - aprendizaje y que le permita obtener la nota mínima de
trece.
• Lista de Cotejo sugerido para las evaluaciones aplicativas incluyendo las
competencias actitudinales.
• Productos – Rúbricas (incluye nota actitudinal).
El Promedio Final de la asignatura se calcula de la siguiente forma:

Enfoque de la unidad didáctica

Evaluaciones
Práctico Teórico- Práctico
Evaluación aplicativa 1 15% 20%
Evaluación Parcial 25% 25%
Evaluación aplicativa 2 20% 20%
Evaluación final 40% 35%
TOTAL 100% 100%
VIII. REFERENCIAS

8.1 Referencias Bibliográficas

• CEBALLOS SIERRA, Francisco Javier (2019). Microsoft C # Curso de
programación. 2da Edición. Editorial RA-MA
• Xavier Ganzabal Garcia, (2019). Desarrollo Web en entorno Servidor. Editorial
Síntesis
• OLIVIER PHP 8 (octubre- 2021) Desarrollar un sitio web dinámico e interactivo (3ª
ed.). Autor: Olivier Heurtel - En la web www.editions-eni.com
• HEUERTEL OLIVER (2020) PHP Y MYSQL Domine el Desarrollo de un sitio Web
Dinámico e Interactivo – Editorial Eni.

8.2 Biblioteca SISE

• Conesta, J. (2010), Introducción a .Net.
http://site.ebrary.com/lib/bibliotecasisesp/detail.action?docID=10608893&p00=c%23
• Ceballos Sierra, F. (2007), Microsoft C#.
http://site.ebrary.com/lib/bibliotecasisesp/detail.action?docID=11046613&p00=c%23
• Otey, M. (2010), Innovaciones en Microsoft SQL server 2008.
http://site.ebrary.com/lib/bibliotecasisesp/detail.action?docID=10514981&p00=ado+n
et
• Shildt, H. (2010), Fundamentos de C# 3.0:
http://site.ebrary.com/lib/bibliotecasisesp/detail.action?docID=10515217&p00=c%23