1. Datos Generales de la asignatura



Descargar 340.29 Kb.
Página1/4
Fecha de conversión24.04.2018
Tamaño340.29 Kb.
  1   2   3   4

Dirección General de Educación Superior Tecnológica

1. Datos Generales de la asignatura

Nombre de la asignatura:
Clave de la asignatura:
SATCA1:
Carrera:

Desarrollo de Aplicaciones para Internet.
TDV-1301
0-5-5
Ingeniería en Informática

Ingeniería en Sistemas Computacionales



2. Presentación

Caracterización de la asignatura

Esta asignatura aporta al perfil del Ingeniero en Informática las competencias profesionales:




  • Aplicar conocimientos científicos y tecnológicos en la solución de problemas en el área informática con un enfoque interdisciplinario.

  • Administrar las tecnologías de la información, para estructurar proyectos estratégicos.

  • Analizar, modelar, desarrollar, implementar y administrar sistemas de información para aumentar la productividad y competitividad de las organizaciones.

La importancia de esta asignatura, es que permite al alumno desarrollar e implementar Aplicaciones en HTML5 y CSS tecnologías en las que hoy nos conectamos desde teléfonos móviles, tabletas, eBooks, netbooks, computadoras y otra gama de dispositivos.




Intención didáctica

La asignatura debe ser práctica y capaz de desarrollar en el estudiante la habilidad para la aplicación del leguaje HTML5 y técnicas de hojas de estilos (CSS).




  • En la unidad I. El estudiante será capaz de Identificar los conceptos básicos de Internet, la evolución de HTML y los elementos que integran un Sitio Web mediante diferentes actividades de aprendizaje.

  • En la unidad II. El estudiante será capaz de reconocer las estructuras de programación desarrollando aplicaciones que permitan la manipulación de la página a través de sus instrucciones básicas (manipulación de texto, tablas, formularios, enlaces y multimedia).

  • En la unidad III. El estudiante será capaz de aplicar los elementos que permitan dar un aspecto de calidad y amigable al usuario sobre una aplicación Web.

  • En la unidad IV. El estudiante será capaz de Implementar un sitio Web estático en un servidor gratuito.





3. Participantes en el diseño y seguimiento curricular del programa

Lugar y fecha de elaboración o revisión

Participantes

Observaciones

Instituto Tecnológico de Jiquilpan
Jiquilpan Michoacán, 11 de marzo de 2013

Lic. Martha Elizabeth González Zepeda

M.C. Edna Paola Chávez Guerra

M.C. María Elena Cabrera Rocha


Definición de los programas de estudios de los módulos de especialidad de las carreras de Ingeniería en Informática y Sistemas Computacionales.


4. Competencia(s) a desarrollar

Competencia(s) específica(s) de la asignatura




  • Desarrollar e implementar un sitio Web estático con técnicas y herramientas de HTML5 y CSS.

  • Identificar los conceptos básicos de Internet, la evolución de HTML y los elementos que integran un Sitio Web.

  • Reconocer las estructuras de programación desarrollando aplicaciones que permitan la manipulación de la página a través de sus instrucciones básicas (manipulación de texto, tablas, formularios, enlaces y multimedia).

  • Conocer los elementos que permitan dar un aspecto de calidad y amigable al usuario.

  • Implementación de un sitio Web estático en un servidor gratuito.





5. Competencias previas

Esta asignatura, es la aplicación práctica del conocimiento científico, a través de los métodos y técnicas adecuados, para el desarrollo de aplicaciones Web en HMTL5.


Esta asignatura tiene relación previa con las signaturas:


  • Programación orientada a objetos.

  • Análisis y modelado de sistemas de información.

Considerando las asignaturas anteriormente mencionadas se consideran las siguientes competencias específicas:




  • Aplicar un lenguaje orientado a objetos para la solución de problemas.

  • Aplicar principios de ingeniería del software en las etapas de análisis y diseño de un sistema de información.

  • Modelar casos de uso acorde a los requerimientos del proyecto.

  • Documentar el proyecto.

Tomar decisiones con base en los elementos teórico-práctico adquiridos que permitan optimizar costos en soluciones informáticas bajo ambiente Web.





