• Author / Uploaded
• luisguzman123456

Citation preview

Introducción ¿Qué es Adobe Muse?

M

use Crea y publica sitios web dinámicos para ordenadores de sobremesa y dispositivos móviles que cumplan con los estándares web más recientes sin escribir código. Diseña libremente con herramientas conocidas y cientos de fuentes web. Aporta interactividad fácilmente, incluidas presentaciones de diapositivas, formularios y otros elementos. Guarda archivos con Creative Cloud™ para acceder desde cualquier lugar y compartir con facilidad. Todo tu mundo creativo en un único lugar. Solo en Creative Cloud.

Funciones: Planificación de Sitios Sencillo: Diseña tu sitio de forma visual. Añade, nombra y organiza las páginas en tu mapa del sitio y aplica la configuración de la página maestra con tan solo unos clics. Arrastra y suelta las páginas para reorganizarlas.

Funciones de diseños intuitivos: Utiliza el nuevo panel Capas para controlar los elementos de diseño. Diseña con la ayuda de las conocidas herramientas de Adobe como Cuentagotas, Guías inteligentes, Pegar en contexto y Editar original.

Adobe Muse

tu

Cientos de fuentes: Elige entre cientos de tipos de letra, incluidas las Adobe Edge Web Fonts alojadas en el servicio de Adobe Typekit®, además de fuentes compatibles con la Web y fuentes de sistema. Interactividad fascinante: Añade a tus sitios web navegación personalizada, presentaciones de diapositivas, formularios de contacto y otros elementos con solo arrastrar y soltar. Todos los widgets interactivos de Adobe Muse CC funcionan de forma táctil en los dispositivos móviles.

HTML incrustado: Añade a tus sitios Google Maps, vídeos de YouTube, feeds de Facebook, archivos de animación HTML5 y mucho más sin escribir código. Solo tienes que copiar y pegar el código fuente en tu página y Adobe Muse CC se encarga del resto.

1

Prueba y vista previa del sitio: Realiza una vista previa de las versiones para ordenador de sobremesa, smartphone y tablet tus sitios web. Revisa los sitios web tus clientes y realiza modificaciones antes de que se publiquen.

de con

Edición en el navegador: Permite que los propietarios de los sitios web introduzcan cambios en el contenido de sus sitios web publicados por medio de un navegador. Decide si deseas fusionar los cambios con los archivos originales de Adobe Muse o no. Optimizado para motores de búsqueda: Consigue que te encuentren en Google, Bing y Yahoo! Los mapas de sitio generados automáticamente se han optimizado para su funcionamiento con motores de búsqueda, con independencia de que utilices servicios de alojamiento de Adobe o de un proveedor externo. Acceso a archivos desde cualquier lugar: Disfruta de 20 GB de almacenamiento en la nube y del acceso a tus archivos de sitios web en cualquier momento y en cualquier lugar. Comparte bocetos de diseños y demostraciones de sitios publicados con clientes y compañeros. Páginas maestras: Define y controla elementos comunes a varias páginas, como encabezados, pies de página, logotipos y navegación. Basta con agregarlos al diseño de las páginas maestras.

Adobe Muse

2

Entorno del Programa. Barra de Menús

Barra de Títulos

Fases de Publicación

Barra de Propiedades

Esquema de la Páginas “Dividas en Organigramas”

Páginas Maestra

Barra de Títulos: Lugar donde se encuentra el nombre de nuestra página.

Adobe Muse

Barra de Menús: Es la barra de menú estándar encontrada en todos los programas de diseño.

Fases de Publicación: En ella encontramos 4 fases que son planificación, Diseño, Pre visualización y Publicación. Nos da la posibilidad la crear nuestras páginas y también generar nuestra página maestra.

Esquema de las Páginas: Esta ordenada por un orden jerárquico en el cual podemos crear los botones muy fácilmente.

Página Maestra: Nos da la posibilidad de crear objetos que se repiten en otras páginas.

Tenemos la posibilidad de diseñar las páginas y también modificar la Página maestra Nos permite visualizar tal como se verá en el navegador

Permite Publicar la página online. Ambiente gráfico para diseñar la página podemos insertar formas, botones, imágenes, etc.

3

