|  Historia de Megasoft ||  Material didáctico y parciales |  Links de interés educativo |  Pági na principal de Megasoft  |
_________________________________________________________________________________________________________________

DISEÑO Y ANIMACIÓN WEB
Certificación: Diploma de Diseño y Animación Web
Requisitos de ingreso: Conocimientos de windows y tercer año de liceo o similar aprobado, o en curso

F o r m u l a r i o   d e   p r e -  i n s c r i p c i ó n

Nota:
En todos los cursos y carreras que se dictan en esta Institución, están incluidos en el precio: escolaridad, certificados, diplomas, matrícula, derecho de examen.

El Diseñador Web es:

Un técnico capáz de diseñar y animar un sitio Web de modo profesional. El diseño y animación web ha sido implementado como herramienta de difusión y publicidad de productos o actividad por parte del sector empresarial, comercial y particular. 

Diseño web aplicado

El diseño de páginas web trata básicamente de realizar un documento con información hiperenlazado con otros documentos y asignarle una presentación para diferentes dispositivos de salida (en una pantalla de computadora, en papel, en un teléfono móvil, etc..

Estos documentos o páginas web pueden ser creadas en:
* Creando archivos de texto en Html. 

* Utilizando un programa de creación de páginas, ej: Adobe Dreamweaver, entre otros.

* Utilizando lenguajes de programación para generar la página web, ej: Php, entre otros.

Para el diseño de páginas web debemos tener en cuenta dos etapas:

Primera etapa: en esta etapa se trabaja distribuyendo el texto, los gráficos, los vínculos a otros documentos y objetos multimedia que se consideren pertinentes. Es importante que antes de trabajar sobre el computador se realice un prediseño sobre el papel, esto nos ayudará a formar una idea clara del diseño a realizar.

Segunda etapa: una vez que se tiene este prediseño, se pasa a 'escribir' la página web. Para esto, y fundamentalmente para manejar los vínculos entre documentos, se creó el lenguaje de marcación de hipertexto Html. El Htmal consta de una serie de elementos que estructuran el texto y son presentados en forma de hipertexto por agente de usuario o navegadores. Esto se puede hacer con un simple editor de texto (debe guardarse como texto plano, sin ningún tipo de formato y con extensión .html o .htm). Aprender Html es relativamente fácil, así que es sencillo crear páginas web de este modo. Esta era la única manera de generarlas hasta que aparecieron algunos editores visuales de HTML, como Microsoft ProntPage y Adobe Dreamweaver. Con estas herramientas no es necesario aprender Html (aunque sí aconsejable), con lo cual el desarrollador se concentra en lo más importante, el diseño del documento.

Orientación:
Orientado a formar técnico en el diseño y animación de sitios Web.

Metodología

Cada alumno deberá dedicar un promedio de 6 horas semanales de estudio.

E V A L U A C I O N E S

Para quienes hacen el curso desde Uruguay
A) Rendir los parciales en forma online y concurrir una única vez al instituto central en Montevideo para rendir el examen final.  

B) Concurrir al instituto central en Montevideo para rendir los parciales de cada módulo y de aprobarlos exonerará el examen final.

Para quienes hacen el curso desde el exterior

Rendir los parciales y realizar el examen on-line, utilizando Aula Virtual, (esta modalidad permite la comunicación, con audio y video bidireccional, vía internet, el estudiante ve y oye al docente, que a su vez ve y oye al estudiante; ambos pueden dialogar e interactuar de igual manera a la de una clase presencial).

Certificaciones
Una vez aprobado el curso, la certificación le llegará a través del medio (courrier), que usted elija.

• Temario a desarrollar 

INTRODUCCIÓN:

Que es lo que hay que tener en cuenta a la hora de realizar un sitio. 

A quién está dirigida. Estructura. Navegadores. Resolución. Diferentes software que nos posibilitan diseñar y publicar las páginas. Descripción de los innumerables paquetes de software que existen para el diseño y programación de sitios Web. Comparación entre los diferentes software, sus características y las funcionalidad de cada uno de ellos.

LENGUAJE HTML

HTML es un lenguaje que hace posible presentar información (por ejemplo, investigaciones cientíticas) en Internet. Lo que se ve al visualizar una página en Internet, es la interpretación que hace el navegador del código HTML. Para ver el código HTML de una página sólo se tiene que hacer click en la opción "Ver" de la barra de menús y elegir "Código fuente" (en Internet Explorer).

