bildirgec.org - 90alper90 - beğendikleri

Her sorunuza cevap veren robot hayal değil!

90alper90 — Sat, 19 Sep 2009 08:15:00 GMT

Daha önce de Bildirgeç'tegösterildiği gibi Wolfram Alpha, bir arama motorudur. Ancak Google gibi arama motorlarından farklı olarak doğrudan cevap vermektedir. Bilim-kurgu filmlerinde gördüğümüz gibi direk olarak sorduğumuz soruya cevap verecek olan robotların taslağıdır bir nevi.

Örneğin Ankara yazdığınızda Ankara kelimesinin geçtiği internet sitelerini değil, doğrudan Ankara ili ile ilgili bütün bilgileri vermektedir. Ancak bütün numarası bu değildir tabii ki. Çok daha gelişmiş özellikleri bulunmaktadır ki yazımda bunlara değineceğim.

Öncelikle Wolfram Alpha'nın gerçekten saygıdeğer bir site olduğunu anlamamız gerekiyor.

Stephen Wolfram gerçekten de saygı duyulası bir insan ve özellikle Mathematica adlı programdan gerçekten iyi para kazanan başarılı bir işadamı.

Şimdi gelelim Wolfram Alpha kullanımına:

-Öncelikle, basit matematiksel işlemleri yapabileceğiniz gibi Mathematica ile yapabileceğiniz karmaşık matematiksel işlemlerin birçoğunu buradan yapabiliyorsunuz. Örneğin;

Plot komutunu kullanarak bir denklemin grafiğini çizdirebiliyorsunuz:

x^3 - 6x^2 + 4x + 12 denkleminin grafiği

Ayrıca, tarihlere göre sorular da sorabiliyorsunuz. Örneğin, 12 Nisan 2007'de Oslo'daki jeomanyetik alan gücünü öğrenebilmek için "geomagnetism Oslo on 12 Feb 2007" komutunu kullanabiliyorsunuz.

Hatta ve hatta bir olayın olduğu tarihteki bir durumu öğrenebilmeniz bile mümkün. "earthquake jfk died turkey" yazdığınızda, ABD başkanı John Fitzgerald Kennedy öldüğü tarihte Türkiye'de olan depremleri size gösteriyor.

Matematiksel işlemler, coğrafi bilgiler arşivinin yanı sıra kimyasal formüller, molekül çizimleri gibi bilgilere de ulaşmanız mümkün. Ayrıca yeni bir özelliğe daha değinelim, karşılaştırmalar yapmanız da mümkün. Örneğin "caffeine vs. aspirin komutu size kafein ve aspirin moleküllerinin karşılaştırmasını veriyor;

Temel özellikler bakımından iki molekülün karşılaştırması

Moleküllerin çizimleri

Sonuç olarak Wolfram Alpha kullanımını bir nebze öğrenmiş olduk. Ancak üzücü olan şu ki şimdilik sadece İngilizce sorabiliyor ve İngilizce cevap alabiliyorsunuz. Tabii Türkçe de sorabilirsiniz ama o zaman cevap alamıyorsunuz. Ancak Wolfram Alpha her geçen gün geliştirilmekte ve yeni bilgiler eklenmekte, ilerde Türkçe de mutlaka eklenecektir. Çünkü Alexa'da sitenin en fazla kullanıcı aldığı 3. ülke Türkiye olarak görünüyor.

Tabi ki insan gibi düşünen, bilgileri insan gibi kataloglayan bilgisayarlar henüz yapılmamış olduğundan bu arama motoruna tüm bilgiler, tüm sorular ve cevaplar elle ekleniyor bu yüzden gelişmesi yavaş oluyor ve bilim-kurgu filmlerindeki gibi insan gibi anlayan ve cevap veren bir robotun yanında biraz ilkel kalıyor.

Bu yazı 90alper90 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

Daha İyi Bir Opera Deneyimi için Bazı Ayar ve Küçük Eklemeler

90alper90 — Wed, 16 Sep 2009 09:23:00 GMT

Opera'nın yaygın kullanılan bir tarayıcı olmamasının önemli nedenlerinden biri de kişiseleştirilememesi olarak belirtiliyor pek çok yazıda ve bildirgec'te elbette. Ama Opera'da da ince ayarlar ve küçük eklemeler yapmak ve bu şekilde daha iyi bir Opera deneyimi yaşamak mümkün. Pek çok Firefox kullanıcısının bu ayarlardan sonra Opera deneyiminden oldukça memnun kalacağını düşünüyorum.

İşte bu yazıda okuyacağınız alt başlıklar:

1. Güvenlik için çerez ve eklenti yönetimi. (No Script Cookie Safe yerine)
2. Reklam Engelleme (AdBlock Plus yerine)
3. Güvenilir Sitelere İzin Verme
4. Özel Butonlar
5. Menü'yü Küçültelim (Tiny Menu yerine)
6. Video İndirme (video downloadhelper yerine)
7. Download Manager
8. Sidebar ve Speed Dial
9. Firefox Eklentileri yerine Opera Widget'ler
10. Mouse Gestures
11. Durum Çubuğu
12. Tema - Opera Arayüzleri

