Repetition webbteknik 2015-01-08 Per K. Selektorer metod 1 1. Elementreferens CSS-kod: p { font-family: georgia, serif; } HTML: Text skrivs i en brödtext.

En presentation över ämnet: "Repetition webbteknik 2015-01-08 Per K. Selektorer metod 1 1. Elementreferens CSS-kod: p { font-family: georgia, serif; } HTML: Text skrivs i en brödtext."— Presentationens avskrift:

1 Repetition webbteknik 2015-01-08 Per K

2 Selektorer metod 1 1. Elementreferens CSS-kod: p { font-family: georgia, serif; } HTML: Text skrivs i en brödtext

3 Selektorer – metod 2 2. Med id-attribut CSS-kod: #content { width: 600px; } HTML: ….

4 Selektorer – metod 3 3. Med klassattribut CSS-kod:.newsitem { width: 600px; } HTML: Här kommer en nyhet

5 Selektorer – metod 4 4. Nästling #header h1{ font-family: Verdana, serif; } HTML: Detta är rubriken som ändras

6 Selektorer – metod 5 5. Pseudoklasser CSS-kod: a:link { color: blue; } a:active { color: red; } a:visited { color: purple; } a:hover { color: red; text-decoration: underline; } HTML: Länken som ändras

7 Pseudoklasser Fungerar precis som vanliga CSS-klasser... men: Du kan inte själv tilldela dem! Är en sorts CSS-klasser som webbläsaren delar ut och tar bort automatiskt

8 Boxmodellen – gäller divar och alla “block level elements” padding margintop/left width height top/right

9 Positionering – det naturliga flödet Allt radar upp sig efter vänstermarginalen

10 Flytande objekt Får ett element att flytta sig till vänster (float: left) eller höger (float: right) i det inneslutande elementet Bra för figursatta bilder, anfanger, och en del oväntade saker Kombinera alltid med clear Se exemplet med Waldner, alla bilder har float och footern clear http://www.w3schools.com/css/css_class ification.asphttp://www.w3schools.com/css/css_class ification.asp

11 Absolut positionering (position: absolute) flyttar elementet till en “egen värld” och placerar det relativt till föräldraelementet. Relativ positionering (position: relative) får ett element att anta en position relativ till det läge elementet annars skulle ha haft Används till småsaker som loggor eller detaljer i menyer Se i headern i exemplet Waldner.html Positionering – absolut och relative

12 Det kan vara bra att veta vad som är referens. Normalt är det över högra hörnet i bodyn. Om man sätter position: relative på en behållare, en div, så blir den referens till inneslutna objekt. Dessa kan då positioneras med position:absolute. Visa exempel med en logga. Positionering – absolut och relative

13 Responsiv design (css3) En sida anpassas efter olika skärmstorlekar, dator, läsplatta eller mobiltelefon @media screen and (max-width: 240px) { body {}.widget-title { font-size: 14px; } } (observera slutparentesen man lägger alla ändringar mellan start och slutparentes)

14 Responsiv design (css3) Man hanterar storlekarna stegvis: @media screen and (max-width: 650px) { } @media screen and (max-width: 480px) { } @media screen and (max-width: 320px) { } @media screen and (max-width: 240px) { }

15 Responsiv design (css3) Man hanterar retina, högupplösta skärmar också: @media only screen and (-moz-min-device-pixel-ratio:1.5), only screen and (-o-min-device-pixel-ratio:3/2), only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-device-pixel-ratio:1.5) { body {} }

16 Att utveckla i WordPress Themes – vad är det? Ramverksteman – vad är det? Child Theme – vad är det? Child Theme – hur gör man? Widgets – vad är det? Hur lägger man ut dom? Menyer – hur ska man tänka där? Mallsidor – vad är det och hur hittar man dom? Jag hittar alla svar på sajten WordPress – Codex!

17 Tillgängligheten på webben 2015-01-08 Per K

18 Bakgrund WCAG på uppdrag av W3C Kom till efter sommar-OS i Sydney Se länk till BBC news: http://news.bbc.co.uk/2/hi/europe/1868566.stm Webbriktlinjer.se i Sverige – ett dokument om ca 100 sidor Andra nationer har egna regler

19 Principer Användbar Effektiv Förtroendeingivande Tekniskt oberoende Tillgänglig Åtkomlig över tid

20 Målgrupper Offentlig sektor Privat sektor

21 Teman – olika syften att läsa riktlinjerna Användbarhet och användarcentrerat arbetssätt Bevarande och gallring Inköpare och beställare Skriva texter Standarder för webbplatser Tillgänglighet

22 Vägledning 24-timmarswebben 2.0 Syfte med Webbriktlinjerna

23 Vägledning 24-timmarswebben 2.0 Syfte med Webbriktlinjerna Användbar Tillgänglig Förtroedeingivande Effektiv Robust, tekniskt oberoende

24 Vägledning 24-timmarswebben 2.0 Användbar Nytta med information Nytta med tjänster Användarens behov, alla situationer och sammanhang Innehåll som är relevant och lätt att hitta

25 Vägledning 24-timmarswebben 2.0 Tillgänglig Korrekt utformad Diskriminerar ingen Så många som möjligt kan - använda tjänsten - använda informationen Då blir webben mer effektiv

26 Vägledning 24-timmarswebben 2.0 Förtroendeingivande Skydda personlig integritet Ingen ska komma åt användarens information Korrekt och aktuell info Rätt nivå på säkerhetslösningar

27 Vägledning 24-timmarswebben 2.0 Effektiv E-tjänster Återanvänd information Anpassad till lagar och användarens behov

28 Vägledning 24-timmarswebben 2.0 Tekniskt oberoende Fungerar oavsett device (mobil, dator, platta…) Tekniken utvecklas hela tiden Utgå från standarder

29 Vägledning 24-timmarswebben 2.0 Åtkomlig över tid Arkivering Tänk på att det ska gå att använda i framtiden! Gallra!

30 Användbarhet och användarcenterat arbetssätt Analys Design Test Stämma av Resultat Läs mer ISO 13407, ISO 9241-11

31 Användbarhetsboken Fyra dörrar att passera 1.Tycka om sajten – rätt stil och utseende 2.Klarar av att läsa – språket är viktigt 3.Hitta – strukturen på sajten 4.Använda - Interaktionsdesignen

32 24-timmarswebbens riktlinjer Information om verksamheten - Översikt med kontaktinformation och med beskrivning av verksamheten - Lätt att hitta adress och telefonnummer - Senaste uppdateringar - Information på lättläst

33 24-timmarswebbens riktlinjer Design, navigering och upplägg - Konsekvent webbplats - Orientering och logik - Länk till startsida och namn på startsidan - Typografi - Kontraster

34 24-timmarswebbens riktlinjer Konstruktion - Personliga inställningar - Tillbakaknappen - Utskrifter

35 24-timmarswebbens riktlinjer Metadata och sökfunktion - Ge sidor titel - Sökfunktion - Metadata enligt t.ex. Dublin Core

36 24-timmarswebbens riktlinjer Texter – något om hur vi skriver Vi läser snabbt! Skriv enkelt och begripligt Det viktigaste först Rubriker som leder rätt FN:s konvention, förordning 2001:526 Myndighet för delaktighet Diskrimineringslagen EU-konvention EU-direktiv