Guia Adobe Muse

MUSE TUTORIALS - diseño web sin código -

Cómo crear un sitio web responsivo con

ADOBE MUSE paso a paso Esta guía incluye 18 capítulos donde aprenderás las funciones más importantes de Muse para que puedas crear c rear sitios web responsivos.

GUÍA Y VIDEO TUTORIALES PASO A PASO

www.musetutorials.com

ÍNDICE

MuseTutorials.com

ÍNDICE INTRODUCCIÓN

2

CAPÍTULO 1: REVISANDO 1: REVISANDO EL PROYECTO

7

CAPÍTULO 2: CONSTRUIR 2: CONSTRUIR LA ESTRUCTURA DEL SITIO

8

CAPÍTULO 3:: 3:: CONFIGURAR LA PÁGINA MAESTRA

9

CAPÍTULO 4: CREAR 4: CREAR UN PIE DE PÁGINA RESPONSIVO

10

CAPÍTULO 5: AÑADIR 5: AÑADIR PUNTOS DE RUPTURA AL PIE DE PÁ PÁGINA GINA RESPONSIVO

11

CAPÍTULO 6: CREAR 6: CREAR UN MENÚ RESPONSIVO

12

CAPÍTULO 7: AÑADIR 7: AÑADIR PUNTOS DE RUPTURA AL MENÚ RESPONSIVO

13

CAPÍTULO 8: DISEÑAR 8: DISEÑAR LA PÁGINA DE INICIO

14

CAPÍTULO 9: AÑADIR 9: AÑADIR PUNTOS DE RUPTURA A LA PÁGINA DE INICIO

15

PÁGINA GINA ABOUT CAPÍTULO 10: DISEÑAR LA PÁ

16

CAPÍTULO 11: AÑADIR PUNTOS DE RUPTURA A LA PÁGINA ABOUT

17

CAPÍTULO 12: DISEÑAR 12: DISEÑAR LA PÁGINA PRE ORDER

18

CAPÍTULO 13: AÑADIR 13: AÑADIR PUNTOS DE RUPTURA A LA PÁGINA PRE ORDER

19

CAPÍTULO 14: PUBLICAR 14: PUBLICAR EL SITIO WEB EN BUSINESS CATALYST

20

CAPÍTULO 15: CARGAR 15: CARGAR EL SITIO WEB EN SERVIDOR FTP

21

CAPÍTULO 16: EXPORTAR 16: EXPORTAR HTML

26

CAPÍTULO 17: REVISAR 17: REVISAR EL COMPORTAMIENTO DEL SITIO WEB

27

CAPÍTULO 18: RECURSOS 18: RECURSOS PARA TUS PROYECTOS Y DESPEDIDA

28

Suscríbete a mi canal de YouTube

Dale “me gusta“ a mi página de Facebook

Página 2

INTRODUCCIÓN

MuseTutorials.com

SOBRE LA GUÍA La intención de esta guía es enseñarte paso a paso la creación de un sitio web responsivo con la nueva versión de Adobe Muse CC Responsive. Encontrarás 18 capítulos, cada uno con una introducción y un vídeo tutorial. Debes realizarlos en orden, no pases por alto ningún detalle. Te proporcionaré todos los materiales para que puedas seguir esta serie de tutoriales. Lo único que necesitas para realizar este taller es la última versión de Adobe Muse CC y tiempo. En aproximadamente dos horas habrás aprendido a crear la estructura de un sitio web, diseñar páginas, establecer puntos de ruptura, cargar el sitio en un servidor FTP y más... Como ves esta guía es totalmente gratis, no vale absolutamente nada ;) La única compensación que podría tener es que, en el caso de que contrates un hosting, compres un dominio o te suscribas a recursos premium para Adobe Muse, emplearás mis webs más recomendadas: Hostgator para el hosting, GoDaddy para los dominios y Muse for you / Muse Themes para los recursos. Te costará lo mismo, y yo, como aliado, me llevaré una pequeña comisión, ¡y te estaré eternamente agradecido! De verdad



Página 3

INTRODUCCIÓN

MuseTutorials.com

DERECHO DE AUTOR Muse Tutorials. Guía ocial de http://musetutorials.com/