1. Güvenlik için çerez ve eklenti yönetimi. (No Script Cookie Safe yerine)

İlk yapacağımız güvenlik için tüm sitelerin bilgisayarımıza çerez yüklemesinin ve sitelerdeki flash vb. içeriğin engellenmesi. Bunun için izlenmesi gereken adımlar şunlar:

(i) Eklentiler. Araçlar > Seçenekler > Gelişmiş > İçerik kısmında Eklentiler önündeki seçim kaldırılacak.

(ii)Çerezler. Araçlar > Seçenekler > Gelişmiş > Çerezler kısmında Çerezleri asla kabul etme seçeneği seçilecek.

2. Reklam Engelleme (AdBlock Plus yerine)

Firefox'ta AdBlock Plus eklentisi web sitelerindeki reklamları engellemek için bir dizi filtreler içeriyor. Benzer bir reklam engelleme sistemi için Opera'da url.filter dosyası kullanılıyor. Opera'yı ilk kurduğunuzda bu dosyada hiç bir girdi bulunmaz. Yani ilk kurulumdaki hali ile Opera hiç bir reklamı engellemiyor. Biz reklam engellemek için belli sıklıkta güncellenen url.filter filtrelerini internetten indirerek bilgisayarımızda Opera'nın ilgili dizinine kopyalayarak çok başarılı bir reklam filtreleme sağlayabiliriz.

Opera için en güncel url.filter filtre dosyalarını bu adreste (www.fanboy.co.nz/adblock/) bulabilirsiniz.

Opera'da reklam filtreleme hakkında detayları burada bulabilirsiniz.

3. Güvenilir Sitelere İzin Verme

1. başlıkta tarayıcımızı tüm sitelerden çerez ve eklenti alımına kapattık. Bu şekilde kullanıcı adı ve parola girdiğimiz hiçbir sitede oturum açamayız. Bu nedenle güvenilir sitelerin listesinin Opera'ya tanıtılması lazım.

Bunun için Araçlar > Seçenekler > Gelişmiş > İçerik > Site Tercihlerini Yönet butonuna tıklıyoruz. Karşımıza gelen aşağıdaki pencerede güvenilir siteleri EKLE butonuna tıklayarak ekleyebiliriz.

Site ekle penceresinde o site için hem çerezlere hem de eklentilere izin vermemiz gerekiyor. Bunun için yapılacaklar aşağıdaki resimlerde yer alıyor.

Çerezler için sadece o siteden gelen çerezlere izin vererek 3. parti çerezleri engellemiş oluyoruz.

Eklentiler için ise eklentileri etkinleştir seçeneğini seçiyoruz.

Tabii Firefox kullanıcıları hemen bu kadar prosedürle uğraşmak çok zor diyebilirler; ama bunun da kolay yolu var; lütfen bir sonraki bölüm olan özel butonlar bölümündeki Opera için Site Tercihi Butonu yazısına bakın...

4. Özel Butonlar

Opera'da belli seçeneklere hızlı ulaşım ve kullanım kolaylığı için tarayıcımıza özel butonlar (Opera Custom Buttons) ekleyebiliriz.

Örneğin proxy sunucusunun aktiflerştirilmesi yada devre dışı bırakılması, çerezlerin tamamen (global olarak) açılıp kapanması vb.

Her bir seçenek Opera araç çubuğunda bir buton (simge) ile görüntüleniyor.

Özel Buton Nedir?

Özel buton aslında başı <a href="opera:/button ile başlayan bir link. Bu linkte belli görevleri yapan kodlar yer alıyor.

Özel Butonları Nereden Bulabilirsiniz?

Opera için özel butonları OperaWiki sitesinde Custom Buttons sayfasında bulabilirsiniz. Daha gelişmiş butonlara ise OperaWiki'nin Power Buttons sayfasından ulaşabilirsiniz. Ek buton kaynakları ise, bu sayfalarda yer alıyor.

Özel Butonlar Nasıl Yükleniyor?

Özel butonun linkine tıkladığınızda Opera o butonu Kişisel Buton listenize ekliyor.

Sonra sürükle bırak ile o butonu araç çubuğunda istediğiniz bir yere taşıyabiliyorsunuz. İşte benim tarayıcımdaki özel butonlar:

Benim kullandığım Site Tercihlerini Değiştir butonu özel olarak hazırlanmış bir butondur. Bu butonu kullanmak isteyen Opera kullanıcıları aşağıdaki linke tıklayıp bu butonu kendi butonları arasına ekleyebilirler.

Opera için Site Tercihi Butonu

5. Menü'yü Küçültelim (Tiny Menu yerine)

Her ne kadar zaman geçtikçe PC ve laptoplarımızın monitörleri büyüse de ekran da daha büyük alan istiyoruz. Bunun için, günümüzde araç çubukları ve klavye kısayolları ile etkinliği azalan menüleri kaldırarak (küçülterek) yer açmak tarayıcılar arasında popüler bir yaklaşım.

