bildirgec.org - mstdokumaci - beğendikleri

öğrenilmesi gereken 15 css hilesi

mstdokumaci — 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ı mstdokumaci 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

En popüler flickr etiketleri ve 16000'den fazla resim

mstdokumaci — Wed, 14 May 2008 13:54:00 GMT

flickr

popüler flickr taglarının oluşturduğu 16 binden fazla resmin bir arada olduğu dev arşiv.. kim yapmışsa nasıl yapmışsa, başarmış.. bu siteden resimlerin hepsini görebilir ve hangi kelimelerle tag'landıklarını, mouse imleci ile resmin üzerine gezinmeden önce öğrenebilirsiniz.. mouse ile resmimlerin üzerine gelip onları görüntüleyebilirsiniz.. sitenin yan bloktan da owerview sekmesi ile etiketlerin haritasını görebilir, aradığınız etikete tıklayıp sizi ilgilendiren resimlere kısayoldan ulaşabilirsiniz.. All Tags sekmesinden de bu etiketleri yazımsal olarak alfabetik olarak sıralanmış olarak kullanabilirsiniz... ayrıca aklınıza şu soru da gelebilir, flickr kendisi de en popüler tagları bizlere sunmuyor mu zaten? evet sunuyor ama böyle değil.. toplu ön izleme ve etiket haritası yok orda..

Bu yazı mstdokumaci 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 büyük monitör, daha çok iş

mstdokumaci — Wed, 12 Mar 2008 13:54:00 GMT

İşiniz bir türlü bitmiyor mu? suçlu monitörünüz olabilir. Utah üniversitesinden bir grup araştırmacı word, excel gibi ofis uygulamaları ile çalışan bir gurubu kendi içinde üç guruba ayırmışlar. her gün yaptıkları işleri bir guruptan 18 inçlik monitör kullanarak, diğer bir guruptan 20 inçlik monitör kullanarak, öbür guruptan da 24 inçlik monitör kullanarak yapmalarını istemişler. Yapılacak işler ve monitörler kullanıcılara herhangi bir ölçüt gözetmeden rastgele dağıtılmış. Gruplar işlerini tamamladığında görmüşler ki 24 inçlik monitör kullananlar işlerini 18 inçlik monitör kullananlardan %52 oranında, 20 inçlik monitör kullananlar da %44 oranında daha hızlı tamamlamışlar. Ancak aynı deneyi daha büyük olan 26 inçlik monitörler ile yaptıklarında verimliliğin artmadığını, aksine düştüğünü gözlemlemişler...

kaynak: The Wall Street Journal

Bu yazı mstdokumaci 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

PC’nizde kurulu en rahatsızlık verici 5 program

mstdokumaci — Wed, 02 Jan 2008 11:26:00 GMT

1. Acrobat Reader
Adobe Acrobat Reader ne yazık ki sadece birşeyi alıyorlar o da PDF’leri okumak. Bunu yapmak için aydak iki defa update yüklemek gerekiyor. Acrobat’ın diğer büyük özelliği okuyacağınız belgeyi açarken birçok plugin ve library dosyalarını yüklemek için sizi bekletiyor. Sonuçta sadece bir sayfa gösteriyor.
FoxIt reader daha iyi bir çözüm. Bu programı indirin sonra yanlışlıkla tıkladığınız her link için uzun bekleyişlere son verin.

2. iTunes

Apple aşkına, neden iTunes neden böyle bir program? O sadece bir media player programı. Kolay kurulabilen ve çalıştırılabilen olmalı, izlediğimiz filmler büyük olmalı. Ama şişirilmiş, karışık, yüklemesi uzun süren ve çok çirkin bir uygulama elde ediyoruz. Aynı zamanda hafızanın büyük bölümünü kullanıyor.

3. Real Player

Real Player, YouTube olabilirdi. Onun yerine sürekli önünüze çıkarak size birşeyler satmaya çalışan tiplere benziyor. Sizi kesinlikle rahat bırakmıyor. Sürekli tüm medya dosyalarını, internet tarayıcınızı ve mp3 playerları ele geçirmeye çalışıyor. Durumu daha da kötüleştirmek için sürekli size rhapsody ve superpass satmaya çalışıyor.
Yerine bu alternatifi denemek isteyebilirsiniz.

