MANUAL DE PUBLICACIÓN EN PORTAL UNED

(1)

MANUAL DE PUBLICACIÓN

EN PORTAL UNED

Manual de Publicación en PORTAL-UNED Equipo WEB.

[email protected]

(2)

Equipo WEB. [email protected]

ÍNDICE

1. INSERTAR TEXTO EN LA PÁGINA... 2

2. INSERTAR UN ARCHIVO EN LA PÁGINA... 6

3. INSERTAR UNA IMAGEN EN LA PÁGINA ... 9

4. ENCABEZADOS... 13

5. FORMATO DE TEXTO ... 15

6. CÓMO INSERTAR ENLACES A OTRAS PÁGINAS ... 21

7. CREAR SUBPÁGINAS... 30

CÓMO CREAR UN MENÚ DE NAVEGACIÓN USANDO UN PORTLET ... 35

(3)

Universidad Nacional de Educación a Distancia - 2 –

1. INSERTAR TEXTO EN LA PÁGINA

1º Situarse en la página que se va a editar.

(4)

Equipo WEB. [email protected] 1. INSERTAR TEXTO EN LA PÁGINA

3º Se accede al modo “Edición” donde se muestra el área de trabajo, en la siguiente imagen la zona en rojo muestra el lugar donde se añadirá un texto de prueba, en dicha región también puede incluirse imágenes, archivos, etc.; las regiones en azul se utilizan para añadir “Portlets” que se explicará en otro manual.

4º Para añadir el texto hay que pulsar en el icono que se muestra en la siguiente imagen (en las regiones de “portlet” no puede hacerse):

(5)

5º Se accede a una nueva pantalla donde seleccionamos el elemento que se quiera añadir (texto):

(6)

NOTA: Si se edita con Internet Explorer automáticamente en la imagen anterior se muestra un editor de texto por defecto, lo mas recomendable es insertarlo usando código “HTML”, para ello recomendamos ver el manual de “HTML Básico” con las etiquetas mas comunes.

El resultado final usando “html” será más profesional que con el editor de texto de Internet Explorer. Si se utiliza “Firefox” no se muestra ningún editor.

(7)

2. INSERTAR UN ARCHIVO EN LA PÁGINA

En el siguiente manual se explica como añadir archivos en las páginas de la UNED, dichos archivos pueden ser documentos PDF, comprimidos (zip y rar), documentos de Word, Access, Excel, etc.

Como ejemplo se utilizará un documento PDF pero es valido para los demás tipos de archivo.

1. Acceder al modo edición de la página web donde se quiera añadir dicho archivo. (Pulsar en la opción editar de la página).

2. Solamente se pueden añadir archivos en las regiones con el icono. Pulsar en dicho icono en la región resaltada en rojo de la imagen anterior.

(8)

Equipo WEB. [email protected] 2. INSERTAR UN ARCHIVO

3. Se accede a un listado de elementos a añadir, seleccionar “archivo”:

4. La pantalla siguiente presenta varias opciones de las cuales nos interesan las que se muestra en la imagen inferior. Son el nombre del archivo, la localización de éste en el ordenador y una descripción.

(9)

Equipo WEB. [email protected] 2. INSERTAR UN ARCHIVO

5. Al pulsar en el botón “Browse…” se muestra un navegador del ordenador para localizar el archivo que se quiere añadir.

6. Localizado el archivo se le añade el nombre y descripción y aceptamos. El resultado se muestra en la siguiente imagen.

(10)

3. INSERTAR UNA IMAGEN EN LA PÁGINA

El proceso se asemeja a insertar un archivo o elemento de texto. 1. Acceder al modo edición de la página web y pulsar en el icono.

(11)

Equipo WEB. [email protected] 3. INSERTAR UNA IMAGEN

3. Como en todos los elementos se muestran una serie de opciones de las cuales hay que destacar, la localización de la imagen en nuestro equipo para subirla a portal y el mapa de imagen que permite inserta código “html” y así añadirle acciones como enlaces y la descripción (recomendable):

(12)

Equipo WEB. [email protected] 3. INSERTAR UNA IMAGEN

Antes de nada hay que localizar la imagen que se quiere subir a portal en el ordenador, para ello pulsar en “Browse …” y en la ventana nueva localizar dicha imagen.

