TALLER DE DISEÑO WEB

TEMAS

Construir sitios Web informativos o promocionales mediante: Elementos de Diseño, Conocimiento avanzado de Internet, Elementos de Usabilidad, Animaciones Vectoriales (Macromedia Flash), Editor Gráfico (Macromedia Fireworks), Photoshop/GIMP, Animaciones, PHP, JavaScript, Bases de Datos y FTP.

 
GRADOS

La Electiva “Taller de Diseño Web” se realiza con estudiantes de los grados 10º y 11º.
Se lleva a cabo en el tiempo destinado para las Electivas que el INSA (http://www.insa-col.org/) ofrece a sus estudiantes durante el horario regular de clases los días miércoles y jueves [72].
 

OBJETIVO GENERAL

Profundizar en el conocimiento y utilizar las herramientas y conceptos de diseño Web aprendidas en la clase de Informática para generar sitios Web de calidad, informativos o promocionales. Además, ofrecer al estudiante la oportunidad de participar en un proyecto concreto de la vida real que le permita mejorar sus capacidades para trabajar en equipo (colaborativamente) y desarrollar habilidades tanto para aprender de manera independiente como para evaluar su propio trabajo y el de los demás.

OBJETIVOS ESPECIFICOS

Al finalizar el Taller, el estudiante estará en capacidad de:

• Entender qué es y para qué se construye un sitio Web
• Participar activamente en un proyecto del mundo real y realizar trabajos en equipo [73]
• Organizar adecuadamente la información suministrada para elaborar sitios Web
• Utilizar con fundamento, los principios básicos de diseño para elaborar propuestas que sean gráficamente coherentes y atractivas
• Elaborar propuestas gráficas que se ajusten a los principios fundamentales de manejo tanto del color como del espacio.
• Seleccionar y utilizar con idoneidad las herramientas informáticas apropiadas para diseñar sitios Web.
• Solucionar los problemas que puedan presentarse en el desarrollo del proyecto mediante acuerdos con clientes y compañeros.
• Investigar opciones de alojamiento (“hosting”) disponibles
• Publicar en un servidor de Internet el sitio Web construido.
• Hacer un portafolio personal de productos informáticos

REQUISITOS

Para poder realizar esta Electiva los estudiantes deben haber aprendido previamente (en años anteriores), en la clase de informática , a manejar las siguientes herramientas: Algoritmos y programación (5º); Internet (5º, 6º, 7º, 8°, 9°); Editor gráfico (7º, 8º, 10º, 11º); Elementos de diseño gráfico (8°, 10º); Uso de Bases de datos (9º); Editor de páginas Web (10º, 11º); Elementos de usabilidad (11º); Editor vectorial (11º) y Animación vectorial (11º).
Entre paréntesis se indican los grados escolares en los cuales los estudiantes de INSA aprenden estas herramientas. Consulte en este Currículo los contenidos correspondientes a cada una de ellas

DESCRIPCIÓN

En el INSA, entre los grados 6° y 9°, los estudiantes aprenden las herramientas informáticas fundamentales sin cuyo dominio no se debe graduar ningún alumno hoy en día. En los grados 10º y 11º se hace énfasis en el aprendizaje de herramientas para diseñar sitios Web. La presente Electiva, “Taller de Diseño Web”, profundiza este énfasis, ofreciendo como ya se dijo, la oportunidad de poner en práctica los conocimientos adquiridos en años anteriores en la clase de informática (TIC), mediante la realización de un proyecto concreto y retador: la elaboración de un sitio Web informativo o promocional cuyos clientes son empresas pequeñas o medianas de la región.

Para llevarlo a cabo, los estudiantes ponen en práctica funcionalidades avanzadas de las herramientas informáticas, especialmente, de las aprendidas en los grados 10º y 11º. En esta Electiva deben afinar los conocimientos adquiridos con el objeto de elaborar y publicar sitios Web de calidad, esto es con: diseño visual elaborado, código depurado, estructura estándar, imágenes y objetos optimizados y, por último, publicarlos en un servidor Web.

Se busca además, que el estudiante aprenda herramientas y conocimientos que pueda utilizar al graduarse para obtener recursos económicos o incluso, para crear su propia empresa [80]. En este último caso, los sitios Web elaborados en el Taller constituyen elementos importantes del portafolio personal de productos informáticos.

METODOLOGÍA

Al desarrollar esta Electiva en años anteriores, se hizo evidente que los estudiantes presentaban deficiencias serias en fundamentos tanto de diseño gráfico, como de estética. Esta situación dificultó que durante el año lectivo correspondiente se pudieran crear las páginas Web en el tiempo estipulado inicialmente y al final impidió que los estudiantes pudieran subirlas en el servidor Web del INSA. Además, incidió negativamente en el cumplimiento del tiempo establecido con los “clientes” pues la generación de la parte gráfica de las páginas resultó complicada para los estudiantes y lentificó todo el proceso.

En vista de lo anterior y, con miras a darle solución, se acordó dividir este proceso en dos etapas; cada una de ellas llevada a cabo durante un año lectivo. En la primera etapa, todos los estudiantes de la Electiva pertenecientes al grado 10° trabajan individualmente para aprender los fundamentos teóricos de manejo tanto del color como del espacio y luego se forman en la utilización de herramientas gráficas (Photoshop y/o GIMP) y editores vectoriales (FreeHand y/o Flash). A medida que los estudiantes avanzan en este proceso de aprendizaje, realizan una serie de talleres en los cuales el docente les solicita plasmar sus conocimientos en forma de propuestas gráficas, los orienta y retroalimenta para que las refinen. En esta etapa no se elaboran páginas Web; todo el tiempo se destina a los talleres en los que se aprenden los fundamentos teóricos y el manejo de estas herramientas.

En la segunda etapa (año lectivo siguiente) se conforman equipos entre los estudiantes de grado11º. Se pretende comprometerlos para que por su cuenta y con el grupo fortalezcan y profundicen sus conocimientos en las herramientas informáticas utilizadas.

Además, esta dinámica grupal ofrece al docente oportunidades para dar instrucción a los estudiantes sobre muchos aspectos relacionados con el trabajo en equipo y respecto al desarrollo de valores, que posteriormente les ayudarán en su vida laboral para relacionarse mejor con jefes, compañeros y subalternos.

En la segunda etapa de la Electiva “Taller de Diseño Web” se lleva a cabo en cuatro fases:

1. Aprestamiento.
La fase inicial de la segunda etapa consiste en localizar y comprometer empresas o microempresas de la región a las cuales se les elaborará el sitio Web promocional. El número de empresas (clientes) debe ser igual al número de equipos que participen en la Electiva. Para impulsar este proyecto entre los posibles clientes, resulta muy útil contar con una carpeta avalada por la institución educativa, que contenga como mínimo: cuál es el proyecto, su alcance y un cronograma detallado de actividades.

2. Planeación del sitio Web.
En esta fase, el cliente (empresa) suministra la información que considera pertinente y el equipo de estudiantes a los que el proyecto de esta se les asignó la evalúa y verifica. Utilizando esta información el equipo debe planear la estructura del sitio, elaborar una propuesta inicial y discutirla con el cliente. Para esto, se debe preparar un organigrama de la construcción del sitio y un cronograma de actividades que guíe la realización del proyecto. Luego, se hace un primer desarrollo basado en el esquema aprobado por el cliente. En esta etapa es necesario que el equipo recopile todo el material que va a utilizar (textos, gráficos, fotos, etc).

3. Diseño y prueba.
En esta tercera fase, el equipo se encarga de desarrollar una presentación visual más elaborada del esquema aceptado en la fase anterior, en la que se defina: los colores a utilizar, el esquema de las páginas, las secciones en las que se va a organizar o a publicar la información y las imágenes que van a acompañar cada sección. La definición del esquema de página incluye: la posición del cabezote, de los menús, de las barras de navegación y, la escogencia del logotipo y de los íconos que se van a utilizar. En caso de que exista, se debe respetar la imagen corporativa de la empresa.

4. Producción y despliegue.
Aprobada la anterior, se inicia la cuarta fase en la que se procede a codificar las páginas; a optimizar gráficos, fotos y logotipos y, a definir tamaño, colores, fondos, etc. Por último, se ensamblan todas las piezas para que el sitio Web quede listo para su lanzamiento.
Para terminar, se propone al cliente una solución para “alojar” el sitio que se adecue a los requisitos de este y a sus posibilidades económicas.

CONTENIDOS

ELEMENTOS DE DISEÑO

• Introducción
  • Entender qué es el diseño gráfico
  • Repasar brevemente la historia del diseño gráfico
  • Entender algunas tendencias actuales en diseño gráfico
  • Comprender el impacto del diseño gráfico en la sociedad actual
• Objetos
  • Entender qué es una agrupación por proximidad, semejanza, continuidad y simetría
  • Entender la separación de figura y fondo
  • Distinguir la percepción de imágenes a través del contorno
  • 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
  • Entender qué es el color desde el punto de vista del diseño
  • Comprender las sensaciones que produce el Color (cálidos, neutros, fríos)
  • Reconocer elementos de los colores como tono, valor, saturación e intensidad
  • Crear armonía utilizando gamas de colores y contrastes
  • Identificar colores primarios, secundarios y complementarios
  • Entender la síntesis aditiva y sustractiva del color
  • Entender la diferencia visual que tiene un mismo color impreso y visto en pantalla
• Percepción Visual
  • Reconocer el equilibrio en una imagen
  • Identificar la referencia horizontal en las imágenes
  • 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
  • Identificar el punto y la línea como elementos fundamentales de un gráfico
  • Entender la formación del contorno y las figuras que este conforma, ej. Circulo, cuadrado, etc.
  • Entender cómo la posición y la dirección de los elementos cambian la percepción de un gráfico
  • Uso del plano, textura, escala y dimensión en la composición gráfica
• Uso del Color
  • Entender las propiedades física y psicológicas del color
  • Comprender las clasificaciones del color, neutros, agrisados, policromos,
  • Conocer y utilizar el circulo cromático
  • Diferenciar e identificar conceptos tales como tono, brillo y saturación.
  • Entender la armonía cromática
  • Entender el uso de los contrastes como elemento fundamental de la armonía.
• La imagen
  • Comprender las diferencias entre escala, dimensión y tamaño
  • Reconocer el signo y el símbolo en la composición grafica
  • Usar adecuadamente la geometrización y la síntesis en la composición
  • Reconocer convenciones visuales (símbolos que representan parar, aceptar, imprimir, retroceder, etc)
  • Manejar texturas en objetos
  • Reconocer la diferencia entre imagen fotográfica e ilustraciones
  • Comprender la relación entre palabra e imagen
  • Reconocer diferentes modos de representación de imágenes (realista, abstracto, simbólico)
• Tipografía
  • Entender las características, tipos y funciones de la tipografía
  • Clasificar e identificar las fuentes tipográficas
  • Usar y distribuir adecuadamente los espacios
• Imagen corporativa (empresarial)
  • Crear logotipos e iconos adecuados para una empresa
  • Respetar los colores y las especificaciones técnicas de los logotipos
• Elementos de Diseño en la Web
  • Utilizar los “esquemas de página” adecuados para las páginas que se elaboran
  • 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

DEFINICIÓN DE SITIO WEB

• Estrategias
  • Identificar para qué se va a elaborar la página (enfoque)
  • Tener en cuenta qué produce o que servicios ofrece la empresa
  • Investigar en el mercado cuál son los competidores de la empresa
  • Determinar qué le interesa destacar o mostrar
  • Elaborar la estructura del sitio Web
  • Elaborar la primera propuesta de diseño
  • Realizar un diseño modular para facilitar el manejo de la información
  • Usar scripts o programas cortos para enriquecer la página
  • Determinar el o los lenguajes de programación a utilizar en el sitio Web
  • Determinar el tipo de servidor Web necesario para alojar el sitio
  • Planificar en que puntos del sitio deben ir programas que lo enriquezcan o mejoren su funcionalidad
  • Identificar las tareas necesarias para facilitar el trabajo en equipo
  • Incluir las tareas en un cronograma
  • Verificar constantemente que el cronograma se cumpla
  • Verificar constantemente con el cliente el diseño y los elementos del sitio

INTERNET

• Internet en el diseño Web
  • Localizar imágenes y utilizarlas adecuadamente
  • Dar los créditos correspondientes por las imágenes utilizadas
  • Identificar y acceder al código fuente de páginas Web
  • Comprender el funcionamiento y la estructura de una dirección de Internet
  • Identificar los principales navegadores de Internet y conocer las diferencias que existen entre ellos
  • Comprender la compatibilidad entre navegadores

EDITOR DE PÁGINAS WEB (DREAMWEAVER)

• Crear sitios y documentos Web
  • Planificar el sitio Web (organigrama del sitio)
  • Crear un sitio Web local
  • Eliminar un sitio Web local
  • Utilizar referencias absolutas y referencias relativas
  • Crear y guardar documentos en formato html
  • Editar un sitio Web local
  • Ver en el navegador una vista previa de los sitios Web creados
• Formato de texto
  • Utilizar encabezados de página
  • Aplicar estilos de fuente estándar
  • Crear estilos personalizados para estandarizar el tamaño, el color y el tipo de la fuente en todo el sitio Web.
• Formato de párrafo
  • Alinear y sangrar el texto
  • Generar líneas horizontales que sirvan como divisores
• Propiedades de la página
  • Establecer el título de la página
  • Definir los “meta-tags” (información de la página disponible para que la utilicen los buscadores de Internet)
  • Establecer el color página
  • Establecer los márgenes página
  • Establecer los estilos básicos (colores de texto y de enlaces)
• Hipervínculos (enlaces)
  • Crear enlaces a archivos del sitio Web (internos)
  • Crear enlaces a páginas externas al sitio Web
  • Crear marcadores (anclas) a puntos específicos en una página Web
  • Crear enlaces a direcciones de correo electrónico
  • Crear enlaces utilizando imágenes
• Tablas
  • Crear tablas y celdas en un sitio
  • Modificar la configuración de tablas y celdas (color, bordes, etc)
  • Introducir texto, imágenes y objetos en una celda
  • Crear y configurar enlaces (hipervínculos) externos e internos
  • Configurar el tamaño de tablas en porcentaje o número de píxeles
  • Editar tablas con “split” (dividir) y “merge” (unir)
  • Modificar el espacio entre celdas
  • Aplicar una imagen de fondo a una tabla o a una celda
  • Importar tablas desde un archivo de datos en formato CSV (texto separado por comas)
• Imágenes
  • Insertar imágenes
  • Editar imágenes
  • Insertar bordes a imágenes
  • Crear una imagen rollover (desplegable)
  • Adicionar un comportamiento (behavior) a una imagen
• CSS (hojas de estilo en cascada)
  • Entender qué son las hojas de estilo y su importancia para construir sitios Web
  • Crear hojas de estilo en cascada (CSS)
  • Configurar las propiedades de un estilo (fuente, párrafo, fondo, bloque, borde, listas, etc)
  • Importar hojas de estilo existentes
  • Redefinir una etiqueta html
  • Usar el selector CSS
  • Enlazar una hoja de estilo externa
• Comportamientos (behaviors)
  • Entender qué es un comportamiento (behavior)
  • Identificar los comportamientos básicos y qué hace cada uno (call javascript, goto URL, open browser window, play sound)
  • Insertar un comportamiento a un objeto (texto, imagen, animación, tabla, etc)
  • Configurar comportamientos
• Formularios
  • Crear formularios
  • Insertar diferentes elementos de formularios, cuadros, listas, botones
  • Procesar la información de los formularios

USABILIDAD

• Estructura
  • Entender los diferentes tipos de estructuras de información que debe tener una página Web (orden, jerarquías y navegación)
  • Establecer una jerarquía visual clara (resaltar lo más importante del sitio Web)
• Diseño de página
  • Entender la importancia de los elementos presentes en una página (tamaño, esquemas, estilos, colores y menús)
  • Seleccionar los textos adecuados para los menús, de forma que orienten al usuario
  • Evidenciar muy claramente los elementos sobre los cuales el usuario puede hacer clic
  • Facilitar al usuario la identificación de la sección del sitio en la cual se encuentra en un momento dado
  • Dar consistencia a la estructura del sitio Web (colores, tamaños, fuentes tipográficas, íconos, logotipos)
• Tipografía
  • 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
  • Tener en cuenta el tamaño (en bytes) de las imágenes que hacen parte de una página Web
  • Comprender la importancia de la composición de las imágenes en una página Web para evitar la saturación visual
  • 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)

