Tankar kring ämnena webbteknik och gränssnittsdesign Sida 1 av 27

Tankar kring ämnena

webbteknik och gränssnittsdesignLars Gunther, 2011

Innehåll

Utvecklingstrender...................................................................................................2Hur har webben förändrats sedan 1995? .............................................................2Yrkesroller ..........................................................................................................3Säkerhets och etiska frågor samt möjligheter......................................................3

Hur kurserna förhåller sig till varandra och till dagens ämnen................................6Vägen framåt.......................................................................................................6Ämnenas inbördes områden................................................................................7

Förväntad kritik......................................................................................................10”Tillgänglighet är för svårt”...............................................................................10”Det blir dyrt”....................................................................................................10”Namnet webbdesign är inarbetat”....................................................................10

Kommentar webbutveckling 1...............................................................................11Betygskriterier...................................................................................................11WaSP Interact som hjälp...................................................................................14

Anteckningar om webbutveckling 2.......................................................................15DOM-script........................................................................................................152D-grafik med SVG och/eller Canvas...............................................................153D-grafik med WebGL......................................................................................15

Webbserverprogrammering....................................................................................16Bristen på läromedel ett problem.......................................................................16Server Side Scripting 1......................................................................................16

Gränssnittsdesign....................................................................................................17Varianter............................................................................................................17

Referensgrupper.....................................................................................................19Web Standards Project Educational Task Force(WaSP-EduTF)..................................................................................................19Open Web Education Alliance (OWEA)...........................................................19Framstående svenska webbutvecklare...............................................................19Egen erfarenhet..................................................................................................21

Inofficiell kopia av bakgrundsmaterial för Skolverket.

Tankar kring ämnena webbteknik och gränssnittsdesign Sida 2 av 27

Utvecklingstrender

Hur har webben förändrats sedan 1995?

Den har ”vuxit upp”, etablerats och är inte längre ifrågasatt. Dess betydelse är svår att överskatta. Webbteknikförtjänar därför en stor plats i undervisningen. Webben omfattar nästan varje aspekt av tillvaron och berör varje del av dagens datorteknik. Ämnen som tidigare kunde bedrivas utan tanke på webben, som multimedia eller office-kunskap, har sedan många år ”webbifierats”. På 90-talet var webben ett alternativ bland många för att leverera innehåll. Idag är den i princip det enda alternativet, åtminstone för den yngre generationen.

Den är numera en ”läs och skriv-webb” med högt deltagande från surfaren, inte längre bara en ”läs-webb”. Wikipedia är viktigare än Nationalencykopedin eller Encarta . ”Gammelmedia” måsta anpassa sig, eller gå under.

Webben har blivit global, och såväl Asien, som Latinamerika och Afrika, blir viktigare, både som målgrupp, innehållsleverantörer och för teknikutvecklingen, även om Nordamerika och Europa troligen fortfarande behåller ett försprång under något decennium.

Internationalisering (I81N) och lokalisering (L10N) är väsentliga framgångskriterier. En fastlåsning vid det latinska alfabetet är snart en omöjlighet.

Ljud och rörlig bild utgör en stor del av webbens innehåll. Youtube är det tydligaste exemplet. Moderna mobiltelefoner påskyndar möjligheterna ytterligare.

Eftersom webbens betydelse är nomumental är frågan om tillgänglighet viktigare än någonsin. Ingen får stängas ute och för den hållningen talar såväl ekonomiska som etiska skäl!

Små aktörer agerar i kölvattnet av eller som komplement till de stora, genom att man utnyttjar deras webbtjänster. Design av den egna produktens API är ofta lika viktigt som den traditonella designen. Webbplatsen ska ofta kunna kommas åt genom såväl traditionella webbläsare som dedikerade klienter – vilka i sin tur byggs upp med en kombination av webbteknik och traditionell programmering.

Tekniskt är följande trender tydliga på webben

• En etablerad corpus av god praxis finns, som bl.a. betonar separation av logik, tillgänglighet, standarder och användbarhet. Principiellt kommer denna corpus förbli relativt intakt under överskådlig framtid, även om enskilda tekniker ändras. I Sverige finns det samlade riktlinjer i form av ”Vägledningen 24-timmarswebben”, vars riktlinjer lever vidare och utvecklas på http://eutveckling.se.

• Webbteknik används för tillämpningar som inte är traditionella webbplatser; dels för regelrätta applikationer på webben och dels blir den återanvänd inom traditionell mjukvaruutveckling för persondatorer och

Inofficiell kopia av bakgrundsmaterial för Skolverket.

Tankar kring ämnena webbteknik och gränssnittsdesign Sida 3 av 27

mobila enheter.

• Övergången från desktop till laptop är fullbordad och övergången därifrån till smarta mobiler är påbörjad. "Molnet" ersätter i allt större utsträckning lokala program och lokal datalagring. Webben är det sammahållande kittet i denna utveckling. Marc Weisers idé om ”ubiquitous computing” håller på att bli verklighet.

• Utvecklingstakten har höjts inför ett skifte från HTML 4 och CSS 2 till HTML5, CSS 3 och andra nya tekniker; JIT-kompilering av JavaScript, hårdvaruaccelererad grafik, 2D- och 3D-grafik, geolokalisering, etc. (Dessa nya tekniker ändrar inte på principerna för god praxis som nämnts i en tidigare punkt!)

• Möjligheten att simultant kunna utveckla för en mängd plattformar (hårdvaruarkitektur, operativsystem och formfaktor) är viktigare än någonsin. Likvärdig interaktion ska kunna ges till mobiltelefoner med 2 tums skärm som till användare med bildskärmar som täcker hela väggen. Användare kommer utöver tangentbord och mus interagera genom touch, gester i luften, sin röst eller kombinationer av dessa. När de tekniska möjligheterna i olika produkter blir mer jämlika, så kommer gränssnittet bli den viktigaste faktorn som skiljer dem åt.

Yrkesroller

På 90-talet gjordes webbplatser till stor del av personer som förväntades kunna varje del i produkten, vars titel ofta var "webmaster". Idag skiljer man ofta mellan front-end och back-end, och därinom finns det ytterligare specialiseringar och förgreningar. Speciellt tydligt är att det under 2000-talet vuxit fram en ny yrkeskategori, gränssnittsutvecklaren, (front-end engineer), vars jobb är att producera effektivt fungerande HTML, CSS och JavaScript + tilläggstekniker. Detta är inte en "webbdesigner" i traditionell mening och verktygen som används är sällan grafiska.

Genom nyttjandet av publiceringssystem (CMS:er) så krävs det inte djupgående teknisk kunskap för att producera innehållet på en webbplats. (Blondinbellas framgång beror inte på att hon kan knacka kod!) Framgångsrika webbplatser behöver dock tydliga strategier för ”content management” och det finns såväl konsulter inom området, som em mängd webb-redaktörer. Att kunna skriva för webben kräver kompetens och följer riktlinjer, som delvis skiljer sig från det som traditionellt lärts ut i språkämnena, precis som webbdesign till väsentliga delar skiljer sig från grafisk design. Webbdesign är därför ett eget yrkesområde, som styrs av principer som skiljer sig från den grafiska designen, i mångt och mycket. Webbdesign handlar mer om att skapa en total användarupplevelse (”user experience”/UX), där layout, färg och typsnitt är viktiga delar, men just delar och inte mer.

Inofficiell kopia av bakgrundsmaterial för Skolverket.

Tankar kring ämnena webbteknik och gränssnittsdesign Sida 4 av 27

