DESCRIPCIÓN ESPECÍFICA.

Transcripción

1 DESCRIPCIÓN ESPECÍFICA. Nombre del Módulo: DISEÑO DE SITIOS WEB. Código: CSTI0031 Horas certificables: 62 Objetivo General: Diseñar sitios web que implementen características intuitivas y visuales Objetivos específicos Determinar aspectos generales acerca de Internet y la publicación de un sitio web. Introducción Historia y evolución de Internet Terminología de Internet y la Web Los navegadores Publicar un sitio en la Web Los IP Los URL Las aplicaciones más importantes de Internet La interactividad de la Web En grupo discute aspectos propios del desarrollo de Internet. Indaga acerca de la importancia del posicionamiento de los sitios Web en Internet. Establece listas con los conceptos más comúnmente utilizados dentro de la jerga de Internet. Determina a partir información recolectada de revistas y otros, las ventajas y desventajas de los diferentes navegadores para el web. Relaciona estructuras y conceptos de organización de sitos web, con las herramientas y utilitarios que la aplicación brinda. Distingue los tipos de direcciones IP y su clasificación. Construye una línea de tiempo, que ubique los aspectos más relevantes del nacimiento de la Internet Identifica los conceptos y términos asociados a la publicación de un sitio Web. 3 Página 1 de 14

2 Establecer las características principales que presenta Macromedia Dreamweaver para generar la arquitectura del diseño de un sitio web. Introducción al diseño tradicional al diseño Web Fundamentos del diseño Web Definir los objetivos La estructura de archivos y carpetas La arquitectura del sitio La interfaz del sitio Configurar la pantalla Elementos de navegación. Los activos Los tiempos de descarga Los cambios en la Web Organización del trabajo Diseño HTML - Diseño Dreamweaver El código HTML DHTML, CSS y JavaScript Dreamweaver: editor visual, editor HTML. Relata a sus compañeros sus experiencias de usuario con respecto a la organización de sitios visitados. Discute sobre aspectos puntuales que definen los fundamentos del diseño gráfico para el web. Relaciona elementos del diseño gráfico web con el diseño gráfico convencional. En parejas, y bajo consideración de los conceptos de usabilidad, determina objetivos que un sitio web debe valorar para su diseño. Aclara el concepto de sitio web y su estructura de archivos. Visualiza diferentes sitios web, modificando resoluciones y observándolos en exploradores web diferentes. Determina las partes claves de la ventana de Dreamweaver para el conocimiento de sus utilitarios. Describe y explica el concepto de sitio, tal cual lo maneja la herramienta. 4 Página 2 de 14

3 Reconocer las partes de la interfaz de Macromedia Dreamweaver La Interfaz de Dreamweaver El espacio de trabajo de Dreamweaver La página de inicio El espacio de trabajo del Codificador El espacio de trabajo de Diseñador La barra de menús La Barra Insertar La ventana del Documento La barra de herramientas de la ventana del Documento La barra de estado de la ventana del Documento Los paneles de Dreamweaver y el Inspector de Propiedades El Grupo de paneles El Panel Inspector de Propiedades Las vistas en Dreamweaver La Vista de Diseño La Vista de Código La Regla, la Cuadrícula y las Ayudas visuales La Ayuda de Dreamweaver En grupo reconoce las partes más importantes de la ventana de Macromedia Dreamweaver. Enumera los posibles métodos para acceder con teclas y botones a las diferentes ventana o utilitarios que posee Dreamweaver. Explica el funcionamiento del inspector de propiedades. Analiza en parejas las implicaciones del trabajo en la vista de diseño y en la vista de código. Identifica y comenta cada una de las partes de la interfaz de la herramienta. 3 Página 3 de 14

