Your site design, the first thing people see
is to be reflective of you and the industry
Easy to look at with a nice navigation
when they can’t find what they want it causes frustration

A clear call to action to increase the temptation
use appealing graphics to create motivation
if you have animation – please use moderation
‘cause search engines can’t index the information

Display logos of all your associations
Highlight your contact info – that’s an obligation
Create a clean design, you can use some decoration
but try to prevent any client hesitation
Every page that they click should provide an explanation
should be easy to understand like having a conversation

Create a site style, you can use your imagination
but make sure you use correct color combinations, dude
Do some investigation, look at other organizations
but don’t duplicate or you might face a litigation
You done? Congratulations, start construction
move into production, please follow these instructions:

Your Photoshop functions, then slice that design
do your layout with divs, make sure that it’s aligned
Please don’t use tables even though they work fine
when it comes to indexing they give search engines a hard time
Make it easy for the spiders to crawl what you provide
Remove font type, font color and font size

No background colors, keep your coding real neat
Tag your look and feel on a separate style sheet
Better results with XML and CSS
Now you’re making progress, a li’l closer to success
Describe your DOCTYPE so the browser can relate
Make sure you do it great or it won’t validate

Check in all browsers – I do it directly
gotta make sure that it renders correctly
Some use IE, some others use Flock
some use AOL, I use Firefox
Title everything including links and images
Don’t use italics – use emphasis
Don’t use bold, please use strong
‘cause if you use bold that’s old and wrong

If you use CSS your page will load quicker
Your client is satisfied like they’re eatin’ on a Snicker
They’re stuck on your page like you made it with a sticker
and then they convert – now, that’s the real kicker
Make you a li’l richer, you site a li’l slicker
Design and code right, man, I hope you get the picture

What I’m tellin’ you is true, man, it should be a scripture
If it’s built right you’ll be the pick of the litter
Everyone will want to follow you like Twitter
Competition will get bitter, you’ll shine like glitter
If you’re trying to grow your company will get bigger
Design and code right, man, can you get with it?

Den snabba utvecklingen på webben tillsammans med förbättringar av webbläsare och hjälpmedel för personer med funktionshinder har gjort att vissa delar av WCAG 1.0 inte stämmer helt överens med dagens webb, och skulle behöva uppdateras.

W3C jobbar på nästa version av WCAG – WCAG 2.0 – som har fått en hel del kritik för att vara svårläst och luddig. W3C har tagit till sig av kritiken och har förbättrat WCAG 2.0 i det avseendet, men ännu finns riktlinjerna inte i en slutgiltig version.

Att riktlinjerna i WCAG 1.0 är gamla och att WCAG 2.0 dröjer har varit en källa till viss frustration bland många. Därför har en grupp utvecklare som kallar sig WCAG Samurai tagit fram vad de kallar för WCAG Samurai Errata, ett dokument som innehåller uppdateringar och rättningar av WCAG 1.0. Man kan säga att det till stor del återspeglar hur webbutvecklare som är medvetna om standarder och tillgänglighet arbetar i praktiken.

WCAG Samurai Errata är inte publicerat av W3C eller någon annan standardorganisation, så det har inte samma tyngd som publikationer signerade W3C/WAI. Men vi tycker att det är ett dokument som på ett enkelt och koncist sätt uppdaterar riktlinjerna i WCAG 1.0 så att de blir mer applicerbara på webben år 2008.

Det låter kanske inte så speciellt, men vardagen för oss som jobbar med webbutveckling påverkas i allra högsta grad av hur väl Microsoft, som ju fortfarande har den klart största marknadsandelen när det gäller webbläsare, följer med i utvecklingen. Att bygga webbplatser blir mycket enklare när alla webbläsare följer samma regler, och där har Internet Explorer länge legat långt efter konkurrenter som Firefox, Safari och Opera.

Med IE 7 tog Microsoft ett kliv framåt på den fronten, och med IE 8 lovar de att det ska bli ännu mycket bättre – faktiskt ser det av förhandstipsen att döma ut som att IE 8 äntligen kan komma åt nå upp till samma stöd för HTML, CSS och JavaScript som övriga webbläsare. Det är inte en dag för tidigt tycker vi, men det innebär också att större krav kommer att ställas på oss som bygger webbplatser. Vilket vi faktiskt också tycker är bra!

För att dra full nytta av förbättringarna i IE 8 behöver man nämligen vara påläst inom webbstandarder. Det kommer inte längre att vara lika enkelt att göra ett halvdant jobb och ändå lyckas få saker att fungera i Internet Explorer, eftersom den kommer att bete sig på samma sätt som de andra webbläsarna. Om man, som många tyvärr gör, baserar funktionalitet på icke-standardiserat beteende hos IE i dag, riskerar man att den funktionaliteten försvinner för besökare som börjat använda IE 8.

Microsoft har många stora kunder vars intranät och andra webbaserade applikationer är beroende av det icke-standardiserade beteende som Internet Explorer traditionellt har haft. För att mildra effekterna av att uppgradera till IE 8 har Microsoft därför lagt in en utväg i IE 8. Genom att lägga in en speciell meta-tagg på sin webbplats kan man tvinga IE 8 att bete sig som IE 7.

