Cómo crear una página ‘Sobre nosotros’

Para darte un primer reto real vamos a crear la primera página del nuevo sitio web. Será una página Sobre nosotros en la que puedes escribir información sobre tu empresa, tus proyectos o ti mismo. En la mayoría de las ocasiones, este tipo de páginas contienen un título, texto y algunas imágenes.

Contenido estático vs contenido dinámico

Una página sobre nosotros se suele crear solo una vez y es accesible desde un enlace del menú. En el futuro si hay algo que sea necesario cambiar tendrás que modificarla. Esta página tiene un carácter estático. Por el contrario, una entrada de un blog o una nota de prensa, tendría  un carácter dinámico.

• En las páginas estáticas la fecha de creación y el autor no es un dato importante.
• Las páginas estáticas suelen ser accedidas desde un enlace de menú, mientras que en las páginas dinámicas se hace mediante listados.

El plan

La página 'sobre nosotros'  consistirá en los siguientes componentes:

• Un titulo
• Un texto
• Una imagen
• La página no debe aparecer en la  portada
• Enlazaremos la página desde el menú superior horizontal (top)

Esto al principio puede parecer muy sencillo. Empieza haciendo login en la interfaz de administración.

Paso 1 – Crear el contenido

Ve al gestor de artículos (Contenido -> Gestor de Artículos). Allí podrás ver el contenido de ejemplo no publicado (Figura 1).

Figura 1: Gestor de artículos

Pulsa el botón Nuevo para crear un nuevo artículo e introduce el título y el texto. Debajo del título selecciona “sin categoría” como categoría. Esta categoría fue creada por el instalador cuando introdujo el contenido de ejemplo. El campo destacado  indica si el contenido debe ser mostrado en el blog de destacados, que suele ser empleado en la página principal. Selecciona No. En el editor puedes introducir el texto que quieres que aparezca en la página. Joomla trae instalado por defecto el editor TinyMCE (Figura 2).

Figura 2: Formulario de edición de artículo.

Insertando una imagen desde una URL

Como primer ejemplo vamos a coger una imagen de internet, por ejemplo esta:
http://farm2.static.flickr.com/1198/8982... (Figura 3)

Figura 3: Imagen de ejemplo

Mueve el cursor a la posición dentro del texto donde quieres insertar la imagen. Clic sobre el icono de imágenes en la barra de herramientas del editor (icono del árbol) y copia la URL de la imagen en el ventana pop-up que ha aparecido. Configura la imagen con un alineamiento a la izquierda y usa 10 píxeles de espacio en vertical y horizontal. (Figura 4).

Figura 4: Insertar imagen

La imagen aparecerá en la ventana del editor. Pulsa Guardar y el artículo será almacenado. Existen varias formas de guardado del artículo:

• Guardar – Se guarda el artículo y no se cierra el formulario. Se usa para guardar el trabajo y poder continuar trabajando.
• Guardar y cerrar – Se guarda el artículo y se cierra el formulario de edición.
• Guardar y nuevo – Se guarda el artículo, se cierra el formulario de edición y se abre uno nuevo vacío.

Paso 2 – Creando un enlace de Menú

El artículo ha sido creado, pero no aparece en el sitio web. Para que aparezca es necesario enlazarlo. Haz clic en el icono Nuevo del menú top desde el gestor de menús  (Menu→Top). A continuación haz clic en Seleccionar en el campo tipo de ítem de menú. Aparecerá una ventana popup donde puedes seleccionar los distintos tipos de menús. Selecciona el tipo mostrar un solo artículo (Figura 5).

Figure 5: Select a menu item type

Now you need to choose the desired article. Click the button Select / Change in the right pane (Select Article) to select it. You will see a search box with all articles. In case you can't find your article on the page right away, you can filter the list by typing a part of the article's title in the search box and then clicking on the title of the correct article in the result list (Figure 6).

Figure 6: Menu type - single article - select article

Enter a title for the link "About us" and make sure that top is selected in the menu location. We can leave the remaining options with their settings for now.

Paso 3 – 'Sobre nosotros' en el sitio web

Si accedes al frontend del sitio web descubrirás el nuevo enlace en el menú top. Haz clic en él y te llevará a la página con el contenido Sobre nosotros. ¡Felicidades! Has creado tu primera página (Figura 7).

Figura 7: Página sobre nosotros

Paso 4 – Subida de imágenes

Puedes subir las imágenes que necesites desde tu PC. Veamos juntos un ejemplo. Ve al gestor de artículos (Contenido→ Gestor de artículos). Si no puedes localizar el artículo utiliza el cuadro de búsqueda. Haz clic en el nombre del artículo para entrar en el modo de edición y borra la imagen que habías introducido.
Al final de la ventana del editor encontraras el botón Image. Este botón abre un cuadro de dialogo que permite subir una imagen. Puedes seleccionar una imagen existente o subir una nueva desde tu equipo (Figura 8).

Figure 8: Image upload

Una vez que la imagen ha sido insertada en el texto, el formato puede ser cambiado utilizando el icono de la imagen (icono del árbol) en la barra de herramientas del editor. Esta separación de funciones en Joomla está hecha a conciencia dado que tienes la posibilidad de utilizar diferentes tipos de editores. El botón de subida de imágenes siempre será el mismo, pero las opciones de formato pueden cambiar dependiendo del editor.

Atención: Joomla utiliza imagines tal y como se suben, es decir, no realiza ningún tipo de redimensionamiento.