Webbutveckling Sida 1 1034 Kapitel 16 17 2021

Webbutveckling Sida 1 10/34 - Kapitel 16 & 17 2021 -02 -21 1

Webbutveckling 1 – Kapitel 16 & 17 – Ljud, video & Tillgänglighet (v 1. 0) Varför ljud och video? • Ljud och video kan i många fall förmedla information mycket mer effektivt än löpande text. • Ljud och video kan inte indexeras av sökmotorer. Därför bör det också finnas en beskrivande text. • Ljud och video kan utesluta personer som är döva eller har nedsatt seende. Tänk på det! 2021 -02 -21 2

Webbutveckling 1 – Kapitel 16 & 17 – Ljud, video & Tillgänglighet (v 1. 0) Format • Ljud- och video filer består i princip av två saker, • Kodek(codec) • Kodek är en komponent som kodar och avkodar digitala dataflöden eller signaler på olika sätt. • Behållare(container) • Behållare används för att beskriva innehållet i filen. 2021 -02 -21 3

Webbutveckling 1 – Kapitel 16 & 17 – Ljud, video & Tillgänglighet (v 1. 0) Stöd för format • Inbyggt stöd – native support. • Inbyggt stöd i webbläsaren. Det krävs således inget extraprogram eller plugin för att visa mediet. • Operativsystemet • Inbyggt stöd i OS. Webbläsaren använder OS och det krävs således inget extraprogram eller plugin för att visa mediet. • Insticksprogram – plugins. • Webbläsare har inte inbyggt stöd utan kräver ett externt program för att visa media. Exempelvis Flash. 2021 -02 -21 4

Webbutveckling 1 – Kapitel 16 & 17 – Ljud, video & Tillgänglighet (v 1. 0) Exempel format • Se sida 262 i kurslitteraturen. • Inget format stöds av alla plattformar/webbläsare. 2021 -02 -21 5

Webbutveckling 1 – Kapitel 16 & 17 – Ljud, video & Tillgänglighet (v 1. 0) Komprimering • Strömmande media använder mycket bandbredd, därför komprimeras mediefiler. • Fungerar på samma sätt som vilken komprimering som helst, Datakomprimering eller datakompression är när data omkodas på ett sätt som gör att färre informationsbärande enheter (oftast bitar) behöver användas. Det finns ett flertal fall då detta är önskvärt. • Jämför med Win. Rar eller Winzip. 2021 -02 -21 6

Webbutveckling 1 – Kapitel 16 & 17 – Ljud, video & Tillgänglighet (v 1. 0) Komprimering • Komprimering gällande ljud- och videofiler kallas kodning och avkodning. • Filer kodas med lämpligt kodek och mediaspelaren avkodar detta kodek för uppspelning. • Komprimering är extremt beräkningsintensiv och vid stora filer kan det vara bra att nyttja en GPU som hjälper CPU att skala filen. 2021 -02 -21 7

Webbutveckling 1 – Kapitel 16 & 17 – Ljud, video & Tillgänglighet (v 1. 0) Exempel komprimering • https: //www. youtube. com/watch? v=EJce. SZYTt. Kc • Källfil, • 44 s, 1920 x 1080, 60 FPS, . mp 4, 251 MB. • Komprimerad fil(live på Youtube), • 44 s, 1920 x 1080, 60 FPS, mp 4, 19 MB. • Med en Internetanslutning på 10 Mbit/s tar det då, • 251 MB = 3 m 30 s. • 19 MB = 15 s. 2021 -02 -21 8

Webbutveckling 1 – Kapitel 16 & 17 – Ljud, video & Tillgänglighet (v 1. 0) Kodexempel 2021 -02 -21 9

Webbutveckling 1 – Kapitel 16 & 17 – Ljud, video & Tillgänglighet (v 1. 0) Kodexempel 2021 -02 -21 10

Webbutveckling 1 – Kapitel 16 & 17 – Ljud, video & Tillgänglighet (v 1. 0) _blank 2021 -02 -21 11

Webbutveckling 1 – Kapitel 16 & 17 – Ljud, video & Tillgänglighet (v 1. 0) Tillgänglighet • Möjlig att uppfatta – Information och komponenter i ett användargränssnitt bör presenteras för användare på sätt som de kan uppfatta. • Hanterbar – Komponenter i ett användargränssnitt och navigering bör vara hanterbara. • Begriplig – Information och hantering av användargränssnitt bör vara begripligt. • Robust – Innehåll bör vara robust nog för att kunna tolkas på ett pålitligt sätt av ett brett spektrum av olika användarprogram, inklusive hjälpmedel. 2021 -02 -21 12

Webbutveckling 1 – Kapitel 16 & 17 – Ljud, video & Tillgänglighet (v 1. 0) Tillgänglighet • Varför tillgänglighet? • För att så många som möjligt skall ta del av din information. • För att kunna vidareutveckla språket. • För att kunna skydda språket mot skadlig kod. • Hur? • • • 2021 -02 -21 Implementera talsyntes. Tänka på färgvalet. Semantisk HTML. CSS-baserad design. Korrekt skriven kod som följer W 3 C. 13

Webbutveckling 1 – Kapitel 16 & 17 – Ljud, video & Tillgänglighet (v 1. 0) Maximal räckvidd • En webbsida skall skriva med korrekt skriven kod så slipper du, • Skriva onödiga versioner av din webbsida. • Anpassa sidan till nya målgrupper. • Implementera talsyntes på en färdig webbplats. • Andra drar nytta av detta också, inklusive, • • 2021 -02 -21 Crawler-bottar. Många webbläsare i smartphones. Dyslektiker. Människor med lässvårigheter och synfel. 14

