Guía de estilo do sitio web

O deseño do sitio web da USC está condicionado polo carácter institucional do sitio web e pola súa función de medio de información e comunicación. Por iso o deseño visual, a facilidade de emprego e os contidos son elementos básicos para cumprir co seu cometido.

O seguimento destas normas de identificación visual garante a coherencia do sitio web co resto de elementos que conforman a imaxe institucional da USC.

Usabilidade

A usabilidade vén definida polo ideal técnico de resolver o problema do deseño do sitio web; o obxectivo principal consiste en facilitar aos usuarios o traballo de levar a cabo tarefas útiles: busca de contidos, obtención de información.

O deseño dos sitios web segundo a usabilidade é cada vez máis importante xa que permite aos usuarios atopar o que están a buscar dun xeito sinxelo e intuitivo.

A navegación é un elemento necesario para facilitar o acceso aos contidos que é o elemento máis importante das páxinas web.

Páxina de inicio

A páxina de inicio debe ser o primeiro que ve un usuario ao entrar nun sitio; por iso cómpre obviar a inclusión dunha pantalla de benvida ou animación introdutoria. Esta práctica ralentiza o acceso á páxina de inicio, xa que introduce un paso superfluo para chegar á información; por iso a páxina de inicio debe amosar o contido inicial do sitio web.

Evitarase a inclusión de elementos innecesarios, quedando delimitada a aparición de botóns ou enlaces na páxina de inicio aos estipulados pola normativa correspondente, cabendo como única excepción aqueles casos nos que haxa unha causa xustificada de amplo impacto social ou institucional.

Estrutura da páxina

A páxina web estará composta por unha estrutura, conformada mediante táboas ou mediante a especificación das follas de estilo en cascada (Cascade Style Sheet - CSS), de 3 columnas máis unha cabeceira e un pé estandarizados. A columna da dereita poderá non aparecer naqueles casos nos que o contido da páxina así o aconselle.

Queda prohibida a utilización de marcos (frames), xa que dificultan a usabilidade do sitio web.

Cabeceira

Na cabeceira, situada na zona superior da páxina, deberá aparecer a zona de navegación común a todo o sitio web. Estará composta por:

Logotipo

O logotipo da USC a empregar será a súa versión Alta Representación e deberá aparecer cun tamaño non inferior a 70 píxeles de alto. É necesario que se identifique a pertenza ao sitio web da USC en todas as páxinas incluíndo o logotipo en cada páxina. O logotipo deberá ter unha colocación preferente, a esquina superior esquerda, e deberá converterse nun hipervínculo coa páxina de inicio, de xeito que os usuarios poidan chegar á páxina de inicio da USC dende calquera outra páxina do sitio web.O logotipo deberá ser descargado do Manual de Imaxe Corporativa e Identidade Visual existente no sitio web da USC quedando terminantemente prohibida calquera modificación do mesmo.

Versións do sitio web

Entre o logotipo e a zona da busca debe estar a zona onde se poden seleccionar as diferentes versións do sitio web, ben sexa a "versión para discapacitados" como a versión do sitio web nos diferentes idiomas. Esta zona poderá ser empregada para amosar outro tipo de información, como o título ou nome dos diferentes subsitios web da USC. Así mesmo, nos casos nos que así se prefira, pode quedar baleira.

Busca

Na parte superior dereita deberá estar a zona de busca. A busca debe resultar de fácil acceso dende cada unha das páxinas do sitio. Tamén pode existir un enlace para realizar unha busca avanzada na que se poidan restrinxir ou especificar as características e elementos da busca. A páxina de resultados da busca debe ter unha lista de coincidencias, aparecendo as máis importantes na parte de arriba. Cando os diferentes subsitios web non poidan implementar un sistema propio de busca, deberán facer uso do sistema usado polo web da USC, indicando o ámbito máis xenérico no que se vai realizar a mesma.

Navegación

