Kebmans blogg

Q-taggen

Posted in Data, Webdesign by kebman on 11/09/2013

Anbefaling for hvordan bruke Q-taggen innen HTML: Ikke i det hele tatt!

Meningen bak Q-taggen er å definere et kort sitat, i følge W3Schools. W3C forklarer Q-taggen som et element som representerer formulering av innhold sitert fra en annen kilde. Ren skrift representerer dette med et sitat-tegn, enten engelske hermetegn («»), eller norske gåsøyne («») og anførselstegn (‘’). Med andre ord finnes det allerede fullgode typografiske tegn for dette.

Selv om visse maskiner har vansker med å vise frem disse tegnene, kan alle maskiner med tilgang til kodetabellen UTF-8 vise disse fram riktig. Med det som basis anbefaler jeg alle som vurderer å bruke Q-tagg om å heller droppe det og bruke de tegnene vi har tilgjengelig.

Q-taggen var et forsøk fra W3C om å få vist frem korte sitater riktig på alle typer maskiner, da ikke alle maskiner har denne typen tegn. Problemet er at de fleste nettlesere viser dette fram med engelske hermetegn, som skaper et problem når teksten er europeisk, eller når sitatet også inneholder et «undersitat». Som resultat blir man nødt til å skrive ekstra CSS-kode om man vil at teksten skal rendres riktig av nettleseren, noe som er helt unødvendig når du allerede vet hvordan du bruker tegnene riktig. Enda mer unødvendig blir det også når du i HTML-en enkelt kan angi hvilken kodetabell teksten du publiserer skal tolkes med.

Bruker du HTML5 er det bare å sette inn denne kodesnutten i hodet av koden din:

<meta charset="utf-8" />
Reklamer

Norske tegn med HTML

Posted in Design, Hobby, Internett, Scripting, Teknologi, Typografi, Webdesign by kebman on 02/07/2012

Mange har problemer med å få norske tegn og bokstaver første gangen de koder HTML. Med HTML5 er løsningen enklere enn noen gang.

Basiskoden for å få gyldig HTML5 ser slik ut:

<!DOCTYPE html>
<html>
<head>
	<title>Min tittel</title>
</head>
<body>
	<p>Min første hjemmeside.</p>
</body>
</html>

Kodetabell

Men fortsatt ser de norske bokstavene skikkelig rare ut når du åpner HTML-filen i en nettleser. Det kommer av et eldgammelt problem med datamaskinene; at de var laget kun for det engelske alfabetet. For å korrigere problemet, laget produsentene ekstra kodetabeller som også inneholdt europeiske tegn – deriblant vår egen æ, ø og å – men nettleserne tar bare høyde for disse om du fysisk angir riktig kodetabell med HTML-kode.

Du angir riktig kodetabell ved å legge inn følgende HTML-kode i hodet av HTML-dokumentet ditt:
<meta charset="utf-8" />

Hele HTML-koden vil da se slik ut:

<!DOCTYPE html>
<html>
<head>
	<title>Min tittel</title>
	<meta charset="utf-8" />
</head>
<body>
	<p>Min første hjemmeside.</p>
</body>
</html>

Her er kodetabellen UTF-8 fra Unicode brukt. Dette er den kodetabellen som har har de vanligste europeiske tegnene i seg, og derfor også den kodetabellen som er mest utbredt.

Feilsøking

Om norske tegn fortsatt vises feil er det stort sett en av to grunner til det:

  1. Det er ikke angitt noen kodetabell i HTML-koden, eller feil tabell er angitt.
  2. Filen er lagret med en annen kodetabell enn den du har satt i HTML-koden i tekstredigeringsprogrammet du har brukt.

Selv om du angir riktig kodetabell i HTML-koden, hjelper det ikke om du har lagret selve datafilen med feil kodetabell i redigeringsprogrammet. Noen redigeringsprogram har en fast kodetabell de bruker, men i de fleste programmene kan du angi hvilken kodetabell selve datafilen din skal lagres med. Pass på at det da at du har valgt UTF-8, eller Unicode (UTF-8) som tegnformat før du lagrer filen. Hvor du endrer det, er forskjellig fra hvilket program du bruker, men som regel finnes det i innstillingene.

I redigeringsprogrammet jeg bruker, TextWrangler, er det angitt på barren under tekstredigeringsvinduet, og det er bare å klikke på teksten, så kommer det en liste med alle kodetabellene jeg måtte ønske.

Tegnkoding i xHTML

Med xHTML er det litt mer plunder å få norske tegn.

For det første, trenges XML-versjon sammen med kodetabell helt øverst i dokumentet, før !DOCTYPE, slik:
<?xml version="1.0" encoding="UTF-8"?>

Og endelig må det velges riktig kodetabell for HTML-koden i hodet, slik:
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />

CSS syntaks

Posted in Teknologi, Webdesign by kebman on 09/11/2011

Et lite oppslag på hvordan CSS skal skrives.

Overordnet syntaks

Engelsk: selectors {declarations}
Norsk: velgere {deklarasjoner}

CSS består av velgere og deklarasjoner. Velgeren består av de  HTML-elementene man ønsker å velge. Deklarasjonene består av de designforandringene man ønsker å gjøre på valgte element, avgrenset av krøllparenteser.

HTML-elementer man kan velge er alle taggene, samt visse attributter og pseudoklasser.

Underordnede HTML-elementer arver design laget for overordnede HTML-elementer, så gjør du tekstfargen til body rød, vil også tekstfargen til p og h1 bli rød.

Generell syntaks

Engelsk: selector {property: value;}
Norsk: velger {egenskap: verdi;}

