Pontificia Universidad Católica Argentina Santa María de los Buenos Aires DEPARTAMENTO WEB. Manual de Estilos

Transcripción

1 Pontificia Universidad Católica Argentina Santa María de los Buenos Aires DEPARTAMENTO WEB Manual de Estilos 1

2 INDICE Departamento Web: Manual de Estilos 1. Introducción 1.1. Qué incluye este manual 1.2. Conceptos básicos 2. Sitio Web UCA 2.1. Diseño de la Portada Sectores y Elementos de la Portada 2.2. Diseño de las Páginas Internas Sectores y Elementos de las Páginas Internas Titulo Colores Fuentes tipográficas Botoneras 3.5. Arquitectura de la Información y Navegación Contenidos mínimos / Secciones Estándar Secciones Particulares 3.6. Usabilidad 3.7. Accesibilidad 3. Sitios de Unidades Académicas 3.1. Diseño de la Plantilla de Portada Sectores y Elementos de la Portada 3.2. Diseño de la Plantilla de Páginas Internas Sectores y Elementos de las Páginas Internas 3.3. Sitios de Dependencias Diseño de la Plantilla de Dependencias: Sectores y Elementos Particulares 3.4. Estándares de Diseño Alineación Encabezado y Pie de página 4. Fuentes y Colores 4.1. Fuentes 4.2. Colores 4.3. Hoja de Estilos 2

3 1. Introducción 1.1. Qué incluye este manual Este manual de estilos documenta el nuevo diseño para la web de la Universidad Católica Argentina: y las normas visuales para su mantenimiento y ampliación. Así también presenta los estándares visuales que se implementarán al migrar los sitios de las distintas Unidades Académicas a la nueva plataforma. Estos estándares buscan crear un diseño consistente, reconocible, atractivo y de fácil navegación para los sitios web de la Universidad. Los estándares presentados en este manual se complementan con el Manual de Administración de Sitios Web. Este documento se organiza a partir de los siguientes temas: Sitio Web UCA Esta sección provee una vista detallada del diseño y organización de la Portada y páginas interiores del sitio UCA Sitio de Unidades Académicas y Dependencias Como parte del nuevo diseño, la plantilla muestra como se implementará el nuevo diseñó en los sitios de las Unidades Académicas y sus Dependencias Fuentes y Colores En esta sección se documenta las fuentes y colores utilizados en el nuevo diseño de la web de la Universidad. 3

4 1.2. Conceptos básicos Los sitios web de la UCA, sus Unidades Académicas y Dependencias respetan los siguientes lineamientos básicos: El sitio se encuentra siempre centrado en la pantalla. El sitio ocupa un 100% de ancho de pantalla, siendo su ancho mínimo de 760 pixeles. El fondo de pantalla siempre es blanco. La tipografía estándar para contenido es Arial a un tamaño de 12 pixeles. El nuevo diseño es acompañado por una Hoja de Estilos que debe ser utilizada para asignar tipografías, efectos a los botones, vínculos, etc. El encabezado y pie de página son fijos y no pueden ser modificados. La Arquitectura de la Información y Navegación se encuentran regidas por unos Contenidos Mínimos establecidos por la Universidad, pero la misma no establece que contenidos particulares pondrá cada Unidad Académica. Es responsabilidad de estas últimas la organización, actualización y mantenimiento de los contenidos de su sitio web. 4

5 2. Sitio Web UCA 2.1. Diseño de la Portada 5

6 Sectores y Elementos de la Portada 6

7 7

8 Encabezado El encabezado se encuentra presente a lo largo de todo el sitio, tanto en la portada como en las páginas interiores, sin sufrir modificaciones en ninguna instancia del sitio UCA. El mismo se encuentra compuesto por: Marca UCA Isologotipo de la UCA. El mismo siempre estará presenta en el margen superior izquierdo del sitio web. Título de Página El título de página se encuentra compuesto por el nombre completo de la Universidad. Sede Al ser este el sitio de UCA País, que nuclea a todas las sedes, en este sector se indican todas las sedes de la Universidad. Enlaces En este sector se enlaza a las siguientes áreas Acceso a la agenda de actividades organizada por fechas, tipo de actividad, Unidad Académica, etc. Webmail de la Universidad 8

