Este documento presenta el silabo/plan de aprendizaje para la asignatura de Tecnología Web I. Contiene información general como el nombre, código, naturaleza, créditos, entre otros. El objetivo general es implementar páginas web estáticas y/o dinámicas usando HTML, JavaScript, CSS y PHP. Se divide en dos unidades de aprendizaje: la primera sobre lenguaje HTML y la segunda sobre diseño de páginas web usando Bootstrap. Cada unidad contiene objetivos específicos, contenidos, actividades y una rúbr

1. UNIVERSIDAD CATOLICA LOS ANGELES DE CHIMBOTE
FACULTAD DE INGENIERIA
ESCUELA PROFESIONAL DE INGENIERIA DE SISTEMAS
SILABO/PLAN DE APRENDIZAJE
TECNOLOGIA WEB I
A.SILABO
1. Información general
1.1 Nombre de la asignatura : Tecnología Web I
1.2 Código de la asignatura : 091255
1.3 Código del área curricular : 5.0 Formativa
1.4 Naturaleza de la asignatura : Obligatoria – Teórico y /Practica
1.5 Nivel de estudios : Pre grado - PG
1.6 Ciclo académico : V
1.7 Créditos : 4
1.8 Horas semanales : 6 teórico - práctico
1.9 Total horas : 90
1.10 Pre requisito : 091255 - Tecnología Web I
1.11 Docente titular : Ing. Orlando Iparraguirre Villanueva.
1.12 Docente tutor : Ing. Orlando Iparraguirre Villanueva.
2. Rasgos del perfil del egresado relacionado con la asignatura
Posee una sólida formación especializada que le permiten implementar
soluciones de ingeniería de sistemas a la problemática de las organizaciones
mediante una formación que privilegia la investigación.
3. Sumilla.

2. La asignatura pertenece al área Formativa; es de naturaleza obligatoria teórico
práctico. Tiene como propósito aplicar los fundamentos de la tecnología web al
desarrollo de páginas web y portales.
4. Objetivo general
1.2.5.5. Implementar páginas web estáticas y/o dinámicas usando la tecnología
(HTML, JavaScript, CSS y PHP)
5. Objetivos específicos.
1.2.5.5.1. Gestionar formularios, tablas y mapas, usando el Lenguaje de
marcado de hipertexto (HTML).
1.2.5.5.2. Diseñar un portal web informativo, usando el FrameWork “Bootstrap-
Twitter”.
6. Contenidos específicos por unidad de aprendizaje
Unidad de
Aprendizaje
Objetivo
Especifico
Contenidos Específicos
I
Lenguaje
HTML
1.2.5.5.1
1.1 Visión global del contenido del proceso de
aprendizaje propuesto en la asignatura.
1.2 ¿Qué es HTML?, el documento HTML, formato de
textos
1.3 Enlaces web, tipos de letras, caracteres
especiales, listas, imágenes.
1.4 Formularios básicos y avanzados
1.5 Mapas y tablas
II
Diseño de
Paginas Web 1.2.5.5.2
2.1. Hojas de estilo, Scripts(java script), capas, Sonido y
video usando HTML5
2.2. Descargar archivos del framework Bootstrap twitter :
Layout, capas, diseño adaptable, tablas,
formularios, botones e iconos de Glyphicons
2.3. Framework Bootstrap twitter: Menú de navegación,
tipografías, alertas

3. 2.4. Framework Bootstrap twitter: Ventanas modales,
Carousel
7. Estrategias de Enseñanza-Aprendizaje.
La metodología de la asignatura responderá al régimen de estudios en “blended
Learning”, y utiliza el enfoque pedagógico socio cognitivo y utilizando el
aprendizaje colaborativo y sistémico.
La metodología se concretará a través de la propuesta de actividades basada en
un caso problema que conecten los contenidos con la realidad para potenciar en
los estudiantes en el desarrollo de sus capacidades y habilidades.
El desarrollo de los contenidos específicos se hará a través de actividades
previstas por el docente y en las que los estudiantes serán los protagonistas en la
construcción de sus aprendizajes, cumpliendo el docente diferentes roles:
motivador, mediador, facilitador, retador y experto.
Las actividades pueden ser teóricas o practicas en el cual los métodos,
estrategias y procedimientos deben ser activos.
El desarrollo de la asignatura considerará actividades de investigación formativa
(DEMI) y de responsabilidad social (DARES) por ser ejes transversales en el plan
de estudios de la carrera.
Recursos Pedagógicos:
Para el desarrollo de la asignatura se utiliza el aula moderna, LAD” en el caso que
se requiera el curso o software”, lecturas reflexivas de aprendizaje que conlleven a
la concreción de los objetivos curriculares.
Tutoría docente:
Se programa al término de cada unidad de aprendizaje, acorde con las
necesidades del estudiante, las cuales se tramita a través del módulo informático
respectivo del ERP University.
8. Evaluación de Aprendizaje

