Kruger, Dunning, Kod och Design
Ihopknåpat av Tom Stone en torsdag i maj, 2008
En av mina små egenheter är att jag är fullt övertygad om att jag kan lösa vilket problem som helst, bara genom att tänka intensivt och stirra länge på det – oavsett om problemet är hur man svarvar en trollerigimmick i metall, syr en skjorta eller skriver musik. Häpnadsväckande ofta funkar det. Och de gångerna det inte gör det, så går jag till litteraturen. Finner jag inget där, så letar jag upp en expert jag kan rådfråga och som sista alternativ när inget annat återstår, så använder jag de empiriska metoderna och gör egen forskning.
Grundläget är alltså till 100 % enligt det som kallas för Dunning-Kruger effekten – att ju mindre jag vet om ett ämne, desto mer övertygad är jag att jag kan fixa det på en kafferast.
För lite mer än ett år sedan fick jag idén att jag skulle göra mig en s.k. officiell hemsida för min verksamhet som trollkarl. – ”Det skulle vara bra om det var en dynamisk hemsida”, sa jag till mig själv, utan att ha en susning om vad frasen egentligen betydde. Jag hade en vag föreställning om att det skulle innebära att det var lätt att uppdatera texterna vid behov, vilket jag tyckte lät bra.
Och med det självförtroendet som enbart total inkompetens kan ge, så bestämde jag mig för att göra allt jobbet själv. –”Man hör ju om 15-åriga hackers på nyheterna ibland… hur svårt kan det vara om en 15-åring kan fixa det?”, tänkte jag och började ladda hem exempelkod att titta på.
-”Tänker jag intensivt och stirrar på det, så ska jag nog ha hemsidan färdig på en vecka”.
De största hindren
Som tur är, så är jag inte beroende av en hemsida för att kunna jobba som artist, för nu har det gått över ett år, och det är fortfarande inte klart. Lustigt nog, så har hindret inte varit det man lätt skulle kunna tro. Jag kan fortfarande inte programmera i PHP1 , men det visade sig att det gick att pussla ihop existerande exempelkod, bara man tänkte intensivt och stirrade. Samma sak med javaskript2 . Det gick att lösa rätt avancerade saker, enbart med envishet som verktyg.
De största hindren var två till antalet. Det första var att jag upptäckte hur svårt det var att skriva om sig själv i tredje person, utan att det lät nördigt. Du förstår, även om jag ofta får komplimanger efter en föreställning, så fastnar de sällan i minnet då jag får dem innan jag varvat ned och fortfarande är fokuserad på showen. Och under själva föreställningen har jag så fullt upp med att snappa upp repliker, improvisera och knyta ihop med fingerfärdighet och ”split-second timing” – att jag aldrig får tillfälle att stanna upp och analysera mig själv och finna ut vad som särskiljer mig från andra i branschen. Så, oavsett vad jag skrev, så lät det som samma fattiga reklamklyschor som alla andra använder.
Så visst – det är numera extremt lätt att fixa nya texter på min hemsida, men vad hjälper det när alla texterna blir miserabla pekoral?
Cybernetiskt kolstift?
Den andra stötestenen är designen, som aldrig stannar kvar där man lagt den. Eftersom jag vill att allt ska rankas väl i sökmaskinerna, så har jag försökt anamma tankesättet att separera innehåll och presentation. Dvs, man har all information som ren text först, och sen utan förstöra texten, så krokar på designen med hjälp av CSS3 och javaskript. Det låter så enkelt i teorin…
Gud – att jobba med CSS är precis lika jävligt som att rita med kol. Råkar man nysa när man fått bilden perfekt, så flyttar sig alla strecken en decimeter. Tusch har alltid varit mitt favoritmedium, bara för att det fan stannar där man placerat det. Photoshop är ett annat favoritmedium, Adobe Illustrator likaså. Och jag trivs fantastiskt med Quark Xpress4 , där man med tusendels millimeters noggrannhet kan justera avståndet mellan två bokstäver. Allt stannar där man lagt det. Underbart!
Men CSS? Nix, det är som att försöka lägga ett kollage av höstlöv när det blåser kraftigt. Eller som att göra korttrick för packade folk. Inget funkar som tänkt.
Låt oss ta en titt på sidan jag svettas över just nu, min showsida som med tiden kommer att berätta om mina olika varianter av trolleri-shower. Skärmdumpen är tagen i Firefox.
Jämför det med den här skärmdumpen som är tagen i Safari. Det är samma dator, samma typsnitt från samma typsnittsmapp, taget bara minuter isär, utan några ändringar.
Som syns vid pilarna, så har allt ändrats – det ser ut som helt olika typsnitt, med olika x-höjd och olika radavstånd. Kolla t.ex. vid pil 3… Ser det ens ut som samma typsnitt?
För att göra det tydligt – låt mig lägga de två bilderna ovanpå varandra i Photoshop, i ”difference-mode”. Det betyder att om det är noll skillnad i färg mellan en punkt i båda bilderna, så får punkten färgvärdet noll (lika med svart). Ju större skillnad, desto ljusare blir punkten. Idealet är alltså att få en helt nattsvart bild här. Men istället:
Nu kanske det låter överdrivet att hetsa upp sig över sådana här småsaker, som någon pixel hit eller dit. Men problemet är att det är ackumulativt. Om man har en fyrkant som är placerad 10 pixlar från kanten av skärmen, och följande fyrkant är placerad i relation till den första osv…blir det 2 pixlar fel i den första, så ärvs felet och förvärras med nästa fel. Och med en skärm som är 1200 pixlar bred, så kan det bli rätt drastiska skillnader.
Jämförelser
Låt oss titta på hela showsidan, för att illustrera skillnaderna. Först med Firefox, som är den webbläsaren som bäst följer reglerna för hur CSS ska ritas upp på skärmen.
Så här ser samma sida ut i Safari. Relativt lika.
Utan några ändringar – så här ser det ut i webbläsaren Opera.
Hoppsan! Här hanterar Opera tydligen marginaler annorlunda än Safari och Firefox – för det verkar inte som att textblocket får plats bredvid bilderna utan har lagt sig undertill. Min gissning är att några minuters trixande med enstaka pixlar kommer att få texten på plats.
Så kommer vi till Internet Explorer 7 - den som är ökänd för alla sina buggar och fel, men som folk ändå av någon märklig anledning föredrar att använda.
Men… var är mitt innehåll?
Visst finns det en ironi i att innehållet hos en trollkarl oförklarligt försvinner spårlöst på det här sättet5. Men speciellt kul är det inte. Precis det här är anledningen till varför jag förmodligen aldrig kommer att få igång min hemsida helt och hållet. För inte nog med att CSS är som att rita med kolstift, utan sen har man problemet att få det att synas alls i Explorer.
Makrohårt med microsoft
Det är exakt samma sak varenda gång – man utgår ifrån hur CSS är definierat och konstruerat, och kan rätt snabbt snickra ihop något som ser hyfsat ut. Typ på 2-3 timmar, och resultatet ser bra ut i de flesta webbläsarna. Sen får man ägna veckor6 åt att få det att funka i Explorer genom att använda odokumenterade obskyra trix, balansera vissa buggar emot andra så de tar ut varandra osv.
Personer som lyckas finna sådana lösningar blir snabbt berömda bland webbsnickarna. Märklig bas för berömdhet, inte sant? –”Titta, där går killen som fick Internet Explorer att rita en fyrkant där det var tänkt!”
Och själv, för egen del, så blir jag allt mer ett bevis för att Dunning-Kruger effekten är sann. När jag inte visste något om ämnet, så var det jättelätt. Nu, när fått en massa kunskap och erfarenhet, så tycker jag det är nästan omöjligt svårt.
Uppdatering: Efter lÃ¥ng tids letande fann jag äntligen vad problemet med jävla Internet Explorer var - en av IEs ökända “HasLayout”-buggar som uppenbarligen är extra besvärliga när de inträffar inuti en tabell (table). Överväger allvarligt att börja blockera IE helt och hÃ¥llet i fortsättningen.
Fotnot:- PHP är ett skript-språk som används för att ge en dator speciella instruktioner, som t.ex. att hämta och lämna information i en databas osv. Används på den datorn som lämnar ifrån sig informationen som t.ex. texten du läser just nu [↩]
- Javaskript är också ett skriptspråk, fast som körs på din egen dator. För att se ett exempel på vad javaskript kan utföra, klicka på den lilla pilen här till höger [↩]
- CSS - Cascading Style Sheets. Normalt sett, så ritar datorn upp t.ex. en rubrik med stora och feta bokstäver, bara för att man har sagt åt den att göra så. Men man kan lika gärna ändra definitionen för vad "rubrik" ska betyda, och låta datorn rita "rubrik" med pyttesmå bokstäver. CSS är som en regelbok man ger datorn för hur man vill att ramar, bokstäver och linjer ska ritas. [↩]
- Quark Xpress var länge standardprogrammet för hela den grafiska branschen, när det gällde formgivning av trycksaker [↩]
- ha-ha-ha… [↩]
- Ingen överdrift, en av sidorna tog över tre veckors jobb innan Explorer visade den rätt. Sidan i fråga är fortfarande ful som stryk, men nu är det i alla fall pga min bristande designskicklighet än någon bugg. [↩]
Trackback URL = http://blogg.tomstone.se/design/kruger-dunning-kod-och-design.html/trackback/
Ämne: Design
css
css
| Design Design Design Design | Intressant Intressant Intressant Intressant | photoshop photoshop photoshop photoshop | Tom Stone Tom Stone Tom Stone Tom Stone | trollkarl trollkarl trollkarl trollkarl | intressant
- » Trolleri och webbdesign « Tom Stone - trollkonstnär :: 10 maj, 2008 kl.20:57
[...] Startar med en artikel om arbetet med min officiella hemsida som trollkarl, som jag kallar “Kruger, Dunning, Kod och ...
Christian
» mÃ¥ndagen 9 februari 2009, kl. 8:36:
Bra inlägg, har upplevt samma problem. Fast omvänt, tex vågrätt linje som inte vill visa sig i Firefox men gör det i explorer beronde på vad för stilmall jan andvänder.
Mycket frusterande.