9 Campus Virtual / Portal de Servicios de la Universidad para alumnos, docentes y administrativos. Motor de Búsqueda Este campo permite realizar búsquedas de contenido dentro de todo el sitio de la Universidad, Unidades Académicas y Dependencias. Botonera Horizontal En esta botonera se encuentra el acceso a las secciones orientadas por audiencias o tipo de usuario. Estas son: Ingresantes, Alumnos, Graduados, Docentes y Visitantes. 9

10 Cuerpo Los sectores del cuerpo del sitio web varían según si el usuario se encuentra en la portada o en el interior del sitio. 10

11 El cuerpo de la portada se encuentra compuesto por: Botonera Vertical En esta botonera se encuentra el acceso a las secciones principales del sitio UCA: La Universidad, Facultades / Institutos, Carreras / Cursos, Investigación, Extensión, Pastoral UCA, Bibliotecas y UCA Internacional. Banner Institucional Este sector está compuesto por imágenes rotativas de la universidad, sus sedes y vida universitaria. Así también se utilizará este espacio para destacar actividades que competen a toda la comunidad Universitaria (por ejemplo el Cincuentenario UCA, Olimpíadas InterUCA, etc.) Cartelera de Novedades En la cartelera se destacaran novedades e información de interés para los miembros de la comunidad UCA y visitantes del sitio. Dicha información se organizara por temática en solapas: Vida Universitaria, Eventos, Convocatorias, etc. Acceso Rápido El menú desplegable de acceso rápido sirve para tener a un solo paso de distancia los sitios de las distintas dependencias que la universidad considera importante destacar (por ejemplo: EDUCA, Centro Cultural, Colegio Santo Tomás, etc.) Área Destacada En este sector se destaca el nuevo Campus Virtual de la Universidad. En un futuro este espacio podrá contener otro item destacado que resulte de gran importancia para la Universidad. 11

12 Pie El pie se encuentra presente a lo largo de todo el sitio, tanto en la portada como en las páginas interiores, sin sufrir modificaciones en ninguna instancia del sitio UCA. El mismo se encuentra compuesto por: Título de Página El título de página se encuentra compuesto por el nombre completo de la Universidad. Enlaces Este sector contiene el acceso a las secciones de Contacto y Mapa del Sitio, así como a las versiones en Inglés y Portugués del sitio UCA. 12

13 2.2. Diseño de las Páginas Internas 13

14 Sectores y Elementos de las Páginas Internas Cuerpo 14

15 Los sectores del cuerpo del sitio web varían según si el usuario se encuentra en la portada o en el interior del sitio. El cuerpo de las páginas internas se encuentra compuesto por: Árbol Muestra la estructura de navegación y referencia de donde está ubicado el contenido que estamos viendo. Acceso Rápido El menú desplegable de acceso rápido sirve para tener a un solo paso de distancia los contenidos relevantes de la sección en la que se encuentra el contenido que estamos visualizando. Menú En este sector se encuentra el acceso a las secciones que se encuentran en el mismo nivel que el contenido que estamos viendo. Submenú En este sector se encuentra el acceso a las subsecciones o subcontenidos de la sección en la que estamos posicionados. Contenido Es el contenido propiamente dicho. Todo contenido cuenta al final del mismo con la fecha de última actualización. Navegación Botones para navegar el sitio regresar a la página regresa a la parte superior de la página que se está visualizando 15

16 Utilidades Botones de funcionalidades relacionadas al artículo que se está visualizando: se visualiza una versión especial para imprimir del artículo que estamos viendo. Función para recomendar el artículo a otro usuario Guarda en la carpeta de favoritos del explorador el artículo visualizado. Contenido Relacionado Enlaces a artículos relacionados con la temática del artículo que estamos viendo. Estas relaciones se realizan de manera automática a partir de palabras claves de cada artículo. Contenido Destacado Enlaces a los artículos más consultados. Este listado se genera de manera automática a partir del análisis de los contenidos que son más solicitados por los usuarios 16

17 17

18 Botonera Vertical En esta botonera se encuentra el acceso a las secciones principales del sitio UCA: La Universidad Facultades / Institutos Carreras / Cursos Investigación Extensión Pastoral UCA Bibliotecas UCA Internacional Al encontrarse dentro de una sección concreta, esta se situará en la primera posición de la Botonera Vertical y desplegará sus subsecciones como muestra la imagen. 18