4. La evaluación de la asignatura es integral y holística, integrada a cada unidad de
aprendizaje. La nota promedio por unidad de aprendizaje se obtiene como sigue:
# DESCRIPCION DE LAS ACTIVIDADES %
1 Actividades de resolución de problemas de la asignatura (60%)
2 Actividades de investigación formativa (10%)
3 Actividades de responsabilidad social (10%)
4 Examen escrito (20%)
TOTAL 100%

5. B. PLAN DE APRENDIZAJE
I UNIDAD DE APRENDIZAJE
LENGUAJE HTML
Objetivos
específicos
1.2.5.5.1. Gestionar formularios, tablas y mapas, usando el Lenguaje de marcado de hipertexto (HTML).
Objetivos
operacionales
1.0. Socializa la organización del SPA resaltando la importancia en cada unidad de
aprendizaje.
Semana 01
1.1. Analiza y comprende la estructura básica de una página HTML. Semana 01
1.2. Crear una pagina HTML con los siguientes elementos: enlaces web, listas, tipos de
letras e inserción de imágenes.
Semana 02
1.3. Diseñar un formulario en HTML con los controles básicos y avanzados Semana 03
1.4. Crear una pagina HTML, con el uso de mapas y tablas en el diseño de un formulario. Semana 04
1.5. Elaborar un informe con respecto al rol de los sistemas de información en las
organizaciones de nuestra región(Responsabilidad Social)
Semana 03
1.6. Elaborar una monografía con los nuevos elementos de HTML5(Investigación
Formativa)
Semana 04
ACTIVIDADES TMPO ESTRATEGIA
SEMANA 01

6. A1.1
 Presentación general del SPA.
 En equipo de trabajo se analiza el spa, según las unidades de aprendizaje.
 Evaluación formativa a través de un cuestionario.
30
40
(20)
A1.2
El docente tutor organiza a los estudiantes en grupo de 4 integrantes por afinidad y les presenta
el caso problema para su análisis, seguidamente en grupo razonará desarrollan las siguientes
actividades:
 con ayuda del EVA los estudiantes visualizan el contenido ¿Qué es HTML, Formato de textos,
el documento HTML?, analizan la información de forma individual y desarrollan el
cuestionario.
 ¿Instale las herramientas necesarias para el desarrollo de la aplicación web? Se presento
alguna dificultad. Explíquelo
 En una pagina HTML, Muestre la estructura básica del documento.
 Diseñar una página que muestre un párrafo, a ello se debe aplicar un formato de texto,
encabezados, un estilo de texto.
 En base a las actividades anteriores propuestas, los estudiantes integran los dos ejercicios en
una sola página HTML, lo registran en el EVA por medio del enlace de la tarea.
 Investigación Formativa: Investiga los nuevos elemento que incorpora HTML5 y su
compatibilidad con los navegadores web, debe señalar la bibliografía y/o web grafía siguiendo
las normas APA o Vancouver.

7. SEMANA 02
El docente tutor organiza a los estudiantes en grupo de 4 integrantes por afinidad y les presenta
las actividades a desarrollar, actividades que ayudaran al desarrollo del portal web,
seguidamente cada grupo desarrollan las siguientes actividades:
 Los estudiantes mediante la técnica de lluvia de ideas responden la siguiente pregunta de
manera individual.
¿Cuáles son los elemento básicos que compone la estructura de una pagina HTML?
 Los estudiantes leen, analizan y comprenden en grupo y conjuntamente con el docente la
siguiente información:
a. Enlaces web,
b. Tipos de letras,
c. Caracteres especiales,
d. Listas
e. Imágenes
 Crear un pagina HTML con 5 enlaces, en donde se considere como atributo target: _self,
_blank, de la misma forma crear dos enlaces web con anclas.
 En la misma pagina HTML, crear un párrafo de texto al cual se le debe asignar un color, el
tamaño de texto y el tipo de letra.
 En la misma pagina HTML: crear ejemplos usando caracteres especiales como indica en la
guía: en el apartado “Caracteres Especiales”.
 En la misma pagina HTML: utilizando el formato listas, crear un ejemplo para cada tipo de lista:
listas ordenadas, listas desordenadas y listas de definiciones, con los países de américa del

8. Sur.
 En la misma pagina HTML: utilizando imágenes, crear enlaces a 5 páginas gubernamentales
