Swedish presentation about how to use SiteVision (Senselogic) to build prototypes. The presentation is also about how Skatteverket works actively with web standards on their website (www.skatteverket.se).

1. Prototyping & webbstandarder i SiteVision
08-05-21 Jens Wedin

2. Vad är och varför prototyping?
 En enkel klickbar prototyp
 Behöver inte ha grafisk form
 Ska gå ”snabbt” att bygga
 Använda till att diskutera internt i projektet
 Visa för beställare
 Diskutera med leverantör / IT
 Användartesta

3. Usecase
 Skatteverket 2.0
 Prototyp för att visa beställare
 Användartesta
 Få synpunkter från användare och medborgare
 Flera kunde jobba med samma prototyp
 Tre externa versioner (0.7, 0.8 & 1.0)
 prototyp.skatteverket.se

4. Webbstandarder i Sitevision

5. Vad och varför webbstandarder?
 Riktlinjer satta av bl.a. W3C & Verva
 Gängse best-practises
 Bättre tillgänglighet
 Bättre användbarhet
 Sökoptimering (SEO)
 Enklare & billigare underhåll
 Snabbare för användaren

6. Skatteverkets baby, Ines (SiteVision)
 CMS med fokus på distribuera publiceringen
 Agda 56 år, ska kunna skriva, lägga in bilder och
tabeller…
 …och det ska fortfarande följa webbstandarder
 Fokus på innehåll & nytta istället för teknik
 Enkel hantering för ovana användare

7. Mycket är bra
 Automatisk validering och verifiering av kod
 Innehåll, design & funktionalitet är separerad
 Mallar som utvecklas i SiteVision validerar
 Inbyggd länkhantering
 Bra hantering av olika webbstandarder (html / xhtml)
 Stöd i arbetet
 kortkommandon
 förstora texten
 visar endast det användaren behöver

8. Men inte allt…
 Innehåll, design & funktionalitet är inte helt separerad
 Ej semantiskt korrekt
 Massor av klasser
<span class=quot;normalquot;><br /></span>
 Span’its och div’its
<div style=quot;quot; id=quot;svid10.18e1b10334ebe8bc80004793quot;> <div id=
quot;svid12.5732cd2411150a57de58000107quot;>
 Långa adresser
http://skatteverket.se/fordigsomar/fordigsomar. 4.65fc817e1077c25b832800015903.html
 Stora automatgenererade css filer
border-color: #ffd700; padding-left: 60px; padding-right: 10px; background-color:
#fffced; background-image:url(/images/ 18.65fc817e1077c25b83280003532/icon-
warning.gif); background-position: 10px 15px;}.decorationInformationFelmeddelande
{border-style: solid; padding-bottom: 10px; margin-top: 10px; margin-bottom: 10px;
background-repeat: no-repeat; border-width: 1px; padding-top: 10px; border-color:
#c40707; padding-left: 60px; padding-right: 10px;

9. Usecase: Skatteverkets resa
 Konvertering av ca 8.000 html dokument
 Från ramar till tabeller till CSS
 Från handkodade DW dokument till ett CMS
 Knappt några rubriker (hx)
 Knappt några alt/title texter
 <b> istället för <strong>
 Dålig separation av innehåll, design och funktion

10. Det behövs mera!
 Riktlinjer och regler
 Inte bara hur det ser ut ut även standarder och
kodexempel
 skatteverket.se/styleguide

11. Eldsjälar och utbildning
 Eldsjälar gör skillnad
 Interna nätverk
 Verva har koll
 Utbilda redaktörer!

12. Vad gör Antrop?
 Kravställning inför och under utveckling
 Interaktionsdesign och informationsstruktur
 Formgivning
 Utvärderingar
Tack för mig!
Jens Wedin
jens.wedin@antrop.se