19 3. Sitios de Unidades Académicas A Continuación presentamos un modelo de sitio web de Unidad Académica a partir de la nueva plantilla de diseño. A partir de esta plantilla se busca generar un diseño consistente, reconocible, atractivo y de fácil navegación para los sitios web de toda la Universidad. Se busca también que el usuario pueda navegar entre todos los sitios de la Universidad con facilidad, encontrando las secciones y elementos de las páginas web organizados de la misma manera, facilitando so comprensión. Este diseño es una derivación del diseño del sitio principal de la Universidad para generar un verdadero sistema de comunicación web, que a su vez se complemente con el sistema de comunicación gráfica de la Universidad. El nuevo diseño es acompañado por una Hoja de Estilos que debe ser utilizada para asignar tipografías, efectos a los botones, vínculos, etc. La Arquitectura de la Información y Navegación de estos sitios se encuentran regidas por unos Contenidos Mínimos establecidos por la Universidad, pero la misma no establece qué contenidos particulares pondrá cada Unidad Académica. Es responsabilidad de estas últimas la organización, actualización y mantenimiento de los contenidos de su sitio web. 19

20 3.1. Diseño de la Plantilla de Portada 20

21 Sectores y Elementos de la Portada 21

22 Encabezado El encabezado se encuentra presente a lo largo de todo el sitio, tanto en la portada como en las páginas interiores, sin sufrir modificaciones en ninguna instancia del sitio de la Unidad Académica. El mismo se encuentra compuesto por: Marca UCA Isologotipo de la UCA. El mismo siempre estará presenta en el margen superior izquierdo del sitio web. Título de Página El título de página se encuentra compuesto por el nombre de la Universidad y debajo el nombre de la Unidad Académica concreta. Por ejemplo: Pontificia Universidad Católica Argentina Facultad de Derecho Sede Cada Unidad Académica indicará en este sector en que sede se encuentra ubicada (Buenos Aires, Mendoza, Paraná, etc.) Enlaces En este sector se enlaza a las siguientes áreas Acceso a la agenda de actividades de la Unidad Académica organizada por fechas, tipo de actividad, etc. Webmail de la Universidad 22

23 Campus Virtual / Portal de Servicios de la Universidad para alumnos, docentes y administrativos. Motor de Búsqueda Este campo permite realizar búsquedas de contenido dentro de todo el sitio de la Unidad Académica. Botonera Horizontal En esta botonera se encuentra el acceso a las secciones orientadas por audiencias o tipo de usuario. Estas son: Ingresantes, Alumnos, Graduados, Docentes y Visitantes. 23

24 24

25 Cuerpo Los sectores del cuerpo del sitio web varían según si el usuario se encuentra en la portada o en el interior del sitio. Cada portada de sitio de una Unidad Académica es desarrollada por el Departamento Web acomodando los distintos elementos según lo que prefiera la Unidad Académica, combinando imágenes, banners y cartelera de novedades. El cuerpo de la portada se encuentra compuesto por: Botonera Vertical En esta botonera se encuentra el acceso a las secciones principales del sitio de la Unidad Académica. Estas se componen de una serie de secciones estándar: Nuestra Facultad, Pregrado, Grado, Posgrado, Investigación, Extensión y Publicaciones; y secciones particulares de cada Unidad Académica (en el ejemplo: Factor Futuro, Centro de Radio y Tv, Redacción y Diseño) Banners Este sector está compuesto por dos banners de la Unidad Académica. Se utilizará este espacio para destacar actividades o temáticas que la Unidad Académica considere relevantes. Cartelera de Novedades En la cartelera se destacaran novedades e información de interés para los miembros de la Unidad Académica y visitantes del sitio. Imágenes Según cada Unidad Académica la portada contará con una serie de imágenes que pueden ser rotativas y disponerse de diferentes maneras. 25

26 26

27 Pie El pie se encuentra presente a lo largo de todo el sitio, tanto en la portada como en las páginas interiores, sin sufrir modificaciones en ninguna instancia del sitio de la Unidad Académica. El mismo se encuentra compuesto por: Título de Página El título de página se encuentra compuesto por el nombre de la Universidad y el nombre de la Unidad Académica concreta. Enlaces Este sector contiene el acceso a las secciones de Contacto y Mapa del Sitio, así como a las versiones en Inglés y Portugués del sitio UCA. 27

