Repetition webbteknik Per K

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

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

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

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

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

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

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

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

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 ification.asphttp:// ification.asp

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

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

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

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

Responsiv design (css3) Man hanterar retina, högupplösta skärmar 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 {} }

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!

Tillgängligheten på webben Per K

Bakgrund WCAG på uppdrag av W3C Kom till efter sommar-OS i Sydney Se länk till BBC news: Webbriktlinjer.se i Sverige – ett dokument om ca 100 sidor Andra nationer har egna regler

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

Målgrupper Offentlig sektor Privat sektor

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

Vägledning 24-timmarswebben 2.0 Syfte med Webbriktlinjerna

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

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

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

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

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

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

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

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

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

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

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

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

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

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