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. Informacin general

1.1 Nombre de la asignatura : Tecnologa Web I

1.2 Cdigo de la asignatura : 091255

1.3 Cdigo del rea curricular : 5.0 Formativa

1.4 Naturaleza de la asignatura : Obligatoria Terico y /Practica

1.5 Nivel de estudios : Pre grado - PG

1.6 Ciclo acadmico : V

1.7 Crditos : 4

1.8 Horas semanales : 6 terico - prctico

1.9 Total horas : 90

1.10 Pre requisito : 091255 - Tecnologa 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 slida formacin especializada que le permiten implementar

soluciones de ingeniera de sistemas a la problemtica de las organizaciones

mediante una formacin que privilegia la investigacin.

3. Sumilla.

La asignatura pertenece al rea Formativa; es de naturaleza obligatoria terico

prctico. Tiene como propsito aplicar los fundamentos de la tecnologa web al

desarrollo de pginas web y portales.

4. Objetivo general

1.2.5.5. Implementar pginas web estticas y/o dinmicas usando la tecnologa

(HTML, JavaScript, CSS y PHP)

5. Objetivos especficos.

1.2.5.5.1. Gestionar formularios, tablas y mapas, usando el Lenguaje de

marcado de hipertexto (HTML).

1.2.5.5.2. Disear un portal web informativo, usando el FrameWork Bootstrap-

Twitter.

6. Contenidos especficos por unidad de aprendizaje

Unidad de Aprendizaje

Objetivo Especifico

Contenidos Especficos

I Lenguaje

HTML

1.2.5.5.1

1.1 Visin 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, imgenes.

1.4 Formularios bsicos y avanzados

1.5 Mapas y tablas

II

Diseo 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, diseo adaptable, tablas,

formularios, botones e iconos de Glyphicons

2.3. Framework Bootstrap twitter: Men de navegacin,

tipografas, alertas

2.4. Framework Bootstrap twitter: Ventanas modales,

Carousel

7. Estrategias de Enseanza-Aprendizaje.

La metodologa de la asignatura responder al rgimen de estudios en blended

Learning, y utiliza el enfoque pedaggico socio cognitivo y utilizando el

aprendizaje colaborativo y sistmico.

La metodologa se concretar a travs 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 especficos se har a travs de actividades

previstas por el docente y en las que los estudiantes sern los protagonistas en la

construccin de sus aprendizajes, cumpliendo el docente diferentes roles:

motivador, mediador, facilitador, retador y experto.

Las actividades pueden ser tericas o practicas en el cual los mtodos,

estrategias y procedimientos deben ser activos.

El desarrollo de la asignatura considerar actividades de investigacin formativa

(DEMI) y de responsabilidad social (DARES) por ser ejes transversales en el plan

de estudios de la carrera.

Recursos Pedaggicos:

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 concrecin de los objetivos curriculares.

Tutora docente:

Se programa al trmino de cada unidad de aprendizaje, acorde con las

necesidades del estudiante, las cuales se tramita a travs del mdulo informtico

respectivo del ERP University.

8. Evaluacin de Aprendizaje

La evaluacin de la asignatura es integral y holstica, integrada a cada unidad de

aprendizaje. La nota promedio por unidad de aprendizaje se obtiene como sigue:

# DESCRIPCION DE LAS ACTIVIDADES %

1 Actividades de resolucin de problemas de la asignatura (60%)

2 Actividades de investigacin formativa (10%)

3 Actividades de responsabilidad social (10%)

4 Examen escrito (20%)

TOTAL 100%

B. PLAN DE APRENDIZAJE

I UNIDAD DE APRENDIZAJE

LENGUAJE HTML

Objetivos

especficos 1.2.5.5.1. Gestionar formularios, tablas y mapas, usando el Lenguaje de marcado de hipertexto (HTML).

Objetivos

operacionales

1.0. Socializa la organizacin del SPA resaltando la importancia en cada unidad de