Burada bahsedeceğimiz özel buton ile Firefox'ta Tiny Menu eklentisinin yaptığı işi yapabiliyoruz.

Opera kullanıcıları aşağıdaki linke tıklayarak bu butonu özel butonları arasına ekleyebilir ve sürükle bırak yöntemi ile tek butonluk menülerini oluşturabilirler.

Opera için Menü Bar Butonu

İşte Opera'nın küçültülmüş menülü hali:

6. Video İndirme (video downloadhelper yerine)

Firefox'un sağladığı kolaylıklardan biri de video sitelerinde izlenen videoları kolaylıkla indirebilmek amacıyla kullanılan video download helper benzeri eklentilerdir.

Video indirme için Firefox'ta olduğu gibi
Opera'da da bize kolaylık sağlayan araçlar var. Bu amaçla kullanılcabilecek Opera Widget'ten biri de Flash Video Downloader. Bu - veya benzeri bir - widget ile Opera'da da video indirme işi zahmet olmaktan çıkıyor.

7. Download Manager

Opera'da dosya indirmek için hazır gelen bir dosya indirme yöneticisi yer alıyor. Ancak bu Firefox'taki DownThemAll kadar yetenekli bir dosya indirici değil. Ama Internet Explorer'daki kadar da yeteneksiz değil. Pekçok kullanıcının işini görecek bir download manager bu. İndirme işlemini durdurma, kaldığı yerden devam etme gibi işlevleri yerine getirebiliyor. Ama bu sizin isteklerinizi karşılamıyorsa, Opera diğer tarayıcılar gibi hemen tüm download manager'lar ile çalışabiliyor.

8. Sidebar ve Speed Dial

Bunlar zaten Opera'nın birer özelliği ve Firefox'a buradan uyumlanmış özellikler...

9. Firefox Eklentileri yerine Opera Widget'ler

Firefox'daki eklentilerin tam karşılıklarını birebir bulmak tam olarak mümkün olmasa da Opera'da kullanabileceğimiz çok sayıda işlevsel Opera Widget bulunuyor. Opera kullanıcılarının bunlara göz atmasında yarar var.

10. Mouse Gestures

Firefox'da yer alan FireGestures yada benzeri mouse kısayolları aslında bir Opera özelliğidir. Ek hiçbir şeye ihtiyaç duymadan bu özelliği kullanabilirsiniz.

11. Durum Çubuğu

Opera bir web sayfasında herhangi bir linkin üzerine geldiğimizde ilgili adresi Internet Explorer ve Firefox'un aksine durum çubuğunda değil hemen linkin yanında bir tooltip gibi görüntülüyor. Bu nedenle ben Opera'da durum çubuğu kullanmayı pek tercih etmiyorum. Çünkü durum çubuğunun bulunduğu o yerde başka bir Opera özelliğini kullanıyorum. Bu özellik Progress Bar. Bu bir sayfayı açarken açılan sayfanın toplam boyutunu, bağlantı hızı ve süre gibi bilgileri gösteren bir bar. Bu bilgileri almak isteyenler progress bar'ını aşağıdaki adımları izleyerek açabilirler.

Araçlar > Görünüm > Araç Çubukları > Progress Bar.

12. Tema - Opera Arayüzleri

Firefox görünümünü değiştirmek için kullandığımız temalar gibi Opera'da da Opera Arayüzler'i var. Buradan beğendiğiniz arayüzü indirip tarayıcınızı özelleştirebilirsiniz...

Sizin de Opera ile ilgili bu tür ince ayar ve yeni özellik önerileriniz varsa yorumlarınızla paylaşırsanız Opera kullanıcıları ve kullanmak isteyenler için yararlı olur.

Bu yazı 90alper90 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

İşinizi Kolaylaştıracak BirKaç Site - 2

90alper90 — Fri, 18 Sep 2009 12:11:00 GMT

Daha önce burda paylaştığım işimizi kolaylaştıracak sitelere devam ediyorum.

1- Ptable;periyodik cetvele bambaşka bir hal kazandırmışlar. birçok programın sahip olmadığı özellikler mevcut. en güzel özellik ise değişik sıcaklıklardaki fiziksel halleri göstermesi. sıcaklığı artırıp azalttıkca elemenetlerin katı - sıvı - gaz değişimlerini takip edebiliyoruz.

2- Creately; flash tabanlı bir diyagram oluşturma sitesi. İçeriğinde önceden tanımlanmış onlarca hazır şablonu kullanarak veya kendiniz çizerek diyargramlar hazırlayabilirsiniz.

3- rmberit; remember it sitesi sayesinde farklı bir bilgisayardayken almanız gereken küçük notları flash bellek veya mail kullanmadan kaydedip kendi pc'nize geçtiğinizde görebilirsiniz. İsterseniz üye olup kaydettiginiz her notu üye girişi ile farklı pc'lerden takip edebilir veya ana sayfaya notunuzu girip "Drop it" dedikten sonra mailinize gönderebilirsiniz.

