Catálogo de Diseño Web by Karla Meléndez

DISEÃ&#x2018;O WEB Entorno adobe

INTRODUCCIÓN En este catálogo se resumen los resultados prácticos del aprendizaje en el curso de Diseño Web impartido por Insaforp.

Tabla de Contenido ADOBE DREAMWEAVER CC 2015

ADOBE PHOTOSHOP CC 2015

ADOBE ILLUSTRATOR CC 2015

ADOBE FLASH PLAYER CC 2015

ADOBE INDESIGN CC 2015

4 Adobe Dreamweaver CC 2015 ¿QUÉ ES ADOBE DREAMWEAVER?

Dreamweaver CS5 es un software fácil de usar que permite crear páginas web profesionales. Las funciones de edición visual de Dreamweaver CS5 permiten agregar rápidamente diseño y funcionalidad a las páginas, sin la necesidad de programar manualmente el código HTML. En Dreamweaver, el término “sitio” se emplea para referirse a una ubicación de almacenamiento local o remota de los documentos que pertenecen a un sitio web. Un sitio de Dreamweaver permite organizar y administrar todos los documentos web, cargar el sitio en un servidor web, controlar y mantener vínculos y administrar y compartir archivos. Para aprovechar al máximo las funciones de Dreamweaver, debe definir un sitio.

5 ¿QUE ES UN SITIO EN DREAMWEAVER? Un sitio de Adobe Dreamweaver es el conjunto de archivos y activos del sitio web. Puede crear páginas web en su equipo, cargarlas en un servidor web y mantener el sitio mediante la transferencia de archivos actualizados una vez guardados. También puede editar y mantener sitios web que no se hayan creado con Dreamweaver. VENTAJAS DE UN SITIO DE DREAMWEAVER Se puede trabajar en Dreamweaver sin necesidad de configurar (o definir) un sitio. Sin embargo, definir un sitio tiene numerosas ventajas: -Ayuda a evitar vínculos rotos, al actualizar automáticamente todos los archivos del sitio si se mueve o cambia el nombre de alguno de ellos.

-Ayuda a realizar operaciones de buscar y reemplazar por todo el sitio, lo que aumenta enormemente la productividad. -Ayuda a publicar el sitio fácilmente, así como a sincronizar los archivos entre su disco duro local y los archivos remotos de la web o un servidor en funcionamiento.

6 ¿QUÉ ES HTML5? HTML (HyperText Markup Language) es un lenguaje de etiquetas que permite construir los documentos webs (páginas web) de forma que los navegadores puedan entender el contenido y mostrárselo al usuario. En internet es el estándar en el que la inmensa mayoría de páginas están realizadas. HTML5 es la última versión de HTML. El término representa dos conceptos diferentes: Se trata de una nueva versión de HTML, con nuevos elementos, atributos y comportamientos. Contiene un conjunto más amplio de tecnologías que permite a los sitios Web y a las aplicaciones ser más diversas y de gran alcance. ESTRUCTURA BÁSICA DE HTML5

“En HTML existe un esqueleto básico, que todos debemos de conocer porque se viene usando desde los inicios del lenguaje. Es la conocida estructura del HEAD / BODY. Toda jerarquía de etiquetas comienza por <HTML> y dentro tenemos dos grandes bloques <HEAD> y <BODY>.”

7 LISTAS EN DREAMWEAVER

Partes de una lista Las diferentes partes de una lista son, el tag o etiqueta que la define, y sus etiquetas contenidas. Toda lista debe tener al menos un ítem (etiqueta contenida) que es el que realmente se verá en nuestro navegador. TIPOS DE LISTAS

Tenemos el tipo de lista UL, que son las listas desordenadas. Este tipo de listas contiene a etiquetas LI que van a representar cada ítem en su interior. Las etiquetas UL tienen la característica de que cada uno de sus ítems contenidos están antecedidos por un círculo (este se puede cambiar) que lo va a definir como ítem de lista. Otro tipo de lista son las OL, que son las listas ordenadas. Estas listas, a diferencia de las anteriores, en vez del círculo, cuadrado o disco, que tienen las UL, van a estar ordenadas por numeración o alfabéticamente.

