Browsing Tag

webbstandarder

webbutveckling

Stoppa kommentarspam utan att förstöra tillgängligheten

Här på bloggen började jag få problem med kommentarspam redan några veckor efter jag startade den. Den första tiden handlade det om enstaka poster i veckan men efter en tid så kunde det ha samlat sig 20-30 nya spamposter över en natt. Något behövde göras.

Några faktorer gör det ganska enkelt för mig att lösa spamproblemet: Jag skriver på svenska medan de flesta spambottar är kalibrerade för engelska, min blogg har så få besökare att den är ett väldigt lågprioriterat mål och jag använder ett egenbyggt bloggverktyg vilket gör att det inte finns några färdiga lösningar för just mitt spamfilter. Eftersom jag ville ha ett filter som skulle fungera ett tag framöver och som jag skulle kunna använda på andra webbplatser försökte jag ändå komma fram till en lösning som skulle vara effektiv även för lite större webbplatser, lätt att använda och inte stänga ute funktionshindrade besökare.

Bildbaserade CAPTCHAs uteslöt jag direkt eftersom de är omöjliga att använda för dem som använder skärmläsare och dessutom ofta svårare för vanliga besökare än spambottar att uttyda. Det går visserligen att lösa tillgänglighetsproblemet genom att komplettera med ljuduppspelning av vad som står i bilden, men det gör hela lösningen ännu mer komplicerad.

En annan vanlig lösning är att kombinera svartlistor, vitlistor, analys av kommentartexten och manuell moderering i olika konstellationer. Fördelen med detta är att skyddet ofta inte märks för besökarna. Nackdelarna är att även vanliga kommentarer kan stoppas och att det ständigt måste underhållas och kalibreras. Denna typ av lösning kan vara praktisk för riktigt stora aktörer (som får så många kommentarer att de kan se mönster eller som kan distribuera spamigenkänningen mellan tusentals individer) men skulle kräva för mycket underhåll för min smak.

Slutligen för valet på en enkel kontroll där besökaren fyller i den siffra som visas med bokstäver. Genom att seeda slumpgeneratorn med ett tidsberoende tal så behöver ingen information om vilken siffra som ska fyllas i skickas med till servern.

Om det skulle behövas är det relativt enkelt att öka komplexiteten:

  • Sifferintervallet kan ökas för att skapa fler möjliga alternativ.
  • Siffrans placering i meningen innan fältet där den ska fyllas i kan ändras genom att skapa flera olika meningar som alterneras. För att detta ska vara meningsfullt måste dock betoningen på siffran tas bort…
  • Komplexiteten i algoritmen som avgör vilken siffra som ska visas kan ökas. Eftersom den är kopplad till en tidsangivelse så är varje algoritm möjlig att gissa för den som ser tillräckligt många exempel.
  • För att öka svårighetsgraden kan systemet relativt lätt anpassas till att kombinera flera olika tal till enkla matteproblem som skrivs ut som text.

Som alla andra spamskydd baserade på någon form av CAPTCHA så fungerar inte skyddet mot manuell knäckning det kräver också att den som lämnar kommentarer förstår svenska hjälpligt. På det stora hela så tror jag dock att lösningen kommer att fungera bra, men det är väl bara att vänta och se.

För den som vill läsa mer om spamskydd och CAPTCHA är Wikipedias artikel som alltid ett bra ställe att börja på. W3C har en grundlig genomgång av tillgänglighetsaspekten och Juicy Studio har en ganska teknisk artikel om hur olika alternativa tekniker skulle kunna fungera.

webbutveckling

Enkelt verktyg för effektivare stilmallar

CSS Tweak är en liten webbtjänst som optimerar stilmallar. Den tar bort överflödiga enheter och slår ihop deklarationer för font, list, border och margin. Om du inte har för vana att använda kortversionerna för deklarationer (eng: shorthand properties) i stilmallar så kan CSS Tweak ge en bra bild över hur stora optimeringsvinster som är möjliga.

För mig är inte den stora vinsten minskningen av filstorleken, den största anledningen till optimering är att kortare stilmallar leder till bättre överblick och mindre letande när man arbetar med dem. Det förutsätter givetvis en bra struktur på reglerna och kommentarer där de behövs – se därför till av avmarkera remove comments och välja Leave my layout alone om du använder CSS Tweak.

För en repetition av kortversionerna rekomenderar jag Roger Johanssons guide Efficient CSS with shorthand properties.

webbutveckling

Stapeldiagram med CSS för utskrift