Detta kan vid en första anblick låta bra, och det kan det möjligen vara som en tillfällig akutåtgärd om en applikation slutar fungera. Men på sikt är det ingen bra lösning eftersom det innebär att man faktiskt fryser Internet Explorer vid version 7, och aldrig kommer att kunna få förbättrat stöd för HTML, CSS och JavaScript. Det i sin tur innebär att de som använder Internet Explorer inte kommer att få ta del av förbättrade standarder och den förbättrade tillgänglighet som de innebär. Därför behöver alla som jobbar med att utveckla gränssnitt för webben lära sig hur man använder webbstandarder på rätt sätt.

Vi tycker det är ett stort steg framåt för webben att Microsoft förbättrar stödet för webbstandarder i Internet Explorer, och hoppas få se förbättringar av deras övriga webbrelaterade produkter inom en snar framtid. För att uttrycka sig milt så finns det en hel del att göra för att förbättra både kvalitet och tillgänglighet på den gränssnittskod som skapas av produkter som Sharepoint och Visual Studio…

• Säg "nej" - Wackå om intranätchefens viktigaste ord
• jQuery 1.2 Cheat Sheet - botemedel i pappersformat för mänskliga minnesluckor
• jQuery UI 1.5b - nu med bland annat tangentbordsstöd för slider-funktionen!
• PrinceXML – webbstandardsbaserad PDF-generering med många lovord
• Hur man kan bygga ett effektivt spamfilter enligt Jonathan Snook

Här är en intressant artikel om nyttan med personas.

Några intressanta aspekter ur artikeln:

• En riktigt bra definition på vad som är en persona finns inte, eftersom det är just en abstraktion av forskning - det är en summa av flera människor. Att ge den ett namn gör den specifik igen, vilket konfunderar många, särskilt kritiker av personas-modellen.
• En persona är däremot viktig för att ge empati åt utvecklingsteamet och kan främja att alla jobbar åt samma håll, såväl finansiärer, projektledare som utvecklare.
• Personas behövs inte när du utvecklar för dig själv - de är alltså inte nödvändiga för bra design. De bör användas när de behövs, inte annars. På detta följer frågan:
• Varför utvecklar inte fler med sig själva som målgrupp? En gyllene regel: Ju mer en utvecklare skiljer sig från målgruppen, desto svårare är det att utveckla för målgruppen. Exempel på tjänster/produkter som utvecklats av och för utvecklarna själva: Netflix, eBay, Google Apps, Wufoo, Basecamp, Freshbooks, Yelp, Craigslist, Blinksale.
• Den felande länken: Passion. Personas kan skapa empati för målgruppen men inte passion för tjänsten. Passion ger de sista, kanske avgörande, 10% av helheten som gör det till en fulländad produkt.

Hela artikeln är värd en genomläsning, den har fler poänger än de jag nämnt ovan.

Läsvärt för Rails-utvecklare är också Active Merchant som just kommit i en ny version eller denna artikel om att säkra sig mot XSS-hål

För alla IE-buggletare har John Resig en intressant artikel om avrundningsproblem i CSS

• Understanding Web Design: Jeffrey Zeldman i en lysande artikel om att webbdesign handlar om mycket viktigare saker än vem som kan göra den fräckaste Flashsajten som ingen begriper hur man använder: "The experienced web designer, like the talented newspaper art director, accepts that many projects she works on will have headers and columns and footers. Her job is not to whine about emerging commonalities but to use them to create pages that are distinctive, natural, brand-appropriate, subtly memorable, and quietly but unmistakably engaging."
• Filmer om tillgänglighet: På Handisams webbplats finns ett antal filmer som på ett humoristiskt sätt beskriver hur vardagen kan vara för den som har ett funktionshinder. Synd bara att filmerna är i Windows Media-format, vilket inte är särskilt tillgängligt för oss som använder Mac.
• Accessibility Is About Minimizing Requirements: Tillgänglighet handlar om att minska barriärer.
• Social Networking? Bah! They're just web sites "I think the future lies in distributed social networking where the use of open formats and distributed software architectures will enable people to connect and create community in any way they see fit to build themselves. There will be no need for the middle man."
• Versions: Subversion-program för Mac som ser lovande ut.
• DebugBar: En plugin för Internet Explorer som påminner om Firebug.

Opera är det företag som synts och hörts mest med sina snabba och moderna klienter för Symbian och Windows CE. Men på senare tid har en ny stjärna börjat synas på webbläsarhimlen - WebKit - som redan implementerats i över 70 olika applikationer över hela applikationsspektrat. (Trogna Linux-användare minns kanske WebKit som en gren av KHTML- och KJS-biblioteken i KDE.)

För det är inte bara webbläsare på en vanlig PC som läser HTML-kod i dag. Allt från mobiltelefoner, e-postprogram, hjälptext-browsers och RSS-läsare till blogg-programvaror, HTML- och CSS-editorer, desktop-widgets, mediaspelare och chattklienter behöver kunna visa HTML på ett eller annat sätt. Och i alla dessa typer av program finns i dag öppen källkods-motorn WebKit representerad.

Varför WebKit?

Om man får tro Om Malik så beror WebKit-motorns popularitet på följande faktorer:

• Den är enklare att programmera för jämfört med andra renderingsmotorer
• Den har en välorganiserad och mindre kodbas än de andra
• Den är snabb och renderar sidor snabbare
• Den har ett mindre "fotavtryck" vad gäller hur mycket minne och processorkraft som används (idealt för mobila enheter)

