MANUAL DE PUBLICACIÓN EN PORTAL UNED

Transcripción

1 MANUAL DE PUBLICACIÓN EN PORTAL UNED Manual de Publicación en PORTAL-UNED Equipo WEB.

2 ÍNDICE 1. INSERTAR TEXTO EN LA PÁGINA INSERTAR UN ARCHIVO EN LA PÁGINA INSERTAR UNA IMAGEN EN LA PÁGINA ENCABEZADOS FORMATO DE TEXTO CÓMO INSERTAR ENLACES A OTRAS PÁGINAS CREAR SUBPÁGINAS CÓMO CREAR UN MENÚ DE NAVEGACIÓN USANDO UN PORTLET Universidad Nacional de Educación a Distancia

3 1. INSERTAR TEXTO EN LA PÁGINA 1º Situarse en la página que se va a editar. 2º Pulsar en el Botón Edición que indica en la siguiente imagen: Universidad Nacional de Educación a Distancia - 2

4 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): Universidad Nacional de Educación a Distancia - 3

5 1. INSERTAR TEXTO EN LA PÁGINA 5º Se accede a una nueva pantalla donde seleccionamos el elemento que se quiera añadir (texto): Aceptar y añadir el texto: Universidad Nacional de Educación a Distancia - 4

6 1. INSERTAR TEXTO EN LA PÁGINA 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. Por último se acepta y queda añadido el texto. Universidad Nacional de Educación a Distancia - 5

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. Universidad Nacional de Educación a Distancia - 6

8 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. Universidad Nacional de Educación a Distancia - 7

9 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. Universidad Nacional de Educación a Distancia - 8

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. 2. En la siguiente pantalla seleccionamos el elemento imagen: Universidad Nacional de Educación a Distancia - 9

11 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): Universidad Nacional de Educación a Distancia - 10

12 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. 4. Por último aceptar para ver el resultado. Universidad Nacional de Educación a Distancia - 11

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: Universidad Nacional de Educación a Distancia - 12

14 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. Universidad Nacional de Educación a Distancia - 13

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 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. Universidad Nacional de Educación a Distancia - 14

16 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> Universidad Nacional de Educación a Distancia - 15

17 5. FORMATO DE TEXTO 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>. Universidad Nacional de Educación a Distancia - 16

18 5. FORMATO DE TEXTO 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" 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 Elementos de la lista Elementos de la lista Lista numerada Es similar a la anterior salvo que no utiliza viñetas, enumera los subelementos. El código html es el siguiente: La etiqueta <OL> abre la lista y </OL> la cierra. Universidad Nacional de Educación a Distancia - 17

19 5. FORMATO DE TEXTO 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 Universidad Nacional de Educación a Distancia - 18

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 Acceder al modo edición en la página donde se quiere añadir el enlace. Universidad Nacional de Educación a Distancia - 19

21 6. AÑADIR ENLACES En la región resaltada en rojo de la imagen anterior añadir elemento y seleccionar enlace de página : Se muestra la siguiente imagen: Universidad Nacional de Educación a Distancia - 20

22 6. AÑADIR ENLACES 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: 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: Universidad Nacional de Educación a Distancia - 21

23 6. AÑADIR ENLACES 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. Universidad Nacional de Educación a Distancia - 22

24 6. AÑADIR ENLACES 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 ). Universidad Nacional de Educación a Distancia - 23

25 6. AÑADIR ENLACES El resultado es el siguiente: Universidad Nacional de Educación a Distancia - 24

26 6. AÑADIR ENLACES 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: El elemento que hay que incluir es URL como muestra la siguiente imagen: 2. Se añade la URL de destino y el Nombre a mostrar: Universidad Nacional de Educación a Distancia - 25

27 6. AÑADIR ENLACES El resultado es el siguiente: Universidad Nacional de Educación a Distancia - 26

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): Universidad Nacional de Educación a Distancia - 27

29 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. Para modificar tanto la plantilla hay que realizar los siguientes pasos. Universidad Nacional de Educación a Distancia - 28

30 7. CREAR SUBPÁGINAS 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 Universidad Nacional de Educación a Distancia - 29

31 7. CREAR SUBPÁGINAS Después tan solo hay que seleccionar en el menú la plantilla que se ajuste a las necesidades de edición. (Facultades, asignaturas, etc.) Universidad Nacional de Educación a Distancia - 30

32 7. CREAR SUBPÁGINAS Una vez seleccionada tan sólo hay que aceptar y ver la presentación preliminar. Universidad Nacional de Educación a Distancia - 31

33 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. Universidad Nacional de Educación a Distancia - 32

34 CREAR MENÚ DE NAVEGACIÓN Una vez situados en el web a modificar (página) accedemos al modo Edición. Nombraremos la subpágina creada del siguiente modo incluida la descripción. Universidad Nacional de Educación a Distancia - 33

35 CREAR MENÚ DE NAVEGACIÓN 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. Universidad Nacional de Educación a Distancia - 34

36 CREAR MENÚ DE NAVEGACIÓN Primero se eliminará la Plantilla: El siguiente paso es en la pestaña de Opcional habilitar las características de Portlet : Universidad Nacional de Educación a Distancia - 35

37 CREAR MENÚ DE NAVEGACIÓN 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. Universidad Nacional de Educación a Distancia - 36

38 CREAR MENÚ DE NAVEGACIÓN 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 : Universidad Nacional de Educación a Distancia - 37

39 CREAR MENÚ DE NAVEGACIÓN 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: Se activa el modo Edición : Universidad Nacional de Educación a Distancia - 38

40 CREAR MENÚ DE NAVEGACIÓN 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. Universidad Nacional de Educación a Distancia - 39

41 CREAR MENÚ DE NAVEGACIÓN 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: Universidad Nacional de Educación a Distancia - 40

42 CREAR MENÚ DE NAVEGACIÓN Universidad Nacional de Educación a Distancia - 41

43 CREAR MENÚ DE NAVEGACIÓN Pulsar en Aceptar y se volverá al modo gráfico donde aparece ya el Menú Portlet creado. Universidad Nacional de Educación a Distancia - 42

44 CREAR MENÚ DE NAVEGACIÓN El resultado final es el siguiente: Para cualquier tipo de duda o consulta infoportal@csi.uned.es. Universidad Nacional de Educación a Distancia - 43