Documentación en Plantilla Institucional

Para acceder a la plataforma, se recuerda que el usuario para acceder debe escribirse de la forma: uclm\usuario.

Asimismo, si se desea acceder desde fuera de la UCLM hace falta conectarse a través de una conexión vpn.

Mostramos a continuación una imagen de la interfaz de trabajo, en ella encontraremos tres herramientas que serán las que más utilicemos:

1. - Content Editor - Gestión de contenidos web.
2. - Media Library (Mediateca) - Gestión de documentos e imágenes en la librería de medios.
3. - Icono en la esquina superior izquierda (icono con 9 cuadrados) - Acceso al panel inicial.

Analicemos el menú de "Content Editor" 

• Menú de Navegación. Se trata del menú situado en la parte superior. En la edición usaremos  “Home” y “Publish”.
• Cinta de opciones: La cinta de opciones es contextual a la herramienta de menú de navegación que tengamos seleccionado.  Algunos opciones de mayor uso son “Guardar” (Save) o “Publicar” (Publish). 
• Salir. 
• Idioma. Por defecto la versión en la que trabajemos será la española, sólo accederemos a cambiar el idioma si deseáramos generar una versión en inglés del contenido que estamos editando. 
• Árbol de contenidos. Contenido de la web. 
• Página de contenido: Donde se irá introduciendo la información que contendrá el sitio web.

Árbol de contenidos:

Los usuarios responsables de gestionar un determinado sitio web de la UCLM pueden visualizar el árbol completo de contenidos de la web de la UCLM, sólo podrán editar y modificar la rama del árbol que gestionen.

• Home:  Estructura real de contenidos de la página web. 

• Global: Encontraremos elementos a los que se podrá hacer referencia desde distintos puntos de la estructura de contenidos.

Todo item en el árbol de contenidos debe tener un nombre, este nombre se utiliza para la gestión interna del CMS (Content Management System). 

• Este nombre formará parte de la URL (dirección web específica) del propio elemento. 
• Se recomienda usar un nombre que identifique el elemento. 
• No está permitido el uso de espacios en blanco ni caracteres especiales. Se pueden usar guiones en lugar de espacios en blanco. 
• Se debe evitar el uso de tildes y eñes.  

Los atributos de un item 

El atributo “Nombre”de un ítem no es lo mismo que el nombre del ítem de CMS. Es importante cumplimentarlo y se recomienda que sea igual o similar al nombre del ítem.

El atributo “Título”  tiene un uso directo en Sitecore, aparecerá:

• En la descripción de la entrada de menús de navegación en la parte izquierda.
• En la miga de pan (rastro de páginas desde la página inicial a la actual),
• En la etiqueta sobre la imagen de cabecera.

El atributo "Titulo" sí puede contener caracteres especiales.

Sí puede contener caracteres especiales.

Editando un ítem

Para iniciar la edición de un ítem  debemos bloquearlo antes. De esta forma evitamos la edición por parte de otro editor. Para bloquear y editar un elemento pulsaremos sobre el mensaje con fondo amarillo: “Lock and Edit” en la parte superior de la ficha del item.

Cuando salvemos y antes de abandonar la edición podemos desbloquear los elementos que hemos utilizado. Cuando desbloqueemos un elemento otro editor podrá acceder  a él si fuera necesario. Para volver a dejar el elemento desbloqueado y a disposición de otros editores de contenido usaremos el comando “My items” del menú “Review”.

Se pueden desbloquear todos los elementos con los que hayamos trabajado con esta opción (Unlock all).

En la sección Elementos de Contenido se explica cómo se pueden ir añadiendo elementos a nuestras páginas web.

La Mediateca (Media Library)

La gestión de los recursos tales como imágenes y documentos se realiza desde la mediateca. Podrás organizar todos estos recursos con una estructura en árbol similar al árbol de contenidos.

Para vídeos es recomendable el uso de plataformas como youtube cuando se quiere una amplia difusión, o bien stream si se quiere que la difusión sea dentro de UCLM.

Cargar ficheros (documentos o imágenes) en Media Library: 

Para subir un fichero, pulsaremos el botón derecho sobre la carpeta elegida “Insert” >“Upload file”. Podrás subir varios ficheros a la vez con la opción  "Upload files"

La opción  "New Folder" sirve para crear nuevas carpetas. 

Las imágenes deberán ajustarse a los estándares establecidos. Véase  tabla de resoluciones.

Eliminar ficheros: 

Es importante conocer el proceso de eliminación de los elementos de la librería de medios porque si seguimos unos pasos muy sencillos nos puede resultar muy práctico, no sólo eliminar una imagen o PDF, por ejemplo, sino sustituir los enlaces que haya en la web por otros elementos que vayan a permanecer en la librería.

