tarihinde Fatih Hayrioğlu

Google Reader kapandı :(

Ancak RSS desteği olan herhangi bir araç ile takibe devam. Ben şimdi feedly kullanıyorum.

Arayüz Geliştiricilerin Görev Tanımı adlı yazımda arayüz geliştiricilerinin görevlerini tanımlarken aşağıdaki metni kullandık.

  • Yenilikçi: Web mecrasındaki gelişmeleri takip etmeli ve uygulamalarında bu yenilikleri gerektiğinde kullanmalıdır.

Çok önemli ve üzerinde durulması gereken bir noktadır bu. Birçok arayüz geliştiricide maalesef bu konu hakkında çaba göstermiyorlar ve buda beni üzüyor açıkçası. Bu iş bu meslek yenilikçi, hızlı gelişen bir meslek diyoruz, o zaman yenilikleri takip etmeliyiz.

Aslında yapmamız gerekende öyle çok zor bir şey değil. Her güne başlarken bilgisayarımızın başına geçtiğimizde belirli siteleri sırası ile takip edip, zamanımız varsa okumak yoksa işaret koyup geçerek sonraya bırakmak gerekir. Eskiden bu iş zordu tek tek her siteyi aç falan şimdi RSS denilen bir şey var, aslında uzun süredir var. Bizi her siteyi tek tek dolaşma derdinden kurtarıyor ve hız ve zaman kazandırıyor.

RSS’lerimizi takip etmemizi, organize etmek için bir programa gerek duyuyoruz, aslında bunu birçok tarayıcıda sağlıyor, ayrıca programlarda var, ama ben burada size Google Reader hakkında bilgi vereceğim.

Google Reader baştan beri kullanıyorum, bu iş için bazı araçları kullanmayı denediysem de kendimi Google Reader’da geri dönmüş buldum. Tek sorunum ara sıra yavaş çalışması. En büyük avantajı ise çevirimiçi bir araç olması sebebiyle istediğiniz yerden erişebiliyorsunuz ve böylecede senkron sorununuz olmuyor.

Derler ya çocukluğunu bilirim diye, gerçekten Google Reader’ı çıktığı ilk günlerden beri kullanıyorum, belkide bu nedenle bırakıp başka bir RSS okuyucuya geçemiyorum. İlk çıktığında çok cılızdı. Özellikleri zamanla eklediler. Arama eklediler, Türkçe desteği eklediler, klasör yapısını eklediler, benzer öneri siteleri ekledir. Yenilik bakımından gayet iyi ancak yavaşlık sorununu bir türlü tam olarak halledemediler.

Google Reader Özellikleri

Çevirimiçi Araç En büyük avantajı çevirim için olması ve bundan dolayı her yerden erişim imkanı sağlaması

Senkrenizasyon Çevirim için olduğu için senkronizasyon sorunu olmuyor.

Kolay Kullanım Google hesabı olan herkes başka bir şeye ihtiyaç duymadan kullanmaya başlıyor.

Scroll ile ilerledikçe feedlerin okundu olarak işaretlenmesini ayarlayabiliyoruz, benim en çok sevdiğim özelliklerinden bir tanesi.

Arama

1

Tüm RSS’leriniz arama imkanı sunuyor. Nispeten hızlı bir araması var. İlk başlarda yokken bunu farklı araçlarla sağlıyorduk.

RSS’lerimizi Organize Etmek Klasörleme ve etiketleme imkanı sayesinde rss’lerimizi organize edebiliyoruz.

Taşıma özelliği ile normalde alfabetik sıralanan listeyi istediğim sıralamaya kavuşturabiliyoruz.

Görsel Planı

2

Google Reader’ın görünümü gayet başarılı. Solda menüde abonelikler listeleniyor, ayrıca sol menü üstünde genel özelliklere erişim sağlıyor, sağda ise feedleri görüyoruz.

Favikon desteği sayesinde siteleri daha iyi tanıma imkanı sağlıyor. Bazı sitelerin favori ikonlarını görmemesi bir dezavantaj.

3

Alınma ve Yayınlanama zamanını ayrı ayrı gösteriyor olması güzel.

4

Feedlerin istatistiklerini kendi içinde görmemizi sağlıyor.

5

Daha sonra okumak için “okunmadı olarak sakla” özelliği var. Ayrıca alttaki yıldız ekle yardımı ile de işaretleyebiliriz.

6

Genişletilmiş ve Liste Şeklinde feedlerimizi listeleyebiliyoruz, benim tercihim genişletilmiş olarak izlemek ama çok fazla birikince listeye geçebiliyorum.

Stilni değiştirme imkanı veriyor fabianpimminger.com/playground/google-reader-styles/ adresindeki scriptleri yükleyerek Google Reader’ınızın görünümünü değiştirebilirsiniz.

Klavye Kısayolları Klavye kısayolları gayet başarılı. Kısayolları listesi Aşağıda en çok kullanılanları listeledim.

Kısayol Açıklaması
n sonraki öğeye geç
m okundu/okunmadı olarak işaretle
t öğeyi etiketle
p önceki öğeye geç
shift-n sonraki abonelik
v yazının orjinalini göster
shift-s paylaş
f tam ekran moduna geçiş

Ayrıca gelişmiş bir kısayol çözümleri sunuyor google reader bize

7

g + u

tuşlarına basarak tüm aboneliklerimizi listelendiği bir popup ekran açılıyor buradan istediğimiz aboneliğin ismini girerek direk erişebiliyoruz örneğin

g + u + fatih:hayri

yazdığınızda eğer benim siteme abone iseniz direk benim rss’ime erişeceksiniz.

Paylaşım

8

Okuduğumuz yazıyı çok kolay bir şekilde paylaşabiliyoruz.

İstatistikler

9

Google Eğilimler sayfası sayesinde istatistiklerimizi görebiliyoruz

Dil Seçenekleri

10

Türkçe dil desteği mevcut. Dilime çevir özelliği ile yabancı dillerdeki RSS’leri izlemek daha kolay, gerçi bu özellik tam randımanlı çalışmıyor.

Öneri RSS’ler

11

Araştır bölümü altındaki öneriler kısmı gayet başarılı

İçe/Dışa Aktar

12

Kolay bir içeri ve dışarı aktarma seçeneği ve xml tabanlı bir yapısı olduğu için gayet kolay düzenlene biliyor.

Mobil Araçlarda Cep telefonu vb araçlarda da kullanılıyor. Ben hiç kullanmadım, o nedenle bu konuda bir yorumum olmayacak.

Çevrimdışı Kullanımı Google Gear ile internete bağlı olmadan da kullanım imkanı sağlıyor.

RSS olmayan siteleri takip imkanı

13

Bazı sitelerde RSS olmaya biliyor, bu durumda ne yapacağız, Google Reader bu durumda da bize yardımcı oluyor. RSS olmasa da bir web sitesini ekleyerek takip altına alabiliyoruz. Sitede değişiklik oldukça bize haber veriyor sistem.

Feed Puanı Uygulaması

14

Son olarakta bir eklentiden bahsedeceğim. Greasmonkey ve [PageRank][] eklentilerini kurup Google Reader’ı açınca okuduğumuz her feed’in başına o sitenin puanını koyuyor, bu sayede belki birçok rss ilk görüşte değerlendirebiliyoruz. Tek dezavantajı yavaş olan Google Reader’ı daha da yavaşlatması.

Abonelik üstü kısmına eklenen turuncu dropdown ile buna göre filtreleme yapabiliyoruz.

Sol üstteki checkbox kaldırılıp işaretlenerek bu özellik kolayca kapatılıp açılabilir.

Google Reader’ı Güncel Tutmak ve Liste Paylaşımı

Ben belli aralıklarla(2-3 ay aralığında) sol menüde üstte yer alana Google Eğilimlerini sayfasındaki Abonelik Eğilimleri kısmındaki “Etkin Değil” kısmını kontrol ediyorum. Burada uzun süre yazı yazmayan ve takibe değer bulmadığım abonelikleri kaldırıyorum.

Google Reader Aboneliklerim

Google Reader’da okuduğum veya daha sonra okumak için işaretlediğim yazıları gerek sitemdeki web’den seçme haberler kısmı ve gerekse friendfeed’den sizlerle paylaşıyorum. Şimdide Google Reader dosyamı paylaşıyorum.

Benim Google Reader Dosyam (.xml)

Google Reader Ayarlar kısmında içeri aktar diyerek ekleyebilirisiniz.

Sonuç

Makale her ne kadar Google Reader kullanımı hakkında olsada burada anlatmak istediğim yenilikleri izlemek ve yararlı gördükleriniz okuyup uygulamanızdır. Örneği bir makalede twitter’ın rss readerların okunma oranlarını geçen seneye göre %27 azalttığını söylüyor. Bizim için RSS olmuş, Google Reader olmuş veya twitter olmuş önemli değil, önemli olan yenilikleri takip etmek ve geri kalmamaktır. Ferruh Mavituna’nın Verimli Bilgi Takibi makalesini okumanızı tavsiye ederim.

Çağın gerisinde kalmayın. Kendinize iyi bakın.

Kaynaklar

tarihinde Fatih Hayrioğlu

Birçok yuvarlak kenarlı kutu oluşturma tekniği mevcut. Daha önce yuvarlak kenarlı kutuların nasıl yapıldığını anlattım “Yuvarlak Kenarlı Kutular”, ayrıca CSS3 ile gelen border-radius özelliğinden bahsettiğimiz “Yuvarlak kenarlı kutular(border-radius) oluşturmak” makalemizde bahsettik. Şimdide daha farklı belki çok fazla kullanılmayan bir yuvarlak kenar çeşidini nasıl yapacağımızı anlatacağım. Aslında bu birazda göz yanılmasından yararlanarak oluşturulmuş bir yuvarlak kenardır, aslında sağdaki resimde gösterildiği gibi köşe yuvarlak değildir, ancak göze yuvarlakmış hissi vermektedir.

Bu işi aslında resim ile de yapabiliriz, belki daha kolayımıza bile gelir, ancak uygulamadan birçok yerde ve farklı renklerde 1 piksellik yuvarlak kenara ihtiyaç duyunca bu yöntemi tercih ettim.

Yöntemi şöyle anlatabilirim;  bu çözümü üretmek için iki adet içiçe blok-level elemente ihtiyacımız var, dıştaki elemanı üstten ve alttan bir piksel fazlalık eklerken, içteki elemanı sağ ve soldan eksi margin değeri vererek sağ ve solda taşırarak 1 piksellik bir yuvarlak kenar elde ederiz. Bu işlemi iki şekilde yapabiliriz.

Padding ve margin yardımı ile oluşturmak

HTML kodu

 <div class="kutu1">
	<p>{ CSS, XHTML veJavascript }</p>
</div>

CSS kodu

.kutu1{
	background:#3274D0;
	margin:0 1px;
	padding:1px 0;
}

.kutu1 p{
	background:#3274D0;
	margin:0 -1px;
	padding:2px;
}

Örneği görmek için tıklayınız.

Margin ve border yardımı ile oluşturmak

HTML Kodumuz yine aynı

<div class="kutu1">
	<p>{ CSS, XHTML ve Javascript }</p>
</div>

CSS kodumuz

.kutu1{
	background:#848484;
	border:1px solid #848484;
	border-left-width:0;
	border-right-width:0;
	margin:0 1px;
}

.kutu1 p{
	background:#d3d3d3;
	border:1px solid #848484;
	border-top-width:0;
	border-bottom-width:0;
	margin:0 -1px;
	padding:2px;
}

Örneği görmek için tıklayınız.

Butonlarda kullanımı

Bu yöntemleri butonlarımızda da kullanabiliriz.

HTML Kodumuz

<ul>
	<li><a href=""><span>Bursaspor</span></a></li>
    <li><a href=""><span>Trabzonspor</span></a></li>
    <li><a href=""><span>Kayserispor</span></a></li>
</ul>

CSS kodumuz

ul{
	margin:0;
	padding:0;
	width:250px
}

ul li{
	list-style: none;
	margin-bottom:5px
}

ul li a{
	display:block;
	background:#3274D0;
	margin:0 1px;
	padding:1px 0;
	position: relative;
	text-decoration:none;
}

ul li a span{
	background:#3274D0;
	margin:0 -1px;
	padding:2px;
	display: block;
	color:#fff
}

ul li a:hover{
	background:#fff;
}

ul li a:hover span{
	background:#fff;
	color:#3274D0
}

Örneği görmek için tıklayınız.

Sonuç olarak yukarıda görüldüğü gibi kolay bir kodlama ile 1 piksellik bir yuvarlak kenar elde ettik. Çok fazla çeşitte 1 piksellik yuvarlak kenara ihtiyaç duyduğunuzda imdadınıza yetişir. Bu kodun güzelliği internet explorer sürümlerinde(6,7,8,9) herhangi bir ek koda gereksinim duymadan çalışmasıdır. Bu yöntem aklınızın bir köşesinde kalsın bakarsınız bir gün lazım olur.

Hadi kalın sağlıcakla.

Kaynaklar

tarihinde Fatih Hayrioğlu

[Friendfeed’de bir serzenişim üzerine Fatih Turan’ın bir cevabı][] hafızamdaki !important bilgilerimin yeterli olmadığını gösterdi bana ve bu konuda biraz araştırma yapma gereği duydum ve burada bu araştırma sonuçlarını paylaşmak istedim.

!important’ı anlamak için CSS’de etkinliğine bir göz atmalıyız. Daha önce yazdığım bir konu bu CSS’de Tanımlamalar ve Etkinlikleri(Specificity) ayrıntılarını bu yazıdan okuyabilirsiniz. CSS’de etkinlik tanımını tekrar hatırlatalım; CSS’de etkinliğin anlamı stil çatışması(aynı elemente birden fazla tanım yapıldığında) olduğunda kullanılan hangi kodun web tarayıcıları tarafından yorumlanacağını belirlemektir. Her css tanımını bir sayısal değeri vardı ve benzer tanımların yapıldığı bir elemanda bu sayısal değeri büyük olan tanımı elemana etki edecektir.

Peki, biz sayısal değeri küçük olan tanımın etkin olmasını istersek ne yapabiliriz? Bu sorunun cevabı ve bu ihtiyacı karşılayan tanım !important tanımıdır. Bir örnekle durumu gösterelim

<ul class="menu">
    <li>Menü 1</li>
    <li>Menü 2</li>
    <li>Menü 3
        <ul>
          <li class="deneme">Alt Menü</li>
        </ul>
    </li>
    <li>Menü 4</li>
</ul>

CSS kodumuzda aşağıdaki gibi olsun

ul.menu li{
	background-color:#3CF;
}

li.deneme{
	background-color:#f00;
}

Örneği görmek için tıklayınız.

Kodumuza göre tüm li background rengi #3CFolsun ama .deneme sınıfı tanımladığımız li’nin ki kırmızı olsun diyoruz, ancak sonuç istediğimiz gibi olmuyor.

Firfox’un eklentisi Firebug’u durumu bize açıkça gösteriyor. Üzeri çizilen tanım altta kalırken üstteki tanım elemana uygulanmaktadır.

Seçici adına üst eleman adlarını ekleyerek etkinliği arttırma

Burada bizim kendi istediğimiz sonucun oluşması için bir iki yöntem bulunmaktadır. Bir tanesi istediğimiz atamanın üste çıkması için seçici değerini arttırmak, yani örnek kodumuzda bu li.deneme yerine ul li.deneme şeklinde yaparak seçici etkinliğini arttırarak yapmaktır.

ul.menu li.deneme{
	background-color:#F00;
}

Örneği görmek için tıklayınız.

Bu kod bizi çözüme ulaştıracaktır, ancak bazen bu çözüm çok can sıkıcı haller alabiliyor. Büyük projelerde çok sık rastladığımız bir sorun.

important! tanımı ile etkiliği arttırma

Diğer bir çözüm ise etkin olmasını istediğimiz tanımın sonuna kardeşim bu önemli bunu etkin yap demek, yani sonuna !important eklemek ile olur.

li.deneme{
   background-color:#f00 !important;
}

Örneği görmek için tıklayınız.

İE6 için important ile hack yapmak

Şimdi gel gelelim important tanımının ie6 ile olan problemine ve benim yanlış anlamama.

Eğer yukarıdaki gibi bir tanımlama var ise yani tek bir özellik ve bu özelliğe atanmış important tanımı var ise ie6 sorun çıkarmıyor. İşte benim yeni öğrendiğim bilgi bu.

Peki, sorun nasıl çıkıyor derseniz. İE6 eğer bir normal tanım var ise ve birde important tanımı bulunuyorsa, aynı özellik iki kere tanımlandı ise bu importantlı tanımı ie6 uygulamıyor. Bunu ie6 hack için kullanılabilir. Bunu ie6 hack için kullanılabilir. Zamanında bir yazıda yazmıştım bu konuda http://fatihhayrioglu.com/css-de-kodumuzu-ieden-gizleme/ Aslında burada ie6’nın bir sorununu avantaja çevirmiş oluyoruz.

Satıriçi kodları Ezmek için important kullanımı

Bazı durumlarda htmle müdahele imakanımızın olmadığı durumlarda veya acil bir düzeltme gerektiğin genelde lazım oluyor important tanımı. Eğer html içinden bir tanım yapıldı ise css ile yaptığımız hiç bir tanım satıriçi kodu ezemiyecektir. Tek çare important tanımıdır.

<ul style="background-color:#3CF">
	<li class="deneme">Deneme</li>
<ul>

Tanımı olsun biz bu elemanı background rengini değiştirmek istersek sadece important ile değiştirebiliriz.

li.deneme{
   background-color:#f00 !important;
}

Tanımı li elemanının background rengini kırmızı yapacaktır.

Son bir ipucu olarak şu cümleyi söyleyelim. CSS kısaltmalarına yapılan important tanımı kısaltması yapılan özelliklere tek tek yapılmış gibidir.

Sonuç

important tanımı çok tercih edilen bir özellik değildir, nadiren de olsa lazım olur. Bazen çok can kurtarır. Çok fazla yerde kullanmak kodunuzu okunaksız hale getirebilir, buna dikkat etmek gerekir.

Fatih Turan’a teşekkürler bilgilendirme için.

Kaynaklar