8 Para qué más sirven las listas Otro uso muy común que tienen las listas, más allá de hacer una lista de ítems común es, por ejemplo, la de crear menúes o barras de navegación en paginas web (obviamente). Las listas se pueden anidar unas dentro de otras, entonces, creando una lista principal con diferentes términos y luego en cada uno poniendo otra lista, podríamos generar un menú desplegable

9 Adobe Photoshop CC 2015

¿QUÉ ES ADOBE PHOTOSHOP? Photoshop es un programa desarrollado por Adove Sistems con la finalidad de mejorar imágenes retocándolas, corrigiendo errores de fotografías, etc. También es utilizado para crear posters ya sea para publicidad o solo por diversión. Photoshop tiene un menú de funciones o herramientas para facilitarnos su manejo

10 HERRAMIENTAS DE PHOTOHOP

Entre las herramientas de photosop tenemos un listado de las más utilizadas a la hora de retocar imagenes Marco rectangular: Una herramienta para realizar selecciones cuadradas o rectangulares. Marco elíptico: Herramienta para crear selecciones circulares o elípticas. Está en el mismo grupo que el marco rectangular. Herramienta mover: Esta sirve para mover el contenido de la capa en la que estamos trabajando. La capa se mueve por completo o bien sólo el área seleccionada, si es que había una selección creada. (Más adelante hay capítulos para explicar lo que son las capas capas-de-photoshop.html) Lazo: Esta herramienta sirve para hacer selecciones a mano alzada, haciendo clic en un área de la imagen y pintando la selección a mano. La verdad es que la herramienta no es muy utilizada en el trabajo del día a día, pero es sencilla para practicar en un primer momento. Lápiz: El lápiz es similar al pincel, con la diferencia que éste realiza un trazo sin suavizado en los bordes y totalmente opaco.

Lazo poligonal: Sirve para hacer selecciones más complejas, marcando los vértices de un polígono. También es muy útil y sencilla de manejar en tus primeros pasos. Varita mágica: Es para hacer selecciones rápidas de áreas del mismo color. Pulsando en un lugar de la imagen nos selecciona todo el área que tiene el mismo color continuo. Herramienta recortar: Es un tipo de selección cuadrada, editable una vez que se ha definido, que nos sirve para recortar una imagen, quedándonos sólo con el área seleccionada. Pincel: Esta herramienta nos sirve para dibujar a mano alzada sobre la imagen. Se dispone de varios pinceles, de grosuras y formas distintas y se puede ajustar la dureza del trazo, entre otras cosas. El pincel pinta en la capa que esté activa en ese momento. Línea: Está agrupada con la herramienta recuadro y otras formas. Sirve para dibujar líneas. A las líneas se les puede colocar una flecha, configurable, al princio y/o al final de las mismas.

11 Herramienta borrador: Sirve para borrar partes de una imagen. Ojo, puesto que como muchas otras herramientas, sólo actúa sobre la capa que está seleccionada. Es decir, sólo borra las cosas que haya en la capa que estamos trabajando. Por eso a veces podrá ocurrite que intentas borrar algo y no se borra, quizás porque esté en otra capa. Tiene dos modos de borrar, uno el modo lápiz, que borra todo sin suavizado y el modo pincel, que borra difuminando los bordes. Además, igual que los pinceles y el lápiz, existen varios grosores para el trazo del borrador. Herramienta bote de pintura: Esta herramienta sirve para rellenar de color una capa entera, o bien el área seleccionada de la capa. Rellena con el color que se haya seleccionado en la barra de herramientas como color frontal. Herramienta degradado: Con esta herramienta podemos hacer degradados de color, funciona como el bote de pintura, rellenando color en toda una capa o en el área seleccionada de una capa, con la diferencia que para hacer el degradado tenemos que hacer una línea, pulsando con el ratón y arrastrando, para que el degradado se haga en ese espacio marcado. Forma personalizada: Esta herramienta nos permite dibujar un buen grupo de formas ya prediseñadas, como flores, estrellas, señales, globos, etc.

