Una vez está preparado el contenido del sitio web, hay que estructurarlo y ordenarlo. Al tratarse de páginas que recogen la información que aparece en unas guías previamente elaboradas, la distribución de los contenidos intenta ser lo mas fiel posible al modelo. La documentación esta dividida en apartados, cada apartado corresponderá a una página diferente, por lo tanto los apartados y subapartados estarán predefinidos, aunque será necesario identificar y definir los elementos que enriquecen los contenidos como los enlaces, las notas, los acrónimos, etc.
Cada página tiene un título específico, en este caso coincide con el de cada apartado, y esta definida con el encabezamiento de HTML <h1>. Todas las páginas tendrán en la cabecera el nombre de la guía en la que nos encontramos, que esta definido tambien con <h1>. Para los siguientes subapartados se emplearán otros encabezamientos, de <h2> a <h5> de forma jerárquica y sin saltarse ningún nivel.
Dentro del texto con el fin de añadir valor estructural o semántica, utilizaremos <em> para resaltar con cursiva y <strong> para resaltar con negrita.
Los vínculos de hipertexto o hipervínculos (anclajes) son elementos de una página HTML que, al hacer clic sobre ellos, permiten a los lectores navegar hacia una nueva dirección. Al navegar por la web, los hipervínculos son los que conectan unas páginas con otras. Se usan para dirigirse:
El principal atributo de los anclajes es href. Se representa así:
<a href="Dirección o URL"> .. </a>
Si el contenido del texto del enlace no es suficientemente claro, se puede añadir más información a través del atributo title dentro de la etiqueta <a>.
<p><a href="ejemplo.pdf" title="descarga ejemplo en pdf" target="_blank"> Análisis de la segmentación automática</a> (pdf, 40 kb)</p>
Los enlaces en ventana nueva se utilizan para abrir un vínculo externo a la web y también en los documentos PDF.
En estos casos, añadiremos, seleccionar "Nueva ventana" en las opciones del enlace. Al hacerlo, se genera un nuevo código en el campo del editor, la etiqueta target=”_blank”, lo que queda reflejado en la página a través del icono
.
Un vínculo externo es un vínculo a otra página mediante su dirección URL. Se creará de la siguiente forma:
<a href="URL de la página">... </a>
Un vínculo apuntará a una página ubicada en el mismo equipo, reemplazando la dirección URL con el archivo de destino.
Si el archivo fuente es "index.html" ubicado en el directorio principal puede escribirse un vínculo hacia él:
<a href="../index.html"> ... </a>
También encontramos enlaces a un punto dentro de la misma página. Los vínculos internos se definen con el atributo NAME o ID. La sintaxis siguiente debe usarse cuando se desee que el destino sea:
<a name="vínculo_interno">...</a>
Este es el vínculo a esa ubicación:
<a href="#vínculo_interno">...</a>
Dentro de las guías podemos encontrar vínculos internos de este tipo:
En los HTML de las versiones completas debe añadirse un <div> que nos enlace a la Bibliografía Completa, el título con el recuadro de enlace a la bibliografía completa se realiza de la siguiente manera:
<div id="bloque-centro-biblio">
<div class="titulo-bibliografía">
<div class="bibliografía-completa-h2">
<h2><a id="bibl" name="bibl"></a>
Bibliografía del apartado 07</h2>
</div>
<div class="bibliografía-completa">
<p><img src="../imagenes/triangulo.jpg" alt="Triángulo"
scr="../imagenes/triangulo.jpg"/>
<a href="../bibliografia.html">Acceso a la bibliografía completa</a>
</p>
</div></div>
<div class="texto-bibliografía" style="clear:both"> 
Son vínculos internos que enlazan con notas al pié de página, aparecen después del texto, justo encima de la bibliografía. Su estructura será:
<div id="bloque-centro-referencias" style="font-size:90%;>
En el origen:
<a name="r1" id="r1"><sup>1</sup></a>
En el destino:
<a href="#r1"></a>
Se utiliza la etiqueta <acronym> junto con el atributo "title" para indicar el significado de unas siglas o acrónimos que aparezcan en el texto. Por ejemplo:
<acronym title="Fundación Escola Galega de
Administración Sanitaria">FEGAS</acronym> Emplearemos <ol> para listas ordenadas y <ol class=”disctype”> para listas no ordenadas. En el caso de listas dentro de las tablas será diferente. Las listas deben corresponder con la estética del PDF de la manera más próxima posible. Para ello se han creado las siguientes clases en la css:
- Si es una lista de números dentro de una tabla-general:
<ol class=”numeros”> <li>Texto</li> <li>Texto</li> </ol>
- Para una lista de letras anidada en una lista dentro de tabla-general:
<ol class=”letras”> <li>Texto</li> <li>Texto</li> </ol>
- Para una lista de letras dentro de una tabla-general (esta vez no anidada en otra lista):
<ol class=”letras2”> <li>Texto</li> <li>Texto</li> </ol>
Para crear las tablas seremos lo más fiel posible a la imagen base de las guías en PDF, aunque se distingue en el color de los bordes y los encabezados, ya que deberán ser del color distintivo del apartado en el que nos encontremos. Todas las tablas se definirán con el estilo de “tabla-general”, cuyo diseño ha sido establecido previamente en las css y tendrán un resumen que pondremos con el atributo summary.
<table class="tabla-general" summary="Resumen de la evidencia">
En tablas en las que aparecen varias celdas en el título se utilizará el tipo “tabla-general-borde”, de esta forma se aprecia la separación con líneas verticales blancas.

