Ir a contenido Ir a Estudios, Gobernanza y organización
Logo UA
Realizar búsqueda
Menú
Web Institucional de la Universitat d'Alacant

Guia d'estil

Recomanacions generals

A continuació s'enumeren algunes recomanacions per a l'elaboració de pàgines Web i que han servit de base tant a l'hora del disseny del Web corporatiu de la Universitat d'Alacant, com de l'organització de la informació en aquest Web.

  • La inclusió d'objectes, multimèdia o d'objectes que necessiten connectors per a poder ser activats, pot impedir la visualització correcta de la pàgina i només haurien d'utilitzar-se en casos imprescindibles. 
  • La inclusió de gràfics ha de valorar-se en relació als temps de càrrega que serien necessaris si l'accés a la pàgina es realitza a través de connexions de baixa velocitat. 
  • En aquest mateix sentit i per a afavorir una lectura còmoda de la pàgina, no convé que el contingut de la pàgina siga molt extens, sent el cas mes favorable quan les pàgines poden ser llegides sense necessitat d'utilitzar les barres de desplaçament.
  • Si necessita publicar gràfics o fitxers de grandària considerable, informe de la seua grandària en bytes perquè l'usuari puga valorar els temps d'espera.
  • La utilització d'elements gràfics comuns a diverses pàgines, afavoreix la càrrega d'aquestes pàgines en aprofitar la caixet que incorporen els visors.
  • Els documents l'accés dels quals estiga restringit als membres de la comunitat universitària s'assenyalaran amb una icona especial (icona-tancat amb clau).
  • Hauran d'evitar-se l'accés a les pàgines que continguen "...En construcció".
  • Així mateix comprove les seues pàgines per a evitar els errors del tipus "...File not found" i revise periòdicament els enllaços que apareguen en aquestes.
  • Tinga en compte que molts usuaris poden guardar en els seus marcadors qualsevol tipus de pàgina, per la qual cosa aquestes han d'estar perfectament identificades com a pàgines pertanyents a la Universitat.
  • La majoria dels cercadors utilitzen la informació descrita en el "Títol", "Descripció" i "Paraules clau". Seguisca les recomanacions que apareixen en la Guia de publicació de pàgines web en VUALÀ2.
  • En el cas de publicar documents del tipus lliure electrònic, és molt comú proporcionar enllaços que permeten descarregar aquest document en algun dels formats més freqüents (pdf, rtf, ...). Si la grandària d'aquests documents és considerable, es recomana utilitzar algun sistema de compressió.
  • Evite canviar les URL de les seues pàgines, tinga en compte que alguns visitants poden haver anotat aquesta direcció en els seus marcadors, per la qual cosa posteriors accessos els produirà un missatge d'error. Si fóra inevitable aquest canvi, mantinga una pàgina amb la URL antiga que redirigisca a la nova direcció.
  • Comprove que el seu document no conté enllaços incorrectes i que es visualitza correctament amb diferents visors i les seues diferents versions (Chrome, Explorer,...). També és molt convenient comprovar l'aspecte de la pàgina en diferents plataformes (Windows, Mac, Unix,...) i diverses configuracions del client (escriptori, mòbil,...).

Logotip de la UA

Existeixen diversos gràfics corresponents al logotip de la Universitat definit en el document Normes Gràfiques de la Identitat Visual Corporativa. Tal com s'indica en aquest document el logotip de la UA. està compost del símbol de la universitat i el text 'Universitat d'Alacant / Universitat d'Alacant'. Tots dos elements no poden utilitzar-se per separat i les distàncies i proporcions no poden alterar-se.

En aqueix mateix enllaç del Gabinet d'imatge, poden descarregar-se diferents tipus i grandàries de logotips oficials de la Universitat d'Alacant i del seu escut.

Colors corporatius

Els colors corporatius són els que apareixen en el símbol de la universitat, adaptats als colors més pròxims en la classificació dels 216 colors que comparteixen les paletes Windows i 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

Elements gràfics

Amb Vualà no és necessari afegir cap element gràfic a cap dels enllaços que incloguem en les nostres pàgines, ho fa automaticamente. Si la nostra pàgina inclou per exemple un enllaç a un document pdf, en publicar la pàgina apareixerà automaticamente la icona de pdf. El mateix ocorrerà amb una altra mena d'extensions Word, amb enllaços externs, etc. L'accés a les diferents versions idiomàtiques de la nostra web es fa a través de les opcions de menú que apareixen en la part superior esquerra de cada pàgina del nostre lloc.

Enllaços

Vualà inclou les opcions corresponents per a la inclusió d'aquesta mena d'elements en pàgines web complint amb els estàndards establits sobre accessibilitat.

No obstant això, quan es vagen a incloure "enllaços" en la nostra pàgina web s'han d'evitar expressions de l'estil "punxe ací" o "faça clic ací" com a text de l'enllaç, ja que no aclareix el tipus de recurs on els portarà aqueix enllaç. Per exemple:

INCORRECTE: "Faça clic per a anar a la taula de continguts del manual"

CORRECTE: "Consulte la taula de continguts del manual d'aplicacions de les pautes.... "

Documentació relativa a la inclusió de "enllaços" en una pàgina web utilitzant Vualà2.

Fotos i imatges

Per a incorporar fotos i imatges en la nostra pàgina web hem d'avaluar tant la qualitat com el temps de carregar d'aquesta. Principalment són dos els factors que determinen la grandària en bytes de l'element gràfic a inserir: les seues dimensions i el nombre de colors que l'integren. Tots dos contribueixen de manera directa a la seua grandària i per tant inversament al temps de càrrega. D'altra banda la forma d'emmagatzematge del gràfic o imatge mes esteses en la construcció de pàgines Web es limita a fitxers de tipus GIF o JPG.

Els primers, GIF, són apropiats per a icones, logotips, gràfics... amb 256 colors com a màxim i la possibilitat de definir colors transparents i animació de gràfics com a característiques principals. Addicionalment podem definir que la imatge siga Interlaced la qual cosa permet visualitzar la imatge progressivament conforme es va carregant.

Quan es desitge utilitzar una paleta de colors superior a 256 colors és necessari utilitzar el format JPG. Aquest format permet fins a 16 milions de colors i gràcies al seu sistema de compressió, és el més adequat per a fotos o imatges amb gran varietat de colors i en les quals els detalls no siguen tan importants com en el cas d'icones o logotips. Existeix programari que permet optimitzar la grandària del fitxer reduint el nombre de colors i dimensions del gràfic mantenint la qualitat original del gràfic.

No obstant això el resultat final de la visualització de la pàgina depèn del navegador i de la configuració de l'equip de cada usuari.

Si desitgem publicar un catàleg d'imatges, es recomana utilitzar un índex de text que enllaç amb la pàgina que continga la imatge. Una altra possibilitat és utilitzar una versió de grandària reduïda de les imatges que servisca d'índex però la grandària de cadascuna d'elles ha de ser el més xicotet possible.

Alguns errors en publicar imatges amb Vualà són:

  1. Utilitzar imatges grans i reduir-les en l'editor i no fer-lo amb un programa de retoc fotogràfic.  En actuar d'aquesta forma l'usuari quan visita la pàgina web, rep la imatge en gran amb el cost (temps i diners) que comporta i és després el navegador el que la redueix. La solució correcta és que abans de col·locar la imatge en la pàgina web, la reduïm amb un programa de retoc fotogràfic i posteriorment la inserim en la nostra pàgina web a la seua grandària real, sense reduir-la. D'aquesta forma l'usuari rep la imatge tal com la visualitzarà
  2. Al contrari que abans, l'usuari sol utilitzar una imatge molt xicoteta que col·loca en la seua pàgina web i és en Vualà on l'amplia. Aquesta pràctica, l'ampliació d'una imatge xicoteta a una més gran, està desaconsellada ja no sols en Vualà sinó també en un programa de retoc fotogràfic perquè la imatge es distorsiona. La solució a aquest problema és aconseguir amb una versió de la imatge el mes gran possible i posteriorment reduir-la.
  3. Per a realitzar modificacions sobre les fotos podem utilitzar el programa XnView. Aquest programa és freeeware i ens permet fer ampliacions, reduccions, retallades.... sobre imatges d'una manera molt senzilla. Per a més informació sobre aquest programa consultar la documentació que hi ha a aquest efecte en el curs de “Publicació Web”

 

Documentació relativa a la inclusió de "imatges" en una pàgina web utilitzant Vualà.

Informació relativa als diferents tipus d'extensions de fitxers d'imatges.

 

Accessibilitat

Proporcione un text equivalent per a tot element no textual (a través del text alternatiu). Això inclou: imatges, representacions gràfiques del text, mapes d'imatge, animacions (Per exemple, GIFs animats), botons gràfics, sons (executats amb o sense interacció de l'usuari), arxius exclusivament auditius, banda sonora del vídeo i vídeos. Si l'element gràfic és sólamente decoratiu, no és necessari incloure cap text alternatiu.

Per a més informació, veure la web d'Accessibilitat .

Taules i plantilles

Les taules es poden integrar dins del Gestor de Continguts Vualà de la mateixa forma que es feia fins ara en Composer. No obstant això, hem de limitar el seu ús exclusivament a la tabulació de dades i evitar la seua utilització per a maquetar la informació de la nostra web.

Vualà a més incorpora algunes plantilles que permet maquetar la informació en diverses columnes. El nombre de plantilles s'iran augmentant progressivament amb l'evolució de l'eina.

Documentació relativa a la inclusió de "taules" en una pàgina web utilitzant Vualà2.