Herramienta texto horizontal: Sirve para escribir texto en una imagen. El texto puede escribirse con distintas fuentes y tamaños y tendrá el color frontal que se haya seleccionado. Asociada a esta herramienta (si hacemos clic con pulsación prolongada) veremos que hay otras herramientas de texto, entre la que podría ser útil la de texto vertical. Herramienta pluma: Esta herramienta es muy útil, pero un tanto compleja de manejar. Sirve para hacer trazados de cualquier tipo, curvos o poligonales. Lo bueno es que nos permite editar los trazados una vez hechos y que pueden ajustarse a cualquier recorrido que necesitemos, por complejo que sea. Junto con la herramienta de Pluma tendrás que aprender a usar otras herramientas. complementarias que forman parte del mismo grupo. Rectángulo: Sirve para hacer rectángulos, que pueden estar o no rellenos de color. En el lugar donde está el rectángulo hay otra serie de herramientas para hacer otros tipos de formas, como elipses, líneas o incluso formas personalizadas. Herramienta cuentagotas: Con el cuentagotas podemos seleccionar colores, de cualquier parte de la imagen, para colocarlos como color frontal.

12 Herramienta mano: Esta herramienta nos sirve para mover el lienzo. No mueve ni modifica ninguna parte de la imagen, sino que traslada el área que estamos viendo de la imagen, si es que el lienzo entero no cabe en la ventana que tenemos abierta, ya sea porque la imagen sea muy grande o porque hayamos hecho zoom. Herramienta zoom: El zoom nos sirve para ampliar la imagen o reducirla, pero sin alterar la imagen. Simplemente se hace zoom para que se vea más grande y podamos hacer retoques con más precisión, o se aleja el zoom para hacer la imagen menor y así poder verla toda en nuestra pantalla.

14 Adobe Illustrator CC 2015 ¿QUÉ ES ILLUSTRATOR? Adobe Illustrator (AI) es un editor de gráficos vectoriales en forma de taller de arte que trabaja sobre un tablero de dibujo, conocido como «mesa de trabajo» y está destinado a la creación artística de dibujo y pintura para ilustración (ilustración como rama del arte digital aplicado a la ilustración técnica o el diseño gráfico, entre otros). Es desarrollado y comercializado por Adobe Systems y constituye su primer programa oficial de su tipo en ser lanzado por esta compañía definiendo en cierta manera el lenguaje gráfico contemporáneo mediante el dibujo vectorial. Adobe Illustrator contiene opciones creativas, un acceso más sencillo a las herramientas y una gran versatilidad para producir rápidamente gráficos flexibles cuyos usos se dan en (maquetaciónpublicación) impresión, vídeo, publicación en la Web y dispositivos móviles.

15 TRABAJAR DIBUJOS EN ILLUSTRATOR

Vectores Los gráficos vectoriales (a veces denominados formas vectoriales u objetos vectoriales) están compuestos de líneas y curvas definidas por objetos matemáticos denominados vectores, que describen una imagen de acuerdo con sus características geométricas. Puede mover o modificar gráficos vectoriales con libertad sin perder detalle niclaridadporque son independientes de la resolución; mantienen los bordes nítidos cuando se les cambia el tamaño, se imprimen en una impresora PostScript, se guardan en un archivo PDF o se importan en una aplicación de gráficos basada en vectores. Como resultado, los gráficos vectoriales son la mejor opción para ilustraciones, como los logotipos, que se utilizarán¬en¬varios tamaños y distintos medios de salida. Los objetos vectoriales que cree utilizando las herramientas de dibujo y formas en Adobe Creative Cloud son ejemplos de gráficos vectoriales. Puede utilizar los comandos Copiar y Pegar para duplicar gráficos vectoriales¬entre componentes de¬Creative Cloud.

