ADOBE MUSE

Cuando creamos un sitio en Adobe

Muse, la estructura de carpetas es
_root como principal. Dentro de ella
_imagenes; _css (hojas de estilos,
archivos css); _scripts (archivos
javascript que dan funcionalidad).
Iniciamos el proyecto con un nuevo
sitio, y en cuanto a las dimensiones de
las pginas, no hay una medida fija,
pero podemos tener en cuenta que una
pantalla de netbook tiene
aproximadamente 1000px. Muse
sugiere 960, lo cual tambin es una
posibilidad. La cantidad de columnas
que quiera insertar nos sirven como
referencia, por lo que puedo elegir 12
columnas, con un ancho de 58px, y un
medianil de 20. En la seccin relleno,
veremos que est habilitada la casilla
centrado horizontal, para que en el caso de ver el sitio en monitores ms grandes, la ubicacin
sea centrada. Tambin en este cuadro puedo seleccionar una imagen favicon, que
es la chiquita que aparece en las pestaas
del navegador, junto al nombre de la pgina.
Todo lo que haga en la pgina maestra se va a replicar en las pginas internas. Si quiero que
una de mis pginas internas sea una excepcin y no tenga uno de estos elementos replicados,
en la seccin plan le doy clic derecho a la pgina que quiero exceptuar, voy a pginas maestras,
y selecciono sin pgina maestra.
En propiedades de cada pgina, puedo modificar el nombre del archivo, para pginas que
contienen caracteres especiales (o letra ). Que estos caracteres estn en el nombre de la
pgina puede ser necesario, porque son, por ejemplo, referencia para bsquedas de google.
A la hora de seleccionar fondo debo saber que hay dos para contemplar. El fondo
de mi pgina, que en nuestro caso tiene un ancho de 960 o 1000px, y el fondo del
navegador, que es el relleno que veremos en monitores ms grandes que el de una
netbook. Ambas opciones estn en la barra superior de Muse. En caso de querer
que sean fondos de imgenes, en vez de hacer clic en la flechita junto al cuadradito,
le doy clic a los textos (ya sea relleno o relleno del navegador).
Debo ir creando capas para ubicar los elementos de las pginas en cada una de
ellas. Cada capa funciona como una carpeta en realidad, donde voy acumulando
elementos.

MENU:
Para el men de navegacin debo ubicar la solapa biblioteca de widgets (en la barra lateral

que nos muestra las capas y las ventanas de operacin), y all puedo elegir men horizontal o
vertical, para arrastrar en el rea de trabajo. El men creado tendr tantos botones como
pginas haya creado. Si quiero ignorar esto, en las opciones, en tipo de men, selecciono
manual, all tambin tengo la opcin de editar conjuntamente, para que cada cambio se
refleje en todos los botones, o no.
Si quiero que mi men sea esttico, es decir, siempre visible a pesar de que baje por la pgina,
debo seleccionar el elemento (o grupo de elementos en el caso del men) y dirigirme a la barra
superior de Muse, donde sobre la derecha encontrar la opcin fijar, donde tengo 6 puntitos que
componen un cuadrado; en este caso de fijar el men selecciono el punto superior central.
Tambin puedo habilitar la opcin de ajustar al ancho de pgina, en el botn que est junto a
las dimensiones de la barra de navegacin, en la barra superior de Muse.
Sea en los botones de mi men, o en cualquier otro elemento, puedo configurar el
comportamiento cuando pose la flecha del mouse encima del elemento, o cuando haga clic. Esto
lo modifico arriba a la derecha, en la primer opcin de la barra superior de Muse. All est la
opcin del estado, donde por defecto trabajamos en normal, pero podemos establecer
diferentes apariencias en rollover, ratn pulsado o activo.
Muse tiene opciones grficas similares a las de photoshop, por lo que me permite dibujar formas
con una herramienta interna. Con ella puedo hacer desde lneas de un pixel de grosor, hasta
cuadrados, figuras con bordes redondeados, o crculos. Con la instalacin de widgets adicionales,
puedo realizar otro tipo de figuras poligonales.
Para editar las fuentes, voy a la solapa texto y all puedo elegir fuentes o utilizar unas en lnea
(sino se descargan, pero sern utilizadas como imagen).
Para cambiar los colores de los botones voy a la solapa estados (con el men seleccionado).
Cada color que elijo de la paleta puede ser guardado con el botoncito que est al lado del tacho
(abajo a la izquierda en el recuadro). Si quiero que mis botones sean diferentes formas, agrego
la imagen que quiero en cada botn, desde las opciones de relleno, habiendo deshabilitado
previamente la opcin de editar conjuntamente en las opciones del men. O bien puedo cargar
las imgenes una por una, y crear el men de forma completamente manual.