del Perú. Dicha pagina en HTML con todos los ejemplos debe ser registrado en el EVA,
semana 02 en el enlace de la tarea.
 En el EVA, los estudiantes y el docente interactúan en el foro “La nuevas etiquetas del HTML5”
SEMANA 03
Los estudiantes mediante la técnica de lluvia de ideas responden la siguiente pregunta de manera
individual.
¿Cuáles son lo tipos de listas? ¿Cuales son los tipos de target? ¿Es posible realizar enlaces por
medio de imágenes, sustente?
 Los estudiantes leen, analizan y comprenden en grupo y conjuntamente con el docente la
siguiente información: formularios básicos y avanzados
 Crear un pagina HTML, en donde se diseñara un formulario utilizando: campos de texto,
checkbox, radio buttons, select, campos ocultos, textareas, botones, filea, fieldset, legend,
labels, entre otros controles avanzados.
 Diseñar un formulario para el registro de un cliente, debe contener los siguientes atributos:
Apellidos y nombres, dirección, teléfono, correo electrónico, permita subir una fotografía, fecha
de nacimiento, genero, permita listas la profesiones del cliente, permita seleccionar mas un
tema de interés(checkbox), y finalmente un botón tipo button que permita enviar los datos.
Compilar dicho formulario e enviar a través del eva, semana 03 en el enlace de la tarea.

9.  A través del EVA, presentan la actividad de responsabilidad social: ¿Cual es el rol de los
sistemas de información en las organizaciones de nuestra región?
SEMANA 04
Los estudiantes mediante la técnica de lluvia de ideas responden la siguiente pregunta de manera
individual.
¿Cuáles son los controles básicos de un formulario?
 Los estudiantes leen, analizan y comprenden en grupo y conjuntamente con el docente la
siguiente información: uso de mapas y tablas en el diseño de formularios.
 Crea una pagina HTML, en ello crear dos mapas con imágenes.
 En la misma pagina HTML: crear dos tablas, en una de ella debe tener 10 filas y 5 columnas, la
segunda fila debe utilizar propiedad colspan=4, asimismo debe aplicar otras propiedades como:
border, bordercolor, cellspacing, cellpadding, valign, align y finalmente asignarle un color de
fondo a la tabla.
La siguiente tabla debe tener las mismas propiedades que la anterior, pero a esta tabla se
añadirá la propiedad ROWSPAN 8 a la primera columna del final hacia a tras.
A través del eva enviar la página en la semana 04 en el enlace de la tarea
 Los estudiantes a través del EVA presentan la monografía de investigación formativa.
 Evaluación: Los estudiantes desarrollan el examen de la I Unidad

10. RUBRICA DE LA I UNIDAD
ASPECTOS EXCELENTE (4PTS) REGULAR (3PTS) DEFICIENTE (2PTS)
Análisis,
síntesis y
evaluación
Analiza identificando la importancia de los temas o
resultados a obtener en cada unidad de su SPA y
participa en el equipo identificando, comparando de
manera precisa, y clara reconociendo la estructura,
formularios, tablas, mapas de una página HTML.
Participa en el equipo identificando la
estructura de una página html.
Participa en el equipo sin
comprender la estructura y
elementos de una Pagina
HTML.
Aplicación
Implementa a través de un ejercicio práctico una página
en html, infiriendo e interpretando los elementos que
componen la estructura de una página web.
Implementa a través de un ejercicio
una página básica en html
No culmino con el
desarrollo del ejercicio
Comunicación
Colaboran y valoran los aportes de sus compañeros de
manera respetuosa y solidaria cumpliendo con lo
solicitado en la fecha estipulada
Cooperan y valoran los aportes de sus
compañeros entregando lo solicitado
en fechas no estipuladas.
No entrega el producto
solicitado
Responsabilid
ad social
Elabora el informe con respecto al rol de los sistemas de
información en las organizaciones de nuestra región,
indicando la bibliografía y/o web grafía con las normas
APA o Vancouver.
El informe no muestra no precisa el rol
que juegas las tecnologías de
información en las organizaciones.
El tema no está
relacionado con lo
solicitado en la actividad
investigación
formativa
La monografía muestra con claridad los elementos del
HTML, indicando la bibliografía y/o web grafía con las
normas APA o Vancouver.
No se identifican con claridad las
nuevos elementos del HTML5 , pero
indican la bibliografía y/o web grafía
con las normas APA o Vancouver
No presenta la actividad
de investigación formativa.
Creatividad y
Pensamiento
Crítico
Usa los conocimientos y el equipo tecnológico
disponible de manera constructiva para desarrollar los
ejercicios propuestos. Así mismo aporta para la mejora
de los ejercicios.
Usa los conocimientos y el equipo
para desarrollar los ejercicios
propuestos.
No desarrolla la página
web propuesta