Webbutveckling 1 – Kapitel 16 & 17 – Ljud, video & Tillgänglighet (v 1. 0) Tips för tillgängligheten • Kontrast och färgval • Se till att din webbsida har tillräckligt hög kontrast. Se även till att färgskillnaderna är bra och inte alltför lik varandra. Färgblinda får i annat fall svårt att läsa texten. • Klickbara ytor • Se till att avstånden lämnar lite utrymme för de som är gammal och darrig på handen, eller för de som använder små enheter som smartphones. • Navigering via tangentbordet • Se till att din webbsida är utformad så att man kan navigera med hjälp av tangentbordet. Detta gynnar nästintill alla men främst dessa tre kategorier, • Blinda. • Användare med motoriska problem. • Erfarna användare som navigerar snabbare med tangentbordet än med musen. 2021 -02 -21 15

Webbutveckling 1 – Kapitel 16 & 17 – Ljud, video & Tillgänglighet (v 1. 0) Onödig tillgänglighet • Det finns även onödig tillgänglighet som vissa webbutvecklare envisas att använda, • Inbyggda funktioner för att justera teckenstorleken – helt onödigt. Använd zoomfunktionen istället. • Text-only versioner av webbsidor – Är egentligen bra men målgruppen är så enormt liten så att det extrajobbet som krävs är ofta inte värt mödan. • Serverbaserad talsyntes – De som behöver talsyntes har oftast bättre versioner installerade lokalt på sin dator. 2021 -02 -21 16

Webbutveckling 1 – Kapitel 16 & 17 – Ljud, video & Tillgänglighet (v 1. 0) Test av tillgänglighet • Det finns automatiska tjänster och program som kan testa tillgängligheten hos din webbsida. • Tänk dock på att sådana aldrig kan ersätta manuella tester. • Exempel Wave från Web. AIM http: //wave. webaim. org/ 2021 -02 -21 17

Webbutveckling 1 – Kapitel 16 & 17 – Ljud, video & Tillgänglighet (v 1. 0) ARIA - Accessible Rich Internet Applications • HTML är statisk och kan inte meddela användare om en sida uppdateras. Med hjälp av ARIA kan man göra det. • ARIA används genom att element ges ett role-attribut. • Dessa roller(eller landmarks) används för att uppdatera element för de som använder någon form av talsyntes. 2021 -02 -21 18

Webbutveckling 1 – Kapitel 16 & 17 – Ljud, video & Tillgänglighet (v 1. 0) _blank 2021 -02 -21 19

Webbutveckling 1 – Kapitel 16 & 17 – Ljud, video & Tillgänglighet (v 1. 0) Lösenordshantering • Dåliga lösenordspolicys, • • Använda samma lösenord på olika sidor och system. Inte använda lösenord alls. Enkla och/eller korta lösenord. Ha lösenordet uppskrivet på papper. • Bra lösenordpolicys, • • 2021 -02 -21 Använda olika lösenord på olika sidor och system. Använda komplexa lösenord. Byta lösenord ofta. Tvåvägsverifiering. 20

Webbutveckling 1 – Kapitel 16 & 17 – Ljud, video & Tillgänglighet (v 1. 0) Lösenordshantering • Komplexa lösenord, • Minst 10 tecken. • Stora och små bokstäver. • Skall innehålla specialtecken ( !”#¤%&/= ). • Bytas med jämna mellanrum • Exempel • Jv 24ånjh. Mi. Gohvd 8 m!Iäh 4åo 3 mg. 2021 -02 -21 21

Webbutveckling 1 – Kapitel 16 & 17 – Ljud, video & Tillgänglighet (v 1. 0) Phising • Nätfiske eller lösenordsfiske, eller phishing är en form av social manipulation och en olaglig metod att lura innehavare av bankkonton och andra elektroniska resurser att delge kreditkortsnummer, lösenord eller annan känslig information. • Nätfiske är oftast utformat som ett e-brev som ser ut att komma från en bank eller ett kreditkortsbolag, innehåller en uppmaning att logga in snarast möjligt, och en länk till en falsk webbsida med inloggningsformulär. 2021 -02 -21 22

Webbutveckling 1 – Kapitel 16 & 17 – Ljud, video & Tillgänglighet (v 1. 0) 2021 -02 -21 23

Webbutveckling 1 – Kapitel 16 & 17 – Ljud, video & Tillgänglighet (v 1. 0) 2021 -02 -21 24

Webbutveckling 1 – Kapitel 16 & 17 – Ljud, video & Tillgänglighet (v 1. 0) 2021 -02 -21 25

Webbutveckling 1 – Kapitel 16 & 17 – Ljud, video & Tillgänglighet (v 1. 0) 2021 -02 -21 26

Webbutveckling 1 – Kapitel 16 & 17 – Ljud, video & Tillgänglighet (v 1. 0) Uppgifter • Gör quiz till kapitel 16 & 17. • Uppgift, • Hur skiljer sig phising och social engineering åt? • Hur kan ett företag skydda sig mot phising? • Diskutera gärna i grupp! • Läs kapitel 16 & 17 och gör tillhörande övningar. 2021 -02 -21 27

Andreas Hagström IT-lärare andreas. hagstom@edu. sandviken. se CVL Sandviken - Teknik 2021 -02 -21 28