STANDARDISERING & VALIDERING ORGANISATIONER World Wide Web Consortium (W3C) – markup languages & accessibility International Organization for Standardization.

Slides:



Advertisements
Liknande presentationer
Att tänka på då man har en muntlig presentation med ppt
Advertisements

Namn på tillfället (kan skrivas på två rader) Namn på den som presenterar Datum för tillfället.
Tillgänglighet till webben – en del i den nationella handlingsplanen 29 oktober 2002 Sören Hansson Tillgänglighetscentret vid Handikappombudsmannen.
Skribentutbildning SharePoint Publicera på nya intranätet
Strukturerad dokumentation och XML
Formulär Tänkte nu gå igenom vad ett formulär är och hur man kan skapa dem i Access.
Wikinggruppen Presentation av ”WIKING SMS” – Effektivisera din verksamhet.
Välkommen till internet för nybörjare
Klicka på Aktivera redigering i meddelandefältet,
Att söka och förvalta kunskap
HTML - grunder. Program •Html kan skrivas i anteckningar, eller vilket annat textbehandlingsprogram som helst. Mitt tips: Notepad ++ Notepad ++ •Grafiska.
II130V Konstruktion av webbsidor Välkommen till föreläsning 3 September 2007.
Andreas Cederbom Tillgänglighet i digitala lärplattformar Genomgång av dokumentationen.
XHTML.
En utvecklares bekännelser Daniel
FTP, HTTP, HTML, XML och XHTML
Mashups Per K, Vad är en mashup? • Mashup är en typ av webbapplikation som sammanställer information och funktionalitet från fler av varandra.
Publicera användbar information Erik Geijer tydligare.se Internetdagarna
Internet Juni 2013.
Att bygga en fungerande webbplats
Bilder och responsive webb Andreas Cederbom
ARKISTOLAITOS Arkivverket Projekt för förnyelse av webbplatsen.
XHTML 1 Designa din egen webbsida. Idag  Struktur och uppmärkning  Vad är (X)HTML?  Element, taggar och attribut  Validering.
Logga in i Fronter och klicka på:  Rum  Alla rum  Biblioteket  Projektarbetet En plats att börja på Här hittar du massor av råd och tips – följ länkarna!
Manual: Att skapa en ny sida. (Tryck på F5 för att se PP-presentationen)
DCV Idéskiss Design Jag tror att jag ska ha en mörk och stilren design på mitt DCV. Det ska finnas dynamisk funktionalitet där designen byts utan att sidan.
HEAD – HUVUDET I huvudet hittar du information om dokumentets titel, sökord, referenser till stildokument och annan information som normalt inte visas.
Programmeringteknik Webbdelen. HTML H yper T ext M arkup L anguage Märker upp sidans innehåll så att webbläsaren kan avgöra hur innehållet ska visas.
Källkritik på Internet
Möjligheter till arbete med hjälp av kognitivt stöd ?
Webbteknik lektion 2 Det handlar om stilmallar Per K, 2012.
Webben – intro Första föreläsningen i kursen Webbutveckling.
Introföreläsning CS Om publiceringssystem, lektion ett.
Databaser i B2KUNO Johan Eklund. Hur går jag vidare? Avancerade tillämpningar:  Analysera data  Generera information Utveckla följande färdigheter:
Grundkurs i Internetsökning
Lägga in ett PM – så här gör man…
En PowerPoint om PowerPoint
Källkritik på Internet - en presentation från Kolla källan
XSLT – en introduktion Digitalisering av kulturarvet.
Källor! Hur gör man egentligen?
Raka rör - så här kommunicerar vi på webben
XSLT – en introduktion Elektronisk publicering.
Introduktion till DITA
Stefan Andersson, Uppsala universitet 1 TestSök Presentation av ett BIBSAM-projekt.
Andreas Cederbom Valideringstjänster.
Informationssökningsprocessen:
Kommunikation och information för personer med funktionshinder
1. Var förberedd och ha ett tydligt budskap!
Vad är en bra webbplats? KANO Förtroendeingivande Effektiv Användbar Tillgänglig Ändamålsenlig Snabb och responsive Sökoptimerad Lättdelad Åtkomlig.
Källkritik på Internet
Webbutveckling Med fokus på grunder i html och css.
XHTML och något om CSS Produktion för tryckta Webbutveckling Kvarnbrink
Webbdesign Vittert vetande om webbdesign, SBe, PK
XHTML & CSS Introduktion Erik Nahkala
Vittert vetande om webbdesign
W EBBUTVECKLING, HT 2013 En webbplats Källa: pragmatisk.se.
Utvecklingsprocessen Webbutveckling. Utvecklingsprocessen Bli inte rädd för alla begrepp och alla verktyg man verkar behöva kunna. Du måste inte använda.
Välkommen till årets andra nätverksträff Sundsvall 30 maj, 2006 Funda Denizhan och Magnus Burell Verva, Nätverket 24-timmarswebben.
Mashups Per K, Vad är en mashup? Mashup är en typ av webbapplikation som sammanställer information och funktionalitet från fler av varandra.
XHTML – Dokumentets grundstruktur Body - head. Grundläggande dokument
1 2I1073 Föreläsning 1 KTH-MI Peter Mozelius XHTML, stilmallar och Javascript.
CSS del 1 Kvarnbrink I början… Bakgrunden var det enda man kunde byta färg på Allt var satt i Times Texten flödade över hela webbläsarfönstrets.
Textkodning 1 Dokumentrepresentation. Idag  Struktur och uppmärkning  Vad är (X)HTML?  Element, taggar och attribut  Standarder.
Informationsinfrastruktur Välkommen till ett samarbete för att effektivisera åtkomst till dokument mellan och inom organisationer.
Mikael Olsson SEO utbildning – Bilia Dag 2 - Onsite.
Webben – en sammanfattning Sista föreläsningen i kursen Produktion för tryckta medier och webb.
الانترنيت Internet.
Effektkarta för extern webbplats
Hej användare! Välkommen till nya mallar.
Hej användare! Välkommen till nya mallar.
Presentationens avskrift:

STANDARDISERING & VALIDERING ORGANISATIONER World Wide Web Consortium (W3C) – markup languages & accessibility International Organization for Standardization (ISO) – XML, HTML Ecma International – JavaScript, XML Standarder som gäller för webb XML, HTML, CSS, JavaScript, tillgänglighet, användbarhet etc.

TILLGÄNGLIGHET Tillgänglighet Graden med vilken man kan nå och använda en webbsajt med hjälp av valfri webbläsarteknologi. En tillgänglig webbplats använder sig av de senaste webbteknologierna, samtidigt som den tillgodoser behoven hos dem som har svårt för, eller inte kan använda, dessa teknologier. En tillgänglig webbplats är inte nödvändigtvis användbar! (Tillgänglighet handlar om flexibilitet.) Utvecklare måste tänka på att erbjuda mer än ett sätt att göra saker på en webbsajt, så att om en användare inte kan använda en metod finns andra alternativ till hands. WAI - Web Accessibility Initiative Knutet till World Wide Web Consortium (W3C), koordinerar ett globalt arbete för att öka tillgängligheten på webben inom fem primära arbetsområden: teknik, riktlinjer, verktyg, utbildning och "outreach", samt forskning och utveckling.

ANVÄNDBARHET Varför bryr vi oss om användbarhet?  hög användbarhet = optimal användarupplevelsen  snabbt och enkelt hitta den information som eftersöks  informationen ska vara enkel att förstå och använda  lämnar sajten med en känsla av tillfredställelse. Hög användbarhet gör människor mer effektiva och framgångsrika i de aktiviteter som webbplatsen erbjuder På ett intranät bli medarbetarna mer effektiva och framgångsrika i sitt arbete. När människor är nöjda talar de om det för andra. Med hög användbarhet når man potentiellt fler människor med sitt budskap. Effektiv & användbar e-handel på nätet = sälja snabbare och oftare (väljs framför sina konkurrenter). Med hög användbarhet ökar sannolikheten att affärsmålen nås.

ANVÄNDBARHET_problem  Användarna förstår inte menyn/navigationen  Användarna förstår inte texterna  Sajten har låg tillgänglighet/handikappanpassning.  För mycket information / grafik / bilder / länkar  Oförmåga att snabbt lokalisera information på en webbplats

ANVÄNDBARHET_lösningar  Användbarhetstest – (intervjuer, prototyper, enkäter) mot målgrupp  Riktlinjer för texter (skriva för webben), avgör om de är relevanta för er målgrupp.  Utgå från WAI och utforma enligt standarder för tillgänglighet.  Innehållsinventering baserat på loggfiler och användarundersökningar.  Skala bort det som är överflödigt

FUNKTIONSHINDER Syn Blinda, nedsatt syn, färgblindhet och synproblem relaterade till åldrande. Skärmläsare & skärmförstoring eller textförstoring i webbläsare. Hörsel Döva eller personer med nedsatt hörsel som behöver hörapparat. Rörlighet Fysiska handikapp. rörelsebegränsningar i överkroppen, finmotorik och koordinationsproblem. Kognitiva handikapp Människor med dyslexi och inlärningssvårigheter, mentala handikapp, läs- och skrivsvårigheter, språkproblem, novis datoranvändare.

FUNKTIONSHINDER_syn Verktyg för användare med synproblem Skärmläsare Jaws Firevox Specialanpassade webbläsare Webbie Webbläsare som enbart läser text Links Lynx

FUNKTIONSHINDER_syn ETIKETTER - LABELS Enter the name of your town: Promotional Code

