Curso de Drupal 7 (V): Estructura: Menús

Una vez introducido el contenido principal del sitio web, tanto artículos como páginas estáticas, es necesario configurar los menús, los bloques de contenido, la taxonomía y los distintos tipos de contenido. Para tener una idea clara de los conceptos fundamentales comentados anteriormente, puede pasarse por la primera parte del curso de drupal.
Para poder acceder a la configuración de la estructura del sitio web, vaya a la configuración y pulse en el elnace “Estructura” (Structure), por ejemplo a través de la barra de tareas, verá una pantalla similar a la siguiente…

Como puede observar existen 4 partes fundamentales en el apartado estructura, veremos cada uno de ellos.

Menus (Menus)

Si pulsamos en el enlace de menús nos saldrá la pantalla de configuración de los distintos menús disponibles en el sitio web…

 En la instalación Standard Drupal pone a nuestra disposición 4 menús:

  • Administración (Management): menú que contiene los enlaces a las tareas administrativas. Éste es el menú que presenta la barra de tareas.
  • Menú Principal (Main Menu): menú que normalmente se coloca en la parte superior del sitio web, suelen ser un listado sencillo de elementos principales del sitio web.
  • Navegación(Navigation):  menú normalmente lateral de navegación con en el que puede accederse a todos los contenidos del sitio web.
  • Menú de usuario (user menu): menú que visualiza el usuario al autenticarse en el sitio web.

Como puede verse en la captura disponemos de 4 enlaces principales par la gestión de los menús:

  • Añadir Menu (Add menu): en el que podemos dar de alta un nuevo menú.
  • Listar Enlaces (List links): en el que podemos pulsar para llevarnos al listado de elementos o enlaces que dispone dicho menú. como puede observarse existe un enlace a “Listar enlaces” para cada menú dado de alta en el sistema.

Añadir Menú

Pulsando este enlace, llegamos al formulario de alta de un nuevo menú…

 Es un formulario bastante sencillo sim’plemente introducimos un nombre y una breve descripción del mismo, para que luego recordemos para qué lo hemos dato de alta.
Pulsamos en el botón guardar y accedemos al listado de enlaces de dicho menú, de manera automática…

Listar Enlaces

A la pantalla de listar enlaces podemos acceder, o bien después del formulario de “Añadir Menu”, o bien, a través de la pantalla de “Menús” pulsando en el enlace “Listar enlaces” al lado de un Menú.
A continuación puede verse una captura de un “Listar Enlaces” del menu “Navegación” a modo de ejemplo…

en el listado de enlaces tenemos disponibles varias operaciones destacables:

  • Añadir enlace: lo que nos permitirá acceder al fomulario de alta de nuevos enlaces.
  • Cambiar el orden de los enlaces: mediante una operación de Arrastrar y Soltar (Drag and Drop) utilizando el icono con las 4 flechas que existe a la derecha de cada enlace, podemos cambiar el orden de presentación de los enlaces del menú.
  • Activar/Desactivar enlace: Mediante la CheckBox que hay debajo de la columna llamada “Activado”, podemos elegir si el enlace se presenta o no en el menú.
  • Editar: pulsando en el enlace Editar al lado derecho de un enlace, podemos cambiar las propiedades del enlace incluido en el menú.

Una vez finalizados los cambios, simplemente pulsamos en el botón “Guardar Configuración”  y se guardarán los cambios en el menú.

Editar Menu

Pulsando este enlace, se accede al formulario de modificación de los datos, principalmente la descripción del menú…

una vez finalizado ña edición de la descripción pulsamos en el botón “Guardar” y los cambios serám guardados.

Añadir enlace

Una vez pulsamos en el botón Añadir Enlace, aparece ante nosotros el formulario de alta de un nuevo enlace…

