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

Para darte un primer reto real, vamos a crear la primera página para tu nuevo sitio web. Será una página del tipo "sobre nosotros" en la que puedes escribir sobre tu compañía, tu proyecto o sobre ti mismo. En la mayoría de las ocasiones, esta página contiene un título, texto y, quizás, unas pocas imágenes.

Contenido estático vs. dinámico

Una página del tipo "sobre nosotros" normalmente sólo se crea una vez, es accesible a través de un enlace de menú y, en el futuro, todo lo que tendrás que hacer será actualizar un poco su contenido a medida que sea necesario. Tiene un carácter estático. Una nota prensa o una entrada de blog, sin embargo, tienen un carácter dinámico.

  • Para páginas estáticas, en contraste con las dinámicas, la fecha de creación y el autor no interesan en absoluto.
  • Las páginas estáticas normalmente son accesibles a través de un elemento de menú, mientras que las páginas dinámicas pueden ser accedidas a través de listas.

El plan

La página 'sobre nosotros' debería constar de los siguientes componentes:

  • un título,
  • un texto,
  • una imagen
  • La página no debería aparecer en la página principal.
  • Queremos un enlace a la página en el menú horizontal superior.

Esto puede sonar simple en principio :-). Sigue adelante e inicia sesión en el área administrativa del sitio.

Paso 1 - Crear contenido

Ve al Gestor de artículos (Contenido → Gestor de Artículos). Ahí debería estar aún tus datos de muestra despublicados (Figura 1).

cocoate.com/node/10301Article Manager

Figura 1: Gestor de artículos

Haz clic en el icono "nuevo" para acceder al formulario de edición correspondiente, y añade el título y el texto. En el panel superior, debajo del título, selecciona la categoría "uncategorized" (sin categorizar). Esta categoría fue instalada junto con los datos de muestra. El campo Destacado indica si quieres que el contenido se muestre en los elementos de menú del tipo "Mostrar todos los artículos destacados", que suele ser el más utilizado para crear páginas de inicio. Esto se introdujo con Joomla! 1.6, y sigue siendo válido para Joomla! 2.5, aunque los términos pueden ser confundidos fácilmente. Selecciona No para este campo. En la ventana del editor, puedes introducir ahora tu texto. Joomla! viene por defecto con el editor TinyMCE (Figura 2).

cocoate.com/node/10301Add Article

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

Insertando una imagen desde una URL

Como un primer ejemplo, vamos a usar una imagen que ya existe en la web.
Por ejemplo, esta: http://farm2.staticflickr.com/1198/89825... (Figura 3)

Hagen FitouHagen Fitou

Figura 3: Imagen de ejemplo

Mueve el cursor a la posición del texto en la que quieres insertar la imagen. Haz clic en el icono de imagen en la barra de herramientas del editor y pega la URL de la imagen en la ventana emergente que aparece. Configura la imagen con alineamiento a la izquierda, y usa un espacio vertical y horizontal de 10 píxeles (Figura 4).

cocoate.com/node/10301Insert Image

Figura 4: Insertar imagen

La imagen aparecerá en la ventana de tu editor. Haz clic en Guardar y tu contenido será almacenado. Hay varias maneras de guardarlo:

  • Guardar - El contenido es guardado. El formulario no se cierra. Se usa para guardar cuando quieres seguir trabajando en este contenido.
  • Guardar y cerrar - El elemento es guardado y el formulario se cierra.
  • Guardar y nuevo - El elemento es guardado, el formulario cerrado y se abre un nuevo formulario vacío para crear un artículo nuevo.

Sal del formulario.

Paso 2 - Creando un enlace de menú

El artículo ha sido creado, pero no aparece en el sitio web. Para que aparezca, necesita un enlace.

Haz clic en el icono Nuevo del Gestor de menús en el menú Top (Menú → Top).

Nota: Top es el nombre de la posición en la plantilla por defecto. Si no vas a usar esta plantilla ni los datos de muestra, el menú Top no existirá, o tendrá otro nombre.

Haz clic en el botón Seleccionar junto al campo Tipo de elemento del menú. Aparecerá una ventana con varios enlaces. Haz clic en el enlace Mostrar un solo artículo (Figura 5).

cocoate.com/node/10301Select Menu Item

Figura 5: Seleccionar un tipo de elemento de menú

Ahora necesitas elegir el artículo al que enlazará este elemento de menú. Haz clic en el botón Seleccionar / Cambiar en el panel de la derecha (junto a Seleccionar artículo) para elegirlo. Verás un cuadro de búsqueda con todos los artículos. En el caso de que no puedas encontrar tu artículo directamente, puedes filtrar la lista escribiendo parte del título del artículo en el cuadro de búsqueda y a continuación haciendo clic en el título del artículo correcto de la lista de resultados (Figura 6).

cocoate.com/node/10301Select Article

Figura 6: Tipo de elemento de menú - Mostrar un solo artículo - Seleccionar artículo

Introduce un título para el enlace "Sobre nosotros" y asegúrate de que en Menú está seleccionado Top. Podemos dejar el resto de opciones con su configuración por defecto por ahora.

Paso 3 - 'Sobre nosotros' en el sitio web

Si cargas ahora el frontend del sitio web, descubrirás un enlace nuevo en el menú superior. Haz clic en él y verás el contenido de Sobre nosotros - ¡Felicidades por haber creado tu primera página! (Figura 7).

cocoate.com/node/10301About Us Page

Figura 7: Página 'Sobre nosotros'

Paso 4 - Subir una imagen

Si tu imagen no está ya disponible en Internet, necesitarás subirla desde tu PC. Veamos juntos un ejemplo. Ve al Gestor de artículos (Contenido  Gestor de artículos). Si no puedes encontrar tu artículo, localízalo fácilmente usando el cuadro de búsqueda. Selecciona el título del artículo y se abrirá el formulario de edición. Elimina del texto la imagen enlazada.

Debajo de la ventana del editor encontrarás el botón Imagen. Este botón lanza un cuadro de diálogo para subir una imagen. Puedes elegir entre las imágenes existentes en el servidor o subir alguna nueva (Figura 8).

Joomla! 1.6 - cocoate.com/node/3608
Joomla! 1.7 - cocoate.com/node/8604About page

Figura 8: Subir imagen

Una vez que la imagen ha sido introducida en el texto, su formato puede cambiarse usando el icono de imagen de la barra de herramientas del editor. Esta separación de funciones en Joomla! fue elegida a propósito, porque así tienes la posibilidad de usar diferentes editores. El botón Imagen de Joomla! permanecerá siempre en el mismo sitio, pero el icono de edición del formato de la imagen del editor puede cambiar.

Atención: Joomla! usa las imágenes tal y como son. ¡No las redimensionará automáticamente!

Para solucionar este problema, echa un vistazo a la entrada del blog de Brian Teeman titulada: (haciendo Joomla! a prueba de idiotas) - Es posible que FBoxBot esté disponible para Joomla! 2.5 cuando estés leyendo estas líneas.