DESCRIPCIÓN ESPECÍFICA NÚCLEO: COMERCIO Y SERVICIOS SUBSECTOR: INFORMÁTICA

Transcripción

1 DESCRIPCIÓN ESPECÍFICA NÚCLEO: COMERCIO Y SERVICIOS SUBSECTOR: INFORMÁTICA Nombre del Módulo: DISEÑO DE SITIOS WEB Código: CSTI0088 total: 78 Horas 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 y expresa los conceptos y términos asociados a la publicación de un sitio Web. 3 Página 1 de 13

2 Teorizar acerca de los factores y fundamentos del diseño gráfico para web 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 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 Dreamweaver lo posibilita. Explica la teoría del color, el modelo RGB y CMYK para aplicarlos en el web. 3 Página 2 de 13

3 Reconocer el entorno y las características principales para la creación de un sitio Web en Adobe Dreamweaver 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. 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 Barras de Herramientas 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 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. En grupo reconoce las partes más importantes de la ventana de 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 y características de la herramienta 6 Página 3 de 13

4 El Panel Inspector de Propiedades Las vistas en Dreamweaver La Vista de Diseño La Vista de Código La Vista LiveView (Vista en vivo) Opciones con JavaScript Vista previa en Navegadores Vista previa de páginas en dispositivos móviles La Regla, la Cuadrícula y las Ayudas visuales La Ayuda de Dreamweaver 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 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. Página 4 de 13

5 Manipular las características de formato e hipervínculo de una página web Crear una página Web con texto Crear un nuevo documento Guardar un 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 Trabajar con texto de otras aplicaciones Vista previa en el navegador 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 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. Utiliza la vista previa de Dreamweaver, para observar sus productos tal y como los mostraría un explorador. 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. Construye una página web que implemente las principales características de formato y de hipervínculos. 6 Página 5 de 13

6 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 Estrategias para trabajar con hipervínculos 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 13

7 Usar hojas de estilo en cascada, para optimizar la construcción de sitios web. Insertar objetos multimediáticos a una página Web. Uso de CSS Tipos de CSS Crear y aplicar un estilo de clase Redefinir etiquetas HTML Crear Estilos CSS avanzados Trabajar con los estilos CSS Cambios en CSS Crear hojas de estilo externas Editar estilos Exportar estilos Adjuntar hojas de estilos Aplicar estilos Eliminar estilos 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 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 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. 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. Define las técnicas para definir mapas de imágenes y barras de navegación En unas páginas diseñadas para este efecto, manipula las zonas interactivas. Diseña barras de navegación simples. Manipula las características de formato de un sitio web con el uso de Hojas de Estilo en Cascada. Inserta y configura objetos de sonido, video y animación dentro de una página web Página 7 de 13

8 Objetos inteligentes de Adobe Photoshop Creación de objetos inteligentes Actualización, cambio de tamaño y edición de un objeto inteligente. Estados de objetos inteligentes Crear una imagen de sustitución o Rollover Crear Mapas de imagen y Barras de navegación Los mapas de imagen Crear un mapa de imagen Insertar una zona interactiva rectangular, oval y poligonal. Crear una barra de navegación 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. Página 8 de 13

9 Añadir tablas y capas, que permitan incorporar información 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 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 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. 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. Diseña una página web a partir de los instrumentos de diseño de tablas y capas. 12 Página 9 de 13

10 Definir comportamientos que ejecuten una acción al realizar algún evento sobre un objeto. Comportamientos básicos Definición Insertar un comportamiento Mostrar-Ocultar capas Llamar JavaScript Comportamientos Avanzados Mensajes emergentes Texto de la Barra de Estado Carga Previa de Imágenes Abrir Ventana del Navegador Comprobar Navegador Comprobar Plug-ins Menús de Salto Menús Emergentes Otros comportamientos Busca en Internet definiciones y tipos de comportamientos. Busca en Internet sitios web que poseen algún tipo de comportamientos. En parejas crean un resumen del tema visto. Crear páginas Web donde se introducen diferentes tipos de comportamientos. Resuelve ejercicios planteados por el docente. Agrega comportamientos a objetos que se ejecuten en una página web. 3 Emplear Spy al contenido de páginas web Creación visual de páginas con uso de Spry Uso de widget de Spry Estilos de widget de Spry Utilización del widget de acordeón Utilización del widget de barra de menús Utilización del widget de panel que puede contraerse Utilización del widget de paneles en fichas Utilización del widget de grupo de opciones de objetos de inserción de datos Visualización de datos con Spry En parejas investiga sobre el uso de Spy en páginas Web. Crea un resumen de los diferentes efectos que se pueden realizar con el uso de la herramienta de spy. Crear páginas Web utilizando la herramienta de spy. Crea ejemplos de páginas Web utilizando la herramienta de spy 6 Página 10 de 13

11 Incorporar a páginas Web el uso de las herramientas de Marcos y Formularios. 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 Crear un formulario El formato de los formularios Los objetos de formulario Insertar objetos de formulario Objetos de un 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 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. 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. Construye un sitio web a partir de páginas diseñadas con la herramienta de marcos y con la elaboración de formularios que recoja múltiples tipos de datos y que puedan ser enviados a un correo electrónico. 9 Página 11 de 13

12 5. 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: 90% Psicomotora: 0% Área Socioafectiva La finalidad de esta área es obtener información de la conducta manifestada por la persona participante, 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 la ejecución del módulo. Para su valoración, se recomienda la observación de los siguientes aspectos: Aspecto a evaluar Descripción Tipo de escala Participación Motivación Responsabilidad Creatividad 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. Realiza diseños novedosos que mantienen un equilibrio entre los elementos fundamentales del diseño gráfico. 2%, valorado con las intervenciones que muestre en clase y su aporte al trabajo en equipo 2%, 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 2%, valorando la construcción y aplicación de diseños con contenidos imaginativos Página 12 de 13

13 Área Cognoscitiva Para la evaluación de esta área se propone la realización de la /s siguiente /s actividad /es de comprobación. A continuación se detallan: Actividad Nº Objetivos que abarca Nombre de la actividad er Examen Parcial Prueba Práctica 25% do Examen Parcial Prueba Práctica 20% Valor Porcentual Examen Parcial Prueba Teórica 15% Proyecto Final 30% Área Psicomotora Para la evaluación de esta área se propone la realización de la /s actividad /es de comprobación. A continuación se detallan: Actividad Nº Objetivos que abarca Nombre de la actividad Valor Porcentual 5.1 Prueba para aplazado La persona docente debe comunicar el último de clases, que se entrega el promedio final, y por escrito al participante, que tiene derecho a una prueba de aplazamiento con al menos 2 a 5 días hábiles, para la aplicación de la prueba. Solamente tendrá derecho a esta prueba si un participante obtiene en la calificación final un promedio igual o superior a 50%, pero inferior al 70%, puede aplicar a una sola prueba por aplazamiento para alcanzar la nota mínima de aprobación. La prueba de aplazamiento abarca el total de objetivos del módulo. Actividad Objetivos que Valor Nombre de la actividad Nº abarca Porcentual Prueba Teórica 20% Prueba Práctica 80% Total 100% La prueba práctica y teórica se realiza en la misma sesión. Para alcanzar la aprobación del módulo, el participante debe de obtener una nota igual o superior a 70%. La nota final obtenida en esta prueba es la que se consigna en el registro final de calificaciones. Página 13 de 13