Los campos a rellenar son los siguientes:

  • Título del enlace: texto que aparecerá como nombre visible del enlace.
  • Ruta (URL): ruta url al contenido cuando se pulse en el enlace.
  • Descripción. breve descripción del contenido referenciado.
  • Activado: si se queda seleleccionada esta opción, el enlace aparecerá automáticamente en el menú.
  • Mostrar Expandido (Show as expanded): si dejamos selccionada esta opción, si en enlace tiene otros enlaces “debajo de él”, dichos enlaces serán mostrados. Nota: “Debajo de él”, significa que podemos ir organizando los enlaces como si fuera un árbol de enlaces, de esta manera es cómo se suelen organizar los mapas de la web o los menús desplegables. De esta manera un enlace, puede tener enlaces hijos asociados y un enlace puede tener un padre asociado.
  • Enlace Padre (parent link): desde este selector podemos mostrar quien es el “padre” de nuestro enlace. Cada Menú representa un elemento en el selector y debajo de el aparecerán todos los enlaces de manera jerarquizada (como si fuera un árbol de enlaces). De esta manera si decimos que el padre de un enlace es un menú, seleccionaremos que pertenece a él, y se ocnvertirá en un enlace de primer nivel de dicho menú. Si elegimos como padre un enlace de un menú, significará que el nuevo enlace se convertirá en “hijo” del enlace seleccionado y por lo tanto aparecerá “debajo de él” en su respectivo menú.
  • Peso: parámetro opcional de la configuración del enlace. permite establecer un peso al enlace, cuanto mayor sea el peso, más abajo aprecerá en el menú, es una manera de poder organizar los elementos dentro del menu, pero para ello es mejor hacerlo desde el listado de enlaces, con la operación Arrastras y Soltar.

una vez configurados los parámetros del enlace, pulsamos en el botón “Guardar”  y veremos el enlace en el listado de enlaces del menú donde hayamos introducido el enlace.

Editar enlace

 En el listado de enlaces al pulsar sobre el enlace “Editar” al lado de cualquier enlace nos aparecerá el formulario de edición del enlace, similar al siguiente…

El formulario practicamente es el mismo que en el caso de Añadir Enlace, por lo que simplemente cambiamos los valores necesarios y pulsamos en el botón “Guardar”.

Añadir un Menú como Bloque

 Dentro de listado de menús, podemos ver en enlace a la colocación del menú en los bloques, una vez lo pulsamos, sale una pantilla similar a la siguiente…

En el listado de bloque podremos seleccionar la región donde queremos visualizar el menú que queramos, una vez selccionado, pulsamos en el botón Guardar y podremos ver el menú colocado en el sitio web.

Licencia Creative Commons

Curso de Drupal 7 (IV): Introducción de Contenido

Las principales maneras de agregar un determinado contenido en Drupal 7 son:

  • En la barra de tareas pulsar en Contenido y luego pulsar en el enlace Agregar Contenido.
  • En la barra de atajos pulsar sobre el enlace Agregar Contenido.
  • En la barra de navegación del sitio web pulsar en Agregar Contenido.

de las 3 maneras aparecerá una pantalla similar a la siguiente…

como puede apreciarse en la captura aparecen los 2 tipos de contenidos iniciales disponibles en la instalación Standard:

  • Artículo: para noticias y contenidos variables en número y categorías.
  • Página básica: para poder introducir contenidos de manera estática, páginas estáticas.

Añadir artículo

Una vez pulsamos sobre el enlace artículo, se nos despliega una pantalla similar a la siguiente…

en la que podremos rellenar los campos correspondientes a este tipo de contenido:

  • Título: campo requerido con el título del artículo.
  • Tags: campo de taxonomía que permite categorizar el artículo con un conjunto de etiquetas (tags) separadas por comas.
  • Resumen (Edit Summary) : para poder disponer de un resumen o texto pequeño del cuerpo del contenido.Si no se rellena aprarecerá un texto truncado con parte del cuerpo del mensaje.
  • Cuerpo de Texto (Body): campo que almacena el grueso del texto del artículo.
  • Formato de Texto: permite seleccionar el tipo de formato que se aplicará al cuerpo del artículo, inicialmente existen 3 tipos fundamentales: HTML filtrado, HTML completo y Texto plano.
  • Imagen: permite subir una imagen relacionada con el artículo, inicialmente hasta 8 MB de tamaño y perteneciente a los formatos, png, jpeg, jpg, o gif.
  • Opciones de Menú: permite identificar si será un artículo que origine un elemento de menú.
  • Opciones de Revisión: permite identificar distintas revisiones del contenido a fin de hacer un seguimiento sobre el mismo, argumentando las razones del cambio.
  • Opciones de URL: permite cambiar la url a través de la cual se puede acceder al contenido.
  • Opciones de Comentarios: permite abrir o cerrar los comentarios del contenido.
  • Opciones de Autoría: permite cambiar el nombre del autor y la hora y fecha de publicación del contenido.
  • Opciones de Publicación: permite cambiar el estado de publicación, si está presente en la página principal o si se coloca al comienzo de las listas de contenidos.

Añadir Página

Nos saldrá una página similar a la siguiente…