caractersticas de un tipo de texto

Si quiero guardar las

que tengo (fuente,
tamao, color, etc.), debo buscar la ventana estilos de prrafo, donde puedo guardar un tipo
de texto que tenga en uso, y aplicarlo a otros textos, luego de pararme dentro de la caja de
texto deseada. Si hago una modificacin en un texto que defin con un estilo, luego puedo borrar
esa modificacin con clic derecho en el estilo, o tambin con clic derecho agregarla al estilo,
redefinindolo, y haciendo q todos los textos con el estilo se modifiquen.

EFECTOS DE DESPLAZAMIENTO: Nos da la posibilidad de animar elementos o

fondos. Puedo hacer que los elementos se muevan a medida que recorro la pgina hacia arriba o
hacia abajo; puedo cambiar valores de opacidad; puedo hacer que las galeras de imgenes
circulen sus fotos a medida que subo o bajo por la pgina. Se encuentra en el panel derecho de
Muse.

OPCION DE ANCLA:
Nos permite marcar puntos dentro de una pgina (sobre todo si es extensa), para dirigirnos
mediante un clic. El ejemplo ms conocido es el del final de una pgina, en el que agregamos un
botn o texto ofreciendo ir arriba del todo. Sin tener seleccionado ningn elemento,

encontramos el icono de ancla en la barra superior del programa. Luego de marcar un ancla y
asignarle un nombre, podemos seleccionar un botn o imagen en cualquier lugar de la pgina, y
en la misma barra superior donde se encuentra el icono de ancla, asignar un vnculo hacia una
de las anclas que hayamos creado. Las anclas creadas se pueden copiar de una pgina a otra.

INSERTAR AUDIO O VIDEO DE UN ARCHIVO PROPIO:

Cuando no queremos pegar un video de youtube en nuestro sitio, o queremos un archivo de
audio exclusivo de nuestro sitio, debemos utilizar un widget de reproductor. Pero en la versin de
Muse que utilizamos no tenemos ninguno disponible, as que lo crearemos con un breve cdigo
que insertamos desde objeto > insertar HTML. All pegaremos
<audio src="audio.mp3">
<p>Tu navegador no implementa el elemento audio.</p>
</audio>
Este archivo de audio debo tenerlo en mi computadora. Si tiene otro nombre, debo remplazarlo
en el cdigo donde dice audio.mp3 (dejando al final del nombre la extensin .mp3). Para
previsualizar lo hecho debo ir a archivo > exportar como HTML, y guardar el sitio en una
carpeta de mi computadora. Dentro de esa carpeta copiare mi audio, suelto. Si quiero ubicarlo
en una carpeta, creo por ejemplo una que se llame audio, pero en el cdigo, a la hora de poner
la ubicacin del archivo, lo cambiare para que se vea as audio/audio.mp3. Si quiero que el
tema comience automticamente, despus de que cierran las comillas del nombre del archivo en
el cdigo, agrego autoplay=yes
Para insertar video, ser exactamente igual en el procedimiento, solo que en cdigo escribir:
<video controls>
<source src="mivideo.mp4" type="video/mp4">
Tu navegador no implementa el elemento <code>video</code>.
</video>
En este caso del video, ser importante que la resolucin (el tamao que quiero que ocupe en
pantalla), este definido de antemano, ya que despus no lo voy a poder adaptar en Muse (cosa
que podra hacer usando un widget en la versin 2014, o cargando un video de youtube).

INSERTAR UNA PAGINA EXTERNA O DE MI SITIO DENTRO DE UNA

DE MIS PAGINAS:
Debo crear un iframe, y pegar el cdigo:
<iframe title="subpagina" iframe src="serviciospag.html" width="1200px" height="650px"
scrolling="no" frameborder="no" scrolling="no" style="border:0px;">
</iframe>
En iframe src va el nombre de la pgina que desee incluir, o la direccin si es una pgina que
ya est en la web.

