En el video anterior creamos la primera página del sitio y la asignamos como plantilla.

Transcripción

1 Creating and Publishing Menu En el video anterior creamos la primera página del sitio y la asignamos como plantilla. Habilitamos las regiones necesarias y para cada una de ellas configuramos sus propiedades. En el cabezal superior agregamos algunos GXportlets y reservamos el espacio para publicar el menú para navegar por el sitio. En este video crearemos el menu de navegación con cada una de sus opciones, lo publicaremos en el espacio que reservamos y ajustaremos su estética de presentación. Continuemos entonces diseñando la plantilla del sitio.

2 Fijamos todos los sectores. En la barra de herramientas de cada GXportlet siempre vamos a encontrar 2 botones y para algunos GXportlets tendremos disponible un tercer botón. El botón de la derecha es para eliminar el GXportlet de la página, al presionarlo se pide confirmación. Si se confirma la acción, el GXportlet se eliminará y no se podrá volver a recuperar. El botón anterior es para fijar o liberar un GXportlet en particular. Si tenemos una página con varios GXportlets, tal vez no queremos fijar todos los GXportlets para evitar que se presenten cada una de las barras de herramientas, y podríamos querer fijar o liberar algún GXportlet en particular. El botón más a la izquierda se presenta únicamente para algunos GXportlets y dependiendo del GXportlet tendrá diferente uso. En el GXportlet Menú se asignan los menús a presentar, en el GXportlet Contenido se definen los contenidos que se quieren publicar, en el GXportlet Imagen se abre el diseñador de imágenes con la imagen que se está presentando y podremos realizar diferentes ajustes de diseño. De este modo, dependiendo del tipo de GXportlet será la acción que se pueda realizar en caso de contar con este botón. Vamos a definir el menú que queremos presentar en la plantilla. Si el menú que queremos presentar ya existe en el sitio, lo vamos a seleccionar.

3 Como partimos de un sitio vacío, aún no tenemos disponible ningún menú para asignar. Vamos a crear un menú. Le asignamos un título y comenzamos a definir cada una de sus opciones. Cada opción puede apuntar a una página del sitio, a un link catalogado, puede apuntar a otro menú para ir creando menús con submenús ó puede apuntar a un link externo al sitio. Para ver que son los links catalogados, por favor diríjase a la documentación de GXportal a la cual podrá acceder directamente desde En este caso, vamos a crear una opción que nos lleve a una página del sitio.

4 Si la página ya existe en el sitio, la vamos a seleccionar, y si la página no existe la podemos crear en este momento. Hasta ahora la única página que tenemos creada es la plantilla. Por lo cual, vamos a definir una opción que apunte a una página que también crearemos ahora y confirmamos la acción. Quedó creada la opción del menú y la página a la que apunta. Para cada opción podemos seleccionar una imagen para presentarla, una imagen para presentar al pasar el mouse por encima de la opción, una imagen para presentar cuando la opción esté seleccionada, y otras imágenes y datos que los invito a investigar.

5 De este mismo modo vamos a continuar definiendo el resto de las opciones del menú. Para crear una nueva opción nos posicionamos en el menú, vamos a la opción Nuevo y realizamos los mismos pasos que para la opción anterior. Cada opción del menú va a apuntar a una página dentro del sitio y al crear cada opción aprovecharemos a crear la página a la que nos llevará. Si alguna opción no la creamos en el orden que corresponde, modificamos el orden arrastrándola hacia el lugar correcto. Ya tenemos el menú creado y presentándose en la plantilla.

6 Ahora queremos ajustar su estética según los patrones que nos sugirió el diseñador. Asignamos el color del texto de las opciones, el color del texto al pasar el mouse por encima y el color del texto cuando la opción esté seleccionada. Vamos a sacarle el color de fondo que tienen las opciones. Por ahora vamos a dejar la tipografía que tienen, ya que la tipografía a utilizar no es ninguna de las que viene con el sistema operativo, sino que es una web font. Cómo definir Web fonts y Google web fonts lo veremos en el próximo video.

7 Definimos que el menú se muestre horizontalmente asignándole a la propiedad Columnas el valor 0. Significa que se presente la primera opción y a su derecha cada una de las siguientes opciones. Habíamos asignado un color de fondo al sector para resaltar el espacio reservado para el menú, vamos a quitarlo. Para dejar una propiedad con su valor por defecto, podemos hacer clic con el botón derecho sobre la propiedad. Definimos que el sector tenga alineación derecha. Ajustamos el tamaño de las opciones y el ancho reservado, definimos su alineación centrada y modificamos la separación entre las opciones.

8 Refrescamos la vista previa de la página para ver cómo quedó definido el menú. El menú se está presentando de acuerdo a los patrones sugeridos por el diseñador. Lo único pendiente es utilizar la tipografía correcta. Ahora vamos a las herramientas de Diseño de GXportal a la opción Menús y vemos que el menú definido desde el diseñador de páginas aquí está disponible. Podríamos presentarlo en otras páginas si fuera necesario.

9 Por ejemplo si nuestro sitio tuviese más de un canal y cada canal utilizara una plantilla diferente, podríamos querer presentar un mismo menú en ambas plantillas. Desde aquí se administran de forma centralizada todos los menús del sitio. Se pueden crear nuevos menús, editar, borrar, publicar y copiar un menú. Los cambios que realicemos en un menú se reflejarán en todos los lugares donde se esté presentando. Vamos a ir a la Herramienta Mapa del Sitio, seleccionamos el canal Principal y vemos todas las páginas que hemos creado. Las acciones que podemos realizar, dependen del elemento que esté seleccionado. En estos momentos tenemos seleccionado un canal.

10 Queremos indicar cuál es la página inicial del sitio. Seleccionamos la página que corresponde, en la barra de herramientas cambiarán las acciones disponibles e indicamos que esta página es la Página Principal del Sitio. Estuvimos viendo cómo se define un menú y se publica en una página. En el próximo video vamos a seguir abarcando temas de diseño. Veremos cómo se administran los colores, las imágenes y tipografías.