16 MÁSCARAS DE RECORTE

Una máscara de recorte es un trazado vectorial que permite enmascarar una elemento (un trazado o una imagen), de manera que este elemento adquiere la forma de la máscara ocultando todo lo que hay fuera del trazado. Es una herramienta muy práctica y ofrece unos resultados muy interesantes. ¿CÓMO SE HACE?

La función Make Clipping mask (Crear máscara de recorte) en Illustrator tiene dentro de sus ventajas la posibilidad de crear máscaras a partir de objetos de texto. En Illustrator, selecciona File>Place para importar la imagen que deseas que se forme con el texto. Con la herramienta de texto digita el texto que deseas que aparezca en la imagen. Sitúa el texto encima de la imagen, selecciona el texto y la imagen, haz clic derecho y activa desde el menú contextual Make Clipping Mask (Crear máscara de recorte).

17 FORMAS Con la herramienta Generador de CC Forma Adobe Illustrator, puede intuitivamente combinar, editar, y llenar formas en su mesa de trabajo. La herramienta Creador de formas también permite la fusión de objetos, rompiendo formas superpuestas, áreas restar, y más.

- Crear varias formas superpuestas. - Seleccione las formas que desea combinar. Seleccione la herramienta Creador de formas y haga clic y arrastre por las formas seleccionadas. - Cree otra forma que se superpone a su nueva forma combinada. Con la herramienta Selección, seleccione ambas formas. Seleccione la herramienta Creador de formas de nuevo. Mantenga pulsada la tecla Opción (Mac) Alt (Windows) o haga clic y arrastre a través de la forma que acaba de agregar.

18 Ejemplos de logotipos utilizando el creador de formas

19 Adobe Flash Player CC 2015 Flash CS5 es una potente herramienta que nos permite crear diferente tipo de contenido, como por ejemplo gráficos vectoriales, animaciones, recursos interactivos, aplicaciones multimedia, juegos, etc.

Una animación Flash es una película o serie de animación que es creada con Adobe Flash o un programa de animación similar y a menudo se distribuye en el formato de archivo SWF.

20 TÉRMINOS BÁSICOS

Adobe ActionScript Adobe ActionScript (fecha de lanzamiento en 1997) es el lenguaje de programación de la plataforma Adobe Flash. Originalmente desarrollado como una forma para que los desarrolladores programen de forma más interactiva. Un fotograma es cada una de las imágenes impresas químicamente en la tira de celuloide del cinematógrafo o bien en la película

¿Que es un fotograma? fotográfica (Konigsberg, 2004, p. 235). El resultado de la fórmula se expresa en fotogramas por segundo (en inglés frames per second y abreviado FPS).

Interpolaión Clásica La interpolación de movimiento es un tipo de animación que utiliza símbolos para crear movimiento, cambios de tamaño y rotación, fundidos y efectos de color. La interpolación clásica se refiere a la interpolación en Flash CS3 y versiones anteriores. Se conserva en Animate por motivos de transición.

21 Línea de tiempo La Línea de Tiempo representa una forma de ver los fotogramas de modo simplificado. Consta de 2 partes. 2) Los Números de Fotograma que permiten saber qué número tiene asignado cada fotograma, cuánto dura o cuándo aparecerá en la película.

¿Qué es una biblioteca de Flash?

En la biblioteca de un documento de Flash se almacenan símbolos creados en Flash, archivos importados tales como clips de video, clips de sonido, mapas de bits e ilustraciones vectoriales importadas. ... Un icono situado junto al nombre de cada elemento Símbolo del panel Biblioteca indica el tipo Un símbolo es un gráfico, botón de archivo. o clip de película que se crea una ¿Qué es una escena de vez en el entorno de edición de Animate CC (anteriormente Flash Flash? Professional CC) o mediante las clases SimpleButton (AS 3.0) y Una Escena no es más que una MovieClip. Estos símbolos pueden porción de la Línea de Tiempo, con volver a utilizarse en el mismo o en todo lo que ésta incluya (capas, otros documentos. fotogramas...). Su finalidad principal es la de ORGANIZAR la película, de ¿Qué son 24 fps? modo que las partes de la película que no tengan relación entre sí no Fotogramas por segundo. El número estén una a continuación de la otra de fotogramas por segundo (FPS), (seguida en la línea de tiempo). también conocido como cuadros por segundo (del inglés frames per second) o framerate, es la velocidad o tasa a la cual un dispositivo muestra imágenes llamadas cuadros o fotogramas.