4- Tag Galaxy; flickr'da resim aramaya farklı bir şekil kazandırmış. Flick "tag"ları arasında resim araması yaparken galaksiler arası yolculuk imkanı sunuyor.

5- Page2rss; severek takip ettiğiniz bir site var fakat rss servisi mevcut değil veya bilgi hırsızlığına karşı korumalı ve google reader'da kullanılamamakta. tam bu anda page2rss devreye girerek sayfanın otomatik rss linkini oluşturuyor.

6- ikomment; resimlere yorum ekleyip bunları direk link, twitter ve facebook aracılığı ile paylaşmanızı sağlayan bir site olur kendileri.

7- KLMCollection; kordinatlarını öğrenmek istediğiniz bir yeri google maps üzerinden tıklayarak anında öğrenebilirsiniz.

8- Avnoy; ve bir başka alarmlı saat sitesi daha önceki yazımda bayagı ilgi görmüştü.

bir başka 8 sitelik listede görüşmek üzere.

beni burdan takip edebilirsiniz.

Bu yazı 90alper90 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

Fontlar Nasıl Türkçeleştirilir ?

90alper90 — Thu, 05 Feb 2009 10:12:00 GMT

Yabancı fontlarda türkçe karakterler bulunmuyor. Ancak bu fontlara türkçe karakterler ekleyebiliriz.
Öncelikle bir font editörüne ihtiyacımız var. Ücretsiz windows ve linux alternatifleri var ancak ben bu konuyu yeteneklerini yeterli bulduğum FontCreator v5.6 programı üzerinden anlatacağım.

1.Adım

high-logic.com adresinden FontCreator programını yüklüyoruz.
Programda düzenlemek istediğimiz fontu açıyoruz.

düzenlenmesi istenen fontu açıyoruz

2.adım

Şimdi türkçe karakterler daha önceden tanımlanmamışsa yeni karakterler oluşturmamız gerekiyor. Her hangi bir karaktere sağ tıklıyoruz buradan "Add" seçeneğine tıklıyoruz. Eklemek istediğimiz yeni karakter için boş bir kutucuk açılıyor. Bu kutucuğa karakterimizi eklemeden önce kutucuğu tanımlamalıyız. Yani klavyedeki hangi tuşa basında bu kutucuğun bir harf olarak ekranda belireceğini ayarlamalıyız. Bunun için oluşturduğumuz bu boş kutucuğa sağ tıklayarak Properties seçeneğine giriyoruz.

yeni harfimizi tanımlıyoruz

Açılan bu pencerede General sekmesi altında Postscript başlığı içerisindeki Name'e eklemek istediğimiz harfin ismini veriyoruz. Sonra Mappings sekmesine geçerek, mappings alanına yeni bir özellik eklemeliyiz. bunun için mappings penceresinin sağ tarafında bulunan Select butonuna tıklıyoruz.

Örneğin eklemek istediğimiz harf yumuşak g (ğ) olsun. Bu harf Latin Extended-A kategorisinde latin small letter g with breve olarak geçiyor. (Eğer harflerin isimlerini bilmiyorsak windowstaki sistem araçları arasında yer alan karakter eşlem aracından isimlerini öğrenebiliriz.)

ğ harfinin mappings sekmesinde tanımlanması

Harf tanımlama işlemleri bu kadar. Sonra Ok butonlarıyla işlemi tamamlıyoruz . Oluşturduğumuz boş kutucuğun üzerinde harfimize ait genel bir görüntü oluşmuş olacaktır. Ancak harfimiz henüz tasarlanmadı.

Adım 3

Fontu türkçeleştirme işleminin püf noktası burada yatıyor. Anlatım için Amaze isimli fontu kullandım. Bu font standart fontlara benzemiyor. Peki ben ğ harfini nasıl tasarlayabilirim? En küçük bir bozukluk diğer karakterler arasında uyumsuzluk yaratacaktır ve göze hoş gelmeyecektir.

Türkçe karakterlerin tasarımı

Ekleyeceğimiz karakterleri diğer karakterlerden kopyalayabiliriz. Örneğin yine (ğ) harfini fonta ekliyor olalım. Bunun için fontta hali hazırda var olan g harfini kopyalayıp eklemek istediğimiz (ğ) harfine yapıştırıyoruz. şimdi üzerinde bir çizgi eksik bunu da varsa diğer karakterlerden yine kopyala yapıştır yöntemiyle elde edip üzerine ekleyebiliriz. ya da kendimiz bir çizgi çizerek kopya g harfini ğ harfine dönüştürebiliriz. Temel mantık bu. Ben diğer karakterlerden aldığım bir çizgiyi biraz değiştirerek g harfine uygun hale getirdim ve fontta hiç bir bozukluk olmadı.

ğ nin üzerindeki çizgiyi oluşturmak için fonttaki bu karakterden yararlanılabilir.

