INTRODUCCION En esta parte del curso de herramientas del software hablare sobre los entornos de aplicaciones que nos

ayudaran en el desarrollo web, además aprender cual es su funcionalidad para las actividades que pronto se acercan a medida que acaba el curso. ENTORNO DREANWAVER MX 2004 QUE ES. Es una aplicación en forma de estudio (basada en la forma de estudio de Adobe Flash) enfocada a la construcción y edición de sitios y aplicaciones Web basadas en estándares. Creado inicialmente por Macromedia (actualmente producido por Adobe Systems).

PARA QUE SIRVE Sirve para la creación de sitios web y aplicaciones, también se usa para la edición creación de código para la web. Además de diseñar, desarrollar y mantener de forma eficaz sitios y aplicaciones Web basados en normas. Con Dreamweaver, los desarrolladores Web lo abarcan todo, desde la creación y mantenimiento de sitios Web básicos hasta aplicaciones avanzadas compatibles con las mejores prácticas y las tecnologías más recientes. COMO FUNCIONA La barra de la aplicación.

La barra la aplicación es una novedad en Dreamweaver CS4. Si tenemos la ventana maximizada veremos todos los elementos de la barra ocupando una sola línea, si no, ocuparán dos líneas, como en la imagen superior.

Al hacer clic en Insertar. Podemos cerrar cada . Un espacio de trabajo es la configuración del entorno (paneles visibles y su disposición) que podemos guardar y cargar. indica que ese archivo tiene cambios sin guardar. Los menús.Esta barra contiene los siguientes elementos: los menús (en la imagen. el conmutador de espacio de trabajo y una caja de búsquedas para obtener ayuda on line. están agrupados en categorías. Si junto al nombre aparece un *. que ya veremos. aunque en ocasiones nos envíen a los paneles. mostrará una pestaña con su nombre. Las pestañas de documento. Todas las opciones de Dreamweaver son accesibles a través de los menús. en la parte inferior). nos permiten (de derecha a izquierda) cambiar entre la vista de diseño o código. Más hacia la derecha observamos el conmutador del espacio de trabajo. o al administrador de sitios. varios botones propios de la aplicación. por ejemplo. como un desplegable. Cada archivo que tengamos abierto. que aparecen junto al icono. lo que nos permitirá cambiar de uno a otro fácilmente. veremos las operaciones relacionadas con los diferentes elementos que se pueden insertar en Dreamweaver. acceder a las extensiones que se pueden añadir. Lo veremos más adelante. Los botones propios de la aplicación.

Hasta aquí las barras que siempre veremos en la aplicación. archivos Java Script. Mano (para desplazarse) y Zoom. o acceder a otras acciones haciendo clic con el botón derecho. encontramos el selector de etiquetas. Siguiendo hacia la derecha encontramos las herramientas de Selección. Dreamweaver CS4 añade una novedad.. Nos sirve para seleccionar etiquetas completas.Documento clicando en el aspa. Y otros datos como el tamaño de la ventana.. Debajo de las pestañas encontramos los archivos a que utiliza nuestra página. y nos da información sobre el mismo. A parte. Pudiendo acceder a ellos con un clic. Esto nos ahorrará bastante tiempo. etc. como la hoja de estilos. . existen otras que podemos ver u ocultar desde el menú Ver → Barras de herramientas. La barra de estado. como Cerrar otros archivos. Esta barra la encontramos debajo de la ventana de documento. A la izquierda. el tamaño de la página o su codificación.