Säkerhets och etiska frågor samt möjligheter

Ansvarslös och olaglig aktivitet på nätet

Enligt datainspektionen har 20 % av alla tonåringar drabbats av kränkningar på nätet. Nätmobbning är ett etablerat fenomen som i princip varje elevhälsoteam känner till alltför väl. Det är lätt att sprida lögner, men också sanningar som hör till den privata sfären. Jakten på uppmärksamhet eller ren obetänksamhet frestar många att publicera såväl text som bild, som de kanske senare ångrar bittert.

Virtuella miljöer och communities av olika slag är tillhåll för många vars syften är skumma. Sexuellt utnyttjande av minderåriga börjar ofta på nätet. Handel med droger, illegal försäljning av alkohol och tobak, avyttrande av stöldgods – allt sådant sker på nätet. ”Phishing” och andra former av bedrägerier är också problem som man måste känna till.

Att kunna bedöma sanningshalt och känna igen hot är väsentliga kompetenser.

Personlig integritet

GPS och mobilkameror, sociala media och andra webbtjänster leder till att en vi inte bara har ”digitala avtryck” på nätet, utan att våra steg kan kartläggas i kuslig detalj. Kombinerar vi detta med tekniker som just nu utvecklas för biometrisk identifikation, nya typer av sensorer – exempelvis möjligheten att via marksensorer unikt identifiera individer beroende på hur vi går – så finns det möjligheter till övervakning i en omfattning som får Orwell att framstå som en optimist.

Detta behöver diskuteras minst lika mycket som statens övervakning av oss genom exempelvis FRA.

Upphovsrätt

Nätet bygger till sin natur på att man delar, återanvänder och modifierar. Det är en plats för kreatörer såväl som plagiatörer – och det är sällan lätt att se var gränsen går mellan dessa.

Etablerad media har huvudsakligen reagerat genom åtgärder som bygger skydd runt deras produkter – vilket inte sällan minskar deras värde i användarens ögon. Att en film på nätet på grund av DRM inte kan flyttas mellan datorer, minskar köpbenägenheten hos filmbolagets kunder.

Samtidigt måste kulturarbete kunna existera också i franmtiden. Det finns ingen koncensus för hur dagens mediaindustri ska kunna förflyttas in i framtiden, men frågan kräver ordentlig diskussion. Också en inbiten ”pirat” kan bli besviken när hans alster dyker upp i sammanhang som inte alls var avsett från början.

Creative Commons och andra moderna uttryck för upphovsrätt kan hjälpa till att lösa många knutar, och eleverna bör göras medvetna om såväl frågeställningar som förslag på lösningar.

Inofficiell kopia av bakgrundsmaterial för Skolverket.

Tankar kring ämnena webbteknik och gränssnittsdesign Sida 5 av 27

Nätet som personligt uttrycksmedel

Genom nätet kan man finna likasinnade och förstående vänner. Man kan uttrycka sin personlighet – eller skapa en virtuell personlighet. Många som mobbats i klassen eller hemsamhället upplever nätet som en frihet, kanske till och med som en plattform för revansch.

Genom en blogg kan man få möjlighet att uttrycka sig utan att bli avbruten, till glädje för den som kanske är blyg eller långsam i repliken. Tekniska hjälpmedel gör att blinda kan ”läsa” dagstidningar och böcker, såväl som övrig information (om webbplatsen görs på ett tillgängligt sätt). Talsyntes kan hjälpa dyslektiker.

Nätet ger oss uttrycks- och informationsmöjligheter som ingen generation tidigare haft!

Nätet som politiskt medel

2004 rentvåddes George Bush från falska anklagelser om sin miltärtjänstgöring, framförda i TV:s vilktigaste nyhetsprogram (CBS) av det mest kända nyhetsankaret (Dan Rather), genom idogt arbete av bloggare. 2008 demonstrerade Barack Obama hur sociala medier kan användas för att såväl koordinera valkampanjen som att stärka sitt ”varumärke”, inte minst genom otaliga klipp på Youtube, där han hyllades på olika sätt.

Protesterna mot regimen i Iran når omvärlden, såväl som den egna befolkningen, genom nätet.

Opinionsbildning sker snart på nätet i minst lika stor utsträckning som via gammelmedia. Etablerade politiker och andra aktörer försöker ofta delta, men missar möjligheten genom att de inte fullt ut inser samspelets natur. (De betraktar nätet som en megafon, inte en telefon.) Detta till trots talar det mesta för att nätet blir det viktigaste av alla forum i framtidens politik.

Genom nätet kommer vi troligen få se helt nya former för demokrati växa fram.

Allt detta kräver medvetenhet; av dessa skäl har etiska frågor givits stor plats i kursplanerna.

Inofficiell kopia av bakgrundsmaterial för Skolverket.

Tankar kring ämnena webbteknik och gränssnittsdesign Sida 6 av 27

Vad behöver man kunna för att utveckla en webbplats idag?

Näär man bygger en webbplats idag, så ingår mängder av moment. Av denna uppräckning att döma kan man tro att det är en helt sekvensiell process, men i själva verket är den iterativ och till stor del parallell.

Projektledning/samordning

• Rollfördelning• Kommunikationsvägar• Projektmöten• Datorstöd

◦ Projekthanteringsplatser/programvara (typ basecamp)◦ Incidenthantering (typ Bugzilla)◦ Dokumentering (Ex. med en wiki)◦ Versionshantering (SVN, GIT, hg, Bitkeeper)

Förstudie

• Idé (Spåna, testa, bolla)• Marknadsundersökning, analys av konkurrenter• Vison• Målsättningar, framgångskriterier• Etc

Affärsplan

• Vad skall utvecklas? Användas? Av vem? Vad får det kosta? Etc. • Tidsaspekter • Juridiska aspekter • Policy för syndikering och aggregering • Behov av att anställa och utbilda • Etc

Innehållsanalys

• Texter • Bilder • Media • Policy för användargenererat material • Etc

Informationsarkitektur

• Webbplatsens struktur • Arbetsföde

Inofficiell kopia av bakgrundsmaterial för Skolverket.

Tankar kring ämnena webbteknik och gränssnittsdesign Sida 7 av 27

• Wireframes (skisser) • Grundläggande användbarhetsanalyser• Etc

Datautbyte

• Applikationsgränssnitt (API:er) , design och utprovning• Datautbytesformat (ex. JSON och XML) och metoder (ReST, SOAP, etc)• Autentisering, mekansimer och säkerhetskriterier• Mjukvarubibliotek för datautbyte : välja eller utveckla och tillhandahålla• Etc

Grafisk design/"branding"

• Sidlayout• Färgschemata• Typsnitt• Bilder• Annan media• Tillgänglighet• Användbarhet• Anpassning för olika formfaktorer (stora skärmar, netbooks, mobiler,

"tablets", etc)• "Photoshop comps" eller andra "mockups"• Testa, testa, testa!• Etc

"User Experience Design"

• Användarens arbetsflöde, analys och beskrivning◦ "(On site) Findability"◦ Visuella tips◦ Synligt/osynligt (vad "fälls ut" eller nås via undersidor)

• Sökfunktion? (Rättstavande, förslagsgivande, sorterande resultat efter relevans, etc)

• Inmatning av data, drag-och-släpp, widgets...• Visuell, hörbar och/eller taktil feedback• "Push" innehåll, distraktion eller hjälp?• Tillgänglighet• Konventioner: Följa/bryta mot?• Plattformarnas möjligheter och begränsningar? • Etc

Datalagring