Si se quiere crear sitios web, no hay otra solución que aprender HTML. Incluso si se usa un programa como Dreamweaver, por ejemplo, para la creación de sitios web, tener conocimientos básicos de HTML hace más más fácil y sitios web mucho mejores. HTML es la abreviatura de "HyperText Mark-up Language", es decir, "Lenguaje de marcado hipertextual".
   * Elementos básicos de Html

    * Sintaxis del lenguaje

    * Estructura de un documento Html

    * Etiquetas básicas

    * Atributos 

    * Propiedad y valores

    * Formato de documentos Html 

    * Párrafos

    * Alineación

    * Inserción de imágenes

    * Enlaces y vínculos

    * Diseño de tablas, marcos

    * Hojas de estilo

    * Propiedades y valores

    * Definición y tipos de estilos

    * Concepto de eventos, 

    * Cambio de propiedades, 

    * Formularios, elementos, 

    * Atributos y controles, 

    * Validación de campos de un formulario.

ADOBE DREAMWEAVER

Dreamweaver es la herramienta de diseño de páginas web más avanzada, tal como se ha afirmado en muchos medios. Aunque sea un experto programador de HTML el usuario que lo maneje, siempre se encontrarán en este programa razones para utilizarlo, sobretodo en lo que a productividad se refiere. Cumple perfectamente el objetivo de diseñar páginas con aspecto profesional, y soporta gran cantidad de tecnologías, además muy fáciles de usar:

* Hojas de estilo y capas

* Javascript para crear efectos e interactividades

* Inserción de archivos multimedia.

Además es un programa que se puede actualizar con componentes, que fabrica tanto Macromedia como otras compañias, para realizar otras acciones más avanzadas.

En resumen, el programa es realmente satisfatorio, incluso el código generado es de buena calidad. La unica pega consiste en que al ser tan avanzado, puede resultar un poco difícil su manejo para personas menos experimentadas en el diseño de webs.

Dreamweaver ha evolucionado mucho en su versión 4, que incluye soporte para la creación de páginas dinámicas de servidor en ASP, con acceso a bases de datos (versión Ultradev) y una mayor integración con otras herramientas de Macromedia como Fireworks

Temario a desarrollar:
    Descripción de la interfase

    Ventana de documento

    Panel de activos

    Barra de estado

Paleta de objetos: 

    -objetos caracteres 

    -objetos comunes 
   -objetos para formularios 

    -objetos para marcos

    -objetos head 
    -objetos invisibles 

    -objetos  especiales. 
El lanzador

    -inspector de propiedades

    -paleta historia

    -paleta de referencias
Ventana documento

    -ventana sitio

    -crear y guardar páginas
Texto con el inspector de propiedades

    -estilos de párrafos

    -fuentes

    -tamaños relativos

    -color

    -alineación

    -sangrías

    -listas aplicar estilos Html

    -reglas horizontales

    -espacios indivisibles y saltos de línea

    -revisión de ortografía

Insertar

    -añadir

    -mover y copiar imágenes

    -bordes

    -alineación

    -espaciado

    -uso de sustitutos de imágenes

    -imagen de fondo
Creación de tablas

    -alineación

    -elementos

    -colores

    -bordes e imágenes de fondo

    -alto y ancho

    -extensión de las celdas

    -cambios en las tablas

    -dibujar tablas y celdas manualmente

    -formatos preestablecidos

    -datos tabulares

    -ordenar datos de tablas
Vincular las páginas

    -insertar una URL

    -puntos de fijación con nombres

    -vínculos mailo

    -mapas de imagen

    -insertar texto Flash

    -insertar botón Flash

    -verificador de vínculos
Inspector de marcos

    -guardar marcos y conjuntos de marcos

    -selección y división de marcos

    -propiedades.

Creación de formularios

    -añadir objetos de formularios

    -campo de texto

    -propiedades de los campos de texto

    -inserción de botones casilla de activación y botones de radio

    -listas y menús

    -campos de archivos

    -campos de imagen

    -campos ocultos

    -menús de salto

Inserción de capas

    -trabajo con capas

    -alineación de capas

    -inspector línea de tiempo

Creación de elementos de biblioteca

    -añadir elementos 

    -modificar elementos 

    -búsqueda y reemplazo

Creación de hojas de estilo

Inspector de comportamiento

Creación y modificación de mapa de sitio

    -vinculo en el mapa del sitio

ADOBE FLASH

Probablemente, uno de los avances más importantes en materia de diseño en el web ha sido la aparición de la tecnología desarrollada por Macromedia, ahora Adobe, denominada Flash.

