CURSO CONSTRUCCIÓN DE PÁGINAS WEB (120 HORAS)

PRESENTACIÓN

El diseño de páginas web es el proceso por el cuál se determina cómo se distribuirán los elementos,
cuáles serán los colores, imágenes, datos, entre otros. Para la construcción del sitio web es
necesario utilizar distintos programas y lenguajes de programación (HTML, Flash, PHP, etc) que nos
permitirán dar diseño a nuestra página.

Es por ello, que el presente curso aborda los principales programas empleados para construir sitios
web: Photoshop, Flash y Dreamweaver.

Más adelante, en cada uno de los cursos se especificarán los aprendizajes esperados.

REQUISITOS DE INSCRIPCIÓN
1. El curso esta destinado a todos los funcionarios de la Universidad (académicos y personal
de colaboración).
2. No es excluyente el No manejar los programas Photoshop, Dreamveaver y Flash, puesto
que se nivelará a los asistentes.
3. El curso se realizará con un mínimo de 20 personas con rentas imponibles inferiores a 25
UTM.
4. Adicionalmente, el OTEC entregará 7 becas para personas con rentas superiores a 25 UTM.
5. Si hay más interesados que las vacantes ofrecidas, se programarán nuevos cursos en
fechas, horarios y direcciones que se informarán oportunamente.
6. Deberán solicitar su inscripción al Coordinador de Capacitación de su respectivo Organismo
Universitario.
7. Tener disponibilidad para asistir al curso en el horario asignado, para ello será necesario
contar con la autorización de la Jefatura quien deberá firmar la Carta de Compromiso que le
entregará el Coordinador de Capacitación

CONTENIDOS

MÓDULO 1: PHOTOSHOP

Aprendizajes Esperados:
 Manejar las herramientas que proporciona Photoshop
  Diseño y edición de imágenes digitales.
 Tratamiento de imágenes, restauración y creación
 Aplicar las herramientas del programa para la captura, retoque y edición digital, para diferentes
sistemas de impresión o Web
 Desarrollar originales digitales para diferentes sistemas de impresión
 Retoque Fotográfico
 Diseño de piezas gráficas simples mediante PhotoShop

Unidad 1: Introducción a Photoshop

 Qué es Photoshop
 Iniciando PhotoShop
 Abrir una Imagen
 Guardar una Imagen
 Formatos de Imagen
 Abrir un Nuevo Documento de Trabajo
 La imagen digital
 Entorno de trabajo de PhotoShop:
- Selección
- Dibujo
- Edición
- Color
- Menús flotantes
- Paneles de Capas y Trazados.
- Selector de Colores.
- Modo de Imagen.
- Ajuste de Imagen.
- Tamaño de la imagen
- Resolución, tamaño y finalidad
- La imagen RGB, CMYK, Indexada.
 La imagen de Mapa de Bits
 Formatos:
- EPS
- JPEG
- TIFF
- PNG
- GIF

Unidad 2: Herramientas de Photoshop

 La Herramienta Pincel
 La Herramienta Lápiz
 Opciones del Pincel y el Lápiz
 El Concepto de Pincel
 Crear Formas de Pincel
 El Tampón de Motivo
 Crear Motivos Personalizados
 El Tampón de Clonar
 La Herramienta Degradado
  Degradados Personalizados
 La Herramienta Bote de Pintura
 La Herramienta Borrador

Unidad 3: Las Capas

 La Ventana Capas
 Crear Nuevas Capas
 Modificar Capas
 Superposición de Capas
 La Visibilidad de las Capas
 La Herramienta Mover
 Las Capas Enlazadas
 Alineación y Distribución
 Selección de Capas
 Grupos de Capas
 Bloquear las Capas
 Diferencias entre Fondo y Capa
 Los Canales
 Capas de texto
 Capas de ajuste
 Estilos de capa
 La Transformación
 Las Máscaras de Capa
 Crear Máscaras de Capa
 Los Recortes de Capa

