eski köye yeni adet! yeni bir etiket icat edelim!

linnux — Sun, 08 Apr 2007 08:28:00 GMT

Html'nin gelişimi ya da "güdük kalması" durumu malumdur.
Grafik dünyasında da benzer bir durum sözkonusu.
Hakkı Öcal'ın "gif, jpg, png ve svg" resim formatları ile ilgili
yazısını okuduktan sonra gif nefretim biraz daha arttı.

GIF Öldü, Yaşasın SVG ve PNG
(Sayfanın aşağısındaki başlık.)
Şu yazıyı okuduktan sonra ise ilham perim fısıldadı...

"Eski köye yeni bir adet getirelim!"

Neden yeni bir etiket icat etmiyoruz?
Neden bir etiket ve biraz kodla küçük resimlerimizin
yerini tutacak görüntüler oluşturmayalım?
Neden küçük resim ihtiyaçlarımızı basit bir kodla karşılamayalım?
Küçük resimler için niye resim dosyası yüklemek
zorunda kalalım ki?

Benim aklıma {xmg} geldi.
Açılımı
"Genişletilebilir Hareket Yetenekli Grafikler"
veya başka birşey olabilir.
(
Amerika'lı dostlarımızın kısaltmalarına benzedi :)) )

Birkaç basit örnek vereyim.

{xmg text-style="14"} sprey {/xmg}
Bu etiketle, xmg etiketleri arasına yazdığımız yazımıza
gölge veriyoruz.
Text style olarak 14'ü seçtiğimizde yazımız,
sprey boyayla yazılmış gibi görünecek.

{xmg text-font-style="marwil"} marwil {/xmg}
Marwil isimli font,
ziyaretçimizin bilgisayarında yüklü olmasa bile görünecek.
Yazılarımızı istediğimiz fontla yazarak,
grafik kullanmadan daha etkili yazılara sahip olacağız.
Kendi elyazımızı bile kullanabileceğiz artık...

{xmg poly="rect" width="124" height="36" bgcolor="red"}
dikdörtgen {/xmg}
Zemin rengi kırmızı olan bir dikdörtgen.
Başlangıç için yeterli değil ama,
hayal gücü geniş olanlar için müthiş fikirlerin habercisi.

{xmg poly="circle" r="62" bgcolor="blue"}
daire {/xmg}
Daire çizmek hiç bu kadar kolay olmamıştı!

{xmg poly="rect" width="50" height="40"
color="16" bitmap-stream="f4af7......d4ca7"}
ilk resmimiz {/xmg}

İşte ilk resmimiz!
50 px genişliğinde, 40px yüksekliğinde 16 renk
kullanarak çizdiğimiz bir mini resim...
Sadece bir etiket ve harf-rakam dizisi!
Yukarıdaki resmimizin herbir noktası için;
"0" ile "f" arasında 16 değerden birini veriyoruz.

Böyle bir kodun sayfamızdaki boyutu sadece 1.69 KB!

Burada g, h, gibi diğer harfleri ve karakterleri de kullanarak
daha çok renk içeren daha büyük resimleri de
sadece birkaç KB boyutundaki kodumuzla görüntüleyeceğiz.

{xmg slide-style="fly" coords="00x100y1,00x200y2..."}
{/xmg}

İşte basit kodlarla neler yapabileceğimizin kanıtı!
Hazırladığımız resmi, sayfamız üzerinde
dilediğimiz gibi dolaştırabiliyoruz! İyi uçuşlar!

{xmg normal= onmouseover= onclick= onmouseout=}
{/xmg}

Resimlerimize bağlantı verdiğimizde, java script ve css
kullanmadan, özgürce biçim değiştirme imkanı verelim.

{xmg height="30" omo-splash='down; speed:12; height:60' }
{/xmg}

Menümüzün üzerine fareyle geldiğimizde kayarak
açıldığını görüyoruz.

Sonuç olarak, küçük grafiklerimiz ve basit
flash öğeleri yerine,
yeni geliştireceğimiz özel etiketleri kullanarak
hem yüklenen dosya byutunu azaltacağız,
hem de ayrıca grafik doyası indirmeden
sayfamızda resim göstermiş olacağız.

--------------------------------------

Not: süslü parantezler yerine açılı parantezler gelecek tabii ki.

ilgili yazılar

Bu yazı linnux tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

bildirgec.org - etiketler: hediyeli firefox addon programlama yarışması

eski köye yeni adet! yeni bir etiket icat edelim!