1. No category

Leveranskriterier
Version 1.0
Innehållsförteckning
1. Syfte
2. Gemensamma riktlinjer
2.1 Redaktionellt
2.2 Design
2.3 Interaktionsdesign
2.4 Tillgänglighet
2.5 Systemkrav
2.5.1 Browserstöd
2.5.2 Cookies
2.5.3. E­plikt
2.5.4 Säkerhet
2.6 Statistik
2.7 Leverans
2.8 Support och förvaltning
3. Kriterier för leverans av en inbäddad HTML/JS­produktion
3.1 Redaktionellt
3.2 Design
3.3 Interaktionsdesign
3.4 Tillgänglighet
3.5 Systemkrav
3.5.1 Säkerhet
3.5.2 Bibliotek
3.6 Statistik
3.7 Leverans
3.7.1 Generella krav på leverans
3.7.2 Tjänst utan beroende utanför svt.se
3.7.3 Tjänst med beroende utanför svt.se
3.8 Support och förvaltning
4. Kriterier för leverans av en App­produktion
4.1 Redaktionellt
4.2 Design
4.3 Interaktionsdesign
4.4 Tillgänglighet
4.5 Systemkrav
4.5.1 Säkerhet
4.6 Statistik
4.7 Leverans
4.8 Support och förvaltning
1. Syfte
Det här dokumentet beskriver SVT:s krav på externa produktioner.
Generella riktlinjer beskrivna i kapitel 2 skall följas av samtliga produktioner.
Specifika riktlinjer beskrivna i kapitel 3 och 4 skall följas av produktioner som faller under
respektive kategori.
2. Gemensamma riktlinjer
2.1 Redaktionellt
All video där SVT står som avsändare skall transkoderas och finnas tillgänglig på webbplatsen
svtplay.se. Dessa videos skall även kunna spelas med SVT:s befintliga videospelar­appar på
plattformarna Android och Windows Phone.
Video som är användargenererad skall vara spelbar i Flash, samt på plattformarna iOS, Android
och Windows Phone.
● Video finns på svtplay.
● Video visas i format 16:9.
2.2 Design
Design av innehåll och tjänster för SVT har som syfte att förbättra användarens upplevelse och
stärka SVT:s varumärke och relation till publiken. Riktlinjerna är avsedda som ett stöd för detta.
De ersätter inte förnuft och magkänsla. Vid omständigheter som inte kunnat förutses i riktlinjerna
BÖR designern se till det övergripande syftet och riktlinjernas andemening.
2.3 Interaktionsdesign
För att SVT:s interaktiva utbud ska vara konsekvent och kännas som en helhet ska SVT:s appar
och webbtjänster baseras på designmönster från SVT:s webbplatser.
Ett designmönster är en möjlig lösning på en designutmaning. Designmönster för
interaktionsdesign definierar beteende, beståndsdelar och funktionell form som tillsammans
löser designutmaningen.
Den webbplats produkten har närmast relation till kallar vi “produktens webbplats”. För
program­appar är detta oftast titelns programsida, ex http://www.svt.se/melodifestivalen. För en
teckenspråksapp för barn är det barnkanalen.se/teckenkul. För Vinterstudion­appen är det
svt.se/sport. Etcetera.
Fler detaljer.
1. Det har definierats vilken av SVT:s webbplatser produkten har närmast relation till
(“produktens webbplats”).
2. Produkten använder designmönster från “sin webbplats” närhelst det är möjligt. Detta
gäller bland annat för:
3.
4.
5.
6.
7.
○ textutseende och ­storlek
○ länkmarkering (färg, understrykning, fetstil etc)
○ bildformat (16:9, 2.39:1, 1:1 eller 3:4)
○ hur puffar är strukturerade
○ utveckling (“Läs mer”) och ihopfällning av artiklar
○ bildspel och grupper med klipp
○ formulärutseende och ­beteende
○ ikoner inklusive deras betydelse
○ datumformat
○ url­design
Helt unika utmaningar har lösts med design­mönster som inte finns på “produktens
webbplats”.
All video visas i 16:9.
På SVTs webbplatser ska all funktionalitet som finns för breda skärmar också vara
tillgängliga på smala. Besökare med en mobil enhet ska inte känna att de inte får del av
hela "sajten".
Alla klickbara objekt och länkar ska fungera bra med både tangentstyrning, pekdon och
touch.
BÖR: Produkten innehåller sektionen “Hjälp och Kontakt” / ”För föräldrar” vars syfte är att
skapa förtroende och hjälpa användaren. Undantag kan göras för inbäddade produkter
om produktens webbplats tillhandahåller sådan sektion.
2.4 Tillgänglighet
SVT har som mål att uppfylla riktlinjerna i WCAG 2.0. Detta innebär att:
1. Alla webbproduktioner ska följa SVT:s tillgänglighetsriktlinjer för HTML­produktioner
2. Leverantören ska redovisa vilka tillgänglighetstester som är gjorda och hur SVT kan göra
tester.
De huvudsakliga kraven är:
●
●
●
●
●
●
●
●
Färgkontrasten mellan text och bakgrund är över angivna gränsvärden
HTML och CSS validerar
Rubrikstrukturen på sidorna är logisk
Länkar är tydliga och självförklarande
Accesskeys för standardfunktioner finns
Stöd för tangentbordsnavigering finns
All grundfunktionalitet fungerar utan javascript
WAI aria används för att underlätta för skärmläsare
2.5 Systemkrav
Vi tillämpar Progressive enhancement och Responsive design.
Progressive enhancement går ut på att skriva tillgänglig, semantisk HTML som tillsammans med
standard­stylesheets (CSS 2) fungerar och ser bra ut i stort sett alla webbläsare. Sedan kan
lager av mer förädlad design och mer avancerade funktioner läggas på.
Responsive design innebär att webbsidans bilder, typografi och layout förändras för att passa
besökarens skärmstorlek med hjälp av flexibla bilder, elastiska kolumner och Media Queries i
CSS.
På SVT bygger vi “Mobile First”, det vill säga att layouten för de smalaste skärmarna skrivs först
och inte är definierad inom en Media Query. Sedan skalar vi upp layouten med hjälp av Media
Queries på större skärmar.
Stöd för Internet Explorer versioner lägre än 9 och inte mobil IEMobile ges tillsvidare med ett
särskilt stylesheet som innehåller samma stilar som i MQ­Large.
Exempel:
● Rundade hörn leverereras endast via CSS 3 för de webbläsare som stödjer detta.
● Ajax inladdningar sker med unobtrusive javascript från en vanlig hyperlänk.
● Layouten för de smalaste skärmarna skrivs först och är inte definierad inom en Media
Query.
● Animationer körs endast om stöd för detta finns i webbläsarens eventuella implemetation
av CSS3.
2.5.1 Browserstöd
Stödnivå 1
● All navigation och funktionalitet SKALL fungera och innehållet SKALL vara läsbart och
användbart
● Designen SKALL se bra ut, variationer i utseende mellan webbläsare BÖR minimeras.
● Alla javascript SKALL fungera som tänkt
Stödnivå 2
● All navigation och funktionalitet SKALL fungera och innehållet SKALL vara läsbart och
användbart
● Designen BÖR se bra ut, variationer i utseende BÖR ignoreras.
● Inget javascript får förstöra upplevelsen
Stödnivå 3
● All navigation och funktionalitet SKALL fungera och innehållet SKALL vara läsbart och
användbart
● Javascript är avslaget
Vi tillåter inte lösningar som bygger på att användare behöver ladda in plug­ins, som t.ex. chrome
frame.
Tabellen visar det man minst måste verifiera i browserstöd för de olika nivåerna.
Det är viktigt att verifiera olika skärmstorlekar. Detta säkerställs genom de olika tester som finns i
“Android, IOS och Windows phone” kolumnen. T.ex. genom att Android 4 verifieras i en tablet.
Webbläsare
Stödnivå
Internet
Explorer
Firefox
Safari (Mac)
Chrome
Android,
IOS,
Windows
Phone
Nivå 1
9
15+
5
22+
Android 4+
(tablet)
Iphone IOS
5+,
IPad IOS7,
Windows
phone 8
Nivå 2
8
­
­
­
Android 2.3
Nivå 3
7
­
­
­
­
2.5.2 Cookies
1. Så exakt path som möjligt SKALL användas för att undvika att cookies skickas med i
requester där den inte behövs. En cookie SKALL aldrig sättas på path ‘/’ för domän
‘svt.se’
2. Riktlinjer för cookies SKALL följas
3. Lagen om elektronisk kommunikation SKALL följas
2.5.3. E-plikt
SVT är skyldiga att leverera digitalt material till Kungliga biblioteket.
1. Leverera enligt Kungliga bibliotekets riktlinjer http://www.kb.se/plikt/Eplikt/
Kontakta Leveranscentrum om du vill ha mer information.
2.5.4 Säkerhet
SVT skall ha möjlighet att granska hela eller delar av ett projekt ur ett applikations­ och
informationssäkerhetsperspektiv.
2.6 Statistik
Endast specifika krav.
2.7 Leverans
1.
2.
3.
4.
5.
Produktionen SKALL vid leverans vara testad i de system som nämns under systemkrav.
Eventuella kända problem, buggar och avvikelser SKALL vara dokumenterade.
Beroenden till eventuella tredjepartsprodukter SKALL redovisas.
SVT SKALL ha möjlighet till kodgranskning.
Dokumentation SKALL finnas med beskrivning av den data som tjänsten lagrar på
användarens dator (cookies, localstorage etc.).
6. SVT:s API­nycklar för sociala medier (t.ex. Twitter, Facebook, Google maps) ska
användas.
2.8 Support och förvaltning
Följande gäller under hela produktens livscykel
1. Extern leverantör ansvarar för att bevaka återkoppling från användare.
2. Support ska finnas tillgänglig enligt beställd tillgänglighetsnivå.
3. Extern leverantör hanterar alla former av tekniska störningar ­ driftsproblem och buggar.
4. Dokumentation ska levereras med beskrivning av rutiner för att upptäcka tekniska
problem och buggar.
5. Eventuella automatiserade tester skall finnas i tillgängligt repository och vara körbara via
jenkins.
3. Kriterier för leverans av en inbäddad HTML/JS-produktion
3.1 Redaktionellt
Hela program SKALL visas på egen URL (i SVT Play eller på programsida), klipp kan bäddas in.
3.2 Design
Innehållet SKALL formges för att upplevas som en integrerad del av sidan det visas på. För
grafiska element och typer av innehåll som redan finns på SVTs sidor BÖR de befintliga sidorna
användas som visuell riktlinje. Nya typer av element BÖR formges i enlighet med befintliga.
3.3 Interaktionsdesign
1. Produkten visas alltid med sidhuvud och sidfot från “produktens webbplats”.
2. Hela program visas på egen sida på programsida eller i SVT Play.
3. Om produkten används i Barn­publikationen behöver den vanligen levereras i en specifik
HTML­struktur som hanterar JS­avsaknad och SEO. Kontakta barn­teamet för detaljer.
4. Video med SVT som avsändare visas i SVT:s spelare.
Fördjupande beskrivning
3.4 Tillgänglighet
Endast generella krav.
3.5 Systemkrav
3.5.1 Säkerhet
Applikationen SKALL vara byggd med OWASP Top 2013 i beaktande. Extra stor vikt skall läggas
vid “A3­Cross­Site Scripting (XSS)”.
https://www.owasp.org/index.php/Top_10_2013
3.5.2 Bibliotek
För att underlätta integrering av beställd kod och befintlig SVT­kod BÖR externa produktioner
använda samma externa kodbibliotek som vi. Detta underlättar även förvaltning av levererad kod.
Om något annat bibliotek eller ramverk ska användas SKALL detta godkännas av SVT.
1. SVT använder några färdiga javascript­bibliotek. Versionerna som nämns är
lägstaversioner.
a. jQuery 1.8.x (vi använder inte jQuery Mobile)
b. jQuery UI 1.8.10
c. Av SVT tillhandahållen utökad Modernizr
d. jQuote 0.9.7
e. MinPubSub
f. json2.js
g. En specialversion av History.js. Ska denna användas måste detta synkas mellan
parterna.
h. SoundManager 2.97a.20121104
3.6 Statistik
För att kunna lägga in statistik måste vi kunna få tillgång till några javascript­events, dessa
varierar från produktion till produktion och måste specas därefter. Vid spel kan det t.ex. vara antal
starter, omspel, hur många som klarat nivå 1 osv. Dessa olika event ska specas upp
gemensamt av SVT och producent i samband med projektstart.
Leverantören SKALL kontakta SVT leveranscentrum för att komma överens om vilken statistik
som behöver implementeras i det aktuella fallet.
3.7 Leverans
Om tjänsten ska driftas av SVT eller hos leverantör avgörs på följande sätt:
1. Tjänst utan beroenden utanför SVT t.ex. spel. Då ska hela tjänsten levereras och driftas
av SVT.
2. Tjänster med beroenden utanför SVT. Då driftas tjänsten i sin helhet av extern part.
Url:en i iframe pekar på extern maskin.
Med beroende menar vi sådana beroende som tjänsten inte fungerar utan.
3.7.1 Generella krav på leverans
1. Tjänsten ska ha en lösning byggd på HTML, JavaScript och CSS. Lösningen ska t.ex.
inte vara byggd med Flash.
2. Tjänsten ska fungera i en iframe­lösning för inbäddat material.
3.7.2 Tjänst utan beroende utanför svt.se
1. All kod som ska inkluderas på SVT:s sajt ska finnas tillgängligt i anvisat repository som
ett byggbart projekt.
2. Dokumentation för hur tjänsten byggs och anropas i en iframe.
3. Dokumenterade testfall för att verifiera funktion efter installation.
3.7.3 Tjänst med beroende utanför svt.se
1. Dokumentation för att anropa tjänsten från iframe.
3.8 Support och förvaltning
1. Leverantören ska på uppmaning av SVT göra release fyra gånger per år i syfte att
uppdatera externa bibliotek som har använts. Se Bibliotek.
2. I vissa lägen kräver SVT att tjänster måste uppdateras omedelbart. Anledning kan vara
säkerhetsproblem eller allvarligare brott mot riktlinjer. Applikationer som inte kan leverera
en uppdatering med önskade förändringar, kommer inaktiveras eller tas bort.
4. Kriterier för leverans av en App-produktion
4.1 Redaktionellt
1. Alla bilder och texter med SVT som avsändare finns tillgängliga på “appens webbplats”.
4.2 Design
Appar för program och tjänster BÖR i första hand uttrycka programmets eller tjänstens identitet.
I den mån en egen grafisk profil finns BÖR den prägla appen. I andra hand BÖR SVTs profil
tillämpas, och för element som inte omfattas av den BÖR etablerade designmönster för
respektive plattform tillämpas.
Programappar BÖR ha en start screen med programmets logotyp, en laddare och SVTs
logotyp.
Appikoner för Barnkanalen SKALL formges enligt mall och riktlinjer för appikoner, Barnkanalen.
Avvikelser från bör­krav SKALL motiveras och förankras hos beställare på SVT.
4.3 Interaktionsdesign
1. Appen ser ut och fungerar (nästan) likadant på alla plattformar.
2. Appen utnyttjar olika skärmstorlekars förutsättningar på ett “bra” sätt (dvs. har olika layout
på tablets och telefoner).
3. Innehåll i appens webb­vyer följer SVT:s riktlinjer för interaktionsdesign i inbäddade
produkter.
4. Video visas i native­spelare eller SVT:s spelarapp för Android / Windows Phone.
5. Appar ska inte använda sidhuvud, menysystem och sidfot från “sin webbplats”. Appar
med menysystem ska istället bygga menyer enligt riktlinjer för vart operativsystem.
6. Om designmönster saknas på “appens webbplats” byggs de enligt riktlinjer för vart
operationsystem plattforms­riktlinjer om sådana finns (Android design­patterns, Apple:
iOS Human Interface Guidelines, Microsoft: Windows Store­apps, Firefox OS). Helt unik
funktionalitet kan byggas enligt nyskapade design­mönster och ska fungera likadant på
alla plattformar.
7. Appens startskärm och app­ikon är byggd enligt SVT:s riktlinjer.
8. Landningssida för länkning till respektive plattforms marknadsplats skapas på
programsidan för det aktuella programmet.
Fördjupande beskrivning
4.4 Tillgänglighet
1. Följer Funka Nu:s riktlinjer för tillgängliga mobilgränssnitt.
2. Implementerar plattformspecifika API:er för tillgänglighet
3. Webb­vyer följer SVT:s tillgänglighetsriktlinjer för HTML­produktioner
4.5 Systemkrav
4.5.1 Säkerhet
Applikationen SKALL vara byggd med OWASP Mobile Security Project “Top Ten Mobile Risks” i
beaktande.
https://www.owasp.org/index.php/OWASP_Mobile_Security_Project#tab=Top_Ten_Mobile_Risk
s
4.6 Statistik
1. Vi använder appfigures för statistik om t.ex. antalet nedladdningar. Då vara appar
driftsätts med våra certifikat så fungerar detta utan att något behöver göras.
2. Om integration mot sociala medier görs ska statistik finnas för användning av dessa.
4.7 Leverans
1. Externa leverantör ansvarar för driftsättning av våra appar genom att använda av SVT
utfärdade certifikat.
4.8 Support och förvaltning
Endast generella krav