Aldığım çizgideki bir takım oynamalardan sonra ğ harfini elde etmiş oluyoruz.

ğ harfi oluşturuluyor.

Bu işlemi diğer türkçe karakterler için de uyguluyoruz. ç nin altındaki çengeli s yi ş yapmak için kullanabiliyoruz. Bu ve benzeri eklemeler sonucunda türkçe karaktlerin tamamanını oluşturmak mümkün.
FontCreator programında F5 tuşuyla her an fontu test etmek harfler arasında uyumsuzluk olup olmadığını görmek mümkün. Testlerde de olumlu sonuçlar aldıktan sonra fontu ilgili klasöre yükleyebiliriz. Program bunu bizim için "install font" seçeneğiyle yapabiliyor. Ancak bir hatayla karşılaşma ihtimalimiz var. Bunun sebebi orjinal font dosyasının fonts klasöründe bulunmasından kaynaklanıyor. Önce orjinal fontu sistemden tamamen kaldırmalıyız. İşlem burada bitmiyor . Dilersek fontun ismini de değiştirebiliriz.

Fontun görünen ismini veriyoruz

Programda fonta isim vermek için Tools menüsünden Autonaming... seçeneğine tıklamamız gerekiyor. İsim verdikten sonra diğer detayları olduğu gibi bırakabiliriz.

Detaylar

Adım 4

Fontu ister program aracılığıyla ister elle sisteme yükledikten sonra herhangi bir metin editöründe test edebiliriz. Ben bu makaleyi hazırlarken kullandığım Amaze fontunu bilindik ve türkçe karakter içeren birkaç kelimeyle test ettim.

Sonuç

Fontun sisteme dahil olmasıyla tüm işlemler bitiyor. Tasarımlarınızda başarılar...

Bu yazı 90alper90 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

WordPress İçin Kullanışlı 15 Araç

90alper90 — Fri, 30 Jan 2009 14:55:00 GMT

Wordpress ücretsiz bir blog sistemidir. Tüm dünyada insanlar wordpress sayesinde dakikalar içerisinde web sitelerini oluşturuyor, resim ve yazılarını paylaşıyor. Wordpress özünde kullanımı her ne kadar kolay olsada geliştiriciler bu kolaylık çıtasını yeni uygulamalarlar sürekli yükseltmekte. Şimdi sixrevisionsın Wordpressinizi daha işlevsel ve güvenli hale getirebileceğimiz uygulamlar derlemesine bir göz atalım.

1. ScribeFire

ScribeFire bir Firefox eklentisidir. Bu eklenti sayesinde Wordpresinize yazılar yazabilir, resim yükleyebilirsiniz.

2. WordPress Helper

Yine bir firefox eklentisi olan WordPress Helper wordrpress admin bolumune girmeden işlem yapabilirsiniz. Firefox'a yerleşmiş ikona sağ tık yaparak menüyü açıp adımları takip edebilirsiniz.

3. Screen grab to WordPress!

Screen grab to WordPress! ekran görüntüsünü bloğunuza aktarmaya yarayan bir firefox eklentisidir. Eklentiye kaydettiğiniz bloglardan hangisine görüntüyü yüklemek istediğinizi seçiyorsunuz.

4. WordPress Scanner

Artık WordPress Scanner ile içiniz rahat uyuyabilirsiniz. Sitenizin güvenliği emin ellerde. İster web altyapılı uygulama, ister WordPress eklentisi ile güvenliğinizi sağlayabilirsiniz.

5. Broken Link Checker

Broken Link Checker 1 numaralı ölü link avcısı. Plugini aktif ettikten sonra ayarlar kısmından tarama periodunu ayarlıyorsunuz. Eklenti sizin için kırık linkler buluyor ve admin anasayfasında uyarıyor.

6. Google Syntax Highlighter

Google Syntax Highlighter ile yazılarınıza ekran görüntüsündeki gibi kodlar ekleyebilirsiniz. Eger bu eklenti yeterli gelmez ise WP-Syntax, WP-Chili, veya SyntaxHighlighter Plus ı deneyebilirsiniz.

7. Insights boosts your information searches.

Insights benim en sevdiğim eklentilerden biri. Hemen yazı ekleme sayfasından yazı kutucuğunun altında eklenen panelde ister blog içindeki yazılar ister internetten resim video ister vikipedi veya googleden arama yapabiliyor çıkan sonuçlardan istediğinizi sürükle bırak yöntemi ile konunuza ekleyebiliyorsunuz.

8. Windows Live Writer

Windows Live Writer masaüstünüzden wordpressinize konu göndermenize yarar. Outloook ile nasıl mail gönderiyorsanız bu programcık sayesinde de yazı gönderebileceksiniz. wordpress uygulama ve eklentilerinin devamı burada.

Bu yazı 90alper90 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

öğrenilmesi gereken 15 css hilesi

90alper90 — Tue, 27 Jan 2009 09:25:00 GMT

