Realización de pagina web por medio de

Muse CC

Héctor Arturo Torres Ramírez

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

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.

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.

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

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.

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.

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.

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.

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.

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.

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

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.

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.

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

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.

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

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.

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.

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”

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.

ControladorContenido

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.

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.

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

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.

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

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

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.

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.

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.

Resultado muestra.

Resultado muestra.

Resultado muestra.

Resultado muestra.

Resultado muestra.

.

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