På detta område ligger även "IE-dödaren" Firefox i lä och kommer att behöva jobba på rejält för att hinna ikapp WebKit rent tekniskt, inte minst på den mobila arenan. Men vad som gör WebKit till den givna toppkandidaten framöver är nog trots allt denna veckas nyhet om att WebKit utgör grunden för Googles nya Android Mobile Platform som det viskats om länge. Få är de som ignorerar vad Google tar sig för och med tanke på företagets gullande med Firefox är valet av WebKit en stor bekräftelse för den smärta renderingsmotorns potential.

Mest känd är nog trots allt Apples webbläsare Safari, som drivit på utvecklingen av WebKit och som aktivt stödjer The Webkit Open Source Project, vilket intressant nog Mozilla valt att inte göra. Safari, som just släpps i version 3, finns nu även för Windows och är föga förvånande standardwebbläsaren i succésäljaren iPhone. Apples ökande marknadsandelar på sistone har gjort Safari till den tredje största webbläsaren i desktopvärlden (efter IE och Firefox) och nu börjar den pigga renderingsmotorn alltså på allvar slå igenom även i den mobila världen.

Vad betyder detta för webbutvecklare?

Vad varje webbutvecklare - och varje inköpare av webbtjänster för den delen - bör ha klart för sig är att programmera "för webben" inte längre är vad vi är vana vid. Det som en gång handlade om att göra något som såg bäst ut i IE, funkade i Firefox och med nöd och näppe gick att använda i en mobiltelefon, är redan i dag en för låg målsättning, både för oss utvecklare och för våra beställare. Vad det handlar om är att ge upp tanken på att det är en, två eller tre "webbläsare" som ska stödjas och istället fokusera på att välja vilka webbstandarder (variant av HTML, nivå av CSS, version av JavaScript, osv) som ska användas och ha bra koll på vilka renderingsmotor som stödjer dessa.

Eller för att höja ribban lite: Varför inte redan nu testa WebKits stöd för CSS3-specifikationen (ännu ej klar), vilket kommer ge saker som:

• Avancerad textrendering (skuggade texter, konturer, etc)
• Flerkolumns-stöd
• HTML5 (pågående specifikation)
• Nedladdningsbara typsnitt (med @font-face)

Lägg därtill WebKits stöd för klientbaserad databaslagring med SQL (SQLite) och du har en intressant "tunn klient" för offline-bruk av mer avancerade webbapplikationer. Det ska bli spännande att se hur WebKit/Safari utvecklas framöver, men säkert är att det blir en lika naturlig plattform att förhålla sig till som Gecko/Firefox, på fler och fler operativsystem.

• Storleken måste kunna variera i höjdled allteftersom mängden innehåll ökar
• Storleken måste kunna variera även i sidled, t ex när man ökar teckenstorleken i webbläsaren
• De måste vara kodade semantiskt så att det framgår att det är ett citat och av vem
• Det måste vara lätt att byta ut själva bubblan mot andra färgvarianter
• Bubblan får bara bestå av en enda bild-fil

Vi började med att göra en designskiss på hur vi ville att det skulle se ut i slutändan:

Sedan gjorde vi en bild på själva bubblan, som var stor nog att kunna rymma även de mest omfattande citaten.

Därefter placerade vi bubblan som bakgrundsbild med hjälp av CSS på lämpliga element. Det lila området indikerar vilken del av elementet som har bakgrundsbild:

blockquote

div

p

div

cite

Slutresultat

Genom att jobba på detta sätt uppnår vi alla de mål vi satte upp för oss själva.

Det går att skala texten utan att bubblan "går sönder"...

...inte ens i sidled:

Och med en enda rad i CSS-filen kan vi nu ha en alternativ bakgrundsbild som bättre passar mot en med tonad bakgrund, utan att behöva göra något annat än att tillverka en (1) ny pratbubble-bild.

Kontentan blev att de flesta partierna fortfarande använder sina webbplatser till envägskommunikation och inte erbjuder många möjligheter för besökaren att själv påverka eller kommentera innehållet. Även tillgängligheten är det lite si och så med hos de flesta och standardtextgraden är oftast i minsta laget.

Vill du läsa hela artikeln så finns den för nedladdning i PDF-format till en billig penning hos IDG. Artikeln finns på sida 16 i bilagan, sidan 52 i PDF-en.

Computer Sweden ons 24 oktober

ASP.NET AJAX

Fredrik Normén pratade kring Microsofts AJAX-lösning och nämnde lite tricks och tips för att få förbättrad prestanda. Därefter visade han metoder för att skriva objektorienterad JavaScript via ASP.NET AJAX Library, som är ett sätt för Microsoft att få serverside-programmerare att känna sig hemma även på klientsidan.

Något som fångade vårt intresse under denna delen av presentationen var hur det talades om abstraktionslagret och webbläsarkompatibilitet. Istället för att skriva document.getElementById("...") kan man använda Sys.UI.DomElement.getElementById("...") eller kortsyntaxen $get("..."). Alla webbläsare tolkar inte JavaScript på samma sätt och detta var något som Microsoft sade sig ha åtgärdat. Det intressanta var dock att de enbart pratade om Internet Explorer och Firefox. Opera och Safari med vänner nämndes inte.

ASP.NET AJAX kommer att vara inbyggt i ASP.NET 3.5 som troligen släpps i februari.

Silverlight