Editor Adobe InDesign / Adobe Photoshop Copyright © 2016 [http://musetutorials.com/]

Derechos de autor reservados Se prohíbe la distribución ilegal de esta guía. Para obtener más información, póngase en contacto conmigo en: [email protected] Si bien se han tomado todas las precauciones en la preparación de esta guía, el editor y los autores no asumen ninguna responsabilidad por errores u omisiones o por daños resultantes del uso de la información contenida en este documento. La guía incluye material encontrado de forma libre y gratis en Internet (especícamente el curso gratuito en inglés de

Danielle Beaumont llamado “How to create a responsive website in Muse“), además de links de referidos, sin obligar en ningún momento al lector a emplearlos ni suponer esto algún tipo de coste extra en comparación al servicio estándar.



Página 4

INTRODUCCIÓN

MuseTutorials.com

¿QUÉ ES ADOBE MUSE? Adobe Muse es un programa WYSIWYG (what you see is what you get - lo que ves es lo que es) que te permite diseñar sitios web en HTML5 sin escribir una línea de código. Está creado especialmente para diseñadores grácos, su formato

y herramientas son muy parecidas a InDesign. Actualmente, con la última versión, podemos crear sitios web totalmente responsivos usando puntos de ruptura, que se adaptarán a cualquier dispositivo. Sus opciones básicas pueden ser ampliadas, o complementadas, a través de widgets de terceros (yo te recomiendo estos widgets), con los que podremos optimizar nuestros diseños con funciones adicionales. También tendremos la posibilidad de ofrecer a nuestros clientes un editor en línea (in browser editing) para que ellos mismos puedan actualizar secciones en el sitio web. En lo personal, he utilizado Adobe Muse desde hace 4 años y nunca me ha decepcionado, es una herramienta de diseño excelente que siempre me sorprende con sus actualizaciones, y que me ha permitido la libertad de diseñar y crear sitios web completamente funcionales y profesionales para mis clientes y para mis proyectos.



Página 5

INTRODUCCIÓN

MuseTutorials.com

¿QUÉ ES DISEÑO WEB RESPONSIVO? Según Wikipedia: El diseño web responsivo es conocido por las siglas RWD del inglés Responsive Web Design, que es una losofía de diseño y desarrollo cuyo objetivo es adaptar la apariencia de las páginas web al dispositivo que se esté

utilizando para visualizarla; como smartphones, tablets, laptops, computadoras de escritorio, etc. Para entender mejor este concepto, puedes ver este video tutorial donde te lo explico detallamente.

Existen 4 tipos de diseño web: Estático: es el diseño web clásico, caracterizado por tener una anchura especíca que no cambiará bajo ninguna circunstancia, puede ajustarse a la pantalla de un dispositivo móvil pero el contenido va a reducirse a tal punto que

será difícil interactuar con él. Fluido: el diseño web fluido posee la anchura del navegador, resuelve de alguna forma los problemas del diseño web estático, pero crea otros problemas. Cuando se reduce el tamaño del navegador el contenido fluye de una forma elástica, el problema aparece cuando el espacio se vuelve cada vez más pequeño y el contenido se rompe completamente y deja de ser práctico.

Adaptable: el diseño web adaptable pretende arreglar este problema, utilizando el diseño estático, adaptando el contenido a distintos tamaños de pantalla. Mientras el navegador se hace más pequeño, un nuevo diseño de pantalla aparecerá. El diseño adaptable brinca de uno a otro. Los puntos donde brinca se llaman puntos de ruptura (break points). Responsivo: el diseño web responsivo se parece mucho al fluido, la diferencia es que también contiene los puntos de ruptura del diseño web adaptable, por lo que podemos decir que el diseño responsivo es igual a fluido más adaptable. Es flexible, es adaptable, todo el contenido responde perfectamente al tamaño de la pantalla, nunca pierde coherencia. Adobe Muse CC presenta una nueva actualización con esta innovadora función de diseño web responsivo, utilizado la opción de puntos de ruptura para crear diseños que respondan a cualquier tamaño de pantalla. Los pu ntos de ruptura son aquellos lugares que podemos añadir en la anchura de nuestro sitio web para determinar cuándo y cómo el diseño va a cambiar. En la versión anterior de Adobe Muse, solíamos diseñar a partir del tamaño de la pantalla; un diseño para escritorio, otro para tabletas y por último otro para teléfonos. En la versión actual de Adobe Muse, tenemos que pensar a partir del diseño y cómo se comporta ante el ancho de pantalla para de esta manera poder colocar los puntos de ruptura.



Página 6

CAPÍTULO 1

MuseTutorials.com

1. REVISANDO EL PROYECTO En esta serie de video tutoriales te voy a enseñar a diseñar un sitio web en Adobe Muse CC sin escribir una sola línea de código; podrás descargar todo el material necesario aquí para seguir paso a paso esta guía. Primero vamos a entender un poco de qué va el proyecto, te mostraré el sitio web que vamos a diseñar (kickapigeon.com), y por último analizaremos el contenido de la carpeta “materiales“ que has descargado previamente; así que no esperes más y dale play al primer video :)

