TUTORIAL ADOBE MUSE CC 2017: CREA UNA PÁGINA WEB RESPONSIVA DESDE CERO CON ADOBE MUSE
Вставка
- Опубліковано 1 жов 2024
- TUTORIAL ADOBE MUSE CC 2017: CREA UNA PÁGINA WEB RESPONSIVA DESDE CERO CON ADOBE MUSE.
Aprende a diseñar una página web de tipo one page para Adobe Muse totalmente responsiva, en español, desde cero y completamente gratis.
Enlace a la demo: bit.ly/2mQW1Gn
Descarga gratis la carpeta de archivos (tema + widgets): bit.ly/2nKt2bp
🚨 Nuevo enlace de descarga: gumroad.com/l/... 🚨
-------
I N D I C E
-------
I. INTRODUCCIÓN
1. Bienvenida [0:08]
2. Conociendo el proyecto [0:46]
3. Requisitos [2:54]
II. CREACIÓN Y CONFIGURACIÓN DEL SITIO
1. Estructura del sitio [3:30]
2. Páginas maestras [7:30]
3. Ajustes: Página de inicio [9:00]
III. DISEÑO
1. Diseñando la sección header [12:44]
2. Diseñando la sección sobre mí [19:30]
3. Diseñando la sección servicios [36:35]
4. Diseñando la sección portafolio [44:34]
5. Diseñando la sección testimonios [49:45]
6. Diseñando la sección contacto [58:11]
7. Diseñando la sección footer [1:08:17]
8. Diseñando el menú [1:15:24]
IV. EFECTOS DE DESPLAZAMIENTO (movimiento y opacidad)
1. Menú [1:23:35]
2. Header [1:29:04]
3. Servicios [1:32:19]
4. Footer [1:34:01]
V. AGREGANDO ANIMATE + WOW.JS
1. Animando elementos del header [1:36:55]
2. Animando títulos [1:43:22]
3. Agregando widget de texto subrayado [1:46:25]
VI. SITIO RESPONSIVO
Punto de rotura: 1000 - 1200px; [1:47:55]
Punto de rotura: 768 - 1000px; [1:50:46]
Punto de rotura: 560 - 768px; [2:04:21]
Punto de rotura: 430 - 560px; [2:10:53]
Punto de rotura: 320 - 430px; [2:15:17]
------------
RECOMENDACIONES
------------
Hosting y dominio:
Banahosting: bit.ly/2mpjlP2
Hospedando: bit.ly/2mplDOi
Stock de imágenes:
www.pexels.com/
picjumbo.com/
unsplash.com/
Compresores de imagenes:
tinypng.com/
compressor.io/...
Paleta de colores:
coolors.co/
color.adobe.com/
Iconos:
www.flaticon.com/
fontawesome.io/
Fuentes:
fonts.google.com/
Texto de Relleno:
es.lipsum.com/
Sitio responsivo:
www.responsinat...
quirktools.com/...
chrome.google....
--------
S Í G U E M E
--------
Facebook: / ovdivi
Instagram: / ovdivi
Web: ovmuse.com/
---------
P E R S O N A L
---------
Twitter: / oscarviedmaweb
Web: oscarviedma.com/
--
1º Estoy super agradecido a que gente como tu haga este tipo de tutoriales.
2º Eres una maquina.
3º Tu y gente como tu, sois internet.
4º Gracias de nuevo por el curro.
Ademas ya estoy suscrito, y como tal me animo... ¿y uno donde poder añadir paginas? ¿quiza poder poner galerias con video en lugar de foto(enlazados) ?
Tengo una preguntita.. perdoname.. esto.. la galeria, cuando por fin abres la foto, no se puede abrir mas grande? se me queda muy pequeña en la pantalla.
Hola Juan qué tal, antes que todo gracias por las palabras :) es muy gratificante para mí leer este tipo de comentarios. Pasando a tu consulta, lo que tienes que hacer es hacer mas grande el cuadro contenedor del lightbox (caja de luz o iluminación) más o menos al ancho de tu página. Inténtalo y me dices como te va. Saludos
Si eso probe y va genial, gracias por tu respuesta!! se me quedan cortas de nitidez, no se por que, en mi caso que soy Fotografo se me hace importante, pero seguro que es una tonteria y lo resuelvo. A ver si la termino y te enseño como me queda. 100% gracias al tutorial, por que jamas ni abri el Muse.
Claro, a veces es cosa de prueba y error. Saludos Juan y suerte en tu proyecto :)
En el tiempo 5.20" dicen guardare en la carpeta ovi freelance que supongo ya descargaron....que programa es y de donde lo bajo o a que se refiere ?
Hola Elizabeth, me refiero a la carpeta de archivos para este tutorial. La cual la puedes descargar desde aquí: bit.ly/2nKt2bp
Hola excelente tutorial, quiero hacerlo pero el link a Dropbox me sale con "Too many requests this link has been automatically turned off for now" podes subir los archivos a otro lado para poder bajarlos y hacer los ejercicios ??? Gracias y felicitaciones !!!!!
YO QUIERO SAber como agrego un chat de ayuda para los clientes potenciales , saludos man
Hola buenas no pude descargar los widgets =(
Hola Izzy, en la descripción del tutorial tienes un nuevo enlace para su descarga...
Hola gracias por tus videos, una consulta ya compre mi hosting y dominio ya subi la pagina web mediante FileZilla, pero el unico problema que tengo es que no me manda los datos al correo electronico que puso de hotmail, quisiera ver si me puedes ayudar, esperu tu respuesta gracias
Tengo un problema con la animación. Se realizan todos a la vez cuando voy bajando la pagina ya están todas hechas ha que se debe.
Y por ejemplo si quiero hacer algo asi adaptable como esto clapat.ro/themes/california-wordpress/showcase/ tanto horizontal como vertical tienes algun tutorial? o algun consejo
Hola amigo, hice mi página con Muse, y la colgué gracias a este Tutorial, pero mi cliente quiere un pequeño cambio en el texto, ya modifiqué el archivo index.html y se modificó pero no se despliega en la página. Estoy viendo que anteriormente se podía modificar texto e imagenes con IN-BROWSER de Adobe, pero ya está descontinuado, ¿hay alguna forma de modificar el texto sin tener que cargar de nuevo la página?
Debes volver a cargar nuevamente la página Jesús. Lamentablemente debe ser así. Pero puedes cargarla desde las opciones FTP del mismo Muse para que sea más rápido.
Hola!! Está increíble tu tutorial, pero traté de usar los widgets y mi versión de MUSE no me los aceptó. Sabes qué podría haber pasado? Cómo hago widgets o los modifico?
Hola Heidi, que tal :) ¿Qué versión de Adobe Muse tienes? ¿ No te aceptó ningún widget? si lo deseas puedes escribirme a hola@ovmuse.com y con gusto te ayudo. Saludos
Buenas amigo. Muy chevere el vídeo. Tengo un problema. Sobre la plantilla que amablemente nos regalaste, hice unos cambios y monté otra página. Con otro logo, otros colores, otras imágenes. Pero, al exportar a HTML, me sale error 500, que no se cargan algunas fuentes en la página de inicio. Cambie todas las fuentes incluso quité los gadget pero nada. Me quedé ahí y no he encontrado ninguna solución. Podrías ayudarme a cambiar las fuentes por otras que no den ese error? Ya actualice el cloud, y todos los trucos que recomiendan en la red pero nada. Gracias y saludos.
Probablemente haya una fuente oculta por allí que te este dando el problema. ¿Ya revisaste el formulario de contacto en todos sus estados? Muchas veces en el formulario es dónde se encuentra el error, ya que tiene varios estados (rollover, activo, sobre, etc.) y en cada uno de ellos debes cambiar la fuente. Así mismo con los demás widgets.
Hola OV!, una maravilla este tutorial, pocas veces uno se encuentra con material educativo de este nivel.
Lamentablemente llegué tarde, pues el link de descarga a la carpeta de archivos (tema + widgets) en Dropbox está desactivado. :(
Ojalá lo puedas reponer, sería de gran utilidad. Me suscribo igualmente. Saludos desde Chile.
Hola qué tal Folks! Puedes descargar la carpeta de archivos desde este otro enlace: gumroad.com/l/Hwjv Solo debes designar un cero "0" y hacer click en quiero esto para poder descargar gratis la carpeta de archivos. Un abrazo.
Te felicito por este tutorial, soy diseñador gráfico y me encanto como se puede trabajar en Muse, nada de código es fabuloso, te pone más creativo. Gracias y espero tus tutoriales. You are the Best!!
Muchas gracias Mario. Realmente Muse es maravilloso para crear páginas web sin escribir código, y nos sirve demasiado a nosotros los diseñadores para enfocarnos en la parte visual sin preocuparnos del desarrollo. ¡Gracias y saludos Mario!
Hola que tal, tuve un problema con las animaciones de los realice los estilos gráficos, escribí los nombres en cada lugar correspondiente y no me anima nada seria de gran ayuda que me dijeras en que podría estar fallando SALUDOS!!!!!!!!!!!!
Intenta animar objetos (formas, textos e imágenes) en un documento nuevo, para saber si el problema es el widget o algo anda mal en tu Muse. Espero tu respuesta. Saludos.
Muchas gracias, me gustaría saber si el adobe muse acepta la inclusión de códigos de programación, pues necesito hacer una pantalla de login con base de datos web, y mostrar videos privados de VIMEO, pues me gustaría hacer un curso en línea utilizando el MUSE.
Hola Rafael, con Adobe Muse es complejo realizar lo que necesitas ya que requiere conectarse a una base de datos. Para estos casos te recomiendo un gestor de contenidos, como WordPress por ejemplo. Saludos.
deje de hacer paginas web hace 7 años ... usaba Frontpage... luego dreamweaver siempre quise un programa como este... lo había soñado... ahora empezare de nuevo con las paginas web... buen aporte buen video bien explicado.. Gracias ..!
Qué bien Max, que bueno que retomes nuevamente este mundo tan bonito cómo el de las páginas web. Cada día salen más y mejores herramientas y hay que aprovecharlas. Saludos Max ;)
fantástico muy muy buen trabajo y super didáctico, GRACIAS
Gracias Rafa. Un abrazo ;)
Hola! tengo un problema al usar los widgets, solo me cogió una sola vez en lo que fue el "a-perfil" quiuse agregar otros como al de "a-titulo-left" (siguiendo las reglas al pie de la letra) pero no me cogieron, quizá haya algo ahí que esté obstruyendo la animación :(
Hola Roxi que tal :) ¿Qué versión de Muse estás utilizando? Si quieres puedes escribirme por el facebook: facebook.com/ovmuse/ para tener una comunicación más fluida. Saludos.
Muchisimas gracias por tu tutorial! me ha servido mucho!!
Tengo una consulta, por qué el texto que inserto en mi página al visualizarlo en la web se convierte en imagen? ayuda por favor! muchas gracias!
Gracias Giani :)
El problema se debe a que estás utilizando fuentes solamente instaladas en tu ordenador, por ese motivo Muse las convierte a curvas o imagen. Para solucionarlo tienes que convertir la tipografía en fuente para web, lo puedes hacer desde el siguiente enlace: www.web-font-generator.com/
Sólo cargas las fuentes y te generará otros archivos que tienes que instalar en Adobe Muse.
Saludos, cualquier duda estamos en contacto :)
Hola, se que este tutorial es bastante antigua pero los links de descarga y el regalo de las plantillas no sirven es un link que no se puede visualizar
Problema con:
JavaScript exception: Error calling selector function: SecurityError: Failed to read the 'rules' property from 'CSSStyleSheet': Cannot access rules
Alguien Sabe Como Solucionarlo Porfavor
Hola Geancarlos, te acabo de responder tu mail. Actualiza tu Chrome, el error viene del navegador. Aunque el error solo aparece cuándo abres el sitio en local, una vez lo subas a internet tu sitio debe funcionar correctamente.
Ahora que facil es ser desarrollador web
No hay programación pero si insertamos código CSS (esto no es programar) para aumentar la funcionalidad de nuestro sitio :)
hola buenas, iba todo muy bien hasta que comence a modificar los puntos de rotura, en el punto 1400 el navegador me hace el efecto de la foto de perfil y el texto.. pero en los demas puntos ya sea 1200-1000-768-560 el efecto de la foto de perfil con el texto salen montados he buscado todas las formas posibles de solucionarlo y no puedo, alguien que pueda darme alguna ayuda?
Hola Camilo qué tal, me gustaría ver tu archivo, si eres tan amable de enviármelo a hola@ovmuse.com y explicarme qué es lo que sucede. Lo reviso y te digo que está pasando. Saludos Camilo :)
Hola Ov Divi. Una consulta. Al previsualizar el proyecto en el navegador estando en medio de la pagina y al modificar el tamaño del navegador, la pagina se pega saltos de imagen y sobre pone las del header. Son saltos visuales molestos. Deben ser los de los puntos de rotura. Hay alguna solución?.Gracias...suscrito.
Hola Nico, debes cambiar la configuración de la página. Debes elegir ancho fluido en lugar de anchura fija. Eso lo hacemos en este otro tutorial: ua-cam.com/video/0J7SR4rJ7Zs/v-deo.html cuando configuramos el proyecto.
muchas gracias lo necesita realmente tuve no mas un problema a la hora de aplicar las animaciones no me deja aplicarlas a los textos
Hola! Muy buen video! Tengo una consulta... como hago para retardar la carga de algunas cosas? es decir, la imagen de perfil mas los textos h1+h2 cargan antes que el warp, o sea que cargan fuera de lugar, y una vez que carga el resto del body recien se posicionan. Sabes como arreglar eso?
Hola Lawrence. Este error puede ser por el widget de ov animate, probablemente te este ocasionando problemas. Para optimizar el tiempo de carga puedes optar por no usarlo. Saludos.
Buenos dias como actualizo fuentes Typekit? por no tener esta actualización no me deja exporta HTML
Hola Jhon lo ideal es que reemplaces todas las fuentes de la web manualmente incluidas las fuente en todos los estados del formulario de contacto.
Hola! muchas gracias por tu tutorial, está muy bueno. Sólo tengo una pregunta.. como le haces para que los recuadros de servicios se mantengan fijos al centro? lo que me ha pasado es que o se quedan muy a la derecha a la hora de hacer más chico el navegador o se desacomodan mucho.. los tuyo sse quedan fijos y tu los vas cambiamdo de lugar.. ya intenté fijarlos a la izquierda como tú y nada.. Saludos
Hola Laura qué tal, intenta fijarlos al centro para que todos se fijen en esa posición. O bien, has pruebas fijándolos en diferentes puntos y me comentas como te va. Si tu problema persiste me dices para ver la manera de ayudarte. Saludos.
Buen tutoría amigo =)---....Pero tengo una duda. Si quiero poner mas recuadros en el widget. Como le puedo hacer?
Hola Alex, no entiendo bien la pregunta :/ Más recuadros en cual widget?
Oscar, además de sumarme al agradecimiento colectivo por tan preciso y completo tutorial, de verdad gracias, has sido de mucha ayuda para resolver dudas, aunque también se me presentaron otras que estoy seguro ayudarás a resolver...no se si a alguien mas le sucedió pero el efecto de desplazamiento de la barra menú no se me posiciona en lo mas alto del navegador, deja como un espacio de unos 30 pxls, y encima se sube el footer, creando una superposición de elementos. Estoy seguro que algo no hice del todo bien, podrías orientarme por favor, y me lo añades a la lista de agradecimientos?...
Hola Larry, gracias por las palabras. En cuanto a tu problema me es difícil saber que es lo que está sucediendo, por lo que te pido de favor que me envíes tu archivo a hola@ovmuse.com para que lo revise con calma y te de una solución adecuada. Saludos Larry ;)
Hola buenas tardes excelente tutoríal... una pregunta, los puntos de ruptura que decidió poner son un estándar ? Digamos que se usan siempre al realizar cualquier tipo de página Web? Mil gracias
Hola Ismael; los puntos de rotura no son un estándar, pueden variar dependiendo el diseño, pero si para tu próximo diseño no quieres complicarte puedes utilizar los que he utilizado, no hay ningún problema, aunque entre menos puntos de rotura utilices mejor. Saludos Ismael :)
Una pregunta chicos, el typekit funciona con alguna licencia puede ser? el mio no anda y no se si seria por esto. Agradezco al que me responda con 1.000.000 euros. :P
Cuando adquieres una suscripción con Adobe incluye typekit. Incluso si sólo adquieres una suscripción para una aplicación de Adobe. Anteriormente Adobe Muse incluía typekit.
Hola! Queria consultarte porque me aparece al final de la página, la barra de desplazamiento de izquierda a derecha. Podrás ayudarme? Gracias!
Hola Romina :) Probablemente tengas un elemento fuera de la página, recuerda ajustar todos los elementos dentro de la página. Revisa elemento por elemento y si sigues teniendo el mismo problema me dices. ¡Saludos!
Genial !
pero no logro exportar a HTML no se por que carga hasta 37% y se cierra la ventana, cuando miro la carpeta está vacia ! HELP ME
Hola Hillary, creo que eres la misma que me contactó por facebook. Saludos :)
Hola que va a pasar ahora que Adobe Muse esta descontinuado?
excelente, tutorial de 10, lo unico que falto fue explicar como meter un archivo descargabel en el boton de "descargar curriculum" todo lo demas fue estupendo.Mil gracias, eres un salvavidas amigo.
Gracias Gunter, para colocar un archivo descargable, solamente enlazas la url de tu pdf, por ejemplo lo puedes subir a tu mismo hosting o mejor aún a dropbox, google drive, etc. Copiar la url y colocarla en el botón.
cuando hago doble click en la carpeta de widgets me pregunta con que programa deseo abrirlo, no se intsla solo (pc) como hago? Ademas me falta el indicador.svg gracias!
Hola Julieta :), todos los archivos vienen en la carpeta assets, quizá tu pc no lea el tipo de archivo .svg. o se encuentre oculto. Intenta instalar el widget con Adobe Muse abierto o bien, arrástralo al ícono del programa.
Excelente tutorial muy completo, estoy recién utilizando Adobe Muse , quisiera preguntar como hacer para crear una pagina one page mezclada con una normal de muchas paginas? por que al crearla tengo que hacer muchas capaz o estoy haciendo algo mal? Saludos un abrazo
Hola Daniel, las capas sólo son para llevar un orden, en sí, no afectan en nada al diseño del sitio. Para "mezclar" un sitio web con varias páginas con una página one page, tienes que crear varias páginas en la pestaña plan de tu proyecto. Después en una página maestra hacer el menú principal (el que enlaza a todas las demás páginas) y en la página que necesitas el menú deslizable crear un nuevo menú, pero ojo: este debe ser un menú manual y lo debes desincronizar de las demás páginas para que no tengas problemas. Saludos Daniel, espero haber aclarado tu duda.
Hola!..sabeis si existe un widget para sumar un google form?. Muchas gracias!
Hola Fabian, no conozco uno. Pero puedes colocar el código que te da google forms para enlazarlo en tu sitio ;)
En que minuto mostraste en como meter las redes sociales, disculpa de nuevo mi duda
no me funcionan los widgets que puedo hacer ?
Hola, muy buen tutorial 👍 no puedo descargar los archivos, me dice "link caído" 🤔
En la descripción del video viene otro enlace de descarga Marcos.
Hola, Muchas gracias, Excelente tutorial!!! Hice mi pagina pero al verla en los navegadores para abrir es muy lenta, a que se debe esto?
Hola Laura qué tal, probablemente se debe porque las imágenes no están optimizadas, o bien, por las animaciones del sitio. Si gustas puedo darle un vistazo a tu sitio, puedes escribirme a hola@ovmuse.com o por facebook. Saludos ;)
Muy bien el tutorial...pero he intentado descargarme el enlace de la carpeta de archivos Widgets y ya ingresé dos veces mi email y no recibo nada...Aun está activo el enlace?
Hola Mario, revisa tu bandeja de promoción, spam, correo no deseado, probablemente te llego a una de esas bandejas el archivo. Si sigue sin llegarte escríbeme a hola@ovmuse.com y yo te mando los archivos. Saludos
No sé si siy al único que le pasa, pero no me llega ningún correo para descargar los archivos, ¿cuánto tarda? ¿o ya no está disponible?
Hola Manuel, que raro que suceda eso. Envíame un correo a hola@ovmuse.com y con gusto te envió el enlace de los archivos. Saludos Manuel.
Excelente trabajo amigo!!!! Me podrías auxiliar con una duda, como le hago para pasar mi proyecto de un ordenador a otro? . Gracias
Hola qué tal Jaime, lo único que tienes hacer es llevarte tu archivo a otro ordenador con todas las imágenes con las que estés trabajando.
Sinceramente te felicito, excelente trabajo, excelente explicación y muy MUY bien hecho todo. Gracias y Saludos.
Gracias por las palabras Victor :)
Excelente el video, felicitaciones. Pero la opción descarga de curriculum??
Hola Carlos, al botón de descargar curriculum sólo tienes que enlazarle un pdf desde la opción hipervínculos. Saludos.
Hola muy buen el tutorial pero tengo un problemon.
Hola Christopher, lamentablemente Adobe Muse dejó de recibir actualizaciones por parte de Adobe. Si quieres diseñar tu sitio también lo puedes realizar con esta alternativa ua-cam.com/video/Mfrb8-8pftk/v-deo.html En ese tutorial diseñamos la misma página que hacemos en éste. Espero te pueda servir. Si por lo contrario, quieres utilizar Adobe Muse no sé cómo ayudarte a conseguirlo, quizá puedas buscar en google, no sé :(
Saludos Christopher, qué te encuentres bien. :)
muchisimas gracias! un preguntota, en el boton "agregar corriculum" cómo le adjunto el doc para descargar ?
Hola Dalia :)
Para agregar un documento te recomiendo adjuntarlo en formato PDF, lo haces de la misma forma como si le fueras a poner un enlace al botón, es decir, desde el menú hipervínculos encontrarás la opción de adjuntar archivo. Saludos!
Holaa que tal ?? tengo un problema, publique la pagina de muse que hice y me sale un error, me aparece un scroll horizontal y es a causa del footer y el menú, pero en la configuración le coloque adaptar al ancho del navegador y aun así me hace el error, que podria ser?
Hola Ana, muy bien ¿y tú? A lo mejor el footer lo tienes fijado en una posición fija a la izquierda, derecha, centro, etcetera. Revisa eso y me dices. Saludos Ana :)
Hola muy bien video, una duda existencial xD: los efectos de estilos una vez exportados a clases quedaran permanentes en el sitio web o dependen de la página donde se bajaron, por ejemplo si la página de muse estilos dejara de dar soporte se desvinculan?
Hola qué tal :) Oye no entiendo bien tu pregunta ¿A qué estilos te refieres? Si te refieres a las animaciones no tienen porque desvincularse, todo debería seguir funcionando correctamente. Saludos ;)
Hola amigo todo iba bien hasta que me apareció un error al exportar realcionado con Java script. Al parecer tiene que ver con los hipervínculos de anclaje
Hola Missael, lo siento, desconozco el error aunque podría ser por la tipografía. Podrías darte una vuelta por los foros de Adobe Muse, quizá encuentres la solución.
HOLA .. ¿ Cómo yo hago para hacer galerías de imágenes RESPONSIVAS automática con MUSE ?
las que vienen por defecto no se hacen responsivas, a menos que las manipules manualmente
saludos, y gracias por los tutoriales
Tengo el Adobe Muse 2017.0
Hola Silvia, lo puedes hacer con widgets de terceros. Yo pronto crearé un widget para galerías responsivas. La otra es esperar a que salga una nueva versión de Adobe Muse. He probado la beta de la próxima versión y todos los widgets ya son responsivos y eso es realmente genial :)
Como creaste el widget de la barra ?? quisiera crear mis propios widget.
Saludos desde México
Hola el widget de la barra lo hice con HTML, CSS y JS, además de seguir la documentación de Adobe Muse. :) En un futuro probablemente enseñe a crear widgets. Saludos :)
Hola de nuevo, tengo una duda, como le hago para escribir mi información junto con imágenes que se alineen, es decir, como en word que el texto e imagen se acomodan.
Puedes intentar meter la imagen dentro del texto... Bueno no sé si a eso te refieras, no sé exactamente como quieres que se alineen.
Realmente Impecable Saludos desde Argentina - Un lujo
Saludos hasta Argentina Juan Martín. Un abrazo.
Muchas gracias por tu ayuda, son pocos lo que explican asi, de todas maneras me contactare contigo para hacer unas pregunta ya que deseo adaptar mi web a una plantilla tuya, eso siempre que no te quite tiempo. Muchas gracias por tu aporte.-
Hola Ricardo qué tal, gracias por las palabras :) Si claro puedes ponerte en contacto y con gusto platicamos. Saludos
HOLA me podrian decir como descargar la carpeta en otra extencion que no sea .zip ya que en windows no me abre, gracias
Hola Karen; puedes descargar un programa que descomprima zip en windows. Pero si no puedes, escríbeme a hola@ovmuse.com y con gusto te envió el enlace. Saludos
alguien sabe como colocar diferentes "size" texto en puntos de ruptura? Gracias!
Hola Jhon, sólo tienes que ir cambiando el tamaño del texto en cada punto. Pero es importante que tengas seleccionada la herramienta "T" y no las cuatro "T" que están en la parte inferior de la barra de herramientas. Esto para que los cambios solo se realicen en el punto de rotura seleccionado y no en todos. Saludos
Hola ya pude resolver lo de los archivos svg pero tengo otra dudad como puedo agregar más imagenes a la galeria. Te lo agradecería muchiiisimo. Gracias por tu aporte de nuevo. Saludos
Hola te acabo de responder por Facebook. Un abrazo Chris
Gracias crak!!! nunca había comentado un vídeo pero tu te lo ganaste. gracias por gran aporte y ayudar a la educación.
Excelente René. Seguimos con todo! Un abrazo
amigo !! tengo un problema. tome tu archivo el editable lo edite completo y ahora al exportarlo a html no me deja. no se que hacer ... necesito ayuda !!
Hola Catalina, ¿Cuál es la advertencia que te da? o qué es lo que te dice?
Hola, antes de nada muchas gracias por este tutorial. Estoy haciendo una web para una asociación sin ánimo de lucro y quería algo diferente. Estoy probando con tu demo para coger soltura ya que nunca he hecho nada de esto y no quiero emplear Wordpress ni Joomla. Gracias a este tuto, que además está muy bien explicado ha sido muy sencillo. No se si alguien ya lo ha puesto antes, no he leído todos los comentarios, lo siento. Me he dado cuenta de que con Google Chrome no es 100% compatible en cambio con IE11 va perfecto. En Chrome hay un fallo. Resulta que si clicas en cualquier botón del menú, por ejemplo "sobre mí" ( se aprecia mejor el fallo) al volver a clicar en "inicio", al desplazarse la página al principio la barra del menú se desplaza unos mm y entre la barra gris y la barra del menú se puede ver el contenido de la página inicio durante el desplazamiento (fondo rojo, flecha, etc), como si no hubiera opacidad, en cambio si se desplaza manualmente no lo hace. En IE11 no lo hace. No he probado en otros navegadores. Sabes si hay solución? Como ya digo la única experiencia que tengo es gracias a este tutorial.
En cualquier caso, muchas gracias. Saludos.
Hola Javier qué tal. Mi navegador por defecto es Chrome y puedo notar el detalle de separación de la barra azul/gris con el borde inferior del fondo rojo, pero en mi caso solo veo el fondo rojo y no el demás contenido que me comentas (flecha, texto). No sé qué tanto problema tengas con los mm que se desplazan, en lo personal no me causa problema, ya que no es muy notorio el desfase (en mi chrome), desconozco la razón por la que sucede, quizá la solución sea desactivar los efectos de desplazamiento para que no tengas problema con ese pequeño detalle. Lamento no poder hacer más Javier :/ Saludos y un abrazo!
Muchas gracias por responder. Creo que te haré caso. Dejaré el menú arriba, sin movimiento e iré probando otros efectos (sin sobrecargarlo) a ver que tal. Gracias por el consejo.
estimado amigo estoy apunto de terminar el proyecto lo cual te agradesco pero quiero preguntarte 2 cosas que no se como hacerle. la primera es que apartir de la pagina de portafolio me dejaron de salir las lineas guia y no se como hacerle para visualizarlas en las otras paginas y la segunda y mas importante en la pagina footer el programa ya no me deja continuar cree el rectangulo y al intentar ponerle color me da la opcion mas no lo hace ya revise las capas (esta activada footer) y todo esta bien pero ya no hace esa funcion ni en la caja de texto escribe nada en las demas paginas toda esta bien pero en esta ultima ya no puedo avanzar. que tengo que hacer? unidad_juridica@outlook.com
ya quedo estaba cometiendo un erro en lo del cuadro para hacer la seccion... la verdad es la primera vez que uso el adobe muse y tecnicamente ya termine mi pagina gracias por el aporte, saludos
estoy teniendo problemas en el footer, creo que desde el principio algo me salté, las guías me están volviendo loca jaja específicamente cuando pongo "fijar-abajo-en medio" no pasa nada. Intenté mover las guías en la página maestra y fue peor :v ¿me podrías ayudar por fis?:) gracias!!
Hola Kembly, claro que puedo ayudarte, sólo que no comprendo bien el problema que tienes. Si gustas puedes enviarme un correo explicando bien que es lo que sucede, incluso adjuntar capturas de pantalla de tu problema para entenderlo mejor y darte una solución. Mi correo es hola@ovmuse.com ¡Saludos! También puedes escribirme por facebook: facebook.com/ovmuse/
gracias!! sii te mando correo, muy amable :3
Hermano necesito un reproductor de audio para que hagas un tutorial bendiciones
hola tengo un problema, los archivo svg no me los reconoce, me pone un tache rojo en la parte superior izquierdo, le puedo poner otro tipo de acrhivo. Muchas gracias por tu aporte.
Hola qué tal. A lo mejor es porque moviste el archivo de carpeta. Pero sí, puedes usar otro tipo de formato (jpg, png) no hay problema. Saludos Christopher.
Felicidades amigo, excelente trabajo, muy ordenado, seguiré tus vídeos a la espera de mas contenido de calidad.
Gracias por la información.
Gracias Juan, al ser el primer video siento que aún me falta, pero en los próximos iré mejorando. ¡Saludos!
EXCELENTE TUTORIAL
TENGO UNA PREGUNTA... EN QUE PROGRAMA SE HACEN LOS WIDGETS??
Hola Natan, gracias. Los widgets los hago con código, se pueden hacer con cualquier editor de texto, aunque Adobe recomienda brackets.io Saludos.
Una explicación completa y detallada. Muchas gracias.
Gracias y saludos Roberto :)
Hola Oscar, deseo preguntarte si existe un widget o como puedo Subir Archivos Descargables en MUSE. Agradezco tu aporte. Ejemplo la descarga del curriculum vitae de este ejercicio.
Hola Ricardo, si sólo necesitas que se descarguen documentos, puedes adjuntar el archivo desde la opción hipervínculos, en lugar de enlazar una página puedes enlazar un documento cargado desde tu ordenador, por ejemplo, un archivo PDF. ¡Saludos!
Gracias Oscar.
Muy bueno el tutorial,me ayudo mucho, muchas gracias pero falto como cargar el curriculum al botón de descarga si puedes darnos esa información mil graciasss, saludos
Si, se me pasó esa parte, pero es muy fácil; sólo tienes que enlazarle al botón un archivo pdf. Esto lo haces desde la opción hipervínculos. Intenta y me dices como te va. Saludos.
Lo puedes vincular a Google drivers y creas un hipervínculo público
Hola, muchas gracias por el tutorial, esta buenisimo, solo tengo un problemita, cuando le doy enviar al formulario de contacto me manda un error y dice que el servidor mendo un error y no manda nada, la direccion de correo que le configure es del mismo dominio donde esta la pagina, no se que hacer, espero me puedas ayudar con esta duda, muchas gracias
Es un problema que muchas veces ocurre por las características de tu hospedaje. Ponte en contacto con la compañía de tu hospedaje y diles sobre el error para saber como te pueden ayudar.
Impecablemente explicado. Está todo lo necesario. Algunos trucos absolutamente útiles como por ejemplo visualizar cómo luce el sitio en los distintos dispositivos desde el mismo Chrome sin cargar nada.
Yo y muchos que verán este curso te estamos extremadamente agradecido Oscar!
Gracias Mauricio :). Me alegra que te haya servido, de eso se trata; de compartir todo lo que sé con la comunidad de Adobe Muse.
La parte del menu y desplazamiento lo pude hacer perfecto, sin embargo el resto de elemento abajo del menu pasan por encima del menu y no por debajo, que debo de hacer?
Hola, desde capas puedes pasar la capa del menú hasta al frente o todas las demás capas hacia atrás del menú ;)
Bro te antemano muchas gracias por el tutorial me ha servido mucho me ej suscrito y te eh dejado un sexy like :3, solo tengo un pequeño problema, al ajustar el diseño para móvil en especial el punto de rotura 430 al visualizarlo en un equipo con pantalla de 6 y 5.5 pulgadas se ve con un pequeño zoom la web, hay forma de quitarlo y que se ajuste automáticamente a cualquier tipo de pantalla de equipos móviles? #Help :/
Hola Bicktor gracias por ser parte de OVMUSE :) .. Serías tan amable de mandarme una captura de cómo se visualiza tu sitio en la resolución y celular que dices? por fa envíamela a hola@ovmuse.com y con gusto de apoyo. ¡Saludos!
OV MUSE ya te mande correo bro, muchas gracias :D
ME ABENTE 4 HORAS Y MEDIA PERO SALIO SOLO ME FALTA SUBIRLA PAGUINA A UN HOST GRATIS PODRIAS DECIRME COMO PORFA
Genial Marco :). Tengo un video para hacerlo, te dejo el enlace: ua-cam.com/video/KEdz7lKcC5s/v-deo.html
Super completo tu Tutorial, ya habia hecho algunos sitios pero despues de ver tu video, se resolvieron varias dudas que me quedaban, gracias y sigue asi
Gracias Ricardo, me alegra que te haya servido de algo. Tus palabras me inspiran a seguir subiendo videos :) saludos!
Amigo tengo un problema, al momento de colocar la imagen de mi logo se me pixela, ya intentado de varias formas y esta en bueba resolucion.
Probablemente es porque el archivo no está en la carpeta activos de muse
hola buen tutorial , quisiera saber porque en los puntos de rotura de mi pagina al momento de escalarla a un teléfono de pantalla chica , se ve solo la mitad de la pagina sin poderle darle zoom , quisiera saber como se puede ver proporcional al escalarla en un teléfono con pantallaa pequeña
Hola Alejandro no logro entender bien tu pregunta, me gustaría me explicaras mejor en un correo electrónico, incluso puede enviarme capturas de pantalla para saber que está sucediendo. El correo es hola@ovmuse.com ¡Saludos!
Excelente tutorial estimado amigo, ya había estado trabajando en sitios responsivos con Adobe Muse y con tu trabajo me ha aclarado varias dudas, especialmente con los puntos de ruptura, pero creo que se te fue un detalle... al mostrar la ruptura para celular, no muestra el MENÜ, que creo es muy importante, incluso revisando el demo tampoco aparece, a ver si lo explicas en otro tutorial... Desde Chile un abrazo y mil felicitaciones!!!!!
Hola Ramon, gracias por las palabras. En cuanto a tu observación del menú, en el video comento que en móvil lo he ocultado para mejorar la experiencia de usuario, ¿por qué? simplemente porque la página que realicé es tipo one page (una sola página), por lo tanto no es necesario un menú en móviles ya que es mas fácil desplazarse con scroll a hacer tap en el menú para posteriormente ir a la sección (son más pasos) y para el usuario es más cómodo hacer scroll. Saludos Ramon :)
Super y bien explicado... Ayer después que te escribí me puse a experimentar y logré poner eo menú para celular, que me va a servir para una página sencilla que me pidió un cliente.... Agradezco tu respuesta y claro, para ese ejercicio no hay para qué agregar ese menú.
Un abrazo gigante y cualquier duda te estaré molestando.
Hola muy bueno el tutorial, una pregunta, por que cuando vinculo el menu a los anclajes, en la web cuando pincho en el menu se queda la pagina en blanco?
Hola José, cuéntame tu problema por facebook y si puedes enviarme tu archivo para revisarlo. Saludos facebook.com/ovmuse
Hay alguna forma de que la barra de habilidades empiece a cargar cuando pasas por esa parte de la pantalla?
Hola Fernando, se supone que las barras de habilidades empiezan a cargar por default cuando éstas se muestran en pantalla. Es algo que viene con divi por defecto.
yo estoy utilizando la version pirata
Mil gracias! Impresionante la dedicación y lo crack que eres. Excelente, excelente. Gracias por tu tiempo de explicar tan bien y tan detalladamente. Felicidades, suscrito y demás. ¡Saludos!
Genial Daniel, gracias a ti por tan alentadoras palabras. Te invito también a ver los tutoriales del Divi + WordPress que son una alternativa a Adobe Muse :) ¡Un abrazo!
Hola, quisiera saber si puedes hacer un video tutorial de como implementar un blog en adobe muse o como enlazar uno desde wordpress,es un problema muy grande, no han hecho un video tutorial para eso en ningún canal que he visto, espero tu pronta respuesta ya que es para un proyecto, gracias
Ups... La cantidad de descargas de tu DropBox esta sobrepasada... Sube por favor tus archivos a otro server!!... Snif!
:( es en serio? Voy a revisarlo. Gracias por avisar
Descarla desde aquí: gumroad.com/l/Hwjv
Hola. Muchas gracias por compartir este excelente vídeo. Cuando estoy animando los elementos del header, todos realizan la animación, menos la parte donde esta escrito mi nombre (tu nombre OSCAR VIEDMA) abajo de la foto de perfil. Estoy trabajando con muse 2018.0
Te agradecería mucho tu colaboración.
Hola Leonardo, ¿Si le haz puesto el nombre de estilo? puedes hacer un nuevo estilo gráfico sólo para el nombre y hacer las pruebas correspondientes. Te debe funcionar perfectamente en la versión 2018.0. Saludos Leonardo, cualquier duda estamos en contacto.
Gracias por tu pronta respuesta. Seguí tu consejo y nuevamente sucedió lo mismo, realice el header desde el principio y tampoco, hasta que cambié la fuente tipográfica (Montserrat Bold) de mi nombre y finalmente funcionó la animación. ¿Cuál será la razón? saludos.
Es algo extraño Leonardo, nunca me ha ocurrido. Sería bueno revisar el sitio y ver que sucede.
hola! espectacular tutorial. pero tengo un problema, cuando quiero poner la imagen (min 38:20), no me sale la opcion en el relleno para poner la imagen... tengo la version 2017.0... sera por eso? o porque no me saldra? desde ya muchas gracias!! tremendo tutorial y muy bien explicado !
Hola Aylen qué tal :)
No creo que sea por lo de la versión, ¿Estás siguiendo bien los pasos? prueba haciendo un rectángulo al azar y le colocas un relleno de imagen, para probar si es por la versión o algo extraño pasa en tu muse. jeje Me dices como te va. Saludos :)
ahi probe y me funciono... no se que le abra pasado jajaja muchisimas gracias!
Oscar... Felicitaciones por tu VIDEO TUTORIAL .Lo mejor que he visto muchas GRACIAS por compartir, Y en espera que saques nuevo material
Desde Colombia y la fria Bogota
Saludos
¡Gracias Fernando! Me da un gran gusto que te haya gustado y me inspira a seguir creando nuevos tutoriales. Muy pronto lanzaré uno nuevo, así qué estate pendiente. Te mando un abrazo. Saludos.
necesito tu ayuda como puedo comunicarme con tigo, mil gracias es un vídeo muy genial necesito tu ayuda
Hola qué tal, si necesitas ayuda puedes escribirme a hola@ovmuse.com o mandarme un mensaje vía facebook: facebook.com/ovmuse/ Saludos :)
Podrías actualizar el link de descarga?? por favor
Hola Nicky desde aquí puedes descargarlo: gumroad.com/l/Hwjv solo pon un "0" para descargar la carpeta gratis. Un abrazo.
Hola, me gustaría saber con que ancho debería de hacer mi pagina web para ser vista en ordenador, ya que hay algunos elementos que se me desbordan, o la altura se me queda corta.. También me gustaría saber si esta aplicación puede servir para diseñar una aplicación u existe otra mejor.
Saludos.
Hola María, Adobe Muse fue buena herramienta, pero ha dejado de recibir actualizaciones. Por lo tanto es mejor buscar alternativas, en mi canal tengo una buena alternativa que es Divi + WordPress, puedes ver el tutorial. Y estas aplicaciones solo son para crear sitios web y no aplicaciones.
Saludos Maria.
@@OVDIVI Ah vale, me gustaría saber si conoce algun programa o web totalmente gratuita para poder realizar prototipos de aplicaciones móviles.
Un saludo
Muy buen tutorial, muchas felicidades, solo tengo una duda, resulta que he hecho pruebas con business catalyst y cuando trato de enviar un correo electrónico desde el formulario no lo envía. Ojalá pudieras apoyarme con esto.
Gracias Alejandro :) Lo que sucede es que para enviar un correo debes subirlo a tu propio hospedaje, el servicio no funciona desde las pruebas con Business Catalyst. Saludos :D
Perfecto, ya lo hice como lo recomiendas y funcionó muy bien. Muchas gracias.
Muchísimas gracias por el tutorial, está completísimo, salvo, que de entrada no me deja agregar la carpeta de fuentes web, intenté hacerlo manual y nada, al seleccionar la carpeta no las reconoce porque no las muestra. Alguna idea de qué sucede amigo? Ya me suscribí a tu canal y todo, pero tengo ese pequeño gran problema para poder comenzar.
Acabo de leer tu mail. Te conteste por ahí. Si sigues con el problema me dices. Saludos Andrés. :)
Vi tu respuesta, me funcionó de maravillas tu solución!! Y bueno, te dejé otra duda...Muchas gracias de verdad!
porque me aparecen deshabilitada la opcion guardar ditio y solo me deja guardar dando a guardar sitio como
La primer vez que guardas debes dar en guardar como, la segunda ya te debe dejar guardar sitio. Saludos Juan
HOLA una pregunta como se hace para visualizar de muse a chrome
Hola solo tienes que irte a archivo / visualizar sitio en el navegador
Hola disculpa, Donde puedo conseguir ese tipo de iconos transparentes de la sección servicios ?
Hola Alfredo, yo los he descargado de www.flaticon.com/
¡Hola! Primero que nada agradecerte por este tutorial, ahora, tengo unos cuantos problemillas que probablemente sean por que soy una novata en esto. Cuando en el menú le hago click a inicio, mi pagina se desplaza y se ve como incompleta, como si le faltara un pedazo y se ve en blanco, te adjunto la imagen para que puedas checarla ( imgur.com/vOohGgO ) Gracias de antemano!!! sería cool que pudieras responder a mi duda
Pasa cuando le pico a cualquiera del menú, desde servicios, contacto, etc
Hola Erika, seguramente tienes un elemento desbordado en tu página. Revisa bien en todo el sitio que no tengas un elemento fuera, puede ser un widget, una imagen, texto, etcétera. Si después de revisar bien cada sección de tu sitio continua el problema, seguimos en contacto. Saludos.