sIFR – veselīga alternatīva web fontiem

Aizvakar mēģināju atrast kādu alternatīvu veidu kā likt atpalikušiem pārlūkiem, lasi, ēzelītim, saprast pseidoklasi :focus. Googlojot uzskrēju šai lapai, kur ir aprakstīts :focus pielietojums. Dzīvs pseidoklases :focus piemērs ir apskatāms tepat komentāru lauciņos – ieklikšķinot kādā no lauciņiem nomainīsies tā izskats. IE lietotāji gan var nesaspringt, jo arī šī “fīča” viņiem ir liegta – vienkārši pārlūks to neatbalsta. Bet ne par to ir stāsts.

sIFR

Vakar pārskatot pārlūkā atstātos atvērtos tabus, pievērsu uzmanību arī iepriekš minētās lapas dizainam jeb precīzāk – rakstu virsrakstiem, nevis lapas saturam, kas mani interesēja iepriekšējā dienā. Nu lūk, lapā bija izmantoti stilīgi fonti. Tā kā webam paredzēto fontu izvēle ir diezgan trūcīga un webdizaineriem nav, kur izvērsties, tad dotais risinājums izraisīja lielu interesi kā rezultātā apskatījos lapas kodu, lai uzzinātu kā tas ir realizēts.

Iezīmējot interesējošā apgabala daļu un izvēloties “View Selection Source”, pārlūks uzģenerē tieši tā apgabala HTML kodu un izpilda visus skriptus kā rezultātā piedāvā apskatīt nevis to, ko mēs redzam apskatot vienkārši lapas izejas kodu, bet gan to, ko mēs redzam jau, tad kad visa lapa ir dinamiski uzģenerēta. Tāda neliela atkāpe tiem, kas varbūt nebija ievērojuši šo, Firefox vai jebkura cita Mozilla bāzēta pārlūka, iespēju. Nu lūk, šajā koda gabaliņā pamanīju, ka visas H1, H2 un H3 birkas un to saturs tiek aizstāts ar speciālu skriptu un Flash.

Nedaudz lirikas

Principā es neesmu Flash tehnoloģijas atbalstītājs, teikšu pat vairāk – esmu ar visām četrām pret tās izmantošanu webā. Jā, paskatīties gaumīgi izveidotu mākslas darbu, pie kura izstrādes kāds manjaks ir svīdis mēnešiem ilgi, to var, bet cik ilgi bolīsies uz vienu un to pašu filmiņu vai stilīgo bildīti? Interneta galvenā jēga ir informācija un tikai pēc tam skaistas prezentācijas. Cik atceros, tad Latvijā veidotajos Flash bāzētajos projektos, ja tādi vēl pastāv, informācijas atjaunošana notiek ļoti reti. Attiecīgi šie resursi ātri tiek aizmirsti, jo ir nelietderīgi. Tas gan nav tāpēc, ka Flash nepiedāvātu tādu iespēju, ģenerēt dinamisku saturu, bet gan tāpēc, ka ir liels profesionāļu trūkums, kas veido šos Flash projektus. Tā visādi iesācēji saštancē “smukus” un smagus Flash klipus un sakrāmē to savā lapā. Daile. Rezultātā Flash asociējas ar kaut ko smagu, līdzīgi kā Java apleti, kas ēd gan trafiku, gan arī sistēmas resursus un bremzē visu pasākumu. Pēc tādām klimpām skaidrs, ka lietotājs mēģina to visu atslēgt, lai lieki nebendētu sev nervus. Paldies, bet es kaut kā iztikšu bez Flash, jo man tāpat ir labi…

Par pašu tehnoloģiju

Bet tagad par to daļu, kas man šķiet pieņemama saprāta robežās un pat atbalstāma. Apmeklējot šo lapu lietotājs pat var nepamanīt Flash esamību tajā. Kāpēc? Tāpēc, ka Flash tiek izmantots tikai tik daudz, lai izceltu atsevišķus dizaina elementus nevis, lai parādītu cik daudz dažādus pribambasus var sabāzt vienā “mazā” Flash klipiņā dēļ kura lietotājs spļaudās visu atlikušo dienu.

Veidojot mājas lapu dizainus, mākslinieki parasti eksperimentē ar dažādiem fontiem. Ja dizainā ir nepieciešams stilīgs virsraksts kādai sadaļai, tad tiek izmantotas bildes, jo ar standarta fontiem neko izcilu nevar izveidot. Tad nu speciālisti domā veidus kā izveidot gan semantiski korektu, gan lietojamu un tajā pašā laikā arī stilīgu lapu. Atsevišķas birkas tiek nomainītas ar bildēm un paši teksti apslēpti, virsraksti tiek ģenerēti ar PHP skriptiem un tādā stilā. Katrai no šīm tehnoloģijām ir gan plusi, gan arī mīnusi. Pārdomas par dažu šo tehnoloģiju izmantošanu ir atrodamas Paul James blogā.

Jaunākā no šīm tehnoloģijām, kas piedāvā iespēju nomainīt primitīvos weba fontu izskatu uz dizainera iecerēto, ir IFR (Inman Flash Replacement iepriekš zināma kā Flash Image Replacement vai The Other FIR).

Other popular image replacement techniques are great for logos, top-level navigation and headlines on smallish company and personal sites but have far too much production overhead for larger sites with 100+ pages and primarily dynamic content.