Unidad 4: Las Selecciones

 Trabajando con Selecciones: Cortar, Copiar y Pegar

 Las Herramientas de Selección de Marco
 Las Herramientas de Selección de Lazo
 La Herramienta Varita Mágica
 Las Selecciones Personalizadas
 Máscaras de Selección
 La Superposición de Selecciones
 Redimensionar la Imagen

Unidad 5: Formas y Texto

 Las Herramientas de Forma

 El Texto
 Opciones de texto
 Opciones de párrafo
 Distorsión de texto
 Máscaras de texto
 Rasterización
 Unir texto a trazado
  Paleta Carácter
 Paleta Párrafo

Unidad 6: Color y pintura

 Selección de colores
 Herramientas de pintura
 Colorización de imágenes
 Corrección Tonal:
- Brillo y Contraste
- Corrección tonal mediante comando Niveles
- Corrección tonal mediante comando Curvas
- Corrección tonal mediante comando Selectiva de Color
- Sombra y Luces
- Tono y Saturación
 Definición de las herramientas de pintura:
- Pincel y herramientas de degradado
- Crear y editar pinceles personalizados
- Editor de degradados:
 Efectos de pintura
 Iluminación
 Volumen y sombras

Unidad 7: Filtros

 Descripción de los filtros más usados:

- Galería de Filtros
- Artístico
- Bosquejar
- Desenfocar
- Enfocar
- Distorsionar
- Estilizar
- Ruido
- Pixelar
- Textura
- Trazos de pincel
- Interpretar
- Vídeo y Otros
 Aplicaciones de ejemplo

Unidad 8: Transformación

 Rotar y reflejar
 Enderezar imágenes
 Corrección de perspectiva (herramienta de recorte)
 Escala, distorsión y rotación, mediante el comando transformación libre

Unidad 8: Exportación y salida

  Exportación para imprenta
 Color CMYK y Duotonos
 Formatos TIFF y EPS
 Trazados de recorte
 Exportación para la Web
 Formatos JPG, GIF y PNG
 Opciones de compresión

MÓDULO 2: DREAMWEAVER

Aprendizajes Esperados
- Manejar las herramientas que proporciona Dreamweaver
- Diseño y edición de un sitio Web en lenguaje HTML.
- Incorporar textos, retoques, composición y aplicación de imágenes para Web.
- Construcción de un sitio HTML con Tablas, Capas y Celdas de Disposición.
- Administración de sitios Web ya creados
- Crear y modificar elementos y leguajes propios de la Web mediante: HTML, CSS y plantillas.
- Intervención de elementos relacionados con un sitio Web: Imágenes, Textos, películas flash, videos.
- Crear y alojar paginas creadas en DW

Unidad 1: Presentación del Curso

 Aspectos generales de la arquitectura de páginas estáticas :

- Árbol de navegación
- Arquitectura de contenidos e información
- Wireframes
 Lenguaje HTML
 Conceptos técnicos: Dominios, FTP, Hosting
 Vanguardias de diseño relacionado con Internet: Diseño Web 2.0

Unidad 2: Introducción a la Interfaz de Dreamweaver

 Introducción a Dreamweaver Características y posibilidades de la aplicación:

- Definición de conceptos básicos de HTML y CSS
- Arquitectura de páginas estáticas
 Interfaz de Dreamweaver Página de Inicio:
- Área de trabajo y uso de paneles
- Diseño del espacio de desarrollo
 Definición de un Sitio Web
- Configuración de un sitio
- Definición de la carpeta raíz
- Sitio local y remoto
- Panel Archivos del sitio

Unidad 3: Elementos y construcción de un sitio Web

 Construcción de un Sitio Web

- Etapas de desarrollo en la creación de un sitio
 - Creación de un documento HTML
- Propiedades del documento
- Vista previa en el navegador
 Elementos de estructura en un documento HTML
- Estructura y elementos básicos del HTML
- Propiedades del documento HTML
- Fondos, Tablas y Celdas

Unidad 4: Imágenes, textos y color en la Web

 Propiedades de color:
- Principios de teoría de color
- El color hexadecimal
- Aplicaciones de color a textos, tablas, celdas y fondos
 Integración de imágenes y multimedia:
- Formatos de imagen para la Web
- Incorporación de imágenes
- Propiedades de las imágenes
- Aplicación de imágenes de fondo
 Propiedades de texto
- Fuentes
- Tamaños
- Creación de tipografías especiales a través de imágenes

Unidad 5: Navegación e interactividad

 Conceptos básicos de navegación

 Tipos de vínculos o enlaces
 Vínculos externos e internos
 Ruta de los archivos
 Actualización de vínculos
 Elementos de formulario básicos
 Creación de formularios

Unidad 6: Fundamentos del CSS y diseño de páginas web

 Principios y fundamentos del CSS o Cascading Style Sheets

 Uso de CSS y creación de estilos}
 Aplicar estilos a páginas HTML
 Selectores CSS
- Elemento
- Clase
- Id
 Vinculación y aplicación de hoja de estilos externa
 Creación de estilos básicos de enlace
- a:link
- a:visited
 - a:hover
- a:active
 Propiedades Modificables de Texto
- Presentación de texto
- Encabezados
- Párrafo
- Párrafos especiales
 Diagramación y posicionamiento de elementos
- Posicionamiento estático
- Posicionamiento Relativo
- Posicionamiento Absoluto
- Posicionamiento Fijo
 Leyaut CSS

Unidad 7: Uso de plantillas

 Uso de plantillas
 Creación de plantillas
 Regiones editable
 Modificando plantillas
 Creando documentos en base a una plantilla creada

Unidad 8: Aplicaciones multimedia

 El Flash
 Inserción de películas flash
 Aplicaciones de video
 Creación de Banners

Unidad 9: Publicación y actualización del sitio

 Verificación de vínculos
 Conexión al sitio remoto vía FTP
 Publicación del sitio y sincronización
 Actualización de archivos y carpetas

MÓDULO 2: FLASH

Aprendizajes Esperados
- Manejar las herramientas que proporciona Flash
- Utilizar técnicas y recursos que faciliten y complementen las funciones del desarrollo de proyectos
visualmente dinámicos e interactivos
- Creación y diseño de sitios Web
- Creación y diseño de presentaciones multimediales
- Creación y diseño de CD Room
- Desarrollar botones, menús emergentes, animaciones y banner
- Crear animaciones dinámicas e interactivas.

Unidad 1: Presentación Flash y Trabajo en Flash

  Software Flash
 Aspectos básicos sobre los documentos Flash
 Aspectos básicos sobre los tipos de archivo Flash
 Crear un documento nuevo
 Configurar Preferencias
 Deshacer en documento y en objeto
 Menú principal
 Escenario
 Panel de la línea de tiempo
 Paneles
 Paneles más comunes
 Desarrollar documentos Flash
 Crear documentos Flash
 Añadir activos
 Publicar Documentos
 Modificar las configuraciones de publicación
 Usar Control > Probar película
 Usar archivo > Vista Previa de publicación

Unidad 2: Importar y crear gráficos

 Trabajo con imágenes

- Mapa de bits
- Gráficos vectoriales
- Añadir archivos gráficos y de imagen
- Importar y posicionar imágenes
- Crear gráficos vectoriales en Flash
- Comparación entre trazo y relleno
 Capas
- Usar las herramientas de dibujo natural de Flash
- Utilizar guías y reglas
- Utilizar herramientas de color en Flash
- Crear degradados
- Transformar degradados
- Trabajar con muestras de color
 Símbolos gráficos
- Aspectos básicos de los símbolos
- Aspectos básicos de los símbolos gráficos
- Aspectos básicos de la Biblioteca de un documento
- Crear símbolos gráficos y guardarlos en la Biblioteca
- Instancias
- Modos de edición de los símbolos
 Máscaras
- Crear efectos de máscara
- Crear máscaras

Unidad 3: El texto
  Aspectos básicos sobre las fuentes
 Texto Estático
 Texto Dinámico
 Introducción de Texto
