PROGRAMA
0. INTRODUCCION A LA WEB 2.0
1. INTRODUCCION A LAS TIC´S
2. QUE ES UN SITIO WEB
3. ELEMENTOS DEL SITIO WEB
ELEMENTOS BASICOS DE DISEÑO PRESENTACION PROF JAVIER REINA
· Introducción CONSULTA PARA LOS ESTUDIANTES
o Repasar brevemente la historia del diseño gráfico
o Entender algunas tendencias actuales en diseño gráfico
o Comprender el impacto del diseño gráfico en la sociedad actual
· Objetos
o Entender qué es una agrupación por proximidad, semejanza, continuidad y simetría
o Entender la separación de figura y fondo
o Distinguir la percepción de imágenes a través del contorno
o Comprender las implicaciones que tiene para el diseño gráfico la pregnancia (tendencia de la mente humana a rellenar vacíos, para completar un objeto o el significado que tiene un elemento de una imagen, para representar una imagen completa)
· Teoría del color
o Entender qué es el color desde el punto de vista del diseño
o Comprender las sensaciones que produce el Color (cálidos, neutros, fríos)
o Reconocer elementos de los colores como tono, valor, saturación e intensidad
o Crear armonía utilizando gamas de colores y contrastes
o Identificar colores primarios, secundarios y complementarios
o Entender la síntesis aditiva y sustractiva del color
o Entender la diferencia visual que tiene un mismo color impreso y visto en pantalla
· Percepción Visual
o Reconocer el equilibrio en una imagen
o Identificar la referencia horizontal en las imágenes
o Reconocer elementos de percepción del objeto y su entorno (tensión, simetría y asimetría, contorno, tamaño, tendencias, punto, línea, curva y ángulo)
· Elementos Básicos del gráfico
o Identificar el punto y la línea como elementos fundamentales de un gráfico
o Entender la formación del contorno y las figuras que este conforma, ej. Circulo, cuadrado, etc.
o Entender cómo la posición y la dirección de los elementos cambian la percepción de un gráfico
o Uso del plano, textura, escala y dimensión en la composición gráfica
· Uso del Color
o Entender las propiedades física y psicológicas del color
o Comprender las clasificaciones del color, neutros, agrisados, policromos,
o Conocer y utilizar el circulo cromático CONSULTA
o Diferenciar e identificar conceptos tales como tono, brillo y saturación.
o Entender la armonía cromática
o Entender el uso de los contrastes como elemento fundamental de la armonía.
· La imagen
o Comprender las diferencias entre escala, dimensión y tamaño
o Reconocer el signo y el símbolo en la composición grafica
o Usar adecuadamente la geometrización y la síntesis en la composición
o Reconocer convenciones visuales (símbolos que representan parar, aceptar, imprimir, retroceder, etc)
o Manejar texturas en objetos
o Reconocer la diferencia entre imagen fotográfica e ilustraciones
o Comprender la relación entre palabra e imagen
o Reconocer diferentes modos de representación de imágenes (realista, abstracto, simbólico)
· Tipografía
o Entender las características, tipos y funciones de la tipografía
o Clasificar e identificar las fuentes tipográficas
o Usar y distribuir adecuadamente los espacios
· Imagen corporativa (empresarial)
o Crear logotipos e iconos adecuados para una empresa
o Respetar los colores y las especificaciones técnicas de los logotipos
4. PLANEACION Y ANALISIS DEL SITIO WEB
· Estrategias
o Identificar para qué se va a elaborar la página (enfoque)
o Tener en cuenta qué produce o que servicios ofrece la empresa
o Investigar en el mercado cuál son los competidores de la empresa
o Determinar qué le interesa destacar o mostrar
o Elaborar la estructura del sitio Web
o Elaborar la primera propuesta de diseño
o Realizar un diseño modular para facilitar el manejo de la información
o Planificar en que puntos del sitio deben ir programas que lo enriquezcan o mejoren su funcionalidad
o Identificar las tareas necesarias para facilitar el trabajo en equipo
o Incluir las tareas en un cronograma
o Verificar constantemente que el cronograma se cumpla
o Verificar constantemente con el cliente el diseño y los elementos del sitio
o Planificar el sitio Web (organigrama del sitio)
5. DISEÑO Y CREACION DEL SITIO WEB II PERIODO
· ESTRUCTURA
o Entender los diferentes tipos de estructuras de información que debe tener una página Web (orden, jerarquías y navegación)
o Establecer una jerarquía visual clara (resaltar lo más importante del sitio Web)
o Identificar y acceder al código fuente de páginas Web
o Identificar los principales navegadores de Internet y conocer las diferencias que existen entre ellos
o Comprender la compatibilidad entre navegadores
· DISEÑO DE PAGINA
Elementos de Diseño en la Web
- Utilizar los “esquemas de página” adecuados para las páginas que se elabora
- Dar a las imágenes el tamaño y la resolución adecuados
- Usar animaciones en una página Web con el formato adecuado y sin saturar la página
- Comprender la importancia del orden visual en una página Web
o Entender la importancia de los elementos presentes en una página (tamaño, esquemas, estilos, colores y menús)
o Seleccionar los textos adecuados para los menús, de forma que orienten al usuario
o Evidenciar muy claramente los elementos sobre los cuales el usuario puede hacer clic
o Facilitar al usuario la identificación de la sección del sitio en la cual se encuentra en un momento dado
o Dar consistencia a la estructura del sitio Web (colores, tamaños, fuentes tipográficas, íconos, logotipos)
· Tipografía
o Entender la importancia de la legibilidad, el uso de los colores y el tamaño de fuentes que componen una página Web
· Gráficos
o Tener en cuenta el tamaño (en bytes) de las imágenes que hacen parte de una página Web
o Comprender la importancia de la composición de las imágenes en una página Web para evitar la saturación visual
o Comprender la importancia de optimizar las imágenes de una página Web configurando su formato gráfico de la manera más adecuada (imagen en formato jpg con 80% de resolución; imagen en formato gif con 64 colores en lugar de 256 colores)
· Crear nuevo documento
o Definir el tamaño y la resolución de una imagen
o Definir el espacio de trabajo
· Textos
o Introducir y editar textos en una imagen
o Utilizar herramientas de trazo, relleno, efectos y estilos de textos
· Propiedades de la página
o Establecer el título de la página
o Definir los “meta-tags” (información de la página disponible para que la utilicen los buscadores de Internet)
o Establecer el color página
o Establecer los márgenes página
o Establecer los estilos básicos (colores de texto y de enlaces)
Herramientas de dibujo
o Trazar líneas
o Utilizar la herramienta de pluma
o Utilizar las herramientas de dibujo, contornos y rellenos
o Dibujar rectángulos
o Dibujar óvalos
Botones y barras de navegación
o Crear botones y barras de navegación
o Insertar botones rollover
· Exportar y optimizar imágenes
o Optimizar el espacio de trabajo
o Seleccionar el formato de archivo más adecuado para utilizarlo en una página Web
o Optimizar los formatos Gif y JPG
o Asignar trasparencias a las imágenes exportadas
o Exportar gráficos con Html incluido
o Exportar “Slices” y “Hotspots”
o Crear una animación nueva
o Guardar una animación en una unidad de almacenamiento
· Formato de texto
o Utilizar encabezados de página
o Aplicar estilos de fuente estándar
o Crear estilos personalizados para estandarizar el tamaño, el color y el tipo de la fuente en todo el sitio Web.
o Configurar las propiedades de un estilo (fuente, párrafo, fondo, bloque, borde, listas, etc)
· Tablas
o Crear tablas y celdas en un sitio
o Modificar la configuración de tablas y celdas (color, bordes, etc)
o Introducir texto, imágenes y objetos en una celda
o Crear y configurar enlaces (hipervínculos) externos e internos
o Configurar el tamaño de tablas en porcentaje o número de píxeles
o Editar tablas con “split” (dividir) y “merge” (unir)
o Modificar el espacio entre celdas
o Aplicar una imagen de fondo a una tabla o a una celda
o Importar tablas desde un archivo de datos en formato CSV (texto separado por comas)
· Imágenes
o Insertar imágenes
o Editar imágenes
o Insertar bordes a imágenes
o Localizar imágenes y utilizarlas adecuadamente
o Dar los créditos correspondientes por las imágenes utilizadas
· Formularios
o Crear formularios
o Insertar diferentes elementos de formularios, cuadros, listas, botones
o Procesar la información de los formularios
Hipervínculos (enlaces)
o Crear enlaces a archivos del sitio Web (internos)
o Crear enlaces a páginas externas al sitio Web
o Crear marcadores (anclas) a puntos específicos en una página Web
o Crear enlaces a direcciones de correo electrónico
o Crear enlaces utilizando imágenes
Películas MOVIE MAKER
o Entender la diferencia entre cuadros, clips, escenas y películas
o Establecer número de cuadros por segundo, tamaño y fondo de la película
o Utilizar cuadrículas
o Utilizar guías
· Animaciones FLASH
o Entender qué es una animación
o Comprender el uso de la línea de tiempo
o Entender cómo se trabaja con fotogramas
o Entender el papel que cumplen las escenas
o Ejecutar una animación en modo fotograma a fotograma
o Utilizar animaciones con interpolaciones
o Diferenciar entre interpolación de forma e interpolación de movimiento
o Utilizar las opciones para exportar un archivo .swf
o Exportar como imagen
o Comprender y utilizar correctamente los parámetros para exportar
DESARROLLAR CON SU RESPECTIVA DOCUMENTACION PAQUETES EDUCATIVOS DE DIFERENTES AREAS PARA LOS GRADOS 6, 7, 8 Y 9