aprendizaje. Semana 01

1.1. Analiza y comprende la estructura bsica de una pgina HTML. Semana 01

1.2. Crear una pagina HTML con los siguientes elementos: enlaces web, listas, tipos de

letras e insercin de imgenes. Semana 02

1.3. Disear un formulario en HTML con los controles bsicos y avanzados Semana 03

1.4. Crear una pagina HTML, con el uso de mapas y tablas en el diseo de un formulario. Semana 04

1.5. Elaborar un informe con respecto al rol de los sistemas de informacin en las

organizaciones de nuestra regin(Responsabilidad Social) Semana 03

1.6. Elaborar una monografa con los nuevos elementos de HTML5(Investigacin

Formativa) Semana 04

ACTIVIDADES TMPO ESTRATEGIA

SEMANA 01

A1.1 Presentacin general del SPA.

En equipo de trabajo se analiza el spa, segn las unidades de aprendizaje.

Evaluacin formativa a travs 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 anlisis, 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 informacin de forma individual y desarrollan el

cuestionario.

Instale las herramientas necesarias para el desarrollo de la aplicacin web? Se presento

alguna dificultad. Explquelo

En una pagina HTML, Muestre la estructura bsica del documento.

Disear una pgina que muestre un prrafo, 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 pgina HTML, lo registran en el EVA por medio del enlace de la tarea.

Investigacin Formativa: Investiga los nuevos elemento que incorpora HTML5 y su

compatibilidad con los navegadores web, debe sealar la bibliografa y/o web grafa siguiendo

las normas APA o Vancouver.

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 tcnica de lluvia de ideas responden la siguiente pregunta de

manera individual.

Cules son los elemento bsicos que compone la estructura de una pagina HTML?

Los estudiantes leen, analizan y comprenden en grupo y conjuntamente con el docente la

siguiente informacin:

a. Enlaces web,

b. Tipos de letras,

c. Caracteres especiales,

d. Listas

e. Imgenes

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 prrafo de texto al cual se le debe asignar un color, el

tamao de texto y el tipo de letra.

En la misma pagina HTML: crear ejemplos usando caracteres especiales como indica en la

gua: 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 pases de amrica del

Sur.

En la misma pagina HTML: utilizando imgenes, crear enlaces a 5 pginas 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 interactan en el foro La nuevas etiquetas del HTML5

SEMANA 03

Los estudiantes mediante la tcnica de lluvia de ideas responden la siguiente pregunta de manera

individual.

Cules son lo tipos de listas? Cuales son los tipos de target? Es posible realizar enlaces por

medio de imgenes, sustente?

Los estudiantes leen, analizan y comprenden en grupo y conjuntamente con el docente la

siguiente informacin: formularios bsicos y avanzados

Crear un pagina HTML, en donde se diseara un formulario utilizando: campos de texto,

checkbox, radio buttons, select, campos ocultos, textareas, botones, filea, fieldset, legend,

labels, entre otros controles avanzados.

Disear un formulario para el registro de un cliente, debe contener los siguientes atributos:

Apellidos y nombres, direccin, telfono, correo electrnico, permita subir una fotografa, fecha

de nacimiento, genero, permita listas la profesiones del cliente, permita seleccionar mas un

tema de inters(checkbox), y finalmente un botn tipo button que permita enviar los datos.

Compilar dicho formulario e enviar a travs del eva, semana 03 en el enlace de la tarea.

A travs del EVA, presentan la actividad de responsabilidad social: Cual es el rol de los

sistemas de informacin en las organizaciones de nuestra regin?

SEMANA 04

Los estudiantes mediante la tcnica de lluvia de ideas responden la siguiente pregunta de manera

individual.

Cules son los controles bsicos de un formulario?

Los estudiantes leen, analizan y comprenden en grupo y conjuntamente con el docente la

siguiente informacin: uso de mapas y tablas en el diseo de formularios.

Crea una pagina HTML, en ello crear dos mapas con imgenes.

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

