w w w . m u s e t u t o r i a l s . c o m

MUSETUTORIALS

Cómo crear un sitio web responsivo con

p a s o a p a s o

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

GUÍA Y VIDEO TUTORIALES PASO A PASO

ADOBE MUSE

- d iseño web sin código -

MuseTutorials.com

Suscríbete a mi canal de YouTube Dale “me gusta“ a mi página de Facebook Página 2

ÍNDICE

ÍNDICEINTRODUCCIÓN

CAPÍTULO 1: REVISANDO EL PROYECTO

CAPÍTULO 2: CONSTRUIR LA ESTRUCTURA DEL SITIO

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

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

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

CAPÍTULO 6: CREAR UN MENÚ RESPONSIVO

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

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

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

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

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

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

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

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

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

CAPÍTULO 16: EXPORTAR HTML

CAPÍTULO 17: REVISAR EL COMPORTAMIENTO DEL SITIO WEB

CAPÍTULO 18: RECURSOS PARA TUS PROYECTOS Y DESPEDIDA

2

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

26

27

28

MuseTutorials.com

Suscríbete a mi canal de YouTube Dale “me gusta“ a mi página de Facebook Página 3

INTRODUCCIÓN

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 quepodrí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 afiliado, me llevaré una pequeña comisión, ¡y te estaré eternamente agradecido! De verdad

SOBRE LA GUÍA

MuseTutorials.com

Suscríbete a mi canal de YouTube Dale “me gusta“ a mi página de Facebook Página 4

DERECHO DE AUTORMuse Tutorials. Guía oficial de http://musetutorials.com/

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

Derechos de autor reservadosSe prohíbe la distribución ilegal de esta guía.Para obtener más información, póngase en contacto conmigo en:musetutorials@gmail.com

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íficamente 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.

INTRODUCCIÓN

MuseTutorials.com

Suscríbete a mi canal de YouTube Dale “me gusta“ a mi página de Facebook Página 5

¿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áficos, 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.

INTRODUCCIÓN

MuseTutorials.com

Suscríbete a mi canal de YouTube Dale “me gusta“ a mi página de Facebook Página 6

¿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 filosofí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ífica 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 puntos 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.

INTRODUCCIÓN

MuseTutorials.com

Suscríbete a mi canal de YouTube Dale “me gusta“ a mi página de Facebook Página 7

CAPÍTULO 1

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 :)

1. REVISANDO EL PROYECTO

VER VIDEO TUTORIAL

MuseTutorials.com

Suscríbete a mi canal de YouTube Dale “me gusta“ a mi página de Facebook Página 8

CAPÍTULO 2

En este capítulo vamos a crear un nuevo sitio, exploraremos un poco el modo de planificació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.

2. CONSTRUIR LA ESTRUCTURA DEL SITIO

VER VIDEO TUTORIAL

MuseTutorials.com

Suscríbete a mi canal de YouTube Dale “me gusta“ a mi página de Facebook Página 9

CAPÍTULO 3

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áficos que utilizaremos durante todo el diseño y también el esquema de colores.

3. CONFIGURAR LA PÁGINA MAESTRA

VER VIDEO TUTORIAL

MuseTutorials.com

Suscríbete a mi canal de YouTube Dale “me gusta“ a mi página de Facebook Página 10

CAPÍTULO 4

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 losvamos a asociar hipervínculos. Utilizaremos el widget de menú para definir la navegación y utilizaremos un formulario de suscripción prediseñado.

4. CREAR UN PIE DE PÁGINA RESPONSIVO

VER VIDEO TUTORIAL

MuseTutorials.com

Suscríbete a mi canal de YouTube Dale “me gusta“ a mi página de Facebook Página 11

CAPÍTULO 5

En este capítulo vamos a revisar las propiedades “responsivas“ del pie de página. Además añadiremos los puntosde ruptura y reorganizaremos los elementos en cada uno de ellos para una mejor experiencia de usuario.

5. AÑADIR PUNTOS DE RUPTURA AL PIE DE PÁGINA

VER VIDEO TUTORIAL

MuseTutorials.com

Suscríbete a mi canal de YouTube Dale “me gusta“ a mi página de Facebook Página 12

CAPÍTULO 6

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.

6. CREAR UN MENÚ RESPONSIVO

VER VIDEO TUTORIAL

MuseTutorials.com

Suscríbete a mi canal de YouTube Dale “me gusta“ a mi página de Facebook Página 13

CAPÍTULO 7

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.

7. AÑADIR PUNTOS DE RUPTURA AL MENU RESPONSIVO

VER VIDEO TUTORIAL

MuseTutorials.com

Suscríbete a mi canal de YouTube Dale “me gusta“ a mi página de Facebook Página 14

CAPÍTULO 8

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).

8. DISEÑAR LA PÁGINA DE INICIO

VER VIDEO TUTORIAL - PARTE 2

VER VIDEO TUTORIAL - PARTE 1

MuseTutorials.com

Suscríbete a mi canal de YouTube Dale “me gusta“ a mi página de Facebook Página 15

