Composer: Publicar sus páginas en la web 3.- Composer: Introducción Mozilla Composer nos permite crear nuestras propias páginas web y publicarlas en la web. No tenemos que saber HTML para utilizar Composer; es tan fácil como usar un procesador de textos. Por su sencillez y su precio (es gratuito) es el que se recomienda siempre para publicar en la Universidad de Alicante. Con la herramienta componer sólo publicaremos páginas web, el contenido multimedia (imágenes, videos, pdf, word,…) serán publicados a través de la aplicación desarrollada por la Universidad llamada “Publiweb”. Más información en el apartado 10 “Entorno de publicación web”: Los botones de la barra de herramientas nos permiten añadir listas, tablas, imágenes, enlaces a otras páginas, colores y tipos de letra. Podemos ver qué aspecto tendrá el documento en la web a medida que se crea, y puede compartir fácilmente un documento con otros usuarios, sin importar qué tipo de navegador o programa de correo con soporte de HTML utilicen. Las partes o zonas en que se divide la pantalla del composer son las siguientes: En los menús encontraremos todas las opciones. Generalmente usaremos los botones de la barra de herramientas y del Formato de Texto. Antes de empezar resaltar que antes de pulsar un botón o seleccionar un menú, debemos pensar sobre que parte de texto, imágenes o tabla, vamos a aplicarlo. Con esto tratamos de hacer hincapié en que al igual que para poner un texto en negrita, seleccionamos el texto que nos interesa y damos a negrita, para hacer un enlace, primero debemos seleccionar el texto que queremos que sea el enlace. Página 7 Composer: Publicar sus páginas en la web 3.1. Barra de estado La podemos ver en la siguiente imagen: Nos permite alternar entre el composer y el navegador, así como seleccionar etiquetas y borrarlas. Veamos un ejemplo donde quitamos la etiqueta “b” de texto en negrita en un párrafo: Primero pinchamos sobre la etiqueta “b”, se seleccionará todo el texto que engloba dicha etiqueta: Ahora pinchamos botón derecho sobre la etiqueta y nos sale un cuadro de diálogo que nos permite eliminarla: Página 8 Composer: Publicar sus páginas en la web Una vez eliminada la etiqueta vemos el resultado final: 3.2. Barra de herramientas de modo edición La podemos ver en la siguiente imagen: Composer permite saltar rápidamente entre cuatro "modos de edición" o vistas. Cada modo de edición permite continuar trabajando en el documento, pero muestra diferentes niveles de etiquetas HTML (e iconos de etiquetas). La barra de herramientas del modo de edición tiene cuatro pestañas: • Normal: éste es el modo de edición WYSIWYG (‘What You See Is What You Get’ – ‘lo que ves es lo que obtienes’), por lo que se visualiza la forma en la que se mostrará el documento al tiempo que se crea. Seleccionamos este modo para que se muestren los bordes de las tablas y los iconos de los vínculos internos. El resto de iconos de las etiquetas HTML están ocultos. • Mostrar todas las etiquetas: Seleccionamos este modo para que se muestren los iconos de todas las etiquetas HTML. • Etiquetas <HTML>: seleccionamos este modo para ver y editar el documento como código fuente HTML sin formato. • Vista preliminar: seleccionamos este modo para visualizar y editar el documento de la manera exacta en la que aparecerá en la ventana de un navegador. Nota: los enlaces y las funciones JavaScript estarán desactivadas. Página 9 Composer: Publicar sus páginas en la web 3.3. Barra de herramientas La podemos ver en la siguiente imagen: Las 3 siguientes opciones no las usamos, porque en la Universidad trabajamos modificando y publicando páginas ya creadas. Para crear un nuevo documento. Desaconsejada Cuando queremos recuperar una página que hemos grabado anteriormente. Almacenar lo que hayamos hecho o modificado. Publicación directa. Es el sistema que se usa actualmente en la Universidad de Alicante para actualizar nuestras páginas. Para ver en el navegador el resultado de la página que acabamos de publicar. Para imprimir el documento, da igual en qué vista nos situemos, porque imprime lo que se visualiza en la “vista normal”. Nos permite hacer vínculos o enlaces entre páginas. Ver más información en el apartado 6: “Composer: enlaces” Permite saltar a determinados sitios de nuestra página. Esta opción no aparece por defecto, debemos irnos a “Editar – preferencias – composer – barra de herramientas” y seleccionar “Enlace interno”. Ver más información en el apartado 6.4: “Enlaces con ancla” Página 10 Composer: Publicar sus páginas en la web Insertar imágenes. Ver más información en el apartado 7 “Composer: Imágenes”. Para insertar tablas. Ver más información en el apartado 8 “Composer: Tablas” Para revisar la ortografía del documento. Pinchamos sobre el botón y nos saldrá un cuadro de diálogo que nos permite revisar la ortografía. Pudiendo seleccionar el idioma de la revisión, añadiendo palabras al diccionario, etc. Si el diccionario del idioma no está en la lista desplegable podemos descargarlo de la siguiente dirección: http://dictionaries.mozdev.org/installation.html Página 11 Composer: Publicar sus páginas en la web 3.4. Barra formato de texto La podemos ver en la siguiente imagen: El aspecto visual es muy parecido a las barras de herramientas de editores de texto, aunque algo más limitado. Determina el estilo de párrafo. Por ejemplo (Titulo1 - <H1> // Titulo2 - <H2>). Nota: al pasar de un estilo a otro nos hace un salto de línea. Vemos un ejemplo con los distintos tipos: Página 12 Composer: Publicar sus páginas en la web Color del texto, y color del fondo del texto. Por ejemplo dentro de una tabla podemos asignar el color de fondo de una celda. Reduce el tamaño de la fuente.(No usado en el web de la UA por incompatibilidad entre Navegadores) Aumenta el tamaño de la fuente. .(No usado en el web de la UA por incompatibilidad entre Navegadores) Pone el texto en negrita. Pone la letra en Cursiva. Subraya el texto. (No usado por producir confusión con enlaces) Crea una lista de viñetas. Cuando trabajemos con listas (tanto viñetas como numeradas) el composer deja una línea en blanco antes de la lista. Es una limitación del HTML. Ver más información en el apartado 2.3 Crea una lista numerada. Sangría hacia la izquierda. Es la manera de poder recuperar o disminuir la sangría que tuviera el párrafo. Sangría hacia la derecha. No recomendamos sangrar con espacios porque es posible que de un navegador a otro o de un tamaño de ventana a otro, se vea de manera diferente. Para ello usamos esta opción que también la podemos usar dentro de una lista para crear subniveles dentro de un nivel. En el caso de las lista de viñetas si vamos sangrando la viñeta cambia de formato. (Círculos, círculos rellenos y cuadrados rellenos). Página 13 Composer: Publicar sus páginas en la web Alineación a la izquierda. Alineación al centro. Alineación a la derecha. Justifica el texto. Crea una capa Cambia la disposición de la capa, la envía al fondo. Cambia la disposición de la capa, la pone delante de todas. Página 14