6. Temario

No.

Temas

Subtemas

1

Introducción

1.1 Internet y las páginas Web

1.1.1 ¿Qué es internet?

1.1.2 Las páginas Web y el World Wide Web(www)

1.1.3 Funcionamiento y navegación

1.1.4 Evolución de HTML

1.1.5 Las hojas de estilo CSS

1.1.6 Estructura de una página Web.

1.2 Navegadores.

1.3 Ubicación y tipo de contenido de las páginas Web.

1.3.1 El servidor.

1.3.2 Clasificación de las páginas Web.

1.3.3 Contenido y recursos en la creación de páginas Web.


2

Lenguaje HTML 5

2.1 El lenguaje HTML 5.

2.2 Elementos y estructura básica.

2.2.1 Mi primera página en HTML5.

2.2.2 Elementos.

2.2.3 Estructura básica.

2.3 Directivas de texto.

2.3.1 Salto de línea y espacios en blanco.

2.3.2 Párrafos.

2.3.3 Secciones.

2.3.4 Cabeceras.

2.3.5 Separadores.

2.3.6 Bloque de texto preformateado.

2.3.7 Diálogos.

2.3.8 Destacar textos.

2.3.9 Listas.

2.3.10 Marcadores de texto.

2.3.11 Novedades y tachado.

2.4 Enlaces, clasificación y tipos.

2.5 Tablas.

2.5.1 Clasificación de las tablas.

2.5.3 Aplicaciones de las tablas.

2.6 Imágenes.

2.7 Formularios.

2.8 Audio, video y otros objetos de multimedia en HTML 5.

2.9 Funciones.

2.9.1. Drag.

2.9.2. Drog.




3

Hojas de Estilo en Cascada (CSS)

3.1 Evolución del CSS.

3.2 Introducción a las hojas de estilo.

3.2.1 Funcionamiento básico.

3.3 Selectores.

3.3.1 Tipos de selectores.

3.4 Unidades de medida y colores.

3.5 Propiedades básicas.

3.5.1 Propiedades de fuentes de letras.

3.5.2 Propiedades asociadas a colores y fondos.

3.6 Modelos de cajas.

3.6.1 estructuras y propiedades.

3.7 Posicionamiento.

3.7.1 Propiedades y tipos de posicionamiento.

3.7.2 Visualización.

3.8 Estilos para listas y tablas.

3.9 Implementación de CSS 3.

3.10 Validaciones de páginas.




4

Publicación de un Sitio en HTML 5

4.1 Implementación de un sitio Web en un servidor.

4.2 Implementación de un sitio Web en un buscador un buscador.

4.3 Mejoramiento con JavaScript.

4.4 Aplicaciones.


7. Actividades de aprendizaje de los temas

I Introducción.

Competencias

Actividades de aprendizaje

Específica(s):




  • Identificar los conceptos básicos de Internet, la evolución de HTML y los elementos que integran un Sitio Web.

  • Investigar la historia de Internet.

  • Análisis de los conceptos básicos de HTML.

Genéricas:




  • Capacidad de análisis y síntesis.

  • Capacidad de organizar y planificar.

  • Habilidad para buscar y analizar información proveniente de fuentes diversas.

  • Comunicación oral y escrita.







  • Realizar una Investigación de la historia de internet y www.

  • Realizar un mapa conceptual de los conceptos básicos de HTML.

  • Hacer una tabla comparativa de las diferentes características de los navegadores para HTML 5.

  • Instalación y configuración de un servidor Web para el manejo de HTML 5.

  • Diseñar la planificación de una página Web.

  • Identificar la arquitectura Web plasmándola en una representación gráfica.

II Lenguaje HTML 5.

Competencias

Actividades de aprendizaje

Específica(s):




  • Reconocer las estructuras de programación desarrollando aplicaciones que permitan la manipulación de la página a través de sus instrucciones básicas (manipulación de texto, tablas, formularios, enlaces y multimedia).

  • Desarrollar aplicaciones en HTML5.