Silverlight är en teknologi som installeras som en plugin i webbläsaren och påminner till viss del om Flash. En viktig skillnad är att den bygger på Microsofts .NET som erbjuder bättre utvecklingsmöjligheter än ActionScript för Flash. Trots att det handlar om .NET så fungerar Silverlight på Mac OS X och snart även på Linux.

Chris Klug från Jönsson & Lepp demonstrerade en rad tekniker och visade hur man bygger en Silverlightapplikation från Visual Studio 2008. Det går visserligen snabbt och enkelt att klicka fram en fungerande applikation, men tillgängligheten hos en sådan lösning lämnar en hel del att önska.

Rika klienter

Robert Folkesson och Johan Lindfors pratade om så kallade RIA, Rich Internet Applications. Enkelt uttryckt handlar det om webbapplikationer som känns som desktopapplikationer. Microsofts huvudteknologi inom detta område kallas WPF, Windows Presentation Foundation.

Det pratades även en del om vad som händer med gamla WinForms för .NET. WinForms kommer leva vidare för rena Visual Studio-gränssnitt och enklare grafiska tillämpningar medan utveckling i WPF sker till stor del i Expression Blend och fokuserar på rikare gränssnitt.

Johan berättade att projektet med kodnamn Acropolis lades på is förra veckan, men Parallel FX Library lever och frodas. Det är en teknik för att kunna utnyttja flera processorer genom att använda delegater som troligen kommer ingå i kommande .NET 4.0.

• Microsoft öppnar källkoden till .Net - men enbart för läsning.
• Personer med olika sorters funktionshinder visar hur de använder datorer med diverse hjälpmedel på AssistiveWare.
• Första förhandssläppet av Rails 2.0 har sett dagens ljus.
• Safari har fått stöd för nedladdningsbara typsnitt och Jon Hicks har lite tankar om detta.
• Apple forskar om (variabelt) tryckkänsliga skärmar - dags för en ny generations iPhone..?
• Intervju med Alex Payne om utvecklingen av Twitter i Rails.
• Slashdot diskuterar "best practices" vid utveckling av webbplatser.
• Yrket som webbutvecklare medför ofta en mix av flera områden inom design och teknologi som måste samverka på bästa sätt. Molly har funderat lite kring detta och hur hjärnan fungerar.

• Jeffrey Zeldman säger så här om nya Apple Store: "For instance, they violate the ancient IA commandment about maintaining absolute navigational consistency from page to page and section to section. But this bothers no one, because the site’s structure is fluid and intuitive." Sajten har redan fått både ris och ros av världens webbutvecklare. Många av valideringsfelen som tyvärr finns där verkar bero på butikens bakomliggande CMS, vi hoppas och gissar att Apple fixar detta inom kort. Hursomhelst är det kul att se ännu en av de riktigt stora e-handelssajterna gå över till webbstandarder och modern kod, det var på tiden. Nästa steg är att förbättra tillgängligheten också ;)
• Patterns in Interaction Design från Welie är en omfattande källa över vanliga begrepp inom interaktionsdesign. Vissa har fler exempel än andra men listan ger en bra översikt ändå.
• jQuery UI är en ny samling med "widgets, components and interactions" till det populära javascript-biblioteket jQuery.
• Tiki är ett ärendehanteringssystem som kan interagera med Basecamp. Släppt i beta nu och kan nog bli riktigt intressant.
• James Robertson ställer sig frågan: Vad gör ett CMS? och listar saker som kunder ofta tror ingår som standard i ett publiceringsverktyg, men som det oftast finns hela marknader kring.
• Google har sämst åtkomlighet i Sverige och bäst i Brasilien, visar en undersökning från Pingdom.
• Generera ditt alldeles eget Web 2.0-företagsnamn (och lägg till "beta" när du ändå håller på).

Vad är BoPunkten?

BoPunkten är en webbtjänst för bostadsannonsering som funnits i över 10 år. Den ger möjlighet att annonsera ut rum, lägenheter och hus för uthyrning både i första och andra hand. Besökare kan sedan söka bland annonserna och bli medlemmar för att kontakta annonsörerna.

Vad är Ruby on Rails?

Ruby on Rails (eller bara kort och gott "Rails") är ett ramverk för webbutveckling som både fått utstå en jättehype och mycket skepsis de senaste åren. Det är sprunget ur jobbet som David Heinemeier Hansson gjorde med 37signals projekthanteringsverktyg Basecamp. När Basecamp skulle omvandlas från idé till verklighet ville David implementera det i det utanför Japan inte speciellt vanligt förekommande objektorienterade programspråket Ruby.

Sagt och gjort, Basecamp byggdes, och i processen extraherades ett ramverk för att bygga andra webbapplikationer. Det är en av de saker som skiljer Rails från andra webbutvecklingsramverk (som exempelvis ASP.NET); det är inte uppbyggt "för sin egen skull", utan funktioner har lagts till för att de behövdes på riktigt i en viss situation.

Rails bygger på principen "convention over configuration" (konvention framför konfigurering), vilket innebär att när man skapar sin Railsapplikation har den en uppsättning inställningar som standard. I många fall behöver man inte ändra speciellt mycket av dessa inställningar (även om det går utmärkt att ändra dem). När man sätter igång är den enda konfigurering man behöver göra att ange vilken databas som ska användas.

