El Diseñador Web es:
Un técnico capaz 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.
El plan incluye una sólida formación en:
-
Html
-
Adobe Flash
-
Adobe Fireworks
-
Adobe Dreamweaver
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.
Temario
a desarrollar
Introducción
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
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
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.
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
