Ir a contenido Ir a Estudios, Gobernanza y organización
Logo UA
Realizar búsqueda
Menú
Web Institucional de la Universidad de Alicante

Guía de estilo

Recomendaciones generales

A continuación se enumeran algunas recomendaciones para la elaboración de páginas Web y que han servido de base tanto a la hora del diseño del Web corporativo de la Universidad de Alicante, como de la organización de la información en dicho Web.

  • La inclusión de objetos, multimedia o de objetos que necesitan conectores para poder ser activados, puede impedir la visualización correcta de la página y sólo deberían utilizarse en casos imprescindibles. 
  • La inclusión de gráficos debe valorarse en relación a los tiempos de carga que serían necesarios si el acceso a la página se realiza a través de conexiones de baja velocidad. 
  • En este mismo sentido y para favorecer una lectura cómoda de la página, no conviene que el contenido de la página sea muy extenso, siendo el caso mas favorable cuando las páginas pueden ser leídas sin necesidad de utilizar las barras de desplazamiento.
  • Si necesita publicar gráficos o ficheros de tamaño considerable, informe de su tamaño en bytes para que el usuario pueda valorar los tiempos de espera.
  • La utilización de elementos gráficos comunes a varias páginas, favorece la carga de dichas páginas al aprovechar la caché que incorporan los visores.
  • Los documentos cuyo acceso esté restringido a los miembros de la comunidad universitaria se señalarán con un icono especial (icono-candado).
  • Deberán evitarse el acceso a las páginas que contengan "...En construcción".
  • Así mismo compruebe sus páginas para evitar los errores del tipo "...File not found" y revise periódicamente los enlaces que aparezcan en las mismas.
  • Tenga en cuenta que muchos usuarios pueden guardar en sus marcadores cualquier tipo de página, por lo que éstas deben estar perfectamente identificadas como páginas pertenecientes a la Universidad.
  • La mayoría de los buscadores utilizan la información descrita en el "Título", "Descripción" y "Palabras clave". Siga las recomendaciones que aparecen en la Guía de publicación de páginas web en VUALÀ2.
  • En el caso de publicar documentos del tipo libro electrónico, es muy común proporcionar enlaces que permitan descargar dicho documento en alguno de los formatos más frecuentes (pdf, rtf, ...). Si el tamaño de estos documentos es considerable, se recomienda utilizar algún sistema de compresión.
  • Evite cambiar las URL de sus páginas, tenga en cuenta que algunos visitantes pueden haber anotado dicha dirección en sus marcadores, por lo que posteriores accesos les producirá un mensaje de error. Si fuese inevitable este cambio, mantenga una página con la URL antigua que redireccione a la nueva dirección.
  • Compruebe que su documento no contiene enlaces incorrectos y que se visualiza correctamente con distintos visores y sus diferentes versiones (Chrome, Explorer,...). También es muy conveniente comprobar el aspecto de la página en distintas plataformas (Windows, Mac, Unix,...) y diversas configuraciones del cliente (escritorio, móvil,...).

Logotipo de la UA

Existen diversos gráficos correspondientes al logotipo de la Universidad definido en el documento Normas Gráficas de la Identidad Visual Corporativa. Tal como se indica en dicho documento el logotipo de la UA. está compuesto del símbolo de la universidad y el texto 'Universitat d'Alacant / Universidad de Alicante'. Ambos elementos no pueden utilizarse por separado y las distancias y proporciones no pueden alterarse.

En ese mismo enlace del Gabinete de imagen, pueden descargarse diferentes tipos y tamaños de logotipos oficiales de la Universidad de Alicante y de su escudo.

Colores corporativos

Los colores corporativos son los que aparecen en el símbolo de la universidad, adaptados a los colores más próximos en la clasificación de los 216 colores que comparten las paletas Windows y Mac.

 

HEX: #F1F5F8

RGB:R: 241G: 245 B: 248

HEX: #D8E5EA

RGB: R:216 G:229 B: 234

HEX: #005682

RGB: R:0 G:86 B:130

HEX: #CCCCCC

RGB: R:204 G:204 B: 204

HEX: #FFD23A

RGB: R:255 G:210 B:58

HEX: #FF6633

RGB: R:255 G:146 B:51

Elementos gráficos

Con Vualà no es necesario añadir ningún elemento gráfico a ninguno de los enlaces que incluyamos en nuestras páginas, lo hace automaticamente. Si nuestra página incluye por ejemplo un enlace a un documento pdf, al publicar la página aparecerá automaticamente el icono de pdf. Lo mismo ocurrirá con otro tipo de extensiones Word, con enlaces externos, etc. El acceso a las diferentes versiones idiomáticas de nuestra web se hace a través de las opciones de menú que aparecen en la parte superior izquierda de cada página de nuestro sitio.

Enlaces

Vualà incluye las opciones correspondientes para la inclusión de este tipo de elementos en páginas web cumpliendo con los estándares establecidos sobre accesibilidad.