(13)

4. ENCABEZADOS

Los encabezamientos condicionan la importancia del texto que les acompaña. Para que se puedan reconocer fácilmente las jerarquías ofrecemos de varios tamaños que han de insertarse siguiendo un patrón.

El código html que utilizaremos es muy simple, consta de una etiqueta de apertura <h1>y otra de cierre </h1>entre las cuales va el título deseado. El número representa la importancia o tamaño del encabezado siendo el 1 el más grande y el 5 el más pequeño.

<h1>Encabezado a mostrar</h1>

Ejemplos:

Encabezamientos <h1>no se usará Encabezamientos <h2> títulos de documentos

Encabezamientos <h3> Subtítulos de páginas

Encabezamientos <h4> Títulos de secciones

Encabezamientos <h5> Subtítulos de sección

Hay casos en los que nos interese insertar en un recuadro o separador un título para darle más relevancia, esto es posible añadiendo a la etiqueta del encabezamiento correspondiente una clase.

Ejemplo: Encabezamiento <H3 class=separador>Encabezamiento importante </h3> que da como resultado:

(14)

Equipo WEB. [email protected] 4. ENCABEZADOS

NOTA:

El tamaño base a emplear en los encabezados es <h2> en el Título de la sección o subpágina web el cual es de color azul y alineado a la izquierda.

Los subtítulos que se añadan después han de respetar la numeración decreciente <h3>, <h4> y <h5> manteniendo la homogeneidad del web.

(15)

5. FORMATO DE TEXTO

El párrafo forma la parte principal de contenido de una página web, por defecto aparece alineado a la izquierda y sin justificar.

Existen varios tipos que se pueden utilizar según las necesidades:

5.1. Párrafo simple

Las etiquetas html que utiliza son <p> para la apertura y </p> para cerrar. Entre las dos va el texto del párrafo.

Ejemplo: <p>Este es un párrafo simple y que será el más utilizado en nuestro trabajo.</p>

Este es un párrafo simple y que será el más utilizado en nuestro trabajo. Este es un párrafo simple y que será el más utilizado en nuestro trabajo. Este es un párrafo simple y que será el más utilizado en nuestro trabajo.

5.2. Párrafo delimitado por dos líneas:

Utiliza una clase llamada "item" que enmarca entre dos líneas horizontales el texto del párrafo. Usa una capa con clase, la etiqueta de las capas es

<div> texto del párrafo </div>

la clase "item" se añade a la capa del siguiente modo <div class="item"> texto del párrafo </div>

Ejemplo: <div class="item">Esto es un párrafo delimitado por dos líneas horizontales.</div>

Esto es un párrafo delimitado por dos líneas horizontales. Esto es un párrafo delimitado por dos líneas horizontales. Esto es un párrafo delimitado por dos líneas horizontales. Esto es un párrafo delimitado por dos líneas horizontales. Esto es un párrafo delimitado por dos líneas horizontales.

(16)

Equipo WEB. [email protected] 5. FORMATO DE TEXTO

5.3. Párrafo Destacado

Utiliza la clase "parrafodestacado" en la etiqueta de capa para resaltar información. La etiqueta quedaría del siguiente modo.

<div class="parrafodestacado"> texto del párrafo </div>.

Ejemplo: <div class="parrafodestacado"> Esto es un párrafo destacado por ser importante.</div>

5.4. Divisores o Recuadros

Utiliza la clase "parrafoconrecuadro" en la etiqueta capa creando subdivisiones de la página. Recomendable para subelementos. Las etiquetas son <div

class="parrafoconrecuadro"> texto del párrafo </div>. Ejemplo:

<div class="parrafoconrecuadro"><h3>Titulo de la sección </h3>

<p>Esto es una subsección que además tiene un titulo <h3> al comienzo. Esto es una subsección que además tiene un titulo <h3> al comienzo. </p> </div>

(17)

5.5. Avisos destacados

Utiliza la clase "avisos" dentro de la etiqueta de capa para referirnos a los avisos importantes a destacar, uso recomendable en los menús de páginas. Las etiquetas son <div class="avisos"> texto del aviso </div>, se pueden insertar etiquetas de

