Manual de Estilo web
del Programa de Guias de Práctica Clínica
en el SNS

  1. La web
  2. Arquitectura de la web
  3. Preparación de los contenidos
  4. Diseño gráfico
  5. Diseño de las páginas
  6. Codificación
  7. Usabilidad
  8. Revisión y control de calidad
  9. Control de cambios
  10. Organización de los archivos
  11. Anexos
  12. Bibliografía

6. Codificación

6.1. Plantillas

Definición

Las plantillas de diseño son un tipo de documento utilizado para añadir una estructura y un diseño común a un conjunto de páginas. Estas plantillas permiten asegurar que todas las páginas están funcionando correctamente en una variedad de buscadores web, como Internet Explorer, Firefox y Netscape Navigator. Los diseñadores y autores tienen la posibilidad de proteger el diseño de la página, dejando partes editables para que los colaboradores puedan añadir los contenidos necesarios.

Función

Con las plantillas de diseño se pueden crear páginas HTML que compartan el mismo diseño web y predeterminar ciertas partes de la plantilla como editables. De esta manera se otorga a otras personas el permiso de añadir y editar el contenido, pero conservando un diseño común de las páginas basadas en una misma plantilla.

Uso

Cuando se actualiza el contenido en una plantilla de diseño simultáneamente se actualizan todas las páginas que comparten esa plantilla.

Se puede usar un número indeterminado de plantillas en un sitio web y una misma plantilla a tantas páginas como desee. Existen restricciones para el almacenamiento de las plantillas, deben guardarse en una carpeta específica dentro de la carpeta local de origen de la red. Si la carpeta todavía no existe, el editor la creará automáticamente cuando se guarde una nueva plantilla.

Objetivos

El objetivo de una plantilla es agilizar el trabajo de reproducción de muchas copias idénticas o casi idénticas. Si se quiere un trabajo más refinado o más creativo, la plantilla no es sino un punto de partida de lo que se quiere hacer, o partes comunes de una diversidad de copias. A partir de la plantilla pueden asimismo diseñarse y fabricarse nuevas plantillas.

Diseño

Las plantillas se diseñan con la finalidad de crear la distribución o layout de las páginas y su contenido. Para definir los diferentes layout de una página se realiza mediante:

<div id="cuerpo">

Dentro de los layout se presentara el contenido mediante el atributo:

<div class="bloque-centro-cuerpo ">

La diferencia principal entre "id" y "class" es que el estilo en los id se asignará solo a un elemento, ya que los "id" no deben repetirse. Mientras que el estilo en los "class" se podrá asignar a todos los elementos que estén definidos con "class".


subir arriba

6.2. Tipos de plantillas

Los diferentes tipos de plantillas que aparecen a continuación están diseñadas para cada versión de la guía clínica:

Descargar Modelo Plantilla Completa (184 Kb)

Versión Completa


Plantilla versión completa
Descargar Modelo Plantilla Resumida (184 Kb)

Versión resumida


La versión resumida dispone de dos plantillas:

1. Una con menú izquierdo donde se puede acceder a diferentes apartados del sitio web.

Plantilla version resumida

Versión resumida sin menú izquierdo


2. Una plantillas sin menú izquierdo para la bibliografía, anexos etc.


Plantilla sin menu izquierdo
Descargar Modelo Plantilla Info Pacientes (117 Kb)

Información para pacientes


Informacion para pacientes

Descargar Modelo Plantilla Herramientas (104 Kb)

Herramientas de consulta rápida


Herramientas
Descargar Modelo Plantilla Índice (107 Kb)

Índice


indice

subir arriba

6.3. Hojas de estilo CSS

Las Hojas de Estilo en Cascada (Cascading Style Sheets), son un lenguaje formal usado para definir la presentación de un documento estructurado a través de un dispositivo de lectura. Esta forma de descripción de estilos ofrece a los desarrolladores el control total sobre estilo y formato de sus documentos HTML y XML, separando el contenido de la presentación.

De esta forma el diseñador y programador pueden trabajar independientemente y controlar el estilo y el formato de múltiples páginas a la vez. Facilitan la obtención de un diseño unificado y con mayor flexibilidad, ya que es posible cambiar completa o parcialmente el aspecto de un sitio con sólo modificar la hoja de estilos. Por otro lado, el tener el estilo de una web en un solo archivo permite mantener la misma apariencia en todas las páginas.

Las páginas que utilizan CSS en su diseño pueden reducir su tamaño entre un 40% y un 60%; además los navegadores guardan la hoja de estilos en la caché, lo que reduce los costos de envío de información y reduce el tiempo de descarga.