Genéricas:




  • Capacidad de análisis y síntesis.

  • Capacidad de organizar y planificar.

  • Comunicación oral y escrita.

  • Capacidad de aplicar los conocimientos en la práctica.

  • Toma de decisiones.




  • Discutir en equipo las ventajas y desventajas que existen entre los diferentes editores de HTML 5.

  • En un reporte enumera, lista e identifica las principales características de HTML 5.

  • Realiza una práctica con la estructura básica de HTML 5.

  • Elabora una interfaz cuya estructura básica sea, titulo, dos párrafos que incluya saltos de línea entre ellos.

  • Agregar a la práctica anterior algunos encabezados de diferentes tamaños destacando texto en negritas, marcadores de texto y tachado.

  • Agregar a la interfaz un bloqueo de texto pre formateado y diálogos, destacando texto.

  • Desarrollar una aplicación para emplear listas numeradas y no numeradas, así como anidadas.

  • Identificar y clasificar los diferentes tipos de enlaces.

  • Desarrollar una aplicación que realice diferentes tipos de enlaces (nueva página, sección en el mismo documento, rutas relativas o absolutas).

  • Realizar en un cuadro sinóptico la clasificación de las tablas en HTML.

  • Realizar una interfaz que emplee tablas para organizar el contenido de una página, ya sea total o parcial.

  • A la práctica anterior agregarle fondo e imágenes.

  • Diseño de una interfaz mediante formularios (estructura formularios, campos texto, área de texto, campo contraseña, lista de selección simple, múltiple, botón radio, lista de cajas, botones que manipulen información).

  • Diseño de una interfaz que incorpore audio, video y multimedia.

  • Crear una interfaz de carrito de la compra sencilla arrastrando y soltando objetos en pantalla.




III Hojas de Estilo en Cascada (CSS).

Competencias

Actividades de aprendizaje

Específica(s):




  • Conocer los elementos que permitan dar un aspecto de calidad y amigable al usuario por medio hojas de estilo (CSS).

  • Análisis de las propiedades básicas de las CSS.

  • Organizar y planificar información sobre CSS 3.

Genéricas:




  • Capacidad de análisis y síntesis.

  • Capacidad de organizar y planificar.

  • Comunicación oral y escrita.

  • Habilidad para buscar y analizar información proveniente de fuentes diversas.

  • Solución de problemas.

  • Toma de decisiones.

  • Capacidad crítica y autocrítica.

  • Trabajo en equipo.

  • Habilidades interpersonales.

  • Capacidad de aplicar los conocimientos en la práctica.




  • Hacer una línea de tiempo de evolución, ventajas y desventajas del CSS.

  • Discutir en mesa redonda la apariencia y presentación de las hojas de estilo en diferentes niveles.

  • Practica: Desarrolla una interfaz que implemente hojas de estilo en sus diferentes niveles.

  • Practica: Realizar una interfaz que permita manipular texto (efectos de texto, fuentes y alineación).

  • Practica: Realizar una interfaz que permita analizar los aspectos de colores realizando paletas para páginas Web (fondo y fuentes de texto).

  • Practica: Realizar una interfaz que permita reestructurar su página y acomodar sus elementos (elementos flotantes, posicionamiento absoluto y relativo).

  • Practica: Desarrollar una interfaz con los diferentes estilos de listas y tablas con CSS.

  • Hacer una tabla comparativa de las mejoras de CSS 3.

  • Practica: Realizar una interfaz aplicando las instrucciones mejoradas de CSS 3.

  • A la práctica anterior realizarle validación de páginas.




IV Publicación de un Sitio en HTML 5.

Competencias

Actividades de aprendizaje

Específica(s):




  • Desarrollar de un sitio Web estático en un servidor gratuito con HTML5 y CSS.

  • Implementar el sitio Web en un servidor.

Genéricas:




  • Capacidad de análisis y síntesis.

  • Capacidad de organizar y planificar.

  • Comunicación oral y escrita.

  • Habilidad para buscar y analizar información proveniente de fuentes diversas.

  • Solución de problemas.

  • Toma de decisiones.

  • Capacidad crítica y autocrítica.

  • Trabajo en equipo.

  • Habilidades interpersonales.

  • Capacidad de aplicar los conocimientos en la práctica.




  • Hacer una tabla comparativa para servidores actuales para identificar el servidor a utilizar.

  • Desarrollar en equipo las diferentes aplicaciones para implementar el sitio Web.