4 Definir un sitio Web en Macromedia Dreamweaver Teorizar acerca de los factores y fundamentos del diseño gráfico para web Definir un sitio Web Introducción Conceptos generales Definir un sitio Asistente para la definición del sitio El panel Archivos Crear archivos y carpetas El Mapa del sitio Página principal del sitio Vincular páginas El color El color en la Web Colores seguros para el navegador La teoría del Color Modelos de color en dependencia de su uso Modelo de color RGB Modelo de color CMYK Tono, Valor y Saturación Colores complementarios Colores análogos Monocromías Colores fríos y colores cálidos Colores para un sitio Definición de colores en Dreamweaver Seleccionar el color del texto Color de fondo Denota las diferencias entre sitios remotos y sitios locales. Genera un sitio local a partir de un asistente. Construye un sitio local y definir una estructura de archivos sin asistentes. Planifica el diseño de un mapa de sitio. Discute acerca de los conceptos del término color y su importancia. Investiga en Internet acerca de las teorías del color para el web. Identifica paletas de colores que se llaman seguras para el web. Valora usos del color adecuados a sus necesidades. En grupos compara los modelos de color RGB y CMYK. Estudia los colores según Macromedia Dreamweaver lo posibilita. Diseña un sitio estableciendo toda la estructura jerárquica del mismo. Explica la teoría del color, el modelo RGB y CMYK para aplicarlos en el web. 2 2 Página 4 de 14

5 Manipular las características de formato de una página web Crear una página Web con texto Crear un nuevo documento Abrir un documento Las propiedades del documento Web Título del documento Codificación del documento Configurar el aspecto de la página Configurar los márgenes Las propiedades de Encabezados Insertar texto en el documento Diferencias con los procesadores de texto Formatos de texto Tipo de fuente Color Tamaño de fuente El estilo de Fuente Formatos de Párrafo Encabezados Alineación Listas Reglas horizontales Estilos CSS de Dreamweaver Trabajar con texto de otras aplicaciones Vista previa en el navegador Guardar un documento Conoce las opciones para manipular los archivos editables por Dreamweaver. A documentos nuevos les modifica las propiedades para generar resultados de páginas semejantes a las que se publican en el Internet. Crea páginas web y les modifica sus propiedades. Elabora páginas web a partir de herramientas como los son los CSS, incluidos en Dreamweaver. Utiliza la vista previa de Dreamweaver, para observar sus productos tal y como los mostraría un explorador. Construye una página web que implemente las principales características de formato. 8 Página 5 de 14

6 Modificar código HTML con Dreamweaver Modificar código HTML La vista de Código Configurar las opciones de la vista de Código Configurar las Preferencias para trabajar con código Las preferencias de los Colores de código Las preferencias del Formato de código Las preferencias de Reescritura de código Las preferencias de Sugerencias para el código Explorar el código HTML en la vista de Código La cabecera del documento El cuerpo del documento Trabajar con el Editor de etiquetas "Quick Tag Editor" Insertar, Editar y Ajustar etiqueta El Inspector de Etiquetas Con páginas descargadas del web se analizan las etiquetas HTML para discutirlas. Crea páginas web con características de texto y revisa el código generado. Establece configuraciones para su trabajo con código HTML. Modifica código con un editor de etiquetas. Conoce y modifica parámetros del inspector de etiquetas. Construye una página web que implemente las principales características de formato web, a partir de la vista de código. 3 Página 6 de 14

7 Insertar imágenes en páginas Web Insertar imágenes en la Web Las imágenes para la Web Optimizar las imágenes Seleccionar el formato adecuado Formatos de archivo de imágenes Formato de mapa de bits Formato vectorial Los formatos para la Web Perfeccionar las imágenes Tamaño de las imágenes Introducir imágenes Insertar una imagen de fondo Insertar imágenes en primer plano Tamaño de la imagen en Dreamweaver Vincular archivos y editores Herramientas de edición de imágenes Alinear las imágenes Alinear imágenes y textos Nombrar las imágenes Introducir textos gráficos Agregar texto alternativo Marcador de posición de imagen Crear una imagen de sustitución o Rollover Utiliza motores de búsqueda para descargar imágenes de diversos formatos. Enumera ventajas y desventajas de los diferentes formatos de imágenes. Define métodos de utilización de imágenes para optimizar los tiempos de descarga. Aplica imágenes para utilizar de fondos de página. Utiliza páginas creadas con anterioridad para establecer relaciones entre imágenes y textos. Manipula efectos de rollover para imágenes y gráficas. Aplica a imágenes insertas en una página web, diferentes parámetros y propiedades. 3 Página 7 de 14