El Consorcio W3 (World Wide Web Consortium) es el encargado de formular la especificación de las hojas de estilo que servirán de estándar para los agentes de usuario o navegadores.

Las CSS funcionan a base de reglas, es decir, de declaraciones sobre el estilo de uno o más elementos. Las hojas de estilo están compuestas por una o más de esas reglas aplicadas a un documento HTML. La regla tiene dos partes: un selector y la declaración. A su vez la declaración está compuesta por una propiedad y el valor que se le asigne.

Ejemplo:

Codigo

En este ejemplo se muestran las características del menú de navegación de la izquierda.

Los <div> de la plantilla que están definidos con el atributo <div id=”…”> se relacionan directamente con los selectores que comienzan con “#”, mientras que los que se definen con <div class”…”> se relacionan con los selectores que comienzan con “.”.


subir arriba

6.4. Validación

Si tenemos la intención de que nuestras páginas sean accesibles, deben ser analizadas y validadas antes de publicarlas en la Web. Para ello utilizaremos el validador de código W3C y el de accesibilidad TAW.

La validación de la accesibilidad es un aspecto importante en el diseño de cualquier información para colgar en un sitio web. Las razones se ponen de manifiesto en el REAL DECRETO 1494/2007, de 12 de noviembre, por el que se aprueba el Reglamento sobre las condiciones básicas para el acceso de las personas con discapacidad a las tecnologías, productos y servicios relacionados con la sociedad de la información y medios de comunicación social, ya que en el dicho reglamento, en su artículo 2 se dice que "las administraciones públicas, los operadores de telecomunicaciones, los prestadores de servicios de la sociedad de la información y los titulares de medios de comunicación social que presten sus servicios bajo la jurisdicción española deberán cumplir las condiciones básicas de accesibilidad que se establecen en el presente reglamento."

6.4.1. Validación de Código W3C

El W3C es un consorcio internacional que pretende guiar la Web hacia su máximo potencial a través del desarrollo de protocolos y pautas que aseguren el crecimiento futuro de la web.

El W3C tiene como objetivo hacer posible la comunicación, el comercio y facilitar la oportunidad de compartir conocimiento. El principal objetivo es conseguir que todas estas ventajas sean disponibles para todo el mundo, independientemente de cualquier software, hardware o incluso discapacidad física o mental.

El objetivo de la W3C es también conseguir que el acceso a la web desde cualquier dispositivo (PDA, teléfonos móviles) sea igual de sencilla como el acceso desde un dispositivo de sobremesa (PC).

La web no es sólo un inmenso libro donde se pueda navegar, buscar y obtener información, sino que es también una extensa base de datos que ayuda a procesar los datos de manera más fácil.

La finalidad del W3C es convertir la web en un sitio accesible, robusto y adaptable al mundo de la información.

Por ello elaboran un conjunto de lenguajes estándares, que deben ser siempre referencia en la elaboración de cualquier sitio web. Durante la elaboración de un sitio web se debería comprobar que éste acepta y aplica estos lenguajes estándares del Consorcio. Para facilitar esta tarea a los usuarios el W3C pone a disposición diversos validadores, con el objeto de comprobar el grado de corrección de los lenguajes empleados: Servicio de Validación de HTML del W3C y Servicio de Validación de CSS del W3C.

6.4.2. Validación de Accesibilidad TAW

TAW son las siglas de Test de Accesibilidad Web. Es una herramienta para el análisis de la accesibilidad de sitios web, su objetivo es comprobar el nivel de accesibilidad alcanzado de una forma integral y global por todos los elementos y páginas que lo componen, con el fin de permitir el acceso a todas las personas sin tener en cuenta sus características diferenciadoras, por ejemplo:

  1. Problemas de oído, visión, movilidad.
  2. Dificultades de lectura o comprensión cognitiva.
  3. Imposibilidad de utilización del teclado o el ratón.
  4. Lector de sólo texto, pantalla pequeña o conexión lenta.
  5. La accesibilidad mejora el acceso a la web en general, no es de interés únicamente para personas con discapacidad.

Aunque esta destinado al público en general se utiliza específicamente por profesionales del campo como webmasters, desarrolladores, diseñadores de páginas web, etc.

La herramienta TAW para realizar su análisis, se basa en las reglas desarrolladas por la Iniciativa de Accesibilidad Web (WAI), perteneciente al World Wide Web Consortium (W3C). Estas recomendaciones, denominadas Pautas de Accesibilidad al Contenido Web (WCAG 1.0), son normas aceptadas universalmente.

El documento se organiza en catorce pautas que definen los principios del diseño accesible, a su vez estas se dividen en uno o varios puntos de verificación que explican cómo se aplica la pauta en el desarrollo de contenidos web. Cada punto de verificación pretende ser lo suficientemente específico, como para que cualquiera que revise una página o sitio pueda comprobar que dicho punto ha sido satisfecho.

