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 1.2 Cdigo de la asignatura 1.3 Cdigo del rea curricular 1.4 Naturaleza de la asignatura 1.5 Nivel de estudios 1.6 Ciclo acadmico 1.7 Crditos 1.8 Horas semanales 1.9 Total horas 1.10 Pre requisito 1.11 Docente titular 1.12 Docente tutor : Tecnologa Web I : 091255 : 5.0 Formativa : Obligatoria Terico y /Practica : Pre grado - PG :V :4 : 6 terico - prctico : 90 : 091255 - Tecnologa Web I : Ing. Orlando Iparraguirre Villanueva. : 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 BootstrapTwitter. 6. Contenidos especficos por unidad de aprendizaje
Unidad de Aprendizaje Objetivo Especifico Contenidos Especficos

1.1 Visin global del contenido del proceso de aprendizaje propuesto en la asignatura. I Lenguaje HTML 1.2.5.5.1 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 2.1. Hojas de estilo, Scripts(java script), capas, Sonido y video usando HTML5

1.2.5.5.2
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 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 los mtodos,

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:
# 1 2 3 4 DESCRIPCION DE LAS ACTIVIDADES Actividades de resolucin de problemas de la asignatura Actividades de investigacin formativa Actividades de responsabilidad social Examen escrito TOTAL % (60%) (10%) (10%) (20%) 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).
1.0. Socializa la organizacin del SPA resaltando la importancia en cada unidad de aprendizaje. 1.1. Analiza y comprende la estructura bsica de una pgina HTML. 1.2. Crear una pagina HTML con los siguientes elementos: enlaces web, listas, tipos de letras e insercin de imgenes.

Semana 01 Semana 01 Semana 02 Semana 03 Semana 04 Semana 03

Objetivos operacionales

1.3. Disear un formulario en HTML con los controles bsicos y avanzados 1.4. Crear una pagina HTML, con el uso de mapas y tablas en el diseo de un formulario. 1.5. Elaborar un informe con respecto al rol de los sistemas de informacin en las organizaciones de nuestra regin(Responsabilidad Social) 1.6. Elaborar una monografa con los nuevos elementos de HTML5(Investigacin Formativa)

Semana 04
TMPO ESTRATEGIA

ACTIVIDADES 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) Analiza identificando la importancia de los temas o Anlisis, sntesis y evaluacin 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. Implementa a travs de un ejercicio prctico una pgina Aplicacin en html, infiriendo e interpretando los elementos que componen la estructura de una pgina web. Colaboran y valoran los aportes de sus compaeros de Comunicacin manera respetuosa y solidaria cumpliendo con lo solicitado en la fecha estipulada Elabora el informe con respecto al rol de los sistemas de Responsabilid ad social informacin en las organizaciones de nuestra regin, indicando la bibliografa y/o web grafa con las normas APA o Vancouver. La monografa muestra con claridad los elementos del HTML, indicando la bibliografa y/o web grafa con las normas APA o Vancouver. Usa los conocimientos y el equipo tecnolgico Implementa a travs de un ejercicio una pgina bsica en html Cooperan y valoran los aportes de sus compaeros entregando lo solicitado en fechas no estipuladas. El informe no muestra no precisa el rol que juegas las tecnologas de informacin en las organizaciones. No se identifican con claridad las nuevos elementos del HTML5 , pero indican la bibliografa y/o web grafa con las normas APA o Vancouver Usa los conocimientos y el equipo para desarrollar los ejercicios propuestos. No presenta la actividad de investigacin formativa. Participa en el equipo identificando la estructura de una pgina html. REGULAR (3PTS) DEFICIENTE (2PTS) Participa en el equipo sin comprender la estructura y elementos de una Pagina HTML.

No culmino con el desarrollo del ejercicio

No entrega el producto solicitado

El tema no est relacionado con lo solicitado en la actividad

investigacin formativa

Creatividad y Pensamiento Crtico

disponible de manera constructiva para desarrollar los ejercicios propuestos. As mismo aporta para la mejora de los ejercicios.

No desarrolla la pgina web propuesta

Puntaje

20

16

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. 1. Crear hojas de estilo, mensajes de advertencia, confirmacin, ventanas pop-up, modales, videos y audio, haciendo uso de html5 2. Disear un portal web, utilizando el Framweork Bootstrap twitter Objetivos operacionales 3. Elaborar una monografa con respecto al impacto de las tecnologas de informacin en el sector empresarial(Responsabilidad Social) 4. Elaborar una monografa con respecto a los gestores de contenidos: Drupal y wordpress(Investigacin Formativa)
ACTIVIDADES SESION 05 TMPO ESTRATEGIA

Semana 05 Semana 08 al 12 Semana 05

Semana 07

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. presento alguna dificultad. Explquelo?

Se

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(<Div>), 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 inicio con el desarrollo del portal web.

afinidad para dar

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/jquery1.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 Anlisis, sntesis y evaluacin EXCELENTE (4PTS) En equipo identifican, analizan las caractersticas del framework del Bootstrap-twitter para el desarrollo del portal web. Implementa un portal web usando el bootstrap de twitter, Aplicacin infiriendo e interpretando los elementos que componen dicho FrameWork Colaboran y valoran los aportes de sus compaeros de Comunicacin manera respetuosa y solidaria cumpliendo con lo solicitado en la fecha estipulada Elabora una monografa con respecto al impacto de la Responsabilid ad social Tecnologas de Informacin en el sector Empresarial, indicando la bibliografa y/o web grafa con las normas APA o Vancouver. REGULAR (3PTS) Participa en el equipo identificando la las caractersticas del Bootstrap de Twitter Implementa un portal web usando el frameWork-Bootstrap de twitter Cooperan y valoran los aportes de sus compaeros entregando lo solicitado en fechas no estipuladas. La monografa no muestra, no precisa el impacto de las Tecnologas de Informacin en el sector Empresarial No se guarda coherencia los investigacin formativa La monografa muestra con claridad los Gestores de Contenidos, indicando la bibliografa y/o web grafa con las normas APA o Vancouver. contenidos con el tema solicitado , pero indican la bibliografa y/o web grafa con las normas APA o Vancouver Creatividad y Pensamiento Crtico Puntaje Usa los conocimientos y el equipo tecnolgico Usa los conocimientos y el equipo para desarrollar del portal web. No desarrolla el portal web solicitado No presenta la actividad de investigacin formativa. DEFICIENTE (2PTS) Participa en el equipo sin comprender la estructura del bootstrap No culmino con el desarrollo del portal

No entrega el producto solicitado

El tema no est relacionado con lo solicitado en la actividad

disponible de manera constructiva para desarrollar el portal web usando el Bootstrap de Twitter. As mismo aporta para a la mejora del portal web 20

16

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/490lorena-arranz http://theproc.es/files/5321 http://www.genbetadev.com/frameworks/bootstrap