Slider Impacte

El Slider s'utilitza per encapçalar una pàgina web (normalment la home, però també pàgines principals interiors) amb una imatge o seqüència d'imatges (diapositives). Serveix per ressaltar aspectes importants de la web, novetats. etc. Cada diapositiva pot dur un títol/subtítol i/o un o dos enllaços (p.e., a un formulari o un vídeo).

Les imatges s'han de pujar prèviament a Adminstració > Contingut > Documents i fitxers multimèdia. Preferentment han de ser fotografies de mida recomanada: 1300 x 450 px i màxim 200 kb, en format JPG; si és imatge gràfica, PNG. Actuen com un fons que s'adapta a cada dispositiu i no poden contenir informació textual (estan "prohibits" els bànners, cartells, etc.), ja que en aquest cas el text no és accessible a usuaris amb alguna discapacitat visual.

 

Com es veu

Com una capçalera amb diapositives. Cadascuna pot tenir títol, subtítol i botons amb enllaços.

 

Com una capçalera amb diapositives. Cadascuna pot tenir títol i botons amb enllaços (el subtítol no es mostra).

Com es crea

 

Com s'edita

En definir un Slider, trobem dos tipus de preguntes:

  • Generals, que afecten les característiques de tot el Slider
  • Específiques per a cadascuna de les diapositives

Característiques generals

Normalment no canviarem les característiques del Slider, però en casos excepcionals es poden alterar.

  • Títol (Obligatori). Títol intern, que no es mostra. Si tenim diferents Slider en una mateixa web, cal utilitzar noms ben descriptius.
  • Alçada: Per defecte, 400. Alçada en píxels en què es mostraran les imatges. Condiciona les dimensions de les imatges que utilitzarem en aquest Slider.
  • Color de fons del text. Color de fons del títol i subtítol de les imatges. Si la web té un color diferent de l'institucional (webs de projectes de recerca i altres productes) convé seleccionar "Color del site".
  • Temps per slide: Durada de cada diapositiva, en mil·lisegons. Per defecte, 7000 (7 segons).
  • Mostrar fletxes: Si hi ha més d'una diapositiva, mostra les fletxes per tal que l'usuari pugui avançar o retrocedir.
  • Mostrar punts: Si hi ha més d'una diapositiva, mostra uns punts per tal que l'usuari pugui triar quina vol veure.
  • Efecte fade: Si està marcat (per defecte), cada diapositiva s'esvaeix i es reemplaça per la següent. Si no està marcat, la diapositiva es desplaça a l'esquerra per mostrar la següent.

Cartacterístiques de cada diapositiva

Si la teva web és en diferents idiomes, recorda editar les traduccions per adaptar títols, subtítols i text dels botons a cada versió.

Cada diapositiva està representada per una fitxa que conté diversos camps i dos controls: 

  • (+) per afegir una diapositiva immediatament darrere.
  • (-) per eliminar la diapositiva (en totes les llengües).

Camps

  • Ordre: Posició en que es mostrarà la diapositiva. Permet reordenar les diapositives (p.e., afegir-ne una per davant, canviar l'ordre segons el calendari acadèmic, etc.). Es recomana numerar les diapositives inicialment de 10 en 10 (10, 20, 30...) per tal que sigui fàcil alterar l'ordre sense haver de renumerar-les totes (p.e., si la primera és la 10, i en volem afegir una per davant, a aquesta li posarem un 5).
  • Imatge de fons. S'ha d'haver pujat abans a una carpeta de Continguts i es selecciona mitjançant el botó Seleccioneu. Les imatges han de respectar les mides i formats que es descriuen a l'inici.
  • Vídeo de fons (mp4) i Vídeo de fons (webm). Reservats per a la Home institucional de la UPF. Si vols incorporar un vídeo al teu Slider, s'explica més avall (Botons).

Informació textual

  • Títol: És opcional. Permet posar un títol a la diapositiva, sigui el títol de la pròpia web (a la primera diapositiva) o un títol propi de la diapositiva. Ha de ser un text curt, ja que el cos de lletra és gran.
  • Subtítol: És opcional. El cos de lletra és més petit. No es mostra als dispositius mòbils.
  • Posició del text: Permet escollir com es mostra el títol: a baix (franja horitzontal), a la dreta o a l'esquerra (requadre a una banda o l'altra).

Botó 1 i Botó 2

Cada diapositiva pot tenir, opcionalment, fins a dos botons amb enllaços. Els enllaços poden ser a pàgines de la mateixa web, pàgines d'altres webs, documents PDF, formularis, vídeos de Youtube, etc.

Per enllaçar un vídeo, cal que estigui pujat a un canal de YouTube. El vídeo es reproduirà directament sense sortir de la web.
  • Text: Text que mostra el botó. Ha de ser clar i concís.
  • Enllaç: Enllaç al que es dirigirà l'usuari en clicar el botó. Si és a una web o document de la UPF, recorda que no es posa mai el domini (p.e., https://www.upf.edu/web/matricula/). Si és un recurs extern (formulari, vídeo) cal introduir la URL corresponent.
  • Disponible per aquest idioma. Ha d'estar sempre marcat. Només es canvia en casos molt excepcionals.

Exemples

  • El Slider s'utilitza per destacar diferents seccions de la web. Cada diapositiva es dirigeix a un perfil d'usuari diferent, al que s'ofereixen enllaços específics: Matrícula del grau
  • El Slider s'utilitza per destacar i enllaçar recursos externs. La primera diapositiva inclou un vídeo: MTG Music Technology Group