8 Aplicar hipervínculos a los objetos de una página web Crear Mapas de imagen y Barras de navegación Trabajar con Hipervínculos Conceptos Generales Las rutas de acceso Rutas absolutas Rutas relativas Rutas relativas al documento Rutas relativas a la raíz del documento Crear vínculos Crear vínculos usando el URL Crear vínculos arrastrando el cursor Crear vínculos utilizando un ancla Crear vínculos con imágenes Crear un vínculo a un correo electrónico Abrir vínculos en una nueva ventana Eliminar vínculos El color de los vínculos Estrategias para trabajar con hipervínculos Crear Mapas de imagen y Barras de navegación Los mapas de imagen Crear un mapa de imagen Insertar una zona interactiva rectangular Insertar una zona interactiva oval Insertar una zona interactiva poligonal Crear una barra de navegación Menciona la utilidad de aplicar hipervínculos para optimizar el manejo de la información de una página web. Experimenta diferentes técnicas para crear enlaces. Asigna parámetros a los hipervínculos para diversificar sus posibilidades. En grupo discute estrategias para la asignación de vínculos y las probabilidades de navegación que pueda tener un sitio web. Define las técnicas para definir mapas de imágenes y barras de navegación En una páginas diseñadas para este efecto, manipula las zonas interactivas. Diseña barras de navegación simples. Demuestra como manipular los hipervínculos y sus propiedades. Toma una imagen y crea múltiples zonas interactivas hasta convertirlos en un mapa de imagen o barra de navegación. 3 2 Página 8 de 14

9 Agregar contenido multimediático a una página web Agregar contenido Multimedia El streaming Insertar GIF animado Sonido digital Los archivos de sonido Insertar sonido a una página Agregar sonido utilizando un hipervínculo Incrustar el sonido Interacción con Flash Insertar contenido Flash Insertar botones Flash Vídeo digital Insertar contenido Shockwave Insertar archivos QuickTime En grupo se discuten aspectos propios del manejo de objetos multimedia en Dreamweaver. Observa el comportamiento de objetos sonoros en Internet. Asocia sonidos a la inserción de hipervínculos. Importa objetos creados en Flash hacia Dreamweaver. Produce características Flash, directamente desde Dreamweaver. Observa el comportamiento de objetos tipo vídeo en páginas web que estén en la Internet. Inserta videos dentro de páginas creadas en clase. Inserta y configura objetos de sonido, video y animación dentro de una página. 3 Página 9 de 14

10 Definir tablas que permitan entregaran información en tabulada en una página web Manipulación de Tablas Las tablas en el Modo estándar Insertar una tabla Trabajar con filas, columnas y celdas Añadir y eliminar filas y columnas Cambiar el tamaño Combinar y dividir celdas Formato de tablas Configurar las propiedades de tabla Aplicar formatos predefinidos Añadir contenido a una tabla Ordenar los datos de una tabla Importar datos Trabajar en el Modo de diseño Dibujar una celda de diseño Dibujar una tabla de diseño Tablas anidadas Trabajar con celdas y tablas de diseño El formato de celdas y tablas de diseño Reajuste automático del tamaño Las columnas de ancho fijo Las columnas autoampliables Imágenes de Espaciador Utiliza el concepto de tabla como técnica para el diseño de una página web. Inserta tablas dentro de páginas web. A partir de tablas creadas previamente, manipula sus propiedades y parámetros. Trabaja con los datos de las tablas para vincular objetos como textos e imágenes. Construye una tabla que permita tabular datos presentándolos de manera estética. Diseña una página web a partir del diseño de tablas. 6 Página 10 de 14