encabezado dentro de la de avisos para poner títulos. Ejemplo:

<div class="avisos"><h3>Aviso Destacado</h3> <p>Esto es un aviso destacado muy importante.</p> </div>.

(18)

5.6. LISTAS

Para editar con la aplicación y pode ordenar la la información se ofrecen dos tipos de listas: "Lista con viñetas" y "Lista numerada".

5.6.1. Lista con viñetas

Estas listas aparecen alineadas a la izquierda y con una viñeta marcando cada elemento.

El código html es el siguiente: La etiqueta <ul> abre la lista y </ul> la cierra.

Cada elemento de la lista va entre las etiquetas <li> y </li> como se muestra en el ejemplo siguiente.

Como quedaría en Portal:

• Elementos de la lista

5.6.2. Lista numerada

Es similar a la anterior salvo que no utiliza viñetas, enumera los subelementos. El código html es el siguiente:

(19)

Cada elemento de la lista va entre las etiquetas <LI> y </LI> como se muestra en el ejemplo siguiente.

Como quedaría en Portal:

1. Elementos de la lista numerados 2. Elementos de la lista numerados 3. Elementos de la lista numerados

(20)

6. CÓMO INSERTAR ENLACES A OTRAS PÁGINAS

Existen dos tipos de enlaces para añadir en las páginas web:

• Enlaces de página (a las propias páginas del Portal UNED) • Enlaces externos (a páginas fuera de la UNED)

Enlaces de Página

(21)

Equipo WEB. [email protected] 6. AÑADIR ENLACES

En la región resaltada en rojo de la imagen anterior añadir elemento y seleccionar “enlace de página”:

(22)

El enlace será a una página del propio Portal, como ejemplo se tomará la subpágina “Cómo publicar en el WebUned” que se encuentra dentro de “Ayuda” en la siguiente dirección:

http://portal.uned.es/portal/page?_pageid=93,550130&_dad=portal&_schema=PORTAL

IMPORTANTE: Al pulsar en el icono se accede a una nueva ventana donde hay que buscar la página a la que se quiere enlazar en forma de explorador, en el ejemplo de este manual “como publicar en el WebUned” presenta la siguiente ruta:

UNED Inicio >> Ayuda >> Cómo publicar en el WebUNED

Cada una de las páginas que se quieran enlazar tiene una ruta de navegación de portal que ayuda a la hora de localizarlas en el explorador:

(23)

Se parte de “UNED Inicio” y se pulsa en el símbolo “+” que indica la flecha, con ello se accede a todas las páginas que “cuelgan” del Inicio de la UNED, en el caso del ejemplo hay que localizar “Ayuda”.

Dentro de ayuda se encuentra la página a la que se enlazará “Cómo publicar en WebUNED” para ello.

Una vez localizada hay que pulsar en la opción “Objeto de Retorno” que se encuentra a la derecha como se muestra en la imagen siguiente.

(24)

Una vez que se añade la página que se quiere enlazar, se pone el nombre para mostrar en la web (ejemplo: Cómo Publicar en WebUNED ).

(25)

(26)

Enlaces Externos

El procedimiento para añadir un enlace a una página externa a la UNED es el siguiente: 1. Necesitamos la URL de la página a la cual se va a enlazar, como ejemplo la web del Ministerio de Educación que es la siguiente:

http://www.mec.es/

El elemento que hay que incluir es “ URL” como muestra la siguiente imagen:

(27)

(28)

7. CREAR SUBPÁGINAS

Acceder al modo edición en la página web donde se va a crear la subpágina:

Pulsar en el icono que muestra la flecha roja de la imagen anterior para crear la subpágina, se muestra una nueva pantalla en la que se pide una serie de características para configurar la nueva página a crear. (Ver siguiente imagen):

(29)

Equipo WEB. [email protected] 7. CREAR SUBPÁGINAS

Una vez que se han facilitado todos los datos y se activa (IMPORTANTE) la opción “Almacenar en Caché sólo Definición de Página” se pulsa en “Terminar”.

NOTA: Para el ejemplo del manual el nombre de la subpágina es “Nueva página”

Una vez pulsado “Terminar” se accede a la Subpágina creada en modo “edición” de forma que se puede trabajar con ella directamente.