¿Cómo Crear un Sitio Nuevo? Crear un Nuevo sitio. 1- Clic en Archivo. 2- Nuevo sitio. 3- O directamente con el comando Ctrl+N en nuestro teclado

Configurar el nuevo sitio

Configura la plataforma en el cual se hará la página, Ordenador, Tablet o Móvil.

Adobe Muse Configura el anchoPermite y la altura mínima pixeles.más práctica la cantidad de columnas, ancho y medianil. colocar deen manera

Configura las 4 márgenes principales enelpixeles. Permite cambiar relleno de las márgenes que se verá en el navegador.

4

Lugar de trabajo. Barra de Herramientas y colores

Panel de ventanas acoplables.

Espacio de Trabajo Regla

Herramientas de Diseño en Adobe muse

Adobe Muse

Nivel(H) de zoom. Teclado: (H) Texto. Teclado: Mano. (T) Teclado: Opciones de Visualización.

Selección. Teclado: (V)

Ir a (M) Página. Teclado: (Ctrl+J) Cortar Teclado: (C) Rectángulo Teclado: Lupa Teclado: (Z)

Importante: Cada herramienta cuenta con propiedades diferentes, que podemos verlas por debajo mismas de ellas.

Cambia el color del fondo o de un objeto, dependiendo sobreagregar que estamos ubicados Modifica el grosor de la línea de un objeto. Permite efectos tanto como sombras, resplandore

Propiedades de la herramienta selección

5 Modifica el color uno de los de los objetos imágenes. Aplica el transparencia a losde objetos imágenes. Redondea porcontornos uno, los extremos de losoModifica objetos, poniendo redondez en pixeles. color de el losgrado contornos en e nuestra página

Ejercicio Nº 1. Crea lo siguiente utilizando lo aprendido.

Rellenos degradados. 1- En la barra de herramienta hacer clic en Relleno.

Adobe Muse

2- Luego elegir la opción degradada. 3- Elegir dos muestras de colores. 4- Luego la dirección del nuestro degradado. Ejercicio Nº 2.

Realizamos lo siguiente:

Relleno con imagen.

1- Insertar una forma rectangular 2- En la barra de herramienta hacer clic en Relleno.

3- Luego elegir la opción Imagen. 4- Se abrirá una ventana en el cual podrás importar la imagen que usaremos. 6

5- Una vez importada la imagen tendremos que configurar el “Encaje”. Entre las opciones de Encaje tenemos: Cambiar escala hasta rellenar, Cambiar escala hasta encajar, Tamaño original, Mosaico, Mosaico Horizontal, Mosaico Vertical. Ejercicio Nº 3.

Realizamos lo siguiente:

Adobe Muse

7

Propiedades de la herramienta texto.

Aplica: Negrita, Cursiva, Subrayado, en ese orden. Permite cambiar el estilo de Texto. Relleno del texto

Tamaño Alineaciones:Modificamos Izquierda, centrada, derecha y justificada, en ese orden. La página maestra. 1- Le damos doble clic a la página maestra que está ubicado en la parte inferior de nuestra ventana. 2- Se abrirá nuestro espacio de trabajo y empezamos a insertar los Clic en el cuadro para modificar la página maestra. objetos que serán visibles en todas las páginas. 3- Realizamos los cambios que deseemos.

Adobe Muse

8

Creamos la Página maestra

1- Creamos un nuevo sitio de trabajo de 950x1000 px. 2- Nos ubicamos en la página maestra. 3- Vamos a Archivo->Colocar y buscamos un fondo para nuestra página.

Tamaño del fondo: X: 0 y:0 An: 959 Al: 1000

Fondo de la página. 4- El fondo debe tener más o menos el mismo tamaño de nuestra página. 5- Luego pasamos a poner el encabezado y el pie de página como nos muestra la imagen.

Adobe Muse Encabezado

Pie de página

9

Área de planificación. Una vez creada la página maestra nos dirigimos en el área de planificación de nuestra página web.

Mostrará en pantalla lo siguiente.

Crean páginas que luego se convertirán en botones de acceso para nuestra página.

Oculta los SubPáginas

El Área de planificación está estructurada en forma de

Adobe Muse

10

Ejercicio Nº 4. Crear el siguiente árbol de páginas en el área de planificación.

Planificación. 1- Inicio. 2- Nosotros. 2.1- Contactos. 2.2- Inicios 3- Ventas. 3.1- Hardware 3.2- Software 4- Cursos. 4.1- Secretariado. 4.2- Informática.

Adobe Muse

11

Crea la siguiente página.

Pasos: 1- Lo primero que aremos es, ir a área de Planificación. 2- Creamos nuestras páginas los nombres de: Inicio, Educación, Objetivos, Actividades y Contacto, uno tras de otro. 3- Nos dirigimos en nuestra Página maestra y Colocamos los objetos que se repetirá en todas las páginas. 4- Creamos lo siguiente de abajo en sus correspondientes páginas. 5- Observación: En la página maestra inserta un menú en, Objeto->Insertar Widget->Menú, y elija el menú horizontal, luego personaliza los colores del menú.

INICIO

Adobe Muse

12

EDUCACIÓN.

Adobe Muse

13

OBJETIVOS.

Adobe Muse

14

ACTIVIDADES

Adobe Muse

15

CONTACTOS

Adobe Muse

16

P

Widgets en Muse

uede agregar funciones interactivas de sitio y contenido generado de forma dinámica con los widgets en Muse. Los widgets son objetos predefinidos y configurables con algunas de las prestaciones web más habituales, como menús, formularios, proyecciones de diapositivas, etc. En Muse encontrará una amplia gama de widgets que le facilitarán hasta el diseño web más complicado. El estilo de los widgets de Muse puede ir acorde al diseño de su sitio, de forma que se combinen perfectamente con el resto de páginas web. La Biblioteca de widgets contiene todas las funciones del sitio incorporadas previamente (widgets) que se pueden arrastrar a las páginas, configurar para controlar su comportamiento y asignar un estilo para modificar su aspecto.

Tipos de widgets En Adobe Muse se incluyen los siguientes tipos de widgets: Widgets de composición: estos widgets permiten interactuar con una zona de la página web para cambiar el contenido mostrado en otra zona. Este cambio puede implicar una animación de desplazamiento o atenuación. Widgets de formulario: añaden un formulario al sitio que pueden usar los visitantes para ponerse en contacto con usted. Hay disponibles diferentes campos de formulario, en función del widget de formulario elegido. Widgets de menú: crean una barra de menús rellena de forma manual o dinámicamente con un estado para cada elemento del menú. En cada página, el vínculo de menú correspondiente tendrá de forma automática un estado "activo" para demostrar que se encuentra en esa página. Widgets de panel: muestran los paneles de contenido de uno en uno, con vínculos de navegación intuitivos para cambiar de panel visible. Puede elegir entre una estructura de acordeón con una animación de desplazamiento o un diseño con pestañas mucho más familiar. Widgets de proyección de diapositivas: estos widgets permiten mostrar las imágenes en una galería con animaciones más que elegantes. Son ideales para proyecciones de imágenes sencillas. Si quiere darles un uso más complejo, le recomendamos que use un widget de composición. Widgets sociales: los widgets sociales permiten configurar de forma fácil HTML personalizado e incrustarlo en las páginas de Muse. La mayoría de widgets web incluyen funciones que también están disponibles si se incrusta HTML de sitios web de terceros. Podrá ahorrar bastante tiempo si añade y configura el contenido web desde Muse en lugar de generar el código fuera de la aplicación y pegarlo después en Muse como HTML incrustado.

Adobe Muse

17

Adición de un widget a una página web de Muse Puede seleccionar y añadir widgets a una página web de Muse desde la biblioteca de widgets. Para añadir un widget, haga lo siguiente: 1. En Adobe Muse, seleccione Ventana > Biblioteca de widgets. Aparecerá el panel de la biblioteca de widgets. 2. En dicho panel, seleccione el widget que desee y arrástrelo a la página web de Muse. Para seguir configurando el widget, haga clic en el botón para abrir el panel de opciones. Para obtener más información, consulte Configuración y personalización de widgets.

Configuración y personalización de widgets En Adobe Muse podrá configurar widgets a través del panel Opciones después de colocarlos en las páginas web. El panel Opciones es un panel contextual que le permite aplicar cambios para actualizar los ajustes que son específicos de dicho widget. El panel Opciones contiene ajustes con los que es posible determinar el aspecto del contenido. Con las opciones de relleno y trazo podrá mejorar aún más el aspecto de un widget. Si el widget contiene texto, puede usar el panel Texto(Ventana > Texto o las opciones de texto del panel de control) para modificar y aplicar estilo al texto conforme lo crea necesario.