• Lagring med relationsdatabas (SQL), i filsystemet eller med noSQL-teknik? Skalbarhet och stabilitet?

• Verifiering av dataintegritet

Inofficiell kopia av bakgrundsmaterial för Skolverket.

Tankar kring ämnena webbteknik och gränssnittsdesign Sida 8 av 27

• Säkerhet • Etc

Serverprogrammering

• Val av plattform, språk, "framework", CMS, etc.• Utveckling/programmering• Skalbarhet• Säkerhet• Etc

"Front End Engineering"

• Statisk prototyp (HTML, CSS)• Mallar (HTML, CSS + mallspråk)• Skript (ECMAScript + DOM)• Säkerhet• Tillgänglighet• Fart/skalbarhet• Testning mot olika webbläsare, åtgärder för att koda runt deras buggar och

andra brister• Validering och annan kontroll av kodkvalitet• Kodoptimering och komprimering, CSS-sprites, etc• Insticksprogram (ex. Flash)• Tredjepartskod• Etc

"Staging"/utprovning

• Buggfixning• Säkerhetstestning• Användbarhetstestning• Tillgänglighetstestning• Etc

Alternativa plattformar

• "Appar" till iPhone, Android, Maemo, Meego, S60, Windows mobile, Web OS

• Widgets till mobiler och desktop-OS • Feeds (RSS och/eller Atom) • Etc

Sökmotoroptimering

• Nyckelord i texterna? • Frontladdade texter? • Meta-information • Sitemap

Inofficiell kopia av bakgrundsmaterial för Skolverket.

Tankar kring ämnena webbteknik och gränssnittsdesign Sida 9 av 27

• robots.txt • Inkommande länkar? • Mikroformat • Etc

Server

• Egen eller webbhotell?• Säkerhet• Skalbarhet

◦ Lastbalansering, "sharding", CDN• Backup• Etc, etc.

Lansering

• Domänregistrering• Integrering med andra system (Twitter, Facebook...)• Marknadsgföring• Intern utbildning för drift• Etc

Drift

• Skötsel av infrastruktur• Uppdatering av innehåll• Buggfixar• Kompletteringar• Etc.

Utvärdering och uppföljning

• Inhämtning och utvärdering av statistik • Uppföljning mot ramgångskriterier • Revidering av framgångskriterier • Etc

Applikationerna kan se ut på många sätt: Separata webbplatser, applikationer inbyggda i andra applikationer (ex. en applikation som körs inuti Facebook), mobila applikationer osv. eller en mix därav.

Det finns ingen chans i världen att vi kan lära ut alla moment. I princip kan man skriva flera böcker om varje steg ovan utan att upprepa sig, men det är av stor vikt att eleverna förstår att dessa moment finns och att de utvecklar en förmåga att se sin egen insats som en delsträcka i ett stafettlopp. Det är önskvärt med en "överblick" och en förmåga att jobba i team och i projektform.

Inofficiell kopia av bakgrundsmaterial för Skolverket.

Tankar kring ämnena webbteknik och gränssnittsdesign Sida 10 av 27

Hur kurserna förhåller sig till varandra och till dagens ämnen

Dagens problem

Idag finns det en kurs som heter digitalt skapande, vars innehåll liknar ämnet multimedia. Skillnaden är mer en fråga om tradition. Digitalt skapande ligger på estetiska lärares bord, medan multimedia hamnar på IT-sidan. De enda reella skillnaderna är att multimediakursen handlar om att sammanfoga text, ljud och bild, samt att förse resultatet med ett mått av interaktivitet. Om man vill skulle man kunna säga att digitalt skapande idag utgör en delmängd av multimediakursen – så som det beskrivs i kursplanerna.

Multimediakursen å sin sida är skriven för ett tänkande runt Macromedia Director eller Encarta, med CD-skivan som tänkt plattform. Dagens enda relevanta plattform är webben, även om man inte nödvändigtvis gör en traditionell webbplats. Youtube-spelaren i iPhone är exempelvis ett paradexempel på webbteknik och inget annat.

Ämnet webbdesign är också gravt föråldrat och rekommenderas nu att delas upp i två delar, ett som fokuserar design och ett som fokuserar kod och annan teknik. Detta reflekterar verkligheten både i dagens undervisningssituation, där lärare väljer inriktning efter intresse och kompetens, och i dagens arbetsliv.

Slutligen finns det en kurs i databashantering, som i många läromedel blir en slags fördjupad officekunskap, där eleverna många gånger använder stor tid med att designa formulär och rapporter i MS Access, eller rent av i Excel. Databasutveckling med riktig klient/server modell blir nu i stället en del av webbserverprogrammering och samtidigt skapas möjligheter att inte titta på alternativ till traditionella relationsdatabaser (noSQL).

Vägen framåt

I bilden ovan synliggörs hur ämnena i dagens gymnasium relaterar till förslagen i Gy-11. Det särskiljande för multimedia kontra digitalt skapande (sammanfogning

Inofficiell kopia av bakgrundsmaterial för Skolverket.

Tankar kring ämnena webbteknik och gränssnittsdesign Sida 11 av 27

och interaktivitet) gär till webbutvecklingskursen. Resten till digitalt skapande och i någon mån gränssnittsdesign.

Lägg märke till att webbutveckling och webbserverprogrammering är kursnamn, inte ämnesnamn. De ryms båda under ämnet webbteknik.

Designaspekterna av multimedia och webbdesign går till gränssnittsdesign – som ju har sitt fokus på att göra attraktiva och användbara gränssnitt för just interaktion. Lägg märke till att ämnet gränssnittsdesign också är användbart för spelutveckling, gränssnitt på telefoner eller surfbrädor (slates) och annan mjukvaruutveckling. Troligen kommer det främst att användas som en ren webbdesignskurs (vilket också är tanken). Till skillnad från dagens webbdesign så fokuseras interaktionsdesignen tydligt. Det är alltså inte ett renodlat grafiskt designämne.

Teknikaspekterna av multimedia och webbdesign går till i webbutveckling. Detta är spindeln i nätet-kurser, där allt ska vävas samman.

De användbara delarna av databashantering, alltså de som fokuserar databasteori, klient/server, normalisering, SQL, etc, går till webbserverprogrammering. Resten slipper framtidens gymnasieelever helt!

Ämnenas inbördes områden

Ett av våra uppdrag som ämnesexperter är att klargöra hur de olika ämnena avgränsas och skiljer sig från varandra. Nästa bild klargör detta förhoppningsvis:

I denna bild så syns också den självklara överlappningen som måste finnas.

Digitalt skapande

Detta ämne handlar om att framställa digital bild, ljud och video. Det kan utgå från något inspelat/fotograferat eller skapas helt i datorn (digitalt måleri, animering, etc). Slutprodukten är enskilda bilder, animeringar, ljudklipp, etc. Kanske kan här också ingå ljud och ljuseffekter för konserter, TV-program eller som offentlig konst.

(Denna beskrivning gjordes innan ämnet skrevs ned.)

I det nuvarande förslaget till ämnresplan så talas det om ”plattformar för spridning av digitala produktioner”, vilket naturligtvis överlappar webbämnenas område.

Inofficiell kopia av bakgrundsmaterial för Skolverket.

Tankar kring ämnena webbteknik och gränssnittsdesign Sida 12 av 27

Gränssnittsdesign

