Adobe Muse CC - Diseña sitios web HTML5 sin escribir código
4.4 (32 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
98 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Adobe Muse CC - Diseña sitios web HTML5 sin escribir código to your Wishlist.

Add to Wishlist

Adobe Muse CC - Diseña sitios web HTML5 sin escribir código

Aprende a crear sitios web HTM5 y responsive desde cero sin tener que escribir código
4.4 (32 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
98 students enrolled
Created by Marlon Ceballos
Last updated 8/2016
Spanish
Curiosity Sale
Current price: $10 Original price: $50 Discount: 80% off
30-Day Money-Back Guarantee
Includes:
  • 7.5 hours on-demand video
  • 1 Article
  • 1 Supplemental Resource
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Conocer aspectos fundamentales del flujo de trabajo de diseño web
  • Conocer las características de Muse,sus capacidades y sus limitantes
  • Conocer aspectos fundamentales de Muse como su interfaz y herramientas básicas
  • Crear el mapa de navegación de un sitio web y configurar las páginas que hacen parte del mismo
  • Optimizar correctamente imágenes para web y usarlas en Muse
  • Trabajar con elementos gráficos y efectos en Muse
  • Formatear texto y usar estilos gráficos
  • Trabajar con color creando muestras y usando paneles como las Muestras y Librerías CC
  • Agregar elementos interactivos a los sitios web usando unciones como vínculos, menús y anclas y usando Widgets
  • Crear sitios web Responsive
  • Entender qué es SEO y aplicar técnicas que mejores el posicionamiento de nuestro sitio web
  • Publicar nuestro sitio usando diferentes funciones y hacer ediciones al mismo
View Curriculum
Requirements
  • Dominio del computador (mac o pc)
Description

En este curso grabado por un "Adobe Certified Instructor - Muse" aprenderás a crear sitios web responsive (para desktops, tablets y smartphones) basados en estándares actuales (HTML5, CSS y JavaScript) y sin necesidad de escribir una sola línea de código.

El curso cubre desde los aspectos más básicos como interfaz y herramientas básicas hasta los más avanzados de la aplicación como diseño responsive, SEO y publicación de sitios. Aunque te recomiendo ver el curso desde el inicio y en el orden de los capítulos, también puedes ver directamente los capítulos en los cuales tengas dudas.

Podrás practicar usando los archivos que tendrás para descarga con los cuales podrás replicar los ejemplos que se muestran en los videos.

Si deseas contratar éste u otro curso para un grupo empresarial o universidad de forma presencial u online puedes contactarme desde el sitio web de Xpert o por mensaje privado desde mi perfil de Udemy.

Who is the target audience?
  • Diseñadores gráficos sin experiencia en diseño web ni conocimiento de HTML y CSS
  • Diseñadores web que quieran usar una herramienta que les permita crear de forma rápida sitios web de alto impacto visual
  • Programadores que quieran usar una herramienta gráfica para crear rápidamente prototipos o micro-sitios web
  • Cualquier persona que desee crear sitios web basados en estándares actuales (HTML5, CSS y JavaScript) y responsive (para desktops, tablets y smartphones) sin necesidad de escribir una sola línea de código
Students Who Viewed This Course Also Viewed
Curriculum For This Course
114 Lectures
07:24:31
+
Introducción
2 Lectures 01:32

Bienvenida y breve descripción del curso.

Preview 01:29

Estos son los archivos usados en los videos los cuales puedes descargar para practicar.

Archivos de ejemplo para descarga
00:03
+
Conceptos fundamentales de Adobe Muse
6 Lectures 09:39

En este video entenderemos qué es Adobe Muse y conoceremos las características de esta aplicación.

Preview 01:43

Tan importante como saber lo que es capaz de hacer una aplicación es saber lo que no puede hacer, en este video lo explicaremos.

Preview 01:05

Adobe Muse tiene un flujo de trabajo que nos guía paso a paso por las etapas de la creación de un sitio web.

Preview 01:33

Una forma de conocer los alcances de Adobe Muse es conocer sitios web que han sido creados con esta aplicación.

Preview 01:13

Adobe Muse hace parte de las aplicaciones incluidas en la suscripción a Creative Cloud aunque también se puede obtener como suscripción individual.

Cómo obtener Muse
02:37

Cuando hemos obtenido la suscripción a Creative Cloud o a Muse podemos realizar la instalación de la aplicación Creative Cloud con la cual administraremos la instalación de las aplicaciones Adobe a las que nos hayamos suscrito.

Instalar Adobe Muse
01:28
+
Fundamentos del trabajo de diseño web
8 Lectures 15:55

La creación de un sitio web en el flujo de trabajo tradicional requiere el uso de múltiples lenguajes y tecnologías y se requiere la escritura manual del código usando editores de código.

Preview 00:59

Los 3 lenguajes básicos que vamos a necesitar conocer para crear un sitio web en un flujo de trabajo tradicional son HTML, CSS y JavaScript.

Lenguajes básicos para diseño web
01:53

Crear un sitio web en el flujo de trabajo tradicional requiere el conocimiento y uso de lenguajes como HTML, CSS y JavaScript así como de Usabilidad, SEO, Experiencia de Usuario, etc.

Qué se requiere aprender
01:38

Casi todos los sitios web requieren un serie de etapas comunes para su realización las cuales conoceremos en este video.

Preview 02:44

La estructura de un sitio web está basada en una colección de archivos de diferentes tipos y carpetas que normalmente están relacionados mediante vínculos.

Estructura de un sitio web
02:00

En este video conoceremos recomendaciones típicas para los procesos del diseño web tradicional.

Recomendaciones generales
01:34

En este video conoceremos los diferentes formatos que típicamente usamos en sitios web.

Imágenes para web
04:02

Adobe Muse elimina la necesidad del conocimiento de lenguajes como HTML, CSS y JavaScript, sin embargo debemos tener en cuenta que existen otros conocimientos que siguen siendo necesarios tales como Arquitectura de información, SEO y Accesibilidad, entre otros.

Flujo de trabajo en Muse
01:05
+
Interfaz de Adobe Muse
8 Lectures 24:35

Cuando abrimos Adobe Muse nos encontramos con la pantalla de bienvenida en donde encontramos accesos rápidos a comandos, archivos y recursos.

Preview 02:14

Las preferencia permiten configurar aspectos del comportamiento e interfaz de Adobe Muse.

Preferencias
05:07

En este video conoceremos la interfaz general de Muse pasando por las áreas de planeación, diseño y previsualización.

Interfaz general
03:28

La herramienta de selección permite seleccionar diversos elementos que hemos creado o importado en Muse.

Herramienta de selección
01:49

La Herramienta de recorte permite recortar o enmascarar imágenes editando el marco de contenido de las mismas.

Herramienta de recorte
02:53

La herramienta de texto permite crear texto en Muse para posteriormente editarlo con el Panel de texto.

Herramienta de texto
01:41

Muse tiene 4 herramientas de dibujo: rectángulo, elipse y marcos rectangulares y de elipse.

Herramientas de dibujo
03:53

Podemos navegar dentro de los documentos de Muse usando las herramientas Zoom para acercar y alejar y Mano para desplazarnos.

Herramientas de navegación
03:30
+
Crear un sitio web y trabajar con páginas en Muse
8 Lectures 38:05

En la ventana Nuevo sitio configuramos las características del nuevo sitio tales como tamaños, columnas y márgenes.

Preview 07:44

En el área de planeación de Muse encontramos la páginas de contenido y las páginas maestras, además, cuando guardamos el sitio web se genera un único archivo con extensión .muse.

Area de planeación
03:51

En el área de planeación creamos las diferentes páginas que harán parte del sitio web definiendo su estructura jerárquica.

Estructura de un sitio web
03:18

Las páginas maestras permiten centralizar la ubicación de elementos que se repiten en varias o todas las páginas de contenido.

Páginas maestras
07:12

Después de haber creado el sitio web podemos cambiar propiedades del mismo usando la ventana Propiedades del sitio.

Propiedades del sitio web
03:03

De forma similar a como cambiamos las propiedades del sitio web también podemos cambiar las propiedades de páginas independientes.

Propiedades de las páginas
05:12

En Muse podemos trabajar con diferentes tipos de guías que permiten alinear elementos tales como Guías de regla, Guías de columna, Guías de encabezado y Guías de pie de página, entre otras.

Guías
05:30

Los íconos de favoritos o favicons permiten identificar fácilmente las páginas de nuestro sitio web entre diferentes pestañas del navegador o en los Marcadores.

Agregar íconos de favoritos
02:15
+
Trabajar con imágenes en Muse
13 Lectures 59:18

Uno de los aspectos que más cuidamos en un sitio web es su peso, por eso siempre buscamos el mejor balance entre la calidad y el peso de las imágenes mediante el proceso de optimización.

Preview 06:39

El proceso de importación de imágenes en Muse es muy simple y bastante similar a la forma como se hace desde otras aplicaciones de Adobe.

Importar imágenes
04:28

Muse tiene también soporte de importación para el formato .PSD ofreciendo en muchos casos un proceso más flexible.

Trabajar con archivos de Photoshop
04:40

Las imágenes en Muse están conformadas por 2 elementos: el marco contenedor y la imagen contenida.

Marco contenedor
02:44

Podemos importar en Muse animaciones SWF, OAM y GIF. Actualmente no es recomendable usar el formato SWF dado que no es compatible con dispositivos móviles.

Importar animaciones gif y oam
02:41

Desde Muse podemos activar ediciones de imágenes lo cual abre la aplicación requerida de acuerdo al formato, al guardar los cambios, estos se verán reflejados en Muse.

Editar imágenes
02:58

En Muse las imágenes puede usarse como fondos de elementos e incluso como fondos de la página y del navegador.

Usar imágenes como fondos
06:29

El Panel Activos permite gestionar todos los elementos que hemos importado en nuestro sitio web.

Panel Activos
07:50

Podemos agregar contenido para ser descargado por el usuario usando botones y/o links.

Agregar contenido para descarga
02:58

Muse permite que nuestros sitios tengan soporte para pantallas Retina Display para lo cual debemos preparar las imágenes al doble del tamaño original.

Preview 04:32

Podemos importar en Muse archivos en formato SVG el cual tiene soporte para contenido vectorial que se escala sin perder calidad.

Importar archivos SVG
04:02

Desde Muse podemos acceder y crear Bibliotecas CC en las cuales guardamos elementos que podemos acceder desde cualquier computador con Muse o con otras aplicaciones Adobe.

Bibliotecas CC
05:16

Adobe Stock es un servicio de Adobe que nos permite hacer búsqueda de recursos como imagen, videos y vectores y licenciarlos para usarlos en nuestros diseños, además tiene integración con las Bibliotecas CC.

Adobe Stock
04:01
+
Crear y editar elementos gráficos en Muse
15 Lectures 01:10:00

Podemos transformar elementos en Muse de forma libre o usando el panel Transformación el cual permite que las transformaciones sean precisas.

Preview 06:11

En ocasiones necesitamos que ciertos elementos queden fijos respecto al navegador o respecto a la página.

Fijar posición de objetos
06:39

Podemos hacer que un elemento cubre el ancho de la ventana del navegador aún cuando el usuario modifique ese ancho.

Objetos con el ancho del 100%
02:24

A medida que vamos creando elementos en Muse es común que necesitemos bloquear u ocultar elementos.

Bloquear y ocultar objetos
03:12

Al agrupar elementos podemos manejar estos elementos como si fueran uno solo por ejemplo para escalar o rotar estos elementos.

Agrupar elementos
04:10

Cuando creamos o importamos elementos en Muse estamos creando un orden que llamamos orden de apiñamiento el cual define qué elementos quedan sobre otros. Muse permite modificar fácilmente este orden de apilamiento.

Orden de apilamiento
03:37

Las capas nos permiten organizar los elementos en Muse de una forma más eficiente y se gestionan desde el panel Capas.

Trabajo con capas
08:33

Las guías de regla se crean desde las reglar horizontal y vertical y permiten alinear elementos.

Guías de regla
03:49

Las guías inteligentes son guías que se activan dinámicamente en el momento en que estamos realizando transformaciones sobre los elementos.

Guías inteligentes
02:47

Las Guías de control de movimiento vertical permiten desplazar verticalmente todos los elementos que se encuentran bajo estas guías.

Guías de control de movimiento vertical
01:51

El panel alineación permite alinear y distribuir los elementos que tengamos en una página en Muse.

Panel de alineación
06:35

Es posible aplicar un radio de redondeo a las esquinas de los rectángulos y marcos usando valores diferentes en cada esquina o el mismo valor para todas.

Esquinas redondeadas
01:06

El panel Efectos contiene efectos de tipo Sombra (Shadow), Biselado (Bedel) y Brillo (Glow).

Efectos
04:35

Los etilos gráficos permiten automatizar la aplicación de formato común a varios elementos.

Crear estilos gráficos
06:40

Los Efectos de desplazamiento son efectos que se aplican mediante el scroll o desplazamiento que activa el usuario.

Efectos de desplazamiento
07:51
+
Trabajar con texto en Muse
14 Lectures 50:38

En Muse podemos crear texto directamente en nuestras páginas o importar archivos de texto en formato txt.

Preview 02:46

Podemos aplicar formato al texto usando las opciones que encontramos en el panel de Control o usando en panel Texto.

Aplicar formato al texto
06:26

En Muse podemos crear listas de tipo viñetas (Bullets) o de tipo numeradas y aplicarles opciones de formato que incluyen el cambio de símbolo de viñetas o de tipo de numeración en listas numeradas.

Crear viñetas y aplicarles formato
06:09

Las fuentes estándar son las fuentes que normalmente encontramos instaladas en cualquier computador mientras que las fuentes del sistema son las fuentes que tenemos instalada en nuestro computador.

Fuentes estándar y fuentes del sistema
03:21

Las fuentes web nos permiten romper el límite de usar solamente fuentes estándar. Muse permite usar fuentes web de los servicios TypeKit y Edge Web Fonts así como nuestras propias fuentes web.

Trabajar con fuentes web
04:13

Cuando disponemos de nuestras propias fuentes web las agregamos mediante la ventana Añadir fuentes web y éstas se publicarán en el momento en que publiquemos el sitio web.

Uso de fuentes web locales
02:35

Las fuentes web nos agregan flexibilidad al uso de fuentes en nuestro sitio web, sin embargo no deberíamos usar mas de 2 fuentes web diferentes ya que agregan carga a nuestro sitio web.

Preview 01:23

Los estilos de párrafo permiten automatizar la aplicación y gestión de formato de los párrafos que hacen parte de nuestro sitio web.

Estilos de párrafo
06:20

Los estilos de carácter permiten automatizar la aplicación y gestión de formato a caracteres independientes que hacen parte del texto de nuestro sitio web.

Estilos de carácter
03:41

Los estilos de viñeta permiten automatizar la aplicación y gestión de formato a viñetas o bullets que hacen parte del texto de nuestro sitio web.

Estilos de viñetas
02:20

En Muse podemos hacer que una imagen sea rebordeada por texto para lo cual debemos pegar la imagen dentro del texto y usar las opciones que encontramos en el panel Ceñir.

Preview 03:51

La guía de Alto mínimo de las cajas de texto nos permite asegurarnos de que nuestro texto no vaya a quedar oculto cuando se visualice en el navegador del usuario.

Alto mínimo de las cajas de texto
01:33

El panel Pictogramas permite seleccionar caracteres que normalmente no encontraríamos en el teclado de nuestro computador.

Panel Pictogramas
01:54

Muse incluye un corrector ortográfico dinámico el cual permanentemente nos está indicando mediante el resaltado de texto los errores ortográfico que podrían tener nuestros textos.

Corrector ortográfico
04:06
+
Trabajar con color en Muse
8 Lectures 39:55

Muse soporta en su interfaz los modelos de color RGB, HSB y Hexadecimal y cuando el sitio web se ha publicado los modelos de color usados son Hexadecimal y  RGBA.

Preview 01:12

En Muse podemos aplicar color usando diferentes opciones que encontramos en el panel de Control, el panel Color, el panel Muestras o el panel Bibliotecas CC.

Aplicación de color
08:22

Las muestras de color se encuentran en el panel Muestras y permiten automatizar la aplicación de color a los elementos de nuestro sitio web.

Muestras de color
06:00

Muse nos ofrece opciones adicionales para Relleno y Contorno las cuales encontramos en los links que se encuentran en la parte izquierda del menú desplegable de Relleno y Contorno en el panel Control.

Opciones de relleno y contorno
07:49

Además de poder aplicar colores sólidos, también podemos aplicar colores degradados los cuales son combinaciones degradadas de colores.

Degradados
03:29

Las opciones de Relleno contienen una pestaña Desplazar que permite aplicar Efectos de desplazamiento de tipo movimiento a los rellenos de los elementos. 

Efectos de desplazamiento de relleno
06:28

Una forma sencilla de compartir muestras de color con otros usuarios es exportarlas con la extensión ASE para que puedan importarse nuevamente en Muse o en otras aplicaciones de Adobe.

Exportar/importar muestras de color como ASE
02:26

Las Bibliotecas CC nos permiten almacenar muestras de color que guardemos en Muse o que guardemos desde Adobe Color.

Muestras de color en Bibliotecas CC
04:09
+
Interactividad en Muse
7 Lectures 34:08

Los hipervínculos son la base de la web al permitir enlazar recursos, crear este tipo de elementos se crean de forma muy sencilla.

Preview 03:59

Cuando agregamos hipervínculo a un texto, éste queda formateado con unos colores y estilos por defecto, sin embargo nosotros podemos personalizar la apariencia mediante la creación y aplicación de estilos de hipervínculo.

Estilos de hipervínculos
02:01

Los estados son los resultados visuales que se general al interactuar con los elementos se llaman estados y se configuran en el panel Estados.

Panel estados y transiciones
05:43

Podemos configurar estados basados en cambios de imágenes para lo cual trabajamos con relleno de imágenes.

Estados con imágenes
01:50

El proceso de creación de un menú de navegación en Muse es un proceso muy sencillo gracias a un Widget que existe para este fin.

Crear y editar menús
11:38

Las anclas nos permiten generar destinos de hipervínculos que suelen usarse para generar sistemas de navegación dentro de una misma página.

Anclas
05:53

Algunos servicios web como Youtube, Vimeo y Google Maps, entre otros, nos permiten generar y copiar código el cual puedo pegar en Muse para insertar elementos en nuestras páginas tales como videos de Youtube.

Incrustar código HTML
03:04
5 More Sections
About the Instructor
Marlon Ceballos
4.4 Average rating
1,729 Reviews
23,668 Students
22 Courses
Adobe Community Professional y Adobe Certified Instructor

Consultor en tecnologías y aplicaciones Adobe para multimedia, web y publicaciones digitales con más de 20 años de experiencia asesorando empresas latinoamericanas que van desde diarios e imprentas hasta agencias interactivas.

Adobe Community Professional, Adobe Certified Expert y Adobe Certified Instructor en las últimas versiones de Photoshop, Lightroom Illustrator, InDesign, Acrobat, Flash, Dreamweaver y Muse. Posee las certificaciones especializadas ACE - Design Master y ACE - Web Master. Ha desarrollado y grabado cursos para Lynda y Udemy.

Actualmente es director de Xpert[dot]co, un centro de capacitación online sobre tecnologías gráficas y de Xpert[dot]video, una biblioteca de contenidos de aprendizaje.