Download Disenio y gestion de sitios web con Adobe GoLive

1
Diseño y gestión de sitios Web con Adobe GoLive
▼Requisitos mínimos para la aplicación Adobe GoLive 6.0.1
–PowerPC
MacOS 9.1
96 MB RAM
90 MB de espacio libre en disco
–PC compatible
Procesador Pentium II, 400 MHz
Windows 98
96 MB RAM
90 MB de espacio libre en disco
febrero, 2003
1
2
febrero, 2003
Planteamiento y duración del curso (24 horas)
• El curso consta de dos fases bien diferenciadas.
Fase 1: 20 horas de duración.
Se plantea de forma eminentemente práctica precedida, cuando proceda, de explicación y
justificación teórica.
•Fase 2: 4 horas de duración.
. días y no superior a 30 días a partir de la
Se impartirá en un periodo de tiempo no inferior a 15
fecha de terminación de la fase 1.
Resolución de las dudas surgidas a partir de la puesta en marcha de los conocimientos adquiridos
en la fase 1.
•El curso será soportado técnicamente mediante el envío de dudas a la dirección de correo electrónico
edu@eduvela.com
Objetivos del curso
•Aprender a diseñar y gestionar un sitio Web para publicar información en Internet o intranets
mediante la utilización de una potente aplicación de fácil manejo.
•Conocer y aprender a optimizar los distintos formatos gráficos utilizados en la Web.
•Convertir documentos procedentes de distintas aplicaciones de manera cómoda y eficaz para su
utilización en en la Web.
3
Temario del curso
▼Acercamiento al medio desde el diseño gráfico
•Internet
–Quien, porqué y para qué se crea
–Repercusión en el diseño gráfico
•Intranet
•La World Wide Web (WWW, Web o 3W)
–Sitio y página Web
–Editores WYSIWYG
–Navegador
–HTML
–JavaScript
▼Elementos principales de una página Web
•Texto
–ASCII
•Tipografía
•Imágenes
–Espacios de color
–Resoluciones
–Compresiones
–Nuevo muestreo
–Formatos
GIF, GIF animado, JPEG, PNG
–Optimización de imágenes para su utilización en la Web
Trabajo con Photoshop e ImageReady
–Nomenclatura Web
▼Limitaciones en el diseño gráfico aplicado a la Web
▼Diseño de un sitio Web con Adobe GoLive
•Qué es y para qué sirve Adobe GoLive
•Formas de trabajo con Adobe GoLive
•Sitio o páginas Web
•Configuración de las preferencias de la aplicación
•Organización del interface de la aplicación
•Barra de menús
•Ventanas flotantes
•Sitio
•Páginas
•Trabajo con texto
•Diseño de un sitio Web
•Trabajo con vínculos
•Trabajo con Frames (cuadros)
•Trabajo con animación (DHTML)
•Trabajo con formularios
•Hojas de estilo en cascada (CSS)
–Gestión de un sitio Web con Adobe GoLive
–Subida de la información al servidor Web mediante FTP
▼Aprendizaje complementario
•Conversión de documentos desde cualquier aplicación a HTML
•Preparación de archivos para su descarga a través de la Web
febrero, 2003
4
febrero, 2003
Glosario de términos relacionados con los formatos JPEG y GIFF
▼JPEG
•Línea de base
–Estándar
Formato que reconocen la mayoría de los navegadores.
–Optimizada
Optimiza la calidad del color de la imagen.
Produce archivos de tamaño ligeramente más pequeño.
No es compatible con todos los navegadores.
–Progresiva
Crea una imagen que se muestra gradualmente a medida que se descarga.
Genera archivos ligeramente más grandes.
No son soportados por todos los navegadores ni por todas las aplicaciones.
▼GIF
•Tipo de paleta o tabla de colores
para convertir una imagen RGB a color indexado.
En las opciones Perceptual, Selectiva y Adaptable se puede optar entre utilizar una paleta local
basada en los colores de la imagen actual o una paleta maestra creada en ImageReady.
a–Exacta
Crea una paleta utilizando los colores exactos que aparecen en la imagen RGB.
Opción disponible solo si la imagen usa 256 colores o menos.
Puesto que la paleta de la imagen contiene todos los colores de la imagen, no hay ningún tramado.
–Sistema Windows
Usa la paleta de 8 bits por defecto del sistema Windows, que se basa en un muestreo uniforme de
los colores.
–Sistema Mac OS
Usa la paleta de 8 bits por defecto del sistema Mac OS, que se basa en un muestreo uniforme de
los colores.
–Web
Usa la paleta de 216 colores que los navegadores, con independencia de la plataforma, usan para
mostrar imágenes en un monitor de 256 colores.
Es un subconjunto de la paleta de 8 bits de Mac OS.
Utiliza esta opción para impedir los tramados del navegador al ver las imágenes en la pantalla de
un monitor de 256 colores.
–Uniforme
Crea una paleta realizando un muestreo uniforme de los colores del cubo de colores RGB. Por
ejemplo, si Photoshop toma 6 niveles de color distribuidos uniformemente para el rojo, el verde y el
azul, la combinación genera una paleta uniforme de 216 colores (6 elevado al cubo = 6 x 6 x 6 =
216). La cantidad total de colores que se muestran en una imagen corresponde al cubo perfecto
más aproximado (8, 27, 64, 125 o 216) que es inferior al valor del cuadro de texto Colores.
b–Perceptual
Crea una paleta personalizada en la que tienen prioridad los colores más sensibles para el ojo
humano.
–Selectiva (opción por defecto)
Crea una tabla de colores similar a la tabla de colores Perceptual, pero favorece amplias áreas de
color y protege los colores Web. Normalmente, esta opción genera imágenes con la mayor
integridad de los colores.
–Adaptable
Crea una paleta realizando un muestreo de los colores del espectro que aparecen con más
frecuencia en la imagen. Por ejemplo, una imagen RGB con sólo los colores verde y azul genera
una paleta principalmente de verdes y azules. La mayoría de las imágenes concentran los colores en
áreas determinadas del espectro. Para controlar una paleta con más exactitud, selecciona primero
una parte de la imagen que contenga los colores que deseas enfatizar. Photoshop carga la
conversión hacia estos colores.
5
febrero, 2003
c–Personalizar
Crea una paleta personalizada usando el cuadro de diálogo Tabla de colores. Edita la tabla de
colores y guárdala para usos posteriores o bien haz clic en Cargar para cargar una tabla de
colores creada anteriormente.
Esta opción también muestra la paleta adaptable actual que sirve para previsualizar los colores que
se usan con más frecuencia en la imagen.
d–Previa o Anterior
Usa la paleta personalizada de la conversión anterior y, por tanto, es muy fácil convertir varias
imágenes con la misma paleta personalizada.
•Tramado
A no ser que se utilice la opción de la tabla de colores Exacta, puede que la tabla de colores no
contenga todos los colores que se usan en la imagen. Para simular los colores que no están en la
tabla de colores, puede generar colores tramados. Los tramados mezclan los píxeles de los colores
disponibles para simular los colores que faltan.
–Ninguno
No genera ningún color tramado pero, en su lugar, usa el color más cercano al color que falta. Esto
suele producir transiciones nítidas entre los tonos de color de la imagen y crea el efecto de
posterizado.
–Difusión
Usa un método de difusión de errores que genera un tramado menos estructurado que la opción
Motivo.
Para proteger los colores de la imagen que contienen entradas en la tabla de colores y, por tanto,
impedir los tramados, seleccione Mantener colores exactos y, de esta forma, mantener líneas finas y
texto en las imágenes Web.
–Motivo
Usa un motivo cuadrado similar a los semitonos para simular cualquier color que no está en la tabla
de colores.
–Ruido (Seleccionar si se va a dividir en sectores la imagen para colocarla en una tabla HTML)
Ayuda a reducir los motivos de costura a lo largo de los bordes de los sectores de la imagen.
•Otros conceptos
–Normal
Crea una imagen que se muestra en el navegador solo cuando se ha descargado completamente.
–Entrelazado
Crea una imagen que se muestra como versiones de baja resolución en el navegador hasta que se
ha descargado completamente.
Produce la sensación de un menor tiempo de descarga.
Aumenta el tamaño del archivo.