VER VIDEO TUTORIAL





Página 7

CAPÍTULO 2

MuseTutorials.com

2. CONSTRUIR LA ESTRUCTURA DEL SITIO En este capítulo vamos a crear un nuevo sitio, exploraremos un poco el modo de planicación, y conseguiremos

una estructura adecuada. Además, crearemos y nombraremos las páginas que van a conformar el sitio y añadiremos un favicon.

VER VIDEO TUTORIAL





Página 8

CAPÍTULO 3

MuseTutorials.com

3. CONFIGURAR LA PÁGINA MAESTRA En este capítulo vamos a crear una página maestra para mantener las partes del diseño que se van a utilizar en cada página del sitio web. Vamos a instalar una fuente web y el widget “PIGEON“ que contiene elementos necesarios para el tutorial, añadiremos los estilos de párrafo y los estilos grácos que utilizaremos

durante todo el diseño y también el esquema de colores.

VER VIDEO TUTORIAL





Página 9

CAPÍTULO 4

MuseTutorials.com

4. CREAR UN PIE DE PÁGINA RESPONSIVO En este capítulo vamos a crear y darle estilo al pie de página del sitio web. Vamos a añadir íconos sociales y los vamos a asociar hipervínculos. Utilizaremos el widget de menú para denir la navegación y utilizaremos un

formulario de suscripción prediseñado.

VER VIDEO TUTORIAL





Página 10

CAPÍTULO 5

MuseTutorials.com

5. AÑADIR PUNTOS DE RUPTURA AL PIE DE PÁGINA En este capítulo vamos a revisar las propiedades “responsivas“ del pie de página. Además añadiremos los puntos de ruptura y reorganizaremos los elementos en cada uno de ellos para una mejor experiencia de usuario.

VER VIDEO TUTORIAL





Página 11

CAPÍTULO 6

MuseTutorials.com

6. CREAR UN MENÚ RESPONSIVO En este capítulo crearemos y le daremos estilo a la cabecera de la página web con propiedades “responsivas“. También vamos a añadir el logo, un botón y ajustaremos el diseño con características de alineación. Luego,

vamos a añadir un menú a la cabecera de navegación del sitio y personalizaremos su apariencia.

VER VIDEO TUTORIAL





Página 12

CAPÍTULO 7

MuseTutorials.com

7. AÑADIR PUNTOS DE RUPTURA AL MENU RESPONSIVO En este capítulo vamos a usar la opción de “Fijar“ y otros ajustes responsivos para asegurar que los elementos de la

página se muestren correctamente. Añadiremos puntos de ruptura para gestionar la transición entre diseños cuando el navegador cambie de tamaño. Utilizaremos un menú prediseñado que se adaptará en los dispositivos móviles.

VER VIDEO TUTORIAL





Página 13

CAPÍTULO 8

MuseTutorials.com

8. DISEÑAR LA PÁGINA DE INICIO En este capítulo vamos a diseñar la página de inicio, con todos los elementos necesarios. La sección de inicio y la cabecera, luego la secciones descriptivas del producto y por último la sección de “pre order” (pedidos).

VER VIDEO TUTORIAL - PARTE 1  VER VIDEO TUTORIAL - PARTE 2





Página 14

CAPÍTULO 9

MuseTutorials.com

9. AÑADIR PUNTOS DE RUPTURA A LA PÁGINA DE INICIO En este capítulo vamos a añadir los puntos de ruptura. Haremos ajustes en el texto y las imágenes, para que el

contenido pueda cambiar de tamaño y escale correctamente en todos los navegadores.

VER VIDEO TUTORIAL





Página 15

CAPÍTULO 10

MuseTutorials.com