28 3.2. Diseño de la Plantilla de Páginas Internas 28

29 Sectores y Elementos de las Páginas Internas 29

30 Cuerpo Los sectores del cuerpo del sitio web varían según si el usuario se encuentra en la portada o en el interior del sitio. El cuerpo de las páginas internas se encuentra compuesto por: Árbol Muestra la estructura de navegación y referencia de donde está ubicado el contenido que estamos viendo. Acceso Rápido El menú desplegable de acceso rápido sirve para tener a un solo paso de distancia los contenidos relevantes de la sección en la que se encuentra el contenido que estamos visualizando. Menú En este sector se encuentra el acceso a las secciones que se encuentran en el mismo nivel que el contenido que estamos viendo. Submenú En este sector se encuentra el acceso a las subsecciones o subcontenidos de la sección en la que estamos posicionados. Contenido Es el contenido propiamente dicho. Todo contenido cuenta al final del mismo con la fecha de última actualización. Navegación Botones para navegar el sitio regresar a la página anterior ir a página siguiente ir a página según numeración regresa a la parte superior de la página que se está visualizando 30

31 Utilidades Botones de funcionalidades relacionadas al artículo que se está visualizando: se visualiza una versión especial para imprimir del artículo que estamos viendo. Función para recomendar el artículo a otro usuario Guarda en la carpeta de favoritos del explorador el artículo visualizado. Contenido Relacionado Enlaces a artículos relacionados con la temática del artículo que estamos viendo. Estas relaciones se realizan de manera automática a partir de palabras claves de cada artículo. Contenido Destacado Enlaces a los artículos más consultados. Este listado se genera de manera automática a partir del análisis de los contenidos que son más solicitados por los usuarios 31

32 32

33 Botonera Vertical En esta botonera se encuentra el acceso a las secciones estándar (o contenidos mínimos ) y particulares de cada Unidad Académica (en el ejemplo: Factor Futuro, Centro de Radio y Tv, Redacción y Diseño) Secciones Estándar: Nuestra Facultad Pregrado Grado Posgrado Investigación Extensión Publicaciones Al encontrarse dentro de una sección concreta, esta se situará en la primera posición de la Botonera Vertical y desplegará sus subsecciones como muestra la imagen. 33

34 3.3. Sitios de Dependencias Algunas Unidades Académicas cuentan con Dependencias que tienen sitio web propio (por ejemplo el Programa de Investigación Geográfico Político Patagónico). El diseño de estos sitios deriva del de la Unidad Académica a la que pertenecen y respeta el color de dicha Unidad. La Arquitectura de la Información y Navegación de estos sitios es definida por la Dependencia junto al Departamento Web. Es responsabilidad de las Dependencias y de las Unidades Académicas a las que pertenecen, la organización, actualización y mantenimiento de los contenidos de su sitio web. El nuevo diseño es acompañado por una Hoja de Estilos que debe ser utilizada para asignar tipografías, efectos a los botones, vínculos, etc. A Continuación presentamos un modelo de sitio web de Dependencia a partir de la nueva plantilla de diseño y detallaremos solo las diferencias con la Plantilla de Diseño de las Unidades Académicas. 34

35 Diseño de la Plantilla de Dependencias: Sectores y Elementos Particulares 35

36 Encabezado El encabezado se encuentra presente a lo largo de todo el sitio, tanto en la portada como en las páginas interiores, sin sufrir modificaciones en ninguna instancia del sitio de la Dependencia. La única diferencia que presenta en relación al encabezado de la Unidad Académica a la que pertenece es en el Título de la Página: En este caso el título de página se encuentra compuesto por el nombre de la Universidad, el nombre de la Unidad Académica a la que pertenece y debajo el nombre de la dependencia concreta. Por ejemplo: Pontificia Universidad Católica Argentina Instituto de Ciencias Políticas y Relaciones Internacionales Programa de Investigación Geográfico Político Patagónico Pie El pie se encuentra presente a lo largo de todo el sitio, tanto en la portada como en las páginas interiores, sin sufrir modificaciones en ninguna instancia del sitio de la Dependencia. A diferencia del pie del sitio de la Unidad Académica el título que figura en el mismo se encuentra compuesto por el nombre de la Universidad y el nombre de la Dependencia concreta. Botoneras En el caso de los sitios de Dependencias las Secciones Estándar están determinadas solamente en la botonera horizontal (audiencias), en la botonera vertical se encuentra el acceso a las secciones particulares de cada Dependencia. 36