Debaixo do logotipo e da zona da busca, e ocupando o ancho das tres columnas, deberá aparecer unha zona de navegación. Esta zona debe estar claramente delimitada por un recadro que empregará as cores especificadas no estilo CSS para este apartado.Nesta zona de navegación é desexable que apareza un enlace ao mapa do sitio, á axuda do sitio, á zona de contacto, ao directorio da USC, aos enlaces de interese e á páxina na que se poida consultar o correo electrónico a través do web. Tamén poden aparecer outros elementos específicos como a información sobre o web. Nos diferentes subsitios web da USC que así o prefiran poderán aparecer outros contidos específicos do subsitio web.

Migas de pan (Breadcrumbs)

Debaixo da zona de Navegación deberán aparecer as "migas de pan" que permiten amosar a ruta xerárquica completa dende a páxina de inicio da USC ata os niveis da páxina actual, e volver a calquera das páxinas de nivel superior.

Corpo

Esquerda

A zona esquerda das 3 columnas está reservada á navegación e estará formada por unha ou dúas caixas definidas polo xeito de desplazarse a través das diferentes seccións do sitio web ou ben a través dos diferentes perfís no caso de terse creados.

Centro (Zona de contidos)

A zona de contidos é a máis importante e onde se debe amosar a información que o usuario precisa. Sempre que o contido da páxina así o aconselle empregarase o "principio da pirámide" para amosar a información: primeiro o título, logo unha breve descrición que resuma o contido e logo o texto.

Dereita

A zona da dereita resérvase para as caixas que teñan un carácter dinámico: de novas ou informacións, a caixa de identificación do usuario e algunha caixa que poida ser de interese para a comunidade universitaria.

Pé

A estrutura do pé será a seguinte:

Unha zona delimitadora reservada ao enlace que permite acceder a unha versión preparada para ser impresa, e que estará perfilada por un recadro.

Nos diferentes subsitios web esta zona poderá aparecer baleira, ou conter outra información como os enlaces ás versións das páxinas noutros idiomas.

Debaixo do recadro deberán aparecer os datos da institución, enderezos e teléfonos tanto da Reitoría de Santiago de Compostela (á esquerda) como da Vicerreitoría de Coordinación do Campus de Lugo (á dereita).

Entre ambas as dúas direccións poderán aparecer as iconas/logotipos que enlazan con entidades de interese para a USC.

Nos diferentes subsitios web poderanse cambiar os enderezos da zona inferior, podendo aparecer o da unidade, centro, departamento ou servizo.

URLs

Todas as URLs do web da USC deberán ser sinxelas, coherentes co contido da páxina e empregar o galego, para evitar confusións ou duplicacións dos enderezos. Cando non sexa tecnicamente posible que os enderezos sexan sinxelos, deberase implementar un "alias" para a páxina de inicio do subsitio web.

Metadatos HTML

Os metadatos HTML da páxina permiten a súa inclusión nos motores de busca. É preciso engadir un contido da etiqueta <TITLE> que defina a páxina. Deberán aparecer sempre no idioma correspondente á versión da páxina excepto cando faga referencia a elementos que estean recoñecidos co seu nome noutro idioma, como por exemplo: "16th IEEE Symposium on Computer Arithmetic".

Ademais deste título é preciso incorporar as palabras clave (keywords) que se inclúen nos metadatos. Estas deben reflectir os contidos da páxina dun xeito esquemático, e deberán aparecer no maior número de idiomas posible: "bolsa alumno estudante congreso curso".

Un exemplo desta práctica sería: <META NAME="keywords" LANG="es" CONTENT="universidad de santiago de compostela, usc, universidade de santiago de compostela, beca, alumno, ayuda, estudiante, congreso, curso"> <META NAME="keywords" LANG="en" CONTENT="university of santiago de compostela, usc, universidade de santiago de compostela, grant, student, congress, course"> <META NAME="keywords" LANG="gl" CONTENT="universidade de santiago de compostela, usc, universidade de santiago de compostela, bolsa, alumno, axuda, estudante, congreso, curso">.

Cores

