torsdag 31 maj 2012

Varför fungerar inte alltid margin-top i CSS?

Har man byggt webbsidor i HTML och CSS ett tag lär man förr eller senare stöta på ett märkligt fenomen med marginaler (margin). Det gäller framför allt margin-top och margin-bottom.

Låt oss titta på exemplet nedan.


Vi har två stycken DIV-taggar, där den ena ligger i den andra. Den yttre rosa boxen har en top marginal på 50 pixlar och är 500 x 200 pixlar stor. På den inre gula boxen har vi en 50 pixlar stor marginal runt om och en 10 pixlar stor padding. Inga konstigheter.

Låt oss kolla på lite källkod:

CSS: 

#outer {
    width:500px; 
    height:200px; 
    background:#FFCCCC;
    margin:50px auto 0 auto;
    display:block;
}
#inner {
    background:#FFCC33;
    margin:50px 50px 50px 50px;
    padding:10px;
    display:block;
}

HTML:

<div id="outer">
    <div id="inner">
        Hello world!
    </div>
</div>


Men som ni kanske gissar så händer något oväntat. Låt oss kolla hur det ser ut.


Marginalen på den inre gula boxen försvinner och istället limmas den i toppen. Vilket är helt ologiskt kan man tycka. Men det hela handlar om hur CSS är uppbyggt och just detta fenomen kallas "Collapsing margins", eller kollapsande marginaler.

Så här säger W3 om denna standard:

8.3.1 Collapsing margins
In CSS, the adjoining margins of two or more boxes (which might or might not be siblings) can combine to form a single margin. Margins that combine this way are said to collapse, and the resulting combined margin is called a collapsed margin.
Adjoining vertical margins collapse [...]

Mer läsning på:
http://www.w3.org/TR/CSS2/box.html#collapsing-margins

Detta betyder alltså att två angränsande boxars yttre vertikala marginaler går samman/kollapsar för att forma en gemensam marginal. Horisontala marginaler kollapsar dock aldrig.

Varför gör man såhär då?
Det hela handlar lite om hur man tänker på margin och padding. Vad är det egentligen? Margin, eller som jag här i texten beskriver det "yttre marginaler", bör inte tolkas som att flytta ett objekt 50 pixlar hit eller dit snarare att det ska minst finnas 50 pixlar tomt utrymme ovan de två objekten.

Det fungerar faktiskt på samma sätt i exempelvis ordbehandlaren Word. En rubrik med en marginal på 12 pixlar följt av en paragraf med 6 pixlar marginal ger inte ett mellanrum på 18 utan istället 12 pixlar. Den mindre marginalen kollapsar in i den större för att ge en minsta önskad marginal mellan de två. Följande paragrafer hade alla haft 6 pixlars marginal mellan varandra.

Hade det inte fungerat på detta sättet hade det blivit väldigt svårt att formatera text både i Word och i HTML med CSS.

Padding å andra sidan skapar alltid ett mellanrum. Padding betyder rakt översatt ungefär utfyllnad.

Lägger vi boxarna efter varandra istället för i varandra ser vi det tydligare:

CSS:

#box1 {
    width:500px;
    height:200px; 
    background:#FFCCCC;
    margin:50px;
    padding:20px;
}
#box2 {
    width:500px;
    height:200px; 
    background:#FFCC33;
    margin:50px;
    padding:20px;
}

HTML:

<div id="box1">
Hello
</div>
<div id="box2">
world!
</div>



Som vi ser får vi inte 100 pixlars mellanrum utan bara 50. Detta trotts att vi har 50 pixlars marginal runt om båda boxarna, alltså både i toppen och foten samt höger och vänster. Men footen i den övre och toppen i den undra boxens marginaler kollapsar för att ge den gemensamma marginalen på 50 pixlar, precis som vi önskade.

Så marginaler kollapsar. Detta är i alla fall sant så länge det inte finns andra regler som skapar en barriär mellan de boxarna eller förändrar boxmodellen för någon av dem. Exempel på detta skulle kunna vara att ändra den inre boxen till floating, eller gör den till ett inline-block eller den yttre boxen till att ha hidden overflow eller ha en padding.

Alla förändringar ger fortfarande inte önskvärt resultat, men löser i alla fall problemet med att marginalen kollapsar.

Bäst resultat får vi om vi sätter overflow:hidden; på den yttre boxen.