Por defecto tiene aplicada una plantilla del tipo: UNED-content-2.1 es decir un parte para el menú y otra para contenido.

(30)

MODIFICAR PLANTILLA: En el modo edición de la nueva página hay que pulsar en propiedades como se muestra en la siguiente imagen:

La siguiente ventana muestra varias opciones en forma de pestañas, pulsar en la pestaña “Plantilla”

(31)

Después tan solo hay que seleccionar en el menú la plantilla que se ajuste a las necesidades de edición. (Facultades, asignaturas, etc.)

(32)

(33)

Equipo WEB. [email protected] CREAR MENÚ DE NAVEGACIÓN

CÓMO CREAR UN MENU DE NAVEGACIÓN

USANDO UN PORTLET

La finalidad de este manual es la creación de un menú de navegación. Dicho menú consiste en una página simple de “Portal” en la cual se ha eliminado la plantilla por defecto (de plantilla 2.1 pasa a 1) y modificado varias opciones para convertirla en “Portlet”.

La ventaja de utilizar el menú “Portlet” consiste en que puede insertarse dicho elemento en cualquier lugar del web (páginas) y a la hora de modificarlo se aplicará a todas las páginas donde se encuentre, no será necesario ir una por una.

********************************

Tomaremos como ejemplo la siguiente imagen de la página que vamos a crear:

El cuadro rojo muestra el lugar donde se insertará el típico menú de navegación. En este caso se utiliza una página de prueba que representa el web que se quiera modificar.

(34)

Una vez situados en el web a modificar (página) accedemos al modo “Edición”.

(35)

Pulsar en “Terminar” y se accede al modo gráfico donde se muestra la página vacía. En dicha pantalla hay que ir a “Propiedades de página” como se muestra en la siguiente imagen:

En propiedades se eliminará la plantilla y se le asignan las características de “Portlet” con las pestañas de la parte superior derecha.

(36)

Primero se eliminará la Plantilla:

El siguiente paso es en la pestaña de “Opcional” habilitar las características de “Portlet”:

(37)

Una vez realizado el paso anterior estará disponible la opción de eliminar regiones, eliminar todas las regiones menos una (la marcada en tono rojo) como se muestra en la siguiente imagen. Portal pedirá autorización para eliminar o suprimir contenido, aceptar siempre. NOTA: NO ELIMINAR LA REGIÓN MARCADA.

Una vez eliminada las regiones marcadas anteriormente la pantalla que debe aparecer es la siguiente:

En ella tan solo se dispone de una región donde se añadirán los elementos que interesen. Normalmente un título para el menú y los enlaces oportunos a las páginas del web.

(38)

Como ejemplo se añade un “Título de Menú” y dos enlaces de página como se muestra en la siguiente imagen:

Nota: Para el color rojo del título del menú se ha empleado el siguiente código “html” <p class=titmenu> Título del Menú </p>

Por última una vez incluidos los elementos necesarios ya disponemos del “Menú Portlet”.

El siguiente paso es volver a la página anterior al “Portlet” creado, en el caso de este manual es “Prueba Portlet” como se muestra en la “Ruta de Acceso”:

(39)

Y después en modo de edición “LISTA” para localizar el Portlet creado:

IMPORTANTE: Si fuese necesario modificar el Portlet se accede a él con el modo “LISTA”.

***********

Con estos pasos ya estaría creado el portlet, ahora tan solo queda insertarlo en las páginas correspondientes. Lo primero es situarse en dicha página:

(40)

IMPORTANTE: Los “Portlets” solo pueden añadirse en Regiones para Portlets, ver imagen:

Pulsar en “Añadir Portlet” y en la siguiente pantalla en “Contenido de Portal Publicado”:

NOTA: no tiene porqué aparecer todas las opciones mostradas en la siguiente imagen, depende del usuario.

(41)

En la siguiente pantalla seleccionar la opción: “WEB UNED” donde se accede a un listado de todos los portlets creados en Portal, los más recientes aparecen en la parte inferior de la lista:

(42)

(43)

Pulsar en “Aceptar” y se volverá al modo gráfico donde aparece ya el “Menú Portlet” creado.

(44)

El resultado final es el siguiente: