pdf online - MuseTutorials.com

Transcripción

MUSETUTORIALS
- dis e ño we b s in código -
Cómo crear un sitio web responsivo con
ADOBE MUSE
pas o
a
pas 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
w w w. m u s e t u t o r i a l s . c o m
ÍNDICE
MuseTutorials.com
ÍNDICE
INTRODUCCIÓN
2
CAPÍTULO 1: REVISANDO EL PROYECTO
7
CAPÍTULO 2: CONSTRUIR LA ESTRUCTURA DEL SITIO
8
CAPÍTULO 3:: CONFIGURAR LA PÁGINA MAESTRA
9
CAPÍTULO 4: CREAR UN PIE DE PÁGINA RESPONSIVO
10
CAPÍTULO 5: AÑADIR PUNTOS DE RUPTURA AL PIE DE PÁGINA RESPONSIVO
11
CAPÍTULO 6: CREAR UN MENÚ RESPONSIVO
12
CAPÍTULO 7: AÑADIR PUNTOS DE RUPTURA AL MENÚ RESPONSIVO
13
CAPÍTULO 8: DISEÑAR LA PÁGINA DE INICIO
14
CAPÍTULO 9: AÑADIR PUNTOS DE RUPTURA A LA PÁGINA DE INICIO
15
CAPÍTULO 10: DISEÑAR LA PÁGINA ABOUT
16
CAPÍTULO 11: AÑADIR PUNTOS DE RUPTURA A LA PÁGINA ABOUT
17
CAPÍTULO 12: DISEÑAR LA PÁGINA PRE ORDER
18
CAPÍTULO 13: AÑADIR PUNTOS DE RUPTURA A LA PÁGINA PRE ORDER
19
CAPÍTULO 14: PUBLICAR EL SITIO WEB EN BUSINESS CATALYST
20
CAPÍTULO 15: CARGAR EL SITIO WEB EN SERVIDOR FTP
21
CAPÍTULO 16: EXPORTAR HTML
26
CAPÍTULO 17: REVISAR EL COMPORTAMIENTO DEL SITIO WEB
27
CAPÍTULO 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 afiliado,
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 oficial 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í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.
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á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.
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 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.
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 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.
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áficos 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 definir 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 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
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 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 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
MuseTutorials.com
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 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
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!“
Página 23
CAPÍTULO 15
MuseTutorials.com
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 GoDaddy
2. 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“
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áficos)
- Graphic Burguer (Recursos gráficos)
- Flaticon (Iconos)
- Widgets para Muse (GRATIS)
- Plantillas para Muse (GRATIS)
Página 28

pdf online - MuseTutorials.com

Transcripción

Documentos relacionados

www.facebook.com/sgintegrales

Dale un SHOTa tu Facebook

M{ZD{ CX-3

Media Kit Barzon2013