11. Puntaje 20 16 8
II UNIDAD DE APRENDIZAJE
DISEÑO DE PAGINAS WEB
Objetivos
específicos
1.2.5.5.2. Diseñar un portal web informativo, usando el FrameWork “Bootstrap - Twitter”.
Objetivos
operacionales
1. Crear hojas de estilo, mensajes de advertencia, confirmación, ventanas pop-up, modales,
videos y audio, haciendo uso de html5
Semana 05
2. Diseñar un portal web, utilizando el Framweork Bootstrap twitter
Semana 08 al
12
3. Elaborar una monografía con respecto al impacto de las tecnologías de información en el
sector empresarial(Responsabilidad Social)
Semana 05
4. Elaborar una monografía con respecto a los gestores de contenidos: Drupal y
wordpress(Investigación Formativa)
Semana 07
ACTIVIDADES TMPO ESTRATEGIA
SESION 05
A1.2 El docente tutor en grupo organiza en grupo de 4 integrantes por afinidad para el desarrollo de los
siguientes ejercicios.
1. Con ayuda del aula virtual en el EVA los estudiantes visualizan el contenido: Hojas de estilo,
clases, estilos css, javascript, capas, HTML5.

12. 2. Instale las herramientas necesarias para el desarrollo del portal web: php y apache. ¿Se
presento alguna dificultad. Explíquelo?
3. Configure el entorno de trabajo: servidor web y lenguaje de programación. Se presento
alguna dificultad. Explíquelo.
4. Crea una pagina HTML, en ello crear un párrafo de 200 palabras y a ello aplicarlo un estilo,
asignarle un color rojo al texto.
5. Usando clases, al párrafo anterior, asignarle un color verde, margen de 10 pixeles, todo el
párrafo debe estar dentro de una capa(<Div>), asimismo en la clase(css) se debe considerar
las la siguientes propiedades.
6. Crear una página HTML, en ello visualizar por pantalla un mensaje de bienvenida.
7. En la misma página HTML, crear un botón para volver hacia atrás
8. En la misma página HTML, recoger un dato por teclado y visualizarlo.
9. En la misma página HTML, pedir confirmación para visitar una página
10. En la misma página HTML, abrir una ventana pop-up cada cierto tiempo.
11. En la misma página HTML, visualizar un reloj digital en la página web.
12. En la misma página HTML, crear una galería de imágenes.
13. En la misma página HTML, deshabilitar el botón derecho del mouse
14. Imprimir una pagina web
15. En la misma página HTML, mostrar mensajes en movimiento en la barra de estado del
navegador
16. En la misma página HTML, crear un correo electrónico.
17. Crear un pagina HTML, en ello insertar un video utilizando las etiquetas de HTML 5.

13. 18. En la misma pagina HTML, insertar un audio utilizando las etiquetas de HTML 5
19. En la misma pagina HTML, en ello diseñar un formulario utilizando las nuevas propiedades que
trae el HTML 5
20. La actividad será enviada a través del EVA en el enlace de la tarea
21. Investigación Formativa: elaborar una monografía con respecto a los gestores de contenidos:
Drupal y wordPress, debe señalar la bibliografía y/o web grafía siguiendo las normas APA o
Vancouver.
22. En el EVA, los estudiantes y el docente interactúan en el foro “Objetos avanzados en HTML 5”
SESION 06:
El docente tutor organiza a los estudiantes en grupo de 4 integrantes por afinidad para dar
inicio con el desarrollo del portal web.
 Con ayuda del aula virtual en el EVA los estudiantes visualizan el contenido:”Bootstrap de
Twitter ”, y analizan las características principales del Framework BootsTrap de Twitter
 Descargar el framework Bootstrap de twitter: http://www.anidocs.es/bootstrap/docs/index.php.
 Crear la siguiente estructura de proyecto en el netbeans:
 Css
 Js
 Img
 Index.php
. Clases
 Descomprimir el archivo descargado y copiar cada uno de los archivos que se encuentra en las
carpetas al proyecto.

14.  Analizar los siguientes archivos: css/ bootstrap.css, js/ bootstrap.js, js/ bootstrap-alert.js, js/
bootstrap-button, js/ bootstrap-carousel.js, js/ bootstrap-modal.js, js/ bootstrap-tab.js, js/jquery-
1.7.2.js
 Con ayuda del aula virtual en el EVA los estudiantes visualizan el contenido:”Layout,capas