Frågor om färgteori, komposition, typsnitt och liknande kommer överlappa till digitalt skapande. Dessutom kommer man att behöva anpassa bilder, ljud och video till sin produkt, så viss redigering finns också här. Men den övergripande frågan är nu hur användaren ska interagera mot det som visas. Det som visas ska kommunicera ett budskap eller en upplevelse. Här ställs frågan om hur text skrivs för att fungera på valt medium och hur den ska sammanfogas med bild, ljud och video. Vilka ”widgets” ska användas, vilken feedback ska användaren få på klick, knapptryck eller pek på skärmen. Det som skapas är en upplevelse och därför ingår också användbarhetstestning i ämnet.

Slutprodukten är en prototyp som ger en realistisk grund för bedömning av designen som helhet och en guide till implementering, exempelvis i form av en stilguide till webbutvecklaren. Bygger man en webbplats så är det OK att använda exempelvis Dreamweaver i grafiskt läge på den här kursen.

Webbutveckling

Fyra förkortningar summerar dessa kurser: (X)HTML, CSS, DOM och ECMAScript. I kurs 2 kan man fördjupa sig inom SVG, Canvas, WebGL, Ajax och HTML5 eller insticksprogram som Flash. Här ska alltså ett gränssnitt utvecklas från prototyp till användbar produkt. Här ska eleverna koda! Validerande (X)HTML, semantisk (X)HTML, effektiv CSS, icke-inkräktande (unobtrusive) DOM-skript, ”progressive enhancement”, etc. Allt för att åstadkomma applikationer som fungerar både på pyttesmå skärmar med touch-gränssnitt och gigantiska skärmar med konventionell muspekare plus tangentbord, tillgänglighet också för blinda, sökmotoroptimering, korta nedladdningstider och minimal latens.

Här skapas inga bilder, men vi ställer frågor om hur man kan optimera dem så att de skickas så effektivt som möjligt över nätet. När är JPEG bättre än PNG? Vilka tröskelvärden ska jag ha på mina JPEG-bilder? Vilka färger ska ingå i paletten på PNG-bilderna? Är SVG eller Canvas det bättre alternativet för en viss animering?

Sedan designern valt typsnitt ska webbutvecklaren få dem att funka. Ska de vara nedladdningsbara webbfonter? ska man använda någon ersättningsteknik?

I denna kurs ska det sväras över bristande funktionalitet i vissa webbläsare.

Eftersom tekniken återverkar på designen kommer det självklart finnas viss överlappning mot gränssnittsdesignen.

Slutprodukten i detta ämne kan vara en statisk webbplats, men den får gärna vara mallar för Wordpress eller en annan CMS.

Webbserverprogrammering

Hade namnet varit på engelska skulle denna kurs heta ”Server Side Scripting”. PHP och .NET med VB kommer troligen bli de två mest förekommande undervisningsvarianterna. JSP, Ruby on Rails, Python, JavaScript på servern, etc, är naturligtvis alternativ. I första kursen bygger eleven en enkel CMS, eller anpassar en befintlig CMS till egna önskemål. Det sistnämnda innebär inte att

Inofficiell kopia av bakgrundsmaterial för Skolverket.

Tankar kring ämnena webbteknik och gränssnittsdesign Sida 13 av 27

skriva mallar och CSS till Wordpress – det är ju Front End utvecklarens uppgift! För de lägre betygen tillåts det att eleven bygger dynamiska ”påhäng” som kontaktformulär och gästböcker på en i övrigt statisk webbplats.

I den andra kursen skapar eleven en mer multifunktionell CMS, som helst bör erbjuda en webbtjänst eller hämta sin egen information från en sådan.

Programmering

Förslaget till ämnesplan i programmering talar om att skapa mjukvara med ”användbara gränssnitt”. Här finns alltså en viss nödvändig överlappning.

När dessa gränssnitt skapas, så kan det mycket väl vara så att man använder deklarativ eller funktionell programmering, helt eller delvis med rena webbtekniker. Också där finns det alltså en överlappning. Likaså sker ju de mer avancerade inslagen i webbutvecklingen med hjälp av programmering. Vanligen med JavaScript, men ActionScript för Flash eller JavaFX kan också dyka upp här.

Att webbserverprogrammering överlappar med det allmänna programmerings-ämnet är självklart. Många moment kommer vara identiska, just för att man programmerar i båda ämnena! Skillnaden är att ämnet programmering fokuserar mer på allmän programmeringsteori, algoritmer och att den inte får fokusera på webbläsaren eller webbservern som enda körmiljö.

Den kanske mer dolda överlappningen mellan dessa två ämnen är att man i programmering 2 kan implementera ett API mot en webbtjänst, på hög nivå eller på socket-nivå.

Inofficiell kopia av bakgrundsmaterial för Skolverket.

Tankar kring ämnena webbteknik och gränssnittsdesign Sida 14 av 27

Förväntad kritik

”Tillgänglighet är för svårt”

Det finns en fördomsfull okunskap på området. Man ser tillgänglighet som något man infogar på webbplatsen efter att man är klart med allt annat, något som man gör som en extra börda.

I verkligheten är merarbetet mycket litet. Följer man standarderna och märker upp sin webbplats på rätt sätt, så är 90 % av jobbet gjort. En enkel komplettering kan sedan göras för de sista 10 procenten.

Tillgänglighet är till 90 % detsamma som sökmotoroptimering och anpassning till multipla plattformar. Det som gynnar blinda leder till god rankning på Google, vars sökrobot är ”blind”! Det som gynnar de som har motoriska svårigheter hjälper också fullt fungerande friska människor som surfar via mobilen. Många tester har gjorts som visar att tillgängliga sidor har en förbättrad för alla!

”Det blir dyrt”

Alla kurser kan genomföras med öppen källkodsverktyg. Man måste inte ha Dreamweaver, Photoshop, Final Cut Pro eller dyraste versionen av Visual Studio.

Kurserna kan genomföras helt i Linuxmiljö utan att lägga ett öre på licenspengar.

För att testa produkterna på olika plattformar kan eleverna hjälpa varandra. Det finns alltid någon som har en annan modell på sin mobiltelefon eller ett annat operativsystem på sin dator. Att en gymnasieskola har åtminstone en enda Linux-, Windows- och Mac OS dator torde inte medföra ett oöverstigeligt pris.

”Namnet webbdesign är inarbetat”

Ämnesnamnet gränssnittsdesign kanske inte är så lockande. Eventuellt skulle det kunna bytas mot ”interaktionsdesign”. Hade engelska varit tillåtet så skulle det kallats ”user experience design”. UX är ett eget fält inom dagens webbutveckling.

Problemet med att återanvända dagens namn är tvåfaldigt:

1. Det uppmuntrar till att fortsätta i gamla hjulspår, trots att ämnet förändrats ganska radikalt.

2. Det nya ämnet tillåter design av gränssnitt för all slags mjukvara och för olika slags datorsystem.

Inofficiell kopia av bakgrundsmaterial för Skolverket.

Tankar kring ämnena webbteknik och gränssnittsdesign Sida 15 av 27

Kommentar webbutveckling 1En mycket tydlig konsekvens av kursplanen är att Frontpage inte längre kan användas! Detta program dominerar ännu 2010 i förlagens förslag på läromedel trots att:

• Programmet inte uppdaterats på snart 10 år och att Microsoft själva rekommenderar mot dess användning.

• Programmet inte ens när det var nytt gav något gott resultat. Frontpage har aldrig genererat något annat än usel grötkod!

I detta ämne ska eleverna lära sig kod, inte använda WYSIWYG-program. Programvaror som har dubbelt läge, som Dreamweaver eller Expression Web, kan dock användas.

Den programvara som krävs, förutom webbläsare, är en editor som uppfyller följande krav:

• Radnumrering – annars blir det hopplöst att åtgärda fel på ”rad 121”.

• Syntax highlighting – pedagogiskt hjälpmedel, som dessutom hjälper utvecklaren undvika slarvfel.

• Kontroll över teckenkodningen, dvs. Möjlighet att manuellt ange ifall det ska vara Win-1232 eller UTF-8.

Det finns en uppsjö fria programvaror som med råge uppfyller dessa kriterier.

Andra verktyg som är gratis att använda ät följande tillägg till Firefox (liknande funktionalitet finns delvis för Opera eller Chrome):

• Web Developer

• Firebug , med ytterligare tillägg

◦ Code Burner (referens från SitePoint)

◦ Inline Code Finder (hittar ”obtrusive” JavaScript, finns också som stand alone tillägg)

◦ YSlow (se nedan)

◦ Page Speed (se nedan)

• FireFTP (för överföring till server)

• Fangs

• HTML Validator (inbyggd Tidy i view-source)

Betygskriterier

Här beskrivs hur betygskriterierna på A-nivå kan konkretiseras. Lägg märke till att dessa kommentarer ger exempel från år 2010. Det finns alternativa verktyg redan idag och det kommer naturligtvis ske en utveckling av verktygen.

Eleven beskriver utförligt och nyanserat med nyanserade

Inofficiell kopia av bakgrundsmaterial för Skolverket.

Tankar kring ämnena webbteknik och gränssnittsdesign Sida 16 av 27

omdömen webbens historia och påverkan på samhället samt de tekniker som webben bygger på.

Detta kan verifieras genom såväl ett enkelt prov, som genom gruppdiskussion.

Eleven följer en utförlig projektplan och värderar och motiverar med nyanserade omdömen eventuella avvikelser från ursprunglig planering. I sitt arbete dokumenterar eleven flera moment som utförs och värderar med enkla omdömen hur besluten anknyter till generella principer och testresultat.

Projektmetodik förutsätts alltså. Inga konstigheter här.

Eleven använder med säkerhet terminologi inom området.

Elever ska veta vad det är för skillnad på ”element” och ”taggar”. Om läraren säger ”använd ett title-attribut” så ska eleven inte behöva googla eller fråga någon annan. Eleven ska på samma sätt kunna förstå fraser som ”ett oavslutat deklarationsblock”, ”en mindre specifik selektor” eller ”elastisk layout”.

Eleven skapar kod som med gott resultat följer standarder och som omfattar flera tekniker för märkspråk och stilmallar.

Att följa standard innebär att den kod man skriver validerar och dessutom följer intentionen i standarderna, dvs. koden är semantisk och inte grötig. Tabell-layout är självklart förbjudet, men också ”divitis”, ”classitis” och ”spanmania”. Klasser ges namn beroende på funktion, inte utseende.

Det är enkelt att ha få fel om man visar upp ett litet register av element, attribut, selektorer, deklarationer, etc. Ordet ”tekniker” är svårt här. Inget bättre hittades. Det som avses är exempelvis:

• Förmågan att skapa såväl fast som elastisk layout; och att man gör det på olika sätt beroende på situationens krav (floats, display:table, layoutboxar, absolut positionering, etc. Innan dessa kursplaner blivit föråldrade kanske vi rent utav kan använda CSS 3 Template Layout Modulen!)

• Att man styr upp ett stort antal egenskaper via CSS.

• Att man visar upp löpande text, detaljbeskriven med olika semantiska element, olika slags bilder, dekorativa (genom CSS) och innehållsbärande (med vettiga alt-attribut) och infogar annan media.

• Att man infogar olika slags data, exempelvis tabeller, listor av olika slag, diagram.

• Att man använder ett brett register av formulärelement och attribut för att beskriva förväntad användardata. HTML5 gör detta till ett område där en elev verkligen kan glänsa!

• Media-queries är en annan teknik som ger duktiga elever chansen att visa

Inofficiell kopia av bakgrundsmaterial för Skolverket.

Tankar kring ämnena webbteknik och gränssnittsdesign Sida 17 av 27

sig på styva linan, speciellt så att de kan bygga webbplatser som fungerar på både gigantiska skärmar och mobiltelefoner.

I produkten infogar eleven diskreta dom-skript.

Vi kan inte använda begreppen ”unobtrusive DOM-scripting” eller ”progressive enhancement”, då engelska är förbjudet, men det är vad som avses. I denna kurs infogas skript, dvs. Det kan vara saker som en animation, formulärvalidering eller en ”accordion”, gjorda med Jquery. Eleven förväntas inte skriva skripten själv ännu.

Eleven bearbetar utförligt, via flera olika moment, text, bild och eventuell annan media, så att de blir anpassade för att fungera i produkten.

Konstnärlig bearbetning är tillåten (naturligtvis), men det som främst avses är färgkorrigering, skalning och beskärning, val av rätt format (JPEG, PNG, SVG, etc) och optimering av bilden med program som png-crush. Innan det finns ett gott stöd för ”resource packages”, så kan eleverna med fördel försöka sig på enkla CSS-sprites.

Eleven beskriver vanliga problem i en applikation som beror på felaktigt angiven teckenkodning, väljer och anger lämplig teckenkodning och beskriver hur enklare problem som relaterar till teckenkodningar hanteras.

Eleven kan redogöra för skillnaderna mellan US-ASCII, ISO-8859-familjen och dess ”bastardkusin” Win-1232, samt UTF-8. Eleven kan använda och förstå Unicode-begrepp som glyf, tecken, teckenkodning och font. Eleven vet hur MIME-deklarationen i HTTP-huvudet och charset meta-elementet i HTML-koden fungerar.

Eleven utvecklar en produkt som med gott resultat följer etablerad god praxis och kontrollerar detta både manuellt och med flera tester.

Utöver validering av HTML och CSS, så kan den automatiska testningen bestå av:

• ”Inspector” verktyget på Netrelations.

• JSLint

• HTML Tidy

Arbete pågår inom W3C (på mitt initiativ) att förse HTML-validatorn med en extra tydlig ”undervisningsprofil”, som kontrollerar att man följer god praxis och en tydlig kodningsstandard.

Det är en god idé att presentera dessa verktyg tidigt och låta eleverna dra nytta av dem under hela sitt arbete (”validate early, validate often”) i stället för att se dem som bedömningsverktyg enbart.

Inofficiell kopia av bakgrundsmaterial för Skolverket.

Tankar kring ämnena webbteknik och gränssnittsdesign Sida 18 av 27

Eleven testar produkten på flera plattformar, inklusive traditionella datorer och mobila enheter.

Eleven kollar hur webbplatsen fungerar på Mac, Windows och Linux. Typsnitt är exempel på en aspekt som fordrar att man har alla tre operativsystemen. Eleven testar den också i alla ledande webbläsare, nuvarande, föregående och kommande version; MSIE 6-9 (beta), Firefox 3.5-7 (beta), Opera 10.2/5, Chrome 3-5 och Safari 4.0 skulle exempelvis kunna krävas våren 2010. För framtidens gymnasieelever så slipper vi anpassa till Internet Explorer 6.0 – till allas enorma glädje!

Eleven kontrollerar funktionalitet med olika mobiltelefoner – man kan ju hjälpa varandra i klassen med detta – som har olika storlek på skärm och olika upplösning, och olika fabrikat på webbläsaren. Våren 2010 skulle man exempelvis kontrollera med Opera Mini + Mobile, iPhone, Android och S60.

Eleven optimerar bilder och andra mediafiler för snabb överföring och vidtar åtgärder för att reducera antalet överföringar per sida.