Deshacer y Rehacer. La barra de representación de estilos. Abrir. o realizar las distintas opciones de validación que nos ofrece el programa. mucho menos utilizada. Es actualmente desarrollado y distribuido por Adobe Systems. destinado a la producción y entrega de contenido interactivo para las diferentes audiencias alrededor del mundo sin importar la plataforma. Cortar. acceder cómodamente al título de la página. Guardar. De izquierda a derecha: Nuevo archivo. si estamos utilizando hojas distintas que dependan del eso. La barra de herramientas estándar contiene iconos para realizar las acciones más habituales del menú Archivo y Edición. y utiliza gráficos vectoriales e imágenes ráster. Copiar. Guardar todo. La barra de herramientas de documento. Esta barra. flujo de vídeo y audio bidireccional (el flujo de subida . explorar con Adobe Bridge. nos permite ver la apariencia de nuestra web en distintos dispositivos. código de programa. Imprimir el código fuente. Pegar. La barra de herramientas de documento contiene iconos que nos permiten cambiar entre las distintas vistas de edición y la vista en vivo. sonido. ENTORNO FLASH QUE ES Es una aplicación en forma de estudio que trabaja sobre "fotogramas".La barra de herramientas estándar.

Es similar a la de cualquier otro programa de diseño web o gráfico. abrirlos.. imágenes e incluso otras películas Flash). Flash es el entorno y Flash Player es el programa de máquina virtual utilizado para ejecutar los archivos generados con Flash. La Barra de Menús La Barra de Menús tiene como propósito facilitar el acceso a las distintas utilidades del programa. Edición: Es el clásico menú que te permite Cortar. Destaca la potencia de la utilidad Importar que inserta en la película actual casi todo tipo de archivos (sonidos. o la de Configuración de Publicación desde donde se pueden modificar las características de la publicación. Esto se puede seleccionar desde los submenús Cuadrícula y Guías desde donde también se pueden configurar sus opciones. Insertar: Permite insertar objetos en la película. Copiar. así como nuevos fotogramas. Pegar.sólo está disponible si se usa conjuntamente con Macromedia Flash Communication Server). vídeo. acciones.. tanto objetos o dibujos como fotogramas. y la opción Trazar Mapa de Bits convierte los gráficos en mapas vectoriales . Ver: Además de los típicos Zooms. aunque tiene algunas particularidades... capas. guardarlos. también permite personalizar algunas de las opciones más comunes del programa. También incluye la posibilidad de crear una cuadrícula y unas guías... En sentido estricto. También permite configurar la impresión de las páginas.. Modificar: La opción Transformar permite modificar los gráficos existentes en la película. Veamos los principales Submenús a los que se puede acceder: Archivo: Permite crear nuevos archivos.. imprimirlas. escenas. te permite moverte por los fotogramas y por las escenas.