Web tasarımcıları ve geliştiricileri olarak zamanla, anahat hedeflerimize ulaşmamıza yardımcı olması için pek çok CSS hilesini ve ipucunu öğreniriz. Bu tekniklerin bir listesini yapmaya kalksanız, projenizin yoğunluğuna göre yüzlerce hileyi bir arada toplamanız gerekebilir. Ancak bu yazıda bulacağınız 15 önemli css hilesi, web geliştiricilerinin karşılaştığı sorunların pek çoğunu giderebilecek kalitededir.

1. Bağıl (relative) pozisyonlanan element içerisinde mutlak (absolute) pozisyonlama
Mutlak pozisyonlanan bir elementi bağıl pozisyonlanan bir element içerisine yerleştirdiğinizde, onun pozisyonu kendisine en yakın olan üst elementin pozisyona göre belirlenecektir. Bu, özellikle bir elementi sayfanızda belirleyeceğiniz bir noktaya sabitlemek istediğinizde oldukça kullanışlı bir hiledir, örneğin başlık (header) damgaları (badge) gibi.

Pozisyonlama hakkında daha fazla bilgi alabileceğiniz siteler:

2. Z-index ve pozisyonlama
z-index kimi zaman geliştiriciler arasında çözümü zor olan bir bulmacaya dönüşebilir. Genellikle bir div elementini diğer bir elementin üzerine yerleştirmek için çok yüksek z-index değerleri atayan tasarımcılarla karşılaşırsınız. Burada unutmamamız gereken, z-index elementinin "position" değeri atanmamış bir element üzerinde çalışmayacak oluşudur. Eğer siz de uyguladığınız z-index kuralının işlevsel olmadığını düşünüyorsanız, kuralı uyguladığınız elemente 'position: relative' ya da 'position: absolute' değerlerini ekleyin.

Z-index hakkında daha fazla bilgi alabileceğiniz siteler:

3. Margin Auto
Bir şablon üzerinde 'margin: auto' değerini kullanmak, o elementin tarayıcı üzerindeki pozisyonunu, tarayıcının kullanıldığı sistemin ekran çözünürlüğüne bakılmaksızın ortalamak için mükemmel bir yöntemdir. Ancak 'margin: auto' değeri uygulandığı elementin 'width' değeri belirlenmediği sürece çalışmaz. Bu ayrıca satıriçi (inline) elementlerde 'margin: auto' değerinin 'display: block' kullanılmadan işlevsel olmayacağı anlamına da gelir.

Margin Auto hakkında daha fazla bilgi alabileceğiniz siteler:

4. Padding Elementini Dikkatlice Ve Doğru Bir Şekilde Kullanın
CSS ile çalışmaya başladığımda genellikle yaptığım hatalardan birisi de onun tüm efektlerini ve CSS Kutu Modeli'ni gözardı etmektir. Kutu modeline göre 'padding' değerinin uygulandığı elementinin genel genişliğini etkilediğini aklınızdan çıkarmayın. Bunu gözardı ettiğinizde elementlerin olması gerektiği yerde olmadığını göreceksinizdir. Örneğin:

#div {
width:200px;
padding: 30px;
border:2px solid #000;
}

Bunun toplam genişliği 264px olacaktır (200 + 30 + 2 + 2). Bunun yanısıra 'padding' özelliğinin 'margin'in aksine negatif değerler içeremeyeceğini unutmayın.

Padding hakkında daha fazla bilgi alabileceğiniz siteler:

W3 Padding Properties

text-indent kullanarak bir metni gizlemek
Sitenizde logo olarak bir resim kullandığınızı varsayalım. Bu resmin H1 etiketi içerisinde olması SEO açısından önemlidir, ancak H1 tagı içerisinde, arama motorlarının okuyabilmesi için bir metin olmasını da isteriz. Bazıları 'display: none' kullanmak isteyebilir ancak bu yöntemi kullanırsak logo resmini h1 etiketinden ayırmamız gerekecektir. 'text-indent' ve negatif değerler kullanarak ziyaretçiler için bir resim, arama motorları için de okunabilecek bir metin kullanmak mümkündür.

h1 {
text-indent:-9999px;/*Metni gizle, SEO için tut*/
margin:0 auto;
width:948px;
background:transparent url("images/header.jpg") no-repeat scroll;
}

Bu kod sayesinde kullanılan metnin herhangi bir çözünürlükte görünmeyeceğinden ancak onun yerine bir resmin görüntüleneceğinden emin olabiliriz. Bu yöntem ayrıca ekran okuyucularının ilgili metni görebilmesini sağlayacaktır, ancak "display: none" için bu geçerli değildir.

text-indent kullanarak metin gizleme yöntemleri hakkında daha fazla bilgi alabileceğiniz siteler

SitePoint - Using text-indent