y diseño adaptable “
 Elegir la plantilla más adecuada del BootsTrap:
http://www.anidocs.es/bootstrap/docs/examples/fluid.php, para la cual debe hacer clic
derecho y copiar el código fuente y pegarlo en el archivo index.php de nuestro proyecto.
 Importar en la cabecera del archivo index.php el bootstrap que se encuentra en e la carpeta
css/ bootstrap.css, realizar el mismo proceso para los archivos javascript que se encuentra
en la carpeta js.
 Personalizar el diseño de la plantilla adaptándolo a los requerimientos del proyecto.
SEMANA 07
Con ayuda del aula virtual en el EVA los estudiantes visualizan el contenido:” tablas, formularios,
botones e iconos de Glyphicons “
 Analizar las propiedades y opciones de las tablas prediseñadas con el bootstrap y elegir el
diseño que mejor les parezca a utilizar. Insertar la tabla elegida en la parte inferior del
carousel del proyecto.
 Crear un formulario para registrar un nuevo usuario, usando los controles de HTML5.

15.  Con ayuda del aula virtual en el EVA los estudiantes visualizan el contenido:” Menús de
Navegación y tipografías “.
 Personal alizar el diseño del menú de navegación de la parte izquierda del portal, cargar
contenido para cada una las opciones.
 En los contenidos de las opciones del menú, insertar imágenes, audio y videos, para la
inserción de videos e imágenes utilizar la tipografías del bootstrap
 Los estudiantes a través del EVA presentan la monografía de investigación formativa.
SEMANA 08
 Con ayuda del aula virtual en el EVA los estudiantes visualizan el contenido:” Corousel y
ventanas modales “.
 Crear un carousel de imágenes para el portal del proyecto.
 Crear un ventana modal para el inicio de sesión de usuario
 Los estudiante a través del eva enviar el proyecto del portal web, en el enlace de la tarea.
 Evaluación: Los estudiantes desarrollan el examen de la I Unidad

16. RUBRICA DE LA II UNIDAD
ASPECTOS EXCELENTE (4PTS) REGULAR (3PTS) DEFICIENTE (2PTS)
Análisis,
síntesis y
evaluación
En equipo identifican, analizan las características del
framework del Bootstrap-twitter para el desarrollo del
portal web.
Participa en el equipo identificando la
las características del Bootstrap de
Twitter
Participa en el equipo sin
comprender la estructura
del bootstrap
Aplicación
Implementa un portal web usando el bootstrap de twitter,
infiriendo e interpretando los elementos que componen
dicho FrameWork
Implementa un portal web usando el
frameWork-Bootstrap de twitter
No culmino con el
desarrollo del portal
Comunicación
Colaboran y valoran los aportes de sus compañeros de
manera respetuosa y solidaria cumpliendo con lo
solicitado en la fecha estipulada
Cooperan y valoran los aportes de sus
compañeros entregando lo solicitado
en fechas no estipuladas.
No entrega el producto
solicitado
Responsabilid
ad social
Elabora una monografía con respecto al impacto de la
Tecnologías de Información en el sector Empresarial,
indicando la bibliografía y/o web grafía con las normas
APA o Vancouver.
La monografía no muestra, no precisa
el impacto de las Tecnologías de
Información en el sector Empresarial
El tema no está
relacionado con lo
solicitado en la actividad
investigación
formativa
La monografía muestra con claridad los Gestores de
Contenidos, indicando la bibliografía y/o web grafía con
las normas APA o Vancouver.
No se guarda coherencia los
contenidos con el tema solicitado ,
pero indican la bibliografía y/o web
grafía con las normas APA o
Vancouver
No presenta la actividad
de investigación formativa.
Creatividad y
Pensamiento
Crítico
Usa los conocimientos y el equipo tecnológico
disponible de manera constructiva para desarrollar el
portal web usando el Bootstrap de Twitter. Así mismo
aporta para a la mejora del portal web
Usa los conocimientos y el equipo
para desarrollar del portal web.
No desarrolla el portal web
solicitado
Puntaje 20 16 8

17. 4. Referencias Bibliográficas
 Pérez C. Mysql para Windows y Linux Editorial RA-MA
 Pérez C. Macromedia Dreamweaver Mx. Desarrollo de aplicaciones y base de
datos en la web. Editorial RA-MA
 http://www.anidocs.es/bootstrap/docs/index.php
 http://es.html.net/
 http://creatuweb.espaciolatino.com/tutorhtml/tema11.html
 http://recursostic.educacion.es/observatorio/web/ca/software/programacion/490-
lorena-arranz
 http://theproc.es/files/5321
 http://www.genbetadev.com/frameworks/bootstrap