CAPÍTULO 9

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.

9. AÑADIR PUNTOS DE RUPTURA A LA PÁGINA DE INICIO

VER VIDEO TUTORIAL

MuseTutorials.com

Suscríbete a mi canal de YouTube Dale “me gusta“ a mi página de Facebook Página 16

CAPÍTULO 10

En este capítulo vamos a diseñar la página “About“, con todos los elementos necesarios. Nos guiaremos de lapágina original del producto (kickapigeon.com).

10. DISEÑAR LA PÁGINA ABOUT

VER VIDEO TUTORIAL

MuseTutorials.com

Suscríbete a mi canal de YouTube Dale “me gusta“ a mi página de Facebook Página 17

CAPÍTULO 11

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.

11. AÑADIR PUNTOS DE RUPTURA A LA PÁGINA ABOUT

VER VIDEO TUTORIAL

MuseTutorials.com

Suscríbete a mi canal de YouTube Dale “me gusta“ a mi página de Facebook Página 18

CAPÍTULO 12

En este capítulo vamos a diseñar la página “pre order”. Utilizaremos un formulario de contacto prediseñadoy ahorraremos tiempo copiando material de otras páginas ya diseñadas.

12. DISEÑAR LA PÁGINA PRE ORDER

VER VIDEO TUTORIAL

MuseTutorials.com

Suscríbete a mi canal de YouTube Dale “me gusta“ a mi página de Facebook Página 19

CAPÍTULO 13

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.

13. AÑADIR PUNTOS DE RUPTURA A LA PÁGINA PRE ORDER

VER VIDEO TUTORIAL

MuseTutorials.com

Suscríbete a mi canal de YouTube Dale “me gusta“ a mi página de Facebook Página 20

CAPÍTULO 14

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 final del proyecto. Es un paso muy útil para realizar correcciones antes de subir el sitio web definitivo al servidor.

Demo: pigeon-scooters.businesscatalyst.com

14. PUBLICAR EL SITIO WEB EN BUSINESS CATALYST

VER VIDEO TUTORIAL

MuseTutorials.com

Suscríbete a mi canal de YouTube Dale “me gusta“ a mi página de Facebook Página 21

CAPÍTULO 15

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 definitivo, ¿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 paracomprar los nombres de dominio de mis clientes y para mis proyectoS, así que te la recomiendo ampliamente :)

15. CARGAR EL SITIO WEB EN SERVIDOR FTP

MuseTutorials.com

Suscríbete a mi canal de YouTube Dale “me gusta“ a mi página de Facebook Página 22

CAPÍTULO 15

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ástendremos 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áseconó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!“

MuseTutorials.com

Suscríbete a mi canal de YouTube Dale “me gusta“ a mi página de Facebook Página 23

CAPÍTULO 15

4. Escribe el nombre de dominio que compraste en Godaddy, en la opción “I Already Own This Domain“

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

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

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

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

9. 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!“

MuseTutorials.com

Suscríbete a mi canal de YouTube Dale “me gusta“ a mi página de Facebook Página 24

CAPÍTULO 15

10. Confirma 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.1. Inicia sesión con tu cuenta de GoDaddy2. En el dominio que quieras vincular, dale clic al botón “Administrar DNS“

3. En la siguiente página, en la sección “Servidores de nombres“ haz clic en el botón “Cambiar“

MuseTutorials.com

Suscríbete a mi canal de YouTube Dale “me gusta“ a mi página de Facebook Página 25

CAPÍTULO 15

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

MuseTutorials.com

Suscríbete a mi canal de YouTube Dale “me gusta“ a mi página de Facebook Página 26

CAPÍTULO 16

Otra opción para cargar un sitio al servidor es exportar el documento de Adobe Muse en HTML y luego subir estosarchivos, generados por el programa, a través de un gestor de FTP gratuito como FileZilla, sólo necesitarás ladirección del servidor, usuario ftp y contraseña.

16. EXPORTAR HTML Y CARGAR EN SERVIDOR FTP

VER VIDEO TUTORIAL

MuseTutorials.com

Suscríbete a mi canal de YouTube Dale “me gusta“ a mi página de Facebook Página 27

CAPÍTULO 17

En este capítulo comprobaremos el comportamiento del sitio web en diferentes tamaños de pantalla conla herramienta gratuita ScreenFly de Quirktools y además haremos una prueba para determinar el tiempode carga del sitio web con Pingdom

17. REVISAR EL COMPORTAMIENTO DEL SITIO WEB

VER VIDEO TUTORIAL

MuseTutorials.com

Suscríbete a mi canal de YouTube Dale “me gusta“ a mi página de Facebook Página 28

CAPÍTULO 18

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.

- 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áficos)

- Graphic Burguer (Recursos gráficos)

- Flaticon (Iconos)

- Widgets para Muse (GRATIS)

- Plantillas para Muse (GRATIS)

18. RECURSOS PARA TUS PROYECTOS Y DESPEDIDA

VER VIDEO