By using a dynamic Flash movie (much like ESPN.com), some slick JavaScript and well-structured mark-up the same consistent branding can be achieved while greatly reducing production time and preserving the cleanliness of the mark-up.

Šī tehnoloģija ir laba ar to, ka tā tiek piedāvāta kā alternatīva un nav primāri nepieciešama, lai pārlūkotu lapu, atšķirībā no parasta Flash bāzēta saita, kuru nav iespējams pārlūkot, ja lietotāja pārlūkā nav Flash atbalsts. IFR gadījumā visus papildus vizuālos uzlabojumus redz tikai tie lietotāji kuru pārlūki atbalsta CSS, JavaScript un Flash. Pārējiem lietotājiem pārlūks attēlos pliku tekstu bez skaistā noformējuma.

Bet ar IFR nekas nebeidzās, jo šī tehnoloģija tika pilnveidota un parādījās sIFR (Scalable Inman Flash Replacement). Par šīs tehnoloģijas tapšanas vēsturi un dažādām tehniskām niansēm var palasīt Mike Davidson rakstā. Labākam ieskatam var paskatīties piemērus šeit vai arī šeit un atbilstošu lapas izejas kodu.

Uz doto brīdi ir pieejama sIFR otrā beta versija, ko var arī lejupielādēt un paeksperimentēt. Pagaidām izskatās diezgan progresīva un atbalstāma tehnoloģija. Iespējams, ka pilnveidojot šo paņēmienu arī Flash spēs atgūt savu pozīciju un tiks arvien biežāk izmantots mājas lapu dizainu elementos. Laiks rādīs.

20 thoughts on “sIFR – veselīga alternatīva web fontiem

  1. gusc

    Isteniba loti interesants piegajiens. Ari es lidzšim mocijos ar visadiem GD lib un vienkārši photošop graizīšanas paņēmieniem, izmanotju tikai bildes. Šajā variantā man patīk iespēja iezīemet un kopēt tekstu, bet tomēr kā jau beta tur kautkas neiet – šad tad bremzē, šad tad neiezīmejas tas ko vēlos.
    PS. nemaz neiznāju par to Firefox fīču 🙂

    Atbildēt
  2. whatever

    (Inman Flash Replacement iepriekš zināma kā Flash Image Replacement vai saīsinājumā FIR).

    saīsinājumā The Other FIR, nevis vienkārši FIR (kas būtu Fahrner Image Replacement)

    Atbildēt
  3. coolynx

    jurisv:

    Right now, embedding fonts the way this tutorial describes is only compatible with Internet Explorer 4 and above

    Šī iemesla dēļ tāda fontu embedošana nekļūs populāra. 🙂

    Atbildēt
  4. Delfins

    nu sarry, ja vajag izvadiit 2-5 burtu textu , man jaraxta tas kods ?
    urgh. jo vienkarshaka pasaule, jo ir vieglak to uztvert

    Atbildēt
  5. Pow

    Konkreetie virsrakstu fonti lapaa smird (antialiasings). Pienjemu, ka to var labot, rendereejot ar krutaaku engini fontus, bet nezinu gan. Diez vai tie fonti staavees klaat tiem, ko renderee sisteemas engine (ja taa ir labi nokonfigureeta).
    Taapeec — pastilot var virsrakstos, bet visu tekstu ar taadiem taisiit buutu paskarbi – lietotaaji acis izmezgjiitu.

    Atbildēt
  6. sas

    CLX: nu un, ka zem 4tajiem browseriem neiet? css arii neiet 🙁 manupraat labaak ir embedot fontus (ja tieshaam jurisv pasaakums darbojas) nekaa flashoties, vecajiem browseriem ir zinaamas metodes, kaa iebarot bezcss saturu. atbalstu ar visaam piecaam css un jaunas veesmas un standartus un visu ko, bet nekas nav gatavs, viss suukaa, visur vajadziigi hacki un chiiti un for god sake flashi un javascripti. un veel peec taa visa microsoft mums uzkakaa un mees ejam peec uudens naakamos piecus gadus 🙁 grrrr.

    While sIFR is a liberating solution, it clearly falls into the category of “things which shouldn’t have to be done”. Not coincidentally, this is the same category a lot of things on the web fall into.

    Atbildēt
  7. Kaklz

    Būtībā šim risinājumam ir gandrīz tāda pati problēma, kā bilžu izmantošanai virsrakstiem. Nav iespējas iezīmēt tekstu kopā ar virsrakstu – var iezīmēt atsevišķi vai nu tekstu vai arī virsrakstu (pie tam virsraksta iezīmēšana flash klipā diezgan iebremzē.

    Atbildēt
  8. Pow

    neesmu nekaads web gigants, bet vai tad nevar rakstiit "font face=" un dajebko?
    protams, ka tas neies, ja klientam taada fonta nebuus. Bet _nekur_ jau nau teikts, ka klientam ir jaabuut Arial, Verdana u.c. microsoft fontiem (Bitstream-Vera free ttf fonti rullee nevaldaami).

    Atbildēt
  9. Mr.Venom

    man tomēr vairāk imponē to pašu izdarīt ar php GD (iehavot to nestandarta fontu, uzliekam tekstu, noģenerējam bildi un to iekešojam)

    Atbildēt

Atbildēt uz komentāru coolynx Atcelt atbildi

Tava e-pasta adrese netiks publicēta. Obligātie lauki ir atzīmēti kā *