10. DISEÑAR LA PÁGINA ABOUT En este capítulo vamos a diseñar la página “About“, con todos los elementos necesarios. Nos guiaremos de la página original del producto (kickapigeon.com).

VER VIDEO TUTORIAL





Página 16

CAPÍTULO 11

MuseTutorials.com

11. AÑADIR PUNTOS DE RUPTURA A LA PÁGINA ABOUT En este capítulo vamos a añadir los puntos de ruptura. Haremos ajustes en el texto y las imágenes, para que el

contenido pueda cambiar de tamaño y escale correctamente en todos los navegadores.

VER VIDEO TUTORIAL





Página 17

CAPÍTULO 12

MuseTutorials.com

12. DISEÑAR LA PÁGINA PRE ORDER En este capítulo vamos a diseñar la página “pre order”. Utilizaremos un formulario de contacto prediseñado y ahorraremos tiempo copiando material de otras páginas ya diseñadas.

VER VIDEO TUTORIAL





Página 18

CAPÍTULO 13

MuseTutorials.com

13. AÑADIR PUNTOS DE RUPTURA A LA PÁGINA PRE ORDER En este capítulo vamos a añadir los puntos de ruptura. Haremos ajustes en el formulario, reduciremos el tamaño de

los campos, para que se adapte correctamente en todos los navegadores.

VER VIDEO TUTORIAL





Página 19

CAPÍTULO 14

MuseTutorials.com

14. PUBLICAR EL SITIO WEB EN BUSINESS CATALYST En este capítulo te enseñaré a publicar el sitio web en Business Catalyst. Utilizo mucho este tipo de publicación para mostrarle a mis clientes un demo (demostración) de los avances y del resultado nal del proyecto. Es un paso muy útil para realizar correcciones antes de subir el sitio web denitivo al servidor.

Demo: pigeon-scooters.businesscatalyst.com

VER VIDEO TUTORIAL





Página 20

CAPÍTULO 15

MuseTutorials.com

15. CARGAR EL SITIO WEB EN SERVIDOR FTP Antes de cargar el sitio web en un servidor debes tener un nombre de dominio y un plan de hospedaje web; si ya los

tienes sólo necesitarás el nombre del host, usuario ftp y contraseña para poder cargar el sitio. Si no estás muy seguro/a de qué trata este tema en esta sección te lo explico todo. ¿QUÉ ES UN DOMINIO? Según Google: Un nombre de dominio (a menudo denominado simplemente dominio) es un nombre fácil de recordar asociado a una dirección IP física de Internet. Se trata de un nombre único que se muestra después del signo @ en las direcciones de correo electrónico y después de www. en las direcciones web. A través de este nombre único cualquier persona podrá acceder a tu sitio web, entonces... Antes de publicar el sitio web denitivo, ¿tienes un dominio? o ¿tu cliente tiene un dominio? Puedes encontrar dominios a los mejores precios en Godaddy, además el sitio cuenta con una interfaz de

usuario muy fácil de comprender y un servicio al cliente excelente y en español. Es la empresa que uso para comprar los nombres de dominio de mis clientes y para mis proyectoS, así que te la recomiendo ampliamente :)



Página 21

CAPÍTULO 15

MuseTutorials.com

Y... ¿QUÉ ES UN HOSTING? Según Wikipedia: El alojamiento web (en inglés: web hosting) es el servicio que provee a los usuarios de Internet un sistema para poder almacenar información, imágenes, vídeo, o cualquier contenido accesible vía web. Es decir, es el lugar donde almacenaremos todos los archivos que conforman nuestro sitio web, y que además tendremos que vincular a nuestro nombre de domino para que el usuario pueda acceder a todo este contenido. Para publicar un sitio web en un servidor debes tener un plan de alojamiento web, yo te recomiendo Hostgator

porque, además de ser el que yo utilizo desde hace ya varios años y nunca me ha dado problemas, es más económico que el de GoDaddy. - Si sólo quieres publicar un sitio web, el plan que necesitas es el “Hatchling“ - Si buscas ofrecer servicio de hospedaje web a tus clientes (dominios ilimitados), el plan que necesitas es el “Baby“ Para encontrar estas opciones sigue estos pasos: 1. Entra a la página

principal de Hostgator aquí 2. Busca en el menú “Web Hosting“ y dale clic

3. Baja