Cuando se trata de las tablas de recomendaciones y resumen de la evidencia en las páginas, utilizaremos tablas sin cabecera para el título.
Sin embargo, las tablas que aparecen en el resumen de las recomendaciones, contienen el título del apartado en el que están situadas, en la cabecera.

Todas las tablas pueden descargarse en formato PDF desde la página del "Listado completo de figuras y tablas", así como desde la misma página en la que aparecen.
Todas las imágenes deben llevar una descripción de su contenido en un texto alternativo. En el caso de ser imágenes meramente decorativas, el atributo alt debería ir vacío. Su utilidad puede verse durante el proceso de carga de la página, cuando la imagen no ha sido todavía cargada, ya que el navegador mostrará esta descripción, permitiendo al usuario hacerse una idea de la imagen que se mostrará en ese lugar. Además el atributo "alt", es una opción necesaria para las personas que tienen problemas visuales y navegan con un lector de páginas web así como para las que navegan con la opción que desactiva el muestreo de imágenes.
En el caso de los logotipos además del "alt" deberán tener el atributo "title" con el nombre de la Agencia a la que pertenece ese logotipo:
<img src="imagen.jpg" alt="Descripción imagen" title="Titulo imagen"/>
Los menús serán diferentes dependiendo de la versión de la guía en la que nos encontremos.
Versión completa:
En la versión completa el menú debe aparecer a la izquierda, desde el se puede acceder a cada uno de los apartados de la guía.
Además dentro de cada apartado aparecerá un submenú que enlaza a los subapartados y a las secciones de preguntas para responder y recomendaciones de ese apartado.
Versión resumida:


En la versión resumida, hay un menú superior desplegable desde el que se puede acceder a todos los apartados y subapartados de la guía, ya que en esta versión cada subapartado aparecerá en una pagina distinta.
Además aparece un submenú de cada apartado en el lateral izquierdo tal como se muestra en las figuras.

En Información para pacientes existe un menú lateral, desde el que se puede acceder a cada una de los apartados de la guía y también a la información para pacientes del resto de las guías.
Herramientas de consulta rápida:
En versión de consulta rápida se navega a través de un menú superior que enlaza con cada uno de los apartados de la guía.
![]()
Tanto en la versión completa como en la resumida, cada apartado ofrece la descarga del documento en formato PDF y la descarga de la guía completa. Para que la descripción de la descarga de los PDFs esté completa debe aparecer de la siguiente forma:

• LOGO
<a href="#"><img src="../../../imagenes/pdf-grande.jpg" alt="Abre nueva ventana: Apartado XX en versión pdf" title="Abre nueva ventana: Apartado XX en versión pdf"/></a>
• Apartado XX
Descargar <a href="../documentos/apartadoXX/Nombre del apartado.pdf" target="_blank" alt="Abre nueva ventana: Apartado XX en versión pdf" title="Abre nueva ventana: Apartado 0XX en versión pdf"> Apartado XX </a> (tamaño Kb) <br />
• GPC completa
Descargar <a href="../documentos/001_164 versión completa.pdf" target="_blank" alt="Abre nueva ventana: El nombre de la guía pdf" title="Abre nueva ventana: Nombre de la guía en pdf">GPC XXX </a>
(tamaño Mb)
Los metadatos son toda aquella información descriptiva sobre el contexto, calidad, condición o características de un recurso, dato u objeto que tiene la finalidad de facilitar su recuperación, autentificación, evaluación, preservación y/o interoperabilidad.
El lenguaje HTML incluye estos marcadores o etiquetas que permiten incluir en la página ciertos datos sobre sí misma. El principal motivo para dedicarles tiempo y esfuerzo es aumentar la accesibilidad a la página, entendiendo como tal, la facilidad con que puede ser localizada desde los buscadores, ya sea el del propio sitio o cualquier otro motor externo.
La calidad de la información obtenida por un motor de búsqueda no sólo depende de su programación interna, sino también de los datos de los que se disponga sobre el contenido de las páginas, ya que con ellos se construirán sus bases de datos. Si las páginas informan poco sobre su contenido, en el título, metadatos y estructura del HTML (<h1>, <p>, <strong>, etc.), el motor de búsqueda no podrá hacer mucho para asignarles relevancia durante un proceso de búsqueda basado en las palabras clave utilizadas para la recuperación de contenido.
Los motores usan diferentes técnicas para elaborar el ranking final de resultados, pero lo que sí se sabe es que éstos utilizan a tal fin el contenido de las etiquetas meta que cada documento HTML contiene. Las etiquetas META se deben colocar en la cabecera de la página HTML entre las etiquetas correspondientes (<HEAD></HEAD>).
Ejemplo:

Las guías elaboradas deberán estar elaboradas conteniendo ésta información para agilizar las búsquedas, aumentar su visibilidad y posicionamiento en los motores.
Un mapa web o site map es un archivo que lista las páginas en un sitio web, organizadas comúnmente de forma jerárquica. Esto ayuda a los visitantes y a los motores de búsqueda a hallar las páginas en un sitio.
En el caso del Programa de GPC en el SNS existe un mapa web para cada guía con la siguiente estructura que estará accesible desde todas las paginas que formen parte de la misma.

Todas las páginas del Programa de GPC en el SNS tienen como raíz en el “breadcrumb” el Índice de GuiaSalud a través del cual se puede acceder a la sección de Aviso Legal, donde se recogen las consideraciones de orden legal que afectan al portal.
El acceso y utilización de los servicios que facilita este sitio web supone la aceptación de las condiciones generales, que serán de aplicación sin perjuicio de las condiciones particulares o especiales que se establezcan.
Las GPCs han sido financiadas mediante el convenio suscrito por el Instituto de Salud Carlos III, organismo autónomo del Ministerio de Sanidad y Consumo, y las difentes Agencias y Unidades de Evaluación de Tecnologías Sanitarias, en el marco de colaboración previsto en el Plan de Calidad para el Sistema Nacional de Salud.
Los derechos de autor corresponden a:
Quienes autorizan su utilización, distribución y reproducción de forma completa o parcial, siempre que se cite la fuente, no se manipulen ni alteren los contenidos y no sean utilizados con fines comerciales.
La citación de la información descargada en formato PDF se realizará de la siguiente manera:
GPC sobre [Título]:
Grupo de trabajo de la Guía de Práctica Clínica sobre [Título]. Guía de Práctica Clínica sobre…nombre de la guía. Versión (resumida o completa) [Internet]. Madrid: Plan Nacional para el SNS del MSC. [Agencia]; 2008. Guías de Práctica Clínica en el SNS: I+CS Nº 2006/02. Disponible en: [URL].
Apartado de la GPC sobre [Título]:
[Título del Apartado]. En Guía de Práctica Clínica sobre…nombre de la guía [Internet]. Madrid: Plan Nacional para el SNS del MSC. [Agencia]; 2008. Guías de Práctica Clínica en el SNS: I+CS Nº 2006/02. [Fecha de Consulta], p. [página inicial del apartado]-[número de páginas del apartado]. Disponible en: [URL].
Es importante que en un sitio web aparezca un enlace que nos proporcione los datos necesarios para pedir información, visitar o contactar con la empresa encargada de la gestión de los recursos.
En el Programa de GPC en el SNS, se puede establecer este contacto a través de la página principal de GuiaSalud, a la que se accede desde la raíz del "breadcrumb". En la página principal de GuíaSalud existe un enlace que ofrece formularios de contacto y sugerencias.
Última actualización: noviembre 2009
