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.
- linnux
- 4 yorum var
- 08 Nisan 2007 11:28
« önceki yazı itheme |
sonraki yazı » citizentube [politik youtube] |
Yorumlar
valla fikri çok beğendim. CSS gibi bir mantıkla yazılan bir satır imaj olarak oluşturulabilir.
basit bir editor yeterli üstelik
<image type="code" shape="triangle" border1=black,1px border2=yellow,2px text="Selam" text-position=center >
temel bişi olabilir. hmm sevdim
Hem açık kaynak, hem lisanssız, hem kolay
hem de yeniliklere açık.
Ayrıca her sayfa yüklenişinde,
aynı grafik dosyalarının tekrar tekrar yüklendiğini
gözönüne aldığımızda, veri iletişiminde
oldukça ciddi bir tasarruf olacak.
Hayır ems, yapın da görelim değil.
Birlikte yapalım ve görelim.
Çünkü bunun yerleşöesi için geniş kitlelerce
kabul edilip kullanılması gerekir.
Bunun için de bir başlangıç yapmalıyız.
Bir firefox eklentisi olabilir mesela.
Genel kodlama kavramlarıyla kendi etiketlerimizi yazacağız.
Zaten benim yukarıda verdiğim etiketlerdeki kodlar tanıdık.
Bunun gerçekten çok yaralı olacağını düşünüyorum.
Tabii ki bu yönde adım atılmazsa, hiçbir aşama da kaydedilmez.
pillinetwork sitelerine yorum ekleyebilmek ve daha fazlası için, üye olun ya da giriş yapın.
İlgili Yazılar
Bu Yazıyı Tutanlar
Beğendiğiniz bir yazıya "tuttum" demek için başlığın yanındaki yıldıza tıklayabilirsiniz.

