percepcion def

Psicologia de la Percepción Visual

Guía práctica para webhttp://www.ub.edu/pa1

http://usd.proves.ub.edu/pa1

PSICOLOGIA DE LA PERCEPCIÓN VISUALGuía práctica para la creación y modificación de contenidos

1. VALIDACIÓN EN LA WEB

Para poder introducir nuevo contenido en el web, o modificar el ya existente, debemos validarnos como usuario registrado. Para ello, teclearemos “user” después de la dirección web del navegador que estemos usando:

http://www.ub.edu/pa1/ user (en nuestro servidor: http:/usd.proves.ub.edu/pa1/user)

Esto hará que aparezcan en pantalla los campos para introducir nuestro código de usuario y contraseña (destacados en la imagen siguiente en color azul).

Una vez introducidos los datos de acceso, clicaremos en el botón “INICIAR SESIÓN” (destacado en color rojo).

A partir de entonces, podremos editar el contenido existente, así como introducir los nuevos.

1

http://www.ub.edu/pa1

http://usd.proves.ub.edu/pa1/user

http://www.ub.edu/pa1/user




2. CREACIÓN DE CONTENIDO

En la siguiente imagen podemos ver las diferentes opciones para la creación de contenido que nos ofrece el gestor de contenidos Drupal.

Destacado con un rectángulo rojo tenemos la opción básica que nos ofrece el menú (Contenido). Existen además unos “atajos” que en situaciones concretas nos permiten ir más rápido a determinadas opciones. Este “atajo” lo vemos destacado en color amarillo y simplemente nos llevara más rápido al apartado de “Agregar contenido”.

Si hemos seleccionado la opción “Contenido” del menú (en color rojo en la imagen), nos aparecerá el cuadro que vemos debajo de la barra principal. Destacado en color azul, se muestra la opción de “+ Agregar contenido”.

Una vez seleccionada esta opción, los pasos siguientes son idénticos a los que aparecen si usamos el “atajo” (destacado en color amarillo). Nos aparecerá la pantalla siguiente:

Disponemos de dos opciones de introducción de contenidos: Artículo y Página básica. A continuación se explica en detalle cada una de las opciones, pero habitualmente utilizaremos ``Página básica´´.

Al seleccionar ``Página básica´´, tal y como se muestra en la imagen siguiente, aparece un formulario para introducir el contenido que se requiere. Destacado en color rojo tenemos el campo Title (Titulo), marcado con un asterisco rojo (*), lo que significa que es un campo que se tiene que

2




rellenar obligatoriamente. Si dejamos en blanco un campo marcado con asterisco, no podremos guardar el contenido que estemos creando.

En color azul vemos la barra de herramientas con la que le daremos formato al contenido. Básicamente su funcionamiento es análogo al de la barra de herramientas de Word.

En color amarillo vemos el campo donde insertaremos el contenido. Aquí podemos escribir texto, pegarlo, etc. Además podemos agregar imágenes, como veremos más adelante.

En la siguiente imagen mostramos la parte inferior de la Página básica:

En esta parte inferior podemos ver una serie de opciones de configuración de la Página básica:

- En primer lugar encontramos el “Formato de texto” (destacado con un rectángulo rojo) que no da dos opciones, “Filtered HTML” y “Full HTML”. La diferencia entre estos dos formatos es que el “Full HTML” almacena y despliega el contenido tal como se verá posteriormente. Será el que utilizaremos por norma general.

- A continuación, encontramos distintas pestañas para introducir información. El número exacto de pestañas depende de las características que estén activas en la web. Sus ajustes predeterminados vienen definidos por la configuración del tipo de contenido, que puede cambiar, y pueden ser anulados para cada elemento. Opciones del menú: Puede hacer que la página esté disponible en un menú (Proporcionar

enlace del menú). Esta es una buena opción para una página básica como ésta, pero probablemente no para contenidos menos permanentes, como entradas de blog.

Titulo del enlace del menú es el nombre que le daremos a esta página a la hora de enlazarla con un menú. La Descripción es lo que aparece cuando pasemos por encima del enlace. El Elemento padre será la ubicación donde enlazaremos nuestra página.

3




Opciones de la ruta URL: Podemos cambiar el nombre de la ruta o dirección.

Para el resto de opciones, su configuración por defecto suele ser la correcta.

Una vez introducido el texto y habiendo configurado todo a nuestro gusto podemos “Guardar” nuestra Página Básica, pero es conveniente probar una “Vista previa” para asegurarnos que todo está correcto.

Una vez creada esta nueva página nos la cargara en la página principal de nuestra web.

Como podemos ver en la siguiente imagen, nos aparece el Titulo (destacado en rojo) en la parte superior del menú lateral. El contenido (destacado en azul) nos aparece a la derecha.

Podemos ver en la parte superior de la zona destinada al contenido, que hay tres pestañas (destacado en verde). Nos interesa destacar dos de ellas: VER y EDITAR. Si deseamos modificar el contenido, haremos clic en la pestaña EDITAR.

4




3. INSERTAR IMAGEN EN EL CONTENIDO

Desde una página que ya tenemos hecha, clicamos sobre la pestaña “Editar” . Se abrirá la pantalla de edición de contenido (ver imagen) que hemos descrito en el apartado anterior.