Som du kan se består hver deklarasjon av en egenskap og en påfølgende verdi. Hver deklarasjon skal avsluttes med semikolon.
Det finnes mange egenskaper du kan forandre design til. Farge (color) er bare én av dem. Sjekk ut W3Schools for mer om det.

Eksempel

h1, h2 {color: red; font-family: verdana, sans-serif;}

Her er elementene h1 og h2 valgt. Deretter er egenskapene «farge» (color) og «font familie» valgt og gitt en nye verdier. Som du ser kan man velge flere HTML-elementer, og velge flere egenskaper man gir nye designverdier.

Krøllparentes

På Mac trykker du shift+alt+( for å få krøllparentesen {. På PC trykker du AltGr+(.

NB! CSS skrives på American English, og derfor brukes f.eks egenskapen color (am. eng.) og ikke colour (brit. eng.).

Gåseøyne på nett

Posted in Teknologi, Typografi, Webdesign by kebman on 14/10/2011

Det er en del ting som skiller norsk typografi fra andre lands typografi, og spesielt engelsk og amerikansk typografi. Kanskje den viktigste tingen her er vår bruk av gåseøyne fremfor hermetegn. Likevel bruker folk flest hermetegn, men det er faktisk feil.

Grunnen til at hermetegnet («») kom i bruk, har nok med import av en og annen skrivemaskin å gjøre, og sist men ikke minst ignorant kulturimperialisme fra Microsoft. Skriveprogrammet deres, Word, skriver nemlig hermetegn som standard istedenfor gåseøyne («»).

Så, hvordan fikser vi dette på nett?

NB! Etterfølgende avsnitt er foreldet. Nå holder det å skrive inn riktig tegn, gitt at du har satt riktig kodetabell. Mer om det i tilleggsavsnitt nederst. Bare les mer om du er spesielt interessert i hvordan bruke det ikke anbefalte Q-elementet innen HTML.

Det finnes faktisk et eget HTML-element for setningssitater, det såkalt Q-elementet, men bruker du det uten CSS-design, vil du fortsatt få amerikanske hermetegn som standard.

Sånn funker det i HTML: Q-melk er bedre enn Tine melk.

Og slik blir resultatet, uten CSS-design: Q-melk er bedre enn Tine melk.

Du må kalle opp Q-elementet i CSS og bruke noen smarte pseudoklasser for at det skal bli korrekt, slik:

q:before {content: "«";}
q:after {content: "»";}

Så blir det endelig seende slik ut i nettleseren: «Q-melk er bedre enn Tine melk.»

Problemet er bare at dette ikke fungerer i eldre versjoner av Microsoft Explorer (MSIE eller bare IE), noe vi Mac-brukere selvfølgelig driter i. Heldigvis gjelder dette bare versjoner frem til IE7, og disse versjonene brukes bare av noen veldig få nå for tiden. Anyway, skulle du være spesielt interessert, så sjekk disse mulige løsningene:

Er du bare interessert i å få gåseøyne kjapt på Mac-en din, trykk shift+alt+V eller B.

Etter å ha gjort litt mer research, kan jeg ikke anbefale å bruke Q-elementet i det hele tatt. Grunnen er ganske enkelt at gåseøyne er helt spesifikke tegn, så å løse slik tegnsetting med en tagg er like dårlig som å bruke en escape-kode, slik som &laquo; og &raquo;. Istedenfor bruk riktig tegnkoding (eng: encoding) i din HTML. I HTML5 kan du for eksempel sette inn denne taggen i hodet <meta charset="utf-8" /> så kan du bruke både gåsøyne og æ, ø og å i teksten din helt uten problemer. I XHTML er det bittelitt mer jobb, men det lar seg også fint gjøre der.

Ting jeg hater med Adobe Flash CS4

Posted in animasjon, Programvare, Teknologi, Video, Webdesign by kebman on 11/07/2009

Adobe Flash CS4: Det er et animasjonsprogram, ikke sant? Hvorfor er det så uintuitivt og vanskelig å bruke, da? Greit, det er mest for webdesign, og det er lett å skripte, men her er noen ting jeg virkelig ikke liker.

Det er ikke et særlig smart program. Om jeg vil bruke ting som tween, for eksempel, så må jeg konvertere nesten alle tegninger om til symboler. Det meste unntatt tekst, av en eller annen grunn. Det er i tillegg random, noe som også er kjipt. Hvorfor kan ikke programmet bare gjøre dette automatisk når du ønsker å lage en tween, for eksempel?

Skal du lage en objekt-tween, derimot, er det viktig at man ikke lager et symbol. Dette er veldig uintuitivt, og dermed skaper det stort sett bare frustrasjon hos meg, spesielt når jeg må bruke tid på å lære dette – noe jeg kunne unngått om programmet var bare bittelitt smart.

Så er det dette med tweening keyframes, da… Har du satt en motion tween keyframe, da er den hugget i stein. Vil jeg forandre posisjonen på en slik keyframe i tidslinjen, må jeg som regel bare slette den og begynne helt fra nytt.

Hvordan flytter man en slik keyframe, egentlig?

Hvordan flytter man en slik keyframe, egentlig?

Dette er fryktelig frustrerende, og nesten unikt for Flash CS4. I stort sett alle andre animasjonsprogram kan man flytte på keyframes som man ønsker, til og med innen Adobes egen serie av programmer hvor dette er relevant kan man det, som i Premiere og After Effects. Så, hvorfor må det være så vanskelig i Flash? Greit, kanskje det går an allikevel, men jeg har uansett ikke funnet ut hvordan enda, ny som jeg er, og dermed er det fortsatt alt for uintuitivt til at jeg synes det er bra. Hvorfor i helvete kan ikke bare Adobe holde seg til ett paradigme når det kommer til bruk av lag, keyframes og tidslinjer i alle programmene?

Nei Adobe, dette er frustrerende. Skjerpings!