Adobe Muse

Para configurar un widget, haga lo siguiente:

En el ejemplo siguiente, se muestra el panel Opciones de un widget horizontal. 1. En Adobe Muse, arrastre cualquier widget a la página web. 2. Con el widget seleccionado, haga clic en el botón Opciones.

para mostrar el panel

3. En el panel Opciones, modifique o actualice los ajustes según sea necesario. 4. Haga clic en cualquier otra parte de la página para cerrar el panel Opciones.

18

Selección de elementos anidados y contenedores dentro de una jerarquía de widget Cuando se arrastra un widget fuera de la Biblioteca de widgets y a una página, fundamentalmente se está colocando un conjunto anidado de contenedores. Al trabajar con widgets, es importante entender cómo se debe seleccionar tanto el widget como sus contenedores. Adobe Muse muestra su selección actual con el indicador de selección. El indicador de selección (que encontrará en la esquina superior izquierda de Adobe Muse) muestra la selección actual, junto con un menú desplegable en el que podrá pre visualizar un objeto con un estado concreto. En los siguientes ejemplos, el indicador de selección muestra la selección de la página (si no se ha seleccionado ningún objeto de la página web), un widget de menú (al seleccionar dicho widget) y un elemento de menú (contenedor de un widget de menú).

Al dejar todos los elementos de la página sin seleccionar.

Adobe Muse Al seleccionar un widget de menú.

Al seleccionar un contenedor y en este caso un elemento de menú en un widget de menú. Cuando se hace clic en todo el widget, el indicador de selección muestra la palabra "Widget". Si hace clic de nuevo, puede seleccionar un contenedor dentro del widget y el indicador de selección muestra la palabra "Contenedor". Puede seguir haciendo clic varias veces para seleccionar los elementos (como, por ejemplo, los marcos de texto) que se anidan en el interior de los contenedores. Mientras selecciona un marco de texto, el indicador de selección muestra la palabra "Marco de texto". Mientras hace clic en un widget para "profundizar" en el interior de los elementos anidados, es recomendable tener en cuenta las palabras del indicador de selección para saber qué elementos anidados están seleccionados. Deberá seleccionar diferentes contenedores (como, por ejemplo, botones individuales de navegación) para actualizar los estados de los botones, lo que le permite controlar opcionalmente el aspecto de los botones cuando la página se carga por primera vez, cuando el visitante se sitúa sobre un botón y cuando el visitante hace clic en ellos. Haga clic en los contenedores anidados en un widget; se puede hacer clic varias veces en el elemento que desee editar. Tenga en cuenta el indicador de selección y las opciones presentadas en el panel Estados para ver cuándo ha seleccionado el elemento anidado que desea cambiar. Una vez que haya terminado de actualizar un widget, puede hacer clic en otra parte (otro lugar de la página) para deseleccionar el widget o pulsar la tecla Escape varias veces para subir un nivel en la jerarquía del widget.

19

Control del comportamiento y visualización de los widgets actualizando los ajustes en el menú de opciones 1- Después de arrastrar un widget fuera de la Biblioteca de widgets y a una página, verá un icono azul de flecha que aparece en la esquina superior derecha del widget, cuando el widget está seleccionado. Haga clic en este icono azul de flecha para abrir el menú de opciones. 2- Cada widget tiene diferentes opciones disponibles, por lo que las opciones que se pueden definir en la interfaz del menú Opciones pueden variar. La configuración controla el comportamiento del widget (por ejemplo, eligiendo si una presentación de diapositivas se reproduce automáticamente o si los visitantes deben hacer clic en las miniaturas para ver las imágenes más grandes) y su visualización (por ejemplo, especificando el tipo de transición que se animará a medida que se muestre cada nueva imagen). 3- Como alternativa, también puede optar por configurar manualmente los widgets de menú, si prefiere asignar personalmente un nombre a los botones y añadirles los vínculos a las páginas específicas, en lugar de permitir que Muse cree los elementos del menú. En el menú Opciones, en la sección denominada Tipo de menú, puede seleccionar la opción Manual

