ADOBE MUSECuando 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 páginas, no hay una medida fija, pero podemos tener en cuenta que una pantalla de netbook tiene aproximadamente 1000px. Muse sugiere 960, lo cual también 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 sección relleno, veremos que está habilitada la casilla “centrado horizontal”, para que en el caso de ver el sitio en monitores más grandes, la ubicación sea centrada. También en este cuadro puedo seleccionar una imagen “favicon”, que es la chiquita que aparece en las pestañas del navegador, junto al nombre de la página. Todo lo que haga en la página maestra se va a replicar en las páginas internas. Si quiero que una de mis páginas internas sea una excepción y no tenga uno de estos elementos replicados, en la sección plan le doy clic derecho a la página que quiero exceptuar, voy a páginas maestras, y selecciono sin página maestra. En propiedades de cada página, puedo modificar el nombre del archivo, para páginas que contienen caracteres especiales (o letra ñ). Que estos caracteres estén en el nombre de la página puede ser necesario, porque son, por ejemplo, referencia para búsquedas de google. A la hora de seleccionar fondo debo saber que hay dos para contemplar. El fondo de mi página, que en nuestro caso tiene un ancho de 960 o 1000px, y el fondo del navegador, que es el relleno que veremos en monitores más grandes que el de una netbook. Ambas opciones están en la barra superior de Muse. En caso de querer que sean fondos de imágenes, 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 páginas en cada una de ellas. Cada capa funciona como una carpeta en realidad, donde voy acumulando elementos. MENU: Para el menú de navegación debo ubicar la solapa biblioteca de widgets (en la barra lateral siempre visible a pesar de que baje por la página. Si quiero que mi menú sea estático. . Esto lo modifico arriba a la derecha. “ratón pulsado” o “activo”. en tipo de menú. Sin tener seleccionado ningún elemento. en la barra superior de Muse. Si hago una modificación en un texto que definí con un estilo.). donde por defecto trabajamos en “normal”. donde tengo 6 puntitos que componen un cuadrado. donde puedo guardar un tipo de texto que tenga en uso. puedo cambiar valores de opacidad. Si quiero que mis botones sean diferentes formas. 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). y haciendo q todos los textos con el estilo se modifiquen. o no. en el botón que está junto a las dimensiones de la barra de navegación. El ejemplo más conocido es el del final de una página. en este caso de fijar el menú selecciono el punto superior central. en la primer opción de la barra superior de Muse. EFECTOS DE DESPLAZAMIENTO: Nos da la posibilidad de animar elementos o fondos. por lo que me permite dibujar formas con una herramienta interna. etc. color. OPCION DE ANCLA: Nos permite marcar puntos dentro de una página (sobre todo si es extensa). y crear el menú de forma completamente manual. Para cambiar los colores de los botones voy a la solapa estados (con el menú seleccionado). o círculos. para que cada cambio se refleje en todos los botones. habiendo deshabilitado previamente la opción de “editar conjuntamente” en las opciones del menú. redefiniéndolo. en el que agregamos un botón o texto ofreciendo ir arriba del todo. o también con clic derecho agregarla al estilo. hasta cuadrados. Se encuentra en el panel derecho de Muse. luego puedo borrar esa modificación con clic derecho en el estilo. Con la instalación de widgets adicionales. Para editar las fuentes. en las opciones. características de un tipo de texto Si quiero guardar las que tengo (fuente. pero podemos establecer diferentes apariencias en “rollover”. puedo configurar el comportamiento cuando pose la flecha del mouse encima del elemento.que nos muestra las capas y las ventanas de operación). allí también tengo la opción de editar conjuntamente. debo seleccionar el elemento (o grupo de elementos en el caso del menú) y dirigirme a la barra superior de Muse. es decir. Puedo hacer que los elementos se muevan a medida que recorro la página hacia arriba o hacia abajo. Si quiero ignorar esto. desde las opciones de relleno. debo buscar la ventana estilos de párrafo. para arrastrar en el área de trabajo. agrego la imagen que quiero en cada botón. Con ella puedo hacer desde líneas de un pixel de grosor. El menú creado tendrá tantos botones como páginas haya creado. puedo hacer que las galerías de imágenes circulen sus fotos a medida que subo o bajo por la página. puedo realizar otro tipo de figuras poligonales. selecciono manual. Sea en los botones de mi menú. tamaño. y allí puedo elegir menú horizontal o vertical. Allí está la opción del estado. Muse tiene opciones gráficas similares a las de photoshop. figuras con bordes redondeados. También puedo habilitar la opción de “ajustar al ancho de página”. o cuando haga clic. luego de pararme dentro de la caja de texto deseada. para dirigirnos mediante un clic. o en cualquier otro elemento. pero serán utilizadas como imagen). voy a la solapa texto y allí puedo elegir fuentes o utilizar unas en línea (sino se descargan. O bien puedo cargar las imágenes una por una. donde sobre la derecha encontraré la opción fijar. y aplicarlo a otros textos. ya que después no lo voy a poder adaptar en Muse (cosa que podría hacer usando un widget en la versión 2014. Las anclas creadas se pueden copiar de una página a otra. y pegar el código: <iframe title="subpagina" iframe src="serviciospag. solo que en código escribiré: <video controls> <source src="mivideo. Si quiero que el tema comience automáticamente. pero en el código. suelto. debo remplazarlo en el código donde dice “audio. y guardar el sitio en una carpeta de mi computadora. Si tiene otro nombre. ser exactamente igual en el procedimiento.mp3). a la hora de poner la ubicación del archivo. este definido de antemano. así que lo crearemos con un breve código que insertamos desde “objeto” > “insertar HTML”. asignar un vínculo hacia una de las anclas que hayamos creado. y en la misma barra superior donde se encuentra el icono de ancla.mp3"> <p>Tu navegador no implementa el elemento audio.</p> </audio> Este archivo de audio debo tenerlo en mi computadora. creo por ejemplo una que se llame “audio”.mp3” (dejando al final del nombre la extensión . lo cambiare para que se vea así “audio/audio. debemos utilizar un widget de reproductor. será importante que la resolución (el tamaño que quiero que ocupe en pantalla). después de que cierran las comillas del nombre del archivo en el código. </video> En este caso del video.encontramos el icono de ancla en la barra superior del programa. podemos seleccionar un botón o imagen en cualquier lugar de la página. Pero en la versión de Muse que utilizamos no tenemos ninguno disponible. o cargando un video de youtube). o queremos un archivo de audio exclusivo de nuestro sitio. Si quiero ubicarlo en una carpeta. Allí pegaremos <audio src="audio. Dentro de esa carpeta copiare mi audio. Luego de marcar un ancla y asignarle un nombre. o la dirección si es una página que ya esté en la web. agrego autoplay=”yes” Para insertar video."> </iframe> En “iframe src” va el nombre de la página que desee incluir. INSERTAR AUDIO O VIDEO DE UN ARCHIVO PROPIO: Cuando no queremos pegar un video de youtube en nuestro sitio.mp3”. .mp4" type="video/mp4"> Tu navegador no implementa el elemento <code>video</code>. INSERTAR UNA PAGINA EXTERNA O DE MI SITIO DENTRO DE UNA DE MIS PAGINAS: Debo crear un iframe. Para previsualizar lo hecho debo ir a “archivo” > ”exportar como HTML”.html" width="1200px" height="650px" scrolling="no" frameborder="no" scrolling="no" style="border:0px. . al cual le doy doble clic y lo llamo títulos.cuadrado. . Luego voy al menú superior de Muse. y pulsando la tecla Alt y arrastrando. creo una caja de texto dentro de los límites de la imagen. Para copiarlo. } . en color blanco (ese texto es el que vinculo a la página que yo desee. } </style> Ya podremos ver nuestro efecto en funcionamiento. e ingreso todo el texto deseado. -webkit-transition: all 0. a la que solo me restará cambiarle el contenido del texto. y le doy 50% a esa transparencia de color negro.5s ease. Nótese que en el código que les deje arriba aparecen las palabras “cuadrado” y “títulos”. y en la pestaña de “metadata”. voy a la ventana “estilos gráficos” y creo un nuevo estilo. pego el siguiente código: <style> . si hubiera puesto otro nombre a esos estilos. estaré generando una copia.5s ease. en opciones del relleno. porque son los nombres que puse en “estilos gráficos”. Ahí mismo también puedo agregar una imagen (como puede ser un ojito o un carrito de compras). A continuación. deberé modificarlo en el código cambiando el que tenía por este: <style> . a “Página” > “propiedades de página”.titulos{ opacity:1. -webkit-transition: all 0.titulos{ transition: all 0. con opacidad 1%.5s ease. selecciono el cuadrado de transparencia y la caja de texto (con la tecla shift en vez de control). } </style> Previsualizo y compruebo que funcione el fundido de transparencia. Con mi cuadrado de transparencia seleccionado.EFECTO TEXTO DE NOTICIA SOBRE UNA IMAGEN Dibujo un cuadrado o rectángulo sobre mi imagen. pero en las opciones del rectángulo (arriba a la izquierda). cambio la vista de “normal” a “rollover”.cuadrado:hover . en el último casillero. y luego voy a “estilos gráficos” y creo uno nuevo.5s ease. y cambiarle la posición de “normar” a “rollover”. en la parte de arriba de Muse). A esa caja de texto le doy transparencia (opacidad) 1%.cuadrado{ transition: all 0. en la opción “Hipervínculos”. al cual le doy doble clic y llamo cuadrado. yendo a Archivo>Exportar como HTML. y eliminando todo lo que sea pesado o difícil de procesar (evitar imágenes y visores de imágenes). no del sitio) y una contraseña. En la página de webhost debo crear una cuenta de mail con @misitio. para que funcione el formulario de contacto de mi sitio.uphero. debo exportarlo.com). Para hacerlo de forma gratuita voy a www.000webhost.” lo hago con “ftp. Con los otros elementos. básicamente lo que hay que hacer es una tarea de copiar y pegar. Luego verifico mi mail para activar la cuenta. En nombre de usuario pongo el que me enviaron por mail. y dándoles clic derecho los subo. y en clave la que definimos antes nosotros mismos. Si escojo móvil me preguntará el programa si deseo copiar de los diseños de los otros formatos. Pongo un nombre de usuario (mío. en la casilla servidor ingreso el dominio de mi sitio. en la barra superior tengo las tres opciones en las que elijo si estoy diseñando para ordenador. Pero para móvil me convendrá hacer un menú de navegación vertical.misitio.com” por ejemplo. ingreso el nombre de mi sitio en la casilla de subdominio (donde le agregaran a mi nombre una extensión “. A continuación selecciono todos mis archivos. Debo adquirir un dominio (por ejemplo www. a lo cual puedo darle que si en “plan del sitio” y “atributos de página”. . y creo una carpeta donde guardar los archivos exportados.php. y luego recibo otro mail con un nombre de usuario de hosting. SUBIR EL SITIO A LA RED: Cuando tengo mi sitio listo.”. En la ventana de la derecha ingreso a la carpeta public_html y borro el archivo ddefault. con botones altos (recordando que el usuario será táctil). y un hosting (donde se alojarán mis archivos). Pongo el nombre de mi dominio. En la ventana inferior izquierda busco la ubicación de mis archivos.DISEÑO DISPOSITIVOS WEB: En la solapa del diseño del SITIO en Muse. pero en vez de hacerlo con “www.html donde selecciono free hosting. pero variando los tamaños. Tablet o móvil.com140657. Abro el programa Filezilla y para loguearme.