- Construir formularios en Flash
- Asignar tipos de texto para formar campos
- Utilizar texto de entrada
- Asignar el tipo de línea
- Desplegar el marco del texto
- Añadir un nombre de instancia
- Añadir efectos de filtro a los campos de texto

Unidad 4: Animaciones

 Aspectos básicos de la animación

 Línea de tiempo
 Crear animaciones
 Interpolación de movimiento
 Usar símbolos
 Utilizar fotogramas clave
 Crear una animación por interpolación de movimiento
 Errores de la interpolación de movimiento
 Crear una máscara animada
 Utilizar una guía de movimiento
 Utilizar interpolación de formas
 Crear interpolaciones de formas

Unidad 5: Escritura de ActionScript con el asistente de script

 Introducción al asistente de script

- Utilizar ActionScript
- Utilizar el asistente de script para añadir ActionScript
- Añadir acciones a la Línea de tiempo
- Cómo impedir que una Línea de tiempo se reproduzca indefinidamente
 Botones
- Usar instancias Botón
- Utilizar líneas de tiempo de los Botones
- Estado de Botón
- Botones invisibles
- Añadir acciones a botones

Unidad 6: Utilizar clips de película

 Trabajar con clips de películas

 Crear un clip de película
 Añadir contenido a una línea de tiempo de clip de película
 Editar líneas de tiempo del clips de película
 Utilizar de clips de película para construir diferentes estados
 Crear diferentes estados visuales
  Utilizar eventos para controlar el estado visual
 Añadir la Acción “ir a” con el asistente de script
 Utilizar comportamientos
 Añadir comportamientos
 Utilizar el comportamiento Ir a y detener en fotograma o etiqueta
 Cambiar el evento de activación

Unidad 7: Crear sistemas de navegación

 Utilizar la acción loadMovie

 Utilizar la acción loadMovie para crear sistemas de navegación

Unidad 8: Añadir sonido y video

 Trabajar con sonido

- Importar archivos de sonido
- Modificar propiedades de sonido
- Añadir sonido a un documento Flash
- Añadir una instancia de sonido al escenario
- Controlar sonido en la línea de tiempo
 Incorporar video
- Incluír video directamente en un documento Flash
- Importar video
- Utilizar el componente FLVPlayback
- Añadir medios de reproducción al componente FLVPlayback

Unidad 8: Publicar documentos Flash

 Publicar en Internet
 Aspectos básicos de la configuración de publicación
 Asignar una configuración de publicación
 Publicar en diferentes formatos de archivos
 Seleccionar formatos de archivos
 Almacenar una configuración de publicación
 Especificar un archivo SWF predeterminado para cargar
 -¿Qué afecta al tamaño del documento?
 Técnicas para optimizar los documentos de Flash
 Usar símbolos
 Optimizar formas
 Utilizar fuentes de dispositivo
 Cargar SWF relevantes con contenido externo
 Uso prudente del sonido
 Uso prudente del video
 Optimizar mapas de bits
LUGAR, FECHAS Y HORARIOS DE CLASES
Las clases se realizarán en Centro de Formación Técnica Santo Tomás, José Miguel Carrera #158
NOMBRE DEL CURSO FECHAS DE CLASES DIAS Y HORARIOS DE CLASES
Construcción de Del 15 de Junio al 09 de Noviembre de Lunes y Viernes
Páginas Web 2009 De 16:30 a 19:30 horas

VALOR DEL CURSO POR PARTICIPANTE

OTEC VALOR DEL CURSO

Centro de Formación Santo Tomás $120.000
(*)Es importante reiterar que no se cobrará el valor del curso a las personas becadas (con rentas sobre 25 UTM).

VACANTES E INSCRIPCIONES
Las inscripciones deberán realizarse a través del Coordinador de Capacitación quien enviará en el
Formulario Oficial de Inscripción de Cursos la nómina de participantes de su Organismo
Universitario.
Los datos de la OTEC serán completados por la Unidad de Capacitación.
Los Formularios de Inscripción se recibirán en: cguerra@uchile.cl
El último plazo de inscripción será 48 horas antes del inicio del curso.