EDITOR VECTORIAL (FIREWORKS)

• Crear nuevo documento
  • Definir el tamaño y la resolución de una imagen
  • Definir el espacio de trabajo (Canvas)
• Objetos vectoriales
  • Crear objetos vectoriales
  • Mover, copiar, clonar y borrar objetos vectoriales
  • Transformar y distorsionar objetos vectoriales
  • Dibujar formas
  • Redimensionar y modificar puntos vectoriales
• Mapas de Bits
  • Crear una imagen en formato mapa de bits
  • Importar una imagen en formato mapa de bits
  • Seleccionar áreas de píxeles
  • Copiar, cortar, borrar área de píxeles
  • Pintar en modo de mapa de bits
• Textos
  • Introducir y editar textos en una imagen
  • Utilizar herramientas de trazo, relleno, efectos y estilos de textos
• Manipulación de Objetos
  • Utilizar herramientas para aplicar colores, trazos y rellenos
  • Usar efectos y filtros (inner bevel, drop shadow, etc)
• Capas y Mascaras
  • Adicionar capas (layers)
  • Crear mascaras (masking) y transparencias
• Botones y barras de navegación
  • Crear botones y barras de navegación
  • Insertar botones rollover
• ‘Hotspots’ y ‘Slices’
  • Crear ‘Hotspots’ en mapas de bits
  • Adicionar URL a los ‘Hotspot’
  • Adicionar comportamientos (Behaviors) a los “Hotspots”
  • Crear y Optimizar “Slices”
  • Exportar adecuadamente una imagen con “Hotspot” y “Slices”
