Melkoisia vinkkejä web-suunnitteluun

sIFR

Kirjoittanut Samuel Hovi 15.05.2008 kategoriaan

Pienenä ohjelmavinkkinä esitellään sIFR, joka on hakukoneystävällinen tapa käyttää erikoisia fontteja nettisivuilla.

Kyseessä on kätevä vaihtoehto otsikoiden esittämiseen kuvana.

Mikä sIFR?

sIFR eli Scalable Inman Flash Replacement, on oikeastaan CSS–, JavaScript– ja FLA-tiedostoista koostuva paketti, joka renderöi nopeasti Flashilla erikoisemmista fonteista otsikoita ja tekstinostoja, joita pystyvät lukemaan myös kännykkäselaajat, hakukoneet, ruudunlukijat ja muut eri tavoin rajoittuneet selaimet. sIFR vaatii toimiakseen Flash 6:n tai uudemman sekä JavaScriptin ja mikäli näitä ei ole käytössä, käyttäjälle näkyy normaalia tekstiä. sIFRillä luotuja tekstejä pystyy kopioimaan ja liittämään samalla tavalla kuin normaaliakin tekstiä.

Miten sIFRiä käytetään?

Lataa sIFR, pura tiedosto ja ihmettele sisältöä hetken verran. Zip-paketin mukana tulee läjä tiedostoja, joista tärkeimmät ovat sifr.fla, sIFR-screen.css ja ifr.js. Juuri näihin tiedostoihin perehdymme seuraavissa kappaleissa.

FLA -tiedoston muokkaaminen

sIFRin käytössä tarvitsee Flash Pron, jolla avataan sifr.fla -tiedosto ja määritellään fontti jota otsikoissa käytetään. Jos ei omista Flashia, voi tämän tilalla käyttää OpensIFRiä joka on saatavilla sekä Windowsiin että Mac Os X:n. FLA -tiedostossa vaihdetaan oletustekstin fontti ja exportataan se nimellä fontname.sfw Flashin versiolla 6.



CSS -tiedosto

Kuten sanottua, CSS-tiedostoja tulee paketissa muutamakin, mutta tärkein niistä on sIFR-screen.css. Kopioi tyylitiedostossa olevat rivit omaan tyylitiedostoosi ja lähde muokkaamaan CSS:ää. Tärkein huomioitava kyseisessä CSS-tiedostossa on viimeiset neljä kohtaa, jotka näyttävät suurin piirtein tältä:

.sIFR-hasFlash h2 {
visibility: hidden;
letter-spacing: -9px;
font-size: 55px;
}

Nämä rivit määrittelevät sen, miltä teksti näyttää, mikäli käyttäjällä ei ole Flashia tai JavaScriptia. Kannattaa siis tutustua huolellisesti näihin riveihin ja asettaa sellaiset arvot, millä sivu tulee näyttämään hyvältä, vaikka sIFR ei olisi käytössä.

Peruskäytössä JS-tiedostolle ei tarvitse tehdä mitään muuta kuin sisällyttää se XHTML-tiedostoon.

sIFR saattaa jäädä hyödyttömäksi, kun selaimet alkavat tukea kunnolla CSS3:n Web Fonts -laajennusta, mutta siihen asti kyseessä on kätevä vaihtoehto otsikoiden esittämiseen kuvana.

Kommentointeja Tagit: css, flash

Kommentoinnit