8. Práctica(s)

Unidad I


Práctica 1. Comprobar la compatibilidad de los diferentes navegadores y cuál es el mejor clasificado en los siguientes apartados:

  • Video

  • Formularios

  • Geolocalización

Práctica 2. Crear una página que muestre el DOCTYPE propuesto para el HTML5.
Unidad II

Practica 1 Creación de una página a través de instrucciones básicas



  1. Realizar ejemplos de uso de
    y
    en whatwg.org

  2. Crear un documento “Practica estructura.htm” con las siguientes características:

  • Idioma: Español

  • Codificación caracteres: UTF-8

  1. Añadir los siguientes datos:

  • Título: Estructura HTML5

  • Descripción: Documento de prueba para el curso de HTML5

  1. Añadir un favicon.

  2. Asociar la hoja de estilos “estilo.css”.

  3. Crear la siguiente estructura de bloques:

  • Cabecera

  • Barra de navegación

  • Contenido principal

  • Pie de página.

  • Poner algo de texto en el interior para que sea visible en el navegador.

  1. En la cabecera colocar los siguientes titulares:

  • Come mucha fruta

  • Lugar de encuentro para los amantes de la fruta

  1. En el contenido principal poner lo siguiente:

  • Titular: Peras al vino

  • Apartado: Ingredientes

  • Apartado: Modo de preparación

  • Apartado: Trucos y consejos.

Los contenidos se pueden copiar (sin formato) de cualquier receta de Internet.

  1. Añadir un nuevo bloque para los anuncios. Colocar la imagen “anuncio.gif”.

  2. Entre los apartados del contenido principal colocar la foto “peras.jpg” con el siguiente pie de foto “Muestra de presentación de peras al vino”.

  3. Colocar un bloque de detalles con enlaces a “Otras recetas” de Internet.

  4. Resaltar aquellos textos de mayor importancia.

  5. Al principio del contenido principal crear una tabla de este modo:




Dificultad

Tiempo de preparación

Calorías

Costo

baja

20 minutos

85 c / 100 gr

12 $ / ración

Practica 2 Aplicando formularios Editar el archivo “Práctica formulario.htm”. Activar el autocompletado para todo el formulario.



  1. Activar el foco en el primer campo.

  2. Todos los campos son obligatorios excepto Email y URL Web.

  3. Editar los campos para ponerles las siguientes propiedades:

  • Cantidad: numérico, min=5, max=20.

  • Color: tipo color.

  • Fecha: min=1nov, max=30nov.

  • Hora: min=09:00, max=20:00, cada 30min

  • Ciudad: Cree una lista de datos para sugerir los siguientes valores: Distrito Federal (predeterminado), Toluca, Guanajuato, Guadalajara, Monterrey

  • Teléfono, email, URL Web, poner cada tipo de datos.

  • Número de tarjeta: restringir a un número entre 14 y 16 dígitos.

  • Security Code: poner texto de sugerencia “nº posterior” que desaparezca al escribir.

  • Fecha de caducidad: tipo mes.

  • Convertir cada
    en un
    con .

  • En el formulario poner: method="post" action=mailto:lupita@gmail.com enctype="text/plain".

  1. Crear un estilo, en el mismo documento, para que el campo que tenga el foco muestre un fondo amarillo.

  2. Añada el script necesario para que sea compatible con navegadores antiguos.

Practica 3 Aplicar Multimedia



  1. Editar el archivo “Practica multimedia.htm”. Añadir audio con "drexler.mp3".

  2. Añadir video con "drexler.mp4". Indicar precarga y dimensiones.

  3. Añadir alternativas de formato para el audio y el video.

  4. Añadir script para compatibilidad con navegadores antiguos.

  5. Añadir alternativa de reproducción con flash en el video.

Practica 4 Carrito de compras. (Api relacionada con la especificación HTML5)

  1. Crear un carrito de compras utilizando la función Drag y Drop manejando eventos de arrastre, y las medidas para la compatibilidad en diferentes navegadores