. Ayuda: Desde aquí podemos acceder a toda la ayuda que nos ofrece Adobe. cargarlos. Más adelante se tratará en profundidad. Comandos: Permite administrar los Comandos (conjunto de sentencias almacenadas que permiten emular lo que un usuario pueda introducir en el entorno de edición) que hayamos almacenado en nuestra animación... obtener otros nuevos de la página de Macromedia o ejecutar los que ya tengamos... . incluye accesos directos a todos los paneles y también la posibilidad de crear tus propios Espacios de Trabajo. La Línea de Tiempo La Línea de Tiempo representa una forma de ver los fotogramas de modo simplificado. Ventana: Este menú. Continuar. guardarlos. Pasar.).(este tema se tratará más adelante). etc.. además de las opciones clásicas acerca de cómo distribuir las ventanas. hasta el diccionario de Action Script. Depurar: Aquí encontraremos las opciones de depuración de la película que te ayudarñan a encontrar errores de progrmación en ActionScrit. entre ellos se encuentran Entrar. Escena . pasando por tutoriales. Texto: Sus contenidos afectan a la edición de texto. Optimizar o de la propia película (Capa. desde el manual existente. Reproducir.. lecciones guiadas etc. Consta de 2 partes.. Control: Desde aquí se modifican las propiedades de reproducción de la película. El resto de opciones permite modificar características de los elementos de la animación Suavizar. Salir. Probar Película.. Rebobinar.

pueden "mezclarse" entre sí. por ejemplo).0s en la imagen). da lugar a películas bien ordenadas y de fácil manejo (es conveniente colocar los el código ActionScript en una capa independiente llamada "acciones". Dada la importancia de estas. en el orden que establece la misma Línea de tiempo. Además. Es decir. Para ello. Las Capas El concepto de Capa es fundamental para manejar Flash de forma eficiente. Esto es interesante a menudo. . pero otras veces es conveniente separar los objetos de modo que no interfieran entre sí. Los objetos que estén en una determinada capa comparten fotograma y por tanto. cuánto dura o cuándo aparecerá en la película. la Línea de Tiempo representa la sucesión de Fotogramas en el tiempo. crearemos tantas capas como sea necesario. Aún así. una capa contiene su propia Línea de Tiempo (con infinitos fotogramas).1) Los Fotogramas (frames) que vienen delimitados por líneas verticales (formando rectángulos) 2) Los Números de Fotograma que permiten saber qué número tiene asignado cada fotograma. la película Flash no será nada más que los fotogramas que aparecen en la Línea de tiempo uno detrás de otro. Es decir. veamos a grandes rasgos qué son las capas. A nivel conceptual. El uso de múltiples capas además.0 en la imagen) y el Tiempo de película transcurrido (0. Para saber más acerca de la Línea de Tiempo y de los distintos tipos de fotogramas que existen visita nuestra Página Avanzada. Una Capa se puede definir como una película independiente de un único nivel. se le dedicará un tema completo. la Velocidad de los Fotogramas (24. Las ventajas y desventajas de usar capas se verá en la unidad referente a Capas. en la parte inferior hay herramientas para trabajar con Papel cebolla e información sobre el Número de Fotograma actual (1 en la imagen).

Coincidir: Provocan que el tamaño de la película coincida con el botón seleccionado (tamaño por defecto de la Impresora.El Escenario A continuación veremos las diferentes partes que conforman el Área de trabajo empezaremos con la más importante: el Escenario. El escenario tiene unas propiedades muy importantes. Para acceder a ellas. El tamaño mínimo es de 1 x 1 px (píxeles) y el máximo de 2880 x 2880 px. . Sobre el escenario dibujaremos y colocaremos los diferentes elementos de la película que estemos realizando. hagamos clic con el botón derecho sobre cualquier parte del escenario en la que no haya ningún objeto y después sobre Propiedades del documento: Añade metadatos a tus archivos para una mejor inclusión de estos en los motores de busqueda rellenando los campos de Título y Descripción. ya que coinciden con las Propiedades del documento. Dimensiones: Determinan el tamaño de la película. Contenidos existentes o los elegidos como Predeterminados) Color de Fondo: El color aquí seleccionado será el color de fondo de toda la película.

Transformar en predeterminado: Este botón. propio de la nueva versión de Flash. Si no están visibles en el lateral derecho. Cada vez que hagamos clic en con el Zoom duplicaremos el porcentaje indicado en el desplegable Zooms. Son muy útiles y ayudan a acelerar el trabajo cuando se emplean correctamente. permite almacenar las propiedades del documento actual y aplicarlas a todos los documentos nuevos que se creen desde ese instante en adelante. permitiendo abarcar más o menos zona del Entorno de Trabajo. Su misión es simplificar y facilitar el uso de los comandos. . Para saber más acerca de los Zooms página Básica. Los Paneles Los Paneles son conjuntos de comandos agrupados según su función (por ejemplo. Panel Zooms: Son un conjunto de accesos directos a Submenús existentes en el Menú Ver. puedes visualizarlos desplegando el menú Ventana y haciendo clic sobre el nombre del panel que quieras mostrar. todo lo que haga referencia a las acciones. Unidades de Regla: Unidad que se empleará para medir las cantidades. Pudiéndose expandir o minimizar con un clic de ratón. Estas propiedades por supuesto podrán ser alteradas desde este panel cuando se desee.Veloc. Fotogramas: O número de fotogramas por segundo que aparecerán en la película. irá en el Panel Acciones). Estos paneles o ventanas se encuentran organizados en el lateral derecho del área de trabajo. Las Vistas o Zooms La Herramienta Zoom se emplea para acercar o alejar la vista de un objeto.

Panel Muestras: Nos permite seleccionar un color de modo rápido y gráfico. Muy útil. Panel Color: Mediante este panel creamos los colores que más nos gusten. Panel Información: Muestra el tamaño y las coordenadas de los objetos seleccionados. Todos los paneles se estudiarán en profundidad a lo largo del curso. Panel Alinear: Coloca los objetos del modo que le indiquemos. . para que si en algún momento el entorno se vuelve un poco caótico puedas recuperar tu configuración elegida desde el menú Ventana. vamos a nombrarlos y a resumir las funciones de la mayoría de ellos. Muy útil para alineaciones exactas. Para ello deberás acceder a la opción Ventana → Espacio de trabajo → Nuevo espacio de trabajo y asignar un nombre a nuestro nuevo espacio. permitiéndonos modificarlas. Ahora sólo bastará darle un nombre a la disposición y será accesible desde el mismo elemento de menú Espacio de trabajo en cualquier momento. Flash permite cargar y guardar tus propias disposiciones de paneles. Aún así. (Incluidas nuestras creaciones).Para mejorar la experiencia del usuario.

. Panel Componentes: Nos permite acceder a los Componentes ya construidos y listos para ser usados que nos proporciona Flash. Panel Acciones: De gran ayuda para emplear Action Script y asociar acciones a nuestra película. no debes perderlo de vista nunca. Si aún no sabes lo que son las Escenas. Panel Respuestas: Macromedia pone a nuestra disposición ayuda y consejos accesibles desde este panel. Panel Propiedades: Sin duda. Panel Transformar: Ensancha. creado por Adobe Systems. es una de las herramientas software para el tratamiento de imagen más potente y popular de hoy en día Los logotipos de Photoshop son propiedad de Adobe. los objetos seleccionados.. tamaño etc.. tipografía. tipo de trazo. scrolls etc. gira . Los componentes son objetos "inteligentes" con propiedades características y muchas utilidades (calendarios. Es fundamental.. encoge. tamaño de los caracteres.Panel Escena: Modifica los atributos de las escenas que usemos. propiedades de los objetos (si hay interpolaciones etc. el panel más usado y más importante. coordenadas. Panel Explorador de Películas: Nos permite acceder a todo el contenido de nuestra película de forma fácil y rápida ENTORNO PHOTOSHOP Photoshop.).te lo explicamos en nuestro tema básico. de fondo...) Panel Cadenas: Mediante este panel Flash aporta soporte multi-idioma a nuestras películas.. Nos muestra las propiedades del objeto seleccionado en ese instante. color de borde. Panel Comportamientos: Permiten asignar a determinados objetos una serie de características (comportamientos) que después podrán almacenarse para aplicarse a otros objetos de forma rápida y eficaz.. así como las marcas registradas Photoshop y Adobe. aulaClic no tiene ninguna relación con Adobe. .

Entonces. y se abrirá un cuadro de diálogo. De hecho. o digitalizadas por un escáner o máquina fotográfica. lo primero que tendremos que hacer será abrirla con Photoshop.Debemos tener bien claro desde el principio que Photoshop no está pensado para dibujar. Photoshop está principalmente orientado a tratar y manipular imágenes. Abrir una imagen Para comenzar a editar una imagen. esta es una de las características más interesantes de Photoshop. pues Adobe ha sabido crear un programa intuitivo y muy completo que hace que se desmarque de la competencia y sea el software más utilizado por diseñadores e ilustradores. haz clic en Archivo en la barra de menú. o bien creadas por otros programas. para eso es recomendable que utilices Illustrator. transformarla y editarla con un sinfín de posibilidades. una vez introducida la imagen en el programa podrías retocarla. Se desplegará una lista como esta: Para abrir una imagen deberás hacer clic en Abrir. Vamos a ver los pasos a seguir para abrir un archivo desde Photoshop: Una vez arrancado el programa. también de Adobe. .

haz clic en Abrir y la imagen se abrirá en una ventana dentro del programa. . encontramos la opción Abrir con → Adobe Photoshop CS5 en el menú contextual de la imagen. que es arrastrar la imagen desde una ventana del Explorador de Windows directamente al área de trabajo de Photoshop. También existe una forma más rápida. Incluso desde el Explorador de Windows.Llegados a este punto. Cuando lo tengas seleccionado. lo que deberás hacer es navegar por las carpetas hasta encontrar el archivo deseado.

Adobe Bridge te permite navegar por tus carpetas y organizar tus imágenes de forma más eficiente. además de otro tipo de datos técnicos y sobre derechos de autor.Puedes abrir simultáneamente tantas imágenes como tu ordenador soporte. por ejemplo desde el menú contextual de la imagen. una breve descripción o incluso darle un título. Puedes abrirlo haciendo clic en Archivo → Buscar en Bridge o desde el icono sobre la barra de menú. pudiendo añadir información sobre la imagen (llamada metadatos) como su autor. Una de las características que se añadió en las versiones CS Photoshop es Adobe Bridge. pero ten en cuenta que cuantos más recursos consumas más lento irá el programa. . Además. te permite acceder directamente a muchas de las opciones de Photoshop.

Si quieres saber más sobre Adobe Bridge visita el tema avanzado de Exploración de archivos. .

se ha añadido Mini ridge. Para abrir Mini Bridge. puedes usar su icono El área de trabajo Una vez abierto el programa observaremos diferentes barras y paneles distribuidos en el entorno de trabajo. Resulta especialmente útil si vamos a ir necesitando imágenes de una misma carpeta. . sobre la barra de menús.En la última versión. Recuerda que podemos abrir nuestros archivos a través del menú Archivo → Abrir. que nos permite explorar archivos directamente desde un panel. Abramos una imagen de prueba para que todas las opciones se encuentren disponibles.

todas las barras y paneles se encuentran activos y el área de trabajo toma esta forma: Puedes hacer que la disposición de los paneles y barras vuelvan al estado predeterminado haciendo clic en la opción Ventana → Espacio de trabajo: .Una vez abierta la imagen.

. y se ha de comprar una licencia para poder usarlo indefinidamente..O directamente desde la barra superior: Otra de las opciones que se te presentan es seleccionar un espacio de trabajo predefinido. Color y tono. y destacarán las opciones de menú más utilizadas para las diferentes tareas. Todos estos tipos de espacio mostrarán unas ventanas u otras (normalmente todas tienen las mismas). pero por un periodo de 30 días. Adobe permite descargar y probar el programa totalmente gratis. etc.. No obstante. Photoshop es un software comercial. Análisis. Pintura. podrás seleccionar entre 3D avanzado. Automatización. Estos modos son muy útiles para trabajar con más comodidad pues visualmente te será más rápido acceder a una opción de esta forma.

htm.OBJETIVOS GENERALES Entender y aprender los diferentes entornos que hay en cada aplicación o herramienta para la creación de páginas y web y diseño de imágenes y graficas. BIBLIOGRAFIA Sitios web referenciados. Además nos familiarizamos con el entorno de los programas o software que nos ayudaran a la hora de crear nuestro proyecto. OBJETIVOS ESPECIFICOS • • • Conocer el entorno dreanwaver mx Conocer el entorno flash Conocer el entorno photoshop • Diferenciar las utilidades en las que se puede llegar a desempeñar cada software.es/flash-cs4/t_2_4.aulaclic. .es/photoshop-cs5/t_1_2.aulaclic. http://www. http://www.htm. CONCLUSIONES Para el desarrollo y diseño de páginas web existen muchas herramientas con las cuales no podemos defender a la hora de implementarlas en la construcción de un sitio web.

Sign up to vote on this title
UsefulNot useful