En Railsapplikation byggs upp enligt mönstret Model-View-Controller, vilket innebär en bra separering mellan ren datahantering (som sker i Model-lagret), Presentation (som sköts av View-lagret) och kopplingen däremellan (Controller-lagret). Detta är inget som är unikt för Rails, men mönstret är en stark konvention i Rails vilket gör det lätt att följa. En grundsten i Rails är också implementationen av ActiveRecord, ett mönster för objekt-relationsmappning. Det gör att dataklasser finns mer eller mindre per automatik baserat på databasstruktur och är synnerligen trevligt.

Skillnader mot ASP.NET/C#

Syntaxen i Ruby är ganska annorlunda mot i C#, som vi brukar använda i ASP.NET. Ruby är mer kortfattat, men samtidigt avsett att vara mer läsbart genom att ha en "ordföljd" som liknar talat språk. För min egen del var det svårt att förstå en del av syntaxen när jag först började titta på det, men det gick snabbt att lära sig. Jag är också väldigt förtjust i många konstruktioner i Ruby som ger mycket mer kortfattad kod är motsvarigheten i C#. Ett exempel är hur enkelt man skapar en associativ array (eller Hash som det heter i Ruby), vilket jag tycker är en total plåga i C#. I Ruby är dessutom allt riktiga objekt, så man kan skriva 5.times { puts 'Hello world!' }, dvs anropa en metod som hör till Integer-klassen direkt på siffran 5. Snyggt!

Ruby är inte särskilt strikt med interpunktion (eller vad man ska kalla det i programspråk), så när man ska anropa en funktion går det lika bra att skriva puts('Hello world!') som puts 'Hello world!', och raderna kan avslutas med semikolon eller inget alls. Det tycker jag är både bra och dåligt. Det stör mig lite att koden kan se inkonsekvent ut, men å andra sidan har jag större frihet att skapa mina egna konventioner. (Det gäller bara att övertyga andra utvecklare om just mina konventioners förträfflighet...)

En annan viktig skillnad är att Ruby är ett interpreterat språk istället för, som ASP.NET, kompilerat. Det gör att programmeraren inte behöver göra en kompilering varje gång någon rad ändrats, men kan också ha negativa konsekvenser på prestanda. Det har skrivits mycket om huruvida Rails verkligen kan skalas upp till "Enterprise"-nivå, och det är ingen diskussion jag tänker ge mig in på. Jag misstänker att eventuella problem blir märkbara först vid mycket stor trafik. Det finns idag flera oerhört välbesökta webbplatser som kör Rails, så det måste uppenbarligen vara möjligt.

Internationalisering

Om någon funktion inte ingår i Rails grundinstallation är sannolikheten ganska hög att någon gjort en plugin som löser problemet. En plugin installeras vanligen via ett kommando i ett terminalfönster och modifierar eller lägger till funktionalitet i Rails.

BoPunkten ska finnas på flera språk, och till det använder vi en plugin som heter Globalize. Den gör det väldigt smidigt att översätta godtyckliga texter i applikationen. Det fungerar lika bra på statiska texter i Views som på texter som lagrats i databasen, och med en väldigt liten ansträngning för mig som prgrammerare. Jag har haft ett problem, nämligen att adresserna i applikationen också ska vara lokaliserade. Det stöds inte av Globalize direkt. Det finns en annan plugin som ska lösa det, men den fick jag inte att fungera. Jag har därför fått göra en egen lösning på det som jag tänkte skriva om lite längre fram i utvecklingen.

Läs mer

Det finns en väldig massa skrivet om Ruby och Rails. Här följer några länkar till bra resurser för den som vill veta mer:

• Programming Ruby: The Pragmatic Programmer's Guide: Bra grundkurs i Ruby-programmering
• Ruby Standard API: API-dokumentation för Ruby
• Rails Framework Documentation: API-dokumentation för Rails
• Ruby on Rails wiki
• rails.se: Svensk wiki om Ruby on Rails
• Rubin på räls: Svenskt forum om Ruby on Rails

Inriktning

Redaktörer som använder den senaste skarpa versionen 4.61 kommer känna igen sig, då redigeringsläget fungerar ungefär som tidigare. I version 5 ligger istället fokus på den underliggande tekniken.

I tidigare versioner av EPiServer använder man ett stort EPiServer-specifikt klassbibliotek. Ett genomgripande drag i version 5 är att man istället använder sig av de klasser som ingår i ramverket för .NET. Mycket bra!

Vad gäller .NET så är det version 3.0 av ramverket som gäller, men det är inga problem att köra webbplatser som använder 4.61 och 5 på samma server.

Nyheter under huven

Bland förändringarna märks till exempel:

• Användare hanteras numera av .NET Providers istället för EPiServers egen databaslösning.
• Arbetsflöden bygger nu på Workflow Foundation som är en del av .NET 3.0.
• Det gamla filhanteringssystemet UFS har ersatts av Virtual Path Providers.
• Mycket av logiken har flyttats från stored procedures till applikationslagret.
• Integration med Visual Studio.

Dessa stora förändringar medför en hel del jobb för utvecklare, men jag tycker att det är helt rätt väg att gå.

Tyvärr verkar man inte ha prioriterat att EPiServer CMS ska fungera i andra webbläsare än Internet Explorer, vilket jag hoppades att de skulle ha åtgärdat vid det här laget. Ett toolkit för att skapa ett Firefox-kompatibelt edit-läge kommer att släppas separat, men jag tycker inte det är tillräckligt.