Unidad III

Práctica 1. Crear un documento con texto de relleno y varios titulares. Llamarlo "Practica fuentes.htm". Aplicar la fuente "pincoyablack.otf " a los titulares.



  1. Para el resto del texto, utilizar el tamaño 16px y la Webfont "Delius" de Google.

Practica 2. Crear el documento "Practica efectos.htm"

  1. Girar el titular 90º.

  2. Aplicar una transición para el cambio de color de los enlaces.

  3. Aplicar una transición para hacer las imágenes el doble de grandes y desplazarlas hacia abajo 80px.

Practica 3. En un documento nuevo identificar varios textos con una clase. Poner botón que destaque dichos textos cambiándoles el color de fondo.

Unidad IV

Proyecto: Cree un documento con el nombre de “proyecto.htm”.

Asígnele las siguientes características:



  • idioma español,

  • codificación UTF-8,

  • título “Curriculum Vitae”,

  • descripción “Datos profesionales de...”,

  • añada un favicon.

  1. Hacer que el documento sea compatible con navegadores antiguos.

  2. Dividir el contenido principal en las siguientes secciones: datos personales, estudios, experiencia, contacto.

  3. Escribir los contenidos de los apartados: datos personales, estudios y experiencia.

  4. En Datos personales añadir una figura con su fotografía y su nombre debajo

  5. Hacer un marcado con atributos semánticos de todos los datos relevantes: nombre, dirección, email, teléfono, máxima titilación, última experiencia, etc.

  6. En la sección de Contacto crear un formulario con los siguientes datos: nombre, empresa, teléfono, email, dirección, comentarios, cita (fecha y hora).

  7. En el encabezado añadir un video con una breve presentación.

  8. Dar estilo al documento. Utilice fuentes Web y aplique estilos diferentes a cada sección.

  9. Localizar la posición del visitante y enviarlo como dato oculto en el formulario.

  10. Validar todos los campos del formulario.

  11. Publicarlo en un servidor gratuito.

9. Proyecto de asignatura

Fundamento:

El Objetivo del proyecto es desarrollar en equipo una propuesta de una aplicación web en HTML5 y el uso de hojas de estilo en cascada, considerando los elemento estructurales que contiene una página web, e integrando las herramientas y el estilo de diseño determinado por el CSS (hojas de estilo). Los proyectos a realizarse se establecen a partir de especificaciones que realice el docente o necesidades que el alumnos determine existen en el entorno local, regional, nacional e internacional factibles de un diseño web.

La aplicación puede ser manejo de un punto de venta, control de curriculum, control de encuestas, etc.


Planeación

Los equipos serán de 3 a 5 integrantes, el proyecto a realizar podrá considerar en su desarrollo las competencias adquiridas en asignaturas relacionadas con la ingeniería del software; así como la aplicación de los principios de ingeniería del software en las etapas de análisis y diseño de un sistema de información y establecer para el plan del proyecto las actividades de la determinación, especificación de requerimientos, que sirven además de base para documentar el proyecto y tener un registro y control para la implementación de la solución. El siguiente paso sería la implementación de la solución y finalmente la implantación y publicación en la Internet.


Desarrollo:

En el desarrollo se van a llevar a cabo las actividades planteadas en la planeación, pero se detalla de forma más particular otras actividades particulares para su implementación .

La aplicación debe contemplar:


  • Hacer la aplicación para diferentes navegadores.

  • El diseño de la aplicación deberá ser acorde a las políticas de la empresa a la que se le va a beneficiar.

  • Dividir el contenido en secciones.

  • Hacer un marcado con atributos semánticos de todos los datos relevantes.

  • Integrar al menos un video en la aplicación.

  • Hacer validación de datos con JavaScript.

  • El sitio se publicará en un servidor gratuito.

  • Documentación de la aplicación

Evaluación

La rúbrica contemplará los siguientes criterios:

Planeación 20%

Desarrollo 40%

Publicación 10%

Exposición del proyecto 20%

Trabajo en equipo 10%





10. Evaluación por competencias