11 Dividir el trabajo de diseño en Dreamweaver, con capas. Manipulación de Capas Crear capas Trabajar con capas Modificar las propiedades de capas Capas anidadas El Panel Capas La visibilidad de las capas El orden de apilamiento de las capas Convertir las capas en tablas Evitar el solapamiento de capas Crea un sitio y manipula aspectos generales asociados al trabajo con capas. A partir del panel Capas, modifica aspectos de visibilidad y apilamiento, de las mismas. Explica y demuestra con un ejemplo el Panel de Capas y sus propiedades. 6 Diseñar páginas web en Dreamweaver a partir de las herramientas de marcos. Marcos y conjuntos de marcos Crear un conjunto de marcos Insertar y dividir marcos Trabajar con marcos y conjuntos de marcos El panel Marcos El Inspector de Propiedades de marcos El Inspector de Propiedades del conjunto de marcos Insertar contenido en los marcos Añadir páginas existentes a un conjunto de marcos Crear nuevas páginas en los marcos Guardar marcos y conjuntos de marcos El uso de vínculos Eliminar marcos En grupo se discuten los beneficios y desventajas que se asocian al uso de marcos. Relaciona en parejas las características de la herramienta de marcos y de tablas. Manipula propiedades y opciones asociadas a la construcción de marcos en páginas web, con el inspector de Marcos. Con páginas creadas a partir de marcos, inserta texto e imágenes para observar su comportamiento. Establece vínculos locales y externos de su sitio web, en páginas diseñadas con la herramienta de marcos. Construye un sitio web a partir de páginas diseñadas con la herramienta de marcos. 4 Página 11 de 14

12 Trabajar con formularios en Dreamweaver Usar hojas de estilo en cascada, para optimizar la construcción de sitios web. Crear un formulario El formato de los formularios Los objetos de formulario Insertar objetos de formulario Campos de texto Casillas de verificación Botones de opción Menús y listas desplegables Los campos de archivos Los botones Enviar, Restablecer y otros Las imágenes Los campos ocultos Las etiquetas Enviar el formulario Tipos de CSS Crear y aplicar un estilo de clase Redefinir etiquetas HTML Crear Estilos CSS avanzados Trabajar con los estilos CSS Crear hojas de estilo externas Editar estilos Exportar estilos Adjuntar hojas de estilos Aplicar estilos Eliminar estilos Observa y define en grupo, la importancia de generar formularios para páginas estratégicas de un sitio web. Diseña páginas web que permiten insertar objetos de formularios. Con las páginas de formularios creadas, manipula las propiedades y parámetros de los mismos. En grupo discute sobre la importancia de crear hojas de estilo en cascada. Aplica hojas de estilo a páginas creadas en Dreamweaver. Modifica y elimina los estilos existentes. Elabora un formulario que recoja múltiples tipos de datos y que puedan ser enviados a un correo electrónico. Manipula las características de formato de un sitio web con el uso de Hojas de Estilo en Cascada. 4 6 Página 12 de 14

13 VI. LINEAMIENTOS DE EVALUACIÓN Con base en el análisis de los objetivos, contenidos y duración en horas de este módulo, se obtuvieron los valores porcentuales de las áreas que a continuación se presentan: ÁREA VALOR Socioafectiva: 10% Cognoscitiva: 25% Psicomotora: 65% Total 100 % Área Socioafectiva La finalidad de esta área es obtener información de la conducta manifestada por la persona participante durante el desarrollo de la acción formativa, específicamente en cuanto a comportamientos, valores, actitudes y sentimientos. Los aspectos por evaluar en esta área deben ser desarrollados y promovidos por la persona encargada de la formación durante el desarrollo del servicio de capacitación. Para su valoración se recomienda, la observación de los siguientes aspectos: Aspecto por observar Descripción Tipo de escala Participación Motivación Responsabilidad Expone sus aportes, dudas y consideraciones con el resto del grupo, y se encuentra presto a la reciprocidad de cualquier actividad. Figura como una persona afable y que irradia un sentimiento positivo y constructivista, para sí y para los demás. Acata las disposiciones en términos de tiempo, efectividad y objetividad, tal cual se plantean. 3%, valorado con las intervenciones que muestre en clase y su aporte al trabajo en equipo 3%, valorando el aporte para el crecimiento en el conocimiento de los compañeros y el propio. 4%, valorando la puntualidad en la presentación de las asignaciones y la calidad de las mismas Página 13 de 14

14 Área Cognoscitiva Para la evaluación de esta área se propone la realización de 3 actividades de comprobación. A continuación se detallan: Actividad Objetivos N que abarca Nombre Valor % er Parcial Prueba Teórica 10% do Parcial Prueba Teórica 10% Proyecto 5% Área psicomotora Para la evaluación de esta área se propone la realización de 3 actividades de comprobación. A continuación se detallan: Actividad Objetivos N que abarca Nombre Valor % er Parcial Prueba Práctica 25% do Parcial Prueba Práctica 25% Proyecto 15% Página 14 de 14