Migrering

Något flera verkar sakna är konkreta anvisningar för att migrera befintliga webbplatser. Det har utlovats ett verktyg för att migrera webbplatser från 4.61 till 5, men enligt EPiServer själva kommer det tyvärr inte dyka upp förrän ett tag efter att EPiServer CMS har släppts. I korthet behöver man göra följande steg:

1. Utgå från en fungerande webbplats i EPiServer 4.61 och exportera innehållet.
2. Installera en EPiServer CMS webbplats och importera innehållet till denna. Filer och bilder behöver flyttas manuellt, men detta kommer förhoppningsvis att åtgärdas innan den slutliga versionen.
3. Flytta egna mallar från gamla utvecklingsprojektet till nya.
4. Kompilera projektet och åtgärda alla fel.

Den långa raden av kompileringsfel sträcker sig från enkla klipp-och-klistra-övningar till stora omskrivningar. En av de saker som behöver skrivas om är Custom Property Types, där tyvärr dokumentationen är bristfällig än så länge. Många av de gamla metoderna är uppmärkta med legacy-namespace, så att man får varningar när de används.

Support?

Värt att tänka på är att RC-versionerna supporteras ej av EPiServer, så man hänvisas istället till utvecklarforumet. Sedan en tid tillbaka finns dock SDK för EPiServer CMS tillgängligt på webben.

EPiServer rekommenderar inte heller att man använder RC-versionerna i skarpa projekt.

Nästa version

Första RC-versionen släpptes i april och förra veckan kom version RC4. Jag kommer strax ta en titt på vad den erbjuder, så att jag förhoppningsvis kan lämna RC3 inom kort. Läs mer om den senaste versionen i Release Notes för EPiServer CMS RC4.

Förhoppningsvis blir detta den sista RC-versionen så att vi kommer få se den slutliga versionen släppas under hösten.

• I artikeln Tänk tvärtom - lekande lätt för e-handeln intervjuas Dan Saffer som vi nämnde i våra intryck från konferensen From Business to Buttons om hur webbutvecklare borde hämta inspiration från speldesign.
• NOSO är en "plattform för tillfällig bortkoppling från sociala nätverksmiljöer". Ett icke-socialt nätverk är en logisk följd av den senaste tidens enorma framfart för sociala nätverk på nätet (här i Sverige pratar alla om Facebook nu verkar det som). Vill du vara en stund för dig själv? Gå på ett NOSO. Tyvärr verkar de bara arrangeras i San Francisco än så länge.
• Javascript Boot Camp Tutorial - Bra JavaScriptintroduktion, ganska avancerad faktiskt.
• Why we need standards support in HTML email - Om behovet av förbättrat stöd för webbstandarder i epostklienter.
• En frustrerad webbutvecklare berättar ett par historier från verkligheten (we feel the pain).
• Det har föreslagits att alt-attribut inte längre ska vara obligatoriskt i HTML 5. Vi håller inte med, och det gör inte heller artikelförfattaren av The HTML 5 Image Element
• Är det dags (äntligen?) att börja hoppas på nedladdningsbara typsnitt i CSS?
• Undersökning av placering av knappar i formulär
• Om man använder CAPTCHA för att förhindra spam ska man vara medveten om att det innebär problem för många användare.
• Tips om hur man designar ett användbart formulär

• Kul artikel om vad som gör ett lösenord säkert: The Usability of Passwords
• Blueprint – ett alternativ till YUI:s CSS-grids?: Blueprint Grid CSS Generator
• jQuery 1.1.4 släppt – nu ännu snabbare: jQuery 1.1.4: Faster, More Tests, Ready for 1.2
• Blogg-inlägg om arbetet med Bugtracker, lovande supportsystem i Ruby on Rails: The Tracker Dashboard
• Vem vill leva i "The Real World"?: Who wants to live in The Real World?
• Vem tittar på webbreklamen? (Svar: Ingen): Banner Blindness: Old and New Findings
• Nostalgi: Sveriges 18 första .se-domäner: Sveriges 18 första .se-adresser

• Eric Meyer tycker till om ofoget att bygga webbplatser enbart för iPhone: The Veteran's Charge
• Sen ett gäng artiklar om HTML 5, W3C och WHAT WG. Först Molly: Dear W3C, Dear WaSP
• Sen Molly igen: Dear WHAT WG and HTML 5 WG
• Och ytterligare en gång: Web Standards Situation Solutions
• Och så fyller Jeffrey Zeldman på: What crisis?
• Och jag kan inte låta bli att slänga in ett vedträ i brasan: The HTML 5 circus: Why I left and rejoined the W3C HTML Working Group
• Allt behöver inte finnas på startsidan, och "above the fold" är en myt: Home Sweet Home
• Hur man håller sin motivation på topp: Staying Motivated

Läs hela artikeln: Simrishamn.se fick bäst betyg i undersökning

Läs uppsatsen: Svenska kommuners webbplatser och deras tillgänglighet (PDF-document, 1,8 MB), av Johan Bergman och Gisli Jon Gislason, Institutionen för Data- och Systemvetenskap vid Stockholms Universitet, 2006-2007.

• Accessibility and .NET
• Emerging design trends
• Jeffrey Zeldman: King of Web Standards

• It's All Text!
• Could Facebook Become The Next Microsoft?
• Best uses of Flash
• Open Source and the Enterprise
• CoRD