• Exportar y optimizar imágenes
  • Optimizar el espacio de trabajo
  • Seleccionar el formato de archivo más adecuado para utilizarlo en una página Web
  • Optimizar los formatos Gif y JPG
  • Asignar trasparencias a las imágenes exportadas
  • Exportar gráficos con Html incluido
  • Exportar “Slices” y “Hotspots”

PHOTOSHOP / GIMP

• Canales
  • Entender qué son los canales en Photoshop
  • Utilizar la máscara rápida
  • Utilizar los canales Alpha
• Filtros de imagen
  • Utilizar los filtros predeterminados de Photoshop
  • Insertar filtros (Plug-ins)
  • Crear efectos a partir de la combinación de filtros

ANIMACIONES (FLASH)

• Primeros pasos
  • Abrir y cerrar la aplicación
  • Crear una animación nueva
  • Guardar una animación en una unidad de almacenamiento
  • Utilizar las funciones de ayuda que ofrece el software
• Manipular objetos
  • Seleccionar objetos
  • Utilizar transformaciones (desplazamiento, rotación, escala, volteado, suavizado)
  • Convertir contornos en rellenos
  • Expandir rellenos
  • Suavizar los bordes de un relleno
  • Agrupar objetos
  • Separar objetos
  • Alinear objetos