CSS:

#outer {
    width:500px;
    height:200px; 
    background:#FFCCCC;
    margin:50px auto 0 auto;
}


Alternativt kan vi lägga på en 1 pixels padding på den yttre boxen. Padding gör dock boxen större så vill vi ha exakt 200 pixlar hög box får vi ändra höjden till 199 pixlar.


#outer {
    width:500px;
    height:199px; 
    background:#FFCCCC;
    margin:50px auto 0 auto;
padding:1px 0 0 0;
}


Det kan fortfarande verka ologiskt att det fungerar som det gör, men detta ger i alla fall en liten förklaring till varför och hur man kan lösa det.

söndag 27 maj 2012

Photoshop: Fixa till ljuset i din bild

Ibland, eller kanske ofta, tar man en bild och upptäcker att personens ansikte blev alldeles för mörk till omgivningen. Du fick ett helt ojämnt ljus. I verkligheten såg det kanske bra ut. Men på bild gjorde skuggorna ansiktet oigenkännbart och bilden oanvändbar. Detta händer kanske framför allt om du fotograferar inomhus och framför allt om du som jag föredrar att köra utan blixt.

Men tacka gud för bildredigeringsprogram så som Photoshop. Då kan du fixa till dina, eller omgivningen misstag i efterhand. Kanske till och med göra bilden bättre än verkligheten tillåter. Det går ganska snabbt dessutom om man vet hur man ska göra.

Låt oss kolla på en bild, före och efter redigering.

FÖRE:

EFTER:

Spenderad tid på denna förändring är max fem minuter. Resultatet; ganska bra om jag får säga det själv. Bilden ser ut att vara tagen i bättre förhållande än den egentligen var och den har inte förlorat märkbart mycket i kvalité.

Så vad är tipsen och trixet?


Vi börjar med att lägga till ett nytt lager för Nivåer (Levels) och drar upp ljuset i bilden. Vi fokuserar enbart på den delen i bilden som är för mörk, i detta faller personen. Allt annat i bilden som redan såg bra ut kommer att bli för ljust, men just nu spelar det ingen roll.


Nu klickar vi på lager masken (Layer Mask) för vårt Nivå lager (Levels Layer) så att det är en som är aktiv. Sedan väljer vi pensel verktyget (Brush Tool). Jag gillar att arbeta med inställningar på ungefär; Opacitet (Oppacity) 60% och Flöde (Flow) 45%.

Nu målar vi, först med en ganska stor pensel med svart över de områdena som är för ljusa. Sedan går vi in i detaljerna kring personen med en liten mindre. Det behöver inte bli perfekt, men vi bör få en relativt diffus silhuett av personen i vår lager mask. Du ser när det börjar se jämnt ut.
Eventuellt kan du behöva gå in och göra några små penseldrag även på personen, där det eventuellt ser lite lite för ljust ut, exempelvis på näsan eller i detta fallet den vita t-tröjan.


När vi är nöjda kan vi vid behov lägga till ett lager med Kurvor (Curves) för att ge bilden större spektrum mellan ljust och mörkt. Vi lägger detta över båda våra lager. Detta hjälper till att få allt att smälta ihop.


Slutligen så kan vi i detta faller se att ljuset på personen är väldigt gult. Vi kan korrigera detta enkelt genom att lägga till ett lager för färg balans (Color Balance). Dessutom så kopierar vi lagermasken från vårt Nivå lager så att vi enbart ändrar färg balansen på personen och behåller originalljuset på bakgrunden. Oftast räcker det att man fokuserar på mellan och det höga registret (midtones och highlight).

Sen var bilden färdig! Lycka till!

I övrigt kan vi presentera personen på bild, vilket är ingen mindre än skateboardfotografen Nils Svensson, som i dagarna har en utställning på Landskrona Museum.

torsdag 24 maj 2012

Photoshop: Bildredigering utan att förstöra originalet

I mitt yrke så blir det en hel den bildbearbetning med Photoshop, eller dylikt program. Jag försöker personligen sakta förflytta mig från beroendet av Photoshop till fria open source lösningar. Detta av flera anledningar så som att jag inte vill bli fast med ett verktyg men även mer ideologiskt då jag tror på och gillar idéen med fri mjukvara. Gratis är dessutom oftast väldigt gott.

