Cal posar imatges? Per què?

  • L'entorn digital permet incorporar diversos formats a més del text que amplien les possibilitats comunicatives. Els elements gràfics: fotos, bàners, vídeos, infografies, etc. sovint són molt més efectius a l'hora de comunicar que un text convencional.L'entorn digital és multimèdia
  • A la pantalla no llegim de manera ordenada sinó que escanegem el contingut tot cercant el més important. Les imatges ajuden a cridar l'atenció en els continguts que volem destacar.

Ara bé, tot s'hi val a l'hora d'utilitzar imatges que trobem a la xarxa? Quines i com les podem utilitzar?

Quines imatges puc utilitzar?

On trobar fotografies de la UPF?

Quines dimensions han de tenir les imatges?

Em cal un logotip o un bàner del meu producte/servei

Com crear icones

Vull posar un vídeo

Quines imatges puc utilitzar?

A la xarxa hi ha milers i milers d'imatges que ens poden servir per il·lustrar pàgines web. Les podem utilitzar lliurement? Com estem segurs que en fem un bon ús?Reconeixement-No comercial

La guia Imatges a la web i drets d'autor t’ofereix recursos per trobar imatges lliures de drets i alhora t’orienta sobre quines imatges pots utilitzar sense vulnerar els drets d’autor.

 

On trobar fotografies de la UPF?

El perfil de Flickr de la UPF conté:  Pati de l'edifici Jaume I - UPF

  • Fotos dels principals esdeveniments a la UPF
  • Fotos dels edificis

Aquestes imatges són propietat de la UPF per tant les podeu utilitzar per a webs de serveis i productes de la Universitat.

Passos a seguir:

1. Localitzeu la imatge que us cal i deseu-la al vostre ordinador. Si cal modificar-ne la mida o retallar-la utilitzeu el Microsoft Office Picture Manager.

2. Inseriu la imatge a la pàgina corresponent.

3. Identifiqueu la imatge amb: Nom imatge - UPF on diu Text alternatiu. A la imatge d'exemple és: Pati de l'edifici Jaume I - UPF.

Més recursos per trobar imatges de la UPF:

  • Instagram: abans d'utilitzar una foto, envieu un missatge a 

    [email protected] especificant la imatge que es vol utlitzar i esperar que ho validin.

  • Vídeos del canal Youtube de la UPF: seleccioneu el fotograma que us interessi i feu-ne una captura.

Quines dimensions han de tenir les imatges?

Abans de pujar una imatge per publicar-la a la web, convé adaptar-la a les mides més adequades a cada cas. Les imatges de grans dimensions alenteixen la càrrega de les pàgines i augmenten la despesa de dades quan s'obren des d'un dispositiu mòbil i, consegüentment, penalitzen el posicionament i la qualitat de la web.

Com a norma general, podem pensar en aquestes mides, aproximades (les podem comprovar des de l'Explorador de fitxers mirant les propietats):

  • Slider (mida màxima de qualsevol imatge de la web): 1300 x 450 píxels i un pes màxim entorn dels 200KB
  • Notícies, destacats, etc.: 450 x 300 píxels
  • Fotografies per a llistes de persones: 400 x 400 píxels
  • Altres imatges: aconsellem fer servir una mida entre 1,5 i 2 vegades superior a la mida en que es mostren per tal que en fer zoom en dispositius tàctils no perdin resolució.

Les imatges han d'estar en format JPG, PNG o GIF. També s'admeten imatges SVG (vectorials). 

Disposem de diferents eines per reduir i convertir les imatges abans de pujar-les a la web. Recomanem, per exemple, aquests recursos on-line:

Logotips i bàners

Els productes, serveis, programes, etc., de la UPF poden tenir una marca pròpia per poder-la utilitzar com a element de comunicació i de promoció. Aquesta marca pròpia ha de seguir uns criteris de denominació i gràfics específics. Per això si us cal un logotip o un bàner identificatiu del vostre servei, producte, grup, adreceu la vostra petició a Serveis Gràfics.

Com crear icones

Pots adreçar la petició a Serveis Gràfics, explicant quina mena d'icona necessites i quines característiques ha de tenir. A la guia d'Imatges a la web i drets d'autor hi ha alguns recursos per trobar icones.

També pots  fer servir una versió de Fontawsome, una galeria d'imatges fàcilment personalitzable que permet, sense tenir un nivell tècnic elevat, crear icones de manera fàcil i ràpida.

Com es fa servir?

1. Tria la icona a http://nickpiesco.github.io/alloy-ui-font-awesome-cheatsheet/ i copia el nom que té al costat.

2. Edita el contingut on vols afegir la icona i accedeix a codi font d'allà on vols incorporar-la.

3. Escriu el codi <i class=""></i> i entre les cometes el nom de la icona que has copiat de Fontawesome. Des de l'editor de text no es visualitzen aquestes icones, es visualitzen quan publiquem la pàgina.

4. Exemple:

<i class="icon-camera"></i>

5. Per donar mida i colors concrets, cal afegir una etiqueta style="color:#...; font-size:..."

Exemple d'imatge en diferents mides i colors:

<i class="icon-camera"></i>
<i class="icon-camera" style="color: #FF0000; font-size: 1.5em; padding:10px;"></i>
<i class="icon-camera" style="color: #339933; font-size: 2em; padding:10px;"></i>
<i class="icon-camera" style="color: #00CCFF; font-size: 2.5em; padding:10px;"></i>
<i class="icon-camera" style="color: #FFCC00; font-size: 3em; padding:10px;"></i>

Vull posar un vídeo

Per inserir un vídeo a la web, cal que estigui publicat al canal institucional de la UPF de Youtube.

1. Localitza el vídeo que vols publicar

2. Fes clic a Insereix i copia el codi que comença per <iframe...

3. Edita el codi font del contingut on el vols inserir i enganxa'l:

 

Què he de fer per crear un vídeo?