Al eliminar una imagen que tenemos en la librería de medios con  botón derecho - Delete,  Sitecore nos informa sobre las 3 posibles opciones entre las que tenemos que elegir:

1. Remove links - Eliminar los enlaces a la imagen.
2. Link to another item - Enlazar con otro ítem, para sustituir ese enlace por otro. Realiza la sustitución de las referencias que queden rotas.
3. Leave Links - the links will appear in the Broken Links report - Dejar los enlaces, que aparecerán en el Informe de Enlaces Rotos.

 Si vamos a realizar una sustitución general pulsamos sobre “Continue”, si no, tendremos que editar de forma individual los links que queramos particularizar usando el botón “Edit Links”.

El término metadatos podríamos definirlo como datos que describen otros datos. Los metadatos ayudan a buscar y ubicar datos. En cuanto a  lo que nos ocupa,  se trata de aquella información que  incorporamos en nuestra página web para que  los motores de búsqueda puedan incluirla en sus resultados. Los metadatos no forman parte estrictamente de la información que se muestra al usuario en el navegador cuando está viendo la página.

Los Items de Sitecore,  páginas publicables,  incluyen el apartado llamado Metadata, los campos más relevantesde esta sección son:

• Etiqueta de título (<title>): Es importante que todas las páginas cuenten con título y que éste sea único.
• Meta description: Información que resume la información de la página. Es opcional pero recomendable en la mayoría de los casos. También debe ser única.

Por defecto, cuando se crea una nueva página, el campo <Title> en la sección de los Metadata se rellena automáticamente con el atributo nombre de la página.

Título (Title)

Los títulos de las páginas son útiles en mejorar el ranking de los  resultados que muestren de los motores de búsqueda y deben de animar al usuario a pulsar sobre nuestro enlace.

Algunas recomendaciones para mejorarlos:

•  Deben de estar formados por hasta 12 palabras y tener un máximo de 64 caracteres incluyendo espacios.
•  Las palabras más significativas deben estar al comienzo del título. Las primeras 7 u 8 palabras son las que realmente se cuentan como título, el resto se considera contenido normal de la página.
•  Tratar de usar barras verticales para separar frases y evitar guiones, asteriscos y subrayados.
•  Las frases importantes deben ser cortas y sencillas.
•  No es suficiente un buen título de página para mantener bien situada una página con poco contenido o intrancendente.

Descripción (description): 

Al igual que el título influye en las visitas ya que también forma parte de la información que se muestra en las páginas de los resultados de búsqueda de los motores de búsqueda como Google. También las redes sociales usan esta información al compartir páginas.

Los aspectos clave para redactar descripciones eficaces:

• Ponerse en el lugar del visitante, deben dar a entender que se conoce su problema y se tiene la solución. Es importante que estén orientadas a emociones.
• Deben estar alineados con el mensaje institucional y la información de otros medios.
• Deben “sonar” bien y encajar con el tono de la institución.
• No debe usarse como una lista de palabras clave ya que los buscadores lo identifican como spam y pueden penalizarla.
• Debe encajar en 156 caracteres que es el espacio que dejan los buscadores para incorporar la descripción en sus páginas de resultados.

Ejemplos de buenas descripciones:

Ejemplos de malas descripciones:

• No crear título para una página.
• Repetir palabras a modo de spam. Los motores de búsqueda penalizan esta estrategia.
• Redactar títulos muy largos. Los óptimos son entre 50 y 60 caracteres.
• Escribir el nombre de la organización en todas las páginas.
• Mantener nombres que no estén vinculados al contenido.

Claves para mejorar el posicionamiento en buscadores:

• Consistencia de la información:

Aunque pueda parecer trivial, el contenido de la web debe contener palabras clave relevantes para hacer atractivo el contenido de nuestros potenciales visitantes. Es conveniente usar las mismas palabras para los mismos conceptos y que éstas tengan una carga de contenido especialmente reconocible para nuestros clientes.

Los robots de los buscadores analizan la consistencia entre los títulos y los contenidos con lo que este concepto debe estar presente de manera constante en la confección de la información.

No es conveniente incorporar todas las palabras clave como contenido de un elemento. Este tipo de iniciativas son detectadas como “poco naturales” y pueden conllevar que la página no sea indexada por los buscadores.

Una buena estrategia es colocar alguna o algunas palabras clave en el primer párrafo. Además los robots también prestan especial atención a palabras escritas en negrita o itálica.  Si incorporamos palabras claves destacadas pueden tener un efecto positivo en el posicionamiento.

Para mejorar la experiencia de usuario es conveniente que las páginas traten con un tema claro y único que pueda suscitar el interés de quien realmente lo tiene. Si se incluyen varios temas en la misma página corremos el riesgo de que muchos usuarios no la encuentren relevante.

 Los buscadores valoran aquellas páginas que se actualizan de manera frecuente.