• Símbolos
  • Entender qué son los símbolos en “Flash” (objeto con una función específica)
  • Crear clips (objeto con una animación interna)
  • Crear botones (objeto con cuatro instancias predefinidas: normal, cuando se pasa el ratón sobre el objeto, cuando le hacen clic, cuando se suelta el clic)
  • Crear gráficos (convierte a mapa de bits un objeto vectorial)
  • Editar símbolos
  • Exportar símbolos a la biblioteca de recursos
• Películas
  • Entender la diferencia entre cuadros, clips, escenas y películas
  • Establecer número de cuadros por segundo, tamaño y fondo de la película
  • Utilizar cuadrículas
  • Utilizar guías
• Herramientas de dibujo
  • Trazar líneas
  • Utilizar la herramienta de pluma
  • Utilizar las herramientas de dibujo, contornos y rellenos
  • Dibujar rectángulos
  • Dibujar óvalos
• Colores
  • Entender qué son los colores “Web-safe”
  • Construir una paleta de colores personalizados “Web-safe”
  • Utilizar números hexadecimales para copiar colores
  • Utilizar la opción de transparencia y sólido
  • Utilizar la opción degradado lineal y degradado radial
  • Utilizar la herramienta bote de tinta
  • Utilizar la herramienta cubo de pintura
  • Utilizar la herramienta cuentagotas
