bildhantering fÖr webben –bilder i drupal...•vi har ingen regel på gu som säger att vi måste...
TRANSCRIPT
BILDHANTERING FÖR WEBBEN – BILDER I DRUPAL
KOMMUNIKATIONSENHETEN 2019-10-14
SYFTE• Enhetliga rutiner kring bildhantering• Höja kunskapsnivån
• Få förståelse för upphovsrättsfrågor och GDPR• Få en attraktiv och tillgänglig webb
AGENDA
1. Bildredigeringsprogram2. Bilder i Drupal
3. Upphovsrätt 4. GDPR5. GU:s bildbank
6. Nya bilder7. Video och ljud
Seende
• Vi uppfattar först kontrast, rörelse och positioner.• Sen ser vi färg först, form och detaljer.
• Kontraster ger snabb kommunikation – men uttrycket blir ofta hårt• Med nyanser blir motivet mer rikare och mjukare – men
kommunicerar långsammare.
Färg
• Det är svårare att komma ihåg en bild i svartvitt.• I dagsljus ser vi lättast gult, orange och rött.
• Grönt, blått och violett tar längre tid att uppfatta• I västvärlden ser icke-kulörta färger ofta som mer ”seriösa”.
Form
• Grundformerna är tydliga och lätta att känna igen.• Runda former uppfattar vi snabbast
• Ju mer komplex en form är, desto långsammare blir kommunikationen.
• Vassa former känns aggressiva
Tips
• Undvik i allmänhet bildcollage.• Lägg bilder till vänster
• Använd inte bara versaler• Var sparsam med effekter - rörelser är ofta ansträngande att
förhålla sig till.
Varför bilder och film?
• Användare läser i snitt 60 % av en artikel• De flesta ser alla foton och film
• Unga vill hellre ha information via film istället för text
1. Bildredigeringsprogram
Vad behöver göras i bildredigeringsprogram?
Klippa bort oönskad del av bilden
Vad behöver göras i bildredigeringsprogram?
Rätt färgmodell (och färgprofil)
Vad behöver göras i bildredigeringsprogram?
Färgmodell: RGB för webben
CMYK – för tryck sRGB – för webben
Vad behöver göras i bildredigeringsprogram?
Skärpa
Vad behöver göras i bildredigeringsprogram?
Spara i jpg eller png
Vad behöver göras i bildredigeringsprogram?
Filnamn kan innehålla• Tecken i engelska alfabetet: a–z (inga å,ä,ö) • Siffror 0-9• Bindestreck ”-” för att sätta ihop ord i filnamn, inte understrykare _ ).
foto-pa-studenten-hanna.jpg.• Stora/små bokstäver
• Använd inte specialtecken: blanksteg/mellanslag, punkt, snedstreck m.fl.
För att Google ska kunna hitta filenOm du inte följer namnreglerna riskerar du att bilder inte syns vid publicering och att bilagor inte kan öppnas.
Tänk på: ett bra filnamn ökar träffmöjligheten hos sökmotorerna!
Vad behöver inte göras i bildredigeringsprogram?Beskära och ändra proportionerAnpassa till viss storlek
Proffsprogram – som kostar
Adobe Photoshop CCProffsig men dyr
Photoshop ElementsFörenklad version av Photoshop, billigare
LicenserKostnaden tas centraltNytt licensavtal nov 2018Chefen bestämmer vem som ska ha programmenlicenser.gu.se/sok-lokalt-licensansvarig
Gratisprogram
PC• Microsoft Office Picture Manager – beskära, ta bort röda ögon,
autokorrigering, exportera till jpg.
Mac och PC• GIMP – skärpa, beskära, retuschera, klarar raw-format.
gimp.org• PIXLR Editor – webbaserad editor, skärpa, beskära, retuschera,
klarar ej raw-fromat. Pixlr.com
• Photoshop Online Tools – webbaserad editor. Skärpa, beskära, ta bort röda ögon, retuschera, klarar ej raw-format. photoshop.com/tools?wf=editor
Gratisprogram
Mac• Bilder - beskära, ta bort röda ögon, retuschera, exportera till jpg,
klarar raw-format
• Förhandsgranskning – skärpa, beskära, retuschera, exportera till jpg, klarar raw-format
• Läs mer på licenser.gu.se/tips
Tips: så ser du bildinformation
• Photoshop:arkiv –filinformation
Mac: kringa+iPC: ctrl+i
2. Bilder i Drupal
Skillnad i Drupal (jämfört med InfoGlue)
- Behöver inte måttanpassa bilder för olika användningsområden- Bilderna autogenereras till bestämda mått
- Hitta bilder i Drupal: söka på nyckelord i en viss kategori- När man länkar till internsida som har en huvudbild plockas
bilden upp automatiskt
Svart toning för läsbar text
(genereras automatiskt)
Svart – event/nyheterBlå eller grönt – puffar utan bildGrå – sökresultatHallonröd – CTA (Call To Action)
Hantera bilder i Drupal• Under fliken ”bildbiliotek” - lista på alla upplagda bilder och därifrån
kan man också ladda upp och redigera bilder
Hantera bilder i Drupal• Bildbanken består av “Ytans bildbibliotek” och “Delat bildbibliotek”.
Som användare är man alltid aktiv i en webbyta och det är där bilder laddas upp.
Hantera bilder i Drupal• “Bildredaktörer” kan ladda upp bilder till det delade bildbiblioteket.
”Titel”
• Varför: för att kunna söka i Drupal• Alla tecken tillåtna• obligatoriskt
”Fotograf”
• Varför: för att fotografen har ideell rätt
• Ange fotografens namn• (om inte fotograf finns kan fältet
lämnas tomt)
• Syns under bilden på webben (inte i puffar)
”Nyckelord”
• Varför: För att kunna hitta bildeni Drupal
• Nyckelord för bilden separeras med kommatecken & mellanslag
• Titel, nyckelord och kategorier är sökbara i Drupal (ej fotograf)
• Man kan söka på nyckelord i en viss kategori
”Kategorier”
• Obligatoriskt• Kategorier att välja på i Drupal:
– Byggnader och miljöer– Evenemang– Fakultet– Forskning– Genre– Högtider, traditioner och historia– Institutioner– Ledning– Personer– Studenter– Studentmiljö
”Alternativ text och bildtext”
• Alt-text och bildtext läggs in separat för varje användningsområde – alltså inte i mediabiblioteket. Detta för att man kan ha behov av olika alt-texter och bildtexter för olika kontexter.
• Sätts för varje användning
”Alternativ text”
• Varför: för att sökmotorer, användare med funktionsnedsättning eller användare som har stängt av bildvisning i sin webbläsare ska förstå bildens betydelse.
• Bilder som förmedlar information ska ha alternativtext • Icke meningsbärande bilder ska inte ha alternativtext
Om det inte tillför något till innehållet.• Alt-texten ska vara beskrivande ”En grupp studenter i en
föreläsningssal”• Rekommendation: högst 12 ord. • Särskilt viktigt med bilder som är länkar.
Exempel på alternativ text
Olika bildformat på nya webben
• Sidan ”förhandsgranska” visar bilden i olika storlekar • Fokuspunkt väljs på bilden
• Bildformatet ändras automatiskt och tar hänsyn till fokuspunkten
Olika bildformat på nya webben
Vem kommer åt bilderna?
• Organisation och roll kommer att styra vem som kommer åt vilka bilder.
3. Upphovsrätt ”Den har jag hittat på Google. Den får man väl ta?”
Upphovsrätt
Ideell rätt• Går inte att överlåta• Upphovspersonen har alltid rätt att bli namngiven• Kränkande beskärning, förvanskning ej tillåten
Ekonomisk rätt• Kan överlåtas• Upphovsmannen bestämmer
till vem hen ska sälja rättigheter till hur bilden får användas vilket pris
Upphovsrätt
• Två sätt att köpa bilder:– specifikt ändamål t.ex. en broschyr– royaltyfritt, bilden kan användas hur många gånger man vill i olika
kanaler• Brott mot upphovsrättslagen kan ge skadestånd.
medarbetarportalen.gu.se/teachers-guide/copyrightbildupphovsratt.se
Man får inte fota upphovsskyddat material utan tillstånd: konstverk, föreläsningsmaterial…
4. GDPR
GDPR
• Dataskyddsförordningen/The General Data ProtectionRegulation)
• Ny lag 25 maj 2018 • Ersatte PUL (Personuppgiftslagen)• Behandling av personuppgifter (t.ex. foton och filmer) kräver
en rättslig grund (samtycke).• Man måste gallra – när personuppgifterna inte längre behövs.
• Böter/Sanktionsavgifter
Då behövs inte samtycke
Situationsbilder/miljöbilder• Mingel- och publikbilder, klassrumsbilder
• Där inte individen är i fokus • På GU och offentlig plats
• Om man vill bli borttagen så måste man själv kunna visa vem man är och att man är med på bilden
Artikel 11: Behandling som inte kräver identifiering
Situationsbild
Var försiktig med att beskära
Porträttbild
Att fota folksamlingar på GU
• Berätta vad bilderna ska användas till (berätta om GU:s verksamhet) och att vi kommer att lagra bilderna.
• Smyg inte in: väsnas med utrustning så att det inte råder någon tvekan om att de blir fotade.
• Visa var de som inte vill bli fotade kan sitta• Lämna kontaktuppgifter via t.ex. visitkort
Medarbetare
• Tillämpning av regler där man kan ha olika åsikter.• Vi har ingen regel på GU som säger att vi måste tillåta
fotografering.• Å andra sidan har vi smartphones och sociala medier.• Oavsett så har medarbetare rätt att kräva att ta bort bilder när
som helst.
När behövs skriftligt avtal?
• Forskning - särskilt vid forskning på känsliga personuppgifter.• Filmproduktioner - eftersom det är så kostsamt.
• Trycksaker - porträttbilder
Produktionsavtal
Det ska tydligt framgå vad som är syftet med filmen. En individ kan inte kräva att hindra att filmen visas när den är klar.
Det samma gäller att man inte kan tvingas dra in en trycksak.Däremot måste man ta bort bilden vid nytryck. Viktigt med rättighetsklarering.
Avtal
• Avtalet ska kunna bevisas juridiskt – rekommendationen är skriftligt samtycke.
• Linjechefen ansvarar för avtalen enligt delegationsordningen• Ett samtycke kan tas tillbaka när som helst.• Samtyckesavtal medarbetarportalen.gu.se/webbpublicering
• Mer info och inspelad föreläsning: medarbetarportalen.gu.se/dataskydd
5. Håll ordning på dina bilder med Bildbanken
Göteborgs universitets bildbank
bildbank.gu.seWebbgränssnitt uppdaterat jan -1914 000 bilder
Fördelar bildbanken vs GU Box/server
• Råkar inte deleta filen• Många kommer åt filerna
• Se när bilderna laddades upp – rensa ut• Söka på filnamn, fotograf, beskrivning och nyckelord• Dela bilder eller urval på sociala medier
• Maila ett urval bilder till en journalist• Filtrera på fotograferingsdatum, A-ö, ranking
Tre delar i bildbanken
1. Öppen bildbank - kan användas av alla både internt och externt
2. Dolda studentbilder - kan bara användas av dem som har adress och lösenord
3. Egna dolda bilder - om man vill att bara några få ska kunna använda fotona.
Studentbilder dold katalog
För att inte personer utanför GU ska använda fotona
bildbank.gu.seAnvändarnamn: studentbilderLösenord: student_xdold
Kontakt: [email protected]
Använd bilder rätt i organisationen
KE
Natfak
biologi och miljövetenskap
geovetenskaper fysik
Humfak
historiska studier
kulturvetenskaper
svenska språket
Organisatoriskt träd
med fakulteter och
Institutioner
Allmänna studentbilder
6. Nya bilder
Vad ska man tänka på?
Regler för visuell identitetGöteborgs universitets bildspråk är dokumentärt. Profilerande bilder skildrar verkligheten på universitet. Bilderna har människan i centrum och mångfald eftersträvas i bildmaterialet.
Vad ska man tänka på?
Vem är med på foton? – etnicitet, kön, ålder, funktionsnedsättning…Hur presenteras de?
Tänk hela webben
• Hur avbildas män och kvinnor?• Vem är aktiv/passiv?
• Vem får uppmärksamhet?
• 26% av GU:s studenter har utländsk bakgrund – hur ser bilderna ut?
ORGANISATIONSNAMN (ÄNDRA SIDHUVUD VIA FLIKEN INFOGA-SIDHUVUD/SIDFOT)
Gratis bildbanker
Flickr.comStort utbud Creative commons-licensierat material I licensen har upphovspersonen talat om vilka villkor som gäller för att få använda bilden, om du till exempel har rätt att bearbeta bilden eller använda den i kommersiellt syfte. flickr.com/creativecommons
PexelsLicensen för allt material på webbplatsen är Creative Commonsvilket innebär att upphovsperson inte behöver anges. En del som är gratis.www.pexels.com
Gratis bildbanker
PixabayEn del som är gratis.pixabay.com/sv
UnsplashStort utbudunsplash.com
Stock.xchngSöka i flera olika kategorier och ladda ner bilder med hög upplösning. Reglerna för användning är lätta att förstå och en länk till dessa finns vid varje bild. För icke kommersiellt bruk är det i stort sett fritt fram att använda bilderna. www.sxc.hu
Ta nya bilder?
Medieteknik Laila Östlund
750:-/h. offert med totalprisgu.se/medieteknik/film/[email protected]
Valfri fotograf – finns inga fotografer upphandlade
Tänk utzoomade bilder så att de kan användas på många olika ytor – stående och liggande
7. Video och ljud
Video och ljud
• Bädda in videor genom länk från GU-Play, YouTube, Vimeo• Tänk på att ladda upp en subtitle-fil
• Kan inte ladda upp filmer i Drupal• Ladda upp en startbild själv• Skriv in längden på filmen själv
• Beställ film via Medieteknik eller gör direktupphandling
GU Play eller Youtube?
Gu Play LagringstjänstMedieteknik lägger upp alla sina produktioner därVi äger materialet och har koll Alla som har ett x-konto kan ladda upp filmInga externa besökare på GU PlayJingel i början av film
YoutubeDet är där målgruppen finns. Bra om tittningarna adderas. Annonseringsmöjlighet
Man kan skapa spellistor – även doldaGU har en generell kanal som man kan få använda. Vissa fakulteter/institutioner har en egen. Kommer upp slumpmässig annan film efter (om man inte lägger in en spellista eller kod) – detta tittar man på inom webbprojektetmedarbetarportalen.gu.se/Kommunikation/film-gu-play
Eller kanske Vimeo?
+ bättre film-kvalitet (HD)+ lösenordsskydda filmer
+ Inga andra filmer spelas upp efter din film- Gratisversion har begränsat lagringsutrymme- Färre användare än Youtube
- Hittas inte lika bra av Google
Vad ska man välja?
• Om du vill ha många tittare – välj Youtube. • Om du vill ha så bra kvalitet som möjligt – välj Vimeo.
• Om du har en film som bara få utvalda ska se – välj GU Play
Glöm inte tillgängligheten
Nytt webbdirektiv23 september 2019: Tillgänglighetsanpassa nya webbplatser
23 september 2020: Tillgänglighetsanpassa befintliga webbplatser+syntolka och texta filmer (gäller inte retroaktivt)Erbjud text som alternativ till ljudinspelning som t.ex. pod
Film ska vara textad och syntolkad eller så kan man erbjuda alternativ till videoinspelningar(Undantag livesändningar – om de plockas bort efter 2 veckor)Syntolkning – beskriva sammanhanget kan vara viktigare än det som syns i bild
Ljud inbäddad på webbsidan
Möjlighet att samla ljudfiler t.ex. populärvetenskapliga poddarLänkar från t.ex. Soundcloud
Lathund bilder på webben
• Tänk representation av etnicitet/kön för hela webbplatsen• RGB-läge
• jpg eller png• Filnamn: a-z
Mer att läsa…
Strategi filmmedarbetarportalen.gu.se/Kommunikation/film-gu-playFilm om Drupalmedarbetarportalen.gu.se/projekt-process/aktuella-projekt/webbutveckling
KurserFoto, bildbehandling och webbmoderskeppet.se
digitalfotoforalla.se