FUNKTIONSHINDER_syn ALT & LONGDESC ATTRIBUT FÖR BILDER OBS! Använd alt=”” (tom beskrivning) vid bilder som inte har någon funktion eller vars innehåll redan finns representerat i en tillhörande text.

FUNKTIONSHINDER_färgblindhet 1. Trichromat: Normal färgsyn 2. Anomalous Trichromat: en av de tre färgreceptorerna felaktiga 3. Protanomaly: svårt att se rött. 4. Deuteranomaly: svårt att identifiera grönt. 5. Tritanomaly syn: svårt att identifiera blått. 6. Dichromat: använder enbart två av tre färgreceptorer, gröna och röda. 7. Protanopia: Kan inte se rött alls. 8. Deuteranopia: Kan inte se grönt alls 9. Tritanopia: Kan inte se blått alls. 10. Monochromat: Kan enbart uppfatta en färg. 8% av den manliga befolkningen, men endast 1% av den kvinnliga beräknas vara färgblinda

FUNKTIONSHINDER_färgblindhet Åtgärder Text som stödjer navigation ska vara hög kontrast Ex. Rubriker, underrubriker, bild och knapp text Använda aldrig grön text på gul bakgrund. Går inte läsa alls för personer med dichromatisk färgblindhet. Undvik att använda för mycket färg i själva huvudinnehållet. Använda mörk text på vit bakgrund vid längre textstycken. Använd verktyg för att kontrollera din webbplats för olika typer av färgblindhet. Ex.

FUNKTIONSHINDER_hörsel All information nödvändig för webbplatsen i textform. Visuell feedback. Textning för instruktionsfilmer alternativt kompletterande instruktion med text.

FUNKTIONSHINDER_rörlighet Navigationen viktig för de med rörlighetsproblem! Anvancerade ”utfällbara” menyer = stora svårigheter Tabindex tabindex attribut kan användas med,,,, och element Field 1 (first tab selection): Field 2 (third tab selection): Field 3 (second tab selection):

FUNKTIONSHINDER_kognition Undvik för mycket grafik, bilder och plottrig text i huvudinnehållet. Tydliga rubriker och navigering. Titlar/Rubriker Passande titel för varje sida För databaser, bloggar, arkiv ta med datum i titel/rubrik t.ex. BB-bilder fredag den 28 november 2008 Underkategorier, börja med namnet på webbplats sedan underkategori t.ex. Dustin.se/Datortillbehör/Monitorer

KODVALIDERING Varför validera sin kod? Enklare utveckling och underhåll: logisk HTML gör det enklare och snabbare att sätta sig in i kod som någon annan har skrivit. Kompatibilitet: korrekt kod minskar risken att framtida webbläsare inte kan hantera dokumenten. Snabbare nedladdning/uppritning: Mindre mängd HTML ger mindre filstorlekar. Bättre tillgänglighet: HTML där strukturen är separerad gör det enklare för skärmläsare och webbläsare i andra apparater än persondatorer att tolka innehållet. Bättre sökmotorplacering: Separationen av innehåll och presentation gör att innehållet upptar en större del av filen. Detta tillsammans med logisk HTML leder till bättre placering hos sökmotorer. Enklare anpassning: Ett dokument uppmärkt med logisk HTML kan enkelt anpassas för utskrift och olika typer av webbläsare, till exempel handdatorer och mobiltelefoner, bara genom att länka till en annan CSS-fil.

KODVALIDERING_doctype Högst upp i varje HTML/XHTML dokument DTD – Document type declaration <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" " <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" " <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " Ofullständig, inaktuell, eller till och med ingen DOCTYPE alls leder till “Quirks mode”. D.v.s webbläsaren tolkar din sida på ett bakåtkompatibelt sätt. Tolkar t.ex. CSS för att matcha det utseendet koden skulle haft i äldre versioner av webbläsaren.

KODVALIDERING_språk Ange vilket språk som används i dokumentet. (bl.a. viktigt för sökmotorer och skärmläsare) HTML 4 XHTML 1.0 XHTML 1.1 Flera språk i samma dokument Ändert sich's Wetter oder es bleibt wie's ist Cucumbers for the people. EX språk taggar Engelska: en Franska: fr Tyska: de Svenska: sv

KODVALIDERING_metadata METADATA Viktigt för sökmotor-optimering. (fungerar bara om nyckelord och beskrivning verkligen överenstämmer med innehållet)

LÄNKAR Användbarhet & Tillgänglighet //testa förgrunds- och bakgrundsfärger för färgblindhet Validering //Alla de nödvändiga valideringsverktygen //kontrollera tillgängligheten CSS, HTML, utseende //se din webbsida i olika webbläsarehttp://browsershots.org/ // webbutvecklingsverktyg för Firefox