en la que podremos rellenar los campos correspondientes a este tipo de contenido:

  • Título: campo requerido con el título del artículo.
  • Resumen (Edit Summary) : para poder disponer de un resumen o texto pequeño del cuerpo del contenido.Si no se rellena aprarecerá un texto truncado con parte del cuerpo del mensaje.
  • Cuerpo de Texto (Body): campo que almacena el grueso del texto del artículo.
  • Formato de Texto: permite seleccionar el tipo de formato que se aplicará al cuerpo del artículo, inicialmente existen 3 tipos fundamentales: HTML filtrado, HTML completo y Texto plano.
  • Opciones de Menú: permite identificar si será un artículo que origine un elemento de menú.
  • Opciones de Revisión: permite identificar distintas revisiones del contenido a fin de hacer un seguimiento sobre el mismo, argumentando las razones del cambio.
  • Opciones de URL: permite cambiar la url a través de la cual se puede acceder al contenido.
  • Opciones de Comentarios: permite abrir o cerrar los comentarios del contenido.
  • Opciones de Autoría: permite cambiar el nombre del autor y la hora y fecha de publicación del contenido.
  • Opciones de Publicación: permite cambiar el estado de publicación, si está presente en la página principal o si se coloca al comienzo de las listas de contenidos.

Como podemos ver, el arículo y la página son muy similares salvo por el hecho que la página tienen menos datos a rellenar el formulario. La página no tiene ni imagen ni taxonomía asociadas.

 Cambiar la página inicial

 Una de las principales tareas a la hora de realizar un sitio web es el establecimiento de la página principal del sitio web, es decir el contenido inicial que estará disponible en el sitio web si el usuario entra al siti opor primera vez.
Para cambiar la página inicial debemos acceder a las configuración, por ejemplo a través de la barra de tareas…

Después pulsaremos en el enlace “Información del sitio” (Site Information)…

 como puede verse en la captura, será necesario editar el apartado correspondiente a la página principal.
Existen dos campos principales, un selector que permite elegir el número de artículos presentes es la página principal. Esta configuración merece especialmente la pena cuando estamos mostrando un sitio de noticias, en el que queremos presentar las noticias relevantes del sitio. así todos aquellos contenidos que, en su edición, hemos marcado en las opciones de publicación, la opción “Colocado en la página principal.”.
El otro campo es el que nos permite indicar la ruta URL, del contenido inicial que queremos presentar como página inicial, tal como habremos configurado en las opciones de URL del contenido previamente introducido.
Una vez cambiados estos parámetros salvamos pulñsando en el botón de Guardar Configuración.

Licencia Creative Commons

Curso de Drupal 7 (III): Entorno de Administración Básica

El Entorno de Administración

La administración de Drupal 7 se realiza de una manera muy sencilla a través del módulo toolbar, cuando entramos por primera vez al sitio web desde la instalación nos aparece un interfaz similar al siguiente…

como se puede observar en la captura, en la parte superior de la página aparece una barra horizontal de color negro. Ésta es la Barra de Tareas de Drupal. Justo debajo de la barra de tareas aparece una barra de atajos, donde podemos ir configurando aquellos enlaces directos a las tareas típicas de administración.

La Barra de Tareas

Mediante esta barra de tareas disponemos de enlaces a los principales módulos de administración de Drupal 7, de izquierda a derecha…

  • Home: Enlace a la página principal del sitio web.
  • Panel de control: Pantalla de resumen de la actividad sobre el sitio web, es fácilmente configurable, para adaptarse a nuestras necesidades específicas. 
  • Contenido: módulo principal de gestión de contenidos del sitio web.
  • Estructura: conjunto de módulos que nos permiten gestionar la estructura principal del sitio web, includos los bloques, los menús, las taxonomías y los tipos de contenido.
  • Apariencia: módulo de gestion de temas visuales, plantillas o templates, que determinan la manera en la que se ve el sitio web.
  • Personas: módulo de gestión de usuarios, roles y permisos del sitio web.
  • Módulos: gestión de funcionalidades disponibles y activadas para el sitio web.
  • Configuración: gestión de configuraciones globales al sitio web, tales como el título del sitio web, el sistema de registro de usuarios, etc…
  • Informes: gestión de informes del funcionamiento y configuración del sitio web, crucial para la verificación de la instalación
  • Ayuda: módulo que agrupa distintas guías de uso de drupal.
  • Menú de Usuario: permite la gestión de la cuenta de usuario, así como cerrar la sesión.

La Barra de Atajos

Ésta barra de atajos nos permitirá configurar acciones típicas que realicemos como administradores del sitio web, inicialmente incluye tres opciones principales:

  • Agregar contenido.
  • Hallar contenido.
  • Editar atajos: así podremos configurar de manera unificada los enlaces presentes en esta barra. 

