Muse es un programa que permite crear sitios web de forma sencilla y sin necesidad de conocimientos de código. Ofrece herramientas para diseñar la estructura del sitio, agregar contenido como texto e imágenes, insertar menús de navegación y vincular elementos. El documento explica los pasos para crear una página maestra, agregar secciones y subsecciones, y publicar el sitio web finalizado.

1. Realización
de pagina web
por medio de
Muse CC
Héctor Arturo Torres Ramírez

2. ¿Qué es muse?
Muse es un programa para crear sitio web en
códigos html5 sin la necesidad de escribir en
código, esto tiene dos implicaciones;
• Por un lado se vuelve sumamente accesible la
posibilidad de generar una pagina sin la
necesidad de conocer ningún tipo de lenguaje
de computación (algo equivalente a lo logrado
por adobe illustrador en el diseño grafico).
• Por otro se presenta ligeramente limitado
frente a las posibilidades que un desarrollador
de html podría lograr.
La mecánica del programa es similar a
powerpoint de manera que se pueden generar
cuadros de texto, así como arrastrar imágenes y
“wingets” hacia el área de trabajo.
Sin embargo ofrece posibilidades muy limitadas
de edición de imagen, por lo que para agilizar el
trabajo se recomienda tener todos los “objetos” ya
preparados, si no en sus medidas en sus
proporciones.

3. Al abrir el programa, aparece el siguiente menú, presenta la opción de crear un nuevo sitio o acceder a una lista de otros archivos realizados.
Al presionar en “sitio” aparece el menú contextual “nuevo sitio”, este permite hacer las primeras configuraciones, la anchura máxima de una pagina puede variar, o
adaptarse a los monitores de cada computadora, en este caso se escoge una adecuada para verse en una tableta mac.

4. Pas1: La arquitectura de sitio
Al generar el sitio, existe este escritorio llamado “mapa de sitio” permite generar la arquitectura de cómo se navegara
entre las pestañas o partes del sitio web.
El nombre de cada sección puede cambiarse al hacer doble clic en el cuadro de texto, al fondo de dicho cuadro aparece
la leyenda “[A-pag. Maestra]” que indica que la plantilla es una copia de la pagina maestra en blanco mostrada abajo.

5. Pas1: La arquitectura de sitio
Al hacer clic en alguna de las paginas de sitio, aparece este símbolo “+”, que permite generar un ilimitado numero de
pestañas hermanas para el sitio. Estas se consideran “paralelas “ y cada una tiene una dirección distinta dentro de la
pagina web. en este caso tienen el nombre de tareas realizadas para la materia de presentación de proyectos

6. Edición de pagina; en otra época cada pestaña hubiera requerido ser programada una a una, alineando cada pieza de contenido, Muse permite en su lugar generar
una ficha patrón llamada “pagina maestra” desde el mapa de sitio se puede acceder a ella haciendo doble clic. Al hacerlo permite pasar al escritorio de diseño este
tiene las siguiente herramientas, Así como una herramienta de biblioteca que muestra diversas herramientas en el lado derecho.

7. Paso 2: Inserción de menú. Al haber creado las diversas pestañas, se puede generar un menú, esto se realiza desde el pestaño “objeto”, y contara automáticamente
con los nombres de las pestañas creadas en el mapa de sitio.

8. Al hacerlo aparece el widget de menú transparente siguiendo al cursor, este no se volverá parte del escritorio hasta que se haga clic.
Se presenta junto a un menú de opciones, en este caso se deja con la configuración indicada.

9. Dentro de la pagina maestra, el menú aparecerá con un color gris y letras predispuestas, estas se pueden alterar al hacer doble clic sobre cada elemento.
El menú puede extenderse o moverse, sin embargo todos los botones conservaran un tamaño regular invariablemente, esto no se puede alterar de ningún modo.
si se desean botones de diferentes tamaños o el uso de iconos, resulta mas conveniente insertarlos uno por uno.

10. Al seleccionar cada elemento, este genera opciones en el escritorio, de manera que puede alterarse su formato. En el caso del menú puede cambiarse de color tanto
en su relleno como en su perímetro, dentro de la sección “menú” se puede decidir los colores que tendrá de acuerdo al “estado” en que se encuentra, recordando
que los elementos en las paginas web pueden tener comportamientos, como cambiar de color cuando el mouse se posa sobre ellos.

11. Se puede cambiar los colores de cada elemento al seleccionar el botón dentro del menú (esto se realiza dando otro clic dentro del botón con el menú ya seleccionado)
Una opción importante es la de poder cambiar las esquinas y generar rectángulos redondeados. Estos aparecen al seleccionar cualquier rectángulo, y se activan al
hacer clic, se puede controlar los radios de las esquinas con el numerador a la derecha de la herramienta. El resultado es visible.