•  Los Metadatos: 

Es importante cumplimentarlos debidamente, puedes consultar  la sección de metadatos. 

•  Las URL:

Las URL tienen su importancia y en Sitecore se conforman básicamente con los nombres de los ítem.

Es importante que no contengan caracteres especiales para que la lectura sea más agradable y más fácil de recordar. Es conveniente que no contengan espacios en blanco.

•   Estructura:

Es recomendable mantener una estructura lo más plana posible. Cuantos más niveles tenga nuestra estructura,  más difícil es para los buscadores encontrar el contenido relevante.   Nuestros clientes o potenciales clientes deben poder llegar a la información con el menor número de clics posibles.

Es un valor positivo que el contenido dentro nuestras páginas sea propio.

• Enlaces Internos y Externos

Una de las cuestiones más valoradas por los buscadores son los enlaces que se hagan desde fuera a nuestro sitio web. Se valoran los enlaces a la página principal pero se incrementa mucho la valoración si además hay enlaces internos (Deep linking). Se debe crear una serie de enlaces internos a unas cuantas páginas clave que nos interese mantener mejor posicionadas. En esta línea se deben evitar textos en los enlaces del tipo “haga click aquí” y usar palabras clave en el texto del enlace.

Publicar contenido en Sitecore

Para salvar los cambios que realicemos en nuestros items utilizaremos el comando “Save” de la cinta de opciones en el menú “Home”. Cuando nos situamos en otro punto del árbol de contenidos sin haber guardado previamente , el sistema nos consultará si deseamos almacenar los cambios. Con el fin que estos cambios se reflejen en nuestra web debemos además  publicarlos, pulsaremos “Publicar” (Publish) en el menú “Publish”.

Otras opciones de publicación:

• Podemos marcar un  ítem como “no publicables” para ello debemos eliminar la marca de la casilla "Publishable". Teniendo el ítem seleccionado > “Publish”>Change”. 

• Se puede incorporar un rango de fechas entre las cuales un ítem se va a publicar.

• Si el elemento que dejamos de publicar es un elemento intermedio, todos los ítems que dependan de él también dejan de publicarse. Cuando se requiera volver a publicar se debe usar “Publicar site” y no “Publicar ítem” para que vuelvan a aparecer todos los ítems dependientes.

• Si nuestra página ya está lista para publicar, pero todavía no queremos que sea accesible por motores de búsqueda como Google, marcaremos al final de la misma como "no profundizable" y  "no indexable".

• Los siguientes elementos de contenido: "Calendarios internos a Sitecore", "Parrilla de novedades" o "Parrilla de destacados", como, en ocasiones, en necesario publicar en tres sitios diferentes, es conveniente hacerlo en orden:

A continuación, se detallan diferentes medidas que se deben tener en cuenta para mejorar la Usabilidad/Accesibilidad (facilidad de uso y acceso):

(La web de la UCLM debe cumplir con el Real Decreto 1112/2018 de 7 de septiembre sobre accesibilidad de los sitios web y aplicaciones para dispositivos móviles del sector público).

1. Texto alternativo de las imágenes (campo Alt) obligatorio:

   Cualquier imagen con la que se trabaje en el gestor de contenidos, desde que se suben a media library, debe tener cumplimentado el campo “Alt”: siendo este campo una descripción del contenido de la imagen. Es lo que un invidente escucharía a través de su lector de pantalla y que un navegador genérico no visualiza.

   Ejemplo: Niño juega con una raqueta.

   El campo texto alternativo tiene una longitud máxima de 150 caracteres; si el texto fuese mayor se seguiría escribiendo en el campo Longdesc.

   Si una imagen contiene un texto. El campo alt deberá contener todo ese texto.

   Si la imagen sirve de enlace (link) a otro contenido, el texto alternativo debe informar al lector sobre el destino de la imagen.

   Ejemplo: Ir a juego de niños.

    

2. Utilizar una herramienta para limpiar código html (Como Notepad):

   Si en “show editor” se va a pegar un contenido de una página web, previamente se debe usar una herramienta para limpiar ese código html.

   Una sencilla herramienta de limpieza de código html es simplemente usar el blog de notas (Notepad) como paso intermedio en el proceso de copia y pega de ese contenido.

   Esto evitará, por ejemplo: incongruencias en los encabezados, encabezados vacíos, etiquetas <br>. Todo ello dificultaría en gran medida la accesibilidad.

    

