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

Per crear icones recomanem fer servir una versió de Fontawsome, una galeria d'imatges predefinides que permet, sense gaires coneixements tècnics, crear icones de manera fàcil i ràpida.

Com es fa servir?

1. Tria la icona a Alloy UI Font Awesome Cheatsheet i copia el nom que té al costat.

2. Edita el contingut on vols afegir la icona i accedeix al codi font.

3. Situa't allà on vols que aparegui i escriu el codi <i class="nom_icona"></i>, on nom_icona correspon al nom que has copiat de Fontawesome. Des de l'editor de text no es visualitzen aquestes icones, es visualitzen quan publiquem la pàgina.

4. Exemples: ,

<i class="icon-camera"></i> <i class="icon-exclamation-sign"></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>

Per icones més específiques, a la guia d'Imatges a la web i drets d'autor hi ha alguns recursos per trobar icones. També pots adreçar una sol·licitud a Serveis Gràfics, explicant quina mena d'icona necessites i quines característiques ha de tenir.

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?