Para insertar una imagen en el contenido debemos buscar en la barra de herramientas la opción de “IMAGEN”, que es la que podemos observar resaltada en rojo en la imagen inferior.

El icono sobre el que hay que clicar es

Una vez hemos clicado sobre el icono para insertar una imagen, aparecerá la siguiente pantalla:

5

Insertar imagenInsertar imagenInsertar imagenInsertar imagenInsertar imagen




Normalmente las imágenes las tenemos en nuestra carpeta en el servidor, por lo que haremos clic en “Ver Servidor” (imagen superior resaltado en azul). Accederemos a una pantalla como la de la imagen inferior:

6




En esta ventana encontraremos las imágenes que tenemos en las carpetas subidas dentro de nuestro espacio web. Tal y como se observa en la imagen, sólo se encuentra alojada la imagen CRAI_logo_blanco.png

Una vez aquí, podemos buscarla (en el área destacada en color azul) y seleccionarla clicando en Insert File (destacado en color rojo). Si no tenemos subida al servidor la imagen que queremos insertar, simplemente clicamos en el botón “Subir al servidor” , (destacado en color amarilllo), la seleccionamos y la subimos, como podemos observar en la siguiente imagen:

Al pulsar sobre Subir al servidor se abre la ventana destacada en color azul, según se muestra en la imagen. Clicamos en “Examinar” (destacado en amarillo); se abrirá el Explorador de Archivos de nuestro ordenador. Buscamos la imagen en nuestro ordenador, le asignamos el tamaño que queramos (marcando la opción small, medium, o large) y finalmente lo subimos pulsando Subir al servidor (destacado en amarillo en la siguiente imagen). En este caso hemos señalado “small”.

7




Una vez subida la imagen, la buscamos, la seleccionamos y la insertamos pulsando “Insert file” (destacado en color amarillo) tal y como se ha explicado anteriormente.

El resultado sería similar a lo que se muestra en la imagen siguiente:

8




El resultado final, tras pulsar en el botón Guardar lo vemos en la imagen siguiente:

4. ENLAZAR NUEVA PAGINA A UN MENÚ

Para enlazar una nueva página a un menú determinado debemos clicar en el botón ESTRUCTURA del menú principal de Drupal (destacado en color azul). Se abrirá una ventana con varias opciones. Clicaremos en la opción MENÚS (destacado en la imagen siguiente en color amarillo). Nota: Las opciones que veamos pueden variar en función de las opciones habilitadas en cada proyecto.

Se abrirá una pantalla similar a la mostrada a continuación:

9




Desde aquí podremos añadir menús (desde la opción “+ Añadir menú” destacada en azul en la imagen), y/o modificar menús ya existentes.

En la parte derecha de la pantalla, bajo el título “OPERACIONES”, tenemos tres tipos de opciones:

-Listar enlaces: podemos organizar los enlaces de las diferentes páginas asociadas a un determinado menú.

-Editar menú: podemos cambiarle el nombre al menú, la descripción, etc.

-Añadir enlace: podemos añadir un enlace de una página al menú.

En nuestro caso, nos interesa añadir un enlace a un menú existente. Así pues, clicaremos sobre la opción Añadir enlace.

Se abrirá una pantalla similar a la que se muestra a continuación:

10




Destacado en color azul está el campo Título del enlace del menú. Tal y como hemos visto, cuando creamos una nueva página, en Opciones del menú nos daba la opción de crear un enlace de menú. Si al crear la página le dimos un Titulo del enlace del menú, aquí debemos poner exactamente el mismo; en caso contrario, deberíamos volver a editar la página y le asignaríamos un título de menú.

En cuanto a la Ruta (destacado en color turquesa), es la dirección de ruta interna de nuestra web para una página en concreto. En Drupal, la nomenclatura que se usa es es, por ejemplo, node/76.

Como antes, si al crear la página no asignamos una dirección en “Opciones de la ruta URL”, el gestor de contenidos Drupal, por defecto, nos asigna una dirección web que normalmente es node/un número o un alias (nombre de la página) .

En nuestro ejemplo de página nos ha asignado lo siguiente:

Una vez hemos introducido los datos requeridos en los dos apartados obligatorios (Titulo del enlace del menú y Ruta), clicaremos en el botón Guardar.

Atención: para establecer la ruta la ruta se debe poner la url pero siempre a partir de “casos integrats”, es decir se omitirá siempre esta parte de la URL (http://www.ub.edu/pa1).

El siguiente paso nos lleva dentro del menú en el que hemos enlazado nuestra nueva página (en nuestro ejemplo dentro de “menú lateral”):

11

http://www.ub.edu/pa1




Podemos ver como aparece nuestra página ya enlazada dentro del menú. Finalmente la guardamos pulsando en Guardar configuración (destacado en color rojo).

Ahora sólo falta situar en enlace en el lugar que deseemos. Para ello lo arrastraremos al lugar deseado. Los ítems que se encuentran situados más a la derecha son hijos de los anteriores. Aparecen en el menú desplegable de la página.

Por último, clicaremos de nuevo en Guardar configuración.

12

percepcion def

Documents