Men idag kommer vi använda Photoshop, och hur man bör arbeta när man redigerar bilder för att vara effektiv och flexibel samtidigt som man behåller originalet. Vi kan kalla det Photoshop-"best practice" för att vara internationella.

Vanligt sätt att arbeta med Photoshop som glad amatör är att ladda in ett foto och sedan kladda på med massa effekter och verktyg. Ångrar man sedan någon ändring så får man många gånger börja om eftersom man kladdat direkt på fotot.


I bildexemplet ovan vill vi ändra Nyans/Mättnad (Hue/Saturation) och gör det på det klassiska viset. Vi går upp i menyn och klickar in oss på Bild (Image). Under Förändringar (Adjustments) hittar vi sedan exempelvis Nyans/Mättnad (Hue/Saturation).

Problemet med ovan är att om vi sedan sparar vår Photoshop-fil å är våra ändringar permanenta och bilden är förevigt förändrad. Kommer vi senare på att vi kanske vill ha lite mindre nyans så får vi börja om.

Alternativet är att jobba med lager. Att arbeta med lager är nog de flesta relativt bekanta med i Photoshop och liknande program. Men kanske mest för att klippa ihop två bilder eller liknande. Men vi ska fokusera på bildbearbetning med hjälp av lager.


I vår lagermeny (Layers) hittar vi samma verktyg, Bild (Image) -> Förändringar (Adjustments), som vi tidigare använde. Skillnaden är att det skapas som ett nytt lager. På detta enkla sätt kan vi när som helst återgå till inställningarna för de förändringar vi vill göra, eller ta bort dem helt om så önskas.

Smidigt!


Markera, klipp och klistra. Ångra och rätta till snarare än att göra om.




En annan sak man ofta vill göra är att klippa ihop två bilder för att skapa en ny. Vanligtvis, eller amatören, går direkt till sin trogna vän Lasso-verktyget (Lasso Tool) och följer konturerna på objektet i bilden man vill klippa ut. Detta är tidskrävande i sig, men ett enkelt felklick och din markering kan vara förstörd och du får börja om från början. Dessutom är det svårt, framför allt om man bara har en mus som verktyg, att få till en snygg markering. Som tur är finns det som alltid tricks att ta till hands!


Istället kan vi använda oss av vektorverktyget pennan (Pen Tool). Med detta kan vi enkelt lägga ut ankarpunkter som följer objektet. Vi kan till och med utnyttja möjligheten att skapa kurvor i vår vektormask för att ganska snabbt skapa en snygg silhuett av objektet vi vill "klippa ut".


När vi är nöjda med vektormasken håller vi in CTRL och klickar på lagret i lager-menyn för att skapa en markering av vektorn. Sedan kan vi klicka på Lägg till lager mask (Add layer mask) i vår lager-meny.

Nu kan vi markera båda våra lager för att skapa ett Smart-objekt. På detta vis kan vi när som helst välja att gå tillbaka och ändra på markeringen.


Det var allt för denna gången! Ha det bra! :)




onsdag 23 maj 2012

Vad ska jag välja Google+ eller Facebook? ...och vilket kommer finnas kvar om 10 år?

Frågan om vilken social plattform man ska välja är återkommande. Både för företag och privatpersoner. Vissa ignorerar nykomlingar som Google+ med hänvisning om att vännerna finns på Facebook.

Vissa företag försöker febrilt och panik artat hänga med på allt. Vissa lyckas skapa en närvaro som lever på diverse närverk andra blir bortglömda lik som potentiella kunder senare hittar.

