Tag Archives: Webde­sign

Kolo­fon

Vi har skre­vet en del om arki­tek­tur og visu­ell design av blog­ge­ne våre, men selv har jeg skre­vet lite om hvor­dan den ble pro­du­sert, hvil­ke ele­men­ter jeg har brukt og hva som er på bil­de­ne. Her kom­mer et førs­te for­søk på en kolo­fon (hva er det?) til den­ne blog­gen.

For­fat­te­ren

Tho­mas Ham­mer er en kjekk ung mann på 24 som nett­opp har blei­ket håret for å få mer opp­merk­som­het.

Kode

Koden er en fin miks av enkel php, tag­ger for Movab­le Type-maler og dags­fersk html som for det mes­te vali­de­rer som xhtml 1.1.

All lay­out taes hånd om av CSS. For­di tabel­ler til lay­out er teit.

Typo­gra­fi

Typo­gra­fi­en kon­trol­le­res med CSS: Tre­buchet MS er første­valg som brød­tekst, Myriad eller Luci­da til over­skrif­ter. De fles­te over­skrif­te­ne i side­ko­lon­nen er satt med Uni­vers 67 Con­densed Bold. De fram­står som tekst i html-koden, men med hjelp av Todd Fahr­ners tek­nikk bru­kes bak­grunns­bil­der fra CSS til å erstat­te teks­ten. Over­skrif­ten vises med bil­de i nye nett­le­se­re og som tekst i gam­le.

Foto­gra­fi­er

Selv­tatt er vel­tatt? Jeg har i alle fall tatt en del bil­der selv:

Pro­duk­sjon

Deler av inn­hol­det er gene­rert av Movab­le Type, res­ten er hard­ko­det i Emacs direk­te på FreeBSD-bok­sen.

Selv har jeg en rime­lig ny bær­bar Dell-maskin, men mye er gjort på min for­lo­ve­des sta­sjo­næ­re, også en Dell.

Musikk..?

Blood Sugar Sex MagikAnbe­falt musikk mens du besø­ker nett­si­den er blant annet «Blood Sugar Sex Magik» av Red Hot Chili Pep­pers. For­di det var det et av albu­me­ne jeg hør­te på mens jeg laget mye av siden.

Lek­re kom­men­ta­rer alle vil beund­re

hicks-comments.gif En måte å gjø­re kom­men­ta­re­ne i blog­gen let­te­re å skil­le fra hver­and­re er å la bak­grun­ne­ne deres veks­le mel­lom to far­ger. Da ser man tyde­lig hvem som har sagt hva ved førs­te øyen­kast. Og ikke er det så vans­ke­lig å få til hel­ler!

Det fin­nes en egen plu­gin til Movab­le Type som kan fik­se det­te for deg, men for å ta den i bruk må man ha lov til å kun­ne leg­ge til sli­ke til­leggs­mo­du­ler på ser­ve­ren.

Jeg har ikke ret­tig­he­ter til å leg­ge til slikt på Uni­ver­si­te­tets ser­ver, så jeg skrev noen enk­le lin­jer med php som fik­set bif­fen like godt, stek­te den med løk­rin­ger til og ser­ver­te den med pep­per­saus. Sul­ten?

Bare en liten hake

Vi skal få til det­te ved å bru­ke en fin miks av html, css, php og tag­ger for Movab­le Type-maler, men aller først må man sør­ge for at man fak­tisk kan ta i bruk php. Siden Uni­ver­si­te­tet alle­re­de har php instal­lert på ser­ve­ren kan det­te gjø­res i føl­gen­de enk­le steg:

  • Logg inn på Movab­le Type
  • Velg Weblog Con­fig > Pre­fe­ren­ces > Archi­ving
  • Sett «File exten­sion for archive files» til «php»
  • Velg «Rebuild all»

Når det er gjort er det mulig å bru­ke php blant annet i male­ne til Movab­le Type, og det er nett­opp det vi skal gjø­re! Målet er å gi annen hver kom­men­tar en egen bak­grunns­far­ge, og det gjør vi ved å gi den en egen css-klas­se.

Så fin­ner vi fram malin­gen… eh, male­ne

  • Velg Temp­la­tes fra meny­en
  • Åpne opp malen for «Indi­vi­du­al Entry Archive»
  • Bla ned­over til du fin­ner koden for kom­men­ta­rer (begyn­ner med <MTComments>)