Sin embargo, cuando se vayan a incluir "enlaces" en nuestra página web se deben evitar expresiones del estilo "pinche aquí" o "haga clic aquí" como texto del enlace, ya que no aclara el tipo de recurso a donde les llevará ese enlace. Por ejemplo:

INCORRECTO: "Haga clic para ir a la tabla de contenidos del manual"

CORRECTO: "Consulte la tabla de contenidos del manual de aplicaciones de las pautas.... "

Documentación relativa a la inclusión de "enlaces" en una página web utilizando Vualà2.

Fotos e imágenes

Para incorporar fotos e imágenes en nuestra página web debemos evaluar tanto la calidad como el tiempo de cargar de la misma. Principalmente son dos los factores que determinan el tamaño en bytes del elemento gráfico a insertar: sus dimensiones y el número de colores que lo integran. Ambos contribuyen de forma directa a su tamaño y por lo tanto inversamente al tiempo de carga. Por otra parte la forma de almacenamiento del gráfico o imagen mas extendidas en la construcción de páginas Web se limita a ficheros de tipo GIF o JPG.

Los primeros, GIF, son apropiados para iconos, logotipos, gráficos... con 256 colores como máximo y la posibilidad de definir colores transparentes y animación de gráficos como características principales. Adicionalmente podemos definir que la imagen sea Interlaced lo cual permite visualizar la imagen progresivamente conforme se va cargando.

Cuando se desee utilizar una paleta de colores superior a 256 colores es necesario utilizar el formato JPG. Este formato permite hasta 16 millones de colores y gracias a su sistema de compresión, es el más adecuado para fotos o imágenes con gran variedad de colores y en las que los detalles no sean tan importantes como en el caso de iconos o logotipos. Existe software que permite optimizar el tamaño del fichero reduciendo el número de colores y dimensiones del gráfico manteniendo la calidad original del gráfico.

No obstante el resultado final de la visualización de la página depende del navegador y de la configuración del equipo de cada usuario.

Si deseamos publicar un catálogo de imágenes, se recomienda utilizar un índice de texto que enlace con la página que contenga la imagen. Otra posibilidad es utilizar una versión de tamaño reducido de las imágenes que sirva de índice pero el tamaño de cada una de ellas debe ser lo más pequeño posible.

Algunos errores al publicar imágenes con Vualà son:

  1. Utilizar imágenes grandes y reducirlas en el editor y no hacerlo con un programa de retoque fotográfico.  Al actuar de esta forma el usuario cuando visita la página web, recibe la imagen en grande con el coste (tiempo y dinero) que conlleva y es luego el navegador el que la reduce. La solución correcta es que antes de colocar la imagen en la página web, la reducimos con un programa de retoque fotográfico y posteriormente la insertamos en nuestra página web a su tamaño real, sin reducirla. De esta forma el usuario recibe la imagen tal y como la va a visualizar
  2. Al contrario que antes, el usuario suele utilizar una imagen muy pequeña que coloca en su página web y es en Vualà donde la amplía. Ésta práctica, la ampliación de una imagen pequeña a una más grande, está desaconsejada ya no sólo en Vualà sino también en un programa de retoque fotográfico porque la imagen se distorsiona. La solución a este problema es conseguir con una versión de la imagen lo mas grande posible y posteriormente reducirla.
  3. Para realizar modificaciones sobre las fotos podemos utilizar el programa XnView. Este programa es freeeware y nos permite hacer ampliaciones, reducciones, recortes.... sobre imágenes de una manera muy sencilla. Para más información sobre este programa consultar la documentación que hay a tal efecto en el curso de “Publicación Web”

 

Documentación relativa a la inclusión de "imágenes" en una página web utilizando Vualà.

Información relativa a los diferentes tipos de extensiones de ficheros de imágenes.

 

Accesibilidad

Proporcione un texto equivalente para todo elemento no textual (a través del texto alternativo). Esto incluye: imágenes, representaciones gráficas del texto, mapas de imagen, animaciones (Por ejemplo, GIFs animados), botones gráficos, sonidos (ejecutados con o sin interacción del usuario), archivos exclusivamente auditivos, banda sonora del vídeo y vídeos. Si el elemento gráfico es sólamente decorativo, no es necesario incluir ningún texto alternativo.

Para más información, ver la web de Accesibilidad.

Tablas y plantillas

Las tablas se pueden integrar dentro del Gestor de Contenidos Vualà de la misma forma que se venía haciendo hasta ahora en Composer. Sin embargo, debemos limitar su uso exclusivamente a la tabulación de datos y evitar su utilización para maquetar la información de nuestra web.

Vualà además incorpora algunas plantillas que permite maquetar la información en varias columnas. El número de plantillas se iran aumentando progresivamente con la evolución de la herramienta.

Documentación relativa a la inclusión de "tablas" en una página web utilizando Vualà2.