la página, elige tu plan “Hatchling“ o “Baby“ y dale clic al botón “Sign Up Now!“



Página 22

CAPÍTULO 15

4. Escribe el nombre de dominio

5. En

que compraste en Godaddy, en la opción “I Already Own This Domain“

el ciclo de facturación (Billing Cycle), escoge como mínimo 12 meses, así aprovechas mejores ofertas ;)

6. Escribe tu 7.

MuseTutorials.com

dirección de facturación y selecciona tu método de pago (Tarjeta de crédito/débito o PayPal)

Desmarca los servicios adicionales, no los necesitas y así te sale más económico :)

Lo bueno de Hostgator es que siempre tiene descuentos especiales, los más conocidos son los cupones de 20% SNAPPY y los de 25% SNAPPY25 , así que en la sección de cupones podrás escribirlos. Ahora tienen uno de 50% a partir de 1 año de contratación y el código es SMB2016 8.

Revisa tu pedido, acepta los términos y condiciones, política de privacidad y política de cancelación. Dale clic a botón “Checkout Now!“ 9.



Página 23

CAPÍTULO 15

10. Conrma

MuseTutorials.com

tu pago. Luego recibirás dos mensajes en tu email, uno de bienvenida y otro con los datos de acceso

de tu cuenta. Te recomiendo que apuntes estos datos en un documento de texto o en una libreta, son muy importantes y no los puedes perder.

AHORA... ¿QUÉ DEBO HACER? Tienes que vincular el dominio con el hospedaje web, esto es muy fácil y en pocos pasos lo podrás realizar.

Inicia sesión con tu cuenta de GoDaddy 2. En el dominio que quieras vincular, dale clic al botón “Administrar DNS“ 1.

3. En la siguiente página, en

la sección “Servidores de nombres“ haz clic en el botón “Cambiar“



Página 24

CAPÍTULO 15

MuseTutorials.com

4. Copia el primer nombre de

servidor (1st Nameserver), del email que recibiste de Hostgator con los datos de tu cuenta, y luego pégalo en el primer campo; repite el procedimiento con “2nd Nameserver“, luego dale al botón guardar.

4. Espera apróximadamente 24 horas y tu dominio estará vinculado perfectamente con el

servicio de

hospedaje web.

Luego de haber comprado el dominio, contratado el hosting y cambiado las DNS vamos a subir el sitio web al servidor FTP directamente desde Adobe Muse, para ello sólo necesitaremos la información del email que nos envió Hostgator con nuestros datos de cuenta. Vamos a usar la dirección del servidor, el usuario y la contraseña. Ahora dale play al vídeo...

VER VIDEO TUTORIAL





Página 25

CAPÍTULO 16

MuseTutorials.com

16. EXPORTAR HTML Y CARGAR EN SERVIDOR FTP Otra opción para cargar un sitio al servidor es exportar el documento de Adobe Muse en HTML y luego subir estos archivos, generados por el programa, a través de un gestor de FTP gratuito como FileZilla, sólo necesitarás la dirección del servidor, usuario ftp y contraseña.

VER VIDEO TUTORIAL





Página 26

CAPÍTULO 17

MuseTutorials.com

17. REVISAR EL COMPORTAMIENTO DEL SITIO WEB En este capítulo comprobaremos el comportamiento del sitio web en diferentes tamaños de pantalla con la herramienta gratuita ScreenFly de Quirktools y además haremos una prueba para determinar el tiempo de carga del sitio web con Pingdom

VER VIDEO TUTORIAL





Página 27

CAPÍTULO 18

MuseTutorials.com

18. RECURSOS PARA TUS PROYECTOS Y DESPEDIDA Por último, te mostraré algunos sitios web de recursos (pagos y gratuitos) que siempre utilizo para realizar mis diseños. Muchas gracias por tu tiempo y espero que este material te sirva de guía en tus proyectos.

VER VIDEO



- GoDaddy (Dominios) - Hostgator (Hospedaje web) - Muse For You (Widgets de pago) - Muse Themes (Plantillas y widgets de pago) - Picjumbo (Imágenes) - Freepik (Buscador de recursos grácos) - Graphic Burguer (Recursos grácos) - Flaticon (Iconos) - Widgets para Muse (GRATIS) - Plantillas para Muse (GRATIS)



Página 28

Guia Adobe Muse

Recommend Documents