Adobe flash professional crea y edita las animaciones multimedia y flash player es el reproductor utilizado para visualizar los archivos generados con flash professional.

23 animaciones en 2d utiizadas El area de trabajo llamado tambien enpaginas web con contenido plataforma esta compuesto por multimedia. muchos paneles que rodean la escena de animacion que utilizamos -Trabaja con animacion clasica, consiste en la secuencia de para crear nuestra pelicula. Una linea de tiempo es una fotogramas independientes que secuencia de fotogramas como el al reproducirla da la sensacion de rollo de una camaraque nos muestra movimiento a dibujos para crear las imagenes en forma secuencial. una animacion mas real. El cabezal trabaja con la linea de tiempo mientras que una pelicula -Flash genera automaticamente los es ejecutada desde el flash player fotogramas intermediosentre un 9 y cuando el cabezal llega a un origen y un final. determinado fotograma , cualquier codigo u objeto que se encuentre -Permite copiar y pegar caracteres de doble byte desde ilustrator y alli se ejecutara. photoshop sin perdida de calidad Interfaz de usuario -Los archivos de aplicaciones -Organiza las imagenes y sonidos flash pueden ser muy facilmente en capas y fotogramas para crear decompilados en su codigo fuente y sus valores.

Ă rea de trabajo

Ventajas -Interfaz algo mas sencillo -Editor de animaciones muy completo -lenguaje de programcion funcional -Importa ficheros multimedia a las peliculas -Enormes capacidades de exportacion.

24 Adobe InDesign CC 2015 ¿Qué es Adobe InDesign? Adobe Indesign es la aplicación número uno a nivel mundial para diseño editorial. Con esta aplicación que es casi el estándar de la industria podemos realizar desde proyectos sencillos como puede ser un flayer a color, blanco y negro, con texto, imágenes etc, hasta creaciones más complejas tales como revistas, libros convencionales y electrónicos, periódicos entre otras muchas publicaciones.

Con Indesign podemos maquetar una revista destinada para impresión o crear un documento PDF plano o interactivo rico en recursos multimedia, un EPUB e incluso publicaciones para mostrar en nuestros dispositivos digitales como tablets o smartphones. Para ello Indesign proporciona un acceso sencillo a una serie de ajustes preestablecidos y también a plantillas gratuitas de Adobe Stock al igual que sus hermanos Photoshop e Illustrator CC. También en la última versión de Indesign se han actualizado los iconos de las distintas opciones para que coincidan con los dos programas anteriormente citados, lo que hace que el flujo sea mucho más intuitivo. El formateo del texto de Indesign va

a ser bastante sencillo gracias a sus estilos de párrafo y carácter. Por otro lado la incorporación de nuestros recursos será igualmente sencillo ya que Indesign acepta una gran cantidad de formatos de archivo inclusive archivos de audio y vídeo. Al igual que la inclusión de contenidos en la aplicación, la salida de los mismos será variada, es decir, podemos exportar nuestros contenidos en formato Flash, Html, EPUB de última generación, EPS, JPG, PNG, etc.

26 Espacio de Trabajo

27 A. Ventanas de documento en forma de fichas B. Publish Online C. Cambiar a Espacio de trabajo táctil D. Conmutador de espacios de trabajo E. Barra de título de panel F. Barra de búsqueda G. Panel Control H. Botón Contraer en iconos I. Grupos de paneles acoplados verticalmente J. Barra de estado K. Panel Herramientas

KARLA LISSETTE MELÉNDEZ DURÁN