aadir la propiedad ROWSPAN 8 a la primera columna del final hacia a tras.

A travs del eva enviar la pgina en la semana 04 en el enlace de la tarea

Los estudiantes a travs del EVA presentan la monografa de investigacin formativa.

Evaluacin: Los estudiantes desarrollan el examen de la I Unidad

RUBRICA DE LA I UNIDAD

ASPECTOS EXCELENTE (4PTS) REGULAR (3PTS) DEFICIENTE (2PTS)

Anlisis,

sntesis y

evaluacin

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 pgina HTML.

Participa en el equipo identificando la

estructura de una pgina html.

Participa en el equipo sin

comprender la estructura y

elementos de una Pagina

HTML.

Aplicacin

Implementa a travs de un ejercicio prctico una pgina

en html, infiriendo e interpretando los elementos que

componen la estructura de una pgina web.

Implementa a travs de un ejercicio

una pgina bsica en html

No culmino con el

desarrollo del ejercicio

Comunicacin

Colaboran y valoran los aportes de sus compaeros de

manera respetuosa y solidaria cumpliendo con lo

solicitado en la fecha estipulada

Cooperan y valoran los aportes de sus

compaeros 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

informacin en las organizaciones de nuestra regin,

indicando la bibliografa y/o web grafa con las normas

APA o Vancouver.

El informe no muestra no precisa el rol

que juegas las tecnologas de

informacin en las organizaciones.

El tema no est

relacionado con lo

solicitado en la actividad

investigacin

formativa

La monografa muestra con claridad los elementos del

HTML, indicando la bibliografa y/o web grafa con las

normas APA o Vancouver.

No se identifican con claridad las

nuevos elementos del HTML5 , pero

indican la bibliografa y/o web grafa

con las normas APA o Vancouver

No presenta la actividad

de investigacin formativa.

Creatividad y

Pensamiento

Crtico

Usa los conocimientos y el equipo tecnolgico

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 pgina

web propuesta

Puntaje 20 16 8

II UNIDAD DE APRENDIZAJE

DISEO DE PAGINAS WEB

Objetivos

especficos 1.2.5.5.2. Disear un portal web informativo, usando el FrameWork Bootstrap - Twitter.

Objetivos

operacionales

1. Crear hojas de estilo, mensajes de advertencia, confirmacin, ventanas pop-up, modales,

videos y audio, haciendo uso de html5 Semana 05

2. Disear un portal web, utilizando el Framweork Bootstrap twitter Semana 08 al

12

3. Elaborar una monografa con respecto al impacto de las tecnologas de informacin en el

sector empresarial(Responsabilidad Social) Semana 05

4. Elaborar una monografa con respecto a los gestores de contenidos: Drupal y

