Kmom05: Bild

By , . Latest revision .

Kursutveckling pågår till kurs design v2

Kursstart hösten 2018.

Låt oss ägna ett kursmoment åt att testa runt med bilder och publicera dem på en webbplats.

Vi behöver vara medvetna om att bilder kan vara tunga att ladda och det vill vi hitta sätt att hantera. Hur tunga (stora) behöver bilder vara när de skall visas på en webbplats? Behöver de vara lika tunga på en desktop och på en mobil enhet?

Kan man ha olika bilder som visas på olika enheter? Det låter som en vettig idé men fungerar det i dagsläget?

Är det skillnad på foton och skärmdumpar? Ja, det är en fråga man skulle vilja ha svar på.

Om man vill beskära bilder, är det vettigt och hur gör man då? Vi har ju alltid fotoredigeringsprogram likt Gimp, men låt oss kika på alternativ som kan passa en webbprogrammerare.

Låt oss testa runt och placera och beskära dessa bilder för att visa att vi bemästrat området. Inklusive responsivitet med bilder via en LESS modul.

Innan du påbörjar kursmomentet så kan du ta en sväng ut i skogen, eller staden, ta med din kamera och fota loss lite. Så får du lite material att lägga upp på din me-sida.

Vi har många frågeställningar om bilder, men låt se om vi kan bringa klarhet i några av dem.

(Detta är instruktionen för kursmomentet och omfattar det som skall göras inom ramen för kursmomentet. Momentet omfattar cirka 20 studietimmar inklusive läsning, arbete med övningar och uppgifter, felsökning, problemlösning, redovisning och eftertanke. Läs igenom hela kursmomentet innan du börjar jobba. Om möjligt – planera och prioritera var du vill lägga tiden.)

#Läs & Studera

(ca: 8-10 studietimmar)

#Kurslitteratur

Läs följande:

  1. Läs i boken “The principles of Beautiful Web Design”.

    • Kap 5 Imagery

#Design med HTML5 och CSS3

  1. Läs igenom följande sektion i guiden “Design med HTML5 och CSS3”.

I sektionen Bilder använder vi olika tekniker för att skapa responsiva bilder och bilder som fungerar bra på högupplösta skärmar.

#Om responsivitet

Läs följande om responsivitet.

  1. Läs artikeln “Responsive images” som ger dig en insyn i ämnet bilder och responsiva webbplatser.

  2. Som extra läsning kring responsiva bilder rekommenderas AlistApart: Using Responsive Images (Now) (2015) som ger en ytterligare översyn av tekniker som kan användas.

#Webbplatsers laddningstid

Studera följande för att förbereda dig för uppgiften där du skall analysera webbplatsers laddningstid.

  1. Läs översiktligt igenom artikeln “Moz om Page Speed”.

  2. Kika snabbt på Googles “PageSpeed Insights Rules” för att snabba upp sidor.

#Lästips verktyg

Följande tips på verktyg är bra att ha för en webbprogrammerare. Verktygen handlar om att hantera bilder i olika form och på olika sätt.

  1. GIMP är en fri variant till bildbehandlingsprogram likt Photoshop.

  2. Inkscape är ett fritt program för att rita och hantera bilder i vektorgrafik såsom SVG.

  3. Ett bra snapshot-verktyg för skärmdumpar vill du integrera i din verktygslåda. Du vill ha ett verktyg där du enkelt kan ta en snapshot på hela eller delar av skärmen eller på en specifik applikation eller på innehållet i en webbsida. Det är smidigt om det är kopplat till ett enklare ritverktyg vilket gör det enkelt att rita på din snap. På Linux använder jag ett verktyg som heter Shutter.

  4. ImageMagick är ett verktyg som hjälper dig att analysera och konvertera bildfiler på kommandoraden. Verktygen går att installera på både Windows, Mac OS och Linux.

  5. Gå översiktligt igenom manualen för Cimage som är ett php-skript som beskär dina bilder utan behov av ett bildhanteringsverktyg. Cimage finns redan installerad i ditt ramverk. Manualen ger dig en insyn i hur du kan använda verktyget i den kommande uppgiften. Manualen ger också en översikt av olika begrepp och hantering kring bilder, bildformat, beskärning av bilder, optimering av filstorlekar och kvalitetsaspekter så se den som rent utbildningsmaterial kring bildhantering.

#Övningar & Uppgifter

(ca: 8-10 studietimmar)

#Uppgifter

Dessa uppgifter skall utföras och redovisas.

  1. Gör uppgiften “Utvärdera webbplatsers laddningstid och användbarhet”. Du skall skriva en rapport, ensilt eller i grupp.

  2. Gör uppgiften “Bygg ut ditt Anax Flat tema med stöd för bilder”. Du skall bygga en blogg som är full av bilder och på det sättet visa upp att du behärskar bildhanteringen med Cimage, FIGURE och LESS-modulen som stylar figure-elementet.

  1. Försäkra dig om att du har gjort dbwebb publishpure redovisa och taggat din inlämning med version 5.0.0 (eller högre) samt pushat repot inklusive taggarna till GitHub.

#Resultat & Redovisning

(ca: 1-2 studietimmar)

Läs instruktionen om hur du skall redovisa.

Se till att följande frågor besvaras i redovisningstexten.

  • Berätta kort om erfarenheterna med din undersökning av webbplatsers laddningstid.
  • Har du några funderingar kring Cimage och dess nytta och features?
  • Lyckades du uppnå ett bra sätt och en LESS-struktur för att jobba med dina bilder i webbplatsen?
  • Vad är din egen uppfattning kring bilder för webben, nedladdningstid och möjligheter med responsiva bilder samt allmänt kring bildbehandling för webben?
  • Vilken är din TIL för detta kmom?

#Revision history

  • 2018-10-19: (D, efo) Uppdatering med design guide.
  • 2018-06-08: (prel, mos) Nytt dokument inför uppdatering av kursen.
  • 2017-11-27: (C, mos) Genomgången inför ht17.
  • 2016-11-28: (B, mos) La till manualen om CImage som läsresurs.
  • 2016-11-15: (A, mos) Första utgåvan.

Document source.