Adobe Muse

20

Ejercicios de Widgets. Ejercicio 1- Widget en Blanco: 1- Crear un Nuevo sitio. 2- Dirigirse al Área de diseño. 3- Insertar un widget de tipo composición en blanco. Objeto->Insertar Widget>Composición->En Blanco. 4- Editar cada estado de cada uno de los tres botones inferiores y también la imagen que aparecerá por encima de ese botón. (Con solo hacer un clic en el botón vas cambiando de acción o estado.) 5- Por cada botón insertar una imagen semejante al ejemplo de abajo (Puedes hacer doble clic en el cuadro donde ira el celular y rellenar con una imagen.) 6- Debes tener en cuenta que para poder nombrar cada botón solo debes utilizar la herramienta de texto. 7- Lo único que va cambiando en la este widget es la imagen de fondo del celular. (Podrías insertar una forma y rellanarla con la imagen de fondo) 8- Una vez terminado de editar los tres botones puedes visualizar el trabajo en el Área de Previsualizar.

Adobe Muse

21

Ejercicio 2 - “Presentación con diapositivas” 1- Crear un Nuevo sitio. 2- Dirigirse al Área de diseño. 3- Insertar un widget de tipo Proyección de Diapositivas. Objeto->Insertar Widget ->Proyección de Diapositivas ->En Blanco. 4Ajuste el tamaño del widget a su gusto, para añadir las imágenes

dirigirse

en

Proyección de Diapositivas

las

opciones

de

, y luego clic en el

icono para poder añadir las imágenes. 5- Una vez insertadas las imágenes, configuramos lo siguiente:  Transición: Horizontal.  Velocidad de Transición: 1 segundo.  Desactivar la Reproducción Automática. 6- Para cambiar los botones de siguiente y anterior lo que debemos hacer es, colocar una imagen que será nuestro botón de siguiente y anterior en Archivo->Colocar o con el comando Ctrl+D. 7- Clic sobre nuestra imagen y nos dirigimos en Edición->Cortar. 8- Ubicamos nuestros botones, uno al lado izquierdo y otro al lado derecho. 9- Doble clic sobre el botón derecho para marcarlo, nuevamente doble clic sobre el botón para seleccionar el contenido. 10- Una vez seleccionado, pegamos nuestra imagen, y realizamos lo mismo para el otro lado. (Usted debe realizar las transformaciones acorde al lado del botón “Que mire al lado izquierdo o derecho”, automáticamente la imagen heredara todas las características del botón).

Adobe Muse

22

11- Podemos cambiar el píe de la ilustración “El texto que aparece por debajo de las imágenes”, por sus correspondiente nombres “Invierno, Otoño, Primavera, Verano”. Para poder modificar el contenido del pie de la ilustración solo debemos hacer doble clic sobre ella, y para pasar a la siguiente imagen bastará con un clic sobre nuestro botón. 12- Una vez terminada la edición del pie, solo queda ver nuestra Presentación en el área de Previsualizar.

Ejercicio 3 “Crear un formulario” 1- Crear un Nuevo sitio. 2- Dirigirse al Área de diseño. 3- Insertar un widget de tipo Proyección de Diapositivas. Objeto->Insertar Widget ->Formulario ->Contacto (Sencillo), o estirarla desde la biblioteca de Widgets. 4- Una vez insertado el formulario colocamos los siguientes campos: Dato Nombres

Adobe Muse Apellidos

Lugar de Nacimiento Curso Número móvil Edad

de

Teléfono

Todos los campos deben ser Obligatorios. 23

Ejercicio 4. “Panel” 1- Crear un Nuevo sitio. 2- Dirigirse al Área de diseño. 3- Insertar un widget de tipo Proyección de Diapositivas. Objeto->Insertar Widget ->Panel ->Ficha, o estirarla desde la biblioteca de Widgets. 4- Para poder editar el texto de cada ficha debemos darle un clic sobre la ficha, y para editar el contenido doble clic sobre la misma. 5- Realizamos lo Siguiente:

Adobe Muse

24

Ejercicios

Adobe Muse

25

Adobe Muse

26

Ejercicio Final

Adobe Muse

27