6. IE Double Float Margin Hatası
Eminim bununla pek çoğumuz boğuşmuşuzdur, zira en sık kullanılan CSS "hilelerinden" birisi de budur. Eğer bu hata ile daha önce karşılaşmadıysanız hemen özetleyelim: IE6'da üzerine 'margin' uygulanmış yüzen (float) bir element kullanıyorsanız, bunun ilgili tarayıcı üzerinde doğru pozisyonlanmadığını göreceksiniz. Ne şans ki IE6'nın bu hatasını gidermek çok basit. Tek yapmanız gereken 'display' özelliğinin diğerini aşağıda gösterildiği şekilde 'inline' olarak belirlemek.

.yourClass {
float: left;
width: 350px;
margin: 20px 0 15px 100px;
display: inline;
}

Bu değişikliğin diğer tarayıcılara hiçbir etkisi olmayacaktır, zira elementin kendisi zaten yüzen bir element olduğundan satır içi görüntülenir, ancak her nedense bu teknikle IE6'daki bu sorun giderilmektedir.

IE'nin marj hatası hakkında daha fazla bilgi alabileceğiniz siteler:

Double Margin Causes and Fixes

7. CSS Kullanarak SPAM'a Karşı Savaşın
Şablon açıklamınızı iyileştirecek güzel bir teknik. CSS-Globe.com sitesinden Alen Grakalic CSS kullanarak nasıl CAPTCHA benzeri bir korumayı sitenize entegre edebileceğinizi anlatmış. İlgili tekniğin uygulandığı bir form şu şekilde olsun:

<label for=”Name”>Ad:</label>
<input type=”text” name=”name” />
<label class=”captcha” for=”captcha”>Cevabınız?</label>
<input type=”text” name=”captcha” id=”captcha” />

'captcha' ID'si için CSS ile bir arkaplan resmi kullanıyoruz. Bu tekniği çözebilmek için spam betiklerinin öncelikle HTML elementini bulması, CSS'nizi taraması, seçicileri karşılaştırması ve ardından doğru seçici ile ona bağlı olan arkaplan imajını bulmasının ardından ilgili imajı okuması gerekir. Bu yöntem oldukça güvenlidir zira pek çok spam betiği bunu başarabilecek kapasitede değildir. Bu yöntemin bir kötü özelliği CSS'nin etkinleştirilmediği tarayıcılarda kullanıcı ne yapacağını bilemez.

Spam'a karşı CSS İle Savaş Açmak hakkında daha fazla bilgi alabileceğiniz siteler:

Fighting spam with CSS

8. IE6 Üzerindeki Saydam PNG Sorununu Gidermek
Hepimizin IE6 üzerindeki saydam PNG sorununun can sıkıcı olduğu konusunda hemfikir olduğuna eminim. Buna yönelik Internet üzerinde pek çok çözüm bulunmaktadır ve bunlar karmaşık JavaScript kodlarından Microsoft'un kendi filtrelerini kullanmaya kadar değişiklik göstermektedir. Unutmayın ki bu tekniklerin pek çoğu Microsoft'un AlphaImageLoader özelliğine dayanmaktadır.

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(...);

IE6'nın PNG saydamlık sorunu hakkında daha fazla bilgi alabileceğiniz siteler:

9. CSS Çoklu Tarayıcı Saydamlığı
İster inanın ister inanmayın tüm tarayıcılar üzerinde CSS'nin saydamlık elementini doğru bir şekilde kullanmak mümkün. Bu teknikle IE, Firefox, Safari, Opera ve Netscape Navigator gibi eski tarayıcıları bile kapsayabiliriz. Chris Coyler'in bu konuda yazılmış mükemmel bir makalesi bulunuyor.

.yourClass {
filter:alpha(opacity=50);/*IE İçin Gerekli*/
-moz-opacity:0.5;/*NN gibi eski Mozilla tarayıcıları*/
-khtml-opacity: 0.5;/*Safari'nin Eski Sürümleri ve "KHTML" tarama motorları*/
opacity: 0.5;/*FF, Safari ve Opera*/
}

Bu kod doğrulanmayacaktır ancak bu özelliği kullanmak isteyen kullanıcılar için bu pek bir sorun teşkil etmez.

CSS Opacity hakkında daha fazla bilgi alabileceğiniz siteler.

10. CSS Konumlandırlabilir Görseller (CSS Image Sprites) Kullanın
CSS Konumlandırılabilir Görseller birden fazla CSS görselinizi tek bir seferde yükleyebilmeniz için mükemmel bir yöntemdir. Bu yöntemle hem sunucuya bindirilen yük azalır hem de şablonunuzun dosya boyutunda önemli bir düşüş gözlenir.

CSS Konumlandırılabilir Görseller birden fazla görsel elementin tek bir görsel üzerinde depolanması ile oluşturulur. Ardından CSS kullanılarak arkaplan pozisyonu, genişliği ve yüksekliği gibi CSS değerleri ile görüntülemek istediğimiz görseli seçeriz.

Konumlandırılabilir Görseller hakkında daha fazla bilgi alabileceğiniz siteler:

11. IE6'yı desteklemek için Koşullu Yorumlar (Conditional Comments) Kullanın
Web geliştiricileri IE'nin bazı özel sürümlerini desteklemek için yeni CSS kuralları ve komutları oluştururlar. Eğer koşullu yorumlar hakkında bilginiz yoksa, aşağıdaki kod içerisinde yer alan stil şablonu, sadece IE 7 ve altındaki tarayıcılarda çalışacaktır.

<!--[if lte IE 7]>
<link rel="stylesheet" media="screen" href="styleIE.css" />
<![endif]-->

Bu kod HTML dosyanızın HEAD kısmına yerleştirilir. Eğer CSS IE'de çalışmıyor görünüyorsa, CSS seçimlerinizde daha doğrudan hedefleyen CSS komutlarını kullanmayı deneyin.

12. CSS Özgüllüğü
Yukarıda da belirtildiği üzere CSS stilleri belirli özgül sırasını takip eder ve hangi değerin hangisinin üzerine yazacağını belirlemek ,için puanlama kullanır. Nettuts'ta yayımlanan bu makalede CSS için puanlama değerleri açıklanmış. Değerler aşağıdaki gibidir.

Elementler: 1 puan
Sınıflar: 10 puan
Belirleyiciler: 100 puan
Satıriçi Stilleme: 1000 puan
Şüpheye düştüğünüzde stil tanımlamalarınızda daha keskin olmaya çalışın. Ayrıca gerektiğinde hata düzeltme işlemleri için !important değerini de kullanabilirsiniz.

CSS Özgüllüğü hakkında daha fazla bilgi alabileceğiniz siteler:

13. Tüm tarayıcılarda minimum yükseklik değerini kullanabilmek
Bir arabirim üzerinde çalışırken genellikle bir element için en düşük yükseklik değerini belirleme ihtiyacı hissederiz ve ardından ilgili yüksekliği, dahilindeki içerik sığmadığında otomatik olarak arttırabilmek isteriz. Ne yazık ki her zaman olduğu gibi IE min-height değerini doğru bir şekilde yorumlamamaktadır. Ancak min-height hızlı hilesi adı verilen bir çözümümüz var. Kod şu şekilde:

#yourId {
min-height:300px;
height:auto !important;
height:300px;/*Needs to match the min height pixels above*/
}

Sade, işlevsel ve doğrulanabilir bir kod. Bu örnek ayrıca '!important' özelliğinin kullanışlı olduğu sayılı örneklerden birini teşkil ediyor.

min-height hilesi hakkında daha fazla bilgi alabileceğiniz siteler:

Using the min height fast hack

14. * HTML hilesi
Eğer IE'ye özgü stil şablonlarına bağlantı vermek istemiyorsanız, o zaman * html hilesini kullanabilirsiniz. Kusursuz bir dünyada HTML elementi daime ana elementtir, bu sebeple HTML'den önce herhangi bir element bulunamaz. Buna rağmen IE, bunun mümkün olduğunu iddia eder. Bu sebeple eğer IE üzerinde bir elementi hedeflemek istersek onu bu şekilde gerçekleştiririz:

* html body div#sideBar {
display:inline;
}

html hilesi hakkında daha fazla bilgi alabileceğiniz siteler:

15. Kayan Kapılar Tekniği
Navigasyon düğmeleri için görsel kullanmanın oluşturduğu önemli problemlerden birisi de istemcinin metninin olması gerektiğinden uzun olma ihtimali ve bunun da düğmenin sınırlarını aşması ya da sınırları dahiline sığmamasıdır. İki görsel ve CSS kayan kapılar tekniği kullanarak içerisindeki metnin uzunluğuna göre genişleyip kısalabilecek düğmeler oluşturabiliriz. Bu tekniğin ardında yatan fikir, her düğme için iki adet görsel kullanmak ve ardından bu görselleri CSS'nin arkaplan tanımlamma özelliği ile düğmelere entegre etmektir. Örneğin:

HTML Dizisi
Başlık Metni

CSS
a.myButton { background: transparent url('right.png') no-repeat scroll top right; display: block; float: left; height: 32px; /* Görsel Yüksekliği */ margin-right: 6px; padding-right: 20px;/*Görsel Genişliği*/ /*Other Styles*/ } a.myButton span { background: transparent url('button_left.png') no-repeat; display: block; line-height: 22px; /* Görsel Yükseliği */ padding: /*İstediğiniz değer ile değiştirin*/ }

Kayan kapılar tekniği hakkında daha fazla bilgi alabileceğiniz siteler:

Ve işte size şablon hazırlarken yardımcı olabilecek 15 CSS tekniğinin de sonuna geldik. CSS tasarımcılar için mükemmel bir araçtır zira kodumuzla daha yaratıcı olabilmemizi ve kendi tekniklerimizi oluşturabilmemize olanak sağlar. Sizin de sık kullandığınız CSS teknikleri var mı? Listeye eklemek istediğiniz teknikler neler olabilir? Yorumlarınızla paylaşın.

Kaynak: ThemeForest

CSS Hileleri ve İpuçları İle İlgili Yazdığım Diğer Yazılar

Bu yazı 90alper90 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