Volver al índiceInterfaz de Amaya

En esta página se explica cómo configurar el interfaz de usuario de Amaya y se aconseja una configuración determinada:


Interfaz de usuario

Al ejecutar Amaya por primera vez, el aspecto es éste:

Interfaz original de Amaya

El interfaz de Amaya es el habitual de las aplicaciones gráficas, combinando elementos típicos de los navegadores con los de los editores:

Volver al principio de la página


Ventana de herramientas

Para este curso es conveniente elegir la posición personalizable en la lista desplegable "Posición de la ventana de herramientas" del menú Editar > Preferencias > Generales.

Configuración modificada de Amaya

Para guardar el cambio, se debe pulsar "Aplicar" y reiniciar Amaya. Al reiniciar Amaya, el aspecto será similar a este:

Interfaz original de Amaya con Ventana de herramientas Personalizable


La ventana de herramientas contiene diferentes elementos que facilitan la edición de páginas web. En el menú Ver > Barras de herramientas se pueden elegir las cajas de herramientas visibles. Para este curso es conveniente elegir las cajas Elementos, Atributos y Aplicar clase.

Menú Ver > Barras de herramientas

El aspecto es ahora similar a este:

Interfaz de Amaya personalizado

Las cajas de herramientas se pueden desplazar a un lado u otro de la pantalla y modificar su tamaño (ancho y alto). Para este curso se recomienda situar todas las cajas en un mismo lado de la pantalla (a la izquierda o a la derecha), como en la imagen siguiente:

Interfaz de Amaya recomendado

Volver al principio de la página


Ventana de trabajo

La ventana de trabajo muestra la página web que se está editando tal y como la veríamos en el navegador (aunque Amaya no admite alguna características de las hojas de estilo o las implementa de forma parcial).

Pestañas

La ventana de trabajo permite abrir varias páginas simultáneamente mediante pestañas. Se puede crear una nueva pestaña con el menú Archivo > nueva pestaña o con el atajo de teclado Ctrl+n+t. Se puede abrir el destino de una enlace en una nueva pestaña haciendo Ctrl+clic en el enlace o haciendo clic derecho en el enlace y eligiendo la opción "Abrir enlace en una nueva pestaña" del menú contextual.

Las pestañas se pueden reordenar arrastrándolas por la pestaña y cerrar haciendo clic en la cruz que aparece en la pestaña.

Volver al principio de la página


Vistas

La ventana de trabajo también puede mostrar simultáneamente la misma página de otras formas (que se llaman "vistas"). Se pueden elegir esas otras vistas mediante el menú Ver > Estructura / Código fuente / Enlaces etc..

Amaya Menú Ver > Vistas

Por ejemplo, la vista "Código Fuente" muestra el código fuente de la página que se puede editar directamente (las vistas se sincronizan cuando se guardan).

Amaya - Ver > Código fuente


Las opciones de menú Ver > Dividir vista ... permiten dividir la pantalla horizontal o verticalmente.

Amaya - Dividir vista horizontalmente


También se puede elegir la forma de división haciendo doble clic en los bordes inferior o derecho de la ventana de trabajo. Si la ventana ya está dividida, al hacer doble clic se cerrará la vista.

Amaya - Dividir vista horizontalmente


Arrastrando y soltando el separador de las vistas puede modificarse el tamaño las vistas.

Amaya - Modificar tamaño de vistas

Volver al principio de la página


Barra de estado

La barra de estado muestra información útil a la hora de editar una página web.

Amaya - Barra de estado

De izquierda a derecha, se encuentran los siguientes elementos:


En la parte izquierda de la barra de estado se muestran siempre las etiquetas que engloban al elemento en el que se encuentra el cursor. En la imagen anterior el cursor se encuentra en un enlace (a) en un párrafo (p) que se encuentra dentro de una división de clase section (div.section) que forma parte de la página web (<body> y <html>). Haciendo clic en la etiqueta correspondiente, se selecciona el elemento correspondiente.

Seleccionar un elemento mediante la barra de estado

El elemento seleccionado se resalta por su color de fondo:

Elemento seleccionado con la barra de estado


En la parte central se muestra en su caso información adicional sobre el elemento en el que se encuentra el cursor. Por ejemplo, en las imágenes anteriores en que el cursor se encuentra en un enlace, la barra de estado muestra el destino del enlace.


En la parte derecha se muestran tres informaciones:

  1. El selector de modo de edición (Texto / XML):

    Amaya - Modo de edición

    Haciendo clic en "Texto" se pasa al modo de edición XML y viceversa. El modo de edición XML es el modo de edición de las versiones de Amaya anteriores a la versión 10.0. El modo Texto se incoporó a partir de la versión 10.0 y es un modo de edición más parecido al de los procesadores de texto.

  2. El icono de estado WebDAV (icono verde o rojo)

    El icono de estado WebDAV muestra si el documento editado está disponible como recurso WebDAV y se muestra de color verde si lo está y de color rojo si no lo está.

    Amaya - Recurso WebDAV

  3. El icono del resultado de la validación del documento (icono verde o rojo).

    El icono de validación muestra si Amaya considera que la página es válida o no mostrando un icono verde o rojo respectivamente. La validación de Amaya no es idéntica a la validación que realiza el validador del W3C, por lo que aunque las diferencias son pequeñas una no puede sustituir a la otra.

    Amaya - Resultado de validación

    En principio, las páginas creadas con Amaya tendrían que ser siempre válidas, pero hay que tener en cuenta que en la vista de código fuente el usuario puede modificar cualquier elemento y generar código XHTML incorrecto, o un usuario puede abrir con Amaya una página generada con otro editor y que contiene errores.

    La validación se realiza al cargar el documento y en caso de encontrar errores se genera un aviso. En el ejemplo siguiente, el usuario ha borrado accidentalemente unas comillas en el código fuente y, al guardar el documento, Amaya genera un aviso y muestra el icono de validación rojo:

    Aviso de error de validación

    Al hacer clic en Mostrar se muestra una ventana que indica la línea del documento que provoca el problema y el tipo de problema (o varias si se detctan varios problemas). Haciendo clic en el enlace el cursor se sitúa en el punto exacto del problema.

    Resultado de la validación

Volver al principio de la página

Esta página forma parte del curso "Páginas web HTML / XHTML y hojas de estilo CSS" disponible en http://www.mclibre.org
Autor: Bartolomé Sintes Marco
Última modificación: 11 de octubre de 2011

Creative Commons License
Esta obra está bajo una licencia de Creative Commons Reconocimiento-CompartirIgual 3.0 España.