Kontrolleras exempelvis med YSlow eller Google Page Speed.

Eleven bygger med gott resultat en webbplats med god tillgänglighet och testar detta genom automatiserade tester och simuleringar. (Denna skrivning har ändrats av Skolverkets granskare, se nedan)

Ett exempel på en simulering är att ta en skärmdump, reducera bilden till svartvit och se om man fortfarande har god kontrast. Kontrast och färgavståndsanalys finns online. Fangs är ett tillägg till Firefox som simulerar JAWS, det i Sverige mest använda talsyntesprogrammet, vilket är ett annat exempel på simulering. Mac OS har inbyggd talsyntes och Linux har fri programvara för detta.

Eleven redogör för grundinnehållet i de lagar som berör publicering på webben, följer dessa lagar i sitt arbete och resonerar översiktligt kring webbrelaterade frågeställningar om etik och integritet.

Bakgrunden till detta har beskrivits ovan. En än mer fördjupad diskussion om detta finns i ämnet gränssnittdesign.

Eleven visar varsamhet vid hanteringen av lösenord eller annan känslig data. Eleven beskriver hur tredjepartskod kan innebära problem för produktens säkerhet. Eleven beskriver grundläggande säkerhetskriterier vid val av webbhotell.

Tredjepartskod kan vara skript för annonser (”self inflicted cross site scripting attack”, Douglas Crockford) eller kod som erhållits via webbtjänst. Självklart kan det också vara kod som man hittar på nätet och aningslöst återanvänder. Formulär kan används för att skapa injektionsattacker. Efter denna kurs ska man i vart fall känna till begrepp som XSS och SQL-injektion.

Inofficiell kopia av bakgrundsmaterial för Skolverket.

Tankar kring ämnena webbteknik och gränssnittsdesign Sida 19 av 27

Ett exempel på det sista är att varje användare har sin egen virtualiserade eller chroot-ade server eller att webbhotellet inte ligger kvar på föråldrade versioner av mjukvara (PHP 4...)

Optimering av bilder och annan media

Efter granskarnas genomgång har begreppet "genom flera moment" lagts till i betygskriterierna. Det kan dock behöva förklaras. Alla delar kan man kanske inte bearbeta i flera omgångar.

En PNG-bild kan man färgkorrigera, vitbalansjustera (gamma-kanalen), justera, modifiera, beskära, göra delvis transparent (alpha-kanalen), skala till optimal storlek och sedan köra genom png-crush för att optimera den som datastruktur.

En text kan man i princip bara redigera, och det är ju ett enda moment - eller? Däremot kan man lägga stor tankemöda (och utföra tester) på enskilda formuleringar. Skall det stå "ångra" eller "avbryt" på en knapp? Skall det stå "hem" eller "startsida" som länktext? Skall man av sökmotorskäl använda verb eller substantiv i rubriken? Skall enskilda sidor på webbplatsen presenteras med ett namn, med en rubrik eller med rubrik + ingress?

PÅ A+ nivå kan en eleve ge sig på skillnaden mellan device-pixlar och CSS-pixlar på en iPhone 4...

Andra anpassningar kan vara att göra CSS-sprites, minifiera skript och stilmallar eller göra resurspaket för att reducera antalet HTTP-anrop. Idag är detta spetsteknik, men inom några år kommer det troligen finnas enkla redskap som hjälper också rena nybörjare.

WaSP InterACT som hjälp

Kursen Web Design 1 på InterACT innehåller artiklar, kompetenser, övningar och annat som konkretiserar denna kurs. Där finns också moduler för enskilda inslag som kan användas i undervisningen.

InterACT har också i samarbete med förlaget New Riders i år (2010) givit ut boken ”InterACT with Web Standards” som täcker grundkunskaperna för kursen Webbutveckling 1, ger en mycket god bild av utvecklingsprocessen och går in på innehållsanalys och informationsarkitektur, vilket passar kursen gränssnittsdesign.

Den som vill få än mer kött på benen runt vårt (WaSP Education Task Force, se rubrik ”referensgrupper”) tänkande kan läsa detta i boken!

Inofficiell kopia av bakgrundsmaterial för Skolverket.

Tankar kring ämnena webbteknik och gränssnittsdesign Sida 20 av 27

Anteckningar om webbutveckling 2Den första kursen har ett givet huvudinnehåll: HTML och CSS. Dessa två tekniker är och kommer under all överskådlig framtid förbli fundamenten för all webbutveckling. Kursen webbutveckling 2 ger dock möjligheter till diversifiering. Här tecknas snabbt några varianter.

DOM-skript

Fördjupad kunskap om hur HTML, CSS och DOM fungerar tillsammans. Ajax och HTML5-utvidgningar av dagens DOM kan studeras. Slutresultatet kan vara ett eget litet bibliotek (”JQuery ultra light”) eller en Ajax-webbplats med höggradig interaktion och smakfulla effekter.

Naturligtvis behålls principerna om att skripten ska vara ”diskreta”.

Ajax-funktionalitet passar extra bra att lära sig, om man parallellt läser kursen webbserverprogrammering 1.

2D-grafik med SVG och/eller Canvas

Att bygga upp grafik med dessa tekniker och skapa ett visst mått av animering eller interaktion skulle kunna vara en slutprodukt.

Eleven kan bygga något lite enklare från grunden eller något mer avancerat med hjälp av kodbibliotek.

3D-grafik med WebGL

Att bygga upp grafik med denna teknik skulle kunna vara en slutprodukt. Interaktion i WebGL är (för närvarande) något mer avancerat än vad det är med Canvas och SVG, så troligen räcker det med enklare animerade effekter.

Flash eller Silverlight

Det är inte ovanligt att Flash används i dagens kurs Multimedia A. Under förutsättning att läromedel (och läraren) uppdateras för att göra produkterna tillgängliga – vilket det finns vissa möjligheter att göra också i Flash – så kan man fortsätta använda detta i undervisningen. En annan förutsättning är att produkten görs till en integrerad del av en webbplats. En tredje förutsättning är att det är en kurs i utveckling för webben och inte en kurs i hantering av Adobes (eller Microsofts) programvara.

Adobe AIR-widgets eller WRT widgets

I princip alla telefoner stödjer utveckling av ”appar” med ”web run time” (WRT). Med Adobe AIR kan man också göra desktop-applikationer med HTML, CSS och JavaScript och/eller Flash. Detta är ett alternativ, som gärna låter sig göras i samkörning med kursen programmering 2 och/eller webbserverprogrammering 2, som innehåller webbtjänster.

Inofficiell kopia av bakgrundsmaterial för Skolverket.

Tankar kring ämnena webbteknik och gränssnittsdesign Sida 21 av 27

WebbserverprogrammeringDetta ämne fokuserar på utveckling av dynamiska webbplatser. Det kan ges som en kurs i PHP ihop med MySQL. Det kan ges som en kurs i .NET eller JSP eller Python eller Ruby… Val skriptspråk eller databashanterare får skolorna själva göra.

Efter 100 poäng bör eleverna kunna utveckla en enkel CMS, t.ex. ett basalt bloggsystem. Eleven kan också utgå från ett befintligt ramverk och anpassa det. Erbjuder man kurs 2, så kan man titta vidare på XML och JSON, webbtjänster och MVC-arkitektur, liksom på fördjupad kunskap om databaser och andra tekniker för datalagring.

Redan från "Hello World" ska säkerhet betonas. Exempelvis ska eleven kunna filtrera indata och "escapa" utdata, så att alla vanliga försök till injektioner stoppas.

