Jeg satt nettopp nå og gikk gjennom utformingen av bloggen min, og ser en del begrensninger i malveilederen som følger med Blogger. Jeg er nemlig en sterk tilhenger av flytende design, hvilket vil si at siden er bygd opp variabler som står relativt til hverandre. Da jeg skrev koden til Åndalsnes taekwon-do-klubbs hjemmeside, benyttet jeg meg av det til alt. Størrelsen på sidens elementer var alle definert i prosenter, mens alt som forholdt seg til tekst var definert i em-størrelser.
Å skrive siden på den måten gir to fordeler. For det første er den fullstendig kompatibel med alle typer enheter (under forutsetning at leseren følger W3C-standardene – så glem Internet Exploder), som mobiltelefoner, PS3, datamaskiner eller hva det måtte være. Siden skalerer seg, både tekst og bilde, automatisk etter skjermens størrelse. For det andre gjør slik design det mulig for de som har fysiske utfordringer å hanskes med når de skal sjekke ut de elektroniske bølgene, å få utnyttet leserne de bruker, slik at også de kan ha glede av å siden ens.
Det er ikke så mye som skal til. Start med å lære riktig bruk av de forskjellige grunnelementene i html.
Her er noen enkle eksempler:
- Sett avsnitt innenfor avsnittsmarkørene
<p>og</p>, i stedet for å bare bruke<br />. Sistnevnte er bare et linjeskift, ikke noe annet. Det som kommer under det ovenstående kan like gjerne høre til det samme avsnittet. Vi ser forskjellen, men en som skal høre på det (altså en som bruker en oral nettleser), vil ikke høre noen som helst forskjell. - Markér bildene skikkelig ved å gi dem alt-informasjon. Her er et eksempel:
<img src="http://www.wikimedia.com/image.jpg" alt="Bilde av et bilde fra Wikimedia" />. Dersom bilder av en eller annen grunn er slått av i nettleseren til den som sjekker ut sida di, vil han likevel vite hva det er bilde av. - Bruk
<q>og<blockquote>; til sitater. Hvis du tilføyercite=""inni dem, har du kodet inn en referanse også (som søkemotorene finner –altså flere treff på sida di). - Husk at html har en egen kode for overskrifter. Å sette overskrifta i
<strong>eller<em>er ikke det samme som å sette den i<h1>til<h6> - Ikke kod for Internet Explorer! Skriv koden din for en av de andre, velfungerende nettleserne, som Opera, Chrome eller Mozilla Firefox. Legg deretter inn de nødvendige hackene for å få det til å fungere i IE slik det allerede gjør i alle de andre nettleserne. Under halvparten av de som leser denne bloggen bruker IE (heldigvis), og jeg synes faktisk en anelse synd på dem alle sammen.
- Ligg unna utdatert kode. For sikker informasjon, på en lett tilgjengelig måte, anbefales det at du tar en tur innom W3Schools' hjemmeside.
Det er sikkert en hel del andre ting jeg kunne nevnt, men klokka er morgen, og jeg burde legge meg. God natt, alle sammen.
Har mye å lære når det gjelder koding. Jeg har brukt Wordpress til bloggen min, og dermed fått tilgang til noen enkle trinn (og et veldig bra support-system) for å gjøre utformingen ok.
SvarSlettDet finnes "sandkasser" hvor man kan gjøre alt selv fra grunnen av, men det har jeg ikke turt å prøve meg på ennå. Men kanskje en dag?
=)
Selv velger jeg alltid å skrive koden selv når jeg kan. Det er ikke så mye som skal til. Nå vet jeg ikke hvordan det er med WP*, men med Blogger kan du selv velge om du vil skrive i et tekstbehandlingslignende vindu, i et kodevindu der koden din tolkes, eller om du i sistnevnte vindu vil skrive all koden selv. Jeg velger nummer to. Det gir meg kontroll over hvordan teksten leveres til brukeren, samtidig som jeg slipper å skrive all koden rundt som jeg ikke har interesse av. I tillegg har jeg laget en del egne klasser i stilarket, så når jeg eksempelvis vil tilføye en kommentar til noe, skriver jeg ganske enkelt class="kommentar", og får kommentaren ferdigformatert.
SvarSlett* I de gode gamledagene, var WP WordPerfect – den gangen man ikke brukte mus i tekstbehandlerne.