• Capas
  • Entender los diferentes tipos de capas (layers)
  • Utilizar las capas normal, activa y carpeta
  • Utilizar máscaras (mask)
  • Utilizar las capas guía y guía de movimiento
  • Utilizar los botones de control de capas
• Texto
  • Crear un bloque de texto
  • Utilizar las opciones de configuración básica del texto (tipo de fuente, alineación y formato)
  • Utilizar las opciones de configuración avanzada del texto (texto estático y texto dinámico)
  • Convertir texto en un objeto vectorial
• Símbolos e instancias
  • Utilizar la Biblioteca de símbolos
  • Utilizar diferentes tipos de símbolos (gráfico, botón, clip de película)
  • Entender las características de una instancia
  • Utilizar instancias
• Elementos externos
  • Insertar imágenes, sonidos y videos
• Animaciones
  • Entender qué es una animación
  • Comprender el uso de la línea de tiempo
  • Entender cómo se trabaja con fotogramas
  • Entender el papel que cumplen las escenas
  • Ejecutar una animación en modo fotograma a fotograma
  • Utilizar animaciones con interpolaciones
  • Diferenciar entre interpolación de forma e interpolación de movimiento
• Lenguaje ActionScript
  • Comprender las ventajas que ofrece la programación en las animaciones
  • Conocer y entender los comandos básicos del código ActionScript
  • Utilizar el control de la línea de tiempo y escenas con ActionScript