Vi tren­ger en klas­se alle­re­de til førs­te kom­men­tar, så der­for set­ter vi utgangs­ver­di­en til å være odde­tall før kom­men­tarko­den begyn­ner:

<?php $evenodd="odd"; ?>
<MTComments>

CSS-klas­ser er som jule­ga­ver, det er det lov å gi mer enn en, og der­for kan vi dele ut rund­hån­det. Kom­men­ta­re­ne våre skal der­for få både stan­dard­klas­sen «com­ments-body» og enten «odd» eller «even». De to sis­te er ikke kalt opp etter to hel­di­ge gut­ter som får man­ge gaver til jul, men er rett og slett engelsk for odde­tall og par­tall.

Det hele kan for eksem­pel se slik ut, det vik­tigs­te er i alle fall å få put­tet inn <?= $evenodd ?> for å dele ut rik­tig klas­se.

<div class="comments-body <?= $evenodd ?>">
<h3><$MTCommentAuthorLink spam_protect="1"$> sier:</h3>
<p class="comments-date">
<$MTCommentDate format="%a %e. %B klokken %H:%M"$>
</p>
<$MTCommentBody$>
</div>

Hvis vi stop­per der vil alle kom­men­ta­re­ne få utgangs­ver­di­en «odd», og da vil «even» bli for­nær­met og sku­le stygt på oss hver gang vi tref­fer han på gaten. Litt enkel php som plas­se­res før den avslut­ten­de </MTComments> red­der oss inn igjen den­ne gan­gen:

<?php
if( $evenodd=="even" ) {
$evenodd = "odd";
} elseif( $evenodd=="odd" ){
$evenodd = "even";
}
?>
</MTComments>

Rett etter at den førs­te kom­men­ta­ren er skre­vet ut end­rer vi $evenodd-varia­be­lens ver­di og byt­ter til den and­re mulig­he­ten. Det­te skjer etter hver kom­men­tar, vi byt­ter all­tid til den and­re mulig­he­ten. Nå kan du lag­re malen og byg­ge opp side­ne på nytt (Rebuild). Men før du gjør det, ta en kikk på det­te:

Mye enk­le­re kode

Den­ne lil­le kode­snut­ten kan nem­lig gjø­res mye enk­le­re ved å bru­ke en såkalt ter­nær ope­ra­tor. Det syn­li­ge resul­ta­tet på nett­si­den vil bli akku­rat det sam­me, html-koden også, men php-koden blir mye mer effek­tiv.

Når det er sagt: Husk at det er deg selv som skal ved­li­ke­hol­de det­te, så det er lurt å vel­ge noe som du vet du kan for­stå og end­re på selv (jeg bru­ker fort­satt den litt leng­re vari­an­ten). Her er hele grei­en med mer effek­tiv php-kode, kom­men­tert på engelsk til gle­de for de som har lest alt det­te så langt uten å skjøn­ne et ord…:

// Set initial value to odd
<?php $even = true; ?>
<MTComments>
// Use the ternary operator to choose class
$evenodd= (( $even ) ? "even" : "odd");
<div class="comments-body <?= $evenodd ?>">
<h3><$MTCommentAuthorLink spam_protect="1"$> sier:</h3>
<p class="comments-date">
<$MTCommentDate format="%a %e. %B klokken %H:%M"$>
</p>
<$MTCommentBody$>
</div>
// Flip the flop...
$even = !$even;
?>
</MTComments>

Da skul­le all php, html og all Movab­le Type-mal være klar. Tid for css!

Og så CSS

Vi har latt hver kom­men­tar få mer enn en klas­se, og det kan gjø­re CSS’en enk­le­re! Det som er fel­les for alle kom­men­ta­rer pas­ser nem­lig fint inn i .comments-body, og så kan det som er unikt for hver av de to type­ne (slik som bak­grunns­far­ge) plas­se­res i «odd» og «even»:

.comments-body {
margin: 0;
padding: 0 2em;
display: block;
min-width: 9em;
color: black;
background: gold;
}
.odd {
color: inherit;
background: silver;
border: 1px solid gray;
}
.even {
color: inherit;
background: inherit;
}

I det­te til­fel­let er «even» den stil­les­te i klas­sen, og har ikke noe nytt å til­føye. Det betyr ikke at «odd» er mer verdt enn «even», de har bare uli­ke inter­es­ser og hobby­er. Dess­uten sies det at tale er sølv, mens taus­het er gull…

Fast eller fly­ten­de bred­de?