37 3.4. Estándares de Diseño Las nuevas plantillas de diseño deben ser implementada en todos los sitios de las Unidades Académicas y Dependencias de la Universidad Alineación El sitio se encuentra siempre centrado en la pantalla y ocupa un 100% de ancho de pantalla, siendo su ancho mínimo de 760 pixeles Encabezado y Pie de Página El encabezado y pie de página son fijos y no pueden ser modificados. Fueron diseñados para dar una identificación clara y consistente de la Universidad. El encabezado incorpora el Isologotipo de la Universidad y es lo que da identidad institucional a todos los sitios de la misma Título El título del sitio web se encuentra dentro del encabezado y corresponde al nombre de la Unidad Académica Colores El Fondo de pantalla es blanco y no puede ser modificado. Los colores utilizados en cada sitio de Unidad Académica se establecen a partir de una paleta armada especialmente para dicho sitio a partir del color institucional de cada Unidad Fuentes tipográficas El tipo y tamaño de fuente tipográfica para el contenido del sitio es, por defecto: Arial, 12 pixeles, justificada, color negro (#000000). Las fuentes tipográficas de secciones, subsecciones y enlaces se establecen en la hoja de estilos que acompaña a cada sitio web. Las variantes de color se establecen de acuerdo a la paleta de colores definida en el punto Botoneras La botonera horizontal (en el encabezado) y la botonera vertical (en la columna de la izquierda) presentan la navegación principal del sitio web de cada Unidad Académica. 37

38 Botonera Horizontal En la botonera horizontal se encuentra el acceso al contenido por tipo de audiencia o visitante del sitio. La funcionalidad de estas secciones reside en orientar al usuario brindando un acceso a contenido sectorizado pensado específicamente para dicho tipo de usuario. Al sectorizar la información se consigue potenciar el contenido, ya que se apunta al público objetivo de dicha información y se busca evitar la saturación del usuario con exceso de información. Botonera Vertical La botonera vertical se encuentra compuesta por los contenidos mínimos que deben mostrar todas las Unidades Académicas y las secciones particulares que cada Unidad tenga para destacar Arquitectura de la Información y Navegación La Arquitectura de Información trata de organizar la información de manera que los usuarios puedan encontrar las respuestas correctas a sus interrogantes. Muchas veces, los usuarios tienen que esforzarse durante la realización de actividades tan simples como pueden ser navegar ociosamente en Internet o ejecutar una búsqueda sencilla. La Arquitectura de la Información y Navegación se encuentran regidas por unos Contenidos Mínimos establecidos por la Universidad, pero la misma no establece que contenidos particulares pondrá cada Unidad Académica. Es responsabilidad de estas últimas la organización, actualización y mantenimiento de los contenidos de su sitio web Contenidos Mínimos / Secciones Estándar Se plantea de esta manera la necesidad de establecer ciertos contenidos mínimos que deben tener los sitios web de todas las Unidades Académicas y establecer también el ordenamiento de los mismos. Los contenidos mínimos son: Nuestra Facultad Pregrado Grado 38

39 Posgrado Investigación Extensión Publicaciones Y las secciones de la botonera horizontal: Ingresantes Alumnos Graduados Docentes Visitantes Secciones Particulares Algunas Unidades Académicas cuentan con institutos, centros o programas especiales que pueden ser destacados dentro de la botonera vertical. El resto de los contenidos de cada Unidad Académica deberá ser organizado dentro de las Secciones Estándar Usabilidad Usabilidad significa centrarse en la audiencia potencial de las páginas, estructurar el sitio de acuerdo con sus necesidades y organizar la navegación de manera que permita encontrar lo que se busca. Requiere construir el sistema interactivo que mejor responda a las tareas que se van a realizar. Por ello, el principio estratégico que debe guiar todo diseño de un sitio web es tener como referencia las necesidades de los usuarios. Se debe buscar un equilibrio entre la cantidad de información con un diseño que potencie la identidad de la Universidad. Es necesario trabajar con diseños que refuercen la identidad y con estructuras de contenidos orientadas al usuario. Después de haber analizado varias definiciones de usabilidad, puede concluirse que es el conjunto de características de diseño y funcionamiento de una interfaz de usuario, que garantizan su correcta operación y entendimiento, y que buscan, en última instancia, la máxima satisfacción del usuario durante el proceso de interacción con el producto. 39

40 3.7. Accesibilidad La idea principal radica en hacer la Web más accesible para todos los usuarios independientemente de las circunstancias y los dispositivos involucrados a la hora de acceder a la información. Partiendo de esta idea, una página accesible lo será tanto para una persona con discapacidad, como para cualquier otra persona que se encuentre bajo circunstancias externas que dificulten su acceso a la información (en caso de ruidos externos, en situaciones donde nuestra atención visual y auditiva no estén disponibles, etc.). Las personas afectadas por distintas discapacidades, pueden necesitar ayudas técnicas para acceder a la información en la Web. Las ayudas técnicas, funcionan en conjunción con los navegadores, permitiendo a los usuarios con discapacidad acceder a la información en la Web. Por ejemplo, si eres ciego, necesitas usar un lector de pantalla. El lector de pantalla, un programa informático, no sólo lee en voz alta el cuerpo de texto en una página, sino que también describe los elementos Web, tales como las imágenes. Sin embargo, para que un lector de pantalla describa imágenes, y otros elementos Web, el HTML u otro lenguaje de marcado, usado para codificar la página, debe hacer que esta información esté disponible para el lector de pantalla. Es muy importante que los sitios web de la Universidad sean accesibles para así proporcionar un acceso equitativo e igualdad de oportunidades a las personas con discapacidad. En la quinta parte del total de los hogares urbanos de nuestro país hay por lo menos una persona con discapacidad, y cerca de las tres cuartas partes de quienes padecen una discapacidad la adquirieron a lo largo de su vida, sea por una enfermedad, por accidentes u otras causas. A fines del año pasado tuvo media sanción en la Cámara de Diputados un proyecto de ley que haría obligatorio para los sitios estatales el cumplimiento de las normas internacionales de accesibilidad que recomienda la W3C-WAI (web accesibility iniciative del world wide web consortium) e invitaría a los sitios privados a que también las respeten. Existen unos estándares internacionales de accesibilidad establecidos por el W3C (world wide web consortium) llamadas WAI (web accesibility iniciative). Se puede acceder a los mismos en: Algunas discapacidades tenidas en cuenta por los estándares: Usuarios Ciegos Usuarios con Ceguera al Color Usuarios con visión débil que no pueden leer texto pequeño Usuarios Sordos Usuarios con deficiencia auditiva Usuarios que no usan un ratón Usuarios con discapacidades debidas a la artritis u otros problemas de control motor Epilepsia fotosensible No es muy común pero es atendida por el estándar. 40

41 Cumpliendo con los estándares, no solo se ayuda a los usuarios discapacitados, sino que también puede mejorar el acceso a la Web para dispositivos de mano (celulares, PDA) y otros medios alternativos de acceso a la información web. Nuestra Universidad puede convertirse en un referente importante a la hora de hablar de accesibilidad web, y evitar con ello la exclusión social y ayudar a garantizar el derecho a la información de todos los ciudadanos. 4. Fuentes y Colores 41

42 4.1. Fuentes Las fuentes tipográficas se encuentran definidas por defecto. Nombre de Universidad Verdana, 17 pixeles, negrita, color: #1E2E69 Nombre de Unidad Académica Verdana, 17 pixeles, color: #1E2E69 Sección Vertical Arial, 11 pixeles, negrita, color: #1E2E69 Sección Horizontal Verdana, 13 pixeles, negrita, color: #FFFFFF Árbol Verdana, 11 pixeles, color: # Menú Verdana, 11 pixeles, color: #FFFFFF, bgcolor: #929CC2 Submenú Verdana, 11 pixeles, color: #000000, bgcolor: #E9EBF3 Título Verdana, 12 pixeles, negrita, color: #1E2E69 Contenido Arial, 12 pixeles, justificada 4.2. Colores 42

43 43

44 44

45 4.3. Hoja de Estilos El nuevo diseño es acompañado por una Hoja de Estilos que debe ser utilizada para asignar tipografías, efectos a los botones, vínculos, etc. Las fuentes tipográficas de secciones, subsecciones y enlaces se establecen en la hoja de estilos que acompaña a cada sitio web. Las variantes de color se establecen de acuerdo a la paleta de colores definida en el punto