• Distribución y publicación de películas
  • Utilizar las opciones para exportar un archivo .swf
  • Exportar como imagen
  • Comprender y utilizar correctamente los parámetros para exportar

 PHP

• Primeros pasos
  • Comprender los principales conceptos de programación
  • Entender la sintaxis básica de PHP
  • Conocer y utilizar variables en PHP
• Operadores
  • Conocer los operadores aritméticos, de comparación y lógicos en PHP
• Sentencias
  • Entender el uso de sentencias condicionales, bucles, sentencias de salida y cadenas
• Funciones y librerías
  • Conocer y utilizar las funciones y librerías comunes en PHP
• Procesar formularios
  • Entender qué es un formulario de Internet y cómo funciona
  • Enviar y recibir datos de un formulario
  • Entender el uso de los métodos GET y POST
  • Enviar los datos de un formulario por correo electrónico
• Bases de Datos (BD)
  • Crear una base de datos
  • Acceder a los datos (consultas)
  • Insertar y borrar registros

 JAVASCRIPT

• Primeros pasos
  • Entender en qué casos es apropiado utilizar el lenguaje JavaScript
  • Utilizar la etiqueta SCRIPT
  • Entender la sintaxis básica de JavaScript
  • Utilizar sentencias y bloques de código
  • Utilizar archivos externos de código JavaScript
  • Entender la ubicación de los bloques de código

BASES DE DATOS

• Primeros pasos
  • Entender la Configuración básica
  • Entender como crear tablas eficientemente
  • Entender las diferencias entre tipos de campo (var, char, text, date, int)
  • Insertar campos en una tabla
  • Exportar e importar campos de una tabla
  • Borrar campos en una tabla
  • Convertir acciones y consultas a SQL
  • Consultar datos

ACTIVIDADES

Titulo: Realizar un logotipo para el Taller de Diseño Web

Herramienta: Editor Grafico
Descripción: Esta actividad pretende que los estudiantes elaboren un logotipo que identifique la Electiva “Taller de Diseño Web”. Para ello, deben utilizar los principios de diseño gráfico vistos en clase. El logotipo debe cumplir con los requisitos solicitados por el profesor: manejo adecuado del color, forma, composición, ubicación espacial y tipografía. El mejor logotipo será utilizado como emblema de la Electiva durante el año lectivo y se estampará en camisetas que los estudiantes utilizarán en las clases.

LOGROS

http://www.eduteka.org/estandaresestux.php3

• Operaciones y conceptos básicos
• Problemas sociales, éticos y humanos
• Herramientas de las TIC para la productividad
• Herramientas de las TIC para la comunicación
• Herramientas de las TIC para la investigación
• Herramientas de las TIC para la solución de problemas y la toma de decisiones

Al finalizar el Taller de Diseño Web el estudiante debe demostrar los siguientes desempeños:

• Mediante la creación de una composición gráfica, demuestra que utiliza apropiadamente los criterios básicos para combinar colores y distribuir espacios. [A, D]
• Mediante la creación de una composición gráfica, utiliza adecuadamente los diferentes elementos que la conforman. [A, D]
• Mediante la creación de una composición gráfica, demuestra que utiliza apropiadamente conceptos básicos de diseño grafico como contraste, brillo, tono, gama, etc. [A, D]
• Con los trabajos realizados en grupo durante el desarrollo del Taller, demuestra que trabaja armónicamente en equipo, intercambia conocimientos y pone a disposición del grupo las habilidades que posee. [B]
• Con los trabajos realizados en grupo durante el Taller, demuestra que respeta los gustos y opiniones de sus compañeros(as) y propone mejoras al trabajo de los demás. [B]
• En la realización de sus diseños, utiliza eficazmente Internet para mejorarlos y para llevar a cabo investigaciones. [D, E] 
• Mediante el diseño de un sitio Web, demuestra que ha tenido en cuenta principios de usabilidad. [C, D, F]
• Con la creación de elementos que componen o enriquecen un sitio Web, demuestra que utiliza apropiadamente editores gráficos y vectoriales. [A, D] 
• Mediante la creación de botones, banners, imágenes y elementos gráficos estéticos y agradables para un sitio Web, demuestra que utiliza los elementos de diseño gráfico aprendidos. [A, D]
• Retoca y optimiza las imágenes que componen un sitio Web. [A, D]
• Mediante la composición de imágenes, demuestra que utiliza apropiadamente las herramientas avanzadas de los programas de edición gráfica. [A, D]
• Con la creación de animaciones que enriquezcan un sitio Web, demuestra que utiliza apropiadamente las herramientas sin saturar ni complicar la carga de la página en Internet. [A, D]
• Diseña sitios Web cuyas páginas cargan en un tiempo aceptable para una conexión por línea conmutada. [A, D]
• Diseña sitios Web teniendo en cuenta principios de seguridad en la Red. [A]
• Mediante la transferencia de páginas a un servidor de Internet, demuestra que utiliza apropiadamente un programa de FTP. [A]
• Explica en sus propias palabras al menos cinco diferencias entre un diseñador y un desarrollador de sitios Web. [A]
• Mediante la creación de programas sencillos que mejoren la funcionalidad de una página Web, demuestra que utiliza los comandos básicos de un lenguaje de programación como PHP. [A]
• Mediante la elaboración de “scripts” que faciliten la navegación en una página Web, demuestra que utiliza correctamente los comandos básicos de Javascript. [A] 
• Explica en sus propias palabras al menos cinco ventajas que ofrecen las bases de datos para la creación de sitios Web. [A]
• Mediante la incorporación de una base de datos en la elaboración de un sitio Web, demuestra que utiliza los elementos básicos de la base de datos. [A]

EJEMPLOS

Los siguientes son algunos ejemplos de páginas Web realizadas en años anteriores por estudiantes participantes en esta Electiva.

Librería la Hora del Cuento

http://www.insa-col.org/sites/url/Horacuento
Año Lectivo: 2004 – 2005
Estudiantes: David Portilla S.; Juan José Vivas; Karen Giraldo; Diana Patricia Villegas.
Descripción: La Librería la Hora del Cuento es la vitrina infantil y juvenil, más completa y especializada de Bogotá. Es punto de referencia obligado para educadores, padres y madres a los que ofrece una selección de más de 6.000 títulos de literatura. Dentro de la página estos se encuentran catalogados por edades, títulos y autores. El material que ofrece está dirigido especialmente a niños entre 0 y 12 años y se ha puesto especial cuidado en atender las necesidades y nivel de comprensión de estos.
Página diseñada y elaborada por estudiantes del Taller de Diseño Web del INSA.

Mc Vaugh - Frutas Exóticas