Skal nett­si­der ha fast eller fly­ten­de bred­de? Det er man­ge av de som høy­lytt påstår at det ene er rik­tig og at det and­re er galt, og minst like man­ge står på and­re siden og roper til­ba­ke. Hva gjør vi mens vi ven­ter på at den gyld­ne mid­del­vei­en skal til­lat­te tra­fikk?

Bru­ker­venn­lig­hets­guru Jakob Nielsen er kjent for å være kate­go­risk i sine utta­lel­ser, og er en av de som anbe­fa­ler at alle nett­si­der fly­ter i nett­le­ser­vin­du­et. Sam­me hvil­ken skjerm man bru­ker og hvor stort vin­du­et er vil hele bred­den av nett­si­den da kun­ne vises, for den vil all­tid ta opp sam­me pro­sent­an­del av bred­den. Da stil­ler man hel­ler ikke krav til en viss skjerm­stør­rel­se for å vise hele siden.

«Jeg har stor skjerm, og vil gjer­ne bru­ke den!»

fixed-width.jpgNett­s­ur­fe­re som har inves­tert man­ge pen­ger i sto­re skjer­mer har irri­tert seg over «små» nett­si­der med fast bred­de. Man vil jo gjer­ne utnyt­te hele den fine, nye skjer­men, ikke bare førs­te halv­del. Der­for må nett­si­der fly­te og fyl­le hele skjerm­bred­den! Selv om det­te kan høres ut som et godt argu­ment, har Jeff­rey Zeld­man vist hvor tåpe­lig det had­de blitt hvis film­ska­pe­re var webde­sig­ne­re.

Men det fin­nes gode argu­men­ter: Når den besø­ken­de selv kan variere bred­den ved å for­stør­re eller for­mins­ke vin­du­et, kan man også selv bestem­me hvor lan­ge lin­je­ne med tekst skal være. Avn­sitt er let­test å lese når de er ett og et halvt alfa­bet lan­ge, noe som til­sva­rer rundt 45 tegn. Hvis man har mer enn 80 tegn på en lin­je blir det ule­se­lig.

«Alt fly­ter! Gi meg noe hånd­fast!»

fixed-width.jpgFolk flest kjen­ner ikke til det­te, og det tren­ger de ikke hel­ler, mener man­ge gra­fis­ke desig­ne­re. Slikt skal ikke de besø­ken­de måt­te ten­ke på, det er desig­ne­rens jobb å løse det­te pro­ble­met ved å leve­re den besø­ken­de lay­out og linje­leng­der som er beha­ge­li­ge.

Der med er dis­se desig­ner­ne ueni­ge med Nielsen (Curt Clo­nin­ger mener det kan være for­di bru­ker­venn­lig­hets­eks­per­ter er fra Mars, gra­fis­ke desig­ne­re fra Venus). Fly­ten­de bred­de kan gi alle slags rare resul­ta­ter, fra det ultras­ma­le til det vides­te vide. Det bes­te er å set­te en fast bred­de som gjel­der for alle.

Dess­uten er stør­rel­sen på bli­der som regel fast, de end­rer ikke på seg når man drar i vin­du­et. Når tekst­leng­den end­res og bil­de­ne står fast, øde­leg­ger det­te rute­net­tet som side­ne er basert på, og med rute­net­tet for­svin­ner este­tik­ken også.

En gyl­den mid­del­vei

Som ellers i livet er det­te to løs­nin­ger som har sine for­de­ler og ulem­per, og man må vel­ge den ene eller den and­re. I alle fall fore­lø­pig, men det er også en gyl­den mid­del­vei under byg­ging! Alle moder­ne nett­le­se­re lar deg nem­lig set­te en fast mini­mum- og mak­si­mum­bred­de som ram­mer for siden å fly­te innen­for. Pro­ble­met er at fak­tisk over 90 pro­sent enda ikke bru­ker en moder­ne nett­le­ser. Inter­net Explo­rer er nem­lig over tre år gam­mel, og kan ikke len­ger kal­les moder­ne. Og så støt­ter den hel­ler ikke sli­ke fines­ser, noe alle de and­re gjør.

Hel­dig­vis går det an bru­ke en stil­byt­ter, som blant annet kan gi den besø­ken­de val­get mel­lom fly­ten­de eller fast bred­de. Det­te er nok den bes­te løs­nin­gen mens vi ven­ter på at den gyld­ne mid­del­vei­en skal bli far­bar for folk flest.