Kursen förutsätter såpass mycket kunskap i HTML och CSS att dessa moment inte ska behöva repeteras. En skola ska dock också här rent praktiskt kunna schema-lägga kursen parallellt med Webutveckling 1. I Gy -07 föreslogs att man inte skulle behöva några förkunskaper alls innan man började programmera på webbservern.

En väsentlig möjlighet som mina skrivningar erbjuder är att använda moderna alternativ till relationsdatabasen, det som slarvigt klumpas ihop under parollen NoSQL. Troligen kommer relationsdatabasen vara det vanligaste alternativet under de närmaste åren, men möjligheten att välja en annan lösning finns alltså. Begrepp som normalisering, atomicitet, transaktioner, etc, finns alltså inte med i kursplanen. Väljer man att använda relationsdatabaser, så är det naturligtvis så att dessa termer förväntas användas och förstås.

Namnet Internetprogrammering som föreslogs i Gy -07 utgår. Det är missvisande, eftersom det snarare betecknar socketprogrammering på TCP/IP-nivå.

Inofficiell kopia av bakgrundsmaterial för Skolverket.

Tankar kring ämnena webbteknik och gränssnittsdesign Sida 22 av 27

GränssnittsdesignÄmnet har bl.a. följande ledord:

Användbarhet

I slutändan finns det inget viktigare än att användaren kan uträtta sin uppgift, interagera på önskvärt sätt med andra användare eller finna sökt information.

Skönhet

Estetiskt tilltalande applikationer är förtroendeingivande och skapar trivsel. Undersökningar visar att en av anledningarna till att affärsapplikationer inte blir använda, utan bakom ryggen på ledningen ersatta av användarnas egna program, är att dessa är mer tilltalande estetiskt.

Tillgänglighet

Nya framsteg är ofta resultatet av forskning som ursprungligen gjordes för att hjälpa de som har funktionsnedsättningar, samtidigt kan de ironiskt nog också bli det som utestänger dessa. Man måste därför lära sig tänka på tillgängligheten från första början.

Gränssnittet omfattar såväl in-enheter som ut-enheter. Exempel: Såväl Playstation 3 som Nintendo Wii hade rörelsesensorer i sina kontroller, men det var Wii som utnyttjade dem till att skapa en ny slags spelupplevelse, och blev den överlägset mer sålda konsollen. I fråga om funktioner låg iPhone långt efter konkurrenterna, och gör så delvis än idag, men succé blev det likväl, tack vare att man omsatte touchskärmens möjligheter i ett användarvänligt och tilltalande gränssnitt, i stället för att bara låta den ersätta musen rakt upp och ner.

Varianter

Detta ämne är tänkt att vara vara oberoende av körmiljö och plattform. Gymnasieskolorna kan variera det utifrån tillgänglig lärarkompetens och skolans profil. Exempel på hur det kan genomföras:

1. Utveckling av prototyper till webbplatser.2. Utveckling av gränssnitt för dataspel. 3. Utveckling av gränssnitt för mobiltelefonapplikationer. 4. Utveckling av gränssnitt för det intelligenta rummet, hemmet, fabriken

eller staden.

Det kan låta på den första punkten som om dagens webbdesignämne trots allt lever kvar. Så här tänker jag mig skillnaderna, som är viktiga även om den ges enligt alternativ ett ovan:

• Tydligt fokus på användbarhet och tillgänglighet. Ingendera aspekten syns i dagens kursplan för webbdesign.

• Tydligt fokus på interaktion. Dagens kursplan talar om länkar och animeringar. Man riktigt ser framföre sig broschyrsidor med ett Flash-

Inofficiell kopia av bakgrundsmaterial för Skolverket.

Tankar kring ämnena webbteknik och gränssnittsdesign Sida 23 av 27

intro… • Klargörande om att eleven inte förväntas ta fram en fullt fungerande

webbplats, utan att det måste till arbete med kod och servertekniker också. (Dessa områden täcks upp av ämnena webbutveckling och webbprogrammering, i mitt förslag. Kuserna kan naturligtvis vävas in i varandra!)

• Klargörande om designelement eleven förväntas känna till och kunna använda. (Mindre snömos!)

• Klargörande om att produkten ska i slutändan fungera på en mängd olika slags enheter, med skärmar som varierar i storlek från någon tum, till flera meter — tabs, pads and boards (Mark Weiser). Redan 2011 kommer det kanske vara så att fler surfar från sin telefon än från en dator.

En positiv bieffekt är att eleven befrias från kravet på att gränssnittet ska funka i alla gamla och dåliga webbläsare, för det är utvecklarens ansvar, inte designerns!

När ämnet används som ”webbdesign” kan det göras med hjälp av Dreamweaver, Expression Web eller liknande. (Frontpage är fortfarande förbjudet. Det skräpprogrammet kan inte användas ens för det grafisk webbdesign längre. Så föråldrat är det.)

Principiellt vore det också möjligt att en elev utvecklade sin prototyp till största delen i Fireworks, Photoshop eller Gimp, och sedan lade på interaktivitet i form av en imagemap. I branschen förekommer det att designers lämnar av till utvecklare efter detta steg.

Tillsammans med prototypen ska det följa en stilguide. Det är detaljerade anvisningar om exempelvis färgval, typsnitt, samt boxars placering, marginaler, bredd och höjd, vilket kan anges med realtiva enheter som procent, villkoras beroende på skärmupplösning eller sättas till intervaller. Det ska också finnas beskrivningar om vad som ska hända när användaren klickar, trycker, roterar, skriver på tangentbordet, etc. (Bortsett från det uppenbara. En enkel länk till en annan sida behöver inte beskrivas, men partiell siduppdatering med Ajax eller en rullgardinsmeny behöver beskrivas.) I en tänkt kedja mellan designer och utvecklare, så ska allt framgå som utvecklaren behöver veta för att implementera produkten.

Prototypen ska också kunna presenteras för en tänkt (eller verklig) kund. I det läget är tekniska detaljer mindre väsentliga, utan då ligger fokus på hur designvalen motsvarar tänkt användarnytta och uppfyllelse av kundens målsättningar, samt hur de anknyter till principella ställningstaganden runt exempelvis tillgänglighet: ”Brödtexten skrivs med svart mot en ljust beige yta. De valda färgerna ger en tillräcklig kontrast, vilket vi prövat med verktyget på http://juicystudio.com/services/luminositycontrastratio.php”

Inofficiell kopia av bakgrundsmaterial för Skolverket.

Tankar kring ämnena webbteknik och gränssnittsdesign Sida 24 av 27

Del 2: ReferensgrupperÄmnena har utvecklats med tre referensgrupper:

Web Standards Project Educational Task Force(WaSP-EduTF)

Detta är en organisation med gott renommé som bland annat står bakom Acid2 och Acid3-testerna på nätet. EduTF är den numera mest aktiva grenen inom WaSP. Ämnesexperten är medlem av denna och tillsammans med dem och inbjudna experter från olika universitet och företag som Google, IBM och Yahoo, så arbetar WaSP-EduTF med att utveckla kursplaner och material för användning över hela världen.

Ämnesexperten har använt erfarenheter från detta arbete, samt bollat idéer med gruppen. Kontakten sköts med mejl och en konferens via Skype var 14 dag. WaSP-EduTF jobbar också med en bokserie om webbutveckling tillsammans med Peachpit. Skolverkets ämnesexpert är delförfattare till första boken, som släppts i maj, 2010.

http://www.webstandards.org/about/members/