EFECTO TEXTO DE NOTICIA SOBRE UNA IMAGEN

Dibujo un cuadrado o rectngulo sobre mi imagen, con opacidad 1%, pero
en las opciones del rectngulo (arriba a la izquierda), cambio la vista de
normal a rollover, y le doy 50% a esa transparencia de color negro, en
opciones del relleno. Ah mismo tambin puedo agregar una imagen (como
puede ser un ojito o un carrito de compras), y cambiarle la posicin de
normar a rollover. Con mi cuadrado de transparencia seleccionado,
voy a la ventana estilos grficos y creo un nuevo estilo, al cual le doy doble
clic y llamo cuadrado. Luego voy al men superior de Muse,
a Pgina > propiedades de pgina, y en la pestaa de metadata, en
el ltimo casillero, pego el siguiente cdigo:

<style>
.cuadrado{
transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
}
</style>
Previsualizo y compruebo que funcione el fundido de transparencia. A continuacin, creo una
caja de texto dentro de los lmites de la imagen, e ingreso todo el texto deseado, en color blanco
(ese texto es el que vinculo a la pgina que yo desee, en la opcin Hipervnculos, en la parte
de arriba de Muse). A esa caja de texto le doy transparencia (opacidad) 1%, y luego voy a
estilos grficos y creo uno nuevo, al cual le doy doble clic y lo llamo ttulos. Ntese que en el
cdigo que les deje arriba aparecen las palabras cuadrado y ttulos, porque son los nombres
que puse en estilos grficos; si hubiera puesto otro nombre a esos estilos, deber modificarlo
en el cdigo cambiando el que tena por este:
<style>
.cuadrado, .titulos{
transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
}
.cuadrado:hover .titulos{
opacity:1;
}
</style>
Ya podremos ver nuestro efecto en funcionamiento. Para copiarlo, selecciono el cuadrado de
transparencia y la caja de texto (con la tecla shift en vez de control), y pulsando la tecla Alt y
arrastrando, estar generando una copia, a la que solo me restar cambiarle el contenido del
texto.

DISEO DISPOSITIVOS WEB:

En la solapa del diseo del SITIO en Muse, en la barra superior tengo las tres opciones en las que
elijo si estoy diseando para ordenador, Tablet o mvil. Si escojo mvil me preguntar el
programa si deseo copiar de los diseos de los otros formatos, a lo cual puedo darle que si en
plan del sitio y atributos de pgina. Pero para mvil me convendr hacer un men de
navegacin vertical, con botones altos (recordando que el usuario ser tctil).
Con los otros elementos, bsicamente lo que hay que hacer es una tarea de copiar y pegar, pero
variando los tamaos, y eliminando todo lo que sea pesado o difcil de procesar (evitar imgenes
y visores de imgenes).

SUBIR EL SITIO A LA RED:

Cuando tengo mi sitio listo, debo exportarlo, yendo a Archivo>Exportar como HTML. Pongo el
nombre de mi dominio, y creo una carpeta donde guardar los archivos exportados.
Debo adquirir un dominio (por ejemplo www.misitio.com), y un hosting (donde se alojarn mis
archivos). Para hacerlo de forma gratuita voy a www.000webhost.com140657.html donde
selecciono free hosting, ingreso el nombre de mi sitio en la casilla de subdominio (donde le
agregaran a mi nombre una extensin .uphero.com por ejemplo. Pongo un nombre de usuario
(mo, no del sitio) y una contrasea. Luego verifico mi mail para activar la cuenta, y luego recibo
otro mail con un nombre de usuario de hosting. Abro el programa Filezilla y para loguearme, en
la casilla servidor ingreso el dominio de mi sitio, pero en vez de hacerlo con www. lo hago
con ftp.. En nombre de usuario pongo el que me enviaron por mail, y en clave la que
definimos antes nosotros mismos. En la ventana inferior izquierda busco la ubicacin de mis
archivos. En la ventana de la derecha ingreso a la carpeta public_html y borro el archivo
ddefault.php. A continuacin selecciono todos mis archivos, y dndoles clic derecho los subo.
En la pgina de webhost debo crear una cuenta de mail con @misitio, para que funcione el
formulario de contacto de mi sitio.