12. Como se puede ver, ahora la pagina de inicio (Héctor Torres), tiene el menú exactamente en la misma posición que en la pagina maestra y se muestra como si el botón
estuviese presionado, el menú no es editable desde esta pestaña, si se desea cambiar algo es necesario regresar a la pagina maestra

13. Paso 3: agregar contenido a la pagina, El contenido de una pagina son objetos que son realizados fuera del programa, en este caso imágenes, para colocarlos en el
área de trabajo es necesario usar la herramienta colorar (ctrl+D) que se puede encontrar en la pestaña archivo, esta abre un cuadro de explorador de Windows desde
el cual podemos escoger la imagen.

14. En el caso de que una imagen sea muy grande, aparecerá saliendo del escritorio, para ajustarla es necesario usar la herramienta “selección” y hacer clic sobre la
imagen, esta herramienta nos permite posicionarla y alterar sus dimensiones al mover sus vértices editables como se muestra en la siguiente diapositiva.

15. El cambio de tamaño es regular en todas direcciones, es decir mantendrá sus proporciones, si se desea cambiar las proporción se puede usar la tecla shift y entrara
en modo de transformación libre mientras se presione.
Sin shift Con shift

16. Para agregar una caja de texto, se usa la herramienta texto y se genera un recuadro haciendo clic y arrastrando de vértice a vértice.

17. Al generar el texto aparecen opciones de edición de texto como puede verse, se puede cambiar el tipo de letra, es importante que saber que existen 3 tipos de
fuentes en muse, las fuentes internacionales, aquellas que todas las computadoras poseen, fuentes de internet, que tienen que ser cargadas en la misma pagina y
que serian visibles solo en internet, finalmente las fuentes muestra, que se convertirán en imagen (rasterizar) en la versión web

18. Una Manera de dar formato al cuerpo de texto, es hacer clic en el submenú “texto” que aparece en naranja y que muestra opciones ampliadas de edición.

19. Paso 4: Vincular una imagen, es muy común que en paginas web al hacer clic en una imagen esta nos lleve directamente a una sección de la pagina, en muse esto se
logra, seleccionando el objeto y vinculándolo en la opción añadir o filtrar vinculo, al hacer clic se despliega un menú que muestra direcciones dentro de la pagina o
incluir una externa al escribirla.

20. Otro tipo de widget se conoce como composición y son paneles móviles sensibles a la interacción que se encuentran en la pagina, para insertar uno, es necesario ir al
menú de objeto como se muestra, la opción usada aquí es “noticias destacadas”

21. La composición consiste de dos partes, el controlador y el contenido. El primero es un menú que tiene un numero de subpestañas, que controlan lo que es visible en
el contenido, todo el contenido puede ser editable incluso se pueden agregar mas cuadros de texto o imágenes.
Controlador
Contenido

22. Para esta sección de curricu lum , se realizaron tres columnas de texto que se desplegaran en el siguiente orden, cada una de las pestañas tubo que ser modificada
para lograr , para insertar un cuadro de texto solo se necesita arrastrarlo al cuadro de contenido y entonces quedara encapsulado.

23. Para crear sub secciones de la pagina, en el mapa de sitio se usa la opción “+” que se encuentra en la sección inferior de la pestaña. Esto generara un nivel inferior.

24. Si se quieren hacer secciones paralelas se repite el procedimiento de crear las paginas paralelas.

25. En la pagina maestra se puede editar el menú y en las opciones de tipo de menú cambiar a “todas las paginas”, aparecerá un menú contextual desplegado que tendrá
los nombres de las paginas que sean sub secciones de una pagina.

26. En este caso, se usaron imágenes para vincular el portafolio con cada una de sub paginas.

27. Para la pagina de contacto se puede insertar el widget de formulario de contacto, para así recibir comentarios a travez del portal. Este se encuentra en el menú.

28. Vincular con paginas externas, la vinculación con paginas ajenas al portal se realiza seleccionando el objeto y añadiendo la dirección web al filtro de vinculación. Y
presionando enter para dar por terminada la vinculación, de manera que al presionar esta imagen en el sitio web inmediatamente conectara con la dirección.

29. En caso de que una imagen haya quedado encima de otra, estas se pueden organizar al hacer clic derecho sobre esta y enviándola arriba o abajo una herramienta que
comparte con powerpoint.

30. Para visualizar la pagina, se puede generar una vista previa (rojo) , o subir directamente a un servidor ya configurado. También es posible simplemente exportar un
archivo HTML para ser visto desde la computadora a través del navegador.

31. Resultado muestra.

32. Resultado muestra.

33. Resultado muestra.

34. Resultado muestra.

35. Resultado muestra.

36. .
h e c t o r t o r r e s g a l l e r y . b l o g s p o t . c o m