http://interact.webstandards.org/

http://interactwithwebstandards.com/

Open Web Education Alliance (OWEA)

Detta är en grupp som håller på att bildas inom W3C, för att arbeta med utbildningsfrågor. Flera från WaSP-EduTF deltar i gruppen, som också har representanter från WoW (World Organization of Web masters), Google, Adobe, Opera, WestCiv, m.fl.

OWEA träffades i augusti 2009 i Chattanooga, Tennesse, och har möten via telefon var 14:e dag.

OBS!

OWEA hoppas att mitt arbete för Skolverket kan leda till att Sverige blir ett föregångsland och ett exempel som kan återanvändas inom webbundervisning på gymnasienivå över hela världen!

http://www.w3.org/2009/02/owea-xg-charter.html

Citat från delatagare i OWEA om kursplanerna

I've looked at the courses that are under consideration in Sweden, and wanted to express my enthusiastic support for the inclusion of web standards. To be truly universal in reach, web education must include usability, accessibility and standards. If these courses are implemented in Sweden, it will make Swedish web education a leading example for other countries.

Inofficiell kopia av bakgrundsmaterial för Skolverket.

Tankar kring ämnena webbteknik och gränssnittsdesign Sida 25 av 27

Virginia DeBolt, retired teacher, author and bloggerIn my opinion, this is a significant achievement. I particularly like the emphasis on web standards and setting a solid foundation for aspiring web professionals. Although I am not familiar with the education system in Sweden, it would appear you have taken a significant step forward to standardize curriculum. I make the assumption that schools will need to adopt this curriculum. I also make the assumption that schools adopting this curriculum will have resources to properly train those who will be teaching these materials. Overall, the course outlines are clear and concise. They focus on current accepted best practices.

Mark DuBois, World Organization of Web Masters

Framstående svenska webbutvecklare

Ämnesexperten har haft kontakt en grupp mycket välrenommerade svenska webbutvecklare, med vilka han bollat idéer och testat formuleringar. Han har träffat flera av dem i personliga möten och på ”Geek Meet” i Göteborg. (Det arbete de gjort har skett på ideell basis och på deras fritid.) Eftersom detta är en ad-hoc grupp och inte en organisation, så presenteras de här individuellt.

Robert Nyman

Robert har arbetat med webbutveckling sedan 1999, och har varit engagerad i arbete kring att sprida medvenhet om nyttan genom att förstå och stödja öppna standarder. Hans favoritområden är HTML, CSS och JavaScript, och han skriver och håller presentationer om dessa ämnen. Robert har utsetts av tidningen Computer Sweden till en av Sveriges 100 bästa mjukvaruutvecklare. Rankad som nummer 19 kom han allra högst av alla som jobbar med gränssnitt. Bloggar på robertnyman.com och kallar sig robertnyman på Twitter.

Roger Johansson

Gränssnittsutvecklare inriktad på webbstandarder och tillgänglighet. Har jobbat i branschen sedan mitten av 90-talet och jobbar nu på NetRelations. Bloggar om gränssnittsutveckling på 456bereastreet.com. Roger fanns också med på Computer Swedens lista över Sveriges 100 bästa mjukvaruutvecklare och han är en av författarna till Vägledningen 24-timmarswebben.

Tommy Olsson

Tommy har jobbat i 15 år som systemutvecklare och konsult med inriktning mot grafiska användargränssnitt och Oracledatabaser. Är sedan 2004 webmaster (numera även webbkoordinator) på Bolagsverket. Han driver bloggen autisticcuckoo sedan 2004 om webbstandarder och tillgänglighet och författare till två böcker: The Ultimate CSS Reference (med Paul O'Brien) utgiven på SitePoint, där Tommy också ofta medverkar i artiklar och forum som ämnesexpert och Max räckvidd med HTML och CSS. Också

Inofficiell kopia av bakgrundsmaterial för Skolverket.

Tankar kring ämnena webbteknik och gränssnittsdesign Sida 26 av 27

Tommy har deltagit i arbetet med Vägledningen 24-timmarswebben.

Peter Krantz

Peter har lång erfarenhet av att arbeta med tillgänglighet och användbarhet för webbapplikationer, offentliga webbtjänster och öppna dataformat. Peter är en av författarna till Vägledningen 24-timmarswebben. Han jobbar numera i E-delagationen och driver på fritiden webbplatserna eutveckling.se och opengov.se. Peter finns på Twitter under namnet peterkz_swe.

Erik Dahlström

Erik är anställd som utvecklare av Opera, och sysslar huvudsakligen med programmering i C++ för en del av det som utgör kärnan i webbläsaren Opera. Erik är co-chair för W3C:s SVG-arbetsgrupp, som arbetar på denna standard för skalbar vektorgrafik. Arbetar dessutom med webbutveckling i SVG, blandat med övriga webbtekniker såsom HTML, CSS och Javascript. erikdahlstrom på Twitter.

Simon Pieters

Började som webbutvecklare på hobby-nivå. Intresseret för webbstandarder ledde till att han involverades i HTML5-arbetet 2005 och anställdes på Opera Software 2007, där han jobbar med kvalitetssäkring och webbstandarder.

Martin Janner

Martin är gränssnittsutvecklare på cloud nine. Han är expert på webbutveckling enligt webstandarder. Martin har jobbat i många projekt med användbarhet och tillgänglighet i centrum. I andra projekt har formgivning och kommunikation varit centrala och han jobbar lika gärna i någon texteditor som i Photoshop. Bloggar på stilmall.se och kallar sig mjanner på Twitter.

Isac Lagerblad

Tillgänglighetsrådgivare och standardista på Creuna AB sedan 2005. Creuna AB är ett konsultbolag som levererar allt från koncept och design till implementationer av webbplatser till stora och medelstora företag eller organisationer. Sedan 2007 har jag varit huvudansvarig för gränssnittsprogrammeringen på www.stockholm.se. Jag har varit medlem i W3C's HTML WG i utvecklingen av HTML5, översatt artiklar åt Web Standards Project och Opera Web Standards Curriculum. Isac finns på Twitter som icaaq.

Lena Backa

Lena började med webbutveckling 1997/98 och har författat ett flertal mycket välkända och uppskattade guider till (X)HTML och CSS. Hon är en teolog/religionsvetare och folkhögskollärarstudent. Användargränssnitt och webbstandarder är en stor passion. Lena finns på Twitter, under namnet

Inofficiell kopia av bakgrundsmaterial för Skolverket.

Tankar kring ämnena webbteknik och gränssnittsdesign Sida 27 av 27

kaxigt.

Björn Haglund

Björn är en av drivkrafterna bakom 24timmarsbloggen.se och ansvarar även för Örebro kommuns webbplatser. bjornhagstrom på Twitter.

Ämnesexpertens egna erfarenhet

På Nils Ericsonsgymnasiet i Trollhättan, där han jobbar, finns två lokala kurser som han utvecklat och genomfört flera gånger. Den ena är en fördjupning i Front End webbutveckling och den andra handlar om webbserverprogrammering. Nivån för betygen är ungefär desamma krävs idag i dessa lokala kurser.

Skillnaderna består främst i att de lokala kurserna inte har projektformen inskriven i kursplan och har tydligare kunnat bli inriktade mot en specifik teknik, XML respektive PHP. Utifrån erfarenheterna med dessa kurser bedöms ämnesmål och betygskriterier som realistiska.

Trollhättan, Augusti 2010

Lars Gunther

Ämnesexpert åt Skolverket

Inofficiell kopia av bakgrundsmaterial för Skolverket.