3. Texto descriptivo de los enlaces:

   Todo enlace debe tener un texto descriptivo de dónde se va a enlazar. Deben evitarse los textos no descriptivos como: “pinche aquí”, “haga clic aquí”, o similares.

   No se debe poner la URL como texto del enlace.

   El texto del enlace no debe ocupar más de 150 caracteres.

   No se deben repetir enlaces en la misma página. Provocan que el lector oiga una y otra vez el mismo enlace y el usuario abandone aburrido esa página.

   Si el enlace se abre en una ventana independiente del navegador hay que advertirlo al usuario en el texto del enlace. De lo contrario el usuario puede desorientarse.

   Por último, se recuerda que se debe evitar escribir texto con las url (direcciones web) completas. La forma recomendable es escribir un texto y a este asociarle el hipervínculo correspondiente (con los botones al efecto de "Show Editor").

    

4. Uso del color:

   No se debe usar el color para transmitir información.

   Es obvio que no se debe usar contenido que pueda desencadenar un ataque epiléptico. Según la literatura científica, la epilepsia fotosensible (que afecta entre un 3 y un 5% de las personas con esta condición neurológica) se origina principalmente con luces intermitente rojas, pero también se puede desencadenar con ciertas imágenes fijas. Más información sobre este problema si abre este enlace.

    

5.  Resoluciones de imágenes:

   Como norma general las imágenes utilizadas deben tener unas dimensiones proporcionales de 16x9 no obstante sugerir que revisen las dimensiones descritas en la tabla Resumen de Resoluciones.

   Para una correcta visualización en dispositivos móviles, cuando se inserta una imagen no se deben especificar sus dimensiones en pixeles (px), sino en porcentajes (%). El ancho (width) de la imagen nunca debe ser mayor que 100% y el alto (length) se cambiará automáticamente.

   Se debe priorizar el uso del tipo de archivo jpg, evitando el uso de imágenes png.

    

6.  Recomendaciones para Tablas:

   Para una mayor homogeneidad de la web se debe usar el tipo de tabla “uclmtable”.

   Se hace de la siguiente forma: En "Show Editor" en la barra con todos los botones hay un botón representado por un icono con forma de tabla llamado "Insert table". Se debe usar el asistente en la opción "Table wizard". En la pestaña “Table properties” recomendamos seleccionar en la parte derecha en el desplegable de "CSS Class Layout" la opción de “uclmtable” para homogeneizar los estilos de todas las tablas que aparezcan en la web.

   Si se trabaja en HTML la anchura (width) no debe especificarse en píxeles, a lo sumo en porcentajes, para que la tabla se pueda visualizar mejor, principalmente en dispositivos móviles.

    

7. Archivos en nuestra web:

   Los archivos ofimáticos deberán ser accesibles, debiendo seguir las mismas pautas que se detallan en esta página.

   En el siguiente enlace viene descrito cómo hacer accesibles documentos de Word.

   Los documentos pdf, si se crearon originalmente con Word, se puede hacer accesibles siguiendo ese método.

   Además, los documentos pdf se pueden hacer accesibles siguiendo este documento sobre accesibilidad. (Solo en Adobe Acrobat Pro).

   En estos dos documentos anteriormente citados, entre otras cosas, se explica que tanto Adobe Acrobat Pro como Microsoft Word tienen un botón para comprobar la accesibilidad de un documento.

    

8. Vídeos en nuestra web:

   No deben iniciarse solos (deben ir sin autodisplay), pues el usuario que se guie por lo que el lector le dicta oirá primero la música y no sabrá cómo pararla.

   Además, los vídeos se deben subtitular:

   Se puede encontrar más información de cómo subtitular un vídeo en "Guía sobre como subtitular vídeos".

    

   Con Windows Media Player también se pueden subtitular los vídeos.

   Si desea conocer información sobre como hacer accesible nuestros videos, pulse accesibilidad en Redes Sociales.

    

9. Guía de accesibilidad en Sedes Electrónicas.

   Guía de ayuda para gestionar la accesibilidad de los trámites electrónicos en las Sedes Electrónicas de las Administraciones Públicas.

    

 

Información suplementaria más avanzada:

• Utilizar correctamente los encabezados. Desde H1 hasta H6. No se deben generar saltos (pasando por ejemplo de H2 a H4. Y no poner encabezados vacíos).
  •  H1 – título del libro (es el título de la página). No se deben poner más.
  • H2 – Capítulo del libro
  •  H3 – Sección de un capítulo
  •  H4 – subsección de una sección
  •  H5 – Apartado de una subsección
  •  H6 – División de un apartado

     

• Mantener la estructura de párrafos. Usar etiquetas <p> y </p>.  Evitar la etiqueta <br> ya que inhabilita al lector de pantalla la posibilidad de reconocer el párrafo.
• Los marcos (iframes) siempre deben llevar un título (title). En caso contrario el lector de pantalla no podrá describir su contenido.
• Los textos tampoco deberían tener textos menores de 16 puntos (16px).
• Herramienta de validación web: Hay extensiones para los navegadores Chrome y Firefox de Wave Evaluation Tool.