Webbutveckling 1 Kapitel 8 9 2021 06 16
Webbutveckling 1 - Kapitel 8 & 9 2021 -06 -16 1
Webbutveckling 1 – Kapitel 8 & 9 – CSS & Färger/Bilder (v 1. 0) Webbsäkra färger • Förr kunde många datorer bara visa 256 färger. • Av dessa var 216 gemensamma mellan Unix, Mac och Windows. • Dessa 216 färger kallades webbsäkra färger för att de fungerade för alla. • Så är det inte idag – Webbsäkra färger är ett utdaterat begrepp. • http: //websafecolor. awardspace. com/ • Moderna datorer stödjer minst 16, 7 miljoner färger. 2021 -06 -16 2
Webbutveckling 1 – Kapitel 8 & 9 – CSS & Färger/Bilder (v 1. 0) Att ange färger • Hexadecimala färger - #228 B 22. • Namngivna färger - Forest. Green. • RGB() och RGBA() - (34, 139, 34, 1). • HSL() och HSLA() - (120° 61% 34%). 2021 -06 -16 3
Webbutveckling 1 – Kapitel 8 & 9 – CSS & Färger/Bilder (v 1. 0) Hexadecimala färger • Skrivs på ett hexadecimalt sätt med ett spann från 000000(svart) till FFFFFF(vit). • Skall skrivas med ett nummertecken, exempelvis #000000. • Delas upp i 3 par siffror från 0 -F, exempelvis röd är FF 0000. • Kan visa cirka 16, 5 miljoner färgkombinationer. 2021 -06 -16 4
Webbutveckling 1 – Kapitel 8 & 9 – CSS & Färger/Bilder (v 1. 0) Namngivna färger • Sedan CSS 2 kan vi istället välja att skriva med namngivna färger. • Exempelvis Red, som då har den hexadecimala koden FF 0000. • Det finns cirka 140 namngivna färger i dagsläget. • Det blir såklart enklare att komma ihåg. • Måste finnas specificerade i webbläsare. Det krävs alltså att webbläsare följer denna standard annars kommer inte färgen att visas korrekt. • Du kan inte använda lika många nyanser. 2021 -06 -16 5
Webbutveckling 1 – Kapitel 8 & 9 – CSS & Färger/Bilder (v 1. 0) RGBA • RGBA anges hexadecimalt med hjälp av RGB-färgmodellen • RGBA lägger till alpha-kanalen, som specifierar färgens genomskinlighet 2021 -06 -16 6
Webbutveckling 1 – Kapitel 8 & 9 – CSS & Färger/Bilder (v 1. 0) 2021 -06 -16 7
Webbutveckling 1 – Kapitel 8 & 9 – CSS & Färger/Bilder (v 1. 0) HSLA • HSLA anges hexadecimalt med hjälp av HSL-färgmodellen. • HSLA lägger till alpha-kanalen, som specificerar färgens genomskinlighet. • H = Hue(nyans) • S =Saturation(mättnad) • L = Lightness(ljushet) 2021 -06 -16 8
Webbutveckling 1 – Kapitel 8 & 9 – CSS & Färger/Bilder (v 1. 0) 2021 -06 -16 9
Webbutveckling 1 – Kapitel 8 & 9 – CSS & Färger/Bilder (v 1. 0) 2021 -06 -16 10
Webbutveckling 1 – Kapitel 8 & 9 – CSS & Färger/Bilder (v 1. 0) Bildformat för webben • JPEG - Använder destruktiv komprimering. 24 bits färguppsättning(16, 5 miljoner färgvariatoner). • PNG – Icke-destruktiv komprimering. 32 -bits färguppsättning(4, 3 miljarder färgvariationer). • GIF - Bitmapsformat, reducerar totalt antal färger. Kan animeras. • Web. M – Ersätter GIF. Bibehåller all data. Teknisk sätt en videofil. Har nativt stöd i alla webbläsare. • SVG – Vektorgrafik som skapas i webbläsaren. Kan köras som talsyntes. 2021 -06 -16 11
Webbutveckling 1 – Kapitel 8 & 9 – CSS & Färger/Bilder (v 1. 0) GIF vs Web. M • Totalt antal färger GIF – 256. • Totalt antal färger Web. M – I teorin obegränsad*. • Filstorlek GIF – 6. 3 MB. • Filstorlek Web. M - 311 k. B. • Animeringsmöjligheter GIF – Bara från bilder. • Animeringsmöjligheter Web. M – Bilder, filmer, flash, texter med mera. 2021 -06 -16 12
Webbutveckling 1 – Kapitel 8 & 9 – CSS & Färger/Bilder (v 1. 0) SVG • Scalable Vector Graphics. • Vektorgrafik-format för tvådimensionella bilder, stödjer animationer. • SVG-bilder och deras egenskaper definieras i XML-textfiler. SVG-bilder kan därför skapas och redigeras med vilken textredigerare som helst. • En SVG-bild kan skapas i ett ritprogram och sedan kan egenskaper för denna anges i XML. 2021 -06 -16 13
Webbutveckling 1 – Kapitel 8 & 9 – CSS & Färger/Bilder (v 1. 0) SVG exempel 2021 -06 -16 14
Webbutveckling 1 – Kapitel 8 & 9 – CSS & Färger/Bilder (v 1. 0) SVG exempel 2021 -06 -16 15
Webbutveckling 1 – Kapitel 8 & 9 – CSS & Färger/Bilder (v 1. 0) 2021 -06 -16 16
Webbutveckling 1 – Kapitel 8 & 9 – CSS & Färger/Bilder (v 1. 0) Användande av IT • “I think there is a world market for maybe five computers. ” - IBM Chairman Thomas Watson, 1943 • “No one will need more than 637 kb of memory for a personal computer. 640 K ought to be enough for anybody. ” - Bill Gates, founder of Microsoft, 1981 • “Two years from now, spam will be solved. ” - Bill Gates, World Economic Forum 2004 2021 -06 -16 17
Webbutveckling 1 – Kapitel 8 & 9 – CSS & Färger/Bilder (v 1. 0) Lagar och regler • Tryckfrihetsförordningen • Svensk författningssamling 1949: 105 • Upphovsrätten • Svensk författningssamling 1960: 729 • Personuppgiftslagen • Svensk författningssamling 1998: 204 2021 -06 -16 18
Webbutveckling 1 – Kapitel 8 & 9 – CSS & Färger/Bilder (v 1. 0) Tryckfrihetsförordningen & yttrandefriheten • Du kan fritt kan ge ut böcker, tidningar och publicera webbplatser. • Tryckfrihetsförordningen innehåller meddelarfrihet, rätt till fri informationsspridning och anonymitet samt förbud mot censur och efterforskning av källor. • Den innehåller även förbud mot förtal och kränkningar, däribland hets mot folkgrupp, sexuellt våld, landsförräderi och spioneri och andra sätt att skada staten är inte tillåtet. 2021 -06 -16 19
Webbutveckling 1 – Kapitel 8 & 9 – CSS & Färger/Bilder (v 1. 0) Upphovsrätten • Med upphovsrätt menas vem som är skapare till ett material – den person som då har ensamrätt att bestämma hur materialet får användas. • Upphovsrätten gäller fram till 70 år efter upphovsrättsinnehavarens död eller om materialet släppts under andra licensieringar – exempelvis Freeware och Shareware. • Det är upphovsmannens säregna sätt att uttrycka något som skyddas, inte de idéer eller fakta som verket kan innehålla. 2021 -06 -16 20
Webbutveckling 1 – Kapitel 8 & 9 – CSS & Färger/Bilder (v 1. 0) Personuppgiftslagen • PUL handlar om vilka uppgifter om personer som får sparas i olika typer av register. • Lagen säger att uppgifter som anses stötande eller kränkande inte får förekomma utan speciellt tillstånd. • Exempelvis uppgifter om sexuell läggning, politiska åsikter eller religionstillhörighet. • Journalister med tillstånd får publicera bilder på offentliga personer om det är i nyhetssyfte. På enskilda namngivna personer krävs ett godkännande. 2021 -06 -16 21
Webbutveckling 1 – Kapitel 8 & 9 – CSS & Färger/Bilder (v 1. 0) Sociala Medier • Vad är ett socialt nätverk? • Webbplatser och mobila appar där människor kan interagera i mänskliga sociala nätverk och, i motsats till traditionella medier, bidra med användargenererat innehåll. • Sociala medier kan innefatta Internetforum, sociala nätverkstjänster, bloggar, vloggar, wikier, poddradio och artikelkommentarer. • Sociala medier som teknik är exempel på Webb 2. 0. 2021 -06 -16 22
Webbutveckling 1 – Kapitel 8 & 9 – CSS & Färger/Bilder (v 1. 0) Sociala Medier • Internetforum • Sociala nätverkstjänster • Facebook, Google+, Linkedin • Blogg • Mikroblogg • Twitter • Vlogg – Videologg • Youtube • Wiki • Interaktiv sida som tillåter flera användare att skapa innehåll och underhålla det. 2021 -06 -16 23
Webbutveckling 1 – Kapitel 8 & 9 – CSS & Färger/Bilder (v 1. 0) Marknadsföring på Internet De vanligaste sätten för digital marknadsföring, • Annonsering på webbsidor • Annonsering på sökmotorer • Sociala Medier för marknadsföring • Marknadsföring via E-post 2021 -06 -16 24
Webbutveckling 1 – Kapitel 8 & 9 – CSS & Färger/Bilder (v 1. 0) Marknadsföring – På webbsidor • Annonsören hyr en plats, antingen mot klickkostnad eller mot en fast avgift. • En banner skapas och placeras på en webbplats. • Besökare går in på webbplatser, ser bannern och eventuellt klickar på den. • Svårt att styra vem som får se reklamen. 2021 -06 -16 25
Webbutveckling 1 – Kapitel 8 & 9 – CSS & Färger/Bilder (v 1. 0) Marknadsföring – På sökmotorer • Annonsören köper ett antal klick i förväg. • Sökmotorn placerar dessa annonser bland sökningsresultaten. • Fördelar är, • Kompetent personal • Ökar exponeringen • Annonsstyrning(vem, var, vilka sökord) • Kostnadskontroll(annonsering upphör automatiskt när budgeten är nådd) 2021 -06 -16 26
Webbutveckling 1 – Kapitel 8 & 9 – CSS & Färger/Bilder (v 1. 0) Marknadsföring – På Sociala Medier • Annonsören skapar en kanal på ett socialt nätverk. • Vitsen är att sedan få prenumeranter. Dessa kommer då per automatik få se nya uppdateringar/annonser. Fördelar är, • Det kostar ingenting förutom tid. Det går också att köpa annonsplatser. • Det är lätt att styra målgrupper. • Ökad exponering – en vän gillar ett inlägg och det syns i ditt flöde. • Interaktion – inte information. 2021 -06 -16 27
Webbutveckling 1 – Kapitel 8 & 9 – CSS & Färger/Bilder (v 1. 0) Marknadsföring – Via E-post • Annonsören utformar annons som sedan mailas ut. • Det går att köpa nya potentiella kunder, dvs register med e-postadresser. • Fördelar är, • Möjlighet att se hur många som läst mailet. • Möjlighet att se vilken målgrupp som klickat på länkarna. • Bör utformas korrekt & professionellt annars kan mottagare se det som spam och filtrera bort framtida mail. 2021 -06 -16 28
Webbutveckling 1 – Kapitel 8 & 9 – CSS & Färger/Bilder (v 1. 0) Uppgifter • Vilken form av digital marknadsföring tycker du är bäst och varför? Dela gärna in er i mindre grupper och diskutera! • Gör quiz till kapitel 8 & 9. • Läs kapitel 8 & 9 och gör tillhörande övningar. 2021 -06 -16 29
2021 -06 -16 30
- Slides: 30