4. Internet Explorer

Evet, IE 7.0 IE 6.0’dan daha iyi fakat yinede çok iyi değil. Hala çok kötü. Web programcılarına geçen ay kaç saatlerinin sitelerini IE’da çalışabilmesi için çalıştıklarını sorun, o zaman durumu anlayacaksınız.

Eğer Firefox’u kullanmıyorsanız, hemen başlayabilirsiniz.

5. Microsoft Outloo

Merhaba Microsoft! Lütfen! Artık 2008’deyiz. Nasıl oluyorda Gmail ve yahoo’nun mailleri daha hızlı ve daha fazla özelliğe ve zenginliğe sahip oluyor?

Gerçekle yüzleşelim. İşlemciniz Ne kadar hızlı olursa olsun. Harddiskiniz ne kadar büyük olursa olsun Veya kaç gigabytelık ram sahibi olursanız olun bilgisayarınız hiçbir zaman çok hızlı olmayacaktır. Tabiki bunlar gibi c harddiskinizi kaplayacak programlardan kurtulmadığınız sürece. Eğer bu da size çok hızlı geliyorsa belki de Vista’ya downgrade yapmak isteyebilirsiniz.

Not: Arkadaşlar burada belirtilen yazıları çevirmeye çalıştım inşallah başarılı olmuşumdur.

Bu yazı mstdokumaci 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

Google Pagerank Hakkında Ne Biliyoruz?

mstdokumaci — Sun, 10 Jun 2007 14:29:00 GMT

Nedir bu pagerank? Nasıl çalışır? Pagerank hakkındaki doğrular ve gerçekler... Şurdan edindiğim bilgiyi derledim ve kısa bir özetini çıkardım.

PAGERANK(PR) NASIL ÇALIŞIR?
1.Pagerank Google’un o sayfanın uygunluğunu ya da önemini belirlemek için kullandığı çeşitli metodlardan sadece birisidir.

2.Google A sayfasından B sayfasına verilen linki sadece bir tavsiye olarak yorumlamaktadır. Google sadece tavsiyelerin yoğunluğuna bakmaz;diğer 100 koşula göre sayfayı analiz eder ve tercihini yapar.

3.Pagerank’ın temeli sayfaya verilen linklerdir, fakat linklerin sayısından çok ilgili ve kaliteli olması daha önemlidir.

4.Bütün linkler pagerank hesapmalasında aynı değere sahip değillerdir.

5.Eğer PR’ı 8 olan bir siteniz varsa ve bu siteden benim siteme bir link varsa , link verilen site makul bir Pr değeri alacaktır. Fakat, siz bu sitede 100 tane linke sahipseniz her özel link Pr değerinin bir kısmını alacaktır.

6.Site hakkında verilen kötü linkler Pagerank değeri üzerinde bir etki yapmaz.

7. Ranking popülaritesi sitenin geçmişini, backlink uygunluğunu ve baclink sürecini önemser. Pagerank ise önemsemez.

8.Pagerank hesaplanırken içerik hesaba katılmaz.

9.Pagerank web sitelerini bir bütün olarak sıralamaz, her sayfa için özel olarak belirlenir.

10.Diğer sitelerden verilen linklerin her biri toplamda önemlidir. Yasaklanan sitelerden verilen linkler sayılmazlar.

11.Pagerank değerleri 0’dan 10’a kadar sıralanmazlar. Pagerank değeri değişebilen bir sayıdır.

12.Her Pagerank seviyesine ulaşılması ilerledikçe zorlaşmaktadır.Pagerank’ın logaritmik bir ölçüde hesaplanıldığına inanılmaktadır.

13.Google Pagerank değerini sürekli hesaplar fakat biz güncellenmiş halini her ay Google Toolbar’da görürüz.

Bu yazı mstdokumaci 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