Al acceder a cualquiera de los elementos configurables desde la barra de tareas es posible pulsar sobre el icono + que aparece al lado del nombre del elemento, para poder añadirlos a los atajos. Inicialmente sólo se pueden añadir un total de 7 atajos.

     Enlaces Contextuales

    Los enlaces contextuales de Drupal 7 permiten en algunos módulos la inclusión de enlaces contextuales al contenido que presentan, que evitan la necesidad de ir al apartado de administración para gestionar dichos contenidos. Es posible configurar los permisos para habilitar a distintos perfiles el uso de dichos enlaces contextuales.

    Éste módulo está activado en la instalación Stardard.

    El Panel de Control (Dashboard)

    Se puede acceder al panel de control desde la barra de tareas pulsando en el enlace “Panel de Control”, tendrá un aspecto similar al siguiente…

    La idea del panel de control es poder disponer de un vistazo toda la información relevante al sitio web drupal. Para ello es altamente configurable, mediante el enlace denominado “Personalizar panel de control”, con el que veremos un interfaz sencillo de personalización similar al siguiente…

    donde podremos editar de una manera intuitiva mediante el enlace, añadir otros bloques…

    y con el ratón con el movimiento arrastrar y soltar del ratón moverlos entre las distintas posiciones disponibles en el panel de control…

    Referencias:

    Licencia Creative Commons

    Curso de Drupal 7 (II): Instalación y Configuración Básicas

    Una vez conocidos los conceptos básicos de Drupal, nos ponemos manos a la obra a instalar drupal 7. Para simplificar la tarea de instalación y configuración de Drupal, se ha escogido un sistema operativo Windows 7, debido a su extendido uso en la sociedad.

    Por lo tanto los requisitos de instalación para este tutorial son lo siguientes:

    Instalación de XAMPP

    A continuación  seguimos los pasos de este tutorial del ministerio de educación. O bien podemos descargarnos el ejecutable autoinstalable con asistente, el típico .exe de instalación de siguiente, siguiente… Finalizar.

    Una vez instalado XAMPP, digamos en el directorio c:xampp, por poner un ejemplo, abrimos la carpeta con el explorador de carpetas.
    Veremos un ejecutable llamado: xampp-control.exe , lo ejecutamos con un doble click y nos parecerá la pantalla de manejo de servidores de XAMPP.
    Cada vez que queramos que Drupal funcione será necesario tener arancado los servidores Apache y Mysql, para esto basta con pulsar sobre los iconos Start, que están al lado de Apache primero y luego de Mysql.
    Si todo ha ido bien, al lado del nombre de Apache y Mysql debería apareces un etiqueta con fondo verde con el texto “Running”.
    Para verificar la instalación de XAMPP, bastará con entrar a la siguiente dirección URL, a través de nuestro navegador favorito: http://localhost/phpmyadmin
    Si la instalación y el arranque de los servicios ha sido correcta, Deberíamos ver el listado de bases de datos disponibles en Mysql desde el interfaz web de PhpMyAdmin.
    Los datos de conexión a Mysql por defecto en la instalación de Mysql en XAMPP son los siguientes:

    • Servidor: localhost
    • Puerto: 3306
    • Usuario: root
    • Contraseña: vacía (significa que no tiene contraseña ni es necesario introducirla para conectar)

    Con esto tenemos todo lo necesario para poder instalar un drupal 7 en nuestro ordenador, más adelante detallaremos los pasos necesarios para su subida a producción, o dicho de otra forma, a un hosting para publicar el sitio web en Internet.

      Instalación de Drupal 7 (updated)

      Creando la Base de datos inicial

      Esta tarea podemos realizarla desde el PhpMyAdmin a través de la URL: http://localhost/phpmyadmin
      Una vez abierto el navegador en esa dirección, aparecerá el listado de bases de datos, similar al siguiente:

      Pulsamos sobre el Icono “Bases de Datos” en el menu superior de PhpMyAdmin, aparecerá el formulario de creación de bases de datos, le damos un nombre, por ejemplo “drupal7” y pulsamos en el boton “Crear”.

      Deberíamos ver un mensaje que nos muestra que la base de datos ha sido creada satisfactoriamente.

      Una vez hecho esto, ya tenemos la base de datos creada y disponemos de los datos necesarios para la instalación de Drupal 7, por recapitular:

      • Servidor: localhost
      • Puerto: 3306
      • Usuario: root
      • Contraseña: vacía (significa que no tiene contraseña ni es necesario introducirla para conectar)
      • Base de datos: drupal7

      Copiando las carpetas y ficheros al Servidor web

      Una vez creada la base de datos ya podemos pasar a la descarga, descompresión y copia de los ficheros de drupal 7 al directorio htdocs de XAMPP.
      Para ello descargamos el fichero zip desde la web de Drupal…

       y guardamos el fichero en el disco duro, por ejemplo en la carpeta Descargas.
      Una vez descargado, procedemos a descomprimir el archivo…

      Haciendo un Doble clic en el fichero descargado esto nos abrirá la ventana del Explorador de windows y nos aparecerá una carpeta llamada drupal-7.x donde x será el número de revisión de Drupal 7.
      Descomprimimos la carpeta en el directorio htdocs, si hemos realizado la instalación en la carpeta C:xampp el directorio htdocs estará en C:xampphtdocs , teniedo como resultado una pantalla similar ala siguiente donde encontramos la carpeta drupal-7.x…

      Con esta descompresión/copia de carpeta a htdocs, lo que conseguimos es tener disponible el directorio de drupal desde el servidor web. Para facilitar el acceso a la instalación y a efectos de la guía renombraremos la carpeta y le pondremos el nombre “drupal”. Así podremos acceder a la instalación desde la dirección URL: http://localhost/drupal

      Arrancando el instalador

      Una vez en la dirección URL http://localhost/drupal veremos una pantalla similar a la siguiente…

      Éste es el primer paso de la instalación la selección del tipo de instalación. Como puede observarse en la captura, existen dos modos de instalación, uno Standard y otro Minimal. Por motivos de la guía y para facilitar la entrada de los lectores a drupal, elegiremos el modo Stardard, ya que facilita el acceso a determinadas funcionalidades que ayudan a la gestión de Drupal. El modo Minimal, comosu nombre indica instala sólo lo básico para que un Drupal funcione, sin ayudas añadidas.
      Por lo tanto seleccionamos, Stardard y pulsamos en “Save and Continue”, así veremos la siguiente  pantalla…

      Como puede apreciarse en la captura, el único idioma presente en la instalación de Drupal 7 es el Inglés, pero nos ofrece la posibilidad de ir a una página en la cual nos explica cómo instalar otros idiomas.

      Como indica la captura, será necesario descargar el fichero de idioma drupal-7.x.es.po y copiarlo en la carpeta “profiles/standard/translations”.
      Así quedará el fichero copiado en dicha carpeta…

       De esta manera al pulsar sobre el enlace que permite recargar la configuración de idioma en el navegador web en el instalador de drupal, nos saldría una pantalla similar a la siguiente…

      Pulsamos en el idioma Spanish y pulsamos en “save and continue”. Si hubieramos seleccionado el modo de instalación “Mininal” no aparecería esta opción de selccionar Spanish, por más que copiáramos correctamente el fichero a su carpeta correspondiente, debido a que el módulo “locale” estaría desactivado.
      A continuación nos aparecerá la pantalla de configuración de la base de datos…

      En ella ya nos aparece traducida al castellano, para introducir los datos de configuración principales: nombre de la base de datos: drupal7 , nombre de usuario: root , contraseña: vacía (se deja este campo si rellenar). El instalador ya entiende por defecto que debería realizar la instalación en el servidor alojado en localhost (nuestro mysql local), el resto de parámetros no hace falta configurarlos en la instalación Standard. Pulsamos en “Guardar y Continuar”, veremos la pantalla de instalación de módulos de drupal similar a la siguiente…

      Una vez terminada la instalación de módulos pasará a la configuración del perfil, y luego a la Configuración del sitio web, con una pantalla similar a la siguiente…

      Donde configuraremos los datos principales del sitio web, nombre del sitio web, correo principal del sitio (donde recibiremos notificaciones del sistema), nombre del usuario administrador, correo del administrador, contraseña del administrador, Zona horaria, etc…
      Para facilitar el uso de la guía dejaremos tanto el nombre de usuario y como la contraseña como: admin
      Una vez terminado de introducir los datos,  pulsamos en Guardar y Continuar…
      Así tendremos instalado correctamente el Drupal 7, segun indica la captura…

      y se acabó ya tenemos el Drupal instalado!
      Si pulsamos sobre el enlace veremos la página inicial con la toolbar de administración…

      Hasta el próximo tutorial.

      Licencia Creative Commons

      Suscríbete al Boletín

      Si quieres estar al tanto de las novedades del blog, ya sabes :)
      * = campo obligatorio

      powered by MailChimp!

      Uso de cookies

      Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información. ACEPTAR

      Aviso de cookies