wordpress(Investigacin 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.

2. Instale las herramientas necesarias para el desarrollo del portal web: php y apache. Se

presento alguna dificultad. Explquelo?

3. Configure el entorno de trabajo: servidor web y lenguaje de programacin. Se presento

alguna dificultad. Explquelo.

4. Crea una pagina HTML, en ello crear un prrafo de 200 palabras y a ello aplicarlo un estilo,

asignarle un color rojo al texto.

5. Usando clases, al prrafo anterior, asignarle un color verde, margen de 10 pixeles, todo el

prrafo debe estar dentro de una capa(), asimismo en la clase(css) se debe considerar

las la siguientes propiedades.

6. Crear una pgina HTML, en ello visualizar por pantalla un mensaje de bienvenida.

7. En la misma pgina HTML, crear un botn para volver hacia atrs

8. En la misma pgina HTML, recoger un dato por teclado y visualizarlo.

9. En la misma pgina HTML, pedir confirmacin para visitar una pgina

10. En la misma pgina HTML, abrir una ventana pop-up cada cierto tiempo.

11. En la misma pgina HTML, visualizar un reloj digital en la pgina web.

12. En la misma pgina HTML, crear una galera de imgenes.

13. En la misma pgina HTML, deshabilitar el botn derecho del mouse

14. Imprimir una pagina web

15. En la misma pgina HTML, mostrar mensajes en movimiento en la barra de estado del

navegador

16. En la misma pgina HTML, crear un correo electrnico.

17. Crear un pagina HTML, en ello insertar un video utilizando las etiquetas de HTML 5.

18. En la misma pagina HTML, insertar un audio utilizando las etiquetas de HTML 5

19. En la misma pagina HTML, en ello disear un formulario utilizando las nuevas propiedades que

trae el HTML 5

20. La actividad ser enviada a travs del EVA en el enlace de la tarea

21. Investigacin Formativa: elaborar una monografa con respecto a los gestores de contenidos:

Drupal y wordPress, debe sealar la bibliografa y/o web grafa siguiendo las normas APA o

Vancouver.

22. En el EVA, los estudiantes y el docente interactan 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 caractersticas 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.

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 diseo adaptable

Elegir la plantilla ms adecuada del BootsTrap:

http://www.anidocs.es/bootstrap/docs/examples/fluid.php, para la cual debe hacer clic

derecho y copiar el cdigo 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 diseo de la plantilla adaptndolo 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 prediseadas con el bootstrap y elegir el

diseo 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.

Con ayuda del aula virtual en el EVA los estudiantes visualizan el contenido: Mens de

Navegacin y tipografas .

Personal alizar el diseo del men de navegacin de la parte izquierda del portal, cargar

contenido para cada una las opciones.

En los contenidos de las opciones del men, insertar imgenes, audio y videos, para la

insercin de videos e imgenes utilizar la tipografas del bootstrap

Los estudiantes a travs del EVA presentan la monografa de investigacin formativa.

SEMANA 08

Con ayuda del aula virtual en el EVA los estudiantes visualizan el contenido: Corousel y

ventanas modales .

Crear un carousel de imgenes para el portal del proyecto.

Crear un ventana modal para el inicio de sesin de usuario

Los estudiante a travs del eva enviar el proyecto del portal web, en el enlace de la tarea.

Evaluacin: Los estudiantes desarrollan el examen de la I Unidad

RUBRICA DE LA II UNIDAD

ASPECTOS EXCELENTE (4PTS) REGULAR (3PTS) DEFICIENTE (2PTS)

Anlisis,

sntesis y

evaluacin

En equipo identifican, analizan las caractersticas del

framework del Bootstrap-twitter para el desarrollo del

portal web.

Participa en el equipo identificando la

las caractersticas del Bootstrap de

Twitter

Participa en el equipo sin

comprender la estructura

del bootstrap

Aplicacin

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

Comunicacin

Colaboran y valoran los aportes de sus compaeros de

manera respetuosa y solidaria cumpliendo con lo

solicitado en la fecha estipulada

Cooperan y valoran los aportes de sus

compaeros entregando lo solicitado

en fechas no estipuladas.

No entrega el producto

solicitado

Responsabilid

ad social

Elabora una monografa con respecto al impacto de la

Tecnologas de Informacin en el sector Empresarial,

indicando la bibliografa y/o web grafa con las normas

APA o Vancouver.

La monografa no muestra, no precisa

el impacto de las Tecnologas de

Informacin en el sector Empresarial

El tema no est

relacionado con lo

solicitado en la actividad

investigacin

formativa

La monografa muestra con claridad los Gestores de

Contenidos, indicando la bibliografa y/o web grafa con

las normas APA o Vancouver.

No se guarda coherencia los

contenidos con el tema solicitado ,

pero indican la bibliografa y/o web

grafa con las normas APA o

Vancouver

No presenta la actividad

de investigacin formativa.

Creatividad y

Pensamiento

Crtico

Usa los conocimientos y el equipo tecnolgico

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

4. Referencias Bibliogrficas

Prez C. Mysql para Windows y Linux Editorial RA-MA

Prez 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