• Downshift Your Code
• A Glimmer of Hope with AJAX for JAWS users?
• Rich Internet Applications, SEO and Accessibility

• Jajja spammar svenska bloggosfären med länkar till länkkataloger
• Why Textpattern? An Interview with the Authors of Textpattern Solutions
• Is the web killing our culture?

Fler sätt att navigera

För att uppmuntra till att utforska det innehåll vi har på webbplatsen har vi lagt in flera sätt att navigera till sådant som på något sätt relaterar till det man läser:

• Relaterat: I högerkolumnen på sidor/artiklar som har nyckelord visas några andra sidor som har samma nyckelord
• Kunder som använt denna tjänst: På sidor som handlar om tjänster vi tillhandahåller visas länkar till kundcase för kunder som använt denna tjänst
• Tjänster som denna kund använt: Från kundcasen är det lätt att läsa mer om de tjänster just denna kund har använt sig av
• Nyckelord: På http://www.netrelations.se/nyckelord går det att se en lista över de nyckelord som används. För varje nyckelord går det att se vilka artiklar som märkts med nyckelordet. Varje nyckelord som visas på artiklar är en länk till listan med artiklar som använder det nyckelordet

Är det detta du letade efter?

Om en besökare försöker nå en sida som inte finns på webbplatsen försöker vi hjälpa till att hitta sidor som kan vara intressanta. Vi plockar upp ord från den adress besökaren skrivit in och söker på webbplatsen efter sidor som innehåller dessa ord. Resultaten visas sedan i en lista. För ett exempel, testa http://www.netrelations.se/episerver.

SiteSeeker

För sökningen har vi valt att använda SiteSeeker. En stor skillnad mot EPiServers inbyggda sökning är att SiteSeeker är en "sökrobot" som läser igenom alla webbplatsens sidor och följer alla (interna) länkar. Det innebär att bara sådant som besökaren kan surfa till på webbplatsen hittas i sökresultat, inte sådant som ligger dolt. Det är inte alltid fallet med EPiServers inbyggda sökning. På köpet får vi också sökning på olika böjningar av ord och alternativa stavningsförslag på sökord.

Med SiteSeeker får vi också en genomgång av döda länkar och annan statistik som kan vara intressant.

Microformats

Microformats är ett sätt att märka information - exempelvis adresser - på en webbsida så att den kan hanteras maskinellt. I fallet adresser kan man exempelvis installera tillägget Tails Export till webbläsaren Firefox som känner igen adresserna och automatiskt kan exportera dessa till din adressbok. Kontaktinformationen i sidfoten och adresserna på kontaktsidan är märkta på detta sätt.

Det finns många andra typer av information som kan märkas med microformats, exempelvis kalenderhändelser och recensioner. En sökmotor som går igenom sidor med denna typ av information kan extrahera den och presentera den på ett bättre sätt än ett "vanligt" sökresultat. Se exempelvis denna sökfunktion för microformats på Technorati.

Anpassa

Istället för att lägga till egna funktioner för att ändra textstorlek på webbplatsen har vi skrivit instruktioner för hur man kan använda webbläsarens inbyggda funktioner för att välja hur stor texten ska vara. Instruktioner finns på sidan "Anpassa", som också innehåller annan information om tillgänglighet.

Bloggen

Bloggen innehåller inte speciellt många funktioner, men den använder nyckelord på samma sätt som resten av webbplatsen. Därför kan även blogginlägg visas under "relaterat". Bilderna vid kommentarerna kommer från Gravatar, som gör det möjligt att ha samma ikon på olika bloggar utan att ladda upp en bild på varje enskilt ställe. Bilderna är kopplade till e-postadresser.

Kommentarsfältet är kopplat till ett egenutvecklat spamskydd som använder flera olika metoder för att försöka avgöra om en kommentar är spam. Detta är tyvärr en funktion som blir alltmer viktig.

Hantering av gamla adresser

Vi har en helt ny struktur på webbplatsen, vilket skulle kunna leda till att alla gamla adresser slutar fungera. Det skulle vara störande för besökare och kunna påverka våra sökmotorresultat negativt. Vi har därför gjort en lösning som dirigerar om från gamla adresser till deras nya motsvarigheter (i de fall det finns en ny motsvarighet). Besökaren får ett meddelande att adressen har ändrats. För ett exempel, testa exempelvis http://www.netrelations.se/about/.

Synpunkter?

Vi vill gärna ha feedback från våra besökare. Vad tycker du om vår nya webbplats? Är det något särskilt du tycker om? Något vi borde gjort annorlunda? Lämna en kommentar här nedanför, eller kontakta oss via kontaktformuläret om du hellre vill det.

Tankar om paginering från Faruk Ateş: Pagination 101

Diverse hjälpprogram för Internet Explorer.

Alla reserverade ord som finns i Javascript, bra för felsökning. Safari brukar vara väldigt strikt med det där.

Synka alla möjliga kalendrar med varandra med Plaxo.

Nyhetssajten Newsvine har gjort en distribuerad opinionsundersökning inför det amerikanska presidentvalet. Vem som helst kan lägga upp en undersökning på sin blogg/webbplats och rösterna från alla undersökningar räknas samman. De kallar det för ElectionVine.

Fördelarna med att jobba i team: In Programming, One Is The Loneliest Number.

Danah Boyd är en doktorand på School of Information på Berkeley. Hon forskar om ungdomars sociala samspel på internet, och den här essän har startat en intressant och stundtals väldigt aggressiv debatt. Viewing American class divisions through Facebook and MySpace.

Lite programmeringstips från Chris Heilmann: Shortening JavaScripts with Math.

Och vi kan ju inte låta bli att nämna iPhone en dag som denna (den släpps i USA ikväll). En rolig recension av David Pogue på NY Times och en video som visar mellanslagstangentens försvinnande (när den inte behövs).

New York Times Redesign - case study (Karen McGrane, Kevin Kearney)

Processen med nya nytimes.com var intressant för oss som jobbar med formgivning och gränssnitt. Webbplatsen är helt designad runt annonserna, vilket var väldigt viktigt, och bygger på ett femspalts-rutnät som tillåter flera spaltkombinationer (2+2+1, 2+1+2, …) för de olika sidtyperna. Fokus ligger inte lika mycket på startsidan som på varje enskild artikelsida. Deras beräkningar talar för att 60 procent når en artikel direkt via en länk eller träff i en sökmotor - inte via startsidan. Därför försökte arbetsgruppen att skapa flera ytor med relaterad information av olika slag, för att tillfredsställa olika intressen hos de olika målgrupperna. De ställde sig själva frågor som "Vilka val görs åt mig på denna sidan?", "Är en artikel från igår verkligen relevant just här?" och försökte hitta olika sätt att leda in besökaren på avdelningar de kanske inte valt att gå in på direkt, om de inte vore för dessa relationer mellan nyheterna.

Målgruppsanalysen var också intressant. De har inte använt sig av "John, 32 år" när de skapat sina personas utan istället valt att jobba med en "Researcher", en "Time Killer" och liknande besökartyper.

Playful Interaction Designs (Dan Saffer)

Dan Saffer talade om hur vi kan lära mycket av spelutvecklare för att skapa en djupare känsla och lojalitet för de produkter vi skapar - "lek är hur vi lär oss, hur vi utforskar saker". Han citerade Ken Birdwell som menar att en bra lek är en lek där "spelaren alltid ska behöva skylla sig själv för sina misstag" och inte lekens konstruktion eller regler. Spelaren ska alltid kunna förstå varför något sker, kunna agera därefter och fatta rätt beslut, utan krångel.

Lek som idé är dock antitesen till effektivitet - hela syftet med lek är faktiskt ineffektivitet. Lek är att skapa onödiga hinder för att överkomma frivilliga problem. Men lek är också, vilket kanske är det riktigt intressanta, förmågan att skapa en känsla och en upplevelse av de verktyg och regler som det består av.

Spelutvecklare (samt Apple, tillade Dan) jobbar mycket med interaktionsdesign utifrån denna ände. Genom att istället för att fokusera på "vilka knappar ska vi ha med här?" eller "vilken sorts navigering ska vi ha?" ställer de grundläggande frågor som "hur får vi känslan av det är krig?" eller "hur når vi känslan av att man springer hela tiden?".

Resultatet av detta sätt att tänka blir att man fokuserar på estetiken (upplevelsen av spelet eller produkten), sedan dynamiken (spelets gång, hur användandet utvecklar sig) och sist förverkligar mekaniken (reglerna, verktygen och dess interaktion). I många fall, menar Dan Saffer, börjar man med mekaniken och kanske bara hoppas att man uppnår en viss känsla i slutändan. Ett mer lekfullt sätt att angripa problemet kan vända på steken och uppnå mål som traditionell interaktionsdesign inte alltid lyckas med.

• Eric Meyer om lämplig ordning på CSS-regler för länkar
• YUI Theater - Victor Tsaran: "Introduction to Screen Readers"
• YUI Theater - Karo Caran and Victor Tsaran: "Introduction to Screen Magnifiers"
• Safari 3 beta, även för Windows
• Vi har pratat om laptopväskor på Göteborgskontoret. På Signal vs. Noise finns en lång lista på tips om väskor. Mina favoriter är ACME The Designer Slim, STM Medium Cargo och ACME The Clyde. Sen är Sundance Metro Messenger inte dum heller, men den hittade jag inte i just den listan.

• J.D. Meier ger korta tips för att vara mer effektiv: How to do tasks more efficiently och Timebox your day
• Rick Strahls tankar om dilemmat med javascript anno 2007
• WCAG Samurai Errata: Uppdatering och modernisering av WCAG 1.0. Introduktion och Errata
• Netscape Navigator 9 beta. Japp, Netscape finns fortfarande. Ganska trevlig faktiskt.
• Att skapa länk-element eller inte. Vi svarar A!

• En ny Working Draft av WCAG 2.0 har släppts och utvärderats
• Tips och info om hur man gör om gör rätt med Microsoft SharePoint 2007
• Även utvecklare behöver tänka på design

• Seven reasons for code bloat
• Ajax bryter mot användarnas förväntningar

• Formal Weirdness
• Web 2.0 'neglecting good design'
• The State of Textpattern
• Another Look At HTML 5

• Help keep accessibility and semantics in HTML
• Reset Reloaded
• A Guide to CSS Support in Email: 2007 Edition
• Breadcrumb Navigation Increasingly Useful
• FlashReplace - A light-weight JavaScript to insert Flash movies into your web page
• Logotype Image Replacement
• Vad skiljer en bra webbshop från en dålig?