Cada uno de estos puntos de verificación contiene:

  1. Código numérico que lo identifica
  2. Descripción del problema de accesibilidad así como las posibles soluciones.
  3. Prioridad

La prioridad indica el impacto que tiene el punto de verificación en la accesibilidad:

  1. Prioridad 1. Un desarrollador de contenidos de páginas web tiene que satisfacer este punto de verificación. De otra forma, uno o más grupos de usuarios encontrarán imposible acceder a la información del documento.
  2. Prioridad 2. Un desarrollador de contenidos de páginas web debe satisfacer este punto de verificación. De otra forma, uno o más grupos encontrarán dificultades en el acceso a la información del documento.
  3. Prioridad 3. Un desarrollador de contenidos de páginas web puede satisfacer este punto de verificación. De otra forma, uno o más grupos de usuarios encontrarán alguna dificultad para acceder a la información del documento.

Por tanto, en orden de importancia estarán primero los de prioridad 1, después 2 y por último el 3.

Otro concepto relacionado con el anterior son los tres niveles de adecuación, que indican el grado de cumplimiento de los puntos de verificación por un determinado sitio web:

  1. Nivel A: Se satisfacen todos los puntos de verificación de prioridad 1.
  2. Nivel Doble A (AA): Se satisfacen todos los puntos de verificación de prioridad 1 y 2.
  3. Nivel Triple A (AAA): Se satisfacen todos los puntos de verificación de prioridad 1, 2 y 3.

En definitiva, se muestran los problemas de accesibilidad encontrados, organizados por prioridad, indicando:

  1. Código del punto de verificación.
  2. Descripción del problema.
  3. Número de línea de la página analizada.
  4. Etiqueta HTML que genera el problema de accesibilidad.

Una vez finalizada la descripción de problemas encontrados se resumen:

  1. Tiempo de análisis.
  2. Total de problemas encontrados en la página.
  3. Si se realizó un análisis con anterioridad de la página y desde el mismo equipo en el que se está realizando ahora, el resultado del anterior.

La aplicación genera tres tipos de informes diferentes:

  1. Informe TAW: muestra en la página analizada, mediante iconos, el lugar dónde se producen errores. El informe es similar al que realiza la versión online.
  2. Informe EARL: crea un informe de la página seleccionada en lenguaje EARL, que contiene el resultado de la evaluación de accesibilidad según las pautas definidas por WCAG 1.0. El informe EARL, a diferencia del resto de informes que son formato HTML, es un fichero de texto con formato XML.
  3. Informe Resumen: muestra un informe resumen que engloba todas las páginas analizadas.
subir arriba

6.5. Funcionamiento sobre diferentes navegadores

En la elaboración de las GPC se debe elaborar un apartado denominado "Ayuda" donde se recoja información no sólo sobre los navegadores, sino también otros programas necesarios para que usuario pueda consultar todo el contenido de la GPC (Acrobat Reader, activar-desactivar Javascript) en su ordenador personal. El texto elaborado ha sido el siguiente:

Esta web está optimizada para Mozilla Firefox y para el navegador Internet Explorer 5.x y superior. Recomendamos para la navegación una resolución de 1280x1024.

Además de las páginas en formato html, que se visualizan con su navegador, se incluyen algunos documentos en formato pdf, para cuya lectura necesita el programa Acrobat Reader. Si usted no dispone de dicho programa, puede descargarlo en el siguiente enlace: Descarga de la última versión de Acrobat Reader.

El acceso principal a los distintos apartados de las GPCs se realiza a través de su índice.

Si su navegador no interpreta Javascript, o usted lo tiene desactivado, accederá al índice de la Guía de Práctica Clínica que incluirá los apartados con sus subapartados. Si desea acceder a la versión con Javascript puede activarla, si su navegador lo permite. A continuación le indicamos la manera de realizarlo para los navegadores más habituales.

  1. Internet Explorer: Acceda a "Opciones de Internet" dentro del menú Herramientas. Una vez allí, en la solapa "Seguridad", acceda a la opción "Nivel Personalizado". Una vez allí active todas las opciones relacionadas con complementos ActiveX.
  2. Mozilla Firefox: Acceda a "Opciones" dentro del menú Herramientas. Una vez allí, en la solapa "Contenido", marque la opción "Activar Javascript".

Última actualización: noviembre 2009

Logo del Ministerio de Sanidad y Consumo Logo del Plan de Calidad del Sistema Nacional de Salud Logo del Instituto Aragonés de Ciencias de la Salud

 

Copyright