http://www.insa-col.org/sites/url/mv
Año Lectivo: 2003 – 2004
Estudiantes: Camilo Cortés, Juan José Benítez, Rodrigo Agudelo, David Portilla.
Descripción: Empresa que elabora productos de óptima calidad a base de frutas exóticas nativas de la amazonía colombiana. Frutas cultivadas orgánicamente, 100% naturales, sin preservativos, ni sabores artificiales.
Página Web creada en el Taller de Diseño Web del INSA por la compañía Access Net (http://www.insa-col.org/sites/url/accessnet).

PINURAS - Juguetes didácticos en Madera

http://www.insa-col.org/sites/url/Pinuras
Año Lectivo: 2004 - 2005
Estudiantes: Diana Méndez y Lina Marcela Márquez.
Descripción: PINURAS, empresa Colombiana radicada en Cali, fabrica diversos juguetes didácticos para niños entre 1 y 10 años elaborados en madera de pino. En esta página encontrará el catálogo de productos clasificados por categorías: juguetes, ajedrez, encajables, rompecabezas, teatritos, etc. Página diseñada y elaborada por estudiantes del Taller de Diseño Web del INSA.

Aves de Cali

http://www.eduteka.org/aves/
Año Lectivo: 2005 – 2006
Estudiantes: Oscar Plaza, Lina Márquez, Karen Giraldo, Camilo Rogeles.
Descripción: Sitio Web creado para la clasificación taxonómica de aves del sur de Cali – Colombia.

Prontarepa

http://www.insa-col.org/sites/url/PA/
Año Lectivo: 2005 – 2006
Estudiantes: Juan Manuel Andrade, Jenny Ruiz, Stephany Mina.
Descripción: Página Web diseñada para una empresa dedicada a la elaboración de productos a base de Maíz.

Jardín de la Meditación

http://www.insa-col.org/sites/url/jardin
Año Lectivo: 2003 – 2004
Estudiantes: Luis Gómez, Carlos Vanegas, Jenniffer Osorio.
Descripción: El Jardín de la Meditación es un proyecto ambiental que posibilita la manifestación de sentimientos de condolencia mediante la siembra de árboles de especies catalogadas en peligro de extinción. Ofrece espacios de reflexión a los dolientes y rinde homenaje permanente a la memoria de las personas fallecidas.
Página creada en el Taller de Diseño Web del INSA por la compañía EasyWeb (http://www.insa-col.org/sites/url/easyweb/).

Industrias de Balanzas Cali - La Monarca -

http://www.insa-col.org/sites/url/BalanzasCali
Año Lectivo: 2004 - 2005
Estudiantes: Rodrigo Agudelo y Jenny Ortiz.
Descripción: Empresa Colombiana, radicada en Cali, dedicada a fabricar y comercializar instrumentos de calidad para pesaje y medición. Atiende el mercado nacional y exporta principalmente a países de Centroamérica. Página diseñada y elaborada por estudiantes del Taller de Diseño Web del INSA.

Naranjo Corp

http://www.insa-col.org/sites/url/naranjo
Año Lectivo: 2003 – 2004
Estudiantes: Jackeline Mejia, Juan José Vivas, Julio Angulo.
Descripción: Naranjo.corp ofrece a personas y organizaciones soluciones integrales para proyectar de manera atractiva e inteligente ideas, identidades o imágenes sobre prendas de vestir. Los diseños gráficos se confeccionan, bordan o estampan sobre la prenda.
Página creada en el Taller de Diseño Web del INSA por la compañía Alternativas (http://www.insa-col.org/sites/url/alternativas/).

Oxigeno Consultores

http://www.insa-col.org/sites/url/oxygeno
Año Lectivo: 2003 – 2004
Estudiantes: Héctor Vivaz, Diana Méndez, Jorge Herrera, Hernando Nieto.
Descripción: Oxígeno es una compañía creada con el fin de ofrecer Consultoría en todas las áreas funcionales de las empresas incluyendo la tecnológica. Además, comercializa hardware, software aplicativo y administrativo, y desarrolla software a la medida de la necesidad del cliente.
Página creada en el taller de Diseño Web del INSA por la compañía DesigNet (http://www.insa-col.org/sites/url/DesignNet/).

Imcor - Cartón Corrugado

http://www.insa-col.org/sites/url/Imcor/imcor.html
Año Lectivo: 2005 – 2006
Estudiantes: Juan Carlos Hurtado, Brian Murcia Correa.
Descripción: Página Web diseñada para una empresa caleña dedicada a la producción de papel corrugado y producción de empaques.