As cores que se deberán usar nos elementos visuais, agás nas imaxes e nas gráficas, no sitio web deberán axustarse ás institucionais, por iso as principais cores deberán ser as que se especifican no Manual de Imaxe Corporativa e Identidade Visual da USC.

Fondo da páxina

O fondo da páxina deberá ser de cor branca (codificación #FFFFFF) para optimizar a lexibilidade do sitio web e acadar o denominado "texto positivo" que se conforma mediante as letras de cor escura (preferiblemente negra) sobre fondo branco.

Como excepción pode existir unha versión especial da páxina web, especificamente pensada para persoas con determinadas discapacidades visuais, cun fondo de páxina de cor diferente da branca.

Non se colocarán imaxes como fondo de páxina xa que restan lexibilidade ao texto e aumentan innecesariamente o tempo de carga das páxinas.

Texto

As directrices principais para escribir nas páxinas web son:

• brevidade,
• emprego de parágrafos curtos,
• emprego de hipertexto para dividir a información extensa en múltiples páxinas,
• asegurar que o deseño funciona ben tanto con fontes pequenas como grandes,
• aliñación á esquerda ou xustificación do texto,
• evitar o emprego das maiúsculas no texto xa que ralentizan a lectura.

Estilos

As especificacións de estilos de texto, enlaces e táboas definiranse preferiblemente a través dunha folla de estilo en cascada (CSS). Para iso empregarase o arquivo "estilo.css" que reflicte a normativa do Manual de Imaxe Corporativa e Identidade Visual e que estará dispoñible para a súa descarga na sección correspondente do web institucional da USC.

Imaxes

As imaxes, agás en casos especiais nos que sexa estritamente necesario por razón da resolución da mesma, terán un tamaño máximo de 400 píxeles de ancho ou alto.

No emprego de imaxes nas páxinas web debe primar a optimización do tempo de descarga, por iso empregaranse os formatos GIF, JPEG ou PNG.

Todas as imaxes deberán levar un texto asociado nunha etiqueta ALT que identifique e describa a imaxe. As imaxes non poderán ter efectos como relevos, reflexos, simulacións de 3D, biseis, sombreados...

Miniaturas (Thumbnails)

No caso de precisar colocar nunha páxina web unha imaxe de gran tamaño (maior de 25 Kb ou cunhas dimensións maiores de 400 píxeles), empregarase unha miniatura representativa (thumbnail) que teña un enlace á imaxe orixinal. Xunto coa versión reducida da imaxe deberá aparecer unha indicación do tamaño da imaxe completa.

Un exemplo do emprego de miniatura é:

Multimedia

Os elementos multimedia superfluos deben eliminarse, especialmente todos os casos de información textual amosada como imaxe ou animación (coa excepción dos títulos que estean integrados nun gráfico comercial ou imaxe visual que teñan que formar parte da mesma).

As animacións poderán empregarse para describir o funcionamento de procesos ou dinámicas de movemento. Debido ás restricións de ancho de banda, o emprego de arquivos de vídeo debe minimizarse no web.

A opción de executar automaticamente arquivos de son queda prohibida.

Queda expresamente prohibido o emprego de efectos visuais mediante a inclusión de código Javascript ou applets de Java, ou a implementación de "pop-ups" ou páxinas emerxentes.

Arquivos para descargar

No caso de pór arquivos para descargar nunha páxina web, a súa apariencia deberá ser similar á das miniaturas das imaxes. O enlace de descarga estará formado por unha imaxe que represente o tipo de arquivo e un hipervínculo de texto. Indicarase o tamaño que ten o arquivo para facilitarlle ao visitante da páxina o cálculo do tempo que lle pode levar a descarga do arquivo.

Un exemplo de como debería aparecer sería:

Así mesmo é preciso colocar na páxina web, se o arquivo ten un formato non habitual, enlaces a sitios web dende os que poder descargar visores ou plug-ins específicos para poder ter acceso ao arquivo.

Prácticas non admitidas

De acordo co documento de afiliación que a USC ten asinado con RedIRIS, queda prohibido:

• calquera transmisión de información ou acto que viole as leis do Estado español ou das directivas da Unión Europea,
• creación ou transmisión de material que cause calquera tipo de molestia aos usuarios de RedIRIS,
• actividades deliberadas con algunha das seguintes características:
  • conxestión dos enlaces de comunicacións ou sistemas informáticos mediante o envío de información ou programas concibidos a tal fin,
  • destrución ou modificación malintencionada da información doutros usuarios,
  • violación da privacidade e intimidade doutros usuarios,
  • deterioro do traballo doutros usuarios.

De acordo co documento de afiliación que a USC ten asinado con RedIRIS, non se poden colocar nas páxinas web elementos con fins privados, non estritamente profesionais ou comerciais con ánimo de lucro.

Accesibilidade para os discapacitados

A accesibilidade está centrada en facer os sitios web máis perceptibles, entendibles e operativos. A accesibilidade dos sitios web está fortemente dirixida a aquelas persoas con discapacidades físicas que repercuten nas súas posibilidades de navegar por internet.

É importante empregar o código HTML para codificar o significado en vez da aparencia.

Co obxecto de que todas as páxinas e subsitios web da USC cumpran a normativa en materia de accesibilidade, deberá comprobarse que as páxinas superan un test de accesibilidade web como o TAWDIS (http://www.tawdis.net). Do mesmo modo esta comprobación será efectuada con regularidade pola oficina web.

Discapacidades visuais

Os problemas máis importantes de accesibilidade afectan aos usuarios invidentes e aos que teñen outras deficiencias visuais, xa que a maioría das páxinas web teñen un alto contido gráfico.

Os usuarios con discapacidades visuais poden empregar un lector de pantalla que ten como función ler o texto a través dun sintetizador, polo que é conveniente empregar texto sempre que se poida; evitando empregar imaxes para escribir texto. Tamén é conveniente prescindir das animacións para amosar texto, xa que non o podería recoller o sintetizador.

Para facilitar o acceso aos usuarios con deficiencias visuais cómpre non codificar a información con tamaños de fonte absolutos, senón facelo con tamaños relativos.

Ademais de facer que o texto sexa lexible é preciso proporcionar un método alternativo para amosar as imaxes á xente que non as poida ver. A solución consiste en empregar a etiqueta ALT no código fonte.

Os usuarios normais tamén se beneficiarían das etiquetas ALT xa que describe o contido da imaxe sen que teña que descargala, naqueles casos nos que haxa problemas de ancho de banda ou aqueles usuarios que teñan deshabilitada a visión das imaxes.

<IMG SRC="usc.jpg" WIDTH="100" HEIGHT="100" ALT="Logotipo da USC">

Os usuarios que non poidan ver a imaxe verán ou escoitarán o texto alternativo "Logotipo da USC".

Tamén é importante engadirlle o atributo "summary" a cada táboa seguido da descrición da mesma, para facilitarlle o acceso aos contidos da mesma ás persoas con navegadores de texto. Un exemplo é:

<TABLE BORDER="1" SUMMARY="Datos estatísticos da USC">

Discapacidades auditivas

Como xa se especificou no apartado de multimedia, os efectos de audio son gratuítos a maioría das veces, polo que cómpre ser moi estrito para evitar que os contidos sexan arquivos de son, se non é estritamente necesario para facilitar o achegamento aos contidos das persoas xordas ou con deficiencias auditivas.

Os elementos de audio só se poderán empregar en casos de extrema necesidade para difundir a información da páxina, e deberase facilitar unha transcrición do contido do arquivo, se se trata, por exemplo, dunha alocución.

Aplicación da guía nas páxinas institucionais da USC

Aquelas páxinas que se correspondan con espazos institucionais deberán cumprir todos os puntos desta guía de estilo visual do sitio web da USC.

Os subsitios web que entren na categoría de científico-académicos deberán respectar os apartados que fan referencia á usabilidade e á accesibilidade das páxinas web; tendo que cumprir co estipulado no apartado de "cabeceira" en todo o subsitio web.