Adobe Flash es la tecnología más comúnmente utilizada en el Web que permite la creación de animaciones vectoriales. El interés en el uso de gráficos vectoriales es que éstos permiten llevar a cabo animaciones de poco peso, es decir, que tardan poco tiempo en ser cargadas por el navegador.

Existen dos tipos de gráficos:

Los gráficos vectoriales, en los cuales una imagen es representada a partir de líneas (o vectores) que poseen determinadas propiedades (color, grosor...). La calidad de este tipo de gráficos no depende del zoom o del tipo de resolución con el cual se esté mirando el gráfico. Por mucho que nos acerquemos, el gráfico no se pixeliza, ya que el ordenador traza automáticamente las líneas para ese nivel de acercamiento.

Las imágenes en mapa de bits. Este tipo de gráficos se asemejan a una especie de cuadrícula en la cual cada uno de los cuadrados (píxeles) muestra un color determinado. La información de estos gráficos es guardada individualmente para cada píxel y es definida por las coordenadas y color de dicho píxel. Este tipo de gráficos son dependientes de la variación del tamaño y resolución, pudiendo perder calidad al modificar sucesivamente sus dimensiones.

Así, Adobe Flash se sirve de las posibilidades que ofrece el trabajar con gráficos vectoriales, fácilmente redimensionables y alterables por medio de funciones, así que de un almacenamiento inteligente de las imágenes y sonidos empleados en sus animaciones por medio de bibliotecas, para optimizar el tamaño de los archivos que contienen las animaciones.

Esta optimización del espacio que ocupan las animaciones, combinada con la posibilidad de cargar la animación al mismo tiempo que ésta se muestra en el navegador (técnica denominada streaming), permite aportar elementos visuales que dan vida a una web sin que para ello el tiempo de carga de la página se prolongue hasta límites insoportables por el visitante.

Además de este aspecto meramente estético, Adobe Flash introduce en su entorno la posibilidad de interaccionar con el usuario. Para ello, Adobe Flash invoca un lenguaje de programación llamado Action Script. Orientado a objetos, este lenguaje tiene claras influencias del Javascript y permite, entre otras muchas cosas, gestionar el relleno de formularios, ejecutar distintas partes de una animación en función de eventos producidos por el usuario, saltar a otras páginas, etc.

De este modo, Adobe Flash pone a nuestra disposición una tecnología pensada para aportar vistosidad a nuestra web al mismo tiempo que nos permite interaccionar con nuestro visitante. Por supuesto, no se trata de la única alternativa de diseño vectorial aplicada al Web pero, sin duda, se trata de la más popular y más completa de ellas.

Temario a desarrollar:

Caja de herramientas

     -línea de tiempo

     -ventana documento

Características de una película

    -guardar una película

    -propiedades de una película

Herramientas de dibujo

    -optimizar una figura

    -borde y relleno

    -unión de figuras

    -convertir trazos en rellenos

     -expandir relleno suavizar los bordes de un relleno.

Cambiar el color

    -paleta de colores

    -paneles de trazo y relleno 

    -degradados 

    -botes de pintura,

    -transformar rellenos cuentagotas

Agrupar y desagrupar 

    -organizar objetos 

    -desplazar un objeto

    -duplicar y eliminar un objeto

    -transformar objetos

    -escalar

     -reflejar

    -Rotar e inclinar

    -modificar eje de objeto

    -alinear

Bloques de texto

    -apariencia de texto

    -tipos de bloques de texto

    -propiedades de bloque de texto dinámico y de entrada
Crear un símbolo

    -creación de botones 

    -crear una instancia 

     -panel de efectos

Línea de tiempo

    -las capas

    -los fotogramas

    -animación fotograma a fotograma

    -papel cebolla

    -panel fotograma animación por interpolación de movimiento

    -creación de una capa guía

    -animación por interpolación de forma

Formatos de imagen

    -modificar mapas de bits

    -transformar imágenes en gráficos vectoriales

     -inspector línea de tiempo

Formatos de sonidos, 

    -panel sonido

    -Sincronización del sonido

    -sonido en un botón

    -búsqueda y reemplazo

Panel acciones

    -insertar acciones en un script 

    -script de fotograma

    -script de objeto, acciones de uso común

Opciones de publicación

    -opciones Flash

    -opciones HTML

ADOBE FIREWORKS
Acelere el diseño y el desarrollo de webs con el software Adobe Fireworks, la herramienta ideal para crear y optimizar imágenes para la web, así como para diseñar prototipos y aplicaciones web rápidamente. Fireworks ofrece la flexibilidad para editar imágenes de mapas de bits y vectores, una biblioteca común de activos prediseñados y una rápida integración con Adobe Photoshop, Adobe Illustrator, Adobe Dreamweaver y Adobe Flash Professional. Visualice diseños rápidamente en Fireworks, o aproveche otros activos de Illustrator, Photoshop y Flash. 