La evaluación debe ser continua y cotidiana por lo que se debe considerar el desempeño encada una de las actividades de aprendizaje, haciendo especial énfasis en:




  • Rúbricas o productos, señalados en cada unidad académica dentro de las actividades de aprendizaje.

  • Prácticas propuestas y su presentación y exposición en plenaria. Algunas se evaluarán por equipo.

  • Portafolio de evidencias de Información recabada durante las consultas e investigaciones solicitadas, plasmadas en documentos escritos.

  • Descripción de otras experiencias concretas que se obtendrán al participar en discusiones, exposiciones o cualquier otro medio didáctico-profesional que trate sobre la materia y que deberán realizarse durante el curso académico.

  • Exámenes teórico-prácticos para comprobar la efectividad del estudiante en la resolución de casos prácticos.




11. Fuentes de información



  1. (2012). El gran libro del diseño Web.

  2. Goldstein, A., Lazaris, L., & Weyl, E. (2011). HTML5 y CSS3. ANAYA.

  3. Goto, K., & Cotler, E. (2008). Rediseño y desarrollo de sitios Web. Anaya.

  4. MacDonald, M. (2012). Creación y diseño Web. ANAYA.

  5. Pressman, R. S. (2010). Ingeniería del Software, un enfoque práctico (7 ma. ed.). México: Mc. Graw Hill.

  6. Schulz, R. G. (2009). Diseño Web con CSS. MARCOMBO, S.A.

  7. www.zarqun.com. (10 de Abril de 2013). Obtenido de http://www.zarqun.com/2013/02/el-gran-libro-de-diseno-web-en-pdf/

  8. Emmanuel Herrera Rios, Arrancar con HTML 5 curso de programación, 1ª edición, Alfaomega, 2012.

  9. Joseph W. Lowery, Mark Fletcher, HTML 5 para desarrolladores, 1ª edición, Anaya Multimedia, 2012.

  10. Alonso Álvarez García, HTML5, 1ª edición, Anaya Multimedia, 2012






1. Datos Generales de la Asignatura

Nombre de la asignatura:
Clave de la asignatura:
Créditos (HT-HP-Créditos):
Carrera:

Tópicos de Programación para Internet I.
TDV-1302
0-5-5
Ingeniería en Informática

Ingeniería en Sistemas Computacionales



2. Presentación

Caracterización de la asignatura

Esta asignatura aporta al perfil del Ingeniero en Informática conocimientos suficientes para el desarrollo de sistemas y aplicaciones en ambiente Web, integrando diferentes tecnologías como son lenguajes de programación, bases de datos y redes, entre otras.


Su importancia en la carrera radica en que las aplicaciones Web son una tendencia vigente para implementar soluciones informáticas.
Es pertinente señalar que esta materia se ubica en la parte final de la carrera con el objetivo de aplicar las competencias previamente desarrolladas en el alumno en las materias de: programación, bases de datos, redes, análisis y diseño de sistemas de información y desarrollo de aplicaciones Cliente-Servidor.


Intención didáctica.

El temario está organizado en seis unidades; en la primera unidad se aborda el entorno de desarrollo Web, componentes y su funcionamiento.


De formularios Web y controles, se encarga la segunda unidad. El objetivo de ésta, es que el alumno desarrolle aplicaciones Web considerando tipos de datos, palabras reservadas, sentencias condicionales, ciclos y arreglos para posteriormente conectar y manipular procesos con bases de datos.
La tercera unidad tiene el objetivo de estudiar el uso de páginas maestra, hojas de estilo y menús, que promueven y fortalecen la interfaz de usuario.
En la unidad número cuatro se configuran todos los requerimientos para alojar el sitio, así como las políticas de acceso, usuarios y funciones necesarias para su operación.
El control de sesiones, duración, tiempo de uso y variables de aplicación son temas estudiados en la unidad cinco.
Con lo relacionado al acceso a datos; elemento muy importante para que una aplicación Web sea dinámica y responda a las solicitudes de los clientes, así como los controles que permiten acceder a los datos son aprendidos en la sexta unidad.



Compartir con tus amigos:
  1   2   3   4


La base de datos está protegida por derechos de autor ©composi.info 2017
enviar mensaje

    Página principal