Att göra en version för utskrift av stapeldiagrammet jag experimenterade med visade sig vara lättare sagt än gjort. De flesta moderna webbläsare skriver inte ut vare sig bakgrundsbilder eller bakgrundsfärger om inte besökaren explicit slår på den möjligheten – och det tror jag inte någon vill förlita sig på. Dessutom tar sig webbläsarna i regel friheten att byta ut för ljusa textfärger till svart eller mörkgrått. Till detta kommer en hel mängd små underliga buggar som bara verkar komma fram vid utskrift.

Efter en del kompromissande nöjde jag mig med denna variant (bara print-stilmall, välj print preview för att se den). Förutom förenklingen (gråskala, ingen bakgrund, inga skuggor, ingen ram) så valde jag att ta bort siffrorna i staplarna. De verkade inte gå att göra tillräckligt ljusa för att synas mot de mörka staplarna, men om man nöjer sig med ramar istället för bakgrund för staplarna så är det inte några problem att visa dem. Kanske skulle det vara en bättre lösning (ingen informationsförlust), men jag ville se om det gick att få samma grafiska stil på diagrammet vid utskrift som på skärmen.

Exemplet är än så länga bara testat i Firefox 2 och Internet Explorer 7.

För den som gör speciella printstilmallar så är webbläsarnas egna regler för vad som ska visas lite irriterande. Som flera tidigare har påpekat borde den bästa lösningen vara att webbläsarna litar på att de som har specificerat media="print" vet var de gör. En stilmall specificerad för ett speciellt medium borde alltid ha företräde framför webbläsarnas egna räddningsförsök (men givetvis stå tillbaka för en lika specifik användarstilmall).

webbutveckling

Stapeldiagram med CSS

Tidigare har jag använt PHP-biblioteket JpGraph i några olika projekt för att skapa grafer av olika slag. Det är dock inte alltid praktiskt att generera bilder för att visa statistik, så jag har lekt lite med css för att se om det inte går att hitta alternativa metoder.

Med utgångspunkt i Eric Meyers vertical bargraphs har jag försökt ta fram en lite snyggare och enklare variant. Målsättningan var att skapa stapeldiagram från semantiskt korrekt html med ett minimum av extra element, utan för komplicerad css som enkelt skulle kunna genereras dynamiskt och fungera i alla moderna webbläsare utan några css-hacks.

Eftar att ha provat med både tabeller och listor så fastnade jag till slut för definition lists som den enklaste metoden för att märka upp datan. Det finns många åsikter om hur definition lists ska användas, själv hör jag till den grupp som menar att man med fördel kan användas dem att koppla ihop nyckel-/värde-par. Tabeller skulle varit mer korrekt, men de kräver för mycket extra stilregler för olika webbläsare för att vara praktiskt i längden.

Det finns några saker med exemplet som inte fungerar så bra. Den extra koden som krävs för att sätta ut axelmarkeringarna är antagligen ganska förvirrande för besökare utan stöd för stilmallar. Möjliga lösningar är att använda sig av en bakgrundsbild (svårare att generera dynamiskt) eller att lägga in en beskrivande rubrik som förklarar vad siffrorna betyder (innebär ännu mer kod). Dd-elementet innehåller ett span-element som kan tas bort om man inte behöver bakgrundsskuggan överst och till höger.

Har testat exemplet i IE7, IE6 och Firefox 2 på Windows XP samt i Safari 2 och Firefox 2 på Mac OSX.

Hör av dig om du har förslag på förbättringar eller har egna exempel på lösningar.

Här är mitt exempel.

blandat, webbutveckling

Stockholms stadsbiblioteks nya webbplats i öppen beta

När Stockholms stadsbiblioteks nya webbplats smygstartar på allvar (den har tidigare varit tillgänglig i skissform) blir det den mest intressanta offentliga webbplatsen i Sverige, åtminstone i ett webb 2.0 perspektiv. Den erbjuder RSS-flöden för det mesta (exempelvis sökningar, kommentarer på enskilda böcker, fysiska evenemang), möjlighet att skriva recensioner och sätta betyg, diskutera med andra besökare och givetvis sköta alla vanliga biblioteksärenden. Än så länge har webbplatsen begränsad funktionalitet (och ganska många brister) men jag har stora förhoppningar om version 1.0. Jag har redan ansökt om att bli betatestare (d.v.s. få ett konto för att kunna använda personaliseringsfunktioner, recensioner med mera). och min plan är att göra utvärderingen av den nya webbplatsen till en liten följetong här. Första delen lägger jag ut i morgon och den kommer att handla om biblioteket.se och bloggvärlden.