Edición de mapas de bits y vectores
Cree y edite imágenes de mapas de bits y vectores e importe y edite archivos Photoshop e Illustrator originales.

Optimización de imágenes
Optimice gráficos para prácticamente cualquier entorno de presentación con vista previa, vista previa gamma multiplataforma, compresión JPEG selectiva y una amplia gama de controles de exportación.

Integración eficaz de Photoshop e Illustrator screenshot
Importe archivos Photoshop (PSD) al tiempo que conserva las capas jerárquicas, los efectos de capa y los modos de fusión. Guarde archivos Fireworks (PNG) de nuevo en el formato Photoshop (PSD). Importe archivos de Illustrator (AI) al tiempo que conserva la integridad de los gráficos, incluida la información sobre la capa, el grupo y el color.

Diseño rápido de prototipos
Diseños interactivos de prototipos para sitios web y aplicaciones de Internet sofisticadas. Exporte prototipos de sitios web a Adobe Dreamweaver y prototipos de RIA a Adobe Flex.

Compatibilidad con varias páginas screenshot
Utilice el nuevo panel Páginas para crear varias páginas en un único documento (archivo PNG) y comparta capas en varias páginas. Cada página puede contener sus propios cortes, capas, marcos, animaciones y ajustes de lienzo, lo que facilita la simulación del flujo de los sitios web en un prototipo.

Organización jerárquica de las capas
Organice y gestione sus prototipos con una nueva estructura jerárquica de capas, similar a la de Adobe Photoshop, que le permite organizar fácilmente capas y páginas web.

Efectos de filtro screenshot
Aplique efectos de luz y de sombras, estilos y modos de fusión, incluidos siete nuevos modos de fusión de Photoshop, para añadir profundidad y carácter al texto y a los símbolos.

Biblioteca común
Dé rienda suelta al diseño de prototipos con una biblioteca común de símbolos gráficos, símbolos de texto y animaciones que se usan con frecuencia en aplicaciones, formularios, interfaces y sitios web.

Escala inteligente
Aplique escalas de forma inteligente a botones y símbolos gráficos (en vectores o mapas de bits) con escalas de nueve cortes. Combine la aplicación de escalas de nueve cortes con la biblioteca de formas automáticas para acelerar el diseño del prototipo de la aplicación y el sitio web.

Integración optimizada de Dreamweaver y Flash
Copie un objeto creado en Fireworks y péguelo directamente en Dreamweaver. Cree menús emergentes que puedan almacenarse como y HTML. Exporte archivos Fireworks (PNG) directamente a Flash al tiempo que conserva los vectores, los mapas de bits, las animaciones y los botones multiestado y, a continuación, edite los archivos mediante Flash. 

Temario a desarrollar:

La ventana documento

    -opciones de color

    -opciones de visualización

    -inspectores y paneles

Crear lienzos

    -modificar un lienzo

Comparación con Photoshop (diferencias)

    -crear capas, renombrarlas

Diferentes herramientas

    -modificar las propiedades de relleno

    -modificar las propiedades de trazo

    -añadir texturas

Líneas curvas

Formas cerradas

    -puntos bezier

    -modificar los trazados

Formato de texto

    -unir texto a trazado

Utilizar diferentes tipos de efectos

Crear mapas de imagen, 

    -utilizar zonas interactivas

    -vincular, texto alternativo

    -animaciones gif

Utilización de la biblioteca

Creación de botones mediante los comportamientos

    -mensajes en la parte inferior del navegador

    -menús desplegables

Diferentes formatos en los que se puede exportar e importar

    -divisiones de imagen

    -optimización de imagen a la hora de exportar

    -previsualización de lo exportado

Introducción: 

    -cómo planificar el sito

    -cómo guardar las páginas para no tener problemas a la hora de publicar

 
PUBLICACIÓN
Como conseguir un servidor. 
Publicación desde: frontpage - dreamweaver - wstp

Colocar en nuestra página un contador de visitas que nos indique: 

    -desde qué país entraron

    -con qué sistema operativo

    -con qué navegador, a qué hora

Como crear un redireccionamiento para que nuestra dirección no sea tan larga

Palabras claves

Subir el sitio a los buscadores

EVALUACIÓN Y DEFENSA DEL PROYECTO
Durante el transcurso del curso, el alumno irá desarrollando el proyecto final, demostrando sus conocimientos, mediante un fuerte componente lógico y creativo.