Journalister dömer gång på gång ut Google+ med motiveringen att aktiviteten är för låg och att folket är troget sin ansiktsbok. Samtidigt kan vi läsa om hur förtroendet hos folket sviktar allt mer för Mark Zuckerbergs gigant. Så mycket som 59 procent av amerikanerna har "inget eller litet förtroende" och bara 12 procent säger sig ha "fullständigt förtroende". I Sverige säger så lite som 21 procent ha förtroende för Facebook, en siffra som hamnar mittemellan Försäkringskassan och Bankerna med sina 18 procent respektive 24 procent.
Dessutom skulle jag vilja påstå att tidningarna och journalisterna som rapporterar om hur dåligt det går för Google+ antingen har en dold agenda eller bristande kunskap. Senast kunde vi läsa i Computer Sweden att mjukvarutillverkaren RJMetrics sågar Googles egna snack om en jättesuccé. Företagets data visar att 30 procent av alla de som gör ett publikt inlägg aldrig gör ett andra inlägg samt att de flesta inlägg får ett eller mindre +1 (motsvarigheten till Likes/Gilla på Facebook). Vad alla inte verkar vilja förstå eller ens lyssna på är att undersökningarna är gjorda på publika inlägg. Alltså inlägg som är öppna för att läsa. När man väljer att publicera och döma ut nätverket på grund av en undersöknings underlag baserat på publika inlägg så har man missförstått mycket. Många använder sina kretsar, eller cirklar, flitigt på Google+. Idéen var så bra att Facebook inte ville vara sämre och införskaffade sig ett liknande system. Men detta gör också att det bildas ett stort mörkertal av aktivitet. Vad man istället bör göra är att berömma Google för att ha varit duktiga på implementera och fortbilda sina användare i sitt system.

Men den stora skillnaden mellan Facebook och Google+ är att sistnämnda inbjuder till bredare diskussioner och informationspridning. Google+ är inte i samma behov av ditt eller mitt förtroende, då det inte är baserat på vänskapskretsar lika mycket, snarare intressekretsar. Det blir oftast inte lika privat om än samtidigt personligt.

Visst kan Google+ fungera precis som Facebook, om du har dina vänner där. Men det är även mer som Twitter där information delas och intas baserat på intresse och då spelar inte realvänskap lika stor roll.

Enda sättet du träffar nya människor på Facebook är genom diverse sidor och appar som samlar folk kring ett särskilt ämne eller funktion, i Google+ är detta inbyggt i den sociala texturen.

Facebook, Google+, Twitter, LinkedIn... vad ska man välja?
Måste man välja? Det kanske är en fördel att inte lägga alla sina ägg i en korg? Jag förstår inte varför man måste välja mellan Facebook och Google+ eller något annat för del delen. Precis som universitet väljer läroplattformer för sina kurser, vissa använder It's Learning andra Scio, så kan privatpersoner, föreningar och företag välja att lägga sin kommunikation på Facebook och/eller Google+. Man måste inte välja en.
En förening kan välja att sköta all sin kommunikation på Facebook. Bra! Varför ska föreningen lägga dyra utvecklingskostnader på att ta fram en egen platform om Facebook fungerar? Det är inte svårt för de som inte redan har ett konto att skapa ett och dessa personer väljer själv hur aktiv man vill vara privat utanför föreningen. Det kan agera som en lösning på ett problem.

Precis som ingen har gjort ett slutgiltigt val mellan e-post, sms och telefoni, så behöver inte vi heller göra ett val mellan Facebook, Google+, Twitter och LinkedIn. Det går att kombinera.

Men skadas inte min sociala närvaro av detta? Blir jag inte osynlig om jag inte är aktiv?
Jag skulle vilja förspråka att selektiv närvaro är bättre än en bred. Syns du där det känns logiskt för situationen får det antagligen större genomslagskraft.

Själv använder jag Facebook för att prata med kompisar. Många gånger istället för att ringa eller skicka ett sms. "Vad gör du ikväll? Ska vi hitta på något?" - direkt realvänskaps kommunikation. Medan Google+ kittlar mina intresse och inte begränsar dessa till mina smala vänskapkrets. Twitter fungerar bra för livereferat kring ett eventenmang, men även som en ersättare för sms och mms, liksom Facebook. Egentligen är detta det enda som är gemensamt för diverse sociala plattformar att de alla konkurrerar ut telefoibranschen.

Om det är något du bör fungera på så är det, varför betalar du och jag dyra abonnemangs- och samtalsavgifter när vi kan sköta samma kommunikation via internet?

Telefoni, sms och e-post ersättas av sociala nätverk och e-post, och vi väljer fortfarande kommunikationen som passar bäst för tillfället och åhöraren.


Mer att läsa


Computer Sweden (2012) ”Så dåligt går det för Google+” (elektroniskt) <http://computersweden.idg.se/2.2683/1.449681/sa-daligt-gar-det-for-google > (2012-05-23)

SvD (2012) ”Din cynism göder Facebook” (